dashboard: split prod and preview deploy key lists into separate sections (#42260)

Also removes the callout that displayed when viewing the keys - it was unnecessary GitOrigin-RevId: c55540c6f99048c56413cbca05a6170aab4863a1

Author: atrakh

npm-packages/dashboard/src/components/AccessTokenListItem.tsx

@@ -2,7 +2,6 @@ import { EyeOpenIcon, EyeNoneIcon, Cross2Icon } from "@radix-ui/react-icons";
 import { AccessTokenListKind, useDeleteAccessToken } from "api/accessTokens";
 import { Button } from "@ui/Button";
 import { TimestampDistance } from "@common/elements/TimestampDistance";
-import { Callout } from "@ui/Callout";
 import { ConfirmationDialog } from "@ui/ConfirmationDialog";
 import { CopyTextButton } from "@common/elements/CopyTextButton";
 import { TeamAccessTokenResponse } from "generatedApi";
@@ -17,15 +16,13 @@ export function AccessTokenListItem({
  kind,
  shouldShow,
  showMemberName = true,
- showCallout = true,
 }: {
  token: TeamAccessTokenResponse;
  identifier: string;
  tokenPrefix?: string;
  kind: AccessTokenListKind;
  shouldShow: boolean;
  showMemberName?: boolean;
- showCallout?: boolean;
 }) {
  const team = useCurrentTeam();
  const members = useTeamMembers(team?.id);
@@ -98,14 +95,7 @@ export function AccessTokenListItem({
  </div>
  <div className="mb-2 flex items-center gap-1">
  {showToken && (
- <div className="flex flex-col gap-1">
- {showCallout && (
- <Callout variant="instructions" className="mb-2 max-w-[30rem]">
- This key enables reading and writing data to your deployment
- without needing to log in, so it should not be shared or
- committed to git.
- </Callout>
- )}
+ <div className="mt-1 flex flex-col gap-1">
  <CopyTextButton
  text={
  tokenPrefix

npm-packages/dashboard/src/components/deploymentSettings/DeploymentAccessTokenList.tsx

@@ -19,6 +19,7 @@ export function DeploymentAccessTokenList({
  buttonProps,
  header,
  description,
+ headingLevel = "h4",
 }: {
  identifier: string;
  tokenPrefix: string;
@@ -31,12 +32,14 @@ export function DeploymentAccessTokenList({
  >;
  header: string;
  description: React.ReactNode;
+ headingLevel?: "h3" | "h4";
 }) {
  const [latestToken, setLatestToken] = useState<string | null>(null);
+ const HeadingTag = (headingLevel ?? "h4") as keyof JSX.IntrinsicElements;
  return (
  <>
  <div className="mb-2 flex w-full items-center justify-between">
- <h4>{header}</h4>
+ <HeadingTag>{header}</HeadingTag>
  <GenerateDeployKeyWithNameButton
  {...buttonProps}
  onCreateAccessToken={setLatestToken}
@@ -64,7 +67,6 @@ export function DeploymentAccessTokenList({
  latestToken.endsWith(token.serializedAccessToken)
  }
  showMemberName
- showCallout
  />
  ))
  ) : (

npm-packages/dashboard/src/components/teamSettings/TeamAccessTokens.tsx

@@ -94,7 +94,6 @@ export function TeamAccessTokens({
  identifier={team.id.toString()}
  shouldShow={false}
  showMemberName={false}
- showCallout={false}
  />
  ))
  ) : (

npm-packages/dashboard/src/pages/t/[team]/[project]/settings.tsx

@@ -59,7 +59,8 @@ const SECTION_IDS = {
  projectRoles: "project-roles",
  projectUsage: "project-usage",
  customDomains: "custom-domains",
- deployKeys: "deploy-keys",
+ productionDeployKeys: "production-deploy-keys",
+ previewDeployKeys: "preview-deploy-keys",
  authorizedApps: "applications",
  envVars: "env-vars",
  lostAccess: "lost-access",
@@ -72,7 +73,8 @@ const sections = [
  { id: SECTION_IDS.projectRoles, label: "Project Admins" },
  { id: SECTION_IDS.projectUsage, label: "Project Usage" },
  { id: SECTION_IDS.customDomains, label: "Custom Domains" },
- { id: SECTION_IDS.deployKeys, label: "Deploy Keys" },
+ { id: SECTION_IDS.productionDeployKeys, label: "Production Deploy Keys" },
+ { id: SECTION_IDS.previewDeployKeys, label: "Preview Deploy Keys" },
  {
  id: SECTION_IDS.authorizedApps,
  label: "Authorized Applications",
@@ -377,13 +379,18 @@ function ProjectSettings() {
  </div>
  )}
  {project && (
- <div id={SECTION_IDS.deployKeys}>
- <GenerateDeployKey
+ <div id={SECTION_IDS.productionDeployKeys}>
+ <ProductionDeployKeys
  project={project}
  hasAdminPermissions={hasAdminPermissions}
  />
  </div>
  )}
+ {project && (
+ <div id={SECTION_IDS.previewDeployKeys}>
+ <PreviewDeployKeys project={project} />
+ </div>
+ )}
  {project && (
  <div id={SECTION_IDS.authorizedApps}>
  <AuthorizedApplications
@@ -482,27 +489,6 @@ function DeleteProject() {
  );
 }
 
-function GenerateDeployKey({
- project,
- hasAdminPermissions,
-}: {
- project: ProjectDetails;
- hasAdminPermissions: boolean;
-}) {
- return (
- <Sheet className="flex flex-col gap-4">
- <h3>Deploy Keys</h3>
- <div className="flex flex-col gap-4 divide-y">
- <ProductionDeployKeys
- project={project}
- hasAdminPermissions={hasAdminPermissions}
- />
- <PreviewDeployKeys project={project} />
- </div>
- </Sheet>
- );
-}
-
 function ProductionDeployKeys({
  project,
  hasAdminPermissions,
@@ -529,7 +515,7 @@ function ProductionDeployKeys({
 
  const deployKeyDescription = (
  <p className="mb-2 text-sm text-content-primary">
- This is the key for your{" "}
+ These keys are for your{" "}
  <Link passHref href={prodHref} className="text-content-link">
  <DeploymentType deploymentType="prod" /> deployment
  </Link>
@@ -557,40 +543,43 @@ function ProductionDeployKeys({
  );
 
  return (
- <div className="flex flex-col gap-2">
- {team && prodDeployment ? (
- <DeploymentAccessTokenList
- header="Production"
- description={deployKeyDescription}
- disabledReason={disabledReason}
- buttonProps={{
- deploymentType: "prod",
- getAdminKey: async (name: string) =>
- getAccessTokenBasedDeployKey(
- prodDeployment,
- project,
- team,
- `prod:${prodDeployment.name}`,
- accessToken,
- createAccessTokenMutation,
- name,
- ),
- disabledReason,
- }}
- identifier={prodDeployment.name}
- tokenPrefix={`prod:${prodDeployment.name}`}
- accessTokens={accessTokens}
- kind="deployment"
- />
- ) : (
- <div className="mb-4">
- <h4 className="mb-2">Production</h4>
- <p className="text-sm text-content-primary">
- This project does not have a Production deployment yet.
- </p>
- </div>
- )}
- </div>
+ <Sheet className="flex flex-col gap-4">
+ <div className="flex flex-col gap-2">
+ {team && prodDeployment ? (
+ <DeploymentAccessTokenList
+ header="Production Deploy Keys"
+ headingLevel="h3"
+ description={deployKeyDescription}
+ disabledReason={disabledReason}
+ buttonProps={{
+ deploymentType: "prod",
+ getAdminKey: async (name: string) =>
+ getAccessTokenBasedDeployKey(
+ prodDeployment,
+ project,
+ team,
+ `prod:${prodDeployment.name}`,
+ accessToken,
+ createAccessTokenMutation,
+ name,
+ ),
+ disabledReason,
+ }}
+ identifier={prodDeployment.name}
+ tokenPrefix={`prod:${prodDeployment.name}`}
+ accessTokens={accessTokens}
+ kind="deployment"
+ />
+ ) : (
+ <>
+ <h3>Production Deploy Keys</h3>
+ <p className="text-sm text-content-primary">
+ This project does not have a Production deployment yet.
+ </p>
+ </>
+ )}
+ </div>
+ </Sheet>
  );
 }
 
@@ -632,62 +621,64 @@ function PreviewDeployKeys({ project }: { project: ProjectDetails }) {
  </p>
  );
 
- if (!arePreviewDeploymentsAvailable) {
- return (
- <div className="pt-4">
- <Callout>
- <p>
- <Link
- passHref
- href="https://docs.convex.dev/production/hosting/preview-deployments"
- className="underline"
- target="_blank"
- >
- Preview deployments
- </Link>
- {" are only available on the Pro plan. "}
- <Link
- href={`/${selectedTeamSlug}/settings/billing`}
- className="underline"
- >
- Upgrade to get access.
- </Link>
- </p>
- </Callout>
- <LocalDevCallout
- tipText="Tip: Run this to enable preview deployments locally:"
- command={`cargo run --bin big-brain-tool -- --dev grant-entitlement --team-entitlement project_max_preview_deployments --team-id ${team?.id} --reason "local" 200 --for-real`}
- />
- </div>
- );
- }
-
  return (
- <div className="flex flex-col gap-2 pt-4">
- {team && accessToken && createProjectAccessTokenMutation && (
- <DeploymentAccessTokenList
- identifier={project.id.toString()}
- tokenPrefix={`preview:${selectedTeamSlug}:${project.slug}`}
- accessTokens={projectAccessTokens}
- kind="project"
- disabledReason={null}
- buttonProps={{
- deploymentType: "preview",
- disabledReason: null,
- getAdminKey: async (name: string) =>
- getAccessTokenBasedDeployKeyForPreview(
- project,
- team,
- `preview:${selectedTeamSlug}:${project.slug}`,
- accessToken,
- createProjectAccessTokenMutation,
- name,
- ),
- }}
- header="Preview"
- description={deployKeyDescription}
- />
+ <Sheet className="flex flex-col gap-4">
+ {!arePreviewDeploymentsAvailable ? (
+ <>
+ <h3>Preview Deploy Keys</h3>
+ <Callout>
+ <p>
+ <Link
+ passHref
+ href="https://docs.convex.dev/production/hosting/preview-deployments"
+ className="underline"
+ target="_blank"
+ >
+ Preview deployments
+ </Link>
+ {" are only available on the Pro plan. "}
+ <Link
+ href={`/${selectedTeamSlug}/settings/billing`}
+ className="underline"
+ >
+ Upgrade to get access.
+ </Link>
+ </p>
+ </Callout>
+ <LocalDevCallout
+ tipText="Tip: Run this to enable preview deployments locally:"
+ command={`cargo run --bin big-brain-tool -- --dev grant-entitlement --team-entitlement project_max_preview_deployments --team-id ${team?.id} --reason "local" 200 --for-real`}
+ />
+ </>
+ ) : (
+ <div className="flex flex-col gap-2">
+ {team && accessToken && createProjectAccessTokenMutation && (
+ <DeploymentAccessTokenList
+ identifier={project.id.toString()}
+ tokenPrefix={`preview:${selectedTeamSlug}:${project.slug}`}
+ accessTokens={projectAccessTokens}
+ kind="project"
+ disabledReason={null}
+ buttonProps={{
+ deploymentType: "preview",
+ disabledReason: null,
+ getAdminKey: async (name: string) =>
+ getAccessTokenBasedDeployKeyForPreview(
+ project,
+ team,
+ `preview:${selectedTeamSlug}:${project.slug}`,
+ accessToken,
+ createProjectAccessTokenMutation,
+ name,
+ ),
+ }}
+ header="Preview Deploy Keys"
+ headingLevel="h3"
+ description={deployKeyDescription}
+ />
+ )}
+ </div>
  )}
- </div>
+ </Sheet>
  );
 }