dashboard: add authorized team applications page (#39117)

GitOrigin-RevId: 8cb16dd9330bcfc9fea0482805397085aa018ed1

Author: atrakh

npm-packages/dashboard/src/api/accessTokens.ts

@@ -13,6 +13,17 @@ export function useTeamAccessTokens(teamId?: number) {
   return accessTokens;
 }
 
+export function useTeamAppAccessTokens(teamId?: number) {
+  const { data: accessTokens } = useBBQuery({
+    path: "/teams/{team_id}/app_access_tokens",
+    pathParams: {
+      team_id: teamId?.toString() || "",
+    },
+  });
+
+  return accessTokens;
+}
+
 export function useInstanceAccessTokens(deploymentName?: string) {
   const { data: accessTokens } = useBBQuery({
     path: "/instances/{deployment_name}/access_tokens",

npm-packages/dashboard/src/components/projectSettings/AuthorizedApplications.tsx

@@ -1,46 +1,36 @@
-import { AppAccessTokenResponse, ProjectDetails } from "generatedApi";
-
+import { AppAccessTokenResponse } from "generatedApi";
 import { Sheet } from "@ui/Sheet";
-import {
-  useDeleteAppAccessTokenByName,
-  useProjectAppAccessTokens,
-} from "api/accessTokens";
 import { LoadingTransition } from "@ui/Loading";
 import { TimestampDistance } from "@common/elements/TimestampDistance";
 import { Button } from "@ui/Button";
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import React, { useState } from "react";
 import { ConfirmationDialog } from "@ui/ConfirmationDialog";
 
 export function AuthorizedApplications({
-  project,
+  accessTokens,
+  explainer,
+  onRevoke,
 }: {
-  project: ProjectDetails;
+  accessTokens: AppAccessTokenResponse[] | undefined;
+  explainer: React.ReactNode;
+  onRevoke: (token: AppAccessTokenResponse) => Promise<void>;
 }) {
-  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="mt-1 mb-2 text-sm text-content-primary">
-        You cannot see applications that other members of your team have
-        authorized.
-      </p>
+      {explainer}
       <LoadingTransition
         loadingProps={{ fullHeight: false, className: "h-14 w-full" }}
       >
-        {projectAccessTokens !== undefined && (
+        {accessTokens !== undefined && (
           <div className="flex w-full flex-col gap-2">
-            {projectAccessTokens.length ? (
-              projectAccessTokens.map((token, idx) => (
+            {accessTokens.length ? (
+              accessTokens.map((token, idx) => (
                 <AuthorizedApplicationListItem
                   key={idx}
                   token={token}
-                  project={project}
+                  onRevoke={onRevoke}
                 />
               ))
             ) : (
@@ -55,16 +45,15 @@ export function AuthorizedApplications({
   );
 }
 
-function AuthorizedApplicationListItem({
-  project,
+export function AuthorizedApplicationListItem({
   token,
+  onRevoke,
 }: {
-  project: ProjectDetails;
   token: AppAccessTokenResponse;
+  onRevoke: (token: AppAccessTokenResponse) => Promise<void>;
 }) {
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const deleteAppAccessTokenByName = useDeleteAppAccessTokenByName(project.id);
   return (
     <div className="flex w-full flex-col">
       <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
@@ -103,7 +92,7 @@ function AuthorizedApplicationListItem({
           onConfirm={async () => {
             setIsDeleting(true);
             try {
-              await deleteAppAccessTokenByName({ name: token.name });
+              await onRevoke(token);
             } finally {
               setIsDeleting(false);
             }

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

@@ -98,6 +98,7 @@ export function AuditLogToolbar({
             [(option) => option.label.toLowerCase()],
           ),
         ]}
+        optionsWidth="fit"
         allowCustomValue
         selectedOption={selectedMember}
         setSelectedOption={(o) =>

npm-packages/dashboard/src/hooks/useLaunchDarkly.tsx

@@ -16,6 +16,7 @@ const flagDefaults: {
   commandPaletteDeleteProjects: boolean;
   multipleUserIdentities: boolean;
   changePrimaryIdentity: boolean;
+  showTeamOauthTokens: boolean;
 } = {
   oauthProviderConfiguration: {},
   enableIndexFilters: false,
@@ -24,6 +25,7 @@ const flagDefaults: {
   commandPaletteDeleteProjects: false,
   multipleUserIdentities: false,
   changePrimaryIdentity: false,
+  showTeamOauthTokens: false,
 };
 
 function kebabCaseKeys(object: typeof flagDefaults) {

npm-packages/dashboard/src/layouts/TeamSettingsLayout.tsx

@@ -21,12 +21,13 @@ export function TeamSettingsLayout({
     | "usage"
     | "audit-log"
     | "access-tokens"
-    | "referrals";
+    | "referrals"
+    | "authorized-applications";
   Component: React.FunctionComponent<{ team: Team }>;
   title: string;
 }) {
   const selectedTeam = useCurrentTeam();
-  const { referralsPage } = useLaunchDarkly();
+  const { referralsPage, showTeamOauthTokens } = useLaunchDarkly();
 
   const auditLogsEnabled = useTeamEntitlements(
     selectedTeam?.id,
@@ -38,6 +39,7 @@ export function TeamSettingsLayout({
     "billing",
     "usage",
     ...(referralsPage ? ["referrals"] : []),
+    ...(showTeamOauthTokens ? ["authorized-applications"] : []),
   ];
 
   return (
@@ -59,7 +61,7 @@ export function TeamSettingsLayout({
           <aside
             className={classNames(
               "flex sm:flex-col gap-1",
-              "min-w-40 sm:w-fit",
+              "min-w-52 sm:w-fit",
               "min-h-fit",
               "px-3 py-2",
               "overflow-x-auto scrollbar-none",

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

@@ -13,12 +13,14 @@ import {
   useCreateTeamAccessToken,
   useInstanceAccessTokens,
   useProjectAccessTokens,
+  useProjectAppAccessTokens,
+  useDeleteAppAccessTokenByName,
 } from "api/accessTokens";
 import { useHasProjectAdminPermissions } from "api/roles";
 import { useRouter } from "next/router";
 import { useState, useEffect, useMemo } from "react";
 import { ProjectForm } from "components/projects/ProjectForm";
-import { TrashIcon } from "@radix-ui/react-icons";
+import { TrashIcon, InfoCircledIcon } from "@radix-ui/react-icons";
 import {
   LostAccessCommand,
   LostAccessDescription,
@@ -40,6 +42,8 @@ import { CustomDomains } from "components/projectSettings/CustomDomains";
 import { TransferProject } from "components/projects/TransferProject";
 import { cn } from "@ui/cn";
 import { AuthorizedApplications } from "components/projectSettings/AuthorizedApplications";
+import { Tooltip } from "@ui/Tooltip";
+import { useLaunchDarkly } from "hooks/useLaunchDarkly";
 
 const SECTION_IDS = {
   projectForm: "project-form",
@@ -191,6 +195,55 @@ function ProjectSettings() {
   const hasAdminPermissions = useHasProjectAdminPermissions(project?.id);
   const router = useRouter();
 
+  const projectAppAccessTokens = useProjectAppAccessTokens(project?.id);
+  const deleteAppAccessTokenByName = useDeleteAppAccessTokenByName(
+    project?.id!,
+  );
+
+  const { showTeamOauthTokens } = useLaunchDarkly();
+
+  const authorizedAppsExplainer = (
+    <>
+      <p className="text-sm text-content-primary">
+        These 3rd-party applications have been authorized to access this project
+        on your behalf.
+      </p>
+      <div className="mt-2 mb-2 text-sm text-content-primary">
+        <span className="font-semibold">
+          What can authorized applications do?
+        </span>
+        <ul className="mt-1 list-disc pl-4">
+          <li>Create new projects</li>
+          <li>Create new deployments</li>
+          <li>
+            <span className="flex items-center gap-1">
+              Read and write data in any deployment in this project
+              <Tooltip tip="Write access to Production deployments will depend on your team-level and project-level roles.">
+                <InfoCircledIcon />
+              </Tooltip>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <p className="mt-1 mb-2 text-sm text-content-primary">
+        You cannot see applications that other members of your team have
+        authorized.
+      </p>
+      {team && showTeamOauthTokens && (
+        <p className="mt-1 mb-2 text-xs text-content-secondary">
+          There may also be <b>team-wide authorized applications</b> that can
+          access all projects in this team. You can view them in{" "}
+          <Link
+            href={`/t/${team.slug}/settings/authorized-applications`}
+            className="text-content-link hover:underline"
+          >
+            Team Settings
+          </Link>{" "}
+        </p>
+      )}
+    </>
+  );
+
   useEffect(() => {
     // Handle initial scroll based on hash
     if (typeof window !== "undefined" && window.location.hash) {
@@ -273,7 +326,13 @@ function ProjectSettings() {
             )}
             {project && (
               <div id={SECTION_IDS.authorizedApplications}>
-                <AuthorizedApplications project={project} />
+                <AuthorizedApplications
+                  accessTokens={projectAppAccessTokens}
+                  explainer={authorizedAppsExplainer}
+                  onRevoke={async (token) => {
+                    await deleteAppAccessTokenByName({ name: token.name });
+                  }}
+                />
               </div>
             )}
             <div id={SECTION_IDS.envVars}>

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

@@ -0,0 +1,73 @@
+import { TeamSettingsLayout } from "layouts/TeamSettingsLayout";
+import { withAuthenticatedPage } from "lib/withAuthenticatedPage";
+import {
+  useTeamAppAccessTokens,
+  useDeleteTeamAccessToken,
+} from "api/accessTokens";
+import { useCurrentTeam } from "api/teams";
+import { AppAccessTokenResponse, Team } from "generatedApi";
+import { AuthorizedApplications } from "components/projectSettings/AuthorizedApplications";
+import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { Tooltip } from "@ui/Tooltip";
+import React from "react";
+
+function TeamAuthorizedApplicationsPage({ team }: { team: Team }) {
+  const teamAccessTokens = useTeamAppAccessTokens(team.id);
+  const deleteTeamAccessToken = useDeleteTeamAccessToken(team.id);
+
+  const explainer = (
+    <>
+      <p className="text-sm text-content-primary">
+        These 3rd-party applications have been authorized to access this team on
+        your behalf.
+      </p>
+      <div className="mt-2 mb-2 text-sm text-content-primary">
+        <span className="font-semibold">
+          What can authorized applications do?
+        </span>
+        <ul className="mt-1 list-disc pl-4">
+          <li>Create new projects</li>
+          <li>Create new deployments</li>
+          <li>
+            <span className="flex items-center gap-1">
+              Read and write data in all projects
+              <Tooltip tip="Write access to Production deployments will depend on your team-level and project-level roles.">
+                <InfoCircledIcon />
+              </Tooltip>
+            </span>
+          </li>
+        </ul>
+      </div>
+      <p className="mt-1 mb-2 text-sm text-content-primary">
+        You cannot see applications that other members of your team have
+        authorized.
+      </p>
+      <p className="mt-1 mb-2 text-xs text-content-secondary">
+        You can view authorized applications for each project in the respective
+        Settings page for each project.
+      </p>
+    </>
+  );
+
+  return (
+    <AuthorizedApplications
+      accessTokens={teamAccessTokens}
+      explainer={explainer}
+      onRevoke={async (token: AppAccessTokenResponse) => {
+        await deleteTeamAccessToken({ name: token.name } as any);
+      }}
+    />
+  );
+}
+
+export default withAuthenticatedPage(() => {
+  const team = useCurrentTeam();
+  if (!team) return null;
+  return (
+    <TeamSettingsLayout
+      page="authorized-applications"
+      Component={() => <TeamAuthorizedApplicationsPage team={team} />}
+      title="Authorized Applications"
+    />
+  );
+});