feat: api keys ui (#839)

* feat: api keys ui

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;
+

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);

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);

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;

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);

packages/webapp/src/containers/Dialogs/ApiKeysGenerateDialog/index.tsx

@@ -0,0 +1 @@
+export { default } from './ApiKeysGenerateDialog';