[4305] Allow the deactivation of table features useless in some contexts

CHANGELOG.adoc

@@ -64,6 +64,7 @@ This was first fixed in 2022.3.0 but broken in 2024.3.0; it is now fixed again.
 + Fix Explorer
 + Contribute the Ellipse node
 + Contribute the Selection Dialog
+- https://github.com/eclipse-sirius/sirius-web/issues/4305[#4305] [table] Allow the deactivation of table features that are not used in some contexts
 
 === New Features
 

packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.ts

@@ -326,16 +326,38 @@ export const widgetFields = `
     iconURL
     table {
       id
+      paginationData {
+        hasPreviousPage
+        hasNextPage
+        totalRowCount
+      }
+      stripeRow
+      globalFilter
+      columnFilters {
+        id
+        value
+      }
       columns {
         id
         headerLabel
+        headerIconURLs
+        headerIndexLabel
         targetObjectId
-        targetObjectKind 
+        targetObjectKind
+        width
+        isResizable 
+        hidden
+        filterVariant
       }
       lines {
         id
         targetObjectId
         targetObjectKind
+        headerLabel
+        headerIconURLs
+        headerIndexLabel
+        height
+        isResizable
         cells {
           __typename
           id
@@ -362,6 +384,10 @@ export const widgetFields = `
           ... on TextfieldCell {
             stringValue: value
           }
+          ... on IconLabelCell {
+            label: value
+            iconURLs
+          }
         }
       }
     }

packages/forms/frontend/sirius-components-forms/src/propertysections/TableWidgetPropertySection.tsx

@@ -41,6 +41,12 @@ export const TableWidgetPropertySection: PropertySectionComponent<GQLTableWidget
         onPaginationChange={() => {}}
         onGlobalFilterChange={() => {}}
         onColumnFiltersChange={() => {}}
+        enableColumnVisibility={false}
+        enableColumnResizing={false}
+        enableColumnFilters={false}
+        enableRowSizing={false}
+        enableGlobalFilter={false}
+        enablePagination={false}
       />
     </div>
   );

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnFiltering.ts

@@ -14,13 +14,13 @@ import { gql, useMutation } from '@apollo/client';
 import { useReporting } from '@eclipse-sirius/sirius-components-core';
 import { MRT_ColumnFiltersState } from 'material-react-table';
 import { useEffect, useState } from 'react';
+import { ColumnFilter, GQLTable } from '../table/TableContent.types';
 import {
   GQLChangeColumnFilterData,
-  GQLChangeColumnFilterVariables,
   GQLChangeColumnFilterInput,
+  GQLChangeColumnFilterVariables,
   UseTableColumnFilteringValue,
 } from './useTableColumnFiltering.types';
-import { ColumnFilter, GQLTable } from '../table/TableContent.types';
 
 const changeColumnFilterMutation = gql`
   mutation changeColumnFilter($input: ChangeColumnFilterInput!) {
@@ -46,12 +46,13 @@ export const useTableColumnFiltering = (
   editingContextId: string,
   representationId: string,
   table: GQLTable,
-  onColumnFiltersChange?: (columFilters: ColumnFilter[]) => void
+  onColumnFiltersChange: (columFilters: ColumnFilter[]) => void,
+  enableColumnFilters: boolean
 ): UseTableColumnFilteringValue => {
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(table.columnFilters);
 
   useEffect(() => {
-    if (onColumnFiltersChange) {
+    if (enableColumnFilters) {
       changeColumnFilter(columnFilters);
       onColumnFiltersChange(columnFilters);
     }
@@ -78,6 +79,13 @@ export const useTableColumnFiltering = (
     mutationChangeColumnFilter({ variables: { input } });
   };
 
+  if (!enableColumnFilters) {
+    return {
+      columnFilters: undefined,
+      setColumnFilters: undefined,
+    };
+  }
+
   return {
     columnFilters,
     setColumnFilters,

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnFiltering.types.ts

@@ -13,11 +13,12 @@
 import { GQLErrorPayload, GQLSuccessPayload } from '@eclipse-sirius/sirius-components-core';
 import { MRT_ColumnFiltersState } from 'material-react-table';
 
+export type ColumnFilterSetter = (
+  columnFilters: MRT_ColumnFiltersState | ((prevState: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)
+) => void;
 export interface UseTableColumnFilteringValue {
-  columnFilters: MRT_ColumnFiltersState;
-  setColumnFilters: (
-    columnFilters: MRT_ColumnFiltersState | ((prevState: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)
-  ) => void;
+  columnFilters: MRT_ColumnFiltersState | undefined;
+  setColumnFilters: ColumnFilterSetter | undefined;
 }
 
 export interface GQLChangeColumnFilterInput {

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnSizing.ts

@@ -16,10 +16,10 @@ import { MRT_ColumnSizingState } from 'material-react-table';
 import { useEffect, useState } from 'react';
 import { GQLTable } from '../table/TableContent.types';
 import {
-  UseTableColumnSizingValue,
   GQLResizeColumnData,
-  GQLResizeColumnVariables,
   GQLResizeColumnInput,
+  GQLResizeColumnVariables,
+  UseTableColumnSizingValue,
 } from './useTableColumnSizing.types';
 
 const resizeColumnMutation = gql`
@@ -45,13 +45,16 @@ const resizeColumnMutation = gql`
 export const useTableColumnSizing = (
   editingContextId: string,
   representationId: string,
-  table: GQLTable
+  table: GQLTable,
+  enableColumnSizing: boolean
 ): UseTableColumnSizingValue => {
   const [columnSizing, setColumnSizing] = useState<MRT_ColumnSizingState>({});
 
   useEffect(() => {
-    for (const [columnName, columnSize] of Object.entries(columnSizing)) {
-      resizeColumn(columnName, columnSize);
+    if (enableColumnSizing) {
+      for (const [columnName, columnSize] of Object.entries(columnSizing)) {
+        resizeColumn(columnName, columnSize);
+      }
     }
   }, [columnSizing]);
 
@@ -79,6 +82,13 @@ export const useTableColumnSizing = (
     mutationResizeColumn({ variables: { input } });
   };
 
+  if (!enableColumnSizing) {
+    return {
+      columnSizing: {},
+      setColumnSizing: undefined,
+    };
+  }
+
   return {
     columnSizing,
     setColumnSizing,

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnSizing.types.ts

@@ -13,11 +13,13 @@
 import { GQLErrorPayload, GQLSuccessPayload } from '@eclipse-sirius/sirius-components-core';
 import { MRT_ColumnSizingState } from 'material-react-table';
 
+export type ColumnSizingSetter = (
+  columnSizing: MRT_ColumnSizingState | ((prevState: MRT_ColumnSizingState) => MRT_ColumnSizingState)
+) => void;
+
 export interface UseTableColumnSizingValue {
   columnSizing: MRT_ColumnSizingState;
-  setColumnSizing: (
-    columnSizing: MRT_ColumnSizingState | ((prevState: MRT_ColumnSizingState) => MRT_ColumnSizingState)
-  ) => void;
+  setColumnSizing: ColumnSizingSetter | undefined;
 }
 
 export interface GQLResizeColumnInput {

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnVisibility.ts

@@ -17,9 +17,9 @@ import { useEffect, useState } from 'react';
 import { GQLTable } from '../table/TableContent.types';
 import {
   GQLChangeColumnVisibilityData,
+  GQLChangeColumnVisibilityInput,
   GQLChangeColumnVisibilityVariables,
   GQLColumnVisibility,
-  GQLChangeColumnVisibilityInput,
   UseTableColumnVisibilityValue,
 } from './useTableColumnVisibility.types';
 
@@ -46,7 +46,8 @@ export const changeColumnVisibilityMutation = gql`
 export const useTableColumnVisibility = (
   editingContextId: string,
   representationId: string,
-  table: GQLTable
+  table: GQLTable,
+  enableColumnVisibility: boolean
 ): UseTableColumnVisibilityValue => {
   const [columnVisibility, setColumnVisibility] = useState<MRT_VisibilityState>(
     table.columns.reduce((acc, obj) => {
@@ -56,12 +57,14 @@ export const useTableColumnVisibility = (
   );
 
   useEffect(() => {
-    changeColumnVisibility(
-      Object.entries(columnVisibility).map(([columnId, visible]) => ({
-        columnId,
-        visible,
-      }))
-    );
+    if (enableColumnVisibility) {
+      changeColumnVisibility(
+        Object.entries(columnVisibility).map(([columnId, visible]) => ({
+          columnId,
+          visible,
+        }))
+      );
+    }
   }, [columnVisibility]);
 
   useEffect(() => {
@@ -94,6 +97,13 @@ export const useTableColumnVisibility = (
     mutationChangeColumnVisibility({ variables: { input } });
   };
 
+  if (!enableColumnVisibility) {
+    return {
+      columnVisibility: undefined,
+      setColumnVisibility: undefined,
+    };
+  }
+
   return {
     columnVisibility,
     setColumnVisibility,

packages/tables/frontend/sirius-components-tables/src/columns/useTableColumnVisibility.types.ts

@@ -13,11 +13,13 @@
 import { GQLErrorPayload, GQLSuccessPayload } from '@eclipse-sirius/sirius-components-core';
 import { MRT_VisibilityState } from 'material-react-table';
 
+export type ColumnVisibilitySetter = (
+  columnVisibility: MRT_VisibilityState | ((prevState: MRT_VisibilityState) => MRT_VisibilityState)
+) => void;
+
 export interface UseTableColumnVisibilityValue {
-  columnVisibility: MRT_VisibilityState;
-  setColumnVisibility: (
-    columnVisibility: MRT_VisibilityState | ((prevState: MRT_VisibilityState) => MRT_VisibilityState)
-  ) => void;
+  columnVisibility: MRT_VisibilityState | undefined;
+  setColumnVisibility: ColumnVisibilitySetter | undefined;
 }
 
 export interface GQLChangeColumnVisibilityInput {

packages/tables/frontend/sirius-components-tables/src/representation/TableRepresentation.tsx

@@ -83,6 +83,12 @@ export const TableRepresentation = ({ editingContextId, representationId, readOn
           onPaginationChange={onPaginationChange}
           onGlobalFilterChange={onGlobalFilterChange}
           onColumnFiltersChange={onColumnFiltersChange}
+          enableColumnVisibility
+          enableColumnResizing
+          enableColumnFilters
+          enableRowSizing
+          enableGlobalFilter
+          enablePagination
         />
       ) : null}
       {completeMessage}

packages/tables/frontend/sirius-components-tables/src/rows/useResetRows.ts

@@ -42,7 +42,8 @@ export const resetRowsHeightMutation = gql`
 export const useResetRowsMutation = (
   editingContextId: string,
   representationId: string,
-  tableId: string
+  tableId: string,
+  enableRowSizing: boolean
 ): UseResetRowsMutationValue => {
   const [mutationResetRowsHeight, mutationResetRowsHeightResult] = useMutation<
     GQLResetRowsHeightData,
@@ -51,14 +52,16 @@ export const useResetRowsMutation = (
   useReporting(mutationResetRowsHeightResult, (data: GQLResetRowsHeightData) => data.resetTableRowsHeight);
 
   const resetRowsHeight = () => {
-    const input: GQLResetRowsHeightInput = {
-      id: crypto.randomUUID(),
-      editingContextId,
-      representationId,
-      tableId,
-    };
+    if (enableRowSizing) {
+      const input: GQLResetRowsHeightInput = {
+        id: crypto.randomUUID(),
+        editingContextId,
+        representationId,
+        tableId,
+      };
 
-    mutationResetRowsHeight({ variables: { input } });
+      mutationResetRowsHeight({ variables: { input } });
+    }
   };
 
   return {