feature: re-arrange my account dialog

react/src/components/KeypairInfoModal.tsx

@@ -0,0 +1,120 @@
+/**
+ @license
+ Copyright (c) 2015-2023 Lablup Inc. All rights reserved.
+ */
+import { useSuspendedBackendaiClient } from '../hooks';
+import { useCurrentUserInfo } from '../hooks/backendai';
+import { useTanQuery } from '../hooks/reactQueryAlias';
+import BAIModal, { BAIModalProps } from './BAIModal';
+import Flex from './Flex';
+import { KeypairInfoModalQuery } from './__generated__/KeypairInfoModalQuery.graphql';
+import { Button, Table, Typography, Tag } from 'antd';
+import graphql from 'babel-plugin-relay/macro';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLazyLoadQuery } from 'react-relay';
+
+interface KeypairInfoModalProps extends BAIModalProps {
+  onRequestClose: () => void;
+}
+
+const KeypairInfoModal: React.FC<KeypairInfoModalProps> = ({
+  onRequestClose,
+  ...baiModalProps
+}) => {
+  const { t } = useTranslation();
+  const [userInfo] = useCurrentUserInfo();
+  const baiClient = useSuspendedBackendaiClient();
+  const { data: keypairs } = useTanQuery({
+    queryKey: ['baiClient.keypair.list', baiModalProps.open], // refetch on open state
+    queryFn: () => {
+      return baiClient.keypair
+        .list(userInfo.email, ['access_key', 'secret_key', 'is_active'], true)
+        .then((res: any) => res.keypairs);
+    },
+    suspense: true,
+    staleTime: 0,
+    cacheTime: 0,
+  });
+
+  const supportMainAccessKey = baiClient?.supports('main-access-key');
+
+  const { user } = useLazyLoadQuery<KeypairInfoModalQuery>(
+    graphql`
+      query KeypairInfoModalQuery($email: String) {
+        user(email: $email) {
+          email
+          main_access_key @since(version: "24.03.0")
+        }
+      }
+    `,
+    {
+      email: userInfo.email,
+    },
+  );
+
+  return (
+    <BAIModal
+      {...baiModalProps}
+      title={t('usersettings.MyKeypairInfo')}
+      centered
+      onCancel={onRequestClose}
+      destroyOnClose
+      width={'auto'}
+      footer={[
+        <Button
+          onClick={() => {
+            onRequestClose();
+          }}
+        >
+          {t('button.Close')}
+        </Button>,
+      ]}
+    >
+      <Table
+        scroll={{ x: 'max-content' }}
+        rowKey={'access_key'}
+        dataSource={keypairs}
+        columns={[
+          {
+            title: '#',
+            fixed: 'left',
+            render: (id, record, index) => {
+              ++index;
+              return index;
+            },
+            showSorterTooltip: false,
+            rowScope: 'row',
+          },
+          {
+            title: t('general.AccessKey'),
+            dataIndex: 'access_key',
+            fixed: 'left',
+            render: (value) => (
+              <Flex direction="column" align="start">
+                <Typography.Text ellipsis copyable>
+                  {value}
+                </Typography.Text>
+                {supportMainAccessKey && value === user?.main_access_key && (
+                  <Tag color="red">{t('credential.MainAccessKey')}</Tag>
+                )}
+              </Flex>
+            ),
+          },
+          {
+            title: t('general.SecretKey'),
+            dataIndex: 'secret_key',
+            fixed: 'left',
+            render: (value) => (
+              <Typography.Text ellipsis copyable>
+                {value}
+              </Typography.Text>
+            ),
+          },
+        ]}
+      ></Table>
+    </BAIModal>
+  );
+};
+
+export default KeypairInfoModal;

react/src/components/UserProfileSettingModal.tsx

@@ -9,13 +9,11 @@ import BAIModal from './BAIModal';
 import { passwordPattern } from './ResetPasswordRequired';
 import TOTPActivateModal from './TOTPActivateModal';
 // @ts-ignore
-import customCSS from './UserProfileSettingModal.css?raw';
 import { UserProfileSettingModalQuery } from './__generated__/UserProfileSettingModalQuery.graphql';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useToggle } from 'ahooks';
-import { Modal, ModalProps, Input, Form, Select, message, Switch } from 'antd';
+import { Modal, ModalProps, Input, Form, message, Switch } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
-import _ from 'lodash';
 import React, { useDeferredValue } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery } from 'react-relay';
@@ -29,8 +27,6 @@ type UserProfileFormValues = {
   originalPassword?: string;
   newPasswordConfirm?: string;
   newPassword?: string;
-  access_key?: string;
-  secret_key?: string;
   totp_activated: boolean;
 };
 
@@ -84,23 +80,6 @@ const UserProfileSettingModal: React.FC<Props> = ({
     },
   );
 
-  const { data: keyPairs } = useTanQuery<
-    {
-      secret_key: string;
-      access_key: string;
-    }[]
-  >(
-    'baiClient.keypair.list',
-    () => {
-      return baiClient.keypair
-        .list(userInfo.email, ['access_key', 'secret_key'], true)
-        .then((res: any) => res.keypairs);
-    },
-    {
-      suspense: true,
-    },
-  );
-
   const mutationToRemoveTotp = useTanMutation({
     mutationFn: () => {
       return baiClient.remove_totp();
@@ -164,7 +143,6 @@ const UserProfileSettingModal: React.FC<Props> = ({
 
   return (
     <>
-      <style>{customCSS}</style>
       <BAIModal
         {...baiModalProps}
         okText={t('webui.menu.Update')}
@@ -185,7 +163,6 @@ const UserProfileSettingModal: React.FC<Props> = ({
           initialValues={{
             full_name: userInfo.full_name,
             totp_activated: user?.totp_activated || false,
-            access_key: keyPairs?.[0].access_key,
           }}
           preserve={false}
         >
@@ -207,29 +184,6 @@ const UserProfileSettingModal: React.FC<Props> = ({
           >
             <Input />
           </Form.Item>
-          <Form.Item name="access_key" label={t('general.AccessKey')}>
-            <Select
-              options={_.map(keyPairs, (keyPair) => ({
-                value: keyPair.access_key,
-              }))}
-              // onSelect={onSelectAccessKey}
-            ></Select>
-          </Form.Item>
-          <Form.Item
-            label={t('general.SecretKey')}
-            shouldUpdate={(prev, next) => prev.access_key !== next.access_key}
-          >
-            {({ getFieldValue }) => (
-              <Input.Password
-                value={
-                  _.find(keyPairs, ['access_key', getFieldValue('access_key')])
-                    ?.secret_key
-                }
-                className="disabled_style_readonly"
-                readOnly
-              />
-            )}
-          </Form.Item>
           <Form.Item
             name="originalPassword"
             label={t('webui.menu.OriginalPassword')}

react/src/index.tsx

@@ -56,6 +56,9 @@
 const ContainerRegistryList = React.lazy(
   () => import('./components/ContainerRegistryList'),
 );
+const KeypairInfoModal = React.lazy(
+  () => import('./components/KeypairInfoModal'),
+);
 
 customElements.define(
   'backend-ai-react-information',
@@ -270,3 +273,19 @@
     );
   }),
 );
+
+customElements.define(
+  'backend-ai-react-keypair-info-modal',
+  reactToWebComponent((props) => {
+    return (
+      <DefaultProviders {...props}>
+        <KeypairInfoModal
+          open={props.value === 'true'}
+          onRequestClose={() => {
+            props.dispatchEvent('close', null);
+          }}
+        />
+      </DefaultProviders>
+    );
+  }),
+);

resources/i18n/de.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Melden Sie sich automatisch ab, wenn alle angemeldeten Seiten geschlossen sind, mit Ausnahme von sitzungsbasierten Seiten für Apps (z. B. Jupyter Notebook, Webterminal usw.)",
     "SSHKeypairEnterManuallyFinished": "SSH-Keypair wurde erfolgreich registriert.",
     "BootstrapScriptDescription": "Das Bootstrap-Skript wird nur einmal nach der Erstellung der Sitzung ausgeführt",
-    "SSHKeypairEnterManually": "SSH-Schlüsselpaar"
+    "SSHKeypairEnterManually": "SSH-Schlüsselpaar",
+    "MyKeypairInfo": "Meine Schlüsselpaarinformationen",
+    "DescMyKeypairInfo": "Siehe meine Schlüsselpaarinformationen"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Erweiterte Web-Terminal-Nutzung: Terminal-Inhalte kopieren",

resources/i18n/el.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Αποσυνδεθείτε αυτόματα εάν όλες οι συνδεδεμένες σελίδες είναι κλειστές εκτός από τις σελίδες που προέρχονται από περίοδο σύνδεσης για εφαρμογές (π.χ. jupyter notebook, web terminal κ.λπ.)",
     "SSHKeypairEnterManuallyFinished": "Το ζεύγος κλειδιών SSH καταχωρήθηκε με επιτυχία.",
     "BootstrapScriptDescription": "Το σενάριο Bootstrap θα εκτελεστεί μόνο μία φορά μετά τη δημιουργία συνεδρίας",
-    "SSHKeypairEnterManually": "Ζεύγος κλειδιών SSH"
+    "SSHKeypairEnterManually": "Ζεύγος κλειδιών SSH",
+    "MyKeypairInfo": "Πληροφορίες για το ζεύγος κλειδιών μου",
+    "DescMyKeypairInfo": "Δείτε τις πληροφορίες του ζεύγους κλειδιών μου"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Σύνθετη χρήση τερματικού Web: Αντιγραφή περιεχομένου τερματικού",

resources/i18n/en.json

@@ -897,6 +897,8 @@
     "BetaFeatures": "Beta Features",
     "DescBetaFeatures": "Use beta features for Web UI.<br />Beta features may be unstable. Some beta features may not be adopted as official feature.",
     "DescNoBetaFeatures": "No beta feature available now. :)",
+    "MyKeypairInfo": "My Keypair Information",
+    "DescMyKeypairInfo": "See my keypair information",
     "BootstrapScriptDescription": "Bootstrap script will be executed only once after session creation",
     "EditBootstrapScript": "Edit Bootstrap Script",
     "EditUserConfigScript": "Edit User Config Script",

resources/i18n/es.json

@@ -1364,7 +1364,9 @@
     "SSHKeypairManagement": "Gestión de pares de claves SSH",
     "SessionTerminationDialog": "La finalización de la sesión no se puede deshacer. ¿Desea finalizar la sesión?",
     "ShellEnvironments": "Entornos de conchas",
-    "UseCompactSidebar": "Utilizar la barra lateral compacta por defecto"
+    "UseCompactSidebar": "Utilizar la barra lateral compacta por defecto",
+    "MyKeypairInfo": "Información de mi par de claves",
+    "DescMyKeypairInfo": "Ver la información de mi par de claves"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Uso avanzado del terminal web: Copiar el contenido del terminal",

resources/i18n/fi.json

@@ -1407,7 +1407,9 @@
     "ClearSSHKeypairInput": "__NOT_TRANSLATED__",
     "SSHKeypairEnterManually": "__NOT_TRANSLATED__",
     "General": "__NOT_TRANSLATED__",
-    "Logs": "__NOT_TRANSLATED__"
+    "Logs": "__NOT_TRANSLATED__",
+    "MyKeypairInfo": "Avainparini tiedot",
+    "DescMyKeypairInfo": "Katso avainparini tiedot"
   },
   "sidepanel": {
     "Notification": "__NOT_TRANSLATED__",

resources/i18n/fr.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Déconnectez-vous automatiquement si toutes les pages connectées sont fermées, à l'exception des pages d'origine de session pour les applications (par exemple, bloc-notes jupyter, terminal Web, etc.)",
     "BootstrapScriptDescription": "Le script Bootstrap ne sera exécuté qu'une seule fois après la création de la session.",
     "SSHKeypairEnterManually": "Couple de clés SSH",
-    "SSHKeypairEnterManuallyFinished": "La paire de clés SSH a été enregistrée avec succès."
+    "SSHKeypairEnterManuallyFinished": "La paire de clés SSH a été enregistrée avec succès.",
+    "MyKeypairInfo": "Informations sur ma paire de clés",
+    "DescMyKeypairInfo": "Voir les informations de ma paire de clés"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Utilisation avancée du terminal Web : copier le contenu du terminal",

resources/i18n/id.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Keluar secara otomatis jika semua halaman yang masuk ditutup kecuali halaman yang berasal dari sesi untuk aplikasi (mis. Jupyter notebook, terminal web, dll.)",
     "BootstrapScriptDescription": "Skrip bootstrap akan dieksekusi hanya sekali setelah pembuatan sesi",
     "SSHKeypairEnterManually": "SSH Keypair",
-    "SSHKeypairEnterManuallyFinished": "SSH Keypair telah berhasil didaftarkan."
+    "SSHKeypairEnterManuallyFinished": "SSH Keypair telah berhasil didaftarkan.",
+    "MyKeypairInfo": "Informasi Pasangan Kunci Saya",
+    "DescMyKeypairInfo": "Lihat informasi keypair saya"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Penggunaan Terminal Web Tingkat Lanjut: Salin konten terminal",

resources/i18n/it.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Disconnettersi automaticamente se tutte le pagine di accesso vengono chiuse eccetto le pagine originate dalla sessione per le app (ad es.",
     "SSHKeypairEnterManuallyFinished": "La coppia di chiavi SSH è stata registrata con successo.",
     "BootstrapScriptDescription": "Lo script Bootstrap verrà eseguito solo una volta dopo la creazione della sessione.",
-    "SSHKeypairEnterManually": "Coppia di chiavi SSH"
+    "SSHKeypairEnterManually": "Coppia di chiavi SSH",
+    "MyKeypairInfo": "Informazioni sulla mia coppia di chiavi",
+    "DescMyKeypairInfo": "Vedi le informazioni sulla mia coppia di chiavi"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Utilizzo avanzato del terminale Web: copia il contenuto del terminale",

resources/i18n/ja.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "アプリのセッション開始ページ（jupyterノートブック、Webターミナルなど）を除き、ログインしたすべてのページが閉じている場合は、自動的にログアウトします。",
     "SSHKeypairEnterManuallyFinished": "SSHキーフェア登録が正常に完了しました。",
     "BootstrapScriptDescription": "ブートストラップスクリプトはセッション作成後一度だけ実行されます。",
-    "SSHKeypairEnterManually": "SSHキーペア入力"
+    "SSHKeypairEnterManually": "SSHキーペア入力",
+    "MyKeypairInfo": "私のキーペア情報",
+    "DescMyKeypairInfo": "私のキーペア情報を参照してください"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "高度なWeb端末の使用法：端末の内容をコピーする",

resources/i18n/ko.json

@@ -922,7 +922,9 @@
     "Edit_ShellScriptTitle_2": " 셀 스크립트 수정하기",
     "AutoLogout": "자동 로그아웃",
     "DescAutoLogout": "세션 내 앱을 실행하기 위해 생성된 페이지를 제외한 모든 Backend.AI 웹 UI 페이지가 닫힐 경우 자동으로 로그아웃됩니다.",
-    "SSHKeypairEnterManuallyFinished": "SSH 키페어 등록이 성공적으로 완료되었습니다."
+    "SSHKeypairEnterManuallyFinished": "SSH 키페어 등록이 성공적으로 완료되었습니다.",
+    "MyKeypairInfo": "내 키페어 정보",
+    "DescMyKeypairInfo": "내 키페어 정보 보기"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "웹 터미널 고급 사용법: 터미널 내용 복사하기",

resources/i18n/mn.json

@@ -841,7 +841,9 @@
     "DescAutoLogout": "Аппликешнд зориулж суулгасан хуудсуудаас бусад нэвтэрсэн бүх хуудсыг хаасан тохиолдолд автоматаар гарах болно (ж.нь. Jupyter Notebook, вэб терминал гэх мэт).",
     "BootstrapScriptDescription": "Ачаалагч скрипт нь сесс үүсгэсний дараа зөвхөн нэг удаа хийгдэх болно",
     "SSHKeypairEnterManually": "SSH товчлуурын хослол",
-    "SSHKeypairEnterManuallyFinished": "SSH Keypair амжилттай бүртгэгдлээ."
+    "SSHKeypairEnterManuallyFinished": "SSH Keypair амжилттай бүртгэгдлээ.",
+    "MyKeypairInfo": "Миний товчлуурын мэдээлэл",
+    "DescMyKeypairInfo": "Миний товчлуурын мэдээллийг харна уу"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Дэвшилтэт вэб терминалын хэрэглээ: Терминалын агуулгыг хуулах",

resources/i18n/ms.json

@@ -840,7 +840,9 @@
     "DescAutoLogout": "Log keluar secara automatik jika semua halaman log masuk ditutup kecuali halaman yang berasal dari sesi untuk aplikasi (mis. Notebook jupyter, terminal web, dll.)",
     "SSHKeypairEnterManuallyFinished": "SSH Keypair telah berjaya didaftarkan.",
     "BootstrapScriptDescription": "Skrip Bootstrap akan dilaksanakan sekali sahaja selepas penciptaan sesi",
-    "SSHKeypairEnterManually": "SSH Keypair"
+    "SSHKeypairEnterManually": "SSH Keypair",
+    "MyKeypairInfo": "Maklumat Pasangan Kunci Saya",
+    "DescMyKeypairInfo": "Lihat maklumat pasangan kunci saya"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Penggunaan Terminal Web Lanjutan: Salin kandungan terminal",

resources/i18n/pl.json

@@ -843,7 +843,9 @@
     "DescAutoLogout": "Wyloguj się automatycznie, jeśli wszystkie zalogowane strony są zamknięte, z wyjątkiem stron pochodzących z sesji dla aplikacji (np. notatnik jupyter, terminal internetowy itp.)",
     "SSHKeypairEnterManuallyFinished": "Para kluczy SSH została pomyślnie zarejestrowana.",
     "BootstrapScriptDescription": "Skrypt Bootstrap zostanie wykonany tylko raz po utworzeniu sesji.",
-    "SSHKeypairEnterManually": "Para kluczy SSH"
+    "SSHKeypairEnterManually": "Para kluczy SSH",
+    "MyKeypairInfo": "Informacje o mojej parze kluczy",
+    "DescMyKeypairInfo": "Zobacz informacje o mojej parze kluczy"
   },
   "webTerminalUsageGuide": {
     "CopyGuide": "Zaawansowane korzystanie z terminala internetowego: Skopiuj zawartość terminala",