Fix/354 filter reusable events based on global system selection

src/components/dashboard/content/list/FaultTreeOverview.tsx

@@ -14,6 +14,7 @@ import { Box, Button } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { SELECTED_VIEW } from "@utils/constants";
 import {useSelectedSystem} from "@hooks/useSelectedSystem";
+import {ReusableFaultEventsProvider} from "@hooks/useReusableFaultEvents";
 
 const FaultTreeOverview = () => {
   const { t } = useTranslation();
@@ -94,12 +95,12 @@ const FaultTreeOverview = () => {
         handleCloseDialog={() => setEditDialogOpen(false)}
         faultTree={contextMenuSelectedTree}
       />
-      <FaultEventsReuseProvider>
+      <ReusableFaultEventsProvider>
         <FaultTreeDialog
           open={createFaultTreeDialogOpen}
           handleCloseDialog={() => setCreateFaultTreeDialogOpen(false)}
         />
-      </FaultEventsReuseProvider>
+      </ReusableFaultEventsProvider>
     </Box>
   );
 };

src/components/dialog/faultEvent/FaultEventDialog.tsx

@@ -11,8 +11,9 @@ import { useForm } from "react-hook-form";
 import { schema } from "./FaultEventCreation.schema";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { eventFromHookFormValues } from "@services/faultEventService";
-import { FaultEventsReuseProvider } from "@hooks/useReusableFaultEvents";
+import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 import { FaultEvent } from "@models/eventModel";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 interface Props {
   open: boolean;
@@ -25,6 +26,7 @@ interface Props {
 const FaultEventDialog = ({ open, eventIri, treeUri, onCreated, onClose }: Props) => {
   const [showSnackbar] = useSnackbar();
 
+  const [selectedSystem] = useSelectedSystem();
   const useFormMethods = useForm({ resolver: yupResolver(schema) });
   const { handleSubmit, formState } = useFormMethods;
   const { isSubmitting } = formState;
@@ -48,9 +50,9 @@ const FaultEventDialog = ({ open, eventIri, treeUri, onCreated, onClose }: Props
           Create Event
         </DialogTitle>
         <DialogContent dividers>
-          <FaultEventsReuseProvider treeUri={treeUri}>
+          <ReusableFaultEventsProvider treeUri={treeUri} systemUri={selectedSystem?.iri}>
             <FaultEventCreation useFormMethods={useFormMethods} eventReusing={true} />
-          </FaultEventsReuseProvider>
+          </ReusableFaultEventsProvider>
         </DialogContent>
         <DialogActions>
           <Button disabled={isSubmitting} color="primary" onClick={handleSubmit(handleCreateEvent)}>

src/components/dialog/faultTree/FaultTreeDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Button, Dialog, TextField } from "@mui/material";
 import { DialogTitle } from "@components/materialui/dialog/DialogTitle";
 import { DialogContent } from "@components/materialui/dialog/DialogContent";
@@ -12,7 +12,7 @@ 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 { FaultEventsReuseProvider } from "@hooks/useReusableFaultEvents";
+import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 import { useTranslation } from "react-i18next";
 import useStyles from "@components/dialog/faultTree/FaultTreeDialog.styles";
 import {useSelectedSystem} from "@hooks/useSelectedSystem";
@@ -35,7 +35,8 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
 
     // TODO: Add full system from System Context Provider
     const faultTree = {
-      name: values.faultTreeName,
+      name: rootEvent.name,
+      system: selectedSystem,
       manifestingEvent: rootEvent,
     } as FaultTree;
 
@@ -64,9 +65,9 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
           {...register("faultTreeName")}
           helperText={!!useFormMethods.formState.errors.faultTreeName && t("newFtaModal.noSystemError")}
         />
-        <FaultEventsReuseProvider>
+        <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
           <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={true} />
-        </FaultEventsReuseProvider>
+        </ReusableFaultEventsProvider>
       </DialogContent>
       <DialogActions>
         <Button disabled={processing} color="primary" onClick={handleSubmit(handleCreateFaultTree)}>

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

@@ -13,7 +13,7 @@ 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 { FaultEventsReuseProvider } from "@hooks/useReusableFaultEvents";
+import { ReusableFaultEventsProvider } from "@hooks/useReusableFaultEvents";
 
 interface Props {
   data?: FaultEvent;
@@ -54,9 +54,9 @@ const FaultEventShapeToolPane = ({ data, onEventUpdated, refreshTree }: Props) =
     };
 
     editorPane = (
-      <FaultEventsReuseProvider>
+      <ReusableFaultEventsProvider>
         <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={true}/>
-      </FaultEventsReuseProvider>
+      </ReusableFaultEventsProvider>
     );
   } else {
     defaultValues = {};

src/hooks/useReusableFaultEvents.tsx

@@ -4,7 +4,6 @@ import { createContext, useContext, useEffect, useState } from "react";
 import { FaultEvent } from "@models/eventModel";
 import { axiosSource } from "@services/utils/axiosUtils";
 import { ChildrenProps } from "@utils/hookUtils";
-import * as faultEventService from "@services/faultEventService";
 import * as faultTreeService from "@services/faultTreeService";
 import { SnackbarType, useSnackbar } from "./useSnackbar";
 
@@ -18,21 +17,26 @@ export const useReusableFaultEvents = () => {
 
 interface Props extends ChildrenProps {
   treeUri?: string;
+  systemUri?: string;
 }
 
-export const FaultEventsReuseProvider = ({ children, treeUri }: Props) => {
+export const ReusableFaultEventsProvider = ({ children, treeUri, systemUri }: Props) => {
   const [_faultEvents, _setFaultEvents] = useState<FaultEvent[]>([]);
   const [showSnackbar] = useSnackbar();
 
   useEffect(() => {
     const fetchFaultEvents = async () => {
-      const eventsPromise = treeUri ? faultTreeService.getReusableEvents(treeUri) : faultEventService.findAll();
+      if(!systemUri)
+        return;
 
+      const eventsPromise = treeUri
+        ? faultTreeService.getAllReusableEvents(systemUri, treeUri)
+        : faultTreeService.getRootReusableEvents(systemUri);
       eventsPromise.then((value) => _setFaultEvents(value)).catch((reason) => showSnackbar(reason, SnackbarType.ERROR));
     };
 
     fetchFaultEvents();
-    return () => axiosSource.cancel("FaultEventsReuseProvider - unmounting");
+    return () => axiosSource.cancel("ReusableFaultEventsProvider - unmounting");
   }, []);
 
   return <faultEventsContext.Provider value={_faultEvents}>{children}</faultEventsContext.Provider>;

src/services/faultTreeService.tsx

@@ -88,16 +88,31 @@ export const remove = async (faultTreeIri: string): Promise<void> => {
   }
 };
 
-export const getReusableEvents = async (faultTreeIri: string): Promise<FaultEvent[]> => {
+export const getRootReusableEvents = async (systemIri: string): Promise<FaultEvent[]> => {
   try {
-    const fragment = extractFragment(faultTreeIri);
-    const response = await axiosClient.get(`/faultTrees/${fragment}/reusableEvents`, {
+    const fragment = extractFragment(systemIri);
+    const response = await axiosClient.get(`/faultEvents/top-fault-events/${fragment}`, {
+      headers: authHeaders(),
+    });
+
+    return JsonLdUtils.compactAndResolveReferencesAsArray<FaultEvent>(response.data, EVENT_CONTEXT);
+  } catch (e) {
+    console.log("Fault Tree Service - Failed to call /getRootReusableEvents");
+    const defaultMessage = "Failed to find reusable fault events";
+    return new Promise((resolve, reject) => reject(handleServerError(e, defaultMessage)));
+  }
+};
+
+export const getAllReusableEvents = async (systemIri: string, faultTreeIri: string): Promise<FaultEvent[]> => {
+  try {
+    const fragment = extractFragment(systemIri);
+    const response = await axiosClient.get(`/faultEvents/all-fault-events/${fragment}`, {
       headers: authHeaders(),
     });
 
     return JsonLdUtils.compactAndResolveReferencesAsArray<FaultEvent>(response.data, EVENT_CONTEXT);
   } catch (e) {
-    console.log("Fault Tree Service - Failed to call /getReusableEvents");
+    console.log("Fault Tree Service - Failed to call /getAllReusableEvents");
     const defaultMessage = "Failed to find reusable fault events";
     return new Promise((resolve, reject) => reject(handleServerError(e, defaultMessage)));
   }