Update storage tab layout (#463)

* Update storage tab layout * Update result strings to support one or many items
RolnickLab · Jul 30, 2024 · 9cdc0b4 · 9cdc0b4
1 parent cf7d8b8
commit 9cdc0b4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/ui/src/pages/overview/storage/storage.module.scss b/ui/src/pages/overview/storage/storage.module.scss
@@ -1,12 +1,6 @@
 @import 'src/design-system/variables/colors.scss';
 @import 'src/design-system/variables/typography.scss';
 
-.fetchInfoWrapper {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
 .connectionStatus {
   .wizardRoot {
     border-width: 1px !important;

diff --git a/ui/src/pages/overview/storage/storage.tsx b/ui/src/pages/overview/storage/storage.tsx
@@ -1,21 +1,24 @@
-import { FetchInfo } from 'components/fetch-info/fetch-info'
 import { API_ROUTES } from 'data-services/constants'
 import { useStorageSources } from 'data-services/hooks/storage-sources/useStorageSources'
+import { PageHeader } from 'design-system/components/page-header/page-header'
 import { PaginationBar } from 'design-system/components/pagination-bar/pagination-bar'
 import { Table } from 'design-system/components/table/table/table'
 import { TableSortSettings } from 'design-system/components/table/types'
 import { Error } from 'pages/error/error'
 import { NewEntityDialog } from 'pages/overview/entities/new-entity-dialog'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
 import { usePagination } from 'utils/usePagination'
 import { UserPermission } from 'utils/user/types'
 import { columns } from './storage-columns'
-import styles from './storage.module.scss'
 
 export const StorageSources = () => {
   const { projectId } = useParams()
-  const [sort, setSort] = useState<TableSortSettings>()
+  const [sort, setSort] = useState<TableSortSettings | undefined>({
+    field: 'created_at',
+    order: 'desc',
+  })
   const { pagination, setPage } = usePagination()
   const { items, userPermissions, total, isLoading, isFetching, error } =
     useStorageSources({
@@ -31,11 +34,20 @@ export const StorageSources = () => {
 
   return (
     <>
-      {isFetching && (
-        <div className={styles.fetchInfoWrapper}>
-          <FetchInfo isLoading={isLoading} />
-        </div>
-      )}
+      <PageHeader
+        title={translate(STRING.TAB_ITEM_STORAGE)}
+        subTitle={translate(STRING.RESULTS, {
+          total,
+        })}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        tooltip={translate(STRING.TOOLTIP_STORAGE)}
+      >
+        {canCreate && (
+          <NewEntityDialog collection={API_ROUTES.STORAGE} type="storage" />
+        )}
+      </PageHeader>
+
       <Table
         items={items}
         isLoading={isLoading}
@@ -51,9 +63,6 @@ export const StorageSources = () => {
           setPage={setPage}
         />
       ) : null}
-      {canCreate && (
-        <NewEntityDialog collection={API_ROUTES.STORAGE} type="storage" />
-      )}
     </>
   )
 }
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
@@ -356,7 +356,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_PROCESS_NOW_TOOLTIP]:
     'Process this single image with presets',
   [STRING.MESSAGE_RESULT_RANGE]:
-    'Showing {{start}}-{{end}} of {{total}} results',
+    'Showing {{start}}-{{end}} of {{total}} result(s)',
   [STRING.MESSAGE_SIGNED_UP]: 'Signed up successfully!',
   [STRING.MESSAGE_VALUE_INVALID]: 'Please provide a valid value',
   [STRING.MESSAGE_VALUE_MISSING]: 'Please provide a value',
@@ -428,7 +428,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.REJECT_ID]: 'Reject ID',
   [STRING.REJECT_ID_SHORT]: 'Reject',
   [STRING.SELECT_COLUMNS]: 'Select columns',
-  [STRING.RESULTS]: '{{total}} results',
+  [STRING.RESULTS]: '{{total}} result(s)',
   [STRING.STAGES]: 'Stages',
   [STRING.SUMMARY]: 'Summary',
   [STRING.UNKNOWN]: 'Unknown',