[ANT-706] New design for listings clusters (Thermal / Renewables)

[skamril]

Update the cluster view with this new design:

More informations of clusters will be available directly on root page.

• Create a generic components for listing clusters (src/components/common/DynamicDataTable) with the features below:
  • Display defined list of items (with or without group)
  • Display defined columns
  • Select and delete items
  • Add new item
  • Create AddItemDialog
  • Display the sum for number columns by group
• Update Modelization > Areas > Thermal view with DynamicDataTable
• Update Modelization > Areas > Renewables view with DynamicDataTable

Comparison feature will be added later in DynamicDataTable (#1514).

Links:

• Figma: https://www.figma.com/proto/cpacz5rCTppcKpylrFyrsg/Antares-Web-RTE-(Copy)?node-id=8745-75208&scaling=scale-down-width&page-id=8409%3A67413&starting-point-node-id=8745%3A75208
• MUI component: https://mui.com/material-ui/react-table/#collapsible-table

[skamril]

• list prop:

[{ id: "sct11", name: "SCT 1.1", group: "Noeud 1", columns: { status: "actif", injection: 350, ...} },
 { id: "sct12", name: "SCT 1.2", group: "Noeud 1", columns: { status: "inactif", injection: 300, ...},
 { id: "sct12", name: "SCT 1.2", group: "Noeud 1", columns: { status: "actif", role: "admin", injection: 300, ...}
 }]

• columns prop:

[{ name: "status", label: "Statut", chip: { actif: "success", "inactif": "primary" }},
 { name: "role", label: "Role", chip: { admin: "success" },
 { name: "injection", label: "Injection nominale capacity", groupOperation: "sum" }]

[skamril]

Look at https://www.material-react-table.com/

[hdinia]

Following Material React Table's documentation here's example data, columns and groups props that are expected by the component:

Basic STStorage example

  type Storage = {
    id: string;
    group: string;
    name: string;
    injectionNominalCapacity: number;
    withdrawalNominalCapacity: number;
    reservoirCapacity: number;
    efficiency: number;
  };

data

   const data: Storage[] = [
    {
      id: "short-term-storage-of-area-west",
      group: "",
      name: "Short-Term Storage of Area West",
      injectionNominalCapacity: 5000.0,
      withdrawalNominalCapacity: 4500.0,
      reservoirCapacity: 61000.0,
      efficiency: 0.0,
    },
    {
      id: "short-term-storage-of-area-east",
      group: "",
      name: "Short-Term Storage of Area East",
      injectionNominalCapacity: 1500.0,
      withdrawalNominalCapacity: 1500.0,
      reservoirCapacity: 20000.0,
      efficiency: 0.94,
    },
    {
      id: "storage1",
      group: "Battery",
      name: "Storage1",
      injectionNominalCapacity: 1500.0,
      withdrawalNominalCapacity: 1500.0,
      reservoirCapacity: 20000.0,
      efficiency: 0.94,
    },
    {
      id: "psp1",
      group: "PSP_closed",
      name: "PSP_closed_1",
      injectionNominalCapacity: 3500.0,
      withdrawalNominalCapacity: 3000.0,
      reservoirCapacity: 41000.0,
      efficiency: 0.75,
    },
    {
      id: "storage2",
      group: "PSP_closed",
      name: "Storage2",
      injectionNominalCapacity: 2000.0,
      withdrawalNominalCapacity: 1500.0,
      reservoirCapacity: 20000.0,
      efficiency: 0.78,
    },
    {
      id: "storage3",
      group: "PSP_closed",
      name: "Storage3",
      injectionNominalCapacity: 1500.0,
      withdrawalNominalCapacity: 1500.0,
      reservoirCapacity: 21000.0,
      efficiency: 0.72,
    },
  ];

columns

const columns = useMemo<MRT_ColumnDef<Storage>[]>(
    () => [
      {
        accessorKey: "group",
        header: "Group",
        size: 150,
      },
      {
        accessorKey: "name",
        header: "Name",
        size: 200,
      },
      {
        accessorKey: "injectionNominalCapacity",
        header: "Injection Nominal Capacity",
        size: 200,
      },
      {
        accessorKey: "withdrawalNominalCapacity",
        header: "Withdrawal Nominal Capacity",
        size: 220,
      },
      {
        accessorKey: "reservoirCapacity",
        header: "Reservoir Capacity",
        size: 180,
      },
      {
        accessorKey: "efficiency",
        header: "Efficiency",
        size: 150,
      },
    ],
    []
  );

groups

  const groups = ["Battery", "PSP_closed"];

Import the component and use:

      <GroupedDataTable
          data={data}
          columns={columns}
          groups={groups}
          onSubmit={handleSubmit}
          onDelete={handleDelete}
        />

[makdeuneuv]

Two issues refers to this one still open.

[hdinia]

we still need to refactor and use the new GroupedDataTable component for the Thermal and Renewables views, we will do this in separate issues, as each view involve several updates:

• Thermal: [ANT-706] Refactor Thermal Cluster View #1641
• Renewables: [ANT-706] Refactor Renewable Cluster View #1640