Rename column functionality

client/client.ts

@@ -31,6 +31,10 @@ export class Client {
     return await this.request<{ columns: types.IColumn[] }>('/column/list')
   }
 
+  async columnRename(props: { path: string; oldName: string; newName: string }) {
+    return await this.request<Record<string, never>>('/column/rename', props)
+  }
+
   // Config
 
   async configRead(props: Record<string, never> = {}) {

client/components/Controllers/Table/Editor.tsx

@@ -50,6 +50,7 @@ export default function Editor() {
           onEditStop={store.stopTableEditing}
           defaultCellSelection={cellSelection}
           onCellSelectionChange={setCellSelection}
+          onColumnRename={store.renameColumn}
           handle={(ref) => store.setRefs({ grid: ref })}
         />
       </Box>

client/components/Editors/Base/List.tsx

@@ -9,15 +9,17 @@ import HeadingBox from './Heading/Box'
 export interface EditorListProps {
   kind: string
   query?: string
-  onAddClick: () => void
+  onAddClick?: () => void
   // We accept search as a prop otherwise it loses focus
   SearchInput?: React.ReactNode
 }
 
 export default function EditorList(props: React.PropsWithChildren<EditorListProps>) {
   const AddButton = () => {
+    if (!props.onAddClick) return null
+
     return (
-      <Button title={`Add ${startCase(props.kind)}`} onClick={() => props.onAddClick()}>
+      <Button title={`Add ${startCase(props.kind)}`} onClick={() => props.onAddClick?.()}>
         Add {startCase(props.kind)}
       </Button>
     )

client/components/Editors/Base/ListItem.tsx

@@ -16,27 +16,37 @@ interface EditorListItemProps {
 
 export default function EditorListItem(props: EditorListItemProps) {
   const theme = useTheme()
+
+  const RemoveButton = () => {
+    if (!props.onRemoveClick) return null
+
+    return (
+      <Button
+        size="small"
+        color="warning"
+        component="span"
+        title={`Remove ${capitalize(props.kind)}`}
+        sx={{ marginLeft: 2, textDecoration: 'underline' }}
+        onClick={(ev) => {
+          ev.stopPropagation()
+          props.onRemoveClick?.()
+        }}
+      >
+        Remove
+      </Button>
+    )
+  }
+
   const EndIcon = () => {
     const label = (props.type || 'item').toUpperCase()
     return (
       <Box>
         <Typography component="span">{label}</Typography>
-        <Button
-          size="small"
-          color="warning"
-          component="span"
-          title={`Remove ${capitalize(props.kind)}`}
-          sx={{ marginLeft: 2, textDecoration: 'underline' }}
-          onClick={(ev) => {
-            ev.stopPropagation()
-            props.onRemoveClick && props.onRemoveClick()
-          }}
-        >
-          Remove
-        </Button>
+        <RemoveButton />
       </Box>
     )
   }
+
   return (
     <Button
       size="large"

client/components/Editors/Schema/Sections/Fields.tsx

@@ -28,13 +28,11 @@ function FieldList() {
   const query = useStore((state) => state.fieldState.query)
   const fieldItems = useStore(selectors.fieldItems)
   const updateFieldState = useStore((state) => state.updateFieldState)
-  const addField = useStore((state) => state.addField)
-  const removeField = useStore((state) => state.removeField)
+
   return (
     <EditorList
       kind="field"
       query={query}
-      onAddClick={() => addField()}
       SearchInput={
         <EditorSearch
           value={query || ''}
@@ -46,10 +44,9 @@ function FieldList() {
         <EditorListItem
           key={index}
           kind="field"
-          name={field.title || field.name}
+          name={field.name}
           type={field.type}
           onClick={() => updateFieldState({ index })}
-          onRemoveClick={() => removeField(index)}
         />
       ))}
     </EditorList>
@@ -116,6 +113,7 @@ function Name() {
 
   return (
     <InputField
+      disabled
       label="Name"
       value={value}
       error={!value}

client/components/Editors/Table/columns.tsx

@@ -46,7 +46,7 @@ export function createColumns(
 
     const renderHeader: IColumn['header'] = () => {
       const firstError = labelErrors?.[0]
-      const label = firstError ? firstError.label : field.title ?? field.name
+      const label = firstError ? firstError.label : field.name
 
       if (firstError) {
         return (

client/components/Editors/Table/index.tsx

@@ -2,6 +2,7 @@ import '@inovua/reactdatagrid-community/index.css'
 import * as React from 'react'
 import SpinnerCard from '../../Parts/Cards/Spinner'
 import Box from '@mui/material/Box'
+import InputDialog from '../../Parts/Dialogs/Input'
 import Typography from '@mui/material/Typography'
 import InovuaDatagrid from '@inovua/reactdatagrid-community'
 import { TypeDataGridProps } from '@inovua/reactdatagrid-community/types'
@@ -20,10 +21,12 @@ export interface TableEditorProps extends Partial<TypeDataGridProps> {
   report?: types.IReport
   history?: types.IHistory
   selection?: types.ITableSelection
+  onColumnRename?: (props: { index: number; oldName: string; newName: string }) => void
 }
 
 export default function TableEditor(props: TableEditorProps) {
-  const { source, schema, report, history, selection, ...others } = props
+  const { source, schema, report, history, selection, onColumnRename, ...others } = props
+  const [dialog, setDialog] = React.useState<IDialog | undefined>()
 
   const theme = useTheme()
   const colorPalette = theme.palette
@@ -53,11 +56,24 @@ export default function TableEditor(props: TableEditorProps) {
   })
 
   const renderColumnContextMenu = React.useCallback(
-    (menuProps: { items: any[] }): React.ReactNode => {
+    (menuProps: { items: any[] }, context: any) => {
       menuProps.items = menuProps.items.filter((x) => x.label !== 'Columns' && x !== '-')
-      return
+      menuProps.items.push({
+        itemId: 'rename',
+        label: 'Rename',
+        disabled: history?.changes.length,
+        onClick: () => {
+          setDialog({
+            type: 'columnRename',
+            name: context.cellProps.name,
+            // first column is the row number column
+            index: context.cellProps.columnIndex - 1,
+          })
+        },
+      })
+      return undefined
     },
-    []
+    [history?.changes.length]
   )
 
   function resizeTable() {
@@ -72,24 +88,82 @@ export default function TableEditor(props: TableEditorProps) {
   }
 
   return (
-    <InovuaDatagrid
-      onReady={resizeTable}
-      idProperty="_rowNumber"
-      dataSource={source}
-      columns={columns}
-      pagination={true}
-      loadingText={<Typography>Loading...</Typography>}
-      renderLoadMask={LoadMask}
-      defaultActiveCell={settings.DEFAULT_ACTIVE_CELL}
-      style={{ height: '100%', border: 'none' }}
-      limit={rowsPerPage}
-      onLimitChange={setRowsPerPage}
-      rowHeight={rowHeight}
-      showColumnMenuLockOptions={false}
-      showColumnMenuGroupOptions={false}
-      enableColumnAutosize={false}
-      renderColumnContextMenu={renderColumnContextMenu}
-      {...others}
+    <>
+      <ColumnRenameDialog
+        dialog={dialog}
+        schema={schema}
+        onClose={() => setDialog(undefined)}
+        onColumnRename={onColumnRename}
+      />
+      <InovuaDatagrid
+        onReady={resizeTable}
+        idProperty="_rowNumber"
+        dataSource={source}
+        columns={columns}
+        pagination={true}
+        loadingText={<Typography>Loading...</Typography>}
+        renderLoadMask={LoadMask}
+        defaultActiveCell={settings.DEFAULT_ACTIVE_CELL}
+        style={{ height: '100%', border: 'none' }}
+        limit={rowsPerPage}
+        onLimitChange={setRowsPerPage}
+        rowHeight={rowHeight}
+        showColumnMenuLockOptions={false}
+        showColumnMenuGroupOptions={false}
+        enableColumnAutosize={false}
+        renderColumnContextMenu={renderColumnContextMenu}
+        {...others}
+      />
+    </>
+  )
+}
+
+type IDialog = IColumnRenameDialog
+
+type IColumnRenameDialog = {
+  type: 'columnRename'
+  name: string
+  index: number
+}
+
+function ColumnRenameDialog(props: {
+  dialog?: IDialog
+  onClose: () => void
+  schema: types.ISchema
+  onColumnRename: React.ComponentProps<typeof TableEditor>['onColumnRename']
+}) {
+  if (props.dialog?.type !== 'columnRename') return null
+
+  const [name, setName] = React.useState(props.dialog.name)
+
+  const isUpdated = name !== props.dialog.name
+  const isUnique = !props.schema.fields.map((field) => field.name).includes(name)
+
+  let errorMessage = ''
+  if (!name) {
+    errorMessage = 'Name must not be blank'
+  } else if (isUpdated && !isUnique) {
+    errorMessage = 'Name must be unique'
+  }
+
+  return (
+    <InputDialog
+      open={true}
+      value={name}
+      description="Enter a new column name:"
+      onChange={setName}
+      title={`Rename Column "${props.dialog.name}"`}
+      onCancel={props.onClose}
+      disabled={!isUpdated || !!errorMessage}
+      errorMessage={errorMessage}
+      onConfirm={() => {
+        props.onColumnRename?.({
+          index: props.dialog!.index,
+          oldName: props.dialog!.name,
+          newName: name,
+        })
+        props.onClose()
+      }}
     />
   )
 }

client/components/Parts/Dialogs/Input.tsx

@@ -15,14 +15,18 @@ export interface InputDialogProps extends Omit<ConfirmDialogProps, 'onConfirm'>
 
 export default function InputDialog(props: InputDialogProps) {
   const { prefix, placholder, spellcheck, onConfirm, errorMessage, ...rest } = props
-  const [value, setValue] = React.useState('')
+  const [value, setValue] = React.useState(props.value || '')
 
   const handleConfirm = () => onConfirm && onConfirm(value)
   return (
-    <ConfirmDialog {...rest} onConfirm={handleConfirm} disabled={!value}>
+    <ConfirmDialog
+      {...rest}
+      onConfirm={handleConfirm}
+      disabled={props.disabled || !value}
+    >
       <TextField
         error={!!errorMessage}
-        helperText={errorMessage}
+        helperText={errorMessage || ' '}
         autoFocus
         fullWidth
         size="small"
@@ -38,7 +42,6 @@ export default function InputDialog(props: InputDialogProps) {
             <InputAdornment position="start">{prefix}</InputAdornment>
           ) : undefined,
         }}
-        sx={{ marginBottom: 1 }}
       />
       {props.children}
     </ConfirmDialog>

client/store/actions/table.ts

@@ -1,4 +1,5 @@
 import { client } from '@client/client'
+import invariant from 'tiny-invariant'
 import { mapValues, isNull } from 'lodash'
 import { onFileCreated, onFileUpdated } from './file'
 import { cloneDeep } from 'lodash'
@@ -275,6 +276,28 @@ export async function deleteMultipleCells(cells: types.ICellSelection) {
   helpers.applyTableHistory({ changes: [change] }, grid.data)
 }
 
+export async function renameColumn(props: {
+  index: number
+  oldName: string
+  newName: string
+}) {
+  const { grid } = getRefs()
+  const { path } = store.getState()
+  invariant(grid)
+  invariant(path)
+
+  const result = await client.columnRename({ ...props, path })
+
+  if (result instanceof client.Error) {
+    return store.setState('rename-column-error', (state) => {
+      state.error = result
+    })
+  }
+
+  await onFileUpdated([path])
+  grid.reload()
+}
+
 // Loaders
 
 export const tableLoader: types.ITableLoader = async ({ skip, limit, sortInfo }) => {

server/endpoints/column/__init__.py

@@ -1,2 +1,2 @@
 # Register modules
-from . import list
+from . import list, rename