data explorer: hide "raw edit" query mode, show "edit" switch instead

webapp/components/DataQuery/ButtonBar/ButtonBar.js

@@ -1,12 +1,13 @@
 import './buttonBar.scss'
 
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Query } from '@common/model/query'
 
+import { Switch } from '@webapp/components'
 import { Button, ButtonDownload } from '@webapp/components/buttons'
 import { ButtonGroup, Checkbox } from '@webapp/components/form'
 import { FormItem } from '@webapp/components/form/Input'
@@ -28,6 +29,28 @@ import ButtonSort from './ButtonSort'
 import ButtonManageQueries from './ButtonManageQueries'
 import { ButtonGroupDisplayType } from './ButtonGroupDisplayType'
 
+const { modes } = Query
+
+const modeButtonItems = [
+  {
+    key: modes.raw,
+    iconClassName: 'icon-file-text2',
+    label: 'dataView.dataQuery.mode.raw',
+  },
+  {
+    key: modes.aggregate,
+    iconClassName: 'icon-sigma',
+    label: 'dataView.dataQuery.mode.aggregate',
+  },
+]
+
+const uiModeByQueryMode = {
+  [modes.raw]: modes.raw,
+  // raw edit mode shown as "raw" in mode button group
+  [modes.rawEdit]: modes.raw,
+  [modes.aggregate]: modes.aggregate,
+}
+
 const ButtonBar = (props) => {
   const {
     dataCount,
@@ -48,11 +71,18 @@ const ButtonBar = (props) => {
   const nodeDefsSelectorVisible = DataExplorerSelectors.useIsNodeDefsSelectorVisible()
   const codesVisible = DataExplorerSelectors.useCodesVisible()
   const onChangeQuery = DataExplorerHooks.useSetQuery()
+  const { Actions, state } = useButtonBar()
 
+  const onEditCheckboxChange = useCallback(
+    (value) => {
+      const modeNext = value ? Query.modes.rawEdit : Query.modes.raw
+      onChangeQuery(Query.assocMode(modeNext)(query))
+    },
+    [onChangeQuery, query]
+  )
+  const selectedMode = uiModeByQueryMode[Query.getMode(query)]
   const modeEdit = Query.isModeRawEdit(query)
   const hasSelection = Query.hasSelection(query)
-  const { Actions, state } = useButtonBar()
-
   const queryChangeDisabled = modeEdit || !dataLoaded || dataLoading
 
   return (
@@ -69,31 +99,13 @@ const ButtonBar = (props) => {
         <ButtonGroup
           disabled={appSaving || !nodeDefsSelectorVisible}
           groupName="queryMode"
-          selectedItemKey={Query.getMode(query)}
+          selectedItemKey={selectedMode}
           onChange={(mode) => onChangeQuery(Query.assocMode(mode)(query))}
-          items={[
-            {
-              key: Query.modes.raw,
-              iconClassName: 'icon-file-text2',
-              label: 'dataView.dataQuery.mode.raw',
-            },
-            {
-              key: Query.modes.aggregate,
-              iconClassName: 'icon-sigma',
-              label: 'dataView.dataQuery.mode.aggregate',
-            },
-            ...(canEdit && hasSelection
-              ? [
-                  {
-                    key: Query.modes.rawEdit,
-                    iconClassName: 'icon-pencil2',
-                    label: 'dataView.dataQuery.mode.rawEdit',
-                    disabled: dataEmpty,
-                  },
-                ]
-              : []),
-          ]}
+          items={modeButtonItems}
         />
+        {canEdit && hasSelection && (
+          <Switch checked={modeEdit} disabled={dataEmpty} label="common.edit" onChange={onEditCheckboxChange} />
+        )}
       </FormItem>
 
       {hasSelection && (

webapp/components/Switch/Switch.js

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react'
+import { FormControlLabel as MuiFormControlLabel, Switch as MUISwitch } from '@mui/material'
+import PropTypes from 'prop-types'
+
+import { useI18n } from '@webapp/store/system'
+
+export const Switch = (props) => {
+  const { checked = false, disabled = false, label = null, onChange: onChangeProp } = props
+
+  const i18n = useI18n()
+
+  const onChange = useCallback(
+    (event) => {
+      onChangeProp?.(event.target.checked)
+    },
+    [onChangeProp]
+  )
+
+  const control = <MUISwitch checked={checked} disabled={disabled} onChange={onChange} />
+
+  return label ? <MuiFormControlLabel control={control} label={i18n.t(label)} /> : control
+}
+
+Switch.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  onChange: PropTypes.func,
+}

webapp/components/Switch/index.js

@@ -0,0 +1 @@
+export { Switch } from './Switch'

webapp/components/index.js

@@ -40,3 +40,4 @@ export { ResizableModal } from './ResizableModal'
 export { Slider } from './Slider'
 export { Split } from './Split'
 export { Spinner } from './Spinner'
+export { Switch } from './Switch'