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";