✨ BusinessServices: Update Notification and refactors update/create m…

…odal and queries (#1210) While resolving the related notification issues (see associated MTA-1024) this also refactors create/update modal and tries to bring more consistency. Includes following changes : - Push edit/create notifications down to BusinessServiceForm - Use onClose to replace onSave and onCancel - Replace REST functions to use axios instead of deprecated APIClient(). - Use React Query mutations instead of legacy queries - Consolidate New/Edit Modal duplication Partially address https://issues.redhat.com/browse/MTA-1024
konveyor · Jul 27, 2023 · 864658d · 864658d
1 parent 97005b7
commit 864658d
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 208 deletions.
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -1,5 +1,3 @@
-import { BusinessServiceForm } from "@app/pages/controls/business-services/components/business-service-form";
-
 export type New<T extends { id: number }> = Omit<T, "id">;
 
 export interface HubFilter {

diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -135,34 +135,6 @@ const buildQuery = (params: any) => {
   return query;
 };
 
-// Business services
-
-export const getBusinessServices = (): AxiosPromise<Array<BusinessService>> => {
-  return APIClient.get(`${BUSINESS_SERVICES}`, jsonHeaders);
-};
-
-export const deleteBusinessService = (id: number | string): AxiosPromise => {
-  return APIClient.delete(`${BUSINESS_SERVICES}/${id}`);
-};
-
-export const createBusinessService = (
-  obj: New<BusinessService>
-): AxiosPromise<BusinessService> => {
-  return APIClient.post(`${BUSINESS_SERVICES}`, obj);
-};
-
-export const updateBusinessService = (
-  obj: BusinessService
-): AxiosPromise<BusinessService> => {
-  return APIClient.put(`${BUSINESS_SERVICES}/${obj.id}`, obj);
-};
-
-export const getBusinessServiceById = (
-  id: number | string
-): AxiosPromise<BusinessService> => {
-  return APIClient.get(`${BUSINESS_SERVICES}/${id}`);
-};
-
 // Job functions
 
 export enum JobFunctionSortBy {
@@ -214,7 +186,7 @@ export const getApplicationById = (
   return APIClient.get(`${APPLICATIONS}/${id}`);
 };
 
-//
+// Applications Dependencies
 
 export const getApplicationDependencies = (): AxiosPromise<
   ApplicationDependency[]
@@ -232,7 +204,7 @@ export const deleteApplicationDependency = (id: number): AxiosPromise => {
   return APIClient.delete(`${APPLICATION_DEPENDENCY}/${id}`);
 };
 
-//
+// Reviews
 
 export const getReviews = (): AxiosPromise<Review[]> => {
   return APIClient.get(`${REVIEWS}`);
@@ -721,6 +693,28 @@ export const updateStakeholderGroup = (
 ): Promise<StakeholderGroup> =>
   axios.put(`${STAKEHOLDER_GROUPS}/${obj.id}`, obj);
 
+// Business services
+
+export const getBusinessServices = (): Promise<BusinessService[]> =>
+  axios.get(BUSINESS_SERVICES).then((response) => response.data);
+
+export const deleteBusinessService = (
+  id: number | string
+): Promise<BusinessService> => axios.delete(`${BUSINESS_SERVICES}/${id}`);
+
+export const createBusinessService = (
+  obj: New<BusinessService>
+): Promise<BusinessService> => axios.post(BUSINESS_SERVICES, obj);
+
+export const updateBusinessService = (
+  obj: BusinessService
+): Promise<BusinessService> => axios.put(`${BUSINESS_SERVICES}/${obj.id}`, obj);
+
+export const getBusinessServiceById = (
+  id: number | string
+): Promise<BusinessService> =>
+  axios.get(`${BUSINESS_SERVICES}/${id}`).then((response) => response.data);
+
 // Tags
 
 export const getTags = (): Promise<Tag[]> =>

diff --git a/client/src/app/pages/controls/business-services/business-services.tsx b/client/src/app/pages/controls/business-services/business-services.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
-import { AxiosError, AxiosResponse } from "axios";
+import React from "react";
+import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-
 import {
   Button,
   ButtonVariant,
+  Modal,
   ToolbarGroup,
   ToolbarItem,
 } from "@patternfly/react-core";
@@ -24,12 +24,9 @@ import {
   NoDataEmptyState,
   ConfirmDialog,
 } from "@app/shared/components";
-
 import { BusinessService } from "@app/api/models";
 import { getAxiosErrorMessage } from "@app/utils/utils";
-
-import { NewBusinessServiceModal } from "./components/new-business-service-modal";
-import { UpdateBusinessServiceModal } from "./components/update-business-service-modal";
+import { BusinessServiceForm } from "./components/business-service-form";
 import { useLegacyPaginationState } from "@app/shared/hooks/useLegacyPaginationState";
 import {
   FilterCategory,
@@ -50,17 +47,20 @@ const ENTITY_FIELD = "entity";
 
 export const BusinessServices: React.FC = () => {
   const { t } = useTranslation();
+  const { pushNotification } = React.useContext(NotificationsContext);
 
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] =
     React.useState<Boolean>(false);
 
   const [businessServiceIdToDelete, setBusinessServiceIdToDelete] =
     React.useState<number>();
 
-  const { pushNotification } = React.useContext(NotificationsContext);
-
-  const [isNewModalOpen, setIsNewModalOpen] = useState(false);
-  const [rowToUpdate, setRowToUpdate] = useState<BusinessService>();
+  const [createUpdateModalState, setCreateUpdateModalState] = React.useState<
+    "create" | BusinessService | null
+  >(null);
+  const isCreateUpdateModalOpen = createUpdateModalState !== null;
+  const businessServiceToUpdate =
+    createUpdateModalState !== "create" ? createUpdateModalState : null;
 
   const onDeleteBusinessServiceSuccess = (response: any) => {
     pushNotification({
@@ -185,7 +185,7 @@ export const BusinessServices: React.FC = () => {
             <AppTableActionButtons
               isDeleteEnabled={isAssignedToApplication}
               tooltipMessage="Cannot remove a business service associated with application(s)"
-              onEdit={() => editRow(item)}
+              onEdit={() => setCreateUpdateModalState(item)}
               onDelete={() => deleteRow(item)}
             />
           ),
@@ -194,10 +194,6 @@ export const BusinessServices: React.FC = () => {
     });
   });
 
-  const editRow = (row: BusinessService) => {
-    setRowToUpdate(row);
-  };
-
   const deleteRow = (row: BusinessService) => {
     setBusinessServiceIdToDelete(row.id);
     setIsConfirmDialogOpen(true);
@@ -209,39 +205,11 @@ export const BusinessServices: React.FC = () => {
     setFilterValues({});
   };
 
-  // Create Modal
-
-  const handleOnOpenCreateNewBusinessServiceModal = () => {
-    setIsNewModalOpen(true);
-  };
-
-  const handleOnBusinessServiceCreated = (
-    response: AxiosResponse<BusinessService>
-  ) => {
-    setIsNewModalOpen(false);
-    refetch();
-    pushNotification({
-      title: t("toastr.success.saveWhat", {
-        what: response.data.name,
-        type: t("terms.businessService"),
-      }),
-      variant: "success",
-    });
-  };
-
-  const handleOnCancelCreateBusinessService = () => {
-    setIsNewModalOpen(false);
-  };
-
   // Update Modal
 
-  const handleOnBusinessServiceUpdated = () => {
-    setRowToUpdate(undefined);
-    refetch();
-  };
-
-  const handleOnCancelUpdateBusinessService = () => {
-    setRowToUpdate(undefined);
+  const closeCreateUpdateModal = () => {
+    setCreateUpdateModalState(null);
+    refetch;
   };
 
   return (
@@ -281,7 +249,7 @@ export const BusinessServices: React.FC = () => {
                     id="create-business-service"
                     aria-label="Create business service"
                     variant={ButtonVariant.primary}
-                    onClick={handleOnOpenCreateNewBusinessServiceModal}
+                    onClick={() => setCreateUpdateModalState("create")}
                   >
                     {t("actions.createNew")}
                   </Button>
@@ -304,16 +272,23 @@ export const BusinessServices: React.FC = () => {
         />
       </ConditionalRender>
 
-      <NewBusinessServiceModal
-        isOpen={isNewModalOpen}
-        onSaved={handleOnBusinessServiceCreated}
-        onCancel={handleOnCancelCreateBusinessService}
-      />
-      <UpdateBusinessServiceModal
-        businessService={rowToUpdate}
-        onSaved={handleOnBusinessServiceUpdated}
-        onCancel={handleOnCancelUpdateBusinessService}
-      />
+      <Modal
+        id="create-edit-stakeholder-modal"
+        title={t(
+          businessServiceToUpdate ? "dialog.title.update" : "dialog.title.new",
+          {
+            what: t("terms.businessService").toLowerCase(),
+          }
+        )}
+        variant="medium"
+        isOpen={isCreateUpdateModalOpen}
+        onClose={closeCreateUpdateModal}
+      >
+        <BusinessServiceForm
+          businessService={businessServiceToUpdate}
+          onClose={closeCreateUpdateModal}
+        />
+      </Modal>
       {isConfirmDialogOpen && (
         <ConfirmDialog
           title={t("dialog.title.delete", {