-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature: re-arrange my account dialog (#2087)
* refactor: remove keypair information from my account modal * add: keypair info modal in usersettings page * add: translation for my keypair info * add: main_access_key tag in keypair information * misc: remove unused external libraries and components * misc: remove unused imports from antd library * fix: refetch keypairs on open state * fix: replace column specific width setting to rowScope and width setting in modal
- Loading branch information
Showing
25 changed files
with
225 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) { | ||
| 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; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.