From 4d41b64e0459ef880343523d4515b7fe43e95f19 Mon Sep 17 00:00:00 2001
From: Bogdan Kostov <kostobog@fel.cvut.cz>
Date: Thu, 17 Oct 2024 10:18:54 +0200
Subject: [PATCH] [Fix #632] Move faultEventMenu.detailSectionTitle from
 reusable component FaultEventCreation to FaultEventCreation - fix vertical
 spacing between components

---
 .../dialog/faultEvent/FaultEventCreation.styles.tsx      | 7 -------
 src/components/dialog/faultEvent/FaultEventCreation.tsx  | 9 ++++-----
 src/components/dialog/faultTree/FaultTreeDialog.tsx      | 2 ++
 .../menu/faultEvent/FaultEventShapeToolPane.styles.tsx   | 7 +++++++
 .../menu/faultEvent/FaultEventShapeToolPane.tsx          | 4 ++++
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx b/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx
index ce08f7cc..b256cb3d 100644
--- a/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx
+++ b/src/components/dialog/faultEvent/FaultEventCreation.styles.tsx
@@ -2,13 +2,6 @@ import { Theme } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 
 const useStyles = makeStyles()((theme: Theme) => ({
-  menuTitle: {
-    backgroundColor: "#1976D256",
-    marginLeft: "-16px",
-    marginRight: "-16px",
-    paddingLeft: "8px",
-    borderBottom: "inset",
-  },
   divForm: {
     flexGrow: 1,
   },
diff --git a/src/components/dialog/faultEvent/FaultEventCreation.tsx b/src/components/dialog/faultEvent/FaultEventCreation.tsx
index 7c09ce43..66e39379 100644
--- a/src/components/dialog/faultEvent/FaultEventCreation.tsx
+++ b/src/components/dialog/faultEvent/FaultEventCreation.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
+import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
 import useStyles from "@components/dialog/faultEvent/FaultEventCreation.styles";
 import { Controller } from "react-hook-form";
 import { EventType, FaultEvent, GateType, gateTypeValues } from "@models/eventModel";
@@ -101,10 +101,6 @@ const FaultEventCreation = ({
     }
     return (
       <>
-        <Typography variant="h6" className={classes.menuTitle} gutterBottom>
-          {`${t("faultEventMenu.detailSectionTitle")}`}
-        </Typography>
-        <br />
         <ControlledAutocomplete
           control={control}
           name="existingEvent"
@@ -130,6 +126,7 @@ const FaultEventCreation = ({
 
         {selectedEvent && (
           <FormControl className={classes.formControl}>
+            <br />
             <InputLabel id="event-type-select-label">{t("newFtaModal.type")}</InputLabel>
             <Controller
               render={({ field }) => {
@@ -173,6 +170,7 @@ const FaultEventCreation = ({
       <>
         {eventTypeWatch === EventType.INTERMEDIATE && (
           <div className={classes.formControlDiv}>
+            <br />
             <FormControl className={classes.formControl}>
               <InputLabel id="gate-type-select-label">{t("newFtaModal.gateType")}</InputLabel>
               <Controller
@@ -210,6 +208,7 @@ const FaultEventCreation = ({
           !isRootEvent &&
           isEditedEvent && (
             <>
+              <br />
               <TextField
                 margin="dense"
                 label={t("newFtaModal.description")}
diff --git a/src/components/dialog/faultTree/FaultTreeDialog.tsx b/src/components/dialog/faultTree/FaultTreeDialog.tsx
index e3d5cdbe..a0e8475c 100644
--- a/src/components/dialog/faultTree/FaultTreeDialog.tsx
+++ b/src/components/dialog/faultTree/FaultTreeDialog.tsx
@@ -66,6 +66,8 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
           {...register("faultTreeName")}
           helperText={!!useFormMethods.formState.errors.faultTreeName && t("newFtaModal.noSystemError")}
         />
+        <br />
+        <br />
         <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
           <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={true} />
         </ReusableFaultEventsProvider>
diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx
index e6f8bc9e..ce41e4a1 100644
--- a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx
+++ b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx
@@ -9,6 +9,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
     color: theme.main.grey,
     padding: theme.spacing(10, 2),
   },
+  menuTitle: {
+    backgroundColor: "#1976D256",
+    marginLeft: "-16px",
+    marginRight: "-16px",
+    paddingLeft: "8px",
+    borderBottom: "inset",
+  },
 }));
 
 // TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
diff --git a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx
index ebb9c097..b85043e9 100644
--- a/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx
+++ b/src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx
@@ -53,6 +53,10 @@ const FaultEventShapeToolPane = ({ data, refreshTree, formMethods }: Props) => {
 
   const editorPane = (isDisabled) => (
     <ReusableFaultEventsProvider treeUri={faultTree?.iri}>
+      <Typography variant="h6" className={classes.menuTitle} gutterBottom>
+        {`${t("faultEventMenu.detailSectionTitle")}`}
+      </Typography>
+      <br />
       <FaultEventCreation
         useFormMethods={formMethods}
         isRootEvent={false}