Merge pull request #523 from kbss-cvut/fix-inconsistent-behavior

Fix inconsistent behavior of event creation
kbss-cvut · Jul 12, 2024 · dafd2e1 · dafd2e1
2 parents f27256f + aa89d84
commit dafd2e1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/src/components/dialog/faultEvent/FaultEventCreation.tsx b/src/components/dialog/faultEvent/FaultEventCreation.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-
 import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
 import useStyles from "@components/dialog/faultEvent/FaultEventCreation.styles";
 import { Controller } from "react-hook-form";
@@ -19,7 +18,6 @@ interface Props {
   isEditMode?: boolean;
 }
 
-// TODO: remove ts-ignores and migrate to higher version of react-hook-form
 const FaultEventCreation = ({
   useFormMethods,
   isRootEvent,
@@ -41,9 +39,10 @@ const FaultEventCreation = ({
   } = useFormMethods;
 
   const faultEvents = useReusableFaultEvents();
-  const [newEvent, setNewEvent] = useState<String | null>(null);
+  const [newEvent, setNewEvent] = useState<string | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<FaultEvent | null>(null);
   const [showCreateEvent, setShowCreateEvent] = useState(false);
+  const [isCreatedEvent, setIsCreatedEvent] = useState<boolean>(false);
   const existingEventSelected = Boolean(selectedEvent);
   const lastGateTypeRef = useRef(selectedEvent?.gateType);
   const eventTypeWatch = watch("eventType");
@@ -53,23 +52,38 @@ const FaultEventCreation = ({
     if (selectedEvent) {
       setValue("name", selectedEvent.name);
       setValue("existingEvent", selectedEvent.iri ? selectedEvent : null);
+      if (existingEventSelected) {
+        setValue("eventType", selectedEvent.eventType);
+      }
+      if (isRootEvent || isCreatedEvent) {
+        setValue("eventType", EventType.INTERMEDIATE);
+        setValue("gateType", GateType.OR);
+      }
     } else {
       reset();
     }
-  }, [selectedEvent]);
+  }, [isRootEvent, selectedEvent, setValue, existingEventSelected, isCreatedEvent, reset]);
 
   const [filteredOptions, setFilteredOptions] = useState([{}]);
   const updatedFHAEventTypes = updateEventsType(faultEvents, "fha-fault-event", EventType.EXTERNAL);
 
-  const handleFilterOptions = (inputValue) => {
+  const handleFilterOptions = (inputValue: string) => {
     const filtered = faultEvents.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()));
     setNewEvent(inputValue);
     setFilteredOptions(filtered);
   };
 
   const handleOnCreateEventClick = (e: MouseEvent) => {
-    setSelectedEvent({ name: newEvent });
+    setSelectedEvent({ name: newEvent } as FaultEvent);
     setShowCreateEvent(true);
+    setIsCreatedEvent(true);
+    setValue("eventType", EventType.INTERMEDIATE);
+    setValue("gateType", GateType.OR);
+  };
+
+  const handleEventSelect = (data: any) => {
+    setSelectedEvent(data);
+    setIsCreatedEvent(false);
   };
 
   function renderEventSelect() {
@@ -85,7 +99,7 @@ const FaultEventCreation = ({
           control={control}
           name="event"
           options={isRootEvent ? faultEvents : updatedFHAEventTypes}
-          onChangeCallback={(data: any) => setSelectedEvent(data)}
+          onChangeCallback={handleEventSelect}
           onInputChangeCallback={handleFilterOptions}
           onCreateEventClick={handleOnCreateEventClick}
           getOptionKey={(option) => option.iri}
@@ -97,8 +111,8 @@ const FaultEventCreation = ({
           disabled={disabled}
         />
 
-        {!selectedEvent && !isRootEvent && (
-          <FormControl disabled={existingEventSelected} className={classes.formControl}>
+        {selectedEvent && (
+          <FormControl className={classes.formControl}>
             <InputLabel id="event-type-select-label">{t("newFtaModal.type")}</InputLabel>
             <Controller
               render={({ field }) => {
@@ -107,13 +121,15 @@ const FaultEventCreation = ({
                   if (e.target.value !== EventType.INTERMEDIATE && e.target.value !== EventType.CONDITIONING) {
                     lastGateTypeRef.current = gateTypeWatch;
                     setValue("gateType", null);
-                  } else setValue("gateType", lastGateTypeRef.current ? lastGateTypeRef.current : GateType.OR);
+                  } else {
+                    setValue("gateType", lastGateTypeRef.current ? lastGateTypeRef.current : GateType.OR);
+                  }
                   _onChange(e);
                 };
                 return (
                   <Select
                     {...field}
-                    disabled={existingEventSelected || disabled}
+                    disabled={isRootEvent || (!isCreatedEvent && (existingEventSelected || disabled))}
                     labelId="event-type-select-label"
                     label={t("newFtaModal.type")}
                   >
@@ -171,12 +187,12 @@ const FaultEventCreation = ({
           </div>
         )}
 
-        {eventTypeWatch !== EventType.INTERMEDIATE &&
+        {selectedEvent &&
+          eventTypeWatch !== EventType.INTERMEDIATE &&
           eventTypeWatch !== EventType.EXTERNAL &&
           !isRootEvent &&
           isEditedEvent && (
             <>
-              {/*TODO: sort out default value UI bug*/}
               <TextField
                 margin="dense"
                 label={t("newFtaModal.description")}
@@ -188,7 +204,6 @@ const FaultEventCreation = ({
                 {...register("description")}
               />
 
-              {/* Probability field */}
               {!isEditMode && eventTypeWatch === EventType.BASIC && (
                 <TextField
                   label={t("newFtaModal.probability")}

diff --git a/src/components/table/FaultTreeAndSystemOverviewTable.tsx b/src/components/table/FaultTreeAndSystemOverviewTable.tsx
@@ -68,7 +68,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   };
 
   const applyFilters = () => {
-    setAppliedFilters(filterValues); // Apply the filters
+    setAppliedFilters(filterValues);
     handleFilterChange(filterValues.label, filterValues.snsLabel);
     handleFilterClose();
   };
@@ -83,7 +83,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
                 sortConfig={sortConfig || initialSortConfig}
                 onSortChange={handleSortChange}
                 onFilterClick={handleFilterClick}
-                filterValues={appliedFilters} // Pass applied filters
+                filterValues={appliedFilters}
               />
             )}
             {systems && <SystemTableHead />}

diff --git a/src/components/table/FaultTreeTableHead.tsx b/src/components/table/FaultTreeTableHead.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { TableCell, TableRow, Box, TableSortLabel } from "@mui/material";
 import FilterListIcon from "@mui/icons-material/FilterList";
+import useStyles from "./FaultTreeOverviewTable.styles";
 
 interface FaultTreeTableHeadProps {
   sortConfig: { key: string; direction: "asc" | "desc" };
@@ -10,9 +11,11 @@ interface FaultTreeTableHeadProps {
 }
 
 const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortChange, onFilterClick, filterValues }) => {
+  const { classes } = useStyles();
+
   return (
     <TableRow>
-      <TableCell>
+      <TableCell className={classes.tableHeaderCell}>
         <Box display="flex" alignItems="center">
           <span onClick={(e) => onFilterClick(e, "label")} style={{ cursor: "pointer", marginRight: "8px" }}>
             FHA Label
@@ -25,10 +28,10 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           />
         </Box>
       </TableCell>
-      <TableCell>Aircraft Type</TableCell>
-      <TableCell>
+      <TableCell className={classes.tableHeaderCell}>Aircraft Type</TableCell>
+      <TableCell className={classes.tableHeaderCell}>
         <Box display="flex" alignItems="center">
-          <span onClick={(e) => onFilterClick(e, "snsLabel")} style={{ cursor: "pointer", marginRight: "8px" }}>
+          <span onClick={(e) => onFilterClick(e, "snsLabel")} style={{ cursor: "pointer" }}>
             SNS Label
           </span>
           {filterValues.snsLabel && <FilterListIcon />}
@@ -39,11 +42,11 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           />
         </Box>
       </TableCell>
-      <TableCell>Calculated Failure Rate</TableCell>
-      <TableCell>FHA Based Failure Rate</TableCell>
-      <TableCell>Required Failure Rate</TableCell>
-      <TableCell>Last Modified</TableCell>
-      <TableCell>
+      <TableCell className={classes.tableHeaderCell}>Calculated Failure Rate</TableCell>
+      <TableCell className={classes.tableHeaderCell}>FHA Based Failure Rate</TableCell>
+      <TableCell className={classes.tableHeaderCell}>Required Failure Rate</TableCell>
+      <TableCell className={classes.tableHeaderCell}>Last Modified</TableCell>
+      <TableCell className={classes.tableHeaderCell}>
         <Box display="flex" alignItems="center">
           Created
           <TableSortLabel
@@ -53,7 +56,7 @@ const FaultTreeTableHead: FC<FaultTreeTableHeadProps> = ({ sortConfig, onSortCha
           />
         </Box>
       </TableCell>
-      <TableCell>Last Editor</TableCell>
+      <TableCell className={classes.tableHeaderCell}>Last Editor</TableCell>
     </TableRow>
   );
 };