From c7e1f5ee974b0717e4f841deb29d6ad7c8fd530f Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Wed, 16 Nov 2022 19:30:28 +0800 Subject: [PATCH 1/2] refactor(console): resources layout (#2453) --- .../components/AppContent/index.module.scss | 2 +- .../components/AuditLogTable/index.module.scss | 4 ---- .../src/components/AuditLogTable/index.tsx | 3 ++- .../src/pages/ApiResources/index.module.scss | 14 -------------- .../console/src/pages/ApiResources/index.tsx | 10 +++++----- .../src/pages/Applications/index.module.scss | 14 -------------- .../console/src/pages/Applications/index.tsx | 14 ++++++++------ .../src/pages/AuditLogs/index.module.scss | 10 ---------- packages/console/src/pages/AuditLogs/index.tsx | 10 ++++------ .../src/pages/Connectors/index.module.scss | 15 --------------- .../console/src/pages/Connectors/index.tsx | 10 +++++----- .../console/src/pages/Users/index.module.scss | 18 +++++------------- packages/console/src/pages/Users/index.tsx | 8 ++++---- packages/console/src/scss/_underscore.scss | 2 -- .../console/src/scss/resources.module.scss | 17 +++++++++++++++++ 15 files changed, 51 insertions(+), 100 deletions(-) delete mode 100644 packages/console/src/pages/AuditLogs/index.module.scss create mode 100644 packages/console/src/scss/resources.module.scss diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss index 7c6517201..977ba8275 100644 --- a/packages/console/src/components/AppContent/index.module.scss +++ b/packages/console/src/components/AppContent/index.module.scss @@ -21,7 +21,7 @@ .main { flex-grow: 1; - padding-right: _.unit(6); + padding: 0 _.unit(3) 0 _.unit(2); overflow-y: scroll; > * { diff --git a/packages/console/src/components/AuditLogTable/index.module.scss b/packages/console/src/components/AuditLogTable/index.module.scss index cff0275e0..90cac4e27 100644 --- a/packages/console/src/components/AuditLogTable/index.module.scss +++ b/packages/console/src/components/AuditLogTable/index.module.scss @@ -21,10 +21,6 @@ } } -.table { - margin-top: _.unit(4); - flex: 1; -} .pagination { margin-top: _.unit(4); diff --git a/packages/console/src/components/AuditLogTable/index.tsx b/packages/console/src/components/AuditLogTable/index.tsx index 219e6fe3a..5186bdfa8 100644 --- a/packages/console/src/components/AuditLogTable/index.tsx +++ b/packages/console/src/components/AuditLogTable/index.tsx @@ -13,6 +13,7 @@ import TableError from '@/components/Table/TableError'; import TableLoading from '@/components/Table/TableLoading'; import UserName from '@/components/UserName'; import type { RequestError } from '@/hooks/use-api'; +import * as resourcesStyles from '@/scss/resources.module.scss'; import * as tableStyles from '@/scss/table.module.scss'; import ApplicationSelector from './components/ApplicationSelector'; @@ -85,7 +86,7 @@ const AuditLogTable = ({ userId }: Props) => { /> -
+
diff --git a/packages/console/src/pages/ApiResources/index.module.scss b/packages/console/src/pages/ApiResources/index.module.scss index ed7edbe09..d5be21d4e 100644 --- a/packages/console/src/pages/ApiResources/index.module.scss +++ b/packages/console/src/pages/ApiResources/index.module.scss @@ -1,19 +1,5 @@ @use '@/scss/underscore' as _; -.card { - @include _.flex-column; -} - -.headline { - display: flex; - justify-content: space-between; -} - -.table { - margin-top: _.unit(4); - flex: 1; -} - .icon { flex-shrink: 0; } diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx index c17d0e727..d84f1f02d 100644 --- a/packages/console/src/pages/ApiResources/index.tsx +++ b/packages/console/src/pages/ApiResources/index.tsx @@ -12,7 +12,6 @@ import ApiResourceDark from '@/assets/images/api-resource-dark.svg'; import ApiResource from '@/assets/images/api-resource.svg'; import Plus from '@/assets/images/plus.svg'; import Button from '@/components/Button'; -import Card from '@/components/Card'; import CardTitle from '@/components/CardTitle'; import CopyToClipboard from '@/components/CopyToClipboard'; import ItemPreview from '@/components/ItemPreview'; @@ -23,6 +22,7 @@ import TableLoading from '@/components/Table/TableLoading'; import type { RequestError } from '@/hooks/use-api'; import { useTheme } from '@/hooks/use-theme'; import * as modalStyles from '@/scss/modal.module.scss'; +import * as resourcesStyles from '@/scss/resources.module.scss'; import * as tableStyles from '@/scss/table.module.scss'; import CreateForm from './components/CreateForm'; @@ -46,8 +46,8 @@ const ApiResources = () => { const [apiResources, totalCount] = data ?? []; return ( - -
+
+
-
+
@@ -148,7 +148,7 @@ const ApiResources = () => { /> )} - + ); }; diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss index 34a50ba5d..938dd8918 100644 --- a/packages/console/src/pages/Applications/index.module.scss +++ b/packages/console/src/pages/Applications/index.module.scss @@ -1,19 +1,5 @@ @use '@/scss/underscore' as _; -.card { - @include _.flex-column; -} - -.headline { - display: flex; - justify-content: space-between; -} - -.table { - margin-top: _.unit(4); - flex: 1; -} - .icon { flex-shrink: 0; } diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx index ec1ad9967..bfeb4f13e 100644 --- a/packages/console/src/pages/Applications/index.tsx +++ b/packages/console/src/pages/Applications/index.tsx @@ -9,7 +9,6 @@ import useSWR from 'swr'; import Plus from '@/assets/images/plus.svg'; import ApplicationIcon from '@/components/ApplicationIcon'; import Button from '@/components/Button'; -import Card from '@/components/Card'; import CardTitle from '@/components/CardTitle'; import CopyToClipboard from '@/components/CopyToClipboard'; import ItemPreview from '@/components/ItemPreview'; @@ -19,6 +18,7 @@ import TableError from '@/components/Table/TableError'; import TableLoading from '@/components/Table/TableLoading'; import type { RequestError } from '@/hooks/use-api'; import * as modalStyles from '@/scss/modal.module.scss'; +import * as resourcesStyles from '@/scss/resources.module.scss'; import * as tableStyles from '@/scss/table.module.scss'; import { applicationTypeI18nKey } from '@/types/applications'; @@ -41,8 +41,8 @@ const Applications = () => { const [applications, totalCount] = data ?? []; return ( - -
+
+
-
+
{' '} +
+ + {!data && error && ( { /> )} - + ); }; diff --git a/packages/console/src/pages/AuditLogs/index.module.scss b/packages/console/src/pages/AuditLogs/index.module.scss deleted file mode 100644 index f5686478c..000000000 --- a/packages/console/src/pages/AuditLogs/index.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@/scss/underscore' as _; - -.card { - @include _.flex-column; -} - -.headline { - display: flex; - justify-content: space-between; -} diff --git a/packages/console/src/pages/AuditLogs/index.tsx b/packages/console/src/pages/AuditLogs/index.tsx index bc0104d57..4a2d63e9e 100644 --- a/packages/console/src/pages/AuditLogs/index.tsx +++ b/packages/console/src/pages/AuditLogs/index.tsx @@ -1,17 +1,15 @@ import AuditLogTable from '@/components/AuditLogTable'; -import Card from '@/components/Card'; import CardTitle from '@/components/CardTitle'; - -import * as styles from './index.module.scss'; +import * as resourcesStyles from '@/scss/resources.module.scss'; const AuditLogs = () => { return ( - -
+
+
- +
); }; diff --git a/packages/console/src/pages/Connectors/index.module.scss b/packages/console/src/pages/Connectors/index.module.scss index 7a34d0ef7..7b378220b 100644 --- a/packages/console/src/pages/Connectors/index.module.scss +++ b/packages/console/src/pages/Connectors/index.module.scss @@ -1,24 +1,9 @@ @use '@/scss/underscore' as _; -.card { - @include _.flex-column; -} - -.headline { - display: flex; - justify-content: space-between; - align-items: center; -} - .tabs { margin-top: _.unit(4); } -.table { - margin-top: _.unit(4); - flex: 1; -} - .connectorName { width: 360px; } diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx index d57fd09eb..e7e48dd75 100644 --- a/packages/console/src/pages/Connectors/index.tsx +++ b/packages/console/src/pages/Connectors/index.tsx @@ -8,7 +8,6 @@ import Plus from '@/assets/images/plus.svg'; import SocialConnectorEmptyDark from '@/assets/images/social-connector-empty-dark.svg'; import SocialConnectorEmpty from '@/assets/images/social-connector-empty.svg'; import Button from '@/components/Button'; -import Card from '@/components/Card'; import CardTitle from '@/components/CardTitle'; import TabNav, { TabNavItem } from '@/components/TabNav'; import TableEmpty from '@/components/Table/TableEmpty'; @@ -16,6 +15,7 @@ import TableError from '@/components/Table/TableError'; import TableLoading from '@/components/Table/TableLoading'; import useConnectorGroups from '@/hooks/use-connector-groups'; import { useTheme } from '@/hooks/use-theme'; +import * as resourcesStyles from '@/scss/resources.module.scss'; import * as tableStyles from '@/scss/table.module.scss'; import ConnectorRow from './components/ConnectorRow'; @@ -60,8 +60,8 @@ const Connectors = () => { return ( <> - -
+
+
{isSocial && (
{t('applications.application_name')} {t('applications.app_id')}
@@ -145,7 +145,7 @@ const Connectors = () => {
- +
table { - >tbody { - >tr { - >td { + > table { + > tbody { + > tr { + > td { padding-top: 10px; padding-bottom: 10px; } diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx index bf71fbda5..4c41a58dc 100644 --- a/packages/console/src/pages/Users/index.tsx +++ b/packages/console/src/pages/Users/index.tsx @@ -10,7 +10,6 @@ import useSWR from 'swr'; import Plus from '@/assets/images/plus.svg'; import ApplicationName from '@/components/ApplicationName'; import Button from '@/components/Button'; -import Card from '@/components/Card'; import CardTitle from '@/components/CardTitle'; import DateTime from '@/components/DateTime'; import ItemPreview from '@/components/ItemPreview'; @@ -23,6 +22,7 @@ import { generatedPasswordStorageKey } from '@/consts'; import { generateAvatarPlaceHolderById } from '@/consts/avatars'; import type { RequestError } from '@/hooks/use-api'; import * as modalStyles from '@/scss/modal.module.scss'; +import * as resourcesStyles from '@/scss/resources.module.scss'; import * as tableStyles from '@/scss/table.module.scss'; import CreateForm from './components/CreateForm'; @@ -46,8 +46,8 @@ const Users = () => { const [users, totalCount] = data ?? []; return ( - -
+
+
- +
); }; diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss index 90c142c20..27fcffa5a 100644 --- a/packages/console/src/scss/_underscore.scss +++ b/packages/console/src/scss/_underscore.scss @@ -5,9 +5,7 @@ } @mixin main-content-width { - max-width: 1168px; min-width: 604px; - margin: 0 auto; } @mixin flex-column { diff --git a/packages/console/src/scss/resources.module.scss b/packages/console/src/scss/resources.module.scss new file mode 100644 index 000000000..e542d4ec3 --- /dev/null +++ b/packages/console/src/scss/resources.module.scss @@ -0,0 +1,17 @@ +@use '@/scss/underscore' as _; + +.container { + width: 100%; + @include _.flex-column; + + .headline { + display: flex; + justify-content: space-between; + } + + .table { + flex: 1; + margin-top: _.unit(4); + background-color: var(--color-layer-1); + } +} From 891beed21d2f90f68602935397d2567bb17dc1a3 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Wed, 16 Nov 2022 19:43:04 +0800 Subject: [PATCH 2/2] refactor(console): add pagination item range info (#2454) --- .../src/components/AuditLogTable/index.tsx | 3 +- .../components/Pagination/index.module.scss | 12 ++++ .../src/components/Pagination/index.tsx | 61 +++++++++++-------- .../console/src/pages/ApiResources/index.tsx | 3 +- .../console/src/pages/Applications/index.tsx | 3 +- packages/console/src/pages/Users/index.tsx | 3 +- .../de/translation/admin-console/general.ts | 1 + .../en/translation/admin-console/general.ts | 1 + .../fr/translation/admin-console/general.ts | 1 + .../ko/translation/admin-console/general.ts | 1 + .../translation/admin-console/general.ts | 1 + .../translation/admin-console/general.ts | 1 + .../translation/admin-console/general.ts | 1 + 13 files changed, 64 insertions(+), 28 deletions(-) diff --git a/packages/console/src/components/AuditLogTable/index.tsx b/packages/console/src/components/AuditLogTable/index.tsx index 5186bdfa8..5425c0fa3 100644 --- a/packages/console/src/components/AuditLogTable/index.tsx +++ b/packages/console/src/components/AuditLogTable/index.tsx @@ -142,8 +142,9 @@ const AuditLogTable = ({ userId }: Props) => {
{!!totalCount && ( { updateQuery('page', String(page)); }} diff --git a/packages/console/src/components/Pagination/index.module.scss b/packages/console/src/components/Pagination/index.module.scss index f5d085b4f..63d0fe365 100644 --- a/packages/console/src/components/Pagination/index.module.scss +++ b/packages/console/src/components/Pagination/index.module.scss @@ -1,9 +1,21 @@ @use '@/scss/underscore' as _; +.container { + display: flex; + justify-content: flex-end; +} + +.positionInfo { + align-self: flex-end; + font: var(--font-body-medium); + color: var(--color-text-secondary); +} + .pagination { display: flex; justify-content: right; margin: 0; + padding-inline-start: _.unit(4); li { list-style: none; diff --git a/packages/console/src/components/Pagination/index.tsx b/packages/console/src/components/Pagination/index.tsx index 4a88ef826..455fa3be9 100644 --- a/packages/console/src/components/Pagination/index.tsx +++ b/packages/console/src/components/Pagination/index.tsx @@ -1,4 +1,5 @@ import classNames from 'classnames'; +import { useTranslation } from 'react-i18next'; import ReactPaginate from 'react-paginate'; import Button from '../Button'; @@ -9,34 +10,46 @@ import * as styles from './index.module.scss'; type Props = { pageIndex: number; - pageCount: number; + totalCount: number; + pageSize: number; onChange?: (pageIndex: number) => void; }; -const Pagination = ({ pageIndex, pageCount, onChange }: Props) => { +const Pagination = ({ pageIndex, totalCount, pageSize, onChange }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const pageCount = Math.ceil(totalCount / pageSize); + + const min = (pageIndex - 1) * pageSize + 1; + const max = pageIndex * pageSize; + return ( - ( -
); }; diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx index d84f1f02d..71c8a9944 100644 --- a/packages/console/src/pages/ApiResources/index.tsx +++ b/packages/console/src/pages/ApiResources/index.tsx @@ -140,8 +140,9 @@ const ApiResources = () => {
{!!totalCount && ( { setQuery({ page: String(page) }); }} diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx index bfeb4f13e..9b80d83fc 100644 --- a/packages/console/src/pages/Applications/index.tsx +++ b/packages/console/src/pages/Applications/index.tsx @@ -131,8 +131,9 @@ const Applications = () => {
{!!totalCount && ( { setQuery({ page: String(page) }); }} diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx index 4c41a58dc..4301a047c 100644 --- a/packages/console/src/pages/Users/index.tsx +++ b/packages/console/src/pages/Users/index.tsx @@ -156,8 +156,9 @@ const Users = () => {
{!!totalCount && ( { setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) }); }} diff --git a/packages/phrases/src/locales/de/translation/admin-console/general.ts b/packages/phrases/src/locales/de/translation/admin-console/general.ts index 070a3c097..adba1781f 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/general.ts @@ -38,6 +38,7 @@ const general = { stay_on_page: 'Auf Seite bleiben', type_to_search: 'Tippe um zu suchen', got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/en/translation/admin-console/general.ts b/packages/phrases/src/locales/en/translation/admin-console/general.ts index 3701119b3..8e368db3d 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts @@ -37,6 +37,7 @@ const general = { stay_on_page: 'Stay on Page', type_to_search: 'Type to search', got_it: 'Got it', + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', }; export default general; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/general.ts b/packages/phrases/src/locales/fr/translation/admin-console/general.ts index 4686987d5..ae1ab845b 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts @@ -38,6 +38,7 @@ const general = { stay_on_page: 'Rester sur la page', type_to_search: 'Type to search', // UNTRANSLATED got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/general.ts b/packages/phrases/src/locales/ko/translation/admin-console/general.ts index 3d88f40a1..798e15207 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts @@ -37,6 +37,7 @@ const general = { stay_on_page: '페이지 유지하기', type_to_search: 'Type to search', // UNTRANSLATED got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts index 1bae83b75..955eb7383 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts @@ -37,6 +37,7 @@ const general = { stay_on_page: 'Ficar na página', type_to_search: 'Type to search', // UNTRANSLATED got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts index 23b3492c6..1a75ffff0 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts @@ -38,6 +38,7 @@ const general = { stay_on_page: 'Bu sayfada kal', type_to_search: 'Type to search', // UNTRANSLATED got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} of {{total, number}}', // UNTRANSLATED }; export default general; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts index 3d4d1fa55..5dd98f434 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts @@ -37,6 +37,7 @@ const general = { stay_on_page: '留在此页', type_to_search: '输入搜索', got_it: 'Got it', // UNTRANSLATED + page_info: '{{min, number}}-{{max, number}} 共 {{total, number}} 条', // UNTRANSLATED }; export default general;