Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

refactor(console): api resources table (#2767)

Browse source
This commit is contained in:
Xiao Yijun 2022-12-30 11:21:55 +08:00 • committed by GitHub
parent 5e48ba75f6
commit 06f6af758c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/pages/ApiResources/index.module.scss
View file

@ -7,7 +7,3 @@
.pagination { .pagination {
margin-top: _.unit(4); margin-top: _.unit(4);
} }
.apiResourceName {
width: 360px;
}

116
packages/console/src/pages/ApiResources/index.tsx
View file

@ -1,6 +1,5 @@
import type { Resource } from '@logto/schemas'; import type { Resource } from '@logto/schemas';
import { AppearanceMode } from '@logto/schemas'; import { AppearanceMode } from '@logto/schemas';
import classNames from 'classnames';
import { toast } from 'react-hot-toast'; import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Modal from 'react-modal'; import Modal from 'react-modal';
@ -15,14 +14,11 @@ import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard'; import CopyToClipboard from '@/components/CopyToClipboard';
import ItemPreview from '@/components/ItemPreview'; import ItemPreview from '@/components/ItemPreview';
import Pagination from '@/components/Pagination'; import Pagination from '@/components/Pagination';
import TableEmpty from '@/components/Table/TableEmpty'; import Table from '@/components/Table';
import TableError from '@/components/Table/TableError';
import TableLoading from '@/components/Table/TableLoading';
import type { RequestError } from '@/hooks/use-api'; import type { RequestError } from '@/hooks/use-api';
import { useTheme } from '@/hooks/use-theme'; import { useTheme } from '@/hooks/use-theme';
import * as modalStyles from '@/scss/modal.module.scss'; import * as modalStyles from '@/scss/modal.module.scss';
import * as resourcesStyles from '@/scss/resources.module.scss'; import * as resourcesStyles from '@/scss/resources.module.scss';
import * as tableStyles from '@/scss/table.module.scss';
import CreateForm from './components/CreateForm'; import CreateForm from './components/CreateForm';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -48,6 +44,8 @@ const ApiResources = () => {
const theme = useTheme(); const theme = useTheme();
const [apiResources, totalCount] = data ?? []; const [apiResources, totalCount] = data ?? [];
const ResourceIcon = theme === AppearanceMode.LightMode ? ApiResource : ApiResourceDark;
return ( return (
<div className={resourcesStyles.container}> <div className={resourcesStyles.container}>
<div className={resourcesStyles.headline}> <div className={resourcesStyles.headline}>
@ -94,71 +92,49 @@ const ApiResources = () => {
/> />
</Modal> </Modal>
</div> </div>
<div className={resourcesStyles.table}> <Table
<div className={tableStyles.scrollable}> className={resourcesStyles.table}
<table className={classNames(!data && tableStyles.empty)}> rowGroups={[{ key: 'apiResources', data: apiResources }]}
<colgroup> rowIndexKey="id"
<col className={styles.apiResourceName} /> isLoading={isLoading}
<col /> errorMessage={error?.body?.message ?? error?.message}
</colgroup> columns={[
<thead> {
<tr> title: t('api_resources.api_name'),
<th>{t('api_resources.api_name')}</th> dataIndex: 'name',
<th>{t('api_resources.api_identifier')}</th> colSpan: 6,
</tr> render: (name, { id }) => (
</thead> <ItemPreview
<tbody> title={name}
{!data && error && ( icon={<ResourceIcon className={styles.icon} />}
<TableError to={buildDetailsPathname(id)}
columns={2} />
content={error.body?.message ?? error.message} ),
onRetry={async () => mutate(undefined, true)} },
/> {
)} title: t('api_resources.api_identifier'),
{isLoading && <TableLoading columns={2} />} dataIndex: 'indicator',
{apiResources?.length === 0 && ( colSpan: 10,
<TableEmpty columns={2}> render: (indicator) => <CopyToClipboard value={indicator} variant="text" />,
<Button },
title="api_resources.create" ]}
type="outline" placeholder={
onClick={() => { <Button
navigate({ title="api_resources.create"
pathname: createApiResourcePathname, type="outline"
search, onClick={() => {
}); navigate({
}} pathname: createApiResourcePathname,
/> search,
</TableEmpty> });
)} }}
{apiResources?.map(({ id, name, indicator }) => { />
const ResourceIcon = }
theme === AppearanceMode.LightMode ? ApiResource : ApiResourceDark; onClickRow={({ id }) => {
navigate(buildDetailsPathname(id));
return ( }}
<tr onRetry={async () => mutate(undefined, true)}
key={id} />
className={tableStyles.clickable}
onClick={() => {
navigate(buildDetailsPathname(id));
}}
>
<td>
<ItemPreview
title={name}
icon={<ResourceIcon className={styles.icon} />}
to={buildDetailsPathname(id)}
/>
</td>
<td>
<CopyToClipboard value={indicator} variant="text" />
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
<Pagination <Pagination
pageIndex={pageIndex} pageIndex={pageIndex}
totalCount={totalCount} totalCount={totalCount}