Refactor policies document

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
2026-01-02 11:04:48 +01:00
parent cbf338fd14
commit 4013b00841
75 changed files with 1958 additions and 1230 deletions
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx
@@ -6,10 +6,9 @@ import {
  useFragment,
  useMutation,
 } from "react-relay";
-import type { RecordSourceSelectorProxy } from "relay-runtime";
 import { z } from "zod";
 import { useTranslate } from "@probo/i18n";
-import { formatError, type GraphQLError } from "@probo/helpers";
+import { formatError } from "@probo/helpers";
 import {
  Breadcrumb,
  Button,
@@ -22,15 +21,12 @@ import {
  Label,
  Option,
  Select,
-  useConfirm,
  useDialogRef,
  useToast,
 } from "@probo/ui";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import type { PersonalAPIKeyListFragment$key } from "/__generated__/iam/PersonalAPIKeyListFragment.graphql";
 import type { PersonalAPIKeyListCreateMutation } from "/__generated__/iam/PersonalAPIKeyListCreateMutation.graphql";
-import type { PersonalAPIKeyListRevokeMutation } from "/__generated__/iam/PersonalAPIKeyListRevokeMutation.graphql";
-import type { PersonalAPIKeyListRevealTokenMutation } from "/__generated__/iam/PersonalAPIKeyListRevealTokenMutation.graphql";
 import { PersonalAPIKeysTable } from "./PersonalAPIKeysTable";
 import { PersonalAPIKeyTokenDialog } from "./PersonalAPIKeyTokenDialog";

@@ -44,10 +40,7 @@ const fragment = graphql`
      edges @required(action: THROW) {
        node {
          id
-          name
-          createdAt
-          expiresAt
-          lastUsedAt
+          ...PersonalAPIKeyRowFragment
        }
      }
    }
@@ -66,7 +59,6 @@ const createMutation = graphql`
          name
          createdAt
          expiresAt
-          lastUsedAt
        }
      }
      token
@@ -74,26 +66,6 @@ const createMutation = graphql`
  }
 `;

-const revokeMutation = graphql`
-  mutation PersonalAPIKeyListRevokeMutation(
-    $input: RevokePersonalAPIKeyInput!
-  ) {
-    revokePersonalAPIKey(input: $input) {
-      success
-    }
-  }
-`;
-
-const revealTokenMutation = graphql`
-  mutation PersonalAPIKeyListRevealTokenMutation(
-    $input: RevealPersonalAPIKeyTokenInput!
-  ) {
-    revealPersonalAPIKeyToken(input: $input) {
-      token
-    }
-  }
-`;
-
 const createSchema = z.object({
  name: z.string().min(1, "Name is required"),
  expiresIn: z.enum(["1month", "3months", "6months", "1year"]),
@@ -126,7 +98,6 @@ export function PersonalAPIKeyList(props: {
  const { fKey } = props;
  const { __ } = useTranslate();
  const { toast } = useToast();
-  const confirm = useConfirm();
  const createDialogRef = useDialogRef();
  const tokenDialogRef = useDialogRef();

@@ -134,9 +105,12 @@ export function PersonalAPIKeyList(props: {

  const viewer = useFragment(fragment, fKey);

-  const keys = viewer.personalAPIKeys.edges.map(({ node }) => node);
+  const connectionID = ConnectionHandler.getConnectionID(
+    viewer.id,
+    "PersonalAPIKeyListFragment_personalAPIKeys"
+  );

-  const { formState, handleSubmit, register, control, reset, watch } =
+  const { formState, handleSubmit, register, control, reset } =
    useFormWithSchema(createSchema, {
      defaultValues: {
        name: new Date().toISOString().split("T")[0],
@@ -144,20 +118,14 @@ export function PersonalAPIKeyList(props: {
      },
    });

-  watch();
-
  const [createCommit, isCreating] =
    useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
-  const [revokeCommit] =
-    useMutation<PersonalAPIKeyListRevokeMutation>(revokeMutation);
-  const [revealTokenCommit, isRevealingToken] =
-    useMutation<PersonalAPIKeyListRevealTokenMutation>(revealTokenMutation);

  const handleCreate = (data: CreateFormData) => {
    const expiresAt = computeExpiresAt(data.expiresIn);
    const connectionID = ConnectionHandler.getConnectionID(
      viewer.id,
-      "PersonalAPIKeyListFragment_personalAPIKeys",
+      "PersonalAPIKeyListFragment_personalAPIKeys"
    );

    createCommit({
@@ -165,8 +133,6 @@ export function PersonalAPIKeyList(props: {
        input: {
          name: data.name,
          expiresAt: expiresAt.toISOString(),
-          // API keys are no longer linked to organizations; keep schema compatibility.
-          organizationIds: [],
        },
        connections: [connectionID],
      },
@@ -194,116 +160,6 @@ export function PersonalAPIKeyList(props: {
    });
  };

-  const handleRevoke = (key: { id: string; name: string }) => {
-    confirm(
-      async () => {
-        await new Promise<void>((resolve, reject) => {
-          revokeCommit({
-            variables: {
-              input: { tokenId: key.id },
-            },
-            updater: (store: RecordSourceSelectorProxy) => {
-              const viewerRecord = store.getRoot().getLinkedRecord("viewer");
-              if (!viewerRecord) return;
-              const connection = ConnectionHandler.getConnection(
-                viewerRecord,
-                "PersonalAPIKeyListFragment_personalAPIKeys",
-              );
-              if (connection) {
-                ConnectionHandler.deleteNode(connection, key.id);
-              }
-            },
-            onCompleted: (_response, errors) => {
-              if (errors?.length) {
-                toast({
-                  title: __("Error"),
-                  description: formatError(
-                    __("Failed to revoke API key."),
-                    errors as GraphQLError[],
-                  ),
-                  variant: "error",
-                });
-                reject(errors);
-                return;
-              }
-              toast({
-                title: __("Success"),
-                description: __("API key revoked successfully."),
-                variant: "success",
-              });
-              resolve();
-            },
-            onError: (error) => {
-              toast({
-                title: __("Error"),
-                description: formatError(
-                  __("Failed to revoke API key."),
-                  error,
-                ),
-                variant: "error",
-              });
-              reject(error);
-            },
-          });
-        });
-      },
-      {
-        title: __("Revoke API Key"),
-        message: __(
-          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`,
-        ),
-        label: __("Revoke"),
-        variant: "danger",
-      },
-    );
-  };
-
-  const handleShowToken = (key: { id: string; name: string }) => {
-    revealTokenCommit({
-      variables: {
-        input: {
-          tokenId: key.id,
-        },
-      },
-      onCompleted: (response, errors) => {
-        if (errors?.length) {
-          toast({
-            title: __("Error"),
-            description: formatError(
-              __("Failed to reveal API key token."),
-              errors as any,
-            ),
-            variant: "error",
-          });
-          return;
-        }
-
-        const tokenValue = response.revealPersonalAPIKeyToken?.token;
-        if (!tokenValue) {
-          toast({
-            title: __("Error"),
-            description: __("No token returned."),
-            variant: "error",
-          });
-          return;
-        }
-
-        setToken(tokenValue);
-        tokenDialogRef.current?.open();
-      },
-      onError: (error: Error) => {
-        toast({
-          title: __("Error"),
-          description: formatError(
-            __("Failed to reveal API key token."),
-            error,
-          ),
-          variant: "error",
-        });
-      },
-    });
-  };
-
  return (
    <>
      <div className="space-y-4">
@@ -314,7 +170,7 @@ export function PersonalAPIKeyList(props: {
          </Button>
        </div>

-        {keys.length === 0 ? (
+        {viewer.personalAPIKeys.edges.length === 0 ? (
          <Card padded>
            <div className="text-center py-12">
              <h3 className="text-lg font-medium text-gray-900 mb-2">
@@ -328,10 +184,8 @@ export function PersonalAPIKeyList(props: {
        ) : (
          <Card padded>
            <PersonalAPIKeysTable
-              keys={keys}
-              onRevoke={handleRevoke}
-              onShowToken={handleShowToken}
-              isShowingToken={isRevealingToken}
+              edges={viewer.personalAPIKeys.edges}
+              connectionId={connectionID}
            />
          </Card>
        )}
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx
@@ -0,0 +1,135 @@
+import { useTranslate } from "@probo/i18n";
+import { formatDate, formatError, type GraphQLError } from "@probo/helpers";
+import { Button, Spinner, Td, Tr, useConfirm, useToast } from "@probo/ui";
+import { graphql } from "relay-runtime";
+import { useMutation, useFragment } from "react-relay";
+import type { PersonalAPIKeyRowFragment$key } from "/__generated__/iam/PersonalAPIKeyRowFragment.graphql";
+import type { PersonalAPIKeyRow_revokeMutation } from "/__generated__/iam/PersonalAPIKeyRow_revokeMutation.graphql";
+import clsx from "clsx";
+import { PersonalAPIKeyTokenAction } from "./PersonalAPIKeyTokenAction";
+import { Suspense } from "react";
+
+const revokeMutation = graphql`
+  mutation PersonalAPIKeyRow_revokeMutation(
+    $input: RevokePersonalAPIKeyInput!
+    $connections: [ID!]!
+  ) {
+    revokePersonalAPIKey(input: $input) {
+      personalAPIKeyId @deleteEdge(connections: $connections)
+    }
+  }
+`;
+
+export const personalAPIKeyRowFragment = graphql`
+  fragment PersonalAPIKeyRowFragment on PersonalAPIKey
+  @refetchable(queryName: "PersonalAPIKeyRowRefetchQuery")
+  @argumentDefinitions(includeToken: { type: "Boolean", defaultValue: false }) {
+    id
+    name
+    createdAt
+    expiresAt
+    token @include(if: $includeToken)
+  }
+`;
+
+export function PersonalAPIKeyRow(props: {
+  fKey: PersonalAPIKeyRowFragment$key;
+  connectionId: string;
+}) {
+  const { fKey, connectionId } = props;
+  const { __ } = useTranslate();
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const now = new Date();
+
+  const key = useFragment(personalAPIKeyRowFragment, fKey);
+  const expired = new Date(key.expiresAt) < now;
+
+  const [revokeCommit, isRevoking] =
+    useMutation<PersonalAPIKeyRow_revokeMutation>(revokeMutation);
+
+  const handleRevoke = () => {
+    confirm(
+      async () => {
+        await new Promise<void>((resolve, reject) => {
+          revokeCommit({
+            variables: {
+              input: { personalAPIKeyId: key.id },
+              connections: [connectionId],
+            },
+            onCompleted: (_response, errors) => {
+              if (errors?.length) {
+                toast({
+                  title: __("Error"),
+                  description: formatError(
+                    __("Failed to revoke API key."),
+                    errors as GraphQLError[]
+                  ),
+                  variant: "error",
+                });
+                reject(errors);
+                return;
+              }
+              toast({
+                title: __("Success"),
+                description: __("API key revoked successfully."),
+                variant: "success",
+              });
+              resolve();
+            },
+            onError: (error) => {
+              toast({
+                title: __("Error"),
+                description: formatError(
+                  __("Failed to revoke API key."),
+                  error
+                ),
+                variant: "error",
+              });
+              reject(error);
+            },
+          });
+        });
+      },
+      {
+        title: __("Revoke API Key"),
+        message: __(
+          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`
+        ),
+        label: __("Revoke"),
+        variant: "danger",
+      }
+    );
+  };
+
+  return (
+    <Tr className={clsx(isRevoking && "opacity-60 pointer-events-none")}>
+      <Td>
+        <div className="font-medium text-txt-primary">{key.name}</div>
+        <div className="text-xs text-txt-tertiary">
+          {expired ? __("Expired") : __("Active")}
+        </div>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary">
+          {formatDate(key.createdAt)}
+        </span>
+      </Td>
+      <Td>
+        <span className="text-sm text-txt-secondary">
+          {formatDate(key.expiresAt)}
+        </span>
+      </Td>
+      <Td width={140} className="text-end">
+        <div className="flex gap-2 justify-end">
+          <Suspense fallback={<Spinner />}>
+            <PersonalAPIKeyTokenAction fKey={fKey} disabled={isRevoking} />
+          </Suspense>
+          <Button variant="danger" onClick={handleRevoke} disabled={isRevoking}>
+            {__("Revoke")}
+          </Button>
+        </div>
+      </Td>
+    </Tr>
+  );
+}
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx
@@ -0,0 +1,63 @@
+import { useTranslate } from "@probo/i18n";
+import { Button, useDialogRef, useToast } from "@probo/ui";
+import { formatError } from "@probo/helpers";
+import { useRefetchableFragment } from "react-relay";
+import { PersonalAPIKeyTokenDialog } from "./PersonalAPIKeyTokenDialog";
+import { personalAPIKeyRowFragment } from "./PersonalAPIKeyRow";
+import type { PersonalAPIKeyRowFragment$key } from "/__generated__/iam/PersonalAPIKeyRowFragment.graphql";
+import type { PersonalAPIKeyRowRefetchQuery } from "/__generated__/iam/PersonalAPIKeyRowRefetchQuery.graphql";
+
+export function PersonalAPIKeyTokenAction(props: {
+  fKey: PersonalAPIKeyRowFragment$key;
+  disabled?: boolean;
+}) {
+  const { fKey, disabled } = props;
+  const { __ } = useTranslate();
+  const { toast } = useToast();
+  const dialogRef = useDialogRef();
+
+  const [data, refetch] = useRefetchableFragment<
+    PersonalAPIKeyRowRefetchQuery,
+    PersonalAPIKeyRowFragment$key
+  >(personalAPIKeyRowFragment, fKey);
+
+  const handleShow = () => {
+    dialogRef.current?.open();
+
+    refetch(
+      { includeToken: true },
+      {
+        fetchPolicy: "network-only",
+        onComplete: (error) => {
+          if (error) {
+            toast({
+              title: __("Error"),
+              description: formatError(
+                __("Failed to load API key token."),
+                error
+              ),
+              variant: "error",
+            });
+            dialogRef.current?.close();
+          }
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      <Button variant="secondary" onClick={handleShow} disabled={!!disabled}>
+        {__("Show")}
+      </Button>
+
+      <PersonalAPIKeyTokenDialog
+        dialogRef={dialogRef}
+        token={data.token ?? ""}
+        onDone={() => {
+          dialogRef.current?.close();
+        }}
+      />
+    </>
+  );
+}
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenDialog.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenDialog.tsx
@@ -7,7 +7,6 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useCopy } from "@probo/hooks";
-import { useEffect } from "react";

 export function PersonalAPIKeyTokenDialog(props: {
  dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
@@ -18,8 +17,6 @@ export function PersonalAPIKeyTokenDialog(props: {
  const { __ } = useTranslate();
  const [isCopied, copy] = useCopy();

-  useEffect(() => {}, [token]);
-
  return (
    <Dialog
      ref={dialogRef}
--- a/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeysTable.tsx
+++ b/apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeysTable.tsx
@@ -1,24 +1,14 @@
 import { useTranslate } from "@probo/i18n";
-import { formatDate } from "@probo/helpers";
-import { Button, Table, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
-
-export type PersonalAPIKeyRow = {
-  id: string;
-  name: string;
-  createdAt: string;
-  expiresAt: string;
-  lastUsedAt: string | null;
-};
+import { Table, Tbody, Th, Thead, Tr } from "@probo/ui";
+import { PersonalAPIKeyRow } from "./PersonalAPIKeyRow";
+import type { PersonalAPIKeyListFragment$data } from "/__generated__/iam/PersonalAPIKeyListFragment.graphql";

 export function PersonalAPIKeysTable(props: {
-  keys: PersonalAPIKeyRow[];
-  onRevoke: (key: { id: string; name: string }) => void;
-  onShowToken: (key: { id: string; name: string }) => void;
-  isShowingToken?: boolean;
+  edges: PersonalAPIKeyListFragment$data["personalAPIKeys"]["edges"];
+  connectionId: string;
 }) {
-  const { keys, onRevoke, onShowToken, isShowingToken } = props;
+  const { edges, connectionId } = props;
  const { __ } = useTranslate();
-  const now = new Date();

  return (
    <Table>
@@ -32,51 +22,13 @@ export function PersonalAPIKeysTable(props: {
        </Tr>
      </Thead>
      <Tbody>
-        {keys.map((k) => {
-          const expired = new Date(k.expiresAt) < now;
-          return (
-            <Tr key={k.id}>
-              <Td>
-                <div className="font-medium text-txt-primary">{k.name}</div>
-                <div className="text-xs text-txt-tertiary">
-                  {expired ? __("Expired") : __("Active")}
-                </div>
-              </Td>
-              <Td>
-                <span className="text-sm text-txt-secondary">
-                  {k.lastUsedAt ? formatDate(k.lastUsedAt) : "—"}
-                </span>
-              </Td>
-              <Td>
-                <span className="text-sm text-txt-secondary">
-                  {formatDate(k.createdAt)}
-                </span>
-              </Td>
-              <Td>
-                <span className="text-sm text-txt-secondary">
-                  {formatDate(k.expiresAt)}
-                </span>
-              </Td>
-              <Td width={140} className="text-end">
-                <div className="flex gap-2 justify-end">
-                  <Button
-                    variant="secondary"
-                    onClick={() => onShowToken({ id: k.id, name: k.name })}
-                    disabled={!!isShowingToken}
-                  >
-                    {__("Show")}
-                  </Button>
-                  <Button
-                    variant="danger"
-                    onClick={() => onRevoke({ id: k.id, name: k.name })}
-                  >
-                    {__("Revoke")}
-                  </Button>
-                </div>
-              </Td>
-            </Tr>
-          );
-        })}
+        {edges.map(({ node }) => (
+          <PersonalAPIKeyRow
+            key={node.id}
+            fKey={node}
+            connectionId={connectionId}
+          />
+        ))}
      </Tbody>
    </Table>
  );