feat: api keys ui (#839)

* feat: api keys ui
2026-02-17 13:20:31 +00:00 · 2025-11-02 12:41:16 +02:00
parent 41143d8bbd
commit a76445a6eb
23 changed files with 723 additions and 11 deletions
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeyDisplayView.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeyDisplayView.tsx
@@ -0,0 +1,72 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  Classes,
+  Button,
+  InputGroup,
+  FormGroup,
+  Intent,
+  Position,
+  Tooltip,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, Icon, Alert } from '@/components';
+import { useClipboard } from '@/hooks/utils/useClipboard';
+import { AppToaster } from '@/components';
+
+/**
+ * API Key Display view component (used within the generate dialog).
+ */
+function ApiKeyDisplayView({
+  dialogName,
+  apiKey,
+  onClose,
+}) {
+  const clipboard = useClipboard();
+
+  const handleCopy = () => {
+    if (apiKey) {
+      clipboard.copy(apiKey);
+      AppToaster.show({
+        message: intl.get('api_key.copied_to_clipboard'),
+        intent: Intent.SUCCESS,
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className={Classes.DIALOG_BODY}>
+        <Alert intent="primary">
+          <strong>{intl.get('api_key.important')}:</strong> {intl.get('api_key.display_warning')}
+        </Alert>
+        <FormGroup label={intl.get('api_key.label')}>
+          <InputGroup
+            value={apiKey || ''}
+            readOnly
+            rightElement={
+              <Tooltip content={intl.get('api_key.copy_to_clipboard')} position={Position.TOP}>
+                <Button
+                  onClick={handleCopy}
+                  minimal
+                  icon={<Icon icon={'clipboard'} iconSize={16} />}
+                />
+              </Tooltip>
+            }
+          />
+        </FormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button intent={Intent.PRIMARY} onClick={onClose} style={{ width: '85px' }}>
+            <T id={'done'} />
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ApiKeyDisplayView;
+
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateDialog.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateDialog.tsx
@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React, { useState } from 'react';
+import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import { compose } from '@/utils';
+
+const ApiKeysGenerateDialogContent = React.lazy(
+  () => import('./ApiKeysGenerateDialogContent'),
+);
+
+/**
+ * API Keys Generate dialog.
+ */
+function ApiKeysGenerateDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={
+        <T id={'api_key.dialog.generate_title'} />
+      }
+      isOpen={isOpen}
+      canEscapeJeyClose={true}
+      autoFocus={true}
+      className={'dialog--api-keys-generate'}
+      style={{ width: '500px' }}
+    >
+      <DialogSuspense>
+        <ApiKeysGenerateDialogContent
+          dialogName={dialogName}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+export default compose(withDialogRedux())(ApiKeysGenerateDialog);
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateDialogContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateDialogContent.tsx
@@ -0,0 +1,86 @@
+// @ts-nocheck
+import React, { useState, useEffect } from 'react';
+import { Formik } from 'formik';
+import intl from 'react-intl-universal';
+import { Intent } from '@blueprintjs/core';
+import { AppToaster } from '@/components';
+import { useGenerateApiKey } from '@/hooks/query';
+import ApiKeysGenerateFormContent from './ApiKeysGenerateFormContent';
+import ApiKeysGenerateFormSchema from './ApiKeysGenerateForm.schema';
+import ApiKeyDisplayView from './ApiKeyDisplayView';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+const defaultInitialValues = {
+  name: '',
+};
+
+/**
+ * API Keys Generate form dialog content.
+ */
+function ApiKeysGenerateDialogContent({
+  // #withDialogActions
+  closeDialog,
+  dialogName,
+}) {
+  const [generatedApiKey, setGeneratedApiKey] = useState(null);
+  const generateApiKeyMutate = useGenerateApiKey();
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = { name: values.name || undefined };
+
+    // Handle request response errors.
+    const handleError = (error) => {
+      const errors = error?.response?.data?.errors;
+      if (errors) {
+        const errorsTransformed = Object.keys(errors).reduce((acc, key) => {
+          acc[key] = errors[key][0];
+          return acc;
+        }, {});
+        setErrors(errorsTransformed);
+      }
+      setSubmitting(false);
+    };
+
+    generateApiKeyMutate.mutate(form, {
+      onSuccess: (response) => {
+        // The API returns { key, id }, which might be wrapped in response.data
+        const apiKey = response?.data?.key || response?.key;
+        if (apiKey) {
+          setGeneratedApiKey(apiKey);
+        } else {
+          setSubmitting(false);
+        }
+      },
+      onError: handleError,
+    });
+  };
+
+  // If API key has been generated, show the display view
+  if (generatedApiKey) {
+    return (
+      <ApiKeyDisplayView
+        dialogName={dialogName}
+        apiKey={generatedApiKey}
+        onClose={() => {
+          setGeneratedApiKey(null);
+          closeDialog(dialogName);
+        }}
+      />
+    );
+  }
+
+  // Otherwise, show the generate form
+  return (
+    <Formik
+      validationSchema={ApiKeysGenerateFormSchema}
+      initialValues={defaultInitialValues}
+      onSubmit={handleFormSubmit}
+    >
+      <ApiKeysGenerateFormContent dialogName={dialogName} />
+    </Formik>
+  );
+}
+
+export default compose(withDialogActions)(ApiKeysGenerateDialogContent);
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateForm.schema.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateForm.schema.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+import * as Yup from 'yup';
+
+export const CreateApiKeyFormSchema = Yup.object().shape({
+  name: Yup.string()
+    .required('Name is required')
+    .max(255, 'Name must be at most 255 characters'),
+});
+
+export default CreateApiKeyFormSchema;
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateFormContent.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/ApiKeysGenerateFormContent.tsx
@@ -0,0 +1,67 @@
+// @ts-nocheck
+import React from 'react';
+import { Form, useFormikContext } from 'formik';
+import {
+  Classes,
+  Button,
+  Intent,
+} from '@blueprintjs/core';
+import { FastField, ErrorMessage } from 'formik';
+import {
+  FormGroup,
+  InputGroup,
+} from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { inputIntent } from '@/utils';
+import { FFormGroup, FInputGroup, FormattedMessage as T } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+/**
+ * API Keys Generate form content.
+ */
+function ApiKeysGenerateFormContent({
+  dialogName,
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { isSubmitting } = useFormikContext();
+
+  const handleClose = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <Form>
+      <div className={Classes.DIALOG_BODY}>
+        {/* ----------- Name ----------- */}
+        <FFormGroup
+          name={'name'}
+          label={<T id={'api_key.name'} />}
+        >
+          <FInputGroup name={'name'} placeholder={intl.get('api_key.name_placeholder')} />
+        </FFormGroup>
+      </div>
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleClose} disabled={isSubmitting}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            type="submit"
+            disabled={isSubmitting}
+            loading={isSubmitting}
+            style={{ minWidth: '100px' }}
+          >
+            <T id={'api_key.generate'} />
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(ApiKeysGenerateFormContent);
--- a/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/index.tsx
+++ b/packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/index.tsx
@@ -0,0 +1 @@
+export { default } from './ApiKeysGenerateDialog';
--- a/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeys.tsx
+++ b/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeys.tsx
@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React, { useEffect } from 'react';
+import intl from 'react-intl-universal';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+import { Card } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+import ApiKeysDataTable from './ApiKeysDataTable';
+import { compose } from '@/utils';
+
+/**
+ * API Keys preferences page.
+ */
+function ApiKeysPreferences({
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  useEffect(() => {
+    changePreferencesPageTitle(intl.get('api_key.title'));
+  }, [changePreferencesPageTitle]);
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
+        CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
+      )}
+    >
+      <ApiKeysPreferencesCard>
+        <ApiKeysDataTable />
+      </ApiKeysPreferencesCard>
+    </div>
+  );
+}
+
+const ApiKeysPreferencesCard = styled(Card)`
+  padding: 0;
+`;
+
+export default compose(withDashboardActions)(ApiKeysPreferences);
--- a/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeysActions.tsx
+++ b/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeysActions.tsx
@@ -0,0 +1,29 @@
+// @ts-nocheck
+import React from 'react';
+
+import { Button, Intent } from '@blueprintjs/core';
+import { Icon, FormattedMessage as T } from '@/components';
+
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+function ApiKeysActions({ openDialog, closeDialog }) {
+  const onClickGenerateApiKey = () => {
+    openDialog('api-keys-generate');
+  };
+
+  return (
+    <div className="preferences-actions">
+      <Button
+        icon={<Icon icon="plus" iconSize={12} />}
+        onClick={onClickGenerateApiKey}
+        intent={Intent.PRIMARY}
+      >
+        <T id={'api_key.generate_button'} />
+      </Button>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(ApiKeysActions);
+
--- a/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeysDataTable.tsx
+++ b/packages/webapp/src/containers/Preferences/ApiKeys/ApiKeysDataTable.tsx
@@ -0,0 +1,65 @@
+// @ts-nocheck
+import React, { useCallback } from 'react';
+import { compose } from '@/utils';
+import { DataTable, TableSkeletonRows, AppToaster } from '@/components';
+import { useApiKeys, useRevokeApiKey } from '@/hooks/query';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+import { ActionsMenu, useApiKeysTableColumns } from './components';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+/**
+ * API Keys datatable.
+ */
+function ApiKeysDataTable({
+  // #withDialogActions
+  openDialog,
+
+  // #withAlertActions
+  openAlert,
+}) {
+  const { data: apiKeys, isLoading, isFetching } = useApiKeys();
+  const { mutateAsync: revokeApiKey } = useRevokeApiKey();
+
+  // API Keys list columns.
+  const columns = useApiKeysTableColumns();
+
+  // Handle revoke API key action.
+  const handleRevokeApiKey = useCallback(
+    (apiKey) => {
+      revokeApiKey(apiKey.id)
+        .then(() => {
+          AppToaster.show({
+            message: intl.get('api_key.revoke_success'),
+            intent: Intent.SUCCESS,
+          });
+        })
+        .catch((error) => {
+          AppToaster.show({
+            message: error?.response?.data?.message || intl.get('something_went_wrong'),
+            intent: Intent.DANGER,
+          });
+        });
+    },
+    [revokeApiKey],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      data={apiKeys || []}
+      loading={isLoading}
+      headerLoading={isLoading}
+      progressBarLoading={isFetching}
+      TableLoadingRenderer={TableSkeletonRows}
+      noInitialFetch={true}
+      ContextMenu={ActionsMenu}
+      payload={{
+        onRevoke: handleRevokeApiKey,
+      }}
+    />
+  );
+}
+
+export default compose(withDialogActions, withAlertActions)(ApiKeysDataTable);
--- a/packages/webapp/src/containers/Preferences/ApiKeys/components.tsx
+++ b/packages/webapp/src/containers/Preferences/ApiKeys/components.tsx
@@ -0,0 +1,135 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, Icon } from '@/components';
+import {
+  Intent,
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  Position,
+  Tag,
+} from '@blueprintjs/core';
+import { safeCallback } from '@/utils';
+import { FormatDateCell } from '@/components/Utils/FormatDate';
+
+/**
+ * API Keys table actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onRevoke },
+}) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('api_key.revoke')}
+        onClick={safeCallback(onRevoke, original)}
+        intent={Intent.DANGER}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Token accessor.
+ * Displays the token value in a Tag component.
+ */
+function TokenAccessor(apiKey) {
+  return (
+    <Tag minimal={true}>
+      {apiKey.token || ''}
+    </Tag>
+  );
+}
+
+/**
+ * Permissions accessor.
+ * Since permissions aren't currently stored, we show a default message.
+ */
+function PermissionsAccessor(apiKey) {
+  return (
+    <Tag>
+      <T id={'api_key.full_access'} />
+    </Tag>
+  );
+}
+
+/**
+ * Last Used accessor.
+ * Since lastUsed isn't currently tracked, we show "Never".
+ */
+function LastUsedAccessor(apiKey) {
+  return <span>{intl.get('api_key.never')}</span>;
+}
+
+/**
+ * Actions cell.
+ */
+function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Retrieve API Keys table columns.
+ */
+export function useApiKeysTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'name',
+        Header: intl.get('api_key.name'),
+        accessor: (row) => row.name || intl.get('api_key.unnamed'),
+        width: 200,
+        className: 'name',
+      },
+      {
+        id: 'token',
+        Header: intl.get('api_key.token'),
+        accessor: TokenAccessor,
+        width: 100,
+        className: 'token',
+      },
+      {
+        id: 'permissions',
+        Header: intl.get('api_key.permissions'),
+        accessor: PermissionsAccessor,
+        width: 150,
+        className: 'permissions',
+      },
+      {
+        id: 'last_used',
+        Header: intl.get('api_key.last_used'),
+        accessor: LastUsedAccessor,
+        width: 150,
+        className: 'last_used',
+      },
+      {
+        id: 'created_at',
+        Header: intl.get('api_key.generated_at'),
+        accessor: 'createdAt',
+        Cell: FormatDateCell,
+        width: 150,
+        className: 'created_at',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [],
+  );
+}
				`@@ -0,0 +1 @@`
				`export { default } from './ApiKeysGenerateDialog';`