From 75a3f2c20a693cd87926999fa2cb42dbc742c7b6 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Fri, 16 Apr 2021 11:39:05 +0200 Subject: [PATCH 1/9] Add custom hook to create and update modals --- public/locales/en/translation.json | 6 +- public/locales/es/translation.json | 6 +- .../business-services/business-services.tsx | 91 +++++++++---------- .../new-business-service-modal/index.ts | 1 - .../new-business-service-modal.tsx | 34 ------- .../update-business-service-modal/index.ts | 1 - .../update-business-service-modal.tsx | 38 -------- src/shared/hooks/index.ts | 1 + src/shared/hooks/useEntityModal/index.ts | 1 + .../useEntityModal/useEntityModal.test.tsx | 46 ++++++++++ .../hooks/useEntityModal/useEntityModal.ts | 86 ++++++++++++++++++ 11 files changed, 184 insertions(+), 127 deletions(-) delete mode 100644 src/pages/controls/business-services/components/new-business-service-modal/index.ts delete mode 100644 src/pages/controls/business-services/components/new-business-service-modal/new-business-service-modal.tsx delete mode 100644 src/pages/controls/business-services/components/update-business-service-modal/index.ts delete mode 100644 src/pages/controls/business-services/components/update-business-service-modal/update-business-service-modal.tsx create mode 100644 src/shared/hooks/useEntityModal/index.ts create mode 100644 src/shared/hooks/useEntityModal/useEntityModal.test.tsx create mode 100644 src/shared/hooks/useEntityModal/useEntityModal.ts diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index cd7fd299..f2a6490b 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -19,12 +19,12 @@ }, "title": { "delete": "Delete '{{what}}'", + "new": "New {{what}}", "newApplication": "New application", - "newBusinessService": "New business service", "newStakeholder": "New stakeholder", "newStakeholderGroup": "New stakeholder group", + "update": "Update {{what}}", "updateApplication": "Update application", - "updateBusinessService": "Update business service", "updateStakeholder": "Update stakeholder", "updateStakeholderGroup": "Update stakeholder group" } @@ -75,4 +75,4 @@ "onlyCharactersAndUnderscore": "This field must contain only alphanumeric characters including underscore.", "required": "This field is required." } -} +} \ No newline at end of file diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index fad82f4e..6cd0ff38 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -19,12 +19,12 @@ }, "title": { "delete": "Eliminar '{{what}}'", + "new": "Nuevo(a) {{what}}", "newApplication": "Nueva aplicación", - "newBusinessService": "Nuevo servicio de negocio", "newStakeholder": "Nuevo interesado", "newStakeholderGroup": "Nuevo grupo de interesados", + "update": "Actualizar {{what}}", "updateApplication": "Actualizar aplicación", - "updateBusinessService": "Actualizar servicio de negocio", "updateStakeholder": "Actualizar interesado", "updateStakeholderGroup": "Actualizar grupo de interesados" } @@ -75,4 +75,4 @@ "onlyCharactersAndUnderscore": "Este campo debe de contener solo caracteres alfanuméricos incluyendo el subguión.", "required": "Este campo es requerido." } -} +} \ No newline at end of file diff --git a/src/pages/controls/business-services/business-services.tsx b/src/pages/controls/business-services/business-services.tsx index 0070e504..d5054e17 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,14 +36,14 @@ import { useTableControls, useFetchBusinessServices, useDeleteBusinessService, + useEntityModal, } from "shared/hooks"; import { BusinessService, SortByQuery } from "api/models"; import { BusinessServiceSortBy, BusinessServiceSortByQuery } 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", @@ -102,8 +104,13 @@ export const BusinessServices: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteBusinessService } = useDeleteBusinessService(); @@ -215,7 +222,7 @@ export const BusinessServices: React.FC = () => { // ]; const editRow = (row: BusinessService) => { - setRowToUpdate(row); + openUpdateModal(row); }; const deleteRow = (row: BusinessService) => { @@ -276,43 +283,27 @@ export const BusinessServices: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewBusinessServiceModal = () => { - setIsNewModalOpen(true); - }; + // Create/update Modal - const handleOnBusinessServiceCreated = ( + const handleOnCreateUpdateModalSaved = ( response: AxiosResponse ) => { - setIsNewModalOpen(false); - 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); + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.businessService') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.businessService").toLowerCase(), + }) + ) + ); + } + + closeCreateUpdateModal(); refreshTable(); }; - const handleOnCancelUpdateBusinessService = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-business-service" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewBusinessServiceModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -381,16 +372,22 @@ 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/shared/hooks/index.ts b/src/shared/hooks/index.ts index 19ca294d..6fff319c 100644 --- a/src/shared/hooks/index.ts +++ b/src/shared/hooks/index.ts @@ -2,6 +2,7 @@ export { useDeleteApplication } from "./useDeleteApplication"; export { useDeleteBusinessService } from "./useDeleteBusinessService"; export { useDeleteStakeholder } from "./useDeleteStakeholder"; export { useDeleteStakeholderGroup } from "./useDeleteStakeholderGroup"; +export { useEntityModal } from "./useEntityModal"; export { useFetchApplications } from "./useFetchApplications"; export { useFetchBusinessServices } from "./useFetchBusinessServices"; export { useFetchJobFunctions } from "./useFetchJobFunctions"; diff --git a/src/shared/hooks/useEntityModal/index.ts b/src/shared/hooks/useEntityModal/index.ts new file mode 100644 index 00000000..7d7faa96 --- /dev/null +++ b/src/shared/hooks/useEntityModal/index.ts @@ -0,0 +1 @@ +export { useEntityModal } from "./useEntityModal"; diff --git a/src/shared/hooks/useEntityModal/useEntityModal.test.tsx b/src/shared/hooks/useEntityModal/useEntityModal.test.tsx new file mode 100644 index 00000000..06ae613f --- /dev/null +++ b/src/shared/hooks/useEntityModal/useEntityModal.test.tsx @@ -0,0 +1,46 @@ +import { renderHook, act } from "@testing-library/react-hooks"; +import { useEntityModal } from "./useEntityModal"; + +describe("useEntityModal", () => { + it("onCreate", () => { + const { result } = renderHook(() => useEntityModal()); + + // + const { create } = result.current; + act(() => create()); + expect(result.current.isOpen).toEqual(true); + expect(result.current.entity).toBeUndefined(); + }); + + it("onUpdate", () => { + const ENTITY = "hello"; + + const { result } = renderHook(() => useEntityModal()); + + // + const { update } = result.current; + act(() => update(ENTITY)); + + expect(result.current.isOpen).toEqual(true); + expect(result.current.entity).toEqual(ENTITY); + }); + + it("Close after update", () => { + const ENTITY = "hello"; + + const { result } = renderHook(() => useEntityModal()); + const { update, close } = result.current; + + // update + act(() => update(ENTITY)); + + expect(result.current.isOpen).toEqual(true); + expect(result.current.entity).toEqual(ENTITY); + + // close + act(() => close()); + + expect(result.current.isOpen).toEqual(false); + expect(result.current.entity).toBeUndefined(); + }); +}); diff --git a/src/shared/hooks/useEntityModal/useEntityModal.ts b/src/shared/hooks/useEntityModal/useEntityModal.ts new file mode 100644 index 00000000..329e397d --- /dev/null +++ b/src/shared/hooks/useEntityModal/useEntityModal.ts @@ -0,0 +1,86 @@ +import { useCallback, useReducer } from "react"; +import { ActionType, createAction, getType } from "typesafe-actions"; + +const startCreate = createAction("useEntityModal/action/startCreate")(); +const startUpdate = createAction("useEntityModal/action/startUpdate")(); +const startClose = createAction("useEntityModal/action/startClose")(); + +// State +type State = Readonly<{ + entity: any; + isOpen: boolean; +}>; + +const defaultState: State = { + entity: undefined, + isOpen: false, +}; + +// Reducer + +type Action = ActionType< + typeof startCreate | typeof startUpdate | typeof startClose +>; + +const reducer = (state: State, action: Action): State => { + switch (action.type) { + case getType(startCreate): + return { + ...state, + entity: undefined, + isOpen: true, + }; + case getType(startUpdate): + return { + ...state, + entity: action.payload, + isOpen: true, + }; + case getType(startClose): + return { + ...state, + entity: undefined, + isOpen: false, + }; + default: + return state; + } +}; + +// Hook + +interface HookState { + entity?: T; + isOpen: boolean; + create: () => void; + update: (entity: T) => void; + close: () => void; +} + +export const useEntityModal = (): HookState => { + const [state, dispatch] = useReducer(reducer, { + ...defaultState, + }); + + const createHandler = useCallback(() => { + dispatch(startCreate()); + }, []); + + const updateHandler = useCallback((entity: T) => { + dispatch(startUpdate(entity)); + }, []); + + const closeHandler = useCallback(() => { + dispatch(startClose()); + }, []); + + return { + entity: state.entity, + isOpen: state.isOpen, + create: createHandler, + update: updateHandler, + close: closeHandler, + }; +}; + +export default useEntityModal; From 3991715d237d4ac9d5287d80938478158e27a000 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Fri, 16 Apr 2021 11:39:22 +0200 Subject: [PATCH 2/9] Format files --- public/locales/en/translation.json | 2 +- public/locales/es/translation.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index f2a6490b..61dcf80e 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -75,4 +75,4 @@ "onlyCharactersAndUnderscore": "This field must contain only alphanumeric characters including underscore.", "required": "This field is required." } -} \ No newline at end of file +} diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 6cd0ff38..36bcbde8 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -75,4 +75,4 @@ "onlyCharactersAndUnderscore": "Este campo debe de contener solo caracteres alfanuméricos incluyendo el subguión.", "required": "Este campo es requerido." } -} \ No newline at end of file +} From fa911ddb735f196a8d1e9fbfd26deb800db6bfd1 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Fri, 16 Apr 2021 12:00:26 +0200 Subject: [PATCH 3/9] Apply new modal hook to the rest of tables --- public/locales/en/translation.json | 8 +- public/locales/es/translation.json | 8 +- .../application-inventory.tsx | 91 +++++++++---------- .../components/new-application-modal/index.ts | 1 - .../new-application-modal.tsx | 34 ------- .../update-application-modal/index.ts | 1 - .../update-application-modal.tsx | 38 -------- .../new-stakeholder-group-modal/index.ts | 1 - .../new-stakeholder-group-modal.tsx | 34 ------- .../update-stakeholder-group-modal/index.ts | 1 - .../update-stakeholder-group-modal.tsx | 38 -------- .../stakeholder-groups/stakeholder-groups.tsx | 91 +++++++++---------- .../components/new-stakeholder-modal/index.ts | 1 - .../new-stakeholder-modal.tsx | 34 ------- .../update-stakeholder-modal/index.ts | 1 - .../update-stakeholder-modal.tsx | 38 -------- .../controls/stakeholders/stakeholders.tsx | 91 +++++++++---------- 17 files changed, 137 insertions(+), 374 deletions(-) delete mode 100644 src/pages/application-inventory/components/new-application-modal/index.ts delete mode 100644 src/pages/application-inventory/components/new-application-modal/new-application-modal.tsx delete mode 100644 src/pages/application-inventory/components/update-application-modal/index.ts delete mode 100644 src/pages/application-inventory/components/update-application-modal/update-application-modal.tsx delete mode 100644 src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/index.ts delete mode 100644 src/pages/controls/stakeholder-groups/components/new-stakeholder-group-modal/new-stakeholder-group-modal.tsx delete mode 100644 src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/index.ts delete mode 100644 src/pages/controls/stakeholder-groups/components/update-stakeholder-group-modal/update-stakeholder-group-modal.tsx delete mode 100644 src/pages/controls/stakeholders/components/new-stakeholder-modal/index.ts delete mode 100644 src/pages/controls/stakeholders/components/new-stakeholder-modal/new-stakeholder-modal.tsx delete mode 100644 src/pages/controls/stakeholders/components/update-stakeholder-modal/index.ts delete mode 100644 src/pages/controls/stakeholders/components/update-stakeholder-modal/update-stakeholder-modal.tsx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 61dcf80e..1d0d42d7 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -20,13 +20,7 @@ "title": { "delete": "Delete '{{what}}'", "new": "New {{what}}", - "newApplication": "New application", - "newStakeholder": "New stakeholder", - "newStakeholderGroup": "New stakeholder group", - "update": "Update {{what}}", - "updateApplication": "Update application", - "updateStakeholder": "Update stakeholder", - "updateStakeholderGroup": "Update stakeholder group" + "update": "Update {{what}}" } }, "sidebar": { diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 36bcbde8..05353b91 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -20,13 +20,7 @@ "title": { "delete": "Eliminar '{{what}}'", "new": "Nuevo(a) {{what}}", - "newApplication": "Nueva aplicación", - "newStakeholder": "Nuevo interesado", - "newStakeholderGroup": "Nuevo grupo de interesados", - "update": "Actualizar {{what}}", - "updateApplication": "Actualizar aplicación", - "updateStakeholder": "Actualizar interesado", - "updateStakeholderGroup": "Actualizar grupo de interesados" + "update": "Actualizar {{what}}" } }, "sidebar": { diff --git a/src/pages/application-inventory/application-inventory.tsx b/src/pages/application-inventory/application-inventory.tsx index 26877860..705536ba 100644 --- a/src/pages/application-inventory/application-inventory.tsx +++ b/src/pages/application-inventory/application-inventory.tsx @@ -10,6 +10,8 @@ import { DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, + Modal, + ModalVariant, PageSection, PageSectionVariants, Text, @@ -45,19 +47,19 @@ import { useDeleteApplication, useTableControls, useFetchApplications, + useEntityModal, } from "shared/hooks"; import { Application, SortByQuery } from "api/models"; import { ApplicationSortBy, ApplicationSortByQuery } from "api/rest"; import { getAxiosErrorMessage } from "utils/utils"; -import { NewApplicationModal } from "./components/new-application-modal"; -import { UpdateApplicationModal } from "./components/update-application-modal"; import { ToolbarSearchFilter } from "./components/toolbar-search-filter"; import { InputTextFilter } from "./components/toolbar-search-filter/input-text-filter"; import { SelectBusinessServiceFilter } from "./components/toolbar-search-filter/select-business-service-filter"; import { ApplicationAssessment } from "./components/application-assessment"; import { ApplicationBusinessService } from "./components/application-business-service"; +import { ApplicationForm } from "./components/application-form"; enum FilterKey { NAME = "name", @@ -115,8 +117,13 @@ export const ApplicationInventory: React.FC = () => { Map >(new Map([])); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteApplication } = useDeleteApplication(); @@ -277,7 +284,7 @@ export const ApplicationInventory: React.FC = () => { }; const editRow = (row: Application) => { - setRowToUpdate(row); + openUpdateModal(row); }; const deleteRow = (row: Application) => { @@ -346,41 +353,27 @@ export const ApplicationInventory: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateNewModal = () => { - setIsNewModalOpen(true); - }; - - const handleOnCreatedNew = (response: AxiosResponse) => { - setIsNewModalOpen(false); - refreshTable(); + // Create/update Modal - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.name, - type: "stakeholder", - }) - ) - ); - }; - - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; - - // Update Modal + const handleOnCreateUpdateModalSaved = ( + response: AxiosResponse + ) => { + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.application') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.application").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeCreateUpdateModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> @@ -474,7 +467,7 @@ export const ApplicationInventory: React.FC = () => { type="button" aria-label="create-application" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -499,16 +492,22 @@ export const ApplicationInventory: React.FC = () => { - - + + + ); }; diff --git a/src/pages/application-inventory/components/new-application-modal/index.ts b/src/pages/application-inventory/components/new-application-modal/index.ts deleted file mode 100644 index b144d99a..00000000 --- a/src/pages/application-inventory/components/new-application-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NewApplicationModal } from "./new-application-modal"; diff --git a/src/pages/application-inventory/components/new-application-modal/new-application-modal.tsx b/src/pages/application-inventory/components/new-application-modal/new-application-modal.tsx deleted file mode 100644 index bd8ada7b..00000000 --- a/src/pages/application-inventory/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/components/update-application-modal/index.ts b/src/pages/application-inventory/components/update-application-modal/index.ts deleted file mode 100644 index 8369d48c..00000000 --- a/src/pages/application-inventory/components/update-application-modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { UpdateApplicationModal } from "./update-application-modal"; diff --git a/src/pages/application-inventory/components/update-application-modal/update-application-modal.tsx b/src/pages/application-inventory/components/update-application-modal/update-application-modal.tsx deleted file mode 100644 index 4e46f830..00000000 --- a/src/pages/application-inventory/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/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 7e142901..fd8a3830 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, @@ -40,14 +42,14 @@ import { useTableControls, useFetchStakeholderGroups, useDeleteStakeholderGroup, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; import { StakeholderGroupSortBy, StakeholderGroupSortByQuery } 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", @@ -108,8 +110,13 @@ export const StakeholderGroups: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteStakeholderGroup } = useDeleteStakeholderGroup(); @@ -243,7 +250,7 @@ export const StakeholderGroups: React.FC = () => { }; const editRow = (row: StakeholderGroup) => { - setRowToUpdate(row); + openUpdateModal(row); }; const deleteRow = (row: StakeholderGroup) => { @@ -304,41 +311,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", - }) - ) - ); - }; + // Create/update Modal - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; - - // Update Modal + const handleOnCreateUpdateModalSaved = ( + response: AxiosResponse + ) => { + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.stakeholderGroup') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.stakeholderGroup").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeCreateUpdateModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-stakeholder-group" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -408,16 +401,22 @@ 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 cc1f2dfe..4ac3b3cf 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, @@ -40,14 +42,14 @@ import { useTableControls, useFetchStakeholders, useDeleteStakeholder, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; import { StakeholderSortBy, StakeholderSortByQuery } 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", @@ -119,8 +121,13 @@ export const Stakeholders: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteStakeholder } = useDeleteStakeholder(); @@ -258,7 +265,7 @@ export const Stakeholders: React.FC = () => { }; const editRow = (row: Stakeholder) => { - setRowToUpdate(row); + openUpdateModal(row); }; const deleteRow = (row: Stakeholder) => { @@ -319,41 +326,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", - }) - ) - ); - }; + // Create/update Modal - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; - - // Update Modal + const handleOnCreateUpdateModalSaved = ( + response: AxiosResponse + ) => { + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.stakeholder') + t("toastr.success.added", { + what: response.data.displayName, + type: t("terms.stakeholder").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeCreateUpdateModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-stakeholder" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -423,16 +416,22 @@ export const Stakeholders: React.FC = () => { /> - - + + + ); }; From c10a203382d18ada4df8c112665cd031d7353016 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Fri, 23 Apr 2021 10:15:48 +0200 Subject: [PATCH 4/9] Make jobFunctions use the new custom hook --- public/locales/en/translation.json | 10 -- public/locales/es/translation.json | 10 -- .../new-job-function-modal/index.ts | 1 - .../new-job-function-modal.tsx | 34 ------- .../update-job-function-modal/index.ts | 1 - .../update-job-function-modal.tsx | 38 ------- .../controls/job-functions/job-functions.tsx | 98 ++++++++++--------- 7 files changed, 51 insertions(+), 141 deletions(-) delete mode 100644 src/pages/controls/job-functions/components/new-job-function-modal/index.ts delete mode 100644 src/pages/controls/job-functions/components/new-job-function-modal/new-job-function-modal.tsx delete mode 100644 src/pages/controls/job-functions/components/update-job-function-modal/index.ts delete mode 100644 src/pages/controls/job-functions/components/update-job-function-modal/update-job-function-modal.tsx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 165d52e8..aed32b05 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -19,16 +19,6 @@ }, "title": { "delete": "Delete '{{what}}'", - "newApplication": "New application", - "newBusinessService": "New business service", - "newJobFunction": "New job function", - "newStakeholder": "New stakeholder", - "newStakeholderGroup": "New stakeholder group", - "updateApplication": "Update application", - "updateBusinessService": "Update business service", - "updateJobFunction": "Update job function", - "updateStakeholder": "Update stakeholder", - "updateStakeholderGroup": "Update stakeholder group", "new": "New {{what}}", "update": "Update {{what}}" } diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 33d191de..27ac8739 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -19,16 +19,6 @@ }, "title": { "delete": "Eliminar '{{what}}'", - "newApplication": "Nueva aplicación", - "newBusinessService": "Nuevo servicio de negocio", - "newJobFunction": "Nueva función laboral", - "newStakeholder": "Nuevo interesado", - "newStakeholderGroup": "Nuevo grupo de interesados", - "updateApplication": "Actualizar aplicación", - "updateBusinessService": "Actualizar servicio de negocio", - "updateJobFunction": "Actualizar función laboral", - "updateStakeholder": "Actualizar interesado", - "updateStakeholderGroup": "Actualizar grupo de interesados", "new": "Nuevo(a) {{what}}", "update": "Actualizar {{what}}" } 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 134fdfad..7be50e47 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, @@ -28,14 +30,14 @@ import { useTableControls, useDeleteJobFunction, useFetchJobFunctions, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; import { JobFunctionSortBy, JobFunctionSortByQuery } 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", @@ -79,8 +81,13 @@ export const JobFunctions: React.FC = () => { new Map([]) ); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteJobFunction } = useDeleteJobFunction(); @@ -147,7 +154,7 @@ export const JobFunctions: React.FC = () => { { title: ( setRowToUpdate(item)} + onEdit={() => editRow(item)} onDelete={() => deleteRow(item)} /> ), @@ -158,6 +165,10 @@ export const JobFunctions: React.FC = () => { // Rows + const editRow = (row: JobFunction) => { + openUpdateModal(row); + }; + const deleteRow = (row: JobFunction) => { dispatch( confirmDialogActions.openDialog({ @@ -216,41 +227,27 @@ export const JobFunctions: React.FC = () => { ); }; - // Create Modal - - const handleOnOpenCreateModal = () => { - setIsNewModalOpen(true); - }; - - const handleOnCreatedNew = (response: AxiosResponse) => { - setIsNewModalOpen(false); - refreshTable(); + // Create/update Modal - dispatch( - alertActions.addSuccess( - t("toastr.success.added", { - what: response.data.role, - type: "job function", - }) - ) - ); - }; - - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; - - // Update Modal - - const handleOnJobFunctionUpdated = () => { - setRowToUpdate(undefined); + const handleOnCreateUpdateModalSaved = ( + response: AxiosResponse + ) => { + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.jobFunction') + t("toastr.success.added", { + what: response.data.role, + type: t("terms.jobFunction").toLowerCase(), + }) + ) + ); + } + + closeCreateUpdateModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - return ( <> { type="button" aria-label="create-job-function" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -318,16 +315,23 @@ export const JobFunctions: React.FC = () => { /> - - + + + ); }; From 7ef076cbcb97d29ea475b6b85c64117d030422e1 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Mon, 26 Apr 2021 09:25:15 +0200 Subject: [PATCH 5/9] Merge branch 'main' into tags-controls --- .../application-list/application-list.tsx | 91 +++++++++---------- .../components/new-application-modal/index.ts | 1 - .../new-application-modal.tsx | 34 ------- .../update-application-modal/index.ts | 1 - .../update-application-modal.tsx | 38 -------- 5 files changed, 45 insertions(+), 120 deletions(-) delete mode 100644 src/pages/application-inventory/application-list/components/new-application-modal/index.ts delete mode 100644 src/pages/application-inventory/application-list/components/new-application-modal/new-application-modal.tsx delete mode 100644 src/pages/application-inventory/application-list/components/update-application-modal/index.ts delete mode 100644 src/pages/application-inventory/application-list/components/update-application-modal/update-application-modal.tsx diff --git a/src/pages/application-inventory/application-list/application-list.tsx b/src/pages/application-inventory/application-list/application-list.tsx index 61b8eea4..1a97f0a5 100644 --- a/src/pages/application-inventory/application-list/application-list.tsx +++ b/src/pages/application-inventory/application-list/application-list.tsx @@ -11,6 +11,8 @@ import { DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, + Modal, + ModalVariant, PageSection, PageSectionVariants, Text, @@ -47,6 +49,7 @@ import { useDeleteApplication, useTableControls, useFetchApplications, + useEntityModal, } from "shared/hooks"; import { formatPath, Paths } from "Paths"; @@ -54,13 +57,12 @@ import { Application, Assessment, SortByQuery } from "api/models"; import { ApplicationSortBy, ApplicationSortByQuery } from "api/rest"; import { getAxiosErrorMessage } from "utils/utils"; -import { NewApplicationModal } from "./components/new-application-modal"; -import { UpdateApplicationModal } from "./components/update-application-modal"; import { ToolbarSearchFilter } from "./components/toolbar-search-filter"; import { InputTextFilter } from "./components/toolbar-search-filter/input-text-filter"; import { SelectBusinessServiceFilter } from "./components/toolbar-search-filter/select-business-service-filter"; import { ApplicationAssessment } from "./components/application-assessment"; import { ApplicationBusinessService } from "./components/application-business-service"; +import { ApplicationForm } from "./components/application-form"; import { useAssessApplication } from "./hooks/useAssessApplication"; @@ -121,8 +123,13 @@ export const ApplicationList: React.FC = () => { Map >(new Map([])); - const [isNewModalOpen, setIsNewModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isCreateUpdateModalOpen, + entity: rowToUpdate, + create: openCreateModal, + update: openUpdateModal, + close: closeCreateUpdateModal, + } = useEntityModal(); const { deleteApplication } = useDeleteApplication(); const { @@ -320,7 +327,7 @@ export const ApplicationList: React.FC = () => { }; const editRow = (row: Application) => { - setRowToUpdate(row); + openUpdateModal(row); }; const deleteRow = (row: Application) => { @@ -389,41 +396,27 @@ export const ApplicationList: 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: "application", - }) - ) - ); - }; + // Create/update Modal - const handleOnCreateNewCancel = () => { - setIsNewModalOpen(false); - }; - - // Update Modal + const handleOnCreateUpdateModalSaved = ( + response: AxiosResponse + ) => { + if (!rowToUpdate) { + dispatch( + alertActions.addSuccess( + // t('terms.application') + t("toastr.success.added", { + what: response.data.name, + type: t("terms.application").toLowerCase(), + }) + ) + ); + } - const handleOnUpdated = () => { - setRowToUpdate(undefined); + closeCreateUpdateModal(); refreshTable(); }; - const handleOnUpdatedCancel = () => { - setRowToUpdate(undefined); - }; - // General actions const startApplicationAssessment = (row: Application) => { @@ -552,7 +545,7 @@ export const ApplicationList: React.FC = () => { type="button" aria-label="create-application" variant={ButtonVariant.primary} - onClick={handleOnOpenCreateNewModal} + onClick={openCreateModal} > {t("actions.createNew")} @@ -593,16 +586,22 @@ export const ApplicationList: React.FC = () => { - - + + + ); }; 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 ( - - - - ); -}; From 9d7a7880dbd627a75259cd1dc7843b44813f2987 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Tue, 4 May 2021 10:26:46 +0200 Subject: [PATCH 6/9] Add useEntityModal to tag/tagTypes --- public/locales/en/translation.json | 14 -- public/locales/en/translation_old.json | 20 ++ public/locales/es/translation.json | 14 -- public/locales/es/translation_old.json | 20 ++ .../application-list/application-list.tsx | 59 +++--- .../application-dependencies-form.tsx | 153 +++++++-------- .../business-services/business-services.tsx | 33 ++-- .../controls/job-functions/job-functions.tsx | 32 ++-- .../stakeholder-groups/stakeholder-groups.tsx | 40 ++-- .../controls/stakeholders/stakeholders.tsx | 33 ++-- .../tags/components/new-tag-modal/index.ts | 1 - .../new-tag-modal/new-tag-modal.tsx | 34 ---- .../components/new-tag-type-modal/index.ts | 1 - .../new-tag-type-modal/new-tag-type-modal.tsx | 34 ---- .../tags/components/update-tag-modal/index.ts | 1 - .../update-tag-modal/update-tag-modal.tsx | 34 ---- .../components/update-tag-type-modal/index.ts | 1 - .../update-tag-type-modal.tsx | 34 ---- src/pages/controls/tags/tags.tsx | 179 +++++++++--------- 19 files changed, 308 insertions(+), 429 deletions(-) create mode 100644 public/locales/en/translation_old.json create mode 100644 public/locales/es/translation_old.json delete mode 100644 src/pages/controls/tags/components/new-tag-modal/index.ts delete mode 100644 src/pages/controls/tags/components/new-tag-modal/new-tag-modal.tsx delete mode 100644 src/pages/controls/tags/components/new-tag-type-modal/index.ts delete mode 100644 src/pages/controls/tags/components/new-tag-type-modal/new-tag-type-modal.tsx delete mode 100644 src/pages/controls/tags/components/update-tag-modal/index.ts delete mode 100644 src/pages/controls/tags/components/update-tag-modal/update-tag-modal.tsx delete mode 100644 src/pages/controls/tags/components/update-tag-type-modal/index.ts delete mode 100644 src/pages/controls/tags/components/update-tag-type-modal/update-tag-type-modal.tsx diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 9d375cbc..ebf9ab36 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -38,20 +38,6 @@ }, "title": { "delete": "Delete '{{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", - "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", "new": "New {{what}}", "update": "Update {{what}}" } diff --git a/public/locales/en/translation_old.json b/public/locales/en/translation_old.json new file mode 100644 index 00000000..8cdd9111 --- /dev/null +++ b/public/locales/en/translation_old.json @@ -0,0 +1,20 @@ +{ + "dialog": { + "title": { + "newApplication": "New application", + "newBusinessService": "New business service", + "newJobFunction": "New job function", + "newStakeholder": "New stakeholder", + "newStakeholderGroup": "New stakeholder group", + "updateApplication": "Update application", + "updateBusinessService": "Update business service", + "updateJobFunction": "Update job function", + "updateStakeholder": "Update stakeholder", + "updateStakeholderGroup": "Update stakeholder group", + "newTag": "New Tag", + "newTagType": "New tag type", + "updateTag": "Update tag", + "updateTagType": "Update tag type" + } + } +} diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index f471ac3e..bae9f3d8 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -38,20 +38,6 @@ }, "title": { "delete": "Eliminar '{{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", - "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", "new": "Nuevo(a) {{what}}", "update": "Actualizar {{what}}" } diff --git a/public/locales/es/translation_old.json b/public/locales/es/translation_old.json new file mode 100644 index 00000000..3380e22d --- /dev/null +++ b/public/locales/es/translation_old.json @@ -0,0 +1,20 @@ +{ + "dialog": { + "title": { + "newApplication": "Nueva aplicación", + "newBusinessService": "Nuevo servicio de negocio", + "newJobFunction": "Nueva función laboral", + "newStakeholder": "Nuevo interesado", + "newStakeholderGroup": "Nuevo grupo de interesados", + "updateApplication": "Actualizar aplicación", + "updateBusinessService": "Actualizar servicio de negocio", + "updateJobFunction": "Actualizar función laboral", + "updateStakeholder": "Actualizar interesado", + "updateStakeholderGroup": "Actualizar grupo de interesados", + "newTag": "Nueva etiqueta", + "newTagType": "Nuevo tipo de etiqueta", + "updateTag": "Actualizar etiqueta", + "updateTagType": "Actualizar tipo de etiqueta" + } + } +} diff --git a/src/pages/application-inventory/application-list/application-list.tsx b/src/pages/application-inventory/application-list/application-list.tsx index e083ed20..14445854 100644 --- a/src/pages/application-inventory/application-list/application-list.tsx +++ b/src/pages/application-inventory/application-list/application-list.tsx @@ -135,17 +135,19 @@ export const ApplicationList: React.FC = () => { >(new Map([])); const { - isOpen: isCreateUpdateModalOpen, - entity: rowToUpdate, - create: openCreateModal, - update: openUpdateModal, - close: closeCreateUpdateModal, + isOpen: isApplicationModalOpen, + entity: applicationToUpdate, + create: openCreateApplicationModal, + update: openUpdateApplicationModal, + close: closeApplicationModal, } = useEntityModal(); - const [ - rowToManageDependencies, - setRowToManageDependencies, - ] = useState(); + const { + isOpen: isApplicationDependenciesModalOpen, + entity: applicationDependenciesToUpdate, + update: openUpdateApplicationDependenciesModal, + close: closeApplicationDependenciesModal, + } = useEntityModal(); const { deleteApplication } = useDeleteApplication(); const { @@ -322,7 +324,7 @@ export const ApplicationList: React.FC = () => { rowData: IRowData ) => { const row: Application = getRow(rowData); - setRowToManageDependencies(row); + openUpdateApplicationDependenciesModal(row); }, }, { @@ -370,7 +372,7 @@ export const ApplicationList: React.FC = () => { }; const editRow = (row: Application) => { - openUpdateModal(row); + openUpdateApplicationModal(row); }; const deleteRow = (row: Application) => { @@ -441,10 +443,10 @@ export const ApplicationList: React.FC = () => { // Create/update Modal - const handleOnCreateUpdateModalSaved = ( + const handleOnApplicationFormSaved = ( response: AxiosResponse ) => { - if (!rowToUpdate) { + if (!applicationToUpdate) { dispatch( alertActions.addSuccess( // t('terms.application') @@ -456,7 +458,7 @@ export const ApplicationList: React.FC = () => { ); } - closeCreateUpdateModal(); + closeApplicationModal(); refreshTable(); }; @@ -599,7 +601,7 @@ export const ApplicationList: React.FC = () => { type="button" aria-label="create-application" variant={ButtonVariant.primary} - onClick={openCreateModal} + onClick={openCreateApplicationModal} > {t("actions.createNew")} @@ -643,32 +645,33 @@ export const ApplicationList: React.FC = () => { setRowToManageDependencies(undefined)} + onClose={closeApplicationDependenciesModal} > - {rowToManageDependencies && ( + {applicationDependenciesToUpdate && ( setRowToManageDependencies(undefined)} + application={applicationDependenciesToUpdate} + onCancel={closeApplicationDependenciesModal} /> )} diff --git a/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx b/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx index 1161fd15..6bd28c7b 100644 --- a/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx +++ b/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx @@ -135,88 +135,77 @@ export const ApplicationDependenciesForm: React.FC - - - - - Add northbound and southbound dependencies for the selected - application here. Note that any selections made will be saved - automatically. To undo any changes, you must manually delete the - applications from the dropdowns. - - - - - - f.id !== application.id) - .map((f) => - dependencyToOption( - { from: f, to: application }, - northToStringFn - ) - )} - isFetching={isFetchingApplications || isFetchingNorthDependencies} - fetchError={fetchErrorApplications || fetchErrorNorthDependencies} - isSaving={isNorthBeingSaved} - setIsSaving={setIsNorthBeingSaved} - saveError={northSaveError} - setSaveError={setNorthSaveError} - /> - - - f.id !== application.id) - .map((f) => - dependencyToOption( - { from: application, to: f }, - southToStringFn - ) - )} - isFetching={isFetchingApplications || isFetchingSouthDependencies} - fetchError={fetchErrorApplications || fetchErrorSouthDependencies} - isSaving={isSouthBeingSaved} - setIsSaving={setIsSouthBeingSaved} - saveError={southSaveError} - setSaveError={setSouthSaveError} - /> - - - + + + Add northbound and southbound dependencies for the selected + application here. Note that any selections made will be saved + automatically. To undo any changes, you must manually delete the + applications from the dropdowns. + + + + + f.id !== application.id) + .map((f) => + dependencyToOption({ from: f, to: application }, northToStringFn) + )} + isFetching={isFetchingApplications || isFetchingNorthDependencies} + fetchError={fetchErrorApplications || fetchErrorNorthDependencies} + isSaving={isNorthBeingSaved} + setIsSaving={setIsNorthBeingSaved} + saveError={northSaveError} + setSaveError={setNorthSaveError} + /> + + + f.id !== application.id) + .map((f) => + dependencyToOption({ from: application, to: f }, southToStringFn) + )} + isFetching={isFetchingApplications || isFetchingSouthDependencies} + fetchError={fetchErrorApplications || fetchErrorSouthDependencies} + isSaving={isSouthBeingSaved} + setIsSaving={setIsSouthBeingSaved} + saveError={southSaveError} + setSaveError={setSouthSaveError} + /> + @@ -375,17 +375,18 @@ export const BusinessServices: React.FC = () => { diff --git a/src/pages/controls/job-functions/job-functions.tsx b/src/pages/controls/job-functions/job-functions.tsx index 7be50e47..adbcd248 100644 --- a/src/pages/controls/job-functions/job-functions.tsx +++ b/src/pages/controls/job-functions/job-functions.tsx @@ -82,11 +82,11 @@ export const JobFunctions: React.FC = () => { ); const { - isOpen: isCreateUpdateModalOpen, - entity: rowToUpdate, - create: openCreateModal, - update: openUpdateModal, - close: closeCreateUpdateModal, + isOpen: isJobFunctionModalOpen, + entity: jobFunctionToUpdate, + create: openCreateJobFunctionModal, + update: openUpdateJobFunctionModal, + close: closeJobFunctionModal, } = useEntityModal(); const { deleteJobFunction } = useDeleteJobFunction(); @@ -166,7 +166,7 @@ export const JobFunctions: React.FC = () => { // Rows const editRow = (row: JobFunction) => { - openUpdateModal(row); + openUpdateJobFunctionModal(row); }; const deleteRow = (row: JobFunction) => { @@ -229,10 +229,10 @@ export const JobFunctions: React.FC = () => { // Create/update Modal - const handleOnCreateUpdateModalSaved = ( + const handleOnJobFunctionFormSaved = ( response: AxiosResponse ) => { - if (!rowToUpdate) { + if (!jobFunctionToUpdate) { dispatch( alertActions.addSuccess( // t('terms.jobFunction') @@ -244,7 +244,7 @@ export const JobFunctions: React.FC = () => { ); } - closeCreateUpdateModal(); + closeJobFunctionModal(); refreshTable(); }; @@ -291,7 +291,7 @@ export const JobFunctions: React.FC = () => { type="button" aria-label="create-job-function" variant={ButtonVariant.primary} - onClick={openCreateModal} + onClick={openCreateJobFunctionModal} > {t("actions.createNew")} @@ -319,17 +319,17 @@ export const JobFunctions: React.FC = () => { // t('dialog.title.update') // t('dialog.title.new') // t('terms.jobFunction') - title={t(`dialog.title.${rowToUpdate ? "update" : "new"}`, { + title={t(`dialog.title.${jobFunctionToUpdate ? "update" : "new"}`, { what: t("terms.jobFunction").toLowerCase(), })} variant={ModalVariant.medium} - isOpen={isCreateUpdateModalOpen} - onClose={closeCreateUpdateModal} + isOpen={isJobFunctionModalOpen} + onClose={closeJobFunctionModal} > diff --git a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx index fd8a3830..23895dbf 100644 --- a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx +++ b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx @@ -111,11 +111,11 @@ export const StakeholderGroups: React.FC = () => { ); const { - isOpen: isCreateUpdateModalOpen, - entity: rowToUpdate, - create: openCreateModal, - update: openUpdateModal, - close: closeCreateUpdateModal, + isOpen: isStakeholderGroupModalOpen, + entity: stakeholderGroupToUpdate, + create: openCreateStakeholderGroupModal, + update: openUpdateStakeholderGroupModal, + close: closeStakeholderGroupModal, } = useEntityModal(); const { deleteStakeholderGroup } = useDeleteStakeholderGroup(); @@ -250,7 +250,7 @@ export const StakeholderGroups: React.FC = () => { }; const editRow = (row: StakeholderGroup) => { - openUpdateModal(row); + openUpdateStakeholderGroupModal(row); }; const deleteRow = (row: StakeholderGroup) => { @@ -313,10 +313,10 @@ export const StakeholderGroups: React.FC = () => { // Create/update Modal - const handleOnCreateUpdateModalSaved = ( + const handleOnStakeholderGroupFormSaved = ( response: AxiosResponse ) => { - if (!rowToUpdate) { + if (!stakeholderGroupToUpdate) { dispatch( alertActions.addSuccess( // t('terms.stakeholderGroup') @@ -328,7 +328,7 @@ export const StakeholderGroups: React.FC = () => { ); } - closeCreateUpdateModal(); + closeStakeholderGroupModal(); refreshTable(); }; @@ -377,7 +377,7 @@ export const StakeholderGroups: React.FC = () => { type="button" aria-label="create-stakeholder-group" variant={ButtonVariant.primary} - onClick={openCreateModal} + onClick={openCreateStakeholderGroupModal} > {t("actions.createNew")} @@ -404,17 +404,21 @@ export const StakeholderGroups: React.FC = () => { diff --git a/src/pages/controls/stakeholders/stakeholders.tsx b/src/pages/controls/stakeholders/stakeholders.tsx index 4ac3b3cf..2e386678 100644 --- a/src/pages/controls/stakeholders/stakeholders.tsx +++ b/src/pages/controls/stakeholders/stakeholders.tsx @@ -122,11 +122,11 @@ export const Stakeholders: React.FC = () => { ); const { - isOpen: isCreateUpdateModalOpen, - entity: rowToUpdate, - create: openCreateModal, - update: openUpdateModal, - close: closeCreateUpdateModal, + isOpen: isStakeholderModalOpen, + entity: stakeholderToUpdate, + create: openCreateStakeholderModal, + update: openUpdateStakeholderModal, + close: closeStakeholderModal, } = useEntityModal(); const { deleteStakeholder } = useDeleteStakeholder(); @@ -265,7 +265,7 @@ export const Stakeholders: React.FC = () => { }; const editRow = (row: Stakeholder) => { - openUpdateModal(row); + openUpdateStakeholderModal(row); }; const deleteRow = (row: Stakeholder) => { @@ -328,10 +328,10 @@ export const Stakeholders: React.FC = () => { // Create/update Modal - const handleOnCreateUpdateModalSaved = ( + const handleOnStakeholderFormSaved = ( response: AxiosResponse ) => { - if (!rowToUpdate) { + if (!stakeholderToUpdate) { dispatch( alertActions.addSuccess( // t('terms.stakeholder') @@ -343,7 +343,7 @@ export const Stakeholders: React.FC = () => { ); } - closeCreateUpdateModal(); + closeStakeholderModal(); refreshTable(); }; @@ -392,7 +392,7 @@ export const Stakeholders: React.FC = () => { type="button" aria-label="create-stakeholder" variant={ButtonVariant.primary} - onClick={openCreateModal} + onClick={openCreateStakeholderModal} > {t("actions.createNew")} @@ -419,17 +419,18 @@ 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 e1713c34..7c0ded64 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, @@ -38,17 +40,16 @@ import { useDeleteTagType, useFetchTagTypes, useDeleteTag, + useEntityModal, } from "shared/hooks"; import { getAxiosErrorMessage } from "utils/utils"; import { TagTypeSortBy, TagTypeSortByQuery } 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 +111,21 @@ export const Tags: React.FC = () => { new Map([]) ); - const [isNewTagTypeModalOpen, setIsNewTagTypeModalOpen] = useState(false); - const [rowToUpdate, setRowToUpdate] = useState(); + const { + isOpen: isTagTypeModalOpen, + entity: tagTypeToUpdate, + create: openCreateTagTypeModal, + update: openUpdateTagTypeModal, + close: closeTagTypeModal, + } = useEntityModal(); - const [isNewTagModalOpen, setIsNewTagModalOpen] = useState(false); - const [tagToUpdate, setTagToUpdate] = useState(); + const { + isOpen: isTagModalOpen, + entity: tagToUpdate, + create: openCreateTagModal, + update: openUpdateTagModal, + close: closeTagModal, + } = useEntityModal(); const { deleteTagType } = useDeleteTagType(); const { deleteTag } = useDeleteTag(); @@ -164,6 +175,10 @@ export const Tags: React.FC = () => { // + const editTagFromTable = (row: Tag) => { + openUpdateTagModal(row); + }; + const deleteTagFromTable = (row: Tag) => { dispatch( confirmDialogActions.openDialog({ @@ -237,7 +252,7 @@ export const Tags: React.FC = () => { { title: ( setRowToUpdate(item)} + onEdit={() => editRow(item)} onDelete={() => deleteRow(item)} /> ), @@ -256,7 +271,7 @@ export const Tags: React.FC = () => {
@@ -280,6 +295,10 @@ export const Tags: React.FC = () => { toggleItemExpanded(row); }; + const editRow = (row: TagType) => { + openUpdateTagTypeModal(row); + }; + const deleteRow = (row: TagType) => { dispatch( confirmDialogActions.openDialog({ @@ -338,66 +357,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")} @@ -453,7 +448,7 @@ export const Tags: React.FC = () => { type="button" aria-label="create-tag-type" variant={ButtonVariant.secondary} - onClick={handleOnOpenCreateNewTagTypeModal} + onClick={openCreateTagTypeModal} > {t("actions.createTagType")} @@ -477,27 +472,41 @@ export const Tags: React.FC = () => { /> - - - - - + + + + + + + ); }; From 75e0eaace8ad42e63c435dc6e8d45f0a8f7d9972 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Tue, 4 May 2021 10:46:47 +0200 Subject: [PATCH 7/9] remove unused imports --- .../application-dependencies-form.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx b/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx index 6bd28c7b..8a69763c 100644 --- a/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx +++ b/src/pages/application-inventory/application-list/components/application-dependencies-form/application-dependencies-form.tsx @@ -8,8 +8,6 @@ import { Form, FormGroup, Spinner, - Stack, - StackItem, Text, TextContent, } from "@patternfly/react-core"; From e5526f343f9dde30d9e705046fa28c2b5f5877e9 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Mon, 21 Jun 2021 15:12:39 +0200 Subject: [PATCH 8/9] Merge main --- public/locales/en/translation.json | 16 +-------------- public/locales/en/translation_old.json | 20 ------------------- public/locales/es/translation.json | 16 +-------------- public/locales/es/translation_old.json | 20 ------------------- .../application-list/application-list.tsx | 1 - .../business-services/business-services.tsx | 2 +- .../controls/job-functions/job-functions.tsx | 2 +- .../stakeholder-groups/stakeholder-groups.tsx | 2 +- .../controls/stakeholders/stakeholders.tsx | 2 +- src/pages/controls/tags/tags.tsx | 4 ++-- 10 files changed, 8 insertions(+), 77 deletions(-) delete mode 100644 public/locales/en/translation_old.json delete mode 100644 public/locales/es/translation_old.json diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 3f389c8c..4d283d3c 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -51,21 +51,7 @@ "delete": "Delete {{what}}?", "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}}" } }, "message": { diff --git a/public/locales/en/translation_old.json b/public/locales/en/translation_old.json deleted file mode 100644 index 8cdd9111..00000000 --- a/public/locales/en/translation_old.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "dialog": { - "title": { - "newApplication": "New application", - "newBusinessService": "New business service", - "newJobFunction": "New job function", - "newStakeholder": "New stakeholder", - "newStakeholderGroup": "New stakeholder group", - "updateApplication": "Update application", - "updateBusinessService": "Update business service", - "updateJobFunction": "Update job function", - "updateStakeholder": "Update stakeholder", - "updateStakeholderGroup": "Update stakeholder group", - "newTag": "New Tag", - "newTagType": "New tag type", - "updateTag": "Update tag", - "updateTagType": "Update tag type" - } - } -} diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index ce2338e3..7ebff1a1 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -51,21 +51,7 @@ "delete": "¿Eliminar {{what}}?", "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}}" } }, "message": { diff --git a/public/locales/es/translation_old.json b/public/locales/es/translation_old.json deleted file mode 100644 index 3380e22d..00000000 --- a/public/locales/es/translation_old.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "dialog": { - "title": { - "newApplication": "Nueva aplicación", - "newBusinessService": "Nuevo servicio de negocio", - "newJobFunction": "Nueva función laboral", - "newStakeholder": "Nuevo interesado", - "newStakeholderGroup": "Nuevo grupo de interesados", - "updateApplication": "Actualizar aplicación", - "updateBusinessService": "Actualizar servicio de negocio", - "updateJobFunction": "Actualizar función laboral", - "updateStakeholder": "Actualizar interesado", - "updateStakeholderGroup": "Actualizar grupo de interesados", - "newTag": "Nueva etiqueta", - "newTagType": "Nuevo tipo de etiqueta", - "updateTag": "Actualizar etiqueta", - "updateTagType": "Actualizar tipo de etiqueta" - } - } -} diff --git a/src/pages/application-inventory/application-list/application-list.tsx b/src/pages/application-inventory/application-list/application-list.tsx index aebf9723..1e937c0c 100644 --- a/src/pages/application-inventory/application-list/application-list.tsx +++ b/src/pages/application-inventory/application-list/application-list.tsx @@ -8,7 +8,6 @@ import { Button, ButtonVariant, Modal, - ModalVariant, PageSection, PageSectionVariants, Text, diff --git a/src/pages/controls/business-services/business-services.tsx b/src/pages/controls/business-services/business-services.tsx index 88b2cc54..5067c3db 100644 --- a/src/pages/controls/business-services/business-services.tsx +++ b/src/pages/controls/business-services/business-services.tsx @@ -106,7 +106,7 @@ export const BusinessServices: React.FC = () => { const { isOpen: isBusinessServiceModalOpen, - entity: businessServiceToUpdate, + data: businessServiceToUpdate, create: openCreateBusinessServiceModal, update: openUpdateBusinessServiceModal, close: closeBusinessServiceModal, diff --git a/src/pages/controls/job-functions/job-functions.tsx b/src/pages/controls/job-functions/job-functions.tsx index 7ea8187f..30aabb48 100644 --- a/src/pages/controls/job-functions/job-functions.tsx +++ b/src/pages/controls/job-functions/job-functions.tsx @@ -89,7 +89,7 @@ export const JobFunctions: React.FC = () => { const { isOpen: isJobFunctionModalOpen, - entity: jobFunctionToUpdate, + data: jobFunctionToUpdate, create: openCreateJobFunctionModal, update: openUpdateJobFunctionModal, close: closeJobFunctionModal, diff --git a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx index 1da6558e..3d56c93d 100644 --- a/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx +++ b/src/pages/controls/stakeholder-groups/stakeholder-groups.tsx @@ -114,7 +114,7 @@ export const StakeholderGroups: React.FC = () => { const { isOpen: isStakeholderGroupModalOpen, - entity: stakeholderGroupToUpdate, + data: stakeholderGroupToUpdate, create: openCreateStakeholderGroupModal, update: openUpdateStakeholderGroupModal, close: closeStakeholderGroupModal, diff --git a/src/pages/controls/stakeholders/stakeholders.tsx b/src/pages/controls/stakeholders/stakeholders.tsx index 401e4055..2649247c 100644 --- a/src/pages/controls/stakeholders/stakeholders.tsx +++ b/src/pages/controls/stakeholders/stakeholders.tsx @@ -125,7 +125,7 @@ export const Stakeholders: React.FC = () => { const { isOpen: isStakeholderModalOpen, - entity: stakeholderToUpdate, + data: stakeholderToUpdate, create: openCreateStakeholderModal, update: openUpdateStakeholderModal, close: closeStakeholderModal, diff --git a/src/pages/controls/tags/tags.tsx b/src/pages/controls/tags/tags.tsx index a5a8fcaa..654a85bc 100644 --- a/src/pages/controls/tags/tags.tsx +++ b/src/pages/controls/tags/tags.tsx @@ -113,7 +113,7 @@ export const Tags: React.FC = () => { const { isOpen: isTagTypeModalOpen, - entity: tagTypeToUpdate, + data: tagTypeToUpdate, create: openCreateTagTypeModal, update: openUpdateTagTypeModal, close: closeTagTypeModal, @@ -121,7 +121,7 @@ export const Tags: React.FC = () => { const { isOpen: isTagModalOpen, - entity: tagToUpdate, + data: tagToUpdate, create: openCreateTagModal, update: openUpdateTagModal, close: closeTagModal, From 65a54e94d2c3b522b2c07fb3dceea39f009e5597 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Feria Vila <2582866+carlosthe19916@users.noreply.github.com> Date: Wed, 1 Sep 2021 16:00:06 +0200 Subject: [PATCH 9/9] Fix title --- src/pages/controls/tags/tags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/controls/tags/tags.tsx b/src/pages/controls/tags/tags.tsx index 654a85bc..21e8329a 100644 --- a/src/pages/controls/tags/tags.tsx +++ b/src/pages/controls/tags/tags.tsx @@ -504,7 +504,7 @@ export const Tags: React.FC = () => { // t('dialog.title.update') // t('dialog.title.new') // t('terms.tag') - title={t(`dialog.title.${tagTypeToUpdate ? "update" : "new"}`, { + title={t(`dialog.title.${tagToUpdate ? "update" : "new"}`, { what: t("terms.tag").toLowerCase(), })} variant={ModalVariant.medium}