From 9a437e3c0d9198b5c6db7d9fdfe79cd153b468ea Mon Sep 17 00:00:00 2001 From: Wang Sijie Date: Mon, 28 Mar 2022 15:03:11 +0800 Subject: [PATCH] feat(console): table empty state (#446) * feat(console): table empty state * fix: cr --- .../images/social-connectors-placeholder.svg | 75 ------------------- .../console/src/assets/images/table-empty.svg | 75 +++++++++++++++++++ .../components/Table/TableEmpty.module.scss | 17 +++++ .../src/components/Table/TableEmpty.tsx | 33 ++++++++ .../console/src/pages/ApiResources/index.tsx | 12 +++ .../console/src/pages/Applications/index.tsx | 12 +++ .../console/src/pages/Connectors/index.tsx | 20 ++--- packages/console/src/pages/Users/index.tsx | 12 +++ packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + 10 files changed, 170 insertions(+), 88 deletions(-) delete mode 100644 packages/console/src/assets/images/social-connectors-placeholder.svg create mode 100644 packages/console/src/assets/images/table-empty.svg create mode 100644 packages/console/src/components/Table/TableEmpty.module.scss create mode 100644 packages/console/src/components/Table/TableEmpty.tsx diff --git a/packages/console/src/assets/images/social-connectors-placeholder.svg b/packages/console/src/assets/images/social-connectors-placeholder.svg deleted file mode 100644 index 6cfcf2665..000000000 --- a/packages/console/src/assets/images/social-connectors-placeholder.svg +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/console/src/assets/images/table-empty.svg b/packages/console/src/assets/images/table-empty.svg new file mode 100644 index 000000000..f9594cd59 --- /dev/null +++ b/packages/console/src/assets/images/table-empty.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/components/Table/TableEmpty.module.scss b/packages/console/src/components/Table/TableEmpty.module.scss new file mode 100644 index 000000000..8cace5fed --- /dev/null +++ b/packages/console/src/components/Table/TableEmpty.module.scss @@ -0,0 +1,17 @@ +@use '@/scss/underscore' as _; + +.tableEmpty { + padding: _.unit(4) 0; + text-align: center; + + .title { + font: var(--font-subhead-2); + margin-bottom: _.unit(2); + } + + .content { + font: var(--font-body-2); + color: var(--color-neutral-50); + margin-bottom: _.unit(2); + } +} diff --git a/packages/console/src/components/Table/TableEmpty.tsx b/packages/console/src/components/Table/TableEmpty.tsx new file mode 100644 index 000000000..b7a95db6e --- /dev/null +++ b/packages/console/src/components/Table/TableEmpty.tsx @@ -0,0 +1,33 @@ +import React, { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import EmptyImage from '@/assets/images/table-empty.svg'; + +import * as styles from './TableEmpty.module.scss'; + +type Props = { + title?: string; + content?: string; + children?: ReactNode; +}; + +const TableEmpty = ({ title, content, children }: Props) => { + const { t } = useTranslation(); + + return ( + + +
+
+ +
+
{title ?? t('admin_console.errors.empty')}
+ {content &&
{content}
} + {children} +
+ + + ); +}; + +export default TableEmpty; diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx index b1214e036..b83cd2fac 100644 --- a/packages/console/src/pages/ApiResources/index.tsx +++ b/packages/console/src/pages/ApiResources/index.tsx @@ -13,6 +13,7 @@ import CardTitle from '@/components/CardTitle'; import CopyToClipboard from '@/components/CopyToClipboard'; import ImagePlaceholder from '@/components/ImagePlaceholder'; import ItemPreview from '@/components/ItemPreview'; +import TableEmpty from '@/components/Table/TableEmpty'; import TableError from '@/components/Table/TableError'; import TableLoading from '@/components/Table/TableLoading'; import { RequestError } from '@/hooks/use-api'; @@ -80,6 +81,17 @@ const ApiResources = () => { /> )} {isLoading && } + {data?.length === 0 && ( + +