[4305] Restore table support as a form widget

Bug: #4305 Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
eclipse-sirius · Dec 13, 2024 · 4701060 · 4701060
1 parent 6f5f15c
commit 4701060
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 16 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -58,6 +58,7 @@ This provider is in charge of getting the icon list of the representation.
 - https://github.com/eclipse-sirius/sirius-web/issues/1062[#1062] [explorer] It is now possible to expand or collapse items in the explorer without selecting them by clicking directly on the expand/collapse arrow icon.
 This was first fixed in 2022.3.0 but broken in 2024.3.0; it is now fixed again.
 - https://github.com/eclipse-sirius/sirius-web/issues/4280[#4280] Fix direct edit with F2 when the palette is opened
+- https://github.com/eclipse-sirius/sirius-web/issues/4305[#4305] [table] Restore table support as a form widget
 
 
 === New Features

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx
@@ -10,7 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { TableContent } from '@eclipse-sirius/sirius-components-tables';
+import { ClientSideTableContent } from '@eclipse-sirius/sirius-components-tables';
 import { makeStyles } from 'tss-react/mui';
 import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types';
 import { GQLTableWidget } from '../form/FormEventFragments.types';
@@ -33,14 +33,11 @@ export const TableWidgetPropertySection: PropertySectionComponent<GQLTableWidget
   return (
     <div className={classes.main}>
       <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
-      <TableContent
+      <ClientSideTableContent
         editingContextId={editingContextId}
         representationId={formId}
         table={widget.table}
         readOnly={readOnly || widget.readOnly}
-        onPaginationChange={() => {}}
-        onGlobalFilterChange={() => {}}
-        onColumnFiltersChange={() => {}}
       />
     </div>
   );

diff --git a/packages/tables/frontend/sirius-components-tables/src/index.ts b/packages/tables/frontend/sirius-components-tables/src/index.ts
@@ -13,5 +13,6 @@
 export * from './actions/SettingsButtonExtensionPoints';
 export type { SettingsButtonMenuEntryProps } from './actions/SettingsButtonExtensionPoints.types';
 export { TableRepresentation } from './representation/TableRepresentation';
-export { TableContent } from './table/TableContent';
+export { ClientSideTableContent } from './table/ClientSideTableContent';
+export { ServerSideTableContent } from './table/ServerSideTableContent';
 export * from './table/TableContent.types';
diff --git a/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx b/packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx
@@ -14,7 +14,7 @@ import { RepresentationComponentProps } from '@eclipse-sirius/sirius-components-
 import Typography from '@mui/material/Typography';
 import { useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
-import { TableContent } from '../table/TableContent';
+import { ServerSideTableContent } from '../table/ServerSideTableContent';
 import { ColumnFilter } from '../table/TableContent.types';
 import { tableIdProvider } from './tableIdProvider';
 import { TableRepresentationState } from './TableRepresentation.types';
@@ -75,7 +75,7 @@ export const TableRepresentation = ({ editingContextId, representationId, readOn
   return (
     <div data-testid={'table-representation'}>
       {table !== null && !complete ? (
-        <TableContent
+        <ServerSideTableContent
           editingContextId={editingContextId}
           representationId={tableId}
           table={table}

diff --git a/packages/tables/frontend/sirius-components-tables/src/table/ClientSideTableContent.tsx b/packages/tables/frontend/sirius-components-tables/src/table/ClientSideTableContent.tsx
@@ -0,0 +1,67 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { Selection, useSelection } from '@eclipse-sirius/sirius-components-core';
+import Box from '@mui/material/Box';
+import { MaterialReactTable, MRT_TableOptions, useMaterialReactTable } from 'material-react-table';
+import { memo, useEffect, useState } from 'react';
+import { SettingsButton } from '../actions/SettingsButton';
+import { GQLLine, ClientSideTableProps } from './TableContent.types';
+import { useTableColumns } from './useTableColumns';
+
+export const ClientSideTableContent = memo(
+  ({ editingContextId, representationId, table, readOnly }: ClientSideTableProps) => {
+    const { selection, setSelection } = useSelection();
+    const [linesState, setLinesState] = useState<GQLLine[]>(table.lines);
+
+    useEffect(() => {
+      setLinesState([...table.lines]);
+    }, [table]);
+
+    const { columns } = useTableColumns(editingContextId, representationId, table, readOnly);
+
+    const tableOptions: MRT_TableOptions<GQLLine> = {
+      columns,
+      data: linesState,
+      editDisplayMode: 'cell',
+      enableEditing: !readOnly,
+      enableStickyHeader: true,
+      rowCount: linesState.length,
+      muiTableBodyRowProps: ({ row }) => {
+        return {
+          onClick: () => {
+            const newSelection: Selection = { entries: [{ id: row.original.targetObjectId, kind: 'Object' }] };
+            setSelection(newSelection);
+          },
+          selected: selection.entries.map((entry) => entry.id).includes(row.original.targetObjectId),
+          sx: {
+            backgroundColor: 'transparent', // required to remove the default mui backgroundColor that is defined as !important
+            cursor: 'pointer',
+            height: row.original.height,
+          },
+        };
+      },
+      renderTopToolbarCustomActions: () => (
+        <Box>
+          <SettingsButton editingContextId={editingContextId} representationId={representationId} table={table} />
+        </Box>
+      ),
+    };
+
+    const muiTable = useMaterialReactTable(tableOptions);
+    return (
+      <div>
+        <MaterialReactTable table={muiTable} />
+      </div>
+    );
+  }
+);
diff --git a/...ponents-tables/src/table/TableContent.tsx → ...bles/src/table/ServerSideTableContent.tsx b/...ponents-tables/src/table/TableContent.tsx → ...bles/src/table/ServerSideTableContent.tsx
@@ -22,11 +22,11 @@ import { ResizeRowHandler } from '../rows/ResizeRowHandler';
 import { RowHeader } from '../rows/RowHeader';
 import { useResetRowsMutation } from '../rows/useResetRows';
 import { CursorBasedPagination } from './CursorBasedPagination';
-import { GQLLine, TablePaginationState, TableProps } from './TableContent.types';
+import { GQLLine, TablePaginationState, ServerSideTableProps } from './TableContent.types';
 import { useGlobalFilter } from './useGlobalFilter';
 import { useTableColumns } from './useTableColumns';
 
-export const TableContent = memo(
+export const ServerSideTableContent = memo(
   ({
     editingContextId,
     representationId,
@@ -35,7 +35,7 @@ export const TableContent = memo(
     onPaginationChange,
     onGlobalFilterChange,
     onColumnFiltersChange,
-  }: TableProps) => {
+  }: ServerSideTableProps) => {
     const { selection, setSelection } = useSelection();
 
     const { columns } = useTableColumns(editingContextId, representationId, table, readOnly);
@@ -104,8 +104,6 @@ export const TableContent = memo(
       onPaginationChange(pagination.cursor, pagination.direction, pagination.size);
     }, [pagination.cursor, pagination.size, pagination.direction]);
 
-    const serverSidePagination: boolean = onPaginationChange !== undefined;
-
     const handleRowHeightChange = (rowId, height) => {
       setLinesState((prev) => prev.map((line) => (line.id === rowId ? { ...line, height } : line)));
     };
@@ -127,8 +125,8 @@ export const TableContent = memo(
       enableEditing: !readOnly,
       onColumnFiltersChange: setColumnFilters,
       enableStickyHeader: true,
-      enablePagination: !serverSidePagination,
-      manualPagination: serverSidePagination,
+      enablePagination: false,
+      manualPagination: true,
       rowCount: table.paginationData.totalRowCount,
       enableRowActions: true,
       enableSorting: false,

diff --git a/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts b/packages/tables/frontend/sirius-components-tables/src/table/TableContent.types.ts
@@ -12,7 +12,7 @@
  *******************************************************************************/
 import { GQLColumnFilter } from '../columns/useTableColumnFiltering.types';
 
-export interface TableProps {
+export interface ServerSideTableProps {
   editingContextId: string;
   representationId: string;
   table: GQLTable;
@@ -22,6 +22,13 @@ export interface TableProps {
   onColumnFiltersChange: (columFilters: ColumnFilter[]) => void;
 }
 
+export interface ClientSideTableProps {
+  editingContextId: string;
+  representationId: string;
+  table: GQLTable;
+  readOnly: boolean;
+}
+
 export interface TablePaginationState {
   cursor: string | null;
   direction: 'PREV' | 'NEXT';