feat: api keys ui (#839)

* feat: api keys ui

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

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

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

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,
+      },
+    ],
+    [],
+  );
+}