dashboard: add list of authorized application to project settings page (#34508)

GitOrigin-RevId: 96bc36d44efd944ce52fe72fa9d83766a526f71c

Author: atrakh

Diff for: npm-packages/dashboard/src/api/accessTokens.ts

@@ -24,6 +24,17 @@ export function useInstanceAccessTokens(deploymentName?: string) {
   return accessTokens;
 }
 
+export function useProjectAppAccessTokens(projectId?: number) {
+  const { data: accessTokens } = useBBQuery({
+    path: "/projects/{project_id}/app_access_tokens",
+    pathParams: {
+      project_id: projectId?.toString() || "",
+    },
+  });
+
+  return accessTokens;
+}
+
 export function useProjectAccessTokens(projectId?: number) {
   const { data: accessTokens } = useBBQuery({
     path: "/projects/{project_id}/access_tokens",

Diff for: npm-packages/dashboard/src/components/AuthorizeProject.tsx

@@ -192,24 +192,26 @@ export function AuthorizeProject() {
               </div>
             ) : (
               <div className="flex flex-wrap items-end gap-2">
-                <div className="flex flex-col gap-1">
-                  <Combobox
-                    options={
-                      projects?.map((project) => ({
-                        label: project.name,
-                        value: project.id,
-                      })) ?? []
-                    }
-                    label="Select a project"
-                    labelHidden={false}
-                    selectedOption={selectedProjectId}
-                    setSelectedOption={setSelectedProjectId}
-                    disabled={projects === null}
-                  />
-                </div>
+                {projects && projects.length > 0 && (
+                  <div className="flex flex-col gap-1">
+                    <Combobox
+                      options={
+                        projects.map((project) => ({
+                          label: project.name,
+                          value: project.id,
+                        })) ?? []
+                      }
+                      label="Select a project"
+                      labelHidden={false}
+                      selectedOption={selectedProjectId}
+                      setSelectedOption={setSelectedProjectId}
+                      disabled={projects === null}
+                    />
+                  </div>
+                )}
                 {!didCreateProject && (
                   <div className="flex items-center gap-2">
-                    or
+                    {projects && projects.length > 0 && "or"}
                     <Button
                       variant="neutral"
                       onClick={() => {

Diff for: npm-packages/dashboard/src/components/deploymentSettings/DeploymentAccessTokenListItem.tsx

@@ -30,7 +30,7 @@ export function DeploymentAccessTokenListItem({
   useEffect(() => {
     shouldShow && setShowToken(shouldShow);
   }, [shouldShow]);
-  const [showDeleteConfirmatino, setShowDeleteConfirmation] = useState(false);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
 
   const member = members?.find((m) => m.id === token.creator);
 
@@ -103,7 +103,7 @@ export function DeploymentAccessTokenListItem({
           </div>
         )}
       </div>
-      {showDeleteConfirmatino && (
+      {showDeleteConfirmation && (
         <ConfirmationDialog
           onClose={() => {
             setShowDeleteConfirmation(false);

Diff for: npm-packages/dashboard/src/components/projectSettings/AuthorizedApplications.tsx

@@ -0,0 +1,85 @@
+import { AppAccessTokenResponse, ProjectDetails } from "generatedApi";
+
+import { Sheet } from "dashboard-common/elements/Sheet";
+import { useProjectAppAccessTokens } from "api/accessTokens";
+import { LoadingTransition } from "dashboard-common/elements/Loading";
+import { TimestampDistance } from "dashboard-common/elements/TimestampDistance";
+import { Button } from "dashboard-common/elements/Button";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+export function AuthorizedApplications({
+  project,
+}: {
+  project: ProjectDetails;
+}) {
+  const projectAccessTokens = useProjectAppAccessTokens(project.id);
+
+  return (
+    <Sheet>
+      <h3 className="mb-2">Authorized Applications</h3>
+      <p className="text-sm text-content-primary">
+        These 3rd-party applications have been authorized to access this project
+        on your behalf.
+      </p>
+      <p className="mb-2 mt-1 text-sm text-content-primary">
+        You cannot see applications that other members of your team have
+        authorized.
+      </p>
+      <LoadingTransition
+        loadingProps={{ fullHeight: false, className: "h-14 w-full" }}
+      >
+        {projectAccessTokens && (
+          <div className="flex w-full flex-col gap-2">
+            {projectAccessTokens.length ? (
+              projectAccessTokens.map((token, idx) => (
+                <AuthorizedApplicationListItem key={idx} token={token} />
+              ))
+            ) : (
+              <div className="my-2 text-content-secondary">
+                You have not authorized any applications yet.
+              </div>
+            )}
+          </div>
+        )}
+      </LoadingTransition>
+    </Sheet>
+  );
+}
+
+function AuthorizedApplicationListItem({
+  token,
+}: {
+  token: AppAccessTokenResponse;
+}) {
+  return (
+    <div className="flex w-full flex-col">
+      <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+        <div>{token.appName}</div>
+        <div className="flex flex-wrap items-center gap-4">
+          <div className="flex flex-col items-end">
+            {token.lastUsedTime !== null && token.lastUsedTime !== undefined ? (
+              <TimestampDistance
+                prefix="Last used "
+                date={new Date(token.lastUsedTime)}
+              />
+            ) : (
+              <div className="text-xs text-content-secondary">Never used</div>
+            )}
+            <TimestampDistance
+              prefix="Created "
+              date={new Date(token.creationTime)}
+            />
+            <Button
+              variant="danger"
+              icon={<Cross2Icon />}
+              disabled
+              tip="Coming soon."
+            >
+              Revoke
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Diff for: npm-packages/dashboard/src/components/deploymentSettings/CustomDomains.tsx renamed to npm-packages/dashboard/src/components/projectSettings/CustomDomains.tsx

@@ -23,7 +23,7 @@ import {
   LostAccessDescription,
 } from "components/projects/modals/LostAccessModal";
 import { withAuthenticatedPage } from "lib/withAuthenticatedPage";
-import { DefaultEnvironmentVariables } from "components/deploymentSettings/DefaultEnvironmentVariables";
+import { DefaultEnvironmentVariables } from "components/projectSettings/DefaultEnvironmentVariables";
 import {
   getAccessTokenBasedDeployKey,
   getAccessTokenBasedDeployKeyForPreview,
@@ -35,16 +35,18 @@ import Head from "next/head";
 import { useAccessToken } from "hooks/useServerSideData";
 import { MemberProjectRoles } from "components/projects/MemberProjectRoles";
 import { DeploymentAccessTokenList } from "components/deploymentSettings/DeploymentAccessTokenList";
-import { CustomDomains } from "components/deploymentSettings/CustomDomains";
+import { CustomDomains } from "components/projectSettings/CustomDomains";
 import { TransferProject } from "components/projects/TransferProject";
 import { cn } from "dashboard-common/lib/cn";
+import { AuthorizedApplications } from "components/projectSettings/AuthorizedApplications";
 
 const SECTION_IDS = {
   projectForm: "project-form",
   projectRoles: "project-roles",
   projectUsage: "project-usage",
   customDomains: "custom-domains",
   deployKeys: "deploy-keys",
+  authorizedApplications: "authorized-applications",
   envVars: "env-vars",
   lostAccess: "lost-access",
   transferProject: "transfer-project",
@@ -69,6 +71,10 @@ function SettingsNavigation() {
       { id: SECTION_IDS.projectUsage, label: "Project Usage" },
       { id: SECTION_IDS.customDomains, label: "Custom Domains" },
       { id: SECTION_IDS.deployKeys, label: "Deploy Keys" },
+      {
+        id: SECTION_IDS.authorizedApplications,
+        label: "Authorized Applications",
+      },
       { id: SECTION_IDS.envVars, label: "Environment Variables" },
       { id: SECTION_IDS.lostAccess, label: "Lost Access" },
       { id: SECTION_IDS.transferProject, label: "Transfer Project" },
@@ -129,7 +135,7 @@ function SettingsNavigation() {
   return (
     <nav
       data-settings-nav
-      className="sticky top-24 hidden h-fit max-h-[calc(100vh-12rem)] w-[13rem] shrink-0 overflow-visible pr-8 md:block"
+      className="sticky top-24 hidden h-fit max-h-[calc(100vh-12rem)] w-[14rem] shrink-0 overflow-visible pr-8 md:block"
       aria-label="Settings navigation"
     >
       <div
@@ -264,6 +270,11 @@ function ProjectSettings() {
                 />
               </div>
             )}
+            {project && (
+              <div id={SECTION_IDS.authorizedApplications}>
+                <AuthorizedApplications project={project} />
+              </div>
+            )}
             <div id={SECTION_IDS.envVars}>
               <DefaultEnvironmentVariables />
             </div>