Implement metadata panel new design

okfn · Dec 11, 2024 · 834e8dc · 834e8dc
1 parent 48a4c89
commit 834e8dc
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 57 deletions.
diff --git a/client/components/Application/Dialogs/UploadFile/UploadFile.tsx b/client/components/Application/Dialogs/UploadFile/UploadFile.tsx
@@ -2,7 +2,7 @@ import uploadFilesDialogImg from '@client/assets/dialog_upload_files.png'
 import iconUploadFolderImg from '@client/assets/folder-open-big-plus.png'
 import iconLinkTextField from '@client/assets/icon_link_textfield.svg'
 import iconUploadFileImg from '@client/assets/icon_upload_file.png'
-import DialogTabs from '@client/components//Parts/Tabs/Dialog'
+import SimpleTabs from '@client/components/Parts/Tabs/SimpleTabs'
 import SimpleButton from '@client/components/Parts/Buttons/SimpleButton'
 import Columns from '@client/components/Parts/Grids/Columns'
 import { LinearProgress } from '@client/components/Progress'
@@ -64,10 +64,11 @@ export function UploadFileDialog() {
           <img src={uploadFilesDialogImg} alt={t('alt-image-folder-dialog')} />
         </Box>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <DialogTabs
+          <SimpleTabs
             labels={TAB_LABELS}
             disabled={progress?.blocking}
             onChange={store.resetState}
+            centered
           >
             <Stack spacing={2}>
               <Columns columns={2} spacing={4}>
@@ -80,7 +81,7 @@ export function UploadFileDialog() {
               <RemoteFileForm />
               <LinearProgress progress={progress} />
             </Stack>
-          </DialogTabs>
+          </SimpleTabs>
         </Box>
       </DialogContent>
     </Dialog>

diff --git a/client/components/Editors/Dialect/Layout.tsx b/client/components/Editors/Dialect/Layout.tsx
@@ -11,10 +11,9 @@ import * as types from '../../../types'
 import { useTranslation } from 'react-i18next'
 
 export default function Layout() {
-  const externalMenu = useStore((state) => state.externalMenu)
   return (
     <Box sx={{ height: '100%' }}>
-      {!externalMenu ? <LayoutWithMenu /> : <LayoutWithoutMenu />}
+      <LayoutWithMenu />
     </Box>
   )
 }

diff --git a/client/components/Editors/Portal/Layout.tsx b/client/components/Editors/Portal/Layout.tsx
@@ -1,6 +1,6 @@
 import publishDialogImg from '@client/assets/dialog_publish.png'
 import Box from '@mui/material/Box'
-import DialogTabs from '../../Parts/Tabs/Dialog'
+import SimpleTabs from '../../Parts/Tabs/SimpleTabs'
 import CkanSection from './Sections/Ckan'
 import GithubSection from './Sections/Github'
 import ZenodoSection from './Sections/Zenodo'
@@ -21,7 +21,7 @@ export default function Layout() {
         <img src={publishDialogImg} alt="Image Publish Dialog" />
       </Box>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <DialogTabs labels={tabLabels}>
+        <SimpleTabs labels={tabLabels} centered>
           <Box>
             <CkanSection />
           </Box>
@@ -31,7 +31,7 @@ export default function Layout() {
           <Box>
             <ZenodoSection />
           </Box>
-        </DialogTabs>
+        </SimpleTabs>
       </Box>
     </Box>
   )

diff --git a/client/components/Editors/Resource/Layout.tsx b/client/components/Editors/Resource/Layout.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import capitalize from 'lodash/capitalize'
 import Box from '@mui/material/Box'
 import Columns from '../../Parts/Grids/Columns'
 import EditorHelp from '../Base/Help'
@@ -14,6 +13,7 @@ import ContributorsSection from './Sections/Contributors'
 import { useStore } from './store'
 import * as types from '../../../types'
 import { useTranslation } from 'react-i18next'
+import SimpleTabs from '../../Parts/Tabs/SimpleTabs'
 
 export default function Layout() {
   const externalMenu = useStore((state) => state.externalMenu)
@@ -27,7 +27,6 @@ export default function Layout() {
 // TODO: improve menu implementation (move some state to store / reduce re-renders)
 function LayoutWithMenu() {
   const section = useStore((state) => state.section)
-  const type = useStore((state) => state.descriptor.type)
   const format = useStore((state) => state.descriptor.format)
   const dialect = useStore((state) => state.descriptor.dialect)
   const schema = useStore((state) => state.descriptor.schema)
@@ -37,17 +36,14 @@ function LayoutWithMenu() {
   const onFieldSelected = useStore((state) => state.onFieldSelected)
   const { t } = useTranslation()
 
-  const MENU_ITEMS: types.IMenuItem[] = [
+  const TAB_LABELS = [t('resource'), t('dialect'), t('schema')]
+
+  const RESOURCE_MENU_ITEMS: types.IMenuItem[] = [
     { section: 'resource', name: t('resource') },
     { section: 'resource/integrity', name: t('integrity') },
     { section: 'resource/licenses', name: t('licenses') },
     { section: 'resource/contributors', name: t('contributors') },
     { section: 'resource/sources', name: t('sources') },
-    { section: 'dialect', name: t('dialect'), disabled: type !== 'table' },
-    { section: 'dialect/format', name: capitalize(format) || t('format') },
-    { section: 'schema', name: t('schema'), disabled: type !== 'table' },
-    { section: 'schema/fields', name: t('fields') },
-    { section: 'schema/foreignKeys', name: t('foreign-keys') },
   ]
 
   // We use memo to avoid nested editors re-rerender
@@ -64,45 +60,35 @@ function LayoutWithMenu() {
   }, [])
 
   return (
-    <Columns spacing={3} layout={[2, 8]} columns={10}>
-      <Box sx={{ padding: 2, borderRight: 'solid 1px #ddd', height: '100%' }}>
-        <MenuTree
-          menuItems={MENU_ITEMS}
-          selected={section}
-          defaultExpanded={['resource']}
-          onSelect={(section) => {
-            updateHelp(section)
-            updateState({ section })
-            externalMenu.section = section
-          }}
-        />
-      </Box>
-      <Box>
-        <Box hidden={!section.startsWith('resource')}>
+    <SimpleTabs
+      labels={TAB_LABELS}
+      onChange={(section: string) => {
+        updateHelp(section)
+        updateState({ section })
+        externalMenu.section = section
+      }}
+    >
+      <Columns spacing={3} layout={[3, 5]} columns={8}>
+        <Box sx={{ flexGrow: 1 }}>
+          <MenuTree
+            menuItems={RESOURCE_MENU_ITEMS}
+            selected={section}
+            defaultExpanded={['resources']}
+            onSelect={(section) => {
+              updateHelp(section)
+              updateState({ section })
+            }}
+          />
           <LayoutWithoutMenu />
         </Box>
-        {type === 'table' && (
-          <Box>
-            <Box hidden={!section.startsWith('dialect')}>
-              <Dialect
-                format={format}
-                dialect={dialect}
-                externalMenu={externalMenu}
-                onChange={handleDialectChange}
-              />
-            </Box>
-            <Box hidden={!section.startsWith('schema')}>
-              <Schema
-                schema={schema}
-                externalMenu={externalMenu}
-                onChange={handleSchemaChange}
-                onFieldSelected={onFieldSelected}
-              />
-            </Box>
-          </Box>
-        )}
-      </Box>
-    </Columns>
+      </Columns>
+      <Dialect format={format} dialect={dialect} onChange={handleDialectChange} />
+      <Schema
+        schema={schema}
+        onChange={handleSchemaChange}
+        onFieldSelected={onFieldSelected}
+      />
+    </SimpleTabs>
   )
 }
 

diff --git a/client/components/Editors/Schema/Layout.tsx b/client/components/Editors/Schema/Layout.tsx
@@ -10,10 +10,9 @@ import { useStore } from './store'
 import * as types from '../../../types'
 
 export default function Layout() {
-  const externalMenu = useStore((state) => state.externalMenu)
   return (
     <Box sx={{ height: '100%' }}>
-      {!externalMenu ? <LayoutWithMenu /> : <LayoutWithoutMenu />}
+      <LayoutWithMenu />
     </Box>
   )
 }

diff --git a/client/components/Parts/Tabs/Dialog.tsx → client/components/Parts/Tabs/SimpleTabs.tsx b/client/components/Parts/Tabs/Dialog.tsx → client/components/Parts/Tabs/SimpleTabs.tsx
@@ -3,7 +3,7 @@ import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import * as React from 'react'
 
-export default function DialogTabs(props: any) {
+export default function SimpleTabs(props: any) {
   const [currentTabIndex, setCurrentTabIndex] = React.useState(0)
 
   function a11yProps(index: number) {
@@ -30,7 +30,7 @@ export default function DialogTabs(props: any) {
           value={currentTabIndex}
           onChange={handleChange}
           aria-label="File Upload Tabs"
-          centered
+          centered={props.centered}
           sx={{
             '& .MuiTabs-indicator': {
               backgroundColor: (theme) => theme.palette.OKFNBlue.main,

diff --git a/localization/locales/en.json b/localization/locales/en.json
@@ -107,6 +107,7 @@
     "AI-assistant": "AI Assistant",
     "alt-image-folder-dialog": "Image Folder Dialog",
     "alt-icon-upload-file": "Icon-Upload File",
+    "aria-file-upload-tabs": "File Upload Tabs",
     "resource": "Resource",
     "integrity": "Integrity",
     "licenses": "Licenses",