feat: api keys ui (#839)

* feat: api keys ui

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