Improve spreadsheet global model editor ui (#3206)

* Improve spreadsheet global model editor ui
* column initial focus changed to column name
* Remove custom editor for column ID
* Fix error message not shown on column name

Signed-off-by: Franck LECUYER <[email protected]>
Co-authored-by: Achour berrahma <[email protected]>

Author: FranckLecuyer

src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/columnName-editor.tsx

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { TextInput } from '@gridsuite/commons-ui';
+import { TableTextInput } from '@gridsuite/commons-ui';
 import { useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
 
@@ -23,12 +23,13 @@ export default function ColumnNameEditor({ name, rowIndex, generateColumnId }: C
     }, [columnName, rowIndex, generateColumnId]);
 
     return (
-        <TextInput
+        <TableTextInput
             name={name}
-            formProps={{
+            inputProps={{
                 autoFocus: true,
                 onBlur: onBlurColumnName,
             }}
+            showErrorMsg={true}
         />
     );
 }

src/components/spreadsheet-view/spreadsheet/spreadsheet-toolbar/global-model-editor/spreadsheet-model-global-editor-table.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { SELECTED } from '../../../../utils/field-constants';
 import { DndColumn, DndColumnType, DndTable } from '@gridsuite/commons-ui';
 import { useFieldArray, useFormContext } from 'react-hook-form';
@@ -32,7 +32,7 @@ export function SpreadsheetModelGlobalEditorTable() {
     const useColumnsModelFieldArrayOutput = useFieldArray({
         name: `${COLUMNS_MODEL}`,
     });
-    const { getValues, setValue } = useFormContext();
+    const { getValues, setValue, setFocus } = useFormContext();
 
     const getAvailableDependencies = useCallback(
         (excludeColumnId: string) => {
@@ -45,16 +45,6 @@ export function SpreadsheetModelGlobalEditorTable() {
 
     const COLUMNS_MODEL_DEFINITIONS: (DndColumn & { initialValue?: string | null | string[] })[] = useMemo(() => {
         return [
-            {
-                label: intl.formatMessage({ id: 'spreadsheet/global-model-edition/column_id' }),
-                dataKey: COLUMN_ID,
-                type: DndColumnType.TEXT,
-                editable: true,
-                initialValue: '',
-                showErrorMsg: true,
-                width: '20%',
-                maxWidth: '20%',
-            },
             {
                 label: intl.formatMessage({ id: 'spreadsheet/global-model-edition/column_name' }),
                 dataKey: COLUMN_NAME,
@@ -78,6 +68,16 @@ export function SpreadsheetModelGlobalEditorTable() {
                         },
                     }),
             },
+            {
+                label: intl.formatMessage({ id: 'spreadsheet/global-model-edition/column_id' }),
+                dataKey: COLUMN_ID,
+                type: DndColumnType.TEXT,
+                editable: true,
+                initialValue: '',
+                showErrorMsg: true,
+                width: '20%',
+                maxWidth: '20%',
+            },
             {
                 label: intl.formatMessage({ id: 'spreadsheet/global-model-edition/column_type' }),
                 dataKey: COLUMN_TYPE,
@@ -139,6 +139,10 @@ export function SpreadsheetModelGlobalEditorTable() {
         return [newColumnRowData];
     };
 
+    useEffect(() => {
+        setFocus(`${COLUMNS_MODEL}[0].${COLUMN_NAME}`);
+    }, [setFocus]);
+
     return (
         <DndTable
             arrayFormName={`${COLUMNS_MODEL}`}
@@ -148,6 +152,7 @@ export function SpreadsheetModelGlobalEditorTable() {
             withAddRowsDialog={false}
             disableDragAndDrop={false}
             showMoveArrow={false}
+            tableHeight={450}
         />
     );
 }