feat(common-ui,clusters-ui): implement optimistic row creation

* fix TS mistakes
* update i18n

webapp/public/locales/en/main.json

@@ -77,6 +77,7 @@
   "global.error.failedtoretrievejobs": "Failed to retrieve job information",
   "global.error.failedtoretrievelogs": "Failed to retrieve job logs",
   "global.error.failedtoretrievedownloads": "Failed to retrieve downloads list",
+  "global.error.createFailed": "Unable to create",
   "global.error.deleteFailed": "Unable to delete",
   "global.area.add": "Add an area",
   "login.error": "Failed to authenticate",
@@ -115,7 +116,7 @@
   "form.submit.inProgress": "The form is being submitted. Are you sure you want to leave the page?",
   "form.asyncDefaultValues.error": "Failed to get values",
   "form.field.required": "Field required",
-  "form.field.duplicate": "Value already exists: {{0}}",
+  "form.field.duplicate": "Value already exists",
   "form.field.minLength": "{{0}} character(s) minimum",
   "form.field.minValue": "The minimum value is {{0}}",
   "form.field.maxValue": "The maximum value is {{0}}",

webapp/public/locales/fr/main.json

@@ -77,6 +77,7 @@
   "global.error.failedtoretrievejobs": "Échec de la récupération des tâches",
   "global.error.failedtoretrievelogs": "Échec de la récupération des logs",
   "global.error.failedtoretrievedownloads": "Échec de la récupération des exports",
+  "global.error.createFailed": "Impossible d'effectuer la création",
   "global.error.deleteFailed": "Impossible d'effectuer la suppression",
   "global.area.add": "Ajouter une zone",
   "login.error": "Échec de l'authentification",
@@ -115,7 +116,7 @@
   "form.submit.inProgress": "Le formulaire est en cours de soumission. Etes-vous sûr de vouloir quitter la page ?",
   "form.asyncDefaultValues.error": "Impossible d'obtenir les valeurs",
   "form.field.required": "Champ requis",
-  "form.field.duplicate": "Cette valeur existe déjà: {{0}}",
+  "form.field.duplicate": "Cette valeur existe déjà",
   "form.field.minLength": "{{0}} caractère(s) minimum",
   "form.field.minValue": "La valeur minimum est {{0}}",
   "form.field.maxValue": "La valeur maximum est {{0}}",

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx

@@ -8,6 +8,7 @@ import {
   RENEWABLE_GROUPS,
   RenewableCluster,
   RenewableClusterWithCapacity,
+  RenewableGroup,
   createRenewableCluster,
   deleteRenewableClusters,
   getRenewableClusters,
@@ -16,9 +17,11 @@ import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import GroupedDataTable from "../../../../../../common/GroupedDataTable";
 import {
+  addCapacity,
   capacityAggregationFn,
   useClusterDataWithCapacity,
 } from "../common/utils";
+import { TRow } from "../../../../../../common/GroupedDataTable/types";
 
 function Renewables() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -86,8 +89,8 @@ function Renewables() {
         ),
         Cell: ({ row }) => (
           <>
-            {Math.floor(row.original.enabledCapacity ?? 0)} /{" "}
-            {Math.floor(row.original.installedCapacity ?? 0)}
+            {Math.floor(row.original.enabledCapacity)} /{" "}
+            {Math.floor(row.original.installedCapacity)}
           </>
         ),
         Footer: () => (
@@ -105,13 +108,9 @@ function Renewables() {
   // Event handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleCreateRow = ({
-    id,
-    installedCapacity,
-    enabledCapacity,
-    ...cluster
-  }: RenewableClusterWithCapacity) => {
-    return createRenewableCluster(study.id, areaId, cluster);
+  const handleCreate = async (values: TRow<RenewableGroup>) => {
+    const cluster = await createRenewableCluster(study.id, areaId, values);
+    return addCapacity(cluster);
   };
 
   const handleDelete = (rows: RenewableClusterWithCapacity[]) => {
@@ -132,8 +131,8 @@ function Renewables() {
       isLoading={isLoading}
       data={clustersWithCapacity}
       columns={columns}
-      groups={RENEWABLE_GROUPS}
-      onCreate={handleCreateRow}
+      groups={[...RENEWABLE_GROUPS]}
+      onCreate={handleCreate}
       onDelete={handleDelete}
       onNameClick={handleNameClick}
       deleteConfirmationMessage={(count) =>

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/utils.ts

@@ -4,6 +4,7 @@ import {
   StudyMetadata,
 } from "../../../../../../../common/types";
 import client from "../../../../../../../services/api/client";
+import type { PartialExceptFor } from "../../../../../../../utils/tsUtils";
 
 ////////////////////////////////////////////////////////////////
 // Constants
@@ -30,8 +31,9 @@ export const TS_INTERPRETATION_OPTIONS = [
 // Types
 ////////////////////////////////////////////////////////////////
 
+export type RenewableGroup = (typeof RENEWABLE_GROUPS)[number];
+
 type TimeSeriesInterpretation = (typeof TS_INTERPRETATION_OPTIONS)[number];
-type RenewableGroup = (typeof RENEWABLE_GROUPS)[number];
 
 export interface RenewableFormFields {
   name: string;
@@ -115,12 +117,12 @@ export async function updateRenewableCluster(
   );
 }
 
-export async function createRenewableCluster(
+export function createRenewableCluster(
   studyId: StudyMetadata["id"],
   areaId: Area["name"],
-  data: Partial<RenewableCluster>,
-): Promise<RenewableClusterWithCapacity> {
-  return makeRequest<RenewableClusterWithCapacity>(
+  data: PartialExceptFor<RenewableCluster, "name">,
+) {
+  return makeRequest<RenewableCluster>(
     "post",
     getClustersUrl(studyId, areaId),
     data,

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/index.tsx

@@ -13,8 +13,10 @@ import {
   deleteStorages,
   createStorage,
   STORAGE_GROUPS,
+  StorageGroup,
 } from "./utils";
 import usePromiseWithSnackbarError from "../../../../../../../hooks/usePromiseWithSnackbarError";
+import type { TRow } from "../../../../../../common/GroupedDataTable/types";
 
 function Storages() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -155,8 +157,8 @@ function Storages() {
   // Event handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleCreateRow = ({ id, ...storage }: Storage) => {
-    return createStorage(study.id, areaId, storage);
+  const handleCreate = (values: TRow<StorageGroup>) => {
+    return createStorage(study.id, areaId, values);
   };
 
   const handleDelete = (rows: Storage[]) => {
@@ -177,8 +179,8 @@ function Storages() {
       isLoading={isLoading}
       data={storages || []}
       columns={columns}
-      groups={STORAGE_GROUPS}
-      onCreate={handleCreateRow}
+      groups={[...STORAGE_GROUPS]}
+      onCreate={handleCreate}
       onDelete={handleDelete}
       onNameClick={handleNameClick}
       deleteConfirmationMessage={(count) =>

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/utils.ts

@@ -1,5 +1,6 @@
 import { StudyMetadata, Area } from "../../../../../../../common/types";
 import client from "../../../../../../../services/api/client";
+import type { PartialExceptFor } from "../../../../../../../utils/tsUtils";
 
 ////////////////////////////////////////////////////////////////
 // Constants
@@ -87,11 +88,11 @@ export async function updateStorage(
   );
 }
 
-export async function createStorage(
+export function createStorage(
   studyId: StudyMetadata["id"],
   areaId: Area["name"],
-  data: Partial<Storage>,
-): Promise<Storage> {
+  data: PartialExceptFor<Storage, "name">,
+) {
   return makeRequest<Storage>("post", getStoragesUrl(studyId, areaId), data);
 }
 

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx

@@ -11,14 +11,17 @@ import {
   ThermalClusterWithCapacity,
   THERMAL_GROUPS,
   ThermalCluster,
+  ThermalGroup,
 } from "./utils";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import GroupedDataTable from "../../../../../../common/GroupedDataTable";
 import {
+  addCapacity,
   capacityAggregationFn,
   useClusterDataWithCapacity,
 } from "../common/utils";
+import { TRow } from "../../../../../../common/GroupedDataTable/types";
 
 function Thermal() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -95,8 +98,8 @@ function Thermal() {
         ),
         Cell: ({ row }) => (
           <>
-            {Math.floor(row.original.enabledCapacity ?? 0)} /{" "}
-            {Math.floor(row.original.installedCapacity ?? 0)}
+            {Math.floor(row.original.enabledCapacity)} /{" "}
+            {Math.floor(row.original.installedCapacity)}
           </>
         ),
         Footer: () => (
@@ -119,13 +122,9 @@ function Thermal() {
   // Event handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleCreateRow = ({
-    id,
-    installedCapacity,
-    enabledCapacity,
-    ...cluster
-  }: ThermalClusterWithCapacity) => {
-    return createThermalCluster(study.id, areaId, cluster);
+  const handleCreate = async (values: TRow<ThermalGroup>) => {
+    const cluster = await createThermalCluster(study.id, areaId, values);
+    return addCapacity(cluster);
   };
 
   const handleDelete = (rows: ThermalClusterWithCapacity[]) => {
@@ -146,8 +145,8 @@ function Thermal() {
       isLoading={isLoading}
       data={clustersWithCapacity}
       columns={columns}
-      groups={THERMAL_GROUPS}
-      onCreate={handleCreateRow}
+      groups={[...THERMAL_GROUPS]}
+      onCreate={handleCreate}
       onDelete={handleDelete}
       onNameClick={handleNameClick}
       deleteConfirmationMessage={(count) =>

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts

@@ -4,6 +4,7 @@ import {
   StudyMetadata,
 } from "../../../../../../../common/types";
 import client from "../../../../../../../services/api/client";
+import type { PartialExceptFor } from "../../../../../../../utils/tsUtils";
 
 ////////////////////////////////////////////////////////////////
 // Constants
@@ -51,7 +52,8 @@ export const TS_LAW_OPTIONS = ["geometric", "uniform"] as const;
 // Types
 ////////////////////////////////////////////////////////////////
 
-type ThermalGroup = (typeof THERMAL_GROUPS)[number];
+export type ThermalGroup = (typeof THERMAL_GROUPS)[number];
+
 type LocalTSGenerationBehavior = (typeof TS_GENERATION_OPTIONS)[number];
 type TimeSeriesLawOption = (typeof TS_LAW_OPTIONS)[number];
 
@@ -143,12 +145,12 @@ export async function updateThermalCluster(
   );
 }
 
-export async function createThermalCluster(
+export function createThermalCluster(
   studyId: StudyMetadata["id"],
   areaId: Area["name"],
-  data: Partial<ThermalCluster>,
-): Promise<ThermalClusterWithCapacity> {
-  return makeRequest<ThermalClusterWithCapacity>(
+  data: PartialExceptFor<ThermalCluster, "name">,
+) {
+  return makeRequest<ThermalCluster>(
     "post",
     getClustersUrl(studyId, areaId),
     data,

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/common/utils.ts

@@ -81,13 +81,7 @@ export const useClusterDataWithCapacity = <T extends BaseCluster>(
   });
 
   const clustersWithCapacity: Array<ClusterWithCapacity<T>> = useMemo(
-    () =>
-      clusters?.map((cluster) => {
-        const { unitCount, nominalCapacity, enabled } = cluster;
-        const installedCapacity = unitCount * nominalCapacity;
-        const enabledCapacity = enabled ? installedCapacity : 0;
-        return { ...cluster, installedCapacity, enabledCapacity };
-      }) || [],
+    () => clusters?.map(addCapacity) || [],
     [clusters],
   );
 
@@ -116,3 +110,10 @@ export const useClusterDataWithCapacity = <T extends BaseCluster>(
     isLoading,
   };
 };
+
+export function addCapacity<T extends BaseCluster>(cluster: T) {
+  const { unitCount, nominalCapacity, enabled } = cluster;
+  const installedCapacity = unitCount * nominalCapacity;
+  const enabledCapacity = enabled ? installedCapacity : 0;
+  return { ...cluster, installedCapacity, enabledCapacity };
+}

webapp/src/components/common/GroupedDataTable/CreateDialog.tsx

@@ -1,48 +1,38 @@
-import { t } from "i18next";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import FormDialog from "../dialogs/FormDialog";
 import StringFE from "../fieldEditors/StringFE";
 import Fieldset from "../Fieldset";
 import { SubmitHandlerPlus } from "../Form/types";
 import SelectFE from "../fieldEditors/SelectFE";
-import { nameToId } from "../../../services/utils";
-import { TRow } from "./utils";
 import { validateString } from "../../../utils/validationUtils";
+import type { TRow } from "./types";
+import { useTranslation } from "react-i18next";
 
-interface Props<TData extends TRow> {
+interface Props {
   open: boolean;
   onClose: VoidFunction;
-  onSubmit: (values: TData) => Promise<void>;
-  groups: string[] | readonly string[];
-  existingNames: Array<TData["name"]>;
+  onSubmit: (values: TRow) => Promise<void>;
+  groups: string[];
+  existingNames: Array<TRow["name"]>;
 }
 
-const defaultValues = {
-  name: "",
-  group: "",
-};
-
-function CreateDialog<TData extends TRow>({
+function CreateDialog({
   open,
   onClose,
   onSubmit,
   groups,
   existingNames,
-}: Props<TData>) {
+}: Props) {
+  const { t } = useTranslation();
+
   ////////////////////////////////////////////////////////////////
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleSubmit = async ({
-    values,
-  }: SubmitHandlerPlus<typeof defaultValues>) => {
-    await onSubmit({
-      ...values,
-      id: nameToId(values.name),
-      name: values.name.trim(),
-    } as TData);
-
-    onClose();
+  const handleSubmit = ({
+    values: { name, group },
+  }: SubmitHandlerPlus<TRow>) => {
+    return onSubmit({ name: name.trim(), group });
   };
 
   ////////////////////////////////////////////////////////////////
@@ -56,7 +46,6 @@ function CreateDialog<TData extends TRow>({
       open={open}
       onCancel={onClose}
       onSubmit={handleSubmit}
-      config={{ defaultValues }}
     >
       {({ control }) => (
         <Fieldset fullFieldWidth>
@@ -76,10 +65,7 @@ function CreateDialog<TData extends TRow>({
             name="group"
             control={control}
             options={groups}
-            required
-            sx={{
-              alignSelf: "center",
-            }}
+            rules={{ required: t("form.field.required") }}
           />
         </Fieldset>
       )}