Implement metadata panel new design (#687)

client/components/Application/Dialogs/OpenLocation.tsx

@@ -55,7 +55,7 @@ export default function OpenLocationDialog() {
       aria-describedby="dialog-description"
     >
       <IconButton
-        aria-label="close"
+        aria-label={t('close')}
         onClick={handleClose}
         sx={{
           position: 'absolute',

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>

client/components/Editors/Base/Item.tsx

@@ -5,7 +5,8 @@ import Link from '@mui/material/Link'
 import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import Columns from '../../Parts/Grids/Columns'
-import HeadingBox from './Heading/Box'
+import { useTranslation } from 'react-i18next'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 
 export interface EditorItemProps {
   kind: string
@@ -24,23 +25,45 @@ export default function EditorItem(props: React.PropsWithChildren<EditorItemProp
         color={props.isExtras ? 'warning' : undefined}
         title={startCase(props.extrasName)}
         onClick={() => (props.onExtrasClick ? props.onExtrasClick() : undefined)}
+        sx={{
+          border: '1px solid #D3D7D8',
+          color: '#3F4345',
+          backgroundColor: '#FAFAFA',
+          borderRadius: '4px',
+          padding: '4px 10px',
+          '&.MuiButton-root': {
+            textTransform: 'capitalize',
+          },
+        }}
       >
         {startCase(props.extrasName)}
       </Button>
     )
   }
   const BackButton = () => {
+    const { t } = useTranslation()
     return (
-      <Button title="Back to list" onClick={() => props.onBackClick()}>
-        Back to list
+      <Button
+        title={t('back')}
+        onClick={() => props.onBackClick()}
+        startIcon={<ArrowBackIcon />}
+        sx={{
+          '&.MuiButton-root': {
+            textTransform: 'capitalize',
+            color: '#A1A8A9',
+          },
+        }}
+      >
+        {t('back')}
       </Button>
     )
   }
   return (
     <React.Fragment>
-      <HeadingBox>
-        <Columns spacing={1} layout={[6, 6]}>
-          <Box sx={{ whiteSpace: 'nowrap' }}>
+      <Box sx={{ paddingBottom: '10px' }}>
+        <Columns spacing={1}>
+          <BackButton />
+          <Box sx={{ whiteSpace: 'nowrap', alignSelf: 'center' }}>
             <Typography variant="inherit" display="inline" sx={{ color: 'grey' }}>
               <Link onClick={props.onBackClick} sx={{ cursor: 'pointer' }}>
                 {startCase(props.kind)}s
@@ -51,10 +74,9 @@ export default function EditorItem(props: React.PropsWithChildren<EditorItemProp
           </Box>
           <Box sx={{ float: 'right' }}>
             <ExtrasButton />
-            <BackButton />
           </Box>
         </Columns>
-      </HeadingBox>
+      </Box>
       {props.children}
     </React.Fragment>
   )

client/components/Editors/Base/List.tsx

@@ -5,11 +5,12 @@ import { useTranslation } from 'react-i18next'
 import Columns from '../../Parts/Grids/Columns'
 import HeadingBox from './Heading/Box'
 import EditorListItem from './ListItem'
+import startCase from 'lodash/startCase'
 
 export interface EditorListProps {
   kind: string
   query?: string
-  onAddClick?: () => void
+  onAddClick?: (() => void) | null
   // We accept search as a prop otherwise it loses focus
   SearchInput?: React.ReactNode
 }
@@ -19,18 +20,27 @@ export default function EditorList(props: React.PropsWithChildren<EditorListProp
   const AddButton = () => {
     if (!props.onAddClick) return null
 
-    // @ts-ignore
-    const title = t(`add-${props.kind}`) as any
-
     return (
-      <Button title={title} onClick={() => props.onAddClick?.()}>
-        {title}
+      <Button
+        sx={{
+          textTransform: 'capitalize',
+          backgroundColor: (theme) => theme.palette.OKFNGray700.main,
+          color: 'white',
+          padding: '4px 10px',
+          '&:hover': {
+            backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+          },
+        }}
+        title={`Add ${startCase(props.kind)}`}
+        onClick={() => props.onAddClick?.()}
+      >
+        Add {startCase(props.kind)}
       </Button>
     )
   }
 
   // @ts-ignore
-  const title = t(`${props.kind}s`) as any
+  const title = t(`${props.kind.replace(' ', '-')}s`) as any
 
   // TODO: we can make HeadingBox (or with Tabs/Help) "sticky" with CSS:
   // https://developer.mozilla.org/en-US/docs/Web/CSS/position

client/components/Editors/Base/ListItem.tsx

@@ -4,6 +4,7 @@ import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { useTheme } from '@mui/material/styles'
 import { useTranslation } from 'react-i18next'
+import deleteIcon from '../../../assets/delete_icon.svg'
 
 interface EditorListItemProps {
   kind: string
@@ -29,27 +30,30 @@ export default function EditorListItem(props: EditorListItemProps) {
         color="warning"
         component="span"
         title={`${t('remove')} ${capitalize(props.kind)}`}
-        sx={{ marginLeft: 2, textDecoration: 'underline' }}
+        sx={{
+          '& img': {
+            width: '22px',
+          },
+        }}
         onClick={(ev) => {
           ev.stopPropagation()
           props.onRemoveClick?.()
         }}
       >
-        {t('remove')}
+        <img src={deleteIcon} alt="" />
       </Button>
     )
   }
 
   const EndIcon = () => {
-    const label = (props.type || 'item').toUpperCase()
     return (
       <Box>
-        <Typography component="span">{label}</Typography>
         <RemoveButton />
       </Box>
     )
   }
 
+  const label = props.type || 'item'
   return (
     <Button
       size="large"
@@ -59,28 +63,46 @@ export default function EditorListItem(props: EditorListItemProps) {
       disabled={props.disabled}
       title={props.title || `Edit ${capitalize(props.kind)}`}
       sx={{
-        height: theme.spacing(5),
         width: '100%',
-        marginRight: 0,
+        margin: '8px 0',
         justifyContent: 'space-between',
-        textTransform: 'initial',
-        padding: [2, 2],
-        marginTop: 2,
-        marginBottom: 1,
+        textTransform: 'capitalize',
+        padding: '12px 16px',
         whiteSpace: 'nowrap',
+        borderColor: '#E6E7EB',
+        '&:hover': {
+          borderColor: (theme) => theme.palette.OKFNBlue.main,
+        },
       }}
     >
       <span
         style={{
-          width: '70%',
           textAlign: 'left',
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
+          color: theme.palette.OKFNGray700.main,
+          fontWeight: 600,
         }}
       >
         {props.name}
       </span>
+      <Typography
+        sx={{
+          backgroundColor: '#FAFAFA',
+          border: '1px solid #D3D7D8',
+          padding: '4px 10px',
+          fontSize: '14px',
+          color: (theme) => theme.palette.OKFNGray700.main,
+          marginRight: 'auto',
+          marginLeft: '10px',
+        }}
+        component="span"
+      >
+        {props.kind === 'foreign key' || props.kind === 'field'
+          ? label.toUpperCase()
+          : label}
+      </Typography>
     </Button>
   )
 }

client/components/Editors/Dialect/Layout.tsx

@@ -1,69 +1,38 @@
-import * as React from 'react'
 import capitalize from 'lodash/capitalize'
 import Box from '@mui/material/Box'
-import Columns from '../../Parts/Grids/Columns'
-import MenuTree from '../../Parts/Trees/Menu'
-import EditorHelp from '../Base/Help'
 import DialectSection from './Sections/Dialect'
 import FormatSection from './Sections/Format'
 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)
-  return (
-    <Box sx={{ height: '100%' }}>
-      {!externalMenu ? <LayoutWithMenu /> : <LayoutWithoutMenu />}
-    </Box>
-  )
-}
-
-function LayoutWithMenu() {
   const format = useStore((state) => state.format)
-  const section = useStore((state) => state.section)
   const updateHelp = useStore((state) => state.updateHelp)
   const updateState = useStore((state) => state.updateState)
   const { t } = useTranslation()
+
   const MENU_ITEMS: types.IMenuItem[] = [
-    { section: 'dialect', name: t('dialect') },
+    { section: 'dialect', name: t('default') },
     { section: 'dialect/format', name: capitalize(format) || t('format') },
   ]
-  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={['dialect']}
-          onSelect={(section) => {
-            updateHelp(section)
-            updateState({ section })
-          }}
-        />
-      </Box>
-      <LayoutWithoutMenu />
-    </Columns>
-  )
-}
 
-function LayoutWithoutMenu() {
-  const section = useStore((state) => state.externalMenu?.section || state.section)
-  const updateHelp = useStore((state) => state.updateHelp)
-  const helpItem = useStore((state) => state.helpItem)
-  React.useEffect(() => updateHelp(section), [section])
-  if (!section) return null
+  const MENU_LABELS = MENU_ITEMS.map((item) => item.name)
+
   return (
-    <Columns spacing={3} layout={[5, 3]} columns={8}>
-      <Box>
-        <Box hidden={section !== 'dialect'}>
-          <DialectSection />
-        </Box>
-        <Box hidden={section !== 'dialect/format'}>
-          <FormatSection />
-        </Box>
-      </Box>
-      <EditorHelp helpItem={helpItem} />
-    </Columns>
+    <Box sx={{ height: '100%' }}>
+      <SimpleTabs
+        labels={MENU_LABELS}
+        orientation="vertical"
+        onChange={(newValue: number) => {
+          updateHelp(MENU_ITEMS[newValue].section)
+          updateState({ section: MENU_ITEMS[newValue].section })
+        }}
+      >
+        <DialectSection />
+        <FormatSection />
+      </SimpleTabs>
+    </Box>
   )
 }

client/components/Editors/Dialect/Sections/Dialect.tsx

@@ -10,12 +10,15 @@ import { useStore } from '../store'
 import validator from 'validator'
 import * as settings from '../../../../settings'
 import { useTranslation } from 'react-i18next'
+import EditorHelp from '../../Base/Help'
 
 export default function General() {
   const updateHelp = useStore((state) => state.updateHelp)
+  const helpItem = useStore((state) => state.helpItem)
   const { t } = useTranslation()
   return (
     <EditorSection name={t('dialect')} onHeadingClick={() => updateHelp('dialect')}>
+      <EditorHelp helpItem={helpItem} withIcon />
       <Columns spacing={3}>
         <Box>
           <Title />

client/components/Editors/Dialect/Sections/Format/Csv.tsx

@@ -6,11 +6,14 @@ import EditorSection from '../../../Base/Section'
 import * as settings from '../../../../../settings'
 import { useStore, selectors, select } from '../../store'
 import { useTranslation } from 'react-i18next'
+import EditorHelp from '../../../Base/Help'
 
 export default function General() {
   const updateHelp = useStore((state) => state.updateHelp)
+  const helpItem = useStore((state) => state.helpItem)
   return (
     <EditorSection name="Csv" onHeadingClick={() => updateHelp('dialect/format')}>
+      <EditorHelp helpItem={helpItem} withIcon />
       <Columns spacing={3}>
         <Box>
           <Delimiter />

client/components/Editors/Dialect/Sections/Format/Excel.tsx

@@ -8,11 +8,14 @@ import * as settings from '../../../../../settings'
 import { useStore, selectors, select } from '../../store'
 // import validator from 'validator'
 import { useTranslation } from 'react-i18next'
+import EditorHelp from '../../../Base/Help'
 
 export default function General() {
   const updateHelp = useStore((state) => state.updateHelp)
+  const helpItem = useStore((state) => state.helpItem)
   return (
     <EditorSection name="Excel" onHeadingClick={() => updateHelp('dialect/format')}>
+      <EditorHelp helpItem={helpItem} withIcon />
       <Columns spacing={3}>
         <Box>
           <Sheet />