Added default gate type to created fault tree

src/components/dialog/faultEvent/FaultEventCreation.schema.tsx

@@ -36,6 +36,7 @@ export const schema = Yup.object().shape({
     .max(1, "Sequence probability cannot be greater than 1"),
 });
 
-export const rootEventSchema = Yup.object().shape({
+export const faultEventSchema = Yup.object().shape({
   name: Yup.string().min(1, "Must be at least 1 character long").required("Event is mandatory"),
+  gateType: Yup.string().nullable().default(GateType.OR),
 });

src/components/dialog/faultEvent/FaultEventCreation.tsx

@@ -12,10 +12,12 @@ import { useTranslation } from "react-i18next";
 interface Props {
   useFormMethods: any;
   isRootEvent: boolean;
+  eventValue?: FaultEvent;
+  isEditedEvent?: boolean;
 }
 
 // TODO: remove ts-ignores and migrate to higher version of react-hook-form
-const FaultEventCreation = ({ useFormMethods, isRootEvent }: Props) => {
+const FaultEventCreation = ({ useFormMethods, isRootEvent, eventValue, isEditedEvent = false }: Props) => {
   const { classes } = useStyles();
   const { t } = useTranslation();
 
@@ -78,8 +80,75 @@ const FaultEventCreation = ({ useFormMethods, isRootEvent }: Props) => {
           renderInput={(params) => (
             <TextField {...params} label={t("newFtaModal.eventPlaceholder")} variant="outlined" {...register("name")} />
           )}
-          defaultValue={null}
+          defaultValue={eventValue ? eventValue : null}
         />
+
+        {!selectedEvent && !isRootEvent && (
+          <FormControl disabled={existingEventSelected} className={classes.formControl}>
+            <InputLabel id="event-type-select-label">{t("newFtaModal.type")}</InputLabel>
+            <Controller
+              render={({ field }) => {
+                const _onChange = field.onChange;
+                field.onChange = (e) => {
+                  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);
+                  _onChange(e);
+                };
+                return (
+                  <Select
+                    {...field}
+                    disabled={existingEventSelected}
+                    labelId="event-type-select-label"
+                    label={t("newFtaModal.type")}
+                  >
+                    {Object.values(EventType).map((value, index) => (
+                      <MenuItem key={index} value={value}>
+                        {value}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                );
+              }}
+              name="eventType"
+              control={control}
+              defaultValue={EventType.INTERMEDIATE}
+            />
+          </FormControl>
+        )}
+
+        {eventTypeWatch === EventType.INTERMEDIATE && (
+          <div className={classes.formControlDiv}>
+            <FormControl className={classes.formControl}>
+              <InputLabel id="gate-type-select-label">{t("newFtaModal.gateType")}</InputLabel>
+              <Controller
+                render={({ field }) => (
+                  <Select
+                    {...field}
+                    labelId="gate-type-select-label"
+                    label={t("newFtaModal.gateType")}
+                    error={!!errors.gateType}
+                  >
+                    {gateTypeValues()
+                      .filter((value) => value[0])
+                      .map((value) => {
+                        const [enabled, optionValue] = value;
+                        return (
+                          <MenuItem key={optionValue} value={optionValue} disabled={!enabled}>
+                            {optionValue}
+                          </MenuItem>
+                        );
+                      })}
+                  </Select>
+                )}
+                name="gateType"
+                control={control}
+                defaultValue={GateType.OR}
+              />
+            </FormControl>
+          </div>
+        )}
       </>
     );
   }
@@ -90,41 +159,8 @@ const FaultEventCreation = ({ useFormMethods, isRootEvent }: Props) => {
     }
     return (
       <>
-        {!selectedEvent && filteredOptions.length === 0 && !isRootEvent && (
+        {eventTypeWatch !== EventType.INTERMEDIATE && !isRootEvent && isEditedEvent && (
           <>
-            <FormControl disabled={existingEventSelected} className={classes.formControl}>
-              <InputLabel id="event-type-select-label">{t("newFtaModal.type")}</InputLabel>
-              <Controller
-                render={({ field }) => {
-                  const _onChange = field.onChange;
-                  field.onChange = (e) => {
-                    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);
-                    _onChange(e);
-                  };
-                  return (
-                    <Select
-                      {...field}
-                      disabled={existingEventSelected}
-                      labelId="event-type-select-label"
-                      label={t("newFtaModal.type")}
-                    >
-                      {Object.values(EventType).map((value, index) => (
-                        <MenuItem key={index} value={value}>
-                          {value}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  );
-                }}
-                name="eventType"
-                control={control}
-                defaultValue={EventType.INTERMEDIATE}
-              />
-            </FormControl>
-
             {/*TODO: sort out default value UI bug*/}
             <TextField
               margin="dense"
@@ -138,20 +174,18 @@ const FaultEventCreation = ({ useFormMethods, isRootEvent }: Props) => {
             />
 
             {/* Probability field */}
-            {eventTypeWatch !== EventType.INTERMEDIATE && (
-              <TextField
-                label={t("newFtaModal.probability")}
-                type="number"
-                min={0}
-                max={1}
-                step={0.01}
-                error={!!errors.probability}
-                helperText={errors.probability?.message}
-                className={classes.probability}
-                defaultValue=""
-                {...register("probability")}
-              />
-            )}
+            <TextField
+              label={t("newFtaModal.probability")}
+              type="number"
+              min={0}
+              max={1}
+              step={0.01}
+              error={!!errors.probability}
+              helperText={errors.probability?.message}
+              className={classes.probability}
+              defaultValue=""
+              {...register("probability")}
+            />
 
             {(gateTypeWatch === GateType.PRIORITY_AND || !gateTypeWatch) &&
               eventTypeWatch === EventType.INTERMEDIATE &&
@@ -169,39 +203,6 @@ const FaultEventCreation = ({ useFormMethods, isRootEvent }: Props) => {
                   {...register("sequenceProbability")}
                 />
               )}
-
-            {(eventTypeWatch === EventType.INTERMEDIATE || !eventTypeWatch) && (
-              <div className={classes.formControlDiv}>
-                <FormControl className={classes.formControl}>
-                  <InputLabel id="gate-type-select-label">{t("newFtaModal.gateType")}</InputLabel>
-                  <Controller
-                    render={({ field }) => (
-                      <Select
-                        {...field}
-                        disabled={existingEventSelected}
-                        labelId="gate-type-select-label"
-                        label={t("newFtaModal.gateType")}
-                        error={!!errors.gateType}
-                      >
-                        {gateTypeValues()
-                          .filter((value) => value[0])
-                          .map((value) => {
-                            const [enabled, optionValue] = value;
-                            return (
-                              <MenuItem key={optionValue} value={optionValue} disabled={!enabled}>
-                                {optionValue}
-                              </MenuItem>
-                            );
-                          })}
-                      </Select>
-                    )}
-                    name="gateType"
-                    control={control}
-                    defaultValue={GateType.OR}
-                  />
-                </FormControl>
-              </div>
-            )}
           </>
         )}
       </>

src/components/dialog/faultEvent/FaultEventDialog.tsx

@@ -8,12 +8,12 @@ import * as faultEventService from "@services/faultEventService";
 import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
 import FaultEventCreation from "./FaultEventCreation";
 import { useForm } from "react-hook-form";
-import { schema } from "./FaultEventCreation.schema";
+import { faultEventSchema } from "./FaultEventCreation.schema";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { eventFromHookFormValues } from "@services/faultEventService";
 import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 import { FaultEvent } from "@models/eventModel";
-import {useSelectedSystem} from "@hooks/useSelectedSystem";
+import { useSelectedSystem } from "@hooks/useSelectedSystem";
 
 interface Props {
   open: boolean;
@@ -27,7 +27,7 @@ const FaultEventDialog = ({ open, eventIri, treeUri, onCreated, onClose }: Props
   const [showSnackbar] = useSnackbar();
 
   const [selectedSystem] = useSelectedSystem();
-  const useFormMethods = useForm({ resolver: yupResolver(schema) });
+  const useFormMethods = useForm({ resolver: yupResolver(faultEventSchema) });
   const { handleSubmit, formState } = useFormMethods;
   const { isSubmitting } = formState;
 
@@ -51,7 +51,7 @@ const FaultEventDialog = ({ open, eventIri, treeUri, onCreated, onClose }: Props
         </DialogTitle>
         <DialogContent dividers>
           <ReusableFaultEventsProvider treeUri={treeUri} systemUri={selectedSystem?.iri}>
-            <FaultEventCreation useFormMethods={useFormMethods} eventReusing={true} />
+            <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={false} />
           </ReusableFaultEventsProvider>
         </DialogContent>
         <DialogActions>

src/components/dialog/faultTree/FaultTreeDialog.tsx

@@ -11,11 +11,11 @@ import FaultEventCreation from "@components/dialog/faultEvent/FaultEventCreation
 import { useFaultTrees } from "@hooks/useFaultTrees";
 import { FaultTree } from "@models/faultTreeModel";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { rootEventSchema } from "@components/dialog/faultEvent/FaultEventCreation.schema";
+import { faultEventSchema } from "@components/dialog/faultEvent/FaultEventCreation.schema";
 import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 import { useTranslation } from "react-i18next";
 import useStyles from "@components/dialog/faultTree/FaultTreeDialog.styles";
-import {useSelectedSystem} from "@hooks/useSelectedSystem";
+import { useSelectedSystem } from "@hooks/useSelectedSystem";
 
 const FaultTreeDialog = ({ open, handleCloseDialog }) => {
   const { t } = useTranslation();
@@ -25,7 +25,7 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
   const [processing, setIsProcessing] = useState(false);
   const [selectedSystem] = useSelectedSystem();
 
-  const useFormMethods = useForm({ resolver: yupResolver(schema.concat(rootEventSchema)) });
+  const useFormMethods = useForm({ resolver: yupResolver(schema.concat(faultEventSchema)) });
   const { handleSubmit, register } = useFormMethods;
 
   const handleCreateFaultTree = async (values: any) => {

src/components/editor/faultTree/menu/faultEvent/FaultEventMenu.tsx

@@ -11,6 +11,8 @@ import FailureModeShowDialog from "../../../../dialog/failureMode/show/FailureMo
 import useStyles from "@components/editor/faultTree/menu/faultEvent/FaultEventMenu.styles";
 import { useTranslation } from "react-i18next";
 import { asArray } from "@utils/utils";
+import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
+import { useSelectedSystem } from "@hooks/useSelectedSystem";
 
 interface Props {
   shapeToolData?: FaultEvent;
@@ -34,6 +36,7 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
   const [stock, setStock] = useState<string | undefined>(undefined);
   const [quantity, setQuantity] = useState<number | undefined>(undefined);
   const [schematicDesignation, setSchematicDesignation] = useState<string | undefined>(undefined);
+  const [selectedSystem] = useSelectedSystem();
 
   const handleFailureModeClicked = (failureMode: FailureMode) => {
     setFailureModeOverview(failureMode);
@@ -103,7 +106,9 @@ const FaultEventMenu = ({ shapeToolData, onEventUpdated, refreshTree, rootIri }:
 
   return (
     <Box paddingLeft={2} marginRight={2}>
-      <FaultEventShapeToolPane data={shapeToolData} onEventUpdated={onEventUpdated} refreshTree={refreshTree} />
+      <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
+        <FaultEventShapeToolPane data={shapeToolData} onEventUpdated={onEventUpdated} refreshTree={refreshTree} />
+      </ReusableFaultEventsProvider>
 
       {/* TODO: Finish for other nodes. Will be refactored. */}
 

src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx

@@ -13,7 +13,6 @@ import { FaultEvent, GateType } from "@models/eventModel";
 import FaultEventChildrenReorderList from "@components/editor/faultTree/menu/faultEvent/reorder/FaultEventChildrenReorderList";
 import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
 import useStyles from "@components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles";
-import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 
 interface Props {
   data?: FaultEvent;
@@ -26,7 +25,7 @@ const FaultEventShapeToolPane = ({ data, onEventUpdated, refreshTree }: Props) =
   const [showSnackbar] = useSnackbar();
 
   let editorPane;
-  let updateFunction;
+  let updateEvent;
   let useFormMethods;
   let defaultValues;
 
@@ -44,7 +43,7 @@ const FaultEventShapeToolPane = ({ data, onEventUpdated, refreshTree }: Props) =
       resolver: yupResolver(eventSchema),
     });
 
-    updateFunction = async (values: any) => {
+    updateEvent = async (values: any) => {
       let dataClone = cloneDeep(data);
 
       const updatedFaultEvent = deepOmit(faultEventService.eventFromHookFormValues(values), "@type");
@@ -54,9 +53,7 @@ const FaultEventShapeToolPane = ({ data, onEventUpdated, refreshTree }: Props) =
     };
 
     editorPane = (
-      <ReusableFaultEventsProvider>
-        <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={true}/>
-      </ReusableFaultEventsProvider>
+      <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={false} eventValue={data} isEditedEvent={true} />
     );
   } else {
     defaultValues = {};
@@ -93,7 +90,7 @@ const FaultEventShapeToolPane = ({ data, onEventUpdated, refreshTree }: Props) =
     <React.Fragment>
       {editorPane}
       {isDirty && (
-        <Button disabled={isSubmitting || !eventSelected} color="primary" onClick={handleSubmit(updateFunction)}>
+        <Button disabled={isSubmitting || !eventSelected} color="primary" onClick={handleSubmit(updateEvent)}>
           Save
         </Button>
       )}