feat: keypair info/setting modal in credential page

lablup · Dec 11, 2024 · 485ce28 · 485ce28
1 parent b19dfdb
commit 485ce28
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/react/src/components/UserCredentialList.tsx b/react/src/components/UserCredentialList.tsx
@@ -5,12 +5,17 @@ import {
 } from '../helper';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
+import UserKeypairSettingModal from '../pages/UserKeypairSettingModal';
+import { UserKeypairSettingModalFragment$key } from '../pages/__generated__/UserKeypairSettingModalFragment.graphql';
 import BAIPropertyFilter from './BAIPropertyFilter';
 import BAITable from './BAITable';
 import Flex from './Flex';
 import { UserCredentialListDeleteMutation } from './__generated__/UserCredentialListDeleteMutation.graphql';
 import { UserCredentialListModifyMutation } from './__generated__/UserCredentialListModifyMutation.graphql';
-import { UserCredentialListQuery } from './__generated__/UserCredentialListQuery.graphql';
+import {
+  UserCredentialListQuery,
+  UserCredentialListQuery$data,
+} from './__generated__/UserCredentialListQuery.graphql';
 import {
   DeleteOutlined,
   InfoCircleOutlined,
@@ -36,6 +41,10 @@ import { useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
 
+type Keypair = NonNullable<
+  NonNullable<UserCredentialListQuery$data['keypair_list']>['items'][number]
+>;
+
 const UserCredentialList: React.FC = () => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -45,6 +54,11 @@ const UserCredentialList: React.FC = () => {
   const [activeType, setActiveType] = useState<'active' | 'inactive'>('active');
   const [order, setOrder] = useState<string>();
   const [filterString, setFilterString] = useState<string>();
+  const [currentKeypairInfo, setCurrentKeypairInfo] =
+    useState<UserKeypairSettingModalFragment$key | null>();
+  const [openUserKeypairSettingModal, setOpenUserKeypairSettingModal] =
+    useState(false);
+
   const [isPendingRefresh, startRefreshTransition] = useTransition();
   const [isActiveTypePending, startActiveTypeTransition] = useTransition();
   const [isPendingPageChange, startPageChangeTransition] = useTransition();
@@ -90,6 +104,8 @@ const UserCredentialList: React.FC = () => {
             num_queries
             concurrency_used @since(version: "24.09.0")
             concurrency_limit @since(version: "24.09.0")
+
+            ...UserKeypairSettingModalFragment
           }
           total_count
         }
@@ -217,10 +233,17 @@ const UserCredentialList: React.FC = () => {
               icon={<ReloadOutlined />}
             />
           </Tooltip>
-          <Button type="primary">{t('credential.AddCredential')}</Button>
+          <Button
+            type="primary"
+            onClick={() => {
+              setOpenUserKeypairSettingModal(true);
+            }}
+          >
+            {t('credential.AddCredential')}
+          </Button>
         </Flex>
       </Flex>
-      <BAITable
+      <BAITable<Keypair>
         // resizable
         rowKey={'id'}
         scroll={{ x: 'max-content' }}
@@ -343,7 +366,7 @@ const UserCredentialList: React.FC = () => {
             key: 'control',
             title: t('general.Control'),
             fixed: 'right',
-            render: (record) => {
+            render: (value, record) => {
               return (
                 <Flex gap={token.marginXS}>
                   <Button
@@ -356,7 +379,10 @@ const UserCredentialList: React.FC = () => {
                     icon={
                       <SettingOutlined style={{ color: token.colorInfo }} />
                     }
-                    onClick={() => {}}
+                    onClick={() => {
+                      console.log('#', record);
+                      setCurrentKeypairInfo(record);
+                    }}
                   />
                   {activeType === 'inactive' && (
                     <Button
@@ -365,7 +391,7 @@ const UserCredentialList: React.FC = () => {
                       onClick={() => {
                         commitModifyKeypair({
                           variables: {
-                            access_key: record.access_key,
+                            access_key: record.access_key ?? '',
                             props: {
                               is_active: true,
                             },
@@ -405,7 +431,7 @@ const UserCredentialList: React.FC = () => {
                       activeType === 'active'
                         ? commitModifyKeypair({
                             variables: {
-                              access_key: record.access_key,
+                              access_key: record.access_key ?? '',
                               props: {
                                 is_active: false,
                               },
@@ -429,7 +455,7 @@ const UserCredentialList: React.FC = () => {
                           })
                         : commitDeleteKeypair({
                             variables: {
-                              access_key: record.access_key,
+                              access_key: record.access_key ?? '',
                             },
                             onCompleted: (res, errors) => {
                               if (!res?.delete_keypair?.ok || errors) {
@@ -482,6 +508,19 @@ const UserCredentialList: React.FC = () => {
           });
         }}
       />
+      <UserKeypairSettingModal
+        userKeypairSettingModalFrgmt={currentKeypairInfo}
+        open={!!currentKeypairInfo || openUserKeypairSettingModal}
+        onRequestClose={(success) => {
+          setCurrentKeypairInfo(null);
+          setOpenUserKeypairSettingModal(false);
+          if (success) {
+            startRefreshTransition(() => {
+              updateFetchKey();
+            });
+          }
+        }}
+      />
     </Flex>
   );
 };

diff --git a/react/src/pages/UserCredentialsPage.tsx b/react/src/pages/UserCredentialsPage.tsx
@@ -55,9 +55,11 @@ const UserCredentialsPage: React.FC = () => {
           </Flex>
         )}
         {curTabKey === 'credentials' && (
-          <Flex direction="column" align="stretch">
+          <>
             <UserCredentialList />
-          </Flex>
+            {/* @ts-expect-error */}
+            <backend-ai-credential-view active />
+          </>
         )}
       </Suspense>
     </BAICard>