Remove revert button (#488)

* Moved Publish dialog to the application
* Removed "Revert" button
* Implemented UnsavedChanges dialog
* Added getIsFileOrResourceUpdated
* Don't use proxy/almost empty index files
* Moved ClickAwayListener to the Application component
* Implemented closeDesktopApp
* Warn the user about unsaved changes even if the cell editing is not commited (#517)

client/components/Application/Content.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
+import { ClickAwayListener } from '@mui/base'
 import Box from '@mui/material/Box'
 import { ErrorBoundary } from 'react-error-boundary'
 import File from '../Controllers/File'
 import Table from '../Controllers/Table'
 import Text from '../Controllers/Text'
 import SpinnerCard from '../Parts/Cards/Spinner'
 import * as store from '@client/store'
-import { client } from '@client/client'
 import { styled } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import CardContent from '@mui/material/CardContent'
@@ -46,7 +46,18 @@ function FileContent() {
         </Box>
       }
     >
-      <Controller path={record.path} client={client} />
+      <ClickAwayListener
+        mouseEvent="onMouseDown"
+        touchEvent="onTouchStart"
+        onClickAway={(event) => {
+          event.preventDefault()
+          store.onFileLeave()
+        }}
+      >
+        <Box>
+          <Controller />
+        </Box>
+      </ClickAwayListener>
     </ErrorBoundary>
   )
 }

client/components/Application/Dialog.tsx

@@ -1,6 +1,7 @@
 import AddRemoteFileDialog from './Dialogs/AddRemoteFile'
 import AddEmptyFolderDialog from './Dialogs/AddEmptyFolder'
 import AdjustFileDialog from './Dialogs/AdjustFile'
+import CloseWithUnsavedChangesDialog from './Dialogs/CloseWithUnsavedChanges'
 import ConfigDialog from './Dialogs/Config'
 import CopyFileDialog from './Dialogs/CopyFile'
 import CopyFolderDialog from './Dialogs/CopyFolder'
@@ -10,6 +11,7 @@ import IndexFilesDialog from './Dialogs/IndexFiles'
 import MoveFileDialog from './Dialogs/MoveFile'
 import MoveFolderDialog from './Dialogs/MoveFolder'
 import PublishDialog from './Dialogs/Publish'
+import UnsavedChangesDialog from './Dialogs/UnsavedChanges'
 import WelcomeBannerDialog from './Dialogs/WelcomeBanner'
 import FileUploadDialog from './Dialogs/FileUpload'
 import * as store from '@client/store'
@@ -29,6 +31,7 @@ const DIALOGS = {
   addEmptyFolder: AddEmptyFolderDialog,
   addRemoteFile: AddRemoteFileDialog,
   adjustFile: AdjustFileDialog,
+  closeWithUnsavedChanges: CloseWithUnsavedChangesDialog,
   config: ConfigDialog,
   configProject: ConfigDialog,
   copyFile: CopyFileDialog,
@@ -39,6 +42,7 @@ const DIALOGS = {
   moveFile: MoveFileDialog,
   moveFolder: MoveFolderDialog,
   publish: PublishDialog,
+  unsavedChanges: UnsavedChangesDialog,
   welcomeBanner: WelcomeBannerDialog,
   fileUpload: FileUploadDialog,
 } as const

client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx

@@ -0,0 +1,29 @@
+import DangerousIcon from '@mui/icons-material/Dangerous'
+import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import * as store from '@client/store'
+
+export default function CloseWithUnsavedChangesDialog() {
+  const onSave = async () => {
+    await store.saveFile()
+    store.closeDesktopApp()
+  }
+
+  const onDiscard = async () => {
+    await store.revertFile()
+    store.closeDesktopApp()
+  }
+
+  return (
+    <ConfirmDialog
+      open={true}
+      title="Unsaved Changes"
+      cancelLabel="Discard"
+      label="Save"
+      Icon={DangerousIcon}
+      description="There are unsaved changes. Please click Save or Discard"
+      onCancel={onDiscard}
+      onConfirm={onSave}
+      disableClosing={true}
+    />
+  )
+}

client/components/Application/Dialogs/UnsavedChanges.tsx

@@ -0,0 +1,28 @@
+import DangerousIcon from '@mui/icons-material/Dangerous'
+import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import * as store from '@client/store'
+
+export default function UnsavedChangesDialog() {
+  const onSave = async () => {
+    await store.saveFile()
+    store.closeDialog()
+  }
+
+  const onDiscard = async () => {
+    await store.revertFile()
+    store.closeDialog()
+  }
+
+  return (
+    <ConfirmDialog
+      open={true}
+      title="Unsaved Changes"
+      cancelLabel="Discard"
+      label="Save"
+      Icon={DangerousIcon}
+      description="There are unsaved changes. Please click Save or Discard"
+      onCancel={onDiscard}
+      onConfirm={onSave}
+    />
+  )
+}

client/components/Application/Layout.tsx

@@ -11,8 +11,6 @@ export default function Layout() {
     store.onAppStart().catch(console.error)
   }, [])
 
-  store.openDialog('welcomeBanner')
-
   return (
     <React.Fragment>
       <Error />

client/components/Controllers/File/Action.tsx

@@ -4,7 +4,6 @@ export default function Action() {
   return (
     <action.ActionBar>
       <action.PublishButton disabled />
-      <action.RevertButton disabled />
       <action.SaveButton disabled />
     </action.ActionBar>
   )

client/components/Controllers/File/index.tsx

@@ -1 +1,28 @@
-export { default } from './File'
+import Box from '@mui/material/Box'
+import { useTheme } from '@mui/material/styles'
+import ScrollBox from '../../Parts/Boxes/Scroll'
+import Action from './Action'
+import Menu from './Menu'
+import Panel from './Panel'
+import View from './View'
+import * as store from '@client/store'
+
+export default function File() {
+  const theme = useTheme()
+  const panel = store.useStore((state) => state.panel)
+
+  const height = `calc(100vh - ${theme.spacing(8)})`
+  const panelHeight = panel ? 42 : 0
+  const contentHeight = `calc(100vh - ${theme.spacing(8 + 8 + 8 + panelHeight)})`
+
+  return (
+    <Box sx={{ height }}>
+      <Menu />
+      <ScrollBox height={contentHeight}>
+        <View />
+      </ScrollBox>
+      <Panel />
+      <Action />
+    </Box>
+  )
+}

client/components/Controllers/Table/Action.tsx

@@ -10,7 +10,6 @@ export default function Action() {
         disabled={isUpdated}
         onClick={() => store.openDialog('publish')}
       />
-      <action.RevertButton updated={isUpdated} onClick={store.revertTable} />
       <action.SaveButton updated={isUpdated} onClick={store.saveTable} />
     </action.ActionBar>
   )

client/components/Controllers/Table/Editor.tsx

@@ -21,7 +21,9 @@ export default function Editor() {
 
   // Ensure that when the user interact with other parts on the application
   // e.g. Metadata editor the selection logic is not activated
+  // also commit current table editing (https://github.com/okfn/opendataeditor/issues/495)
   const onClickAway = () => {
+    store.stopTableEditing()
     setCellSelection({})
   }
 

client/components/Controllers/Table/index.tsx

@@ -1 +1,23 @@
-export { default } from './Table'
+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%' }}>
+      <Menu />
+      <ScrollBox height={contentHeight}>
+        <Editor />
+      </ScrollBox>
+      <Panel />
+      <Action />
+    </Box>
+  )
+}

client/components/Controllers/Text/Action.tsx

@@ -7,7 +7,6 @@ export default function Action() {
   return (
     <action.ActionBar>
       <action.PublishButton disabled />
-      <action.RevertButton updated={isUpdated} onClick={store.revertText} />
       <action.SaveButton updated={isUpdated} onClick={store.saveText} />
     </action.ActionBar>
   )