Make changes to datagrid

client/components/Controllers/Table/Menu.tsx

@@ -1,5 +1,7 @@
 import * as menu from '../../Parts/Bars/Menu'
 import * as store from '@client/store'
+import Box from '@mui/material/Box'
+import * as action from '../../Parts/Bars/Action'
 
 export default function Menu() {
   const panel = store.useStore((state) => state.panel)
@@ -8,30 +10,53 @@ export default function Menu() {
   const source = store.useStore((state) => state.source)
   const undoneHistory = store.useStore((state) => state.table?.undoneHistory)
 
+  const isTableUpdated = store.useStore(store.getIsTableOrResourceUpdated)
+
   return (
-    <menu.MenuBar>
-      <menu.MetadataButton
-        active={panel === 'metadata'}
-        onClick={() => store.togglePanel('metadata')}
-      />
-      <menu.ReportButton
-        disabled={!report || report?.valid}
-        active={panel === 'report'}
-        onClick={() => store.togglePanel('report')}
-      />
-      <menu.SourceButton
-        disabled={!source?.text}
-        active={panel === 'source'}
-        onClick={() => store.togglePanel('source')}
-      />
-      <menu.UndoButton
-        onClick={store.undoTableChange}
-        disabled={!history?.changes.length}
-      />
-      <menu.RedoButton
-        onClick={store.redoTableChange}
-        disabled={!undoneHistory?.changes.length}
-      />
+    <menu.MenuBar fullWidth>
+      <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <menu.MetadataButton
+            active={panel === 'metadata'}
+            onClick={() => store.togglePanel('metadata')}
+            color="OKFNCoolGray"
+          />
+          <menu.ReportButton
+            disabled={!report || report?.valid}
+            active={panel === 'report'}
+            onClick={() => store.togglePanel('report')}
+            color="OKFNCoolGray"
+          />
+          <menu.SourceButton
+            disabled={!source?.text}
+            active={panel === 'source'}
+            onClick={() => store.togglePanel('source')}
+            color="OKFNCoolGray"
+          />
+          <menu.UndoButton
+            onClick={store.undoTableChange}
+            disabled={!history?.changes.length}
+            color="OKFNCoolGray"
+          />
+          <menu.RedoButton
+            onClick={store.redoTableChange}
+            disabled={!undoneHistory?.changes.length}
+            color="OKFNCoolGray"
+          />
+        </Box>
+        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+          <action.PublishButton
+            disabled={isTableUpdated}
+            onClick={() => store.openDialog('publish')}
+          />
+          <action.SaveButton updated={isTableUpdated} onClick={store.saveTable} />
+        </Box>
+      </Box>
     </menu.MenuBar>
   )
 }

client/components/Controllers/Table/Panel.tsx

@@ -13,7 +13,11 @@ export default function Panel() {
     <ScrollBox
       hidden={!panel}
       height={theme.spacing(42)}
-      sx={{ borderTop: 'solid 1px #ddd' }}
+      sx={{
+        borderTop: 'solid 1px #ddd',
+        backgroundColor: 'white',
+        width: '100%',
+      }}
     >
       {panel === 'metadata' && <MetadataPanel />}
       {panel === 'report' && <ReportPanel />}

client/components/Controllers/Table/index.tsx

@@ -1,23 +1,26 @@
 import Box from '@mui/material/Box'
 import ScrollBox from '../../Parts/Boxes/Scroll'
-import { useTheme } from '@mui/material/styles'
-import Action from './Action'
 import Editor from './Editor'
 import Menu from './Menu'
 import Panel from './Panel'
 
 export default function Table() {
-  const theme = useTheme()
-  const contentHeight = `calc(100vh - ${theme.spacing(8 + 8)})`
-
   return (
-    <Box sx={{ height: '100%', width: '100%' }}>
+    <Box
+      sx={{
+        height: '100%',
+        width: '100%',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+      }}
+    >
       <Menu />
-      <ScrollBox height={contentHeight}>
+      <ScrollBox sx={{ flexGrow: 1 }}>
         <Editor />
       </ScrollBox>
       <Panel />
-      <Action />
     </Box>
   )
 }

client/components/Editors/Table/columns.tsx

@@ -1,6 +1,7 @@
 import LightTooltip from '../../Parts/Tooltips/Light'
 import * as helpers from '../../../helpers'
 import * as types from '../../../types'
+import { useTheme } from '@mui/material/styles'
 
 // TODO: remove colors hard-coding
 // TODO: use proper InovuaDatagrid types
@@ -32,6 +33,8 @@ export function createColumns(
     },
   }
 
+  const theme = useTheme()
+
   const dataColumns = []
   for (const field of schema.fields) {
     // TODO: fix this on ther server side -- schema should not have hidden fields
@@ -50,7 +53,7 @@ export function createColumns(
       type: ['integer', 'number'].includes(field.type) ? 'number' : 'string',
       headerProps:
         field.name in errorIndex.label
-          ? { style: { color: 'white', background: 'red' } }
+          ? { style: { color: 'white', background: theme.palette.OKFNRed400.main } }
           : field.name === selection?.columnName
           ? { style: { color: '#ed6c02' } }
           : undefined,

client/components/Editors/Table/index.tsx

@@ -34,10 +34,15 @@ export default function TableEditor(props: TableEditorProps) {
     const debouncedHandleResize = debounce(function handleResize() {
       resizeTable()
     }, 300)
-    window.addEventListener('resize', debouncedHandleResize)
+
+    const tableElement = document.querySelector('.InovuaReactDataGrid__column-layout')
+
+    tableElement ? new ResizeObserver(debouncedHandleResize).observe(tableElement) : null
 
     return () => {
-      window.removeEventListener('resize', debouncedHandleResize)
+      tableElement
+        ? new ResizeObserver(debouncedHandleResize).observe(tableElement)
+        : null
     }
   })
 

client/components/Parts/Bars/Action.tsx

@@ -2,14 +2,13 @@ import * as React from 'react'
 import noop from 'lodash/noop'
 import Box from '@mui/material/Box'
 import Toolbar from '@mui/material/Toolbar'
-import IosShareIcon from '@mui/icons-material/IosShare'
 import SaveAltIcon from '@mui/icons-material/SaveAlt'
 import CheckIcon from '@mui/icons-material/Check'
 import HistoryIcon from '@mui/icons-material/History'
 import IconButton from '../../Parts/Buttons/Icon'
 import Columns from '../Grids/Columns'
-import LightTooltip from '../Tooltips/Light'
 import { useKeyPress } from 'ahooks'
+import ElectricBoltIcon from '@mui/icons-material/ElectricBolt'
 
 export interface ActionBarProps {}
 
@@ -38,105 +37,93 @@ export interface ButtonProps {
 
 export function SaveAsButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Save to another location [Ctrl+J]'
-  if (props.disabled) title = 'Saving to another location is not available'
   useKeyPress(['ctrl.j'], (event) => {
     event.preventDefault()
     if (!props.disabled) {
       onClick()
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Save As'}
-          Icon={SaveAltIcon}
-          variant="outlined"
-          disabled={props.disabled}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: 'white' }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Save Changes'}
+        Icon={SaveAltIcon}
+        variant="outlined"
+        disabled={props.disabled}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: 'white', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        } }}
+      />
+    </Box>
   )
 }
 
 export function PublishButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Publish on the web [Ctrl+K]'
-  if (props.disabled) title = 'Publishing on the web is not available'
   useKeyPress(['ctrl.k'], (event) => {
     event.preventDefault()
     if (!props.disabled) {
       onClick()
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Publish'}
-          Icon={IosShareIcon}
-          variant="outlined"
-          disabled={props.disabled}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: 'white' }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box sx={{ marginRight: '20px' }}>
+      <IconButton
+        label={props.label || 'Publish'}
+        Icon={ElectricBoltIcon}
+        variant="outlined"
+        disabled={props.disabled}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
+          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        }  }}
+      />
+    </Box>
   )
 }
 
 export function RevertButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Revert the changes [Ctrl+Q]'
-  if (!props.updated) title = 'No changes to revert'
   useKeyPress(['ctrl.q'], (event) => {
     event.preventDefault()
     if (props.updated) {
       onClick()
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Revert'}
-          Icon={HistoryIcon}
-          color={props.updated ? 'warning' : undefined}
-          variant={props.updated ? 'contained' : 'outlined'}
-          disabled={!props.updated}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Revert'}
+        Icon={HistoryIcon}
+        color={props.updated ? 'warning' : undefined}
+        variant={props.updated ? 'contained' : 'outlined'}
+        disabled={!props.updated}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
+      />
+    </Box>
   )
 }
 
 export function SaveButton(props: ButtonProps) {
   const onClick = props.onClick || noop
-  let title = 'Save the changes [Ctrl+S]'
-  if (!props.updated) title = 'No changes to save'
   useKeyPress(['ctrl.s'], (event) => {
     event.preventDefault()
     if (props.updated) {
       onClick()
     }
   })
   return (
-    <LightTooltip title={title}>
-      <Box>
-        <IconButton
-          label={props.label || 'Save'}
-          Icon={CheckIcon}
-          variant={props.updated ? 'contained' : 'outlined'}
-          disabled={!props.updated}
-          onClick={() => onClick()}
-          sx={{ backgroundColor: !props.updated ? 'white' : undefined }}
-        />
-      </Box>
-    </LightTooltip>
+    <Box>
+      <IconButton
+        label={props.label || 'Save changes'}
+        Icon={CheckIcon}
+        variant={props.updated ? 'contained' : 'outlined'}
+        disabled={!props.updated}
+        onClick={() => onClick()}
+        sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
+      />
+    </Box>
   )
 }