🐛 Convert dependency code to use rq & fix cyclic dep alert

client/src/app/api/models.ts

@@ -144,8 +144,8 @@ export interface Review {
 
 export interface ApplicationDependency {
   id?: number;
-  from: Application;
-  to: Application;
+  from: Ref;
+  to: Ref;
 }
 
 export interface ApplicationAdoptionPlan {

client/src/app/api/rest.ts

@@ -117,28 +117,6 @@ const yamlHeaders = { headers: { Accept: "application/x-yaml" } };
 
 type Direction = "asc" | "desc";
 
-const buildQuery = (params: any) => {
-  const query: string[] = [];
-
-  Object.keys(params).forEach((key) => {
-    const value = (params as any)[key];
-
-    if (value !== undefined && value !== null) {
-      let queryParamValues: string[] = [];
-      if (Array.isArray(value)) {
-        queryParamValues = value;
-      } else {
-        queryParamValues = [value];
-      }
-      queryParamValues.forEach((v) => query.push(`${key}=${v}`));
-    }
-  });
-
-  return query;
-};
-
-// App inventory
-
 export const updateAllApplications = (
   updatePromises: Promise<Application>[]
 ) => {
@@ -147,22 +125,36 @@ export const updateAllApplications = (
     .catch((error) => error);
 };
 
-// Applications Dependencies
+interface DependencyParams {
+  from?: string[];
+  to?: string[];
+}
 
-export const getApplicationDependencies = (): AxiosPromise<
-  ApplicationDependency[]
-> => {
-  return APIClient.get(`${APPLICATION_DEPENDENCY}`, jsonHeaders);
+export const getApplicationDependencies = (
+  params?: DependencyParams
+): Promise<ApplicationDependency[]> => {
+  return axios
+    .get(`${APPLICATION_DEPENDENCY}`, {
+      params,
+      headers: jsonHeaders,
+    })
+    .then((response) => response.data);
 };
 
 export const createApplicationDependency = (
   obj: ApplicationDependency
-): AxiosPromise<ApplicationDependency> => {
-  return APIClient.post(`${APPLICATION_DEPENDENCY}`, obj);
+): Promise<ApplicationDependency> => {
+  return axios
+    .post(`${APPLICATION_DEPENDENCY}`, obj)
+    .then((response) => response.data);
 };
 
-export const deleteApplicationDependency = (id: number): AxiosPromise => {
-  return APIClient.delete(`${APPLICATION_DEPENDENCY}/${id}`);
+export const deleteApplicationDependency = (
+  id: number
+): Promise<ApplicationDependency> => {
+  return axios
+    .delete(`${APPLICATION_DEPENDENCY}/${id}`)
+    .then((response) => response.data);
 };
 
 // Reviews

client/src/app/components/ApplicationDependenciesFormContainer/ApplicationDependenciesForm.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -19,11 +19,12 @@ import { OptionWithValue } from "@app/components/SimpleSelect";
 
 import { Application, ApplicationDependency } from "@app/api/models";
 
-import { FormContext } from "./FormContext";
 import { SelectDependency } from "./SelectDependency";
-import { getAxiosErrorMessage } from "@app/utils/utils";
-import { useFetchApplications } from "@app/queries/applications";
-import useFetchApplicationDependencies from "@app/hooks/useFetchApplicationDependencies/useFetchApplicationDependencies";
+import {
+  useFetchApplicationDependencies,
+  useFetchApplications,
+} from "@app/queries/applications";
+import { toRef } from "@app/utils/model-utils";
 
 const northToStringFn = (value: ApplicationDependency) => value.from.name;
 const southToStringFn = (value: ApplicationDependency) => value.to.name;
@@ -44,90 +45,54 @@ export interface ApplicationDependenciesFormProps {
 export const ApplicationDependenciesForm: React.FC<
   ApplicationDependenciesFormProps
 > = ({ application, onCancel }) => {
-  const {
-    isNorthBeingSaved,
-    isSouthBeingSaved,
-    northSaveError,
-    southSaveError,
-    setIsNorthBeingSaved,
-    setIsSouthBeingSaved,
-    setNorthSaveError,
-    setSouthSaveError,
-  } = useContext(FormContext);
-
   const { t } = useTranslation();
-
-  const [northboundDependencies, setNorthboundDependencies] = useState<
-    OptionWithValue<ApplicationDependency>[]
-  >([]);
-  const [southboundDependencies, setSouthboundDependencies] = useState<
-    OptionWithValue<ApplicationDependency>[]
-  >([]);
-
-  // Dependencies
-
   const {
-    applicationDependencies: northDependencies,
-    isFetching: isFetchingNorthDependencies,
-    fetchError: fetchErrorNorthDependencies,
-    fetchAllApplicationDependencies: fetchAllNorthDependencies,
-  } = useFetchApplicationDependencies();
-
-  const {
-    applicationDependencies: southDependencies,
-    isFetching: isFetchingSouthDependencies,
-    fetchError: fetchErrorSouthDependencies,
-    fetchAllApplicationDependencies: fetchAllSouthDependencies,
-  } = useFetchApplicationDependencies();
-
-  useEffect(() => {
-    fetchAllNorthDependencies({
-      to: [`${application.id}`],
-    });
-  }, [application, fetchAllNorthDependencies]);
-
-  useEffect(() => {
-    fetchAllSouthDependencies({
-      from: [`${application.id}`],
-    });
-  }, [application, fetchAllSouthDependencies]);
-
-  // Applications
+    northboundDependencies,
+    southboundDependencies,
+    isFetching,
+    fetchError,
+    refetch,
+  } = useFetchApplicationDependencies(application?.id);
+  const [southSaveError, setSouthSaveError] = useState<null | string>(null);
+  const [northSaveError, setNorthSaveError] = useState<null | string>(null);
+
+  const [northboundDependenciesOptions, setNorthboundDependenciesOptions] =
+    useState<OptionWithValue<ApplicationDependency>[]>([]);
+  const [southboundDependenciesOptions, setSouthboundDependenciesOptions] =
+    useState<OptionWithValue<ApplicationDependency>[]>([]);
 
   const {
     data: applications,
     isFetching: isFetchingApplications,
     error: fetchErrorApplications,
   } = useFetchApplications();
 
-  // Initial value
-
   useEffect(() => {
-    if (northDependencies) {
-      const north = northDependencies
+    if (northboundDependencies) {
+      const north = northboundDependencies
         .filter((f) => f.to.id === application.id)
         .map((f) => dependencyToOption(f, northToStringFn));
-      setNorthboundDependencies(north);
+      setNorthboundDependenciesOptions(north);
     }
-  }, [application, northDependencies]);
+  }, [application, northboundDependencies]);
 
   useEffect(() => {
-    if (southDependencies) {
-      const south = southDependencies
+    if (southboundDependencies) {
+      const south = southboundDependencies
         .filter((f) => f.from.id === application.id)
         .map((f) => dependencyToOption(f, southToStringFn));
-      setSouthboundDependencies(south);
+      setSouthboundDependenciesOptions(south);
     }
-  }, [application, southDependencies]);
+  }, [application, southboundDependencies]);
 
   const savingMsg = (
     <div className="pf-v5-u-font-size-sm">
       <Spinner size="sm" /> {`${t("message.savingSelection")}...`}
     </div>
   );
-  const existingDependencyMappings = southboundDependencies
+  const existingDependencyMappings = southboundDependenciesOptions
     .map((sbd) => sbd.value.to.id)
-    .concat(northboundDependencies.map((nbd) => nbd.value.from.id));
+    .concat(northboundDependenciesOptions.map((nbd) => nbd.value.from.id));
 
   return (
     <Form>
@@ -148,8 +113,8 @@ export const ApplicationDependenciesForm: React.FC<
           toggleId="northbound-dependencies-toggle"
           fieldId="northbound-dependencies"
           toStringFn={northToStringFn}
-          value={northboundDependencies}
-          setValue={setNorthboundDependencies}
+          value={northboundDependenciesOptions}
+          setValue={setNorthboundDependenciesOptions}
           options={(applications || [])
             .filter((f) => f.id !== application.id)
             .filter((app) => {
@@ -158,24 +123,19 @@ export const ApplicationDependenciesForm: React.FC<
             .map((f) =>
               dependencyToOption({ from: f, to: application }, northToStringFn)
             )}
-          isFetching={isFetchingApplications || isFetchingNorthDependencies}
-          fetchError={fetchErrorApplications || fetchErrorNorthDependencies}
-          isSaving={isNorthBeingSaved}
-          setIsSaving={setIsNorthBeingSaved}
-          saveError={northSaveError}
-          setSaveError={setNorthSaveError}
+          isFetching={isFetchingApplications || isFetching}
+          isSaving={isFetching}
+          setErrorMsg={setNorthSaveError}
         />
-        {northSaveError &&
-          isNorthBeingSaved === getAxiosErrorMessage(northSaveError) && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem>{savingMsg}</HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
+        {northSaveError && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem>{northSaveError}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
       <FormGroup
-        // t("terms.southboundDependencies")
         label={t("composed.add", {
           what: t("terms.southboundDependencies").toLowerCase(),
         })}
@@ -187,31 +147,39 @@ export const ApplicationDependenciesForm: React.FC<
           fieldId="southbound-dependencies"
           toggleId="southbound-dependencies-toggle"
           toStringFn={southToStringFn}
-          value={southboundDependencies}
-          setValue={setSouthboundDependencies}
+          value={southboundDependenciesOptions}
+          setValue={setSouthboundDependenciesOptions}
           options={(applications || [])
-            .filter((f) => f.id !== application.id)
-            .filter((app) => {
-              return !existingDependencyMappings?.includes(app.id);
+            .filter(
+              (app) =>
+                app.id !== application.id &&
+                !existingDependencyMappings?.includes(app.id)
+            )
+            .map((app) => {
+              const fromApplicationRef = toRef(application);
+              const toApplicationRef = toRef(app);
+
+              if (fromApplicationRef && toApplicationRef) {
+                return dependencyToOption(
+                  { from: fromApplicationRef, to: toApplicationRef },
+                  southToStringFn
+                );
+              } else {
+                return null;
+              }
             })
-            .map((f) =>
-              dependencyToOption({ from: application, to: f }, southToStringFn)
-            )}
-          isFetching={isFetchingApplications || isFetchingSouthDependencies}
-          fetchError={fetchErrorApplications || fetchErrorSouthDependencies}
-          isSaving={isSouthBeingSaved}
-          setIsSaving={setIsSouthBeingSaved}
-          saveError={southSaveError}
-          setSaveError={setSouthSaveError}
+            .filter(Boolean)}
+          isFetching={isFetchingApplications || isFetching}
+          isSaving={isFetching}
+          setErrorMsg={setSouthSaveError}
         />
-        {southSaveError &&
-          isSouthBeingSaved === getAxiosErrorMessage(southSaveError) && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem>{savingMsg}</HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
+        {southSaveError && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem>{southSaveError}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
 
       <ActionGroup>
@@ -221,7 +189,7 @@ export const ApplicationDependenciesForm: React.FC<
           aria-label="close"
           variant={ButtonVariant.primary}
           onClick={onCancel}
-          isDisabled={isNorthBeingSaved || isSouthBeingSaved}
+          isDisabled={isFetching}
         >
           {t("actions.close")}
         </Button>