diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx index 40024f3a50..43535cc132 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -91,7 +91,6 @@ import { useFetchTagsWithTagItems } from "@app/queries/tags"; // Relative components import { ApplicationAssessmentStatus } from "../components/application-assessment-status"; import { ApplicationBusinessService } from "../components/application-business-service"; -import { ApplicationForm } from "../components/application-form"; import { ImportApplicationsForm } from "../components/import-applications-form"; import { ConditionalRender } from "@app/components/ConditionalRender"; import { NoDataEmptyState } from "@app/components/NoDataEmptyState"; @@ -108,6 +107,7 @@ import { ApplicationIdentityForm } from "../components/application-identity-form import { ApplicationReviewStatus } from "../components/application-review-status/application-review-status"; import { KebabDropdown } from "@app/components/KebabDropdown"; import { useFetchArchetypes } from "@app/queries/archetypes"; +import { ApplicationFormModal } from "../components/application-form/application-form-modal"; export const ApplicationsTable: React.FC = () => { const { t } = useTranslation(); @@ -1105,21 +1105,12 @@ export const ApplicationsTable: React.FC = () => { /> )} - setSaveApplicationModalState(null)} - > - setSaveApplicationModalState(null)} /> - + )} { mock.onGet(`${BUSINESS_SERVICES}`).reply(200, businessServices); - render(); + render( + + ); const nameInput = await screen.findByLabelText("Name *"); fireEvent.change(nameInput, { target: { value: "app-name" }, diff --git a/client/src/app/pages/applications/components/application-form/application-form-modal.tsx b/client/src/app/pages/applications/components/application-form/application-form-modal.tsx new file mode 100644 index 0000000000..89cfe65de8 --- /dev/null +++ b/client/src/app/pages/applications/components/application-form/application-form-modal.tsx @@ -0,0 +1,54 @@ +import * as React from "react"; +import { Button, ButtonVariant, Modal } from "@patternfly/react-core"; +import { ApplicationForm, useApplicationFormHook } from "./application-form"; +import { Application } from "@app/api/models"; +import { useTranslation } from "react-i18next"; + +export interface ApplicationFormModalProps { + application: Application | null; + onClose: () => void; +} + +export const ApplicationFormModal: React.FC = ({ + application, + onClose, +}) => { + const { t } = useTranslation(); + const formProps = useApplicationFormHook({ application, onClose }); + return ( + + {!application ? t("actions.create") : t("actions.save")} + , + , + ]} + > + + + ); +}; diff --git a/client/src/app/pages/applications/components/application-form/application-form.tsx b/client/src/app/pages/applications/components/application-form/application-form.tsx index 1033d468fe..35a63c564a 100644 --- a/client/src/app/pages/applications/components/application-form/application-form.tsx +++ b/client/src/app/pages/applications/components/application-form/application-form.tsx @@ -3,9 +3,6 @@ import { useTranslation } from "react-i18next"; import { AxiosError } from "axios"; import { object, string } from "yup"; import { - ActionGroup, - Button, - ButtonVariant, ExpandableSection, Form, Popover, @@ -70,10 +67,10 @@ export interface ApplicationFormProps { onClose: () => void; } -export const ApplicationForm: React.FC = ({ +export const useApplicationFormHook = ({ application, onClose, -}) => { +}: ApplicationFormProps) => { const { t } = useTranslation(); const { existingApplications, @@ -316,9 +313,47 @@ export const ApplicationForm: React.FC = ({ toString: () => `Subversion`, }, ]; + return { + handleSubmit, + onValidSubmit, + setBasicExpanded, + isBasicExpanded, + control, + tagItems, + stakeholdersOptions, + setSourceCodeExpanded, + isSourceCodeExpanded, + kindOptions, + setBinaryExpanded, + isBinaryExpanded, + isSubmitDisabled: !isValid || isSubmitting || isValidating || !isDirty, + isCancelDisabled: isSubmitting || isValidating, + stakeholders, + businessServiceOptions, + onSubmit: () => handleSubmit(onValidSubmit), + }; +}; +export const ApplicationForm: React.FC< + ReturnType +> = ({ + onSubmit, + setBasicExpanded, + isBasicExpanded, + control, + tagItems, + stakeholdersOptions, + setSourceCodeExpanded, + isSourceCodeExpanded, + kindOptions, + setBinaryExpanded, + isBinaryExpanded, + stakeholders, + businessServiceOptions, +}) => { + const { t } = useTranslation(); return ( -
+ = ({ /> - - - -
); }; diff --git a/client/src/app/pages/applications/components/application-form/index.ts b/client/src/app/pages/applications/components/application-form/index.ts index ade6da34ab..69465af837 100644 --- a/client/src/app/pages/applications/components/application-form/index.ts +++ b/client/src/app/pages/applications/components/application-form/index.ts @@ -1 +1 @@ -export { ApplicationForm } from "./application-form"; +export { ApplicationFormStandalone as ApplicationForm } from "./application-form";