diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index ba3c3a7c..ed2c6bc0 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -61,21 +61,7 @@ "importApplicationFile": "Import application file", "leavePage": "Leave page", "new": "New {{what}}", - "newApplication": "New application", - "newBusinessService": "New business service", - "newJobFunction": "New job function", - "newStakeholder": "New stakeholder", - "newStakeholderGroup": "New stakeholder group", - "newTag": "New Tag", - "newTagType": "New tag type", - "update": "Update {{what}}", - "updateApplication": "Update application", - "updateBusinessService": "Update business service", - "updateJobFunction": "Update job function", - "updateStakeholder": "Update stakeholder", - "updateStakeholderGroup": "Update stakeholder group", - "updateTag": "Update tag", - "updateTagType": "Update tag type" + "update": "Update {{what}}" } }, "efforts": { diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index a199d2d7..201a6a35 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -61,21 +61,7 @@ "importApplicationFile": "Importar archivo con aplicaciones", "leavePage": "Salir de página", "new": "Nuevo(a) {{what}}", - "newApplication": "Nueva aplicación", - "newBusinessService": "Nuevo servicio de negocio", - "newJobFunction": "Nueva función laboral", - "newStakeholder": "Nuevo interesado", - "newStakeholderGroup": "Nuevo grupo de interesados", - "newTag": "Nueva etiqueta", - "newTagType": "Nuevo tipo de etiqueta", - "update": "Actualizar {{what}}", - "updateApplication": "Actualizar aplicación", - "updateBusinessService": "Actualizar servicio de negocio", - "updateJobFunction": "Actualizar función laboral", - "updateStakeholder": "Actualizar interesado", - "updateStakeholderGroup": "Actualizar grupo de interesados", - "updateTag": "Actualizar etiqueta", - "updateTagType": "Actualizar tipo de etiqueta" + "update": "Actualizar {{what}}" } }, "efforts": { diff --git a/src/pages/application-inventory/application-list/components/new-application-modal/index.ts b/src/pages/application-inventory/application-list/components/new-application-modal/index.ts deleted file mode 100644 index b144d99a..00000000 --- a/src/pages/application-inventory/application-list/components/new-application-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewApplicationModal } from "./new-application-modal"; diff --git a/src/pages/application-inventory/application-list/components/new-application-modal/new-application-modal.tsx b/src/pages/application-inventory/application-list/components/new-application-modal/new-application-modal.tsx deleted file mode 100644 index bd8ada7b..00000000 --- a/src/pages/application-inventory/application-list/components/new-application-modal/new-application-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Application } from "api/models"; - -import { ApplicationForm } from "../application-form"; - -export interface NewApplicationModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewApplicationModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/application-inventory/application-list/components/update-application-modal/index.ts b/src/pages/application-inventory/application-list/components/update-application-modal/index.ts deleted file mode 100644 index 8369d48c..00000000 --- a/src/pages/application-inventory/application-list/components/update-application-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateApplicationModal } from "./update-application-modal"; diff --git a/src/pages/application-inventory/application-list/components/update-application-modal/update-application-modal.tsx b/src/pages/application-inventory/application-list/components/update-application-modal/update-application-modal.tsx deleted file mode 100644 index 4e46f830..00000000 --- a/src/pages/application-inventory/application-list/components/update-application-modal/update-application-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Application } from "api/models"; - -import { ApplicationForm } from "../application-form"; - -export interface UpdateApplicationModalProps { - application?: Application; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateApplicationModal: React.FC = ({ - application, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/business-services/business-services.tsx b/src/pages/controls/business-services/business-services.tsx index c314814d..da3587ea 100644 --- a/src/pages/controls/business-services/business-services.tsx +++ b/src/pages/controls/business-services/business-services.tsx @@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next"; import { Button, ButtonVariant, + Modal, + ModalVariant, ToolbarChip, ToolbarGroup, ToolbarItem, @@ -34,6 +36,7 @@ import { useTableControls, useFetchBusinessServices, useDelete, + useEntityModal, } from "shared/hooks"; import { BusinessService, SortByQuery } from "api/models"; @@ -44,8 +47,7 @@ import { } from "api/rest"; import { getAxiosErrorMessage } from "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"; enum FilterKey { NAME = "name", @@ -106,8 +108,13 @@ export const BusinessServices: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isBusinessServiceModalOpen, + data: businessServiceToUpdate, + create: openCreateBusinessServiceModal, + update: openUpdateBusinessServiceModal, + close: closeBusinessServiceModal, + } = useEntityModal(); const { requestDelete: requestDeleteBusinessService, @@ -227,7 +234,7 @@ export const BusinessServices: React.FC = () => { // ]; const editRow = (row: BusinessService) => { - setRowToUpdate(row); + openUpdateBusinessServiceModal(row); }; const deleteRow = (row: BusinessService) => { @@ -296,41 +303,25 @@ export const BusinessServices: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewBusinessServiceModal = () => { - setIsNewModalOpen(true); - }; + // Create/update Modal - const handleOnBusinessServiceCreated = ( + const handleOnBusinessServiceFormSaved = ( response: AxiosResponse ) => { - setIsNewModalOpen(false); + if (!businessServiceToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.businessService') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.businessService").toLowerCase(), + }) + ) + ); + } + + closeBusinessServiceModal(); refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.name, - type: "business service", - }) - ) - ); - }; - - const handleOnCancelCreateBusinessService = () => { - setIsNewModalOpen(false); - }; - - // Update Modal - - const handleOnBusinessServiceUpdated = () => { - setRowToUpdate(undefined); - refreshTable(); - }; - - const handleOnCancelUpdateBusinessService = () => { - setRowToUpdate(undefined); }; return ( @@ -377,7 +368,7 @@ export const BusinessServices: React.FC = () => { type="button" aria-label="create-business-service" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewBusinessServiceModal} + onClick={openCreateBusinessServiceModal} > {t("actions.createNew")} @@ -401,16 +392,23 @@ export const BusinessServices: React.FC = () => { /> - - + + + ); }; diff --git a/src/pages/controls/business-services/components/new-business-service-modal/index.ts b/src/pages/controls/business-services/components/new-business-service-modal/index.ts deleted file mode 100644 index 449dd726..00000000 --- a/src/pages/controls/business-services/components/new-business-service-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewBusinessServiceModal } from "./new-business-service-modal"; diff --git a/src/pages/controls/business-services/components/new-business-service-modal/new-business-service-modal.tsx b/src/pages/controls/business-services/components/new-business-service-modal/new-business-service-modal.tsx deleted file mode 100644 index eeb942fd..00000000 --- a/src/pages/controls/business-services/components/new-business-service-modal/new-business-service-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { BusinessService } from "api/models"; - -import { BusinessServiceForm } from "../business-service-form"; - -export interface NewBusinessServiceModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewBusinessServiceModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/business-services/components/update-business-service-modal/index.ts b/src/pages/controls/business-services/components/update-business-service-modal/index.ts deleted file mode 100644 index 4f3983d9..00000000 --- a/src/pages/controls/business-services/components/update-business-service-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateBusinessServiceModal } from "./update-business-service-modal"; diff --git a/src/pages/controls/business-services/components/update-business-service-modal/update-business-service-modal.tsx b/src/pages/controls/business-services/components/update-business-service-modal/update-business-service-modal.tsx deleted file mode 100644 index 6963c310..00000000 --- a/src/pages/controls/business-services/components/update-business-service-modal/update-business-service-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { BusinessService } from "api/models"; - -import { BusinessServiceForm } from "../business-service-form"; - -export interface UpdateBusinessServiceModalProps { - businessService?: BusinessService; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateBusinessServiceModal: React.FC = ({ - businessService, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/job-functions/components/new-job-function-modal/index.ts b/src/pages/controls/job-functions/components/new-job-function-modal/index.ts deleted file mode 100644 index c4039edd..00000000 --- a/src/pages/controls/job-functions/components/new-job-function-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewJobFunctionModal } from "./new-job-function-modal"; diff --git a/src/pages/controls/job-functions/components/new-job-function-modal/new-job-function-modal.tsx b/src/pages/controls/job-functions/components/new-job-function-modal/new-job-function-modal.tsx deleted file mode 100644 index 347c3463..00000000 --- a/src/pages/controls/job-functions/components/new-job-function-modal/new-job-function-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { JobFunction } from "api/models"; - -import { JobFunctionForm } from "../job-function-form"; - -export interface NewJobFunctionModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewJobFunctionModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/job-functions/components/update-job-function-modal/index.ts b/src/pages/controls/job-functions/components/update-job-function-modal/index.ts deleted file mode 100644 index 7238d6ea..00000000 --- a/src/pages/controls/job-functions/components/update-job-function-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateJobFunctionModal } from "./update-job-function-modal"; diff --git a/src/pages/controls/job-functions/components/update-job-function-modal/update-job-function-modal.tsx b/src/pages/controls/job-functions/components/update-job-function-modal/update-job-function-modal.tsx deleted file mode 100644 index 35a5ba96..00000000 --- a/src/pages/controls/job-functions/components/update-job-function-modal/update-job-function-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { JobFunction } from "api/models"; - -import { JobFunctionForm } from "../job-function-form"; - -export interface UpdateJobFunctionModalProps { - jobFunction?: JobFunction; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateJobFunctionModal: React.FC = ({ - jobFunction, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/job-functions/job-functions.tsx b/src/pages/controls/job-functions/job-functions.tsx index 8a2122f9..042421eb 100644 --- a/src/pages/controls/job-functions/job-functions.tsx +++ b/src/pages/controls/job-functions/job-functions.tsx @@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next"; import { Button, ButtonVariant, + Modal, + ModalVariant, ToolbarChip, ToolbarGroup, ToolbarItem, @@ -34,6 +36,7 @@ import { useTableControls, useDelete, useFetchJobFunctions, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; @@ -44,8 +47,7 @@ import { } from "api/rest"; import { SortByQuery, JobFunction } from "api/models"; -import { NewJobFunctionModal } from "./components/new-job-function-modal"; -import { UpdateJobFunctionModal } from "./components/update-job-function-modal"; +import { JobFunctionForm } from "./components/job-function-form"; enum FilterKey { NAME = "name", @@ -89,8 +91,13 @@ export const JobFunctions: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isJobFunctionModalOpen, + data: jobFunctionToUpdate, + create: openCreateJobFunctionModal, + update: openUpdateJobFunctionModal, + close: closeJobFunctionModal, + } = useEntityModal(); const { requestDelete: requestDeleteJobFunction } = useDelete({ onDelete: (t: JobFunction) => deleteJobFunction(t.id!), @@ -159,7 +166,7 @@ export const JobFunctions: React.FC = () => { { title: ( setRowToUpdate(item)} + onEdit={() => editRow(item)} onDelete={() => deleteRow(item)} /> ), @@ -170,6 +177,10 @@ export const JobFunctions: React.FC = () => { // Rows + const editRow = (row: JobFunction) => { + openUpdateJobFunctionModal(row); + }; + const deleteRow = (row: JobFunction) => { dispatch( confirmDialogActions.openDialog({ @@ -236,41 +247,27 @@ export const JobFunctions: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateModal = () => { - setIsNewModalOpen(true); - }; - - const handleOnCreatedNew = (response: AxiosResponse) => { - setIsNewModalOpen(false); - refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.role, - type: "job function", - }) - ) - ); - }; - - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; + // Create/update Modal - // Update Modal - - const handleOnJobFunctionUpdated = () => { - setRowToUpdate(undefined); + const handleOnJobFunctionFormSaved = ( + response: AxiosResponse + ) => { + if (!jobFunctionToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.jobFunction') + t("toastr.success.added", { + what: response.data.role, + type: t("terms.jobFunction").toLowerCase(), + }) + ) + ); + } + + closeJobFunctionModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-job-function" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateModal} + onClick={openCreateJobFunctionModal} > {t("actions.createNew")} @@ -338,16 +335,23 @@ export const JobFunctions: React.FC = () => { /> - - + + + ); }; diff --git a/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/index.ts b/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/index.ts deleted file mode 100644 index 6c56d9d0..00000000 --- a/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewStakeholderGroupModal } from "./new-stakeholder-group-modal"; diff --git a/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/new-stakeholder-group-modal.tsx b/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/new-stakeholder-group-modal.tsx deleted file mode 100644 index 905ee264..00000000 --- a/src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/new-stakeholder-group-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { StakeholderGroup } from "api/models"; - -import { StakeholderGroupForm } from "../stakeholder-group-form"; - -export interface NewStakeholderGroupModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewStakeholderGroupModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/index.ts b/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/index.ts deleted file mode 100644 index 44ea1f7e..00000000 --- a/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateStakeholderGroupModal } from "./update-stakeholder-group-modal"; diff --git a/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/update-stakeholder-group-modal.tsx b/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/update-stakeholder-group-modal.tsx deleted file mode 100644 index e033acf0..00000000 --- a/src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/update-stakeholder-group-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { StakeholderGroup } from "api/models"; - -import { StakeholderGroupForm } from "../stakeholder-group-form"; - -export interface UpdateStakeholderGroupModalProps { - stakeholderGroup?: StakeholderGroup; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateStakeholderGroupModal: React.FC = ({ - stakeholderGroup, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx index 0d2a43aa..c7eff122 100644 --- a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx +++ b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx @@ -10,6 +10,8 @@ import { DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, + Modal, + ModalVariant, ToolbarChip, ToolbarGroup, ToolbarItem, @@ -42,6 +44,7 @@ import { useTableControls, useFetchStakeholderGroups, useDelete, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; @@ -52,8 +55,7 @@ import { } from "api/rest"; import { StakeholderGroup, SortByQuery } from "api/models"; -import { NewStakeholderGroupModal } from "./components/new-stakeholder-group-modal"; -import { UpdateStakeholderGroupModal } from "./components/update-stakeholder-group-modal"; +import { StakeholderGroupForm } from "./components/stakeholder-group-form"; enum FilterKey { NAME = "name", @@ -114,8 +116,13 @@ export const StakeholderGroups: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isStakeholderGroupModalOpen, + data: stakeholderGroupToUpdate, + create: openCreateStakeholderGroupModal, + update: openUpdateStakeholderGroupModal, + close: closeStakeholderGroupModal, + } = useEntityModal(); const { requestDelete: requestDeleteStakeholderGroup, @@ -255,7 +262,7 @@ export const StakeholderGroups: React.FC = () => { }; const editRow = (row: StakeholderGroup) => { - setRowToUpdate(row); + openUpdateStakeholderGroupModal(row); }; const deleteRow = (row: StakeholderGroup) => { @@ -324,41 +331,27 @@ export const StakeholderGroups: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewModal = () => { - setIsNewModalOpen(true); - }; - - const handleOnCreatedNew = (response: AxiosResponse) => { - setIsNewModalOpen(false); - refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.name, - type: "stakeholder group", - }) - ) - ); - }; - - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; + // Create/update Modal - // Update Modal + const handleOnStakeholderGroupFormSaved = ( + response: AxiosResponse + ) => { + if (!stakeholderGroupToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.stakeholderGroup') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.stakeholderGroup").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeStakeholderGroupModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-stakeholder-group" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateStakeholderGroupModal} > {t("actions.createNew")} @@ -428,16 +421,26 @@ export const StakeholderGroups: React.FC = () => { /> - - + + + ); }; diff --git a/src/pages/controls/stakeholders/components/new-stakeholder-modal/index.ts b/src/pages/controls/stakeholders/components/new-stakeholder-modal/index.ts deleted file mode 100644 index 80503eea..00000000 --- a/src/pages/controls/stakeholders/components/new-stakeholder-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewStakeholderModal } from "./new-stakeholder-modal"; diff --git a/src/pages/controls/stakeholders/components/new-stakeholder-modal/new-stakeholder-modal.tsx b/src/pages/controls/stakeholders/components/new-stakeholder-modal/new-stakeholder-modal.tsx deleted file mode 100644 index cfc179f2..00000000 --- a/src/pages/controls/stakeholders/components/new-stakeholder-modal/new-stakeholder-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Stakeholder } from "api/models"; - -import { StakeholderForm } from "../stakeholder-form"; - -export interface NewStakeholderModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewStakeholderModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/stakeholders/components/update-stakeholder-modal/index.ts b/src/pages/controls/stakeholders/components/update-stakeholder-modal/index.ts deleted file mode 100644 index a15855c4..00000000 --- a/src/pages/controls/stakeholders/components/update-stakeholder-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateStakeholderModal } from "./update-stakeholder-modal"; diff --git a/src/pages/controls/stakeholders/components/update-stakeholder-modal/update-stakeholder-modal.tsx b/src/pages/controls/stakeholders/components/update-stakeholder-modal/update-stakeholder-modal.tsx deleted file mode 100644 index fc4531a6..00000000 --- a/src/pages/controls/stakeholders/components/update-stakeholder-modal/update-stakeholder-modal.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Stakeholder } from "api/models"; - -import { StakeholderForm } from "../stakeholder-form"; - -export interface UpdateStakeholderModalProps { - stakeholder?: Stakeholder; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateStakeholderModal: React.FC = ({ - stakeholder, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/stakeholders/stakeholders.tsx b/src/pages/controls/stakeholders/stakeholders.tsx index 828b0301..92d42ff8 100644 --- a/src/pages/controls/stakeholders/stakeholders.tsx +++ b/src/pages/controls/stakeholders/stakeholders.tsx @@ -10,6 +10,8 @@ import { DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, + Modal, + ModalVariant, ToolbarChip, ToolbarGroup, ToolbarItem, @@ -42,6 +44,7 @@ import { useTableControls, useFetchStakeholders, useDelete, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; @@ -52,8 +55,7 @@ import { } from "api/rest"; import { Stakeholder, SortByQuery } from "api/models"; -import { NewStakeholderModal } from "./components/new-stakeholder-modal"; -import { UpdateStakeholderModal } from "./components/update-stakeholder-modal"; +import { StakeholderForm } from "./components/stakeholder-form"; enum FilterKey { EMAIL = "email", @@ -125,8 +127,13 @@ export const Stakeholders: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isStakeholderModalOpen, + data: stakeholderToUpdate, + create: openCreateStakeholderModal, + update: openUpdateStakeholderModal, + close: closeStakeholderModal, + } = useEntityModal(); const { requestDelete: requestDeleteStakeholder } = useDelete({ onDelete: (t: Stakeholder) => deleteStakeholder(t.id!), @@ -272,7 +279,7 @@ export const Stakeholders: React.FC = () => { }; const editRow = (row: Stakeholder) => { - setRowToUpdate(row); + openUpdateStakeholderModal(row); }; const deleteRow = (row: Stakeholder) => { @@ -341,41 +348,27 @@ export const Stakeholders: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewModal = () => { - setIsNewModalOpen(true); - }; - - const handleOnCreatedNew = (response: AxiosResponse) => { - setIsNewModalOpen(false); - refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.displayName, - type: "stakeholder", - }) - ) - ); - }; - - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; + // Create/update Modal - // Update Modal + const handleOnStakeholderFormSaved = ( + response: AxiosResponse + ) => { + if (!stakeholderToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.stakeholder') + t("toastr.success.added", { + what: response.data.displayName, + type: t("terms.stakeholder").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeStakeholderModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-stakeholder" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateStakeholderModal} > {t("actions.createNew")} @@ -445,16 +438,23 @@ export const Stakeholders: React.FC = () => { /> - - + + + ); }; diff --git a/src/pages/controls/tags/components/new-tag-modal/index.ts b/src/pages/controls/tags/components/new-tag-modal/index.ts deleted file mode 100644 index f1d49833..00000000 --- a/src/pages/controls/tags/components/new-tag-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewTagModal } from "./new-tag-modal"; diff --git a/src/pages/controls/tags/components/new-tag-modal/new-tag-modal.tsx b/src/pages/controls/tags/components/new-tag-modal/new-tag-modal.tsx deleted file mode 100644 index a612bf28..00000000 --- a/src/pages/controls/tags/components/new-tag-modal/new-tag-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Tag } from "api/models"; - -import { TagForm } from "../tag-form"; - -export interface NewTagModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewTagModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/tags/components/new-tag-type-modal/index.ts b/src/pages/controls/tags/components/new-tag-type-modal/index.ts deleted file mode 100644 index 40519fac..00000000 --- a/src/pages/controls/tags/components/new-tag-type-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewTagTypeModal } from "./new-tag-type-modal"; diff --git a/src/pages/controls/tags/components/new-tag-type-modal/new-tag-type-modal.tsx b/src/pages/controls/tags/components/new-tag-type-modal/new-tag-type-modal.tsx deleted file mode 100644 index ca8c0cdd..00000000 --- a/src/pages/controls/tags/components/new-tag-type-modal/new-tag-type-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { TagType } from "api/models"; - -import { TagTypeForm } from "../tag-type-form"; - -export interface NewTagTypeModalProps { - isOpen: boolean; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const NewTagTypeModal: React.FC = ({ - isOpen, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/tags/components/update-tag-modal/index.ts b/src/pages/controls/tags/components/update-tag-modal/index.ts deleted file mode 100644 index a7325d7d..00000000 --- a/src/pages/controls/tags/components/update-tag-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateTagModal } from "./update-tag-modal"; diff --git a/src/pages/controls/tags/components/update-tag-modal/update-tag-modal.tsx b/src/pages/controls/tags/components/update-tag-modal/update-tag-modal.tsx deleted file mode 100644 index 6e02337a..00000000 --- a/src/pages/controls/tags/components/update-tag-modal/update-tag-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { Tag } from "api/models"; - -import { TagForm } from "../tag-form"; - -export interface UpdateTagModalProps { - tag?: Tag; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateTagModal: React.FC = ({ - tag, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/tags/components/update-tag-type-modal/index.ts b/src/pages/controls/tags/components/update-tag-type-modal/index.ts deleted file mode 100644 index 90b9bae5..00000000 --- a/src/pages/controls/tags/components/update-tag-type-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateTagTypeModal } from "./update-tag-type-modal"; diff --git a/src/pages/controls/tags/components/update-tag-type-modal/update-tag-type-modal.tsx b/src/pages/controls/tags/components/update-tag-type-modal/update-tag-type-modal.tsx deleted file mode 100644 index b167a849..00000000 --- a/src/pages/controls/tags/components/update-tag-type-modal/update-tag-type-modal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { AxiosResponse } from "axios"; -import { useTranslation } from "react-i18next"; - -import { Modal, ModalVariant } from "@patternfly/react-core"; - -import { TagType } from "api/models"; - -import { TagTypeForm } from "../tag-type-form"; - -export interface UpdateTagTypeModalProps { - tagType?: TagType; - onSaved: (response: AxiosResponse) => void; - onCancel: () => void; -} - -export const UpdateTagTypeModal: React.FC = ({ - tagType, - onSaved, - onCancel, -}) => { - const { t } = useTranslation(); - - return ( - - - - ); -}; diff --git a/src/pages/controls/tags/tags.tsx b/src/pages/controls/tags/tags.tsx index d1b5a847..aa4ff681 100644 --- a/src/pages/controls/tags/tags.tsx +++ b/src/pages/controls/tags/tags.tsx @@ -6,6 +6,8 @@ import { useSelectionState } from "@konveyor/lib-ui"; import { Button, ButtonVariant, + Modal, + ModalVariant, ToolbarChip, ToolbarGroup, ToolbarItem, @@ -33,7 +35,12 @@ import { SearchFilter, Color, } from "shared/components"; -import { useTableControls, useFetchTagTypes, useDelete } from "shared/hooks"; +import { + useTableControls, + useFetchTagTypes, + useDelete, + useEntityModal, +} from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; import { @@ -44,11 +51,9 @@ import { } from "api/rest"; import { SortByQuery, Tag, TagType } from "api/models"; -import { NewTagTypeModal } from "./components/new-tag-type-modal"; -import { UpdateTagTypeModal } from "./components/update-tag-type-modal"; -import { NewTagModal } from "./components/new-tag-modal"; -import { UpdateTagModal } from "./components/update-tag-modal"; import { TagTable } from "./components/tag-table"; +import { TagTypeForm } from "./components/tag-type-form"; +import { TagForm } from "./components/tag-form"; enum FilterKey { TAG_TYPE = "tagType", @@ -110,11 +115,21 @@ export const Tags: React.FC = () => { new Map([]) ); - const [isNewTagTypeModalOpen, setIsNewTagTypeModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isTagTypeModalOpen, + data: tagTypeToUpdate, + create: openCreateTagTypeModal, + update: openUpdateTagTypeModal, + close: closeTagTypeModal, + } = useEntityModal(); - const [isNewTagModalOpen, setIsNewTagModalOpen] = useState(false); - const [tagToUpdate, setTagToUpdate] = useState(); + const { + isOpen: isTagModalOpen, + data: tagToUpdate, + create: openCreateTagModal, + update: openUpdateTagModal, + close: closeTagModal, + } = useEntityModal(); const { requestDelete: requestDeleteTagType } = useDelete({ onDelete: (t: TagType) => deleteTagType(t.id!), @@ -168,6 +183,10 @@ export const Tags: React.FC = () => { // + const editTagFromTable = (row: Tag) => { + openUpdateTagModal(row); + }; + const deleteTagFromTable = (row: Tag) => { dispatch( confirmDialogActions.openDialog({ @@ -243,7 +262,7 @@ export const Tags: React.FC = () => { { title: ( setRowToUpdate(item)} + onEdit={() => editRow(item)} onDelete={() => deleteRow(item)} /> ), @@ -262,7 +281,7 @@ export const Tags: React.FC = () => {
@@ -286,6 +305,10 @@ export const Tags: React.FC = () => { toggleItemExpanded(row); }; + const editRow = (row: TagType) => { + openUpdateTagTypeModal(row); + }; + const deleteRow = (row: TagType) => { dispatch( confirmDialogActions.openDialog({ @@ -352,66 +375,42 @@ export const Tags: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewTagTypeModal = () => { - setIsNewTagTypeModalOpen(true); - }; - - const handleOnOpenCreateNewTagModal = () => { - setIsNewTagModalOpen(true); - }; - - const handleOnCreatedNewTagType = (response: AxiosResponse) => { - setIsNewTagTypeModalOpen(false); - refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.name, - type: "tag type", - }) - ) - ); - }; + // Create/update Modal + + const handleOnTagTypeFormSaved = (response: AxiosResponse) => { + if (!tagTypeToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.tagType') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.tagType").toLowerCase(), + }) + ) + ); + } - const handleOnCreatedNewTag = (response: AxiosResponse) => { - setIsNewTagModalOpen(false); + closeTagTypeModal(); refreshTable(); - - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.name, - type: "tag", - }) - ) - ); }; - const handleOnCreateNewCancel = () => { - setIsNewTagTypeModalOpen(false); - setIsNewTagModalOpen(false); - }; - - // Update Modal - - const handleOnTagTypeUpdated = () => { - setRowToUpdate(undefined); - refreshTable(); - }; + const handleOnTagFormSaved = (response: AxiosResponse) => { + if (!tagToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.tag') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.tag").toLowerCase(), + }) + ) + ); + } - const handleOnTagUpdated = () => { - setTagToUpdate(undefined); + closeTagModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - setTagToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-tag" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewTagModal} + onClick={openCreateTagModal} > {t("actions.createTag")} @@ -467,7 +466,7 @@ export const Tags: React.FC = () => { type="button" aria-label="create-tag-type" variant={ButtonVariant.secondary} - onClick={handleOnOpenCreateNewTagTypeModal} + onClick={openCreateTagTypeModal} > {t("actions.createTagType")} @@ -491,27 +490,41 @@ export const Tags: React.FC = () => { /> - - - - - + + + + + + + ); };