feat: migrate user list in user credential page to react component

lablup · Dec 10, 2024 · 747bd07 · 747bd07
1 parent ccdefb8
commit 747bd07
Show file tree

Hide file tree

Showing 31 changed files with 534 additions and 143 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -28,7 +28,8 @@
     "Warboy",
     "webcomponent",
     "webui",
-    "wsproxy"
+    "wsproxy",
+    "ahooks",
   ],
   "flagWords": [
     "데이터레이크",

diff --git a/react/src/App.tsx b/react/src/App.tsx
@@ -56,6 +56,9 @@ const InteractiveLoginPage = React.lazy(
   () => import('./pages/InteractiveLoginPage'),
 );
 const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));
+const UserCredentialsPage = React.lazy(
+  () => import('./pages/UserCredentialsPage'),
+);
 
 const ComputeSessionList = React.lazy(
   () => import('./components/ComputeSessionList'),
@@ -336,6 +339,7 @@ const router = createBrowserRouter([
       {
         path: '/credential',
         handle: { labelKey: 'webui.menu.UserCredentials&Policies' },
+        Component: UserCredentialsPage,
       },
       {
         path: '/logs',

diff --git a/react/src/components/BAIPropertyFilter.tsx b/react/src/components/BAIPropertyFilter.tsx
@@ -26,7 +26,7 @@ import React, {
 import { useTranslation } from 'react-i18next';
 
 //github.com/lablup/backend.ai/blob/main/src/ai/backend/manager/models/minilang/queryfilter.py
-type FilterProperty = {
+export type FilterProperty = {
   key: string;
   // operators: Array<string>;
   defaultOperator?: string;

diff --git a/react/src/components/UserInfoModal.tsx b/react/src/components/UserInfoModal.tsx
@@ -1,7 +1,6 @@
 import { useSuspendedBackendaiClient } from '../hooks';
 import { useTOTPSupported } from '../hooks/backendai';
 import BAIModal, { BAIModalProps } from './BAIModal';
-import { useWebComponentInfo } from './DefaultProviders';
 import { UserInfoModalQuery } from './__generated__/UserInfoModalQuery.graphql';
 import { Descriptions, DescriptionsProps, Button, Tag, Spin } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
@@ -10,26 +9,17 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
 
-interface Props extends BAIModalProps {}
+interface Props extends BAIModalProps {
+  userEmail: string;
+  onRequestClose: () => void;
+}
 
-const UserInfoModal: React.FC<Props> = ({ ...baiModalProps }) => {
+const UserInfoModal: React.FC<Props> = ({
+  userEmail,
+  onRequestClose,
+  ...baiModalProps
+}) => {
   const { t } = useTranslation();
-
-  const { value, dispatchEvent } = useWebComponentInfo();
-  let parsedValue: {
-    open: boolean;
-    userEmail: string;
-  };
-  try {
-    parsedValue = JSON.parse(value || '');
-  } catch (error) {
-    parsedValue = {
-      open: false,
-      userEmail: '',
-    };
-  }
-  const { open, userEmail } = parsedValue;
-
   const baiClient = useSuspendedBackendaiClient();
   const sudoSessionEnabledSupported = baiClient?.supports(
     'sudo-session-enabled',
@@ -87,23 +77,14 @@ const UserInfoModal: React.FC<Props> = ({ ...baiModalProps }) => {
 
   return (
     <BAIModal
-      open={open}
-      onCancel={() => {
-        dispatchEvent('cancel', null);
-      }}
       centered
       title={t('credential.UserDetail')}
       footer={[
-        <Button
-          key="ok"
-          type="primary"
-          onClick={() => {
-            dispatchEvent('cancel', null);
-          }}
-        >
+        <Button key="ok" type="primary" onClick={onRequestClose}>
           {t('button.OK')}
         </Button>,
       ]}
+      onCancel={onRequestClose}
       {...baiModalProps}
     >
       <br />