[Side effect] Fix form reset based on data parameter

- show message if event in the fault tree is selected
kbss-cvut · Sep 11, 2024 · 3533204 · 3533204
1 parent f622bd0
commit 3533204
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 49 deletions.
diff --git a/public/locales/cs/translation.json b/public/locales/cs/translation.json
@@ -109,7 +109,8 @@
     "calculatedFailureRate": "Vypočtená intenzita poruch",
     "operationalFailureRate": "Provozní intenzita poruch",
     "manuallyDefinedFailureRate": "Manuálně definovaná intenzita poruch",
-    "unsavedChanges": "Máte neuložené změny. Chcete před pokračováním uložit změny?"
+    "unsavedChanges": "Máte neuložené změny. Chcete před pokračováním uložit změny?",
+    "notSelected": "Není vybrána žádná událost"
   },
   "appBar": {
     "selectSystemPlaceholder": "Vyberte systém"

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -109,7 +109,8 @@
     "calculatedFailureRate": "Calculated failure rate",
     "operationalFailureRate": "Operational failure rate",
     "manuallyDefinedFailureRate": "Manually defined failure rate",
-    "unsavedChanges": "You have unsaved changes. Do you want to save your changes before proceeding?"
+    "unsavedChanges": "You have unsaved changes. Do you want to save your changes before proceeding?",
+    "notSelected": "No Event selected"
   },
   "appBar": {
     "selectSystemPlaceholder": "Select system"

diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx
@@ -323,11 +323,10 @@ const FaultEventMenu = ({ selectedShapeToolData, onEventUpdated, refreshTree, ro
 
   return (
     <Box paddingLeft={2} marginRight={2}>
-      {shapeToolData && (
-        <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
-          <FaultEventShapeToolPane data={shapeToolData} refreshTree={refreshTree} formMethods={formMethods} />
-        </ReusableFaultEventsProvider>
-      )}
+      <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
+        <FaultEventShapeToolPane data={shapeToolData} refreshTree={refreshTree} formMethods={formMethods} />
+      </ReusableFaultEventsProvider>
+
       {/* TODO: Finish for other nodes. Will be refactored. */}
 
       {/* ROOT NODE */}

diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx
@@ -3,7 +3,11 @@ import { makeStyles } from "tss-react/mui";
 
 const useStyles = makeStyles()((theme: Theme) => ({
   emptyTitle: {
-    padding: theme.spacing(0, 2),
+    textAlign: "center",
+    fontStyle: "italic",
+    fontWeight: "bold",
+    color: theme.main.grey,
+    padding: theme.spacing(10, 2),
   },
 }));
 

diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx
@@ -8,6 +8,7 @@ import useStyles from "@components/editor/faultTree/menu/faultEvent/FaultEventSh
 import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 import { useCurrentFaultTree } from "@hooks/useCurrentFaultTree";
 import { asArray } from "@utils/utils";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   data?: FaultEvent;
@@ -18,55 +19,55 @@ interface Props {
 const FaultEventShapeToolPane = ({ data, refreshTree, formMethods }: Props) => {
   const { classes } = useStyles();
   const [faultTree] = useCurrentFaultTree();
+  const { t } = useTranslation();
 
-  let editorPane;
-  let defaultValues;
+  const getFormValues = (data) => {
+    if (data) {
+      const safeSupertype = asArray(data.supertypes).map((t) => ({ name: t.name, iri: t.iri, types: t.types }))?.[0];
+      return {
+        eventType: data.eventType,
+        name: data.name,
+        description: data.description,
+        probability: data.probability ? data.probability : 0.01,
+        gateType: data.gateType ? data.gateType : null,
+        sequenceProbability: data.sequenceProbability,
+        existingEvent: safeSupertype,
+      };
+    } else {
+      return {};
+    }
+  };
 
-  if (data) {
-    const safeSupertype = asArray(data.supertypes).map((t) => ({ name: t.name, iri: t.iri, types: t.types }))?.[0];
-    defaultValues = {
-      eventType: data.eventType,
-      name: data.name,
-      description: data.description,
-      probability: data.probability ? data.probability : 0.01,
-      gateType: data.gateType ? data.gateType : null,
-      sequenceProbability: data.sequenceProbability,
-      existingEvent: safeSupertype,
-    };
+  useEffect(() => {
+    formMethods.reset(getFormValues(data));
+  }, [data]);
 
-    useEffect(() => {
-      formMethods.reset(defaultValues);
-    }, [data]);
+  const isDisabled =
+    data &&
+    ([EventType.INTERMEDIATE, EventType.BASIC, EventType.EXTERNAL].includes(data.eventType) || data.isReference);
 
-    const isDisabled =
-      data &&
-      ([EventType.INTERMEDIATE, EventType.BASIC, EventType.EXTERNAL].includes(data.eventType) || data.isReference);
+  const editorPane = (isDisabled) => (
+    <ReusableFaultEventsProvider treeUri={faultTree?.iri}>
+      <FaultEventCreation
+        useFormMethods={formMethods}
+        isRootEvent={false}
+        eventValue={data}
+        isEditedEvent={true}
+        isEditMode={true}
+        disabled={isDisabled}
+      />
+    </ReusableFaultEventsProvider>
+  );
 
-    editorPane = (
-      <ReusableFaultEventsProvider treeUri={faultTree?.iri}>
-        <FaultEventCreation
-          useFormMethods={formMethods}
-          isRootEvent={false}
-          eventValue={data}
-          isEditedEvent={true}
-          isEditMode={true}
-          disabled={isDisabled}
-        />
-      </ReusableFaultEventsProvider>
-    );
-  } else {
-    defaultValues = {};
-    formMethods.reset(defaultValues);
-    editorPane = (
-      <Typography className={classes.emptyTitle} variant="subtitle1" align="left">
-        No Event selected
-      </Typography>
-    );
-  }
+  const editorPaneNoSelection = () => (
+    <Typography className={classes.emptyTitle} variant="subtitle1" align="left">
+      {t("faultEventMenu.notSelected")}
+    </Typography>
+  );
 
   return (
     <React.Fragment>
-      {editorPane}
+      {data ? editorPane(isDisabled) : editorPaneNoSelection()}
       {data?.gateType === GateType.PRIORITY_AND && (
         <React.Fragment>
           <Divider />