Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ BusinessServices: Update Notification and refactors update/create modal and queries #1210

Merged
merged 4 commits into from
Jul 27, 2023
Merged

✨ BusinessServices: Update Notification and refactors update/create modal and queries #1210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5e49a61
BusinessServiceForm to use React Query
gildub Jul 25, 2023
798dc2b
cleanup
gildub Jul 25, 2023
0fbd2d5
Replace <Array> with [] type for consistency
gildub Jul 26, 2023
b10c025
Cleaner params
gildub Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions client/src/app/api/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
54 changes: 24 additions & 30 deletions client/src/app/api/rest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -214,7 +186,7 @@ export const getApplicationById = (
return APIClient.get(`${APPLICATIONS}/${id}`);
};

//
// Applications Dependencies

export const getApplicationDependencies = (): AxiosPromise<
ApplicationDependency[]
Expand All @@ -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}`);
Expand Down Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to see a more descriptive param name here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ibolton336, the entire rest.ts file is using obj as parameter for passing the payload.
I don't see the gain to explicitly name the payload but that might be opinionated.
And if we do that then we're going to be inconsistent across the file.

): 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[]> =>
Expand Down
91 changes: 33 additions & 58 deletions client/src/app/pages/controls/business-services/business-services.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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,
Expand All @@ -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({
Expand Down Expand Up @@ -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)}
/>
),
Expand All @@ -194,10 +194,6 @@ export const BusinessServices: React.FC = () => {
});
});

const editRow = (row: BusinessService) => {
setRowToUpdate(row);
};

const deleteRow = (row: BusinessService) => {
setBusinessServiceIdToDelete(row.id);
setIsConfirmDialogOpen(true);
Expand All @@ -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 (
Expand Down Expand Up @@ -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>
Expand All @@ -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", {
Expand Down
Loading