🐛 Decouple form actions from ApplicationForm

Split ApplicationForm into a data hook and view component.
Use extracted submit and cancel actions inside Modal's footer.

Resolves: #1708
Signed-off-by: Radoslaw Szwajkowski <[email protected]>

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";
 
 export const ApplicationsTable: React.FC = () => {
   const { t } = useTranslation();
@@ -1105,21 +1105,12 @@ export const ApplicationsTable: React.FC = () => {
             />
           )}
         </Modal>
-        <Modal
-          title={
-            createUpdateApplications
-              ? t("dialog.title.updateApplication")
-              : t("dialog.title.newApplication")
-          }
-          variant="medium"
-          isOpen={isCreateUpdateApplicationsModalOpen}
-          onClose={() => setSaveApplicationModalState(null)}
-        >
-          <ApplicationForm
+        {isCreateUpdateApplicationsModalOpen && (
+          <ApplicationFormModal
             application={createUpdateApplications}
             onClose={() => setSaveApplicationModalState(null)}
           />
-        </Modal>
+        )}
         <SimpleDocumentViewerModal
           title={`Analysis details for ${taskToView?.name}`}
           documentId={taskToView?.task}

client/src/app/pages/applications/components/application-form/__tests__/application-form.test.tsx

@@ -13,12 +13,12 @@ import {
   TAG_CATEGORIES,
 } from "@app/api/rest";
 import mock from "@app/test-config/mockInstance";
-import { ApplicationForm } from "../application-form";
 import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom/extend-expect";
 import "@testing-library/jest-dom";
 import { BusinessService } from "@app/api/models";
+import { ApplicationFormModal } from "../application-form-modal";
 
 const data: any[] = [];
 mock.onGet(`${BUSINESS_SERVICES}`).reply(200, data);
@@ -34,7 +34,9 @@ describe("Component: application-form", () => {
 
     mock.onGet(`${BUSINESS_SERVICES}`).reply(200, businessServices);
 
-    render(<ApplicationForm application={null} onClose={mockChangeValue} />);
+    render(
+      <ApplicationFormModal application={null} onClose={mockChangeValue} />
+    );
     const nameInput = await screen.findByLabelText("Name *");
     fireEvent.change(nameInput, {
       target: { value: "app-name" },

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<ApplicationFormModalProps> = ({
+  application,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const formProps = useApplicationFormHook({ application, onClose });
+  return (
+    <Modal
+      title={
+        application
+          ? t("dialog.title.updateApplication")
+          : t("dialog.title.newApplication")
+      }
+      variant="medium"
+      isOpen={true}
+      onClose={onClose}
+      actions={[
+        <Button
+          key="submit"
+          id="submit"
+          aria-label="submit"
+          variant={ButtonVariant.primary}
+          isDisabled={formProps.isSubmitDisabled}
+          onClick={formProps.onSubmit()}
+        >
+          {!application ? t("actions.create") : t("actions.save")}
+        </Button>,
+        <Button
+          key="cancel"
+          id="cancel"
+          aria-label="cancel"
+          variant={ButtonVariant.link}
+          isDisabled={formProps.isCancelDisabled}
+          onClick={onClose}
+        >
+          {t("actions.cancel")}
+        </Button>,
+      ]}
+    >
+      <ApplicationForm {...formProps} />
+    </Modal>
+  );
+};

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<ApplicationFormProps> = ({
+export const useApplicationFormHook = ({
   application,
   onClose,
-}) => {
+}: ApplicationFormProps) => {
   const { t } = useTranslation();
   const {
     existingApplications,
@@ -316,9 +313,47 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
       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<typeof useApplicationFormHook>
+> = ({
+  onSubmit,
+  setBasicExpanded,
+  isBasicExpanded,
+  control,
+  tagItems,
+  stakeholdersOptions,
+  setSourceCodeExpanded,
+  isSourceCodeExpanded,
+  kindOptions,
+  setBinaryExpanded,
+  isBinaryExpanded,
+  stakeholders,
+  businessServiceOptions,
+}) => {
+  const { t } = useTranslation();
   return (
-    <Form onSubmit={handleSubmit(onValidSubmit)}>
+    <Form onSubmit={onSubmit}>
       <ExpandableSection
         toggleText={"Basic information"}
         className="toggle"
@@ -623,27 +658,6 @@ export const ApplicationForm: React.FC<ApplicationFormProps> = ({
           />
         </div>
       </ExpandableSection>
-      <ActionGroup>
-        <Button
-          type="submit"
-          id="submit"
-          aria-label="submit"
-          variant={ButtonVariant.primary}
-          isDisabled={!isValid || isSubmitting || isValidating || !isDirty}
-        >
-          {!application ? t("actions.create") : t("actions.save")}
-        </Button>
-        <Button
-          type="button"
-          id="cancel"
-          aria-label="cancel"
-          variant={ButtonVariant.link}
-          isDisabled={isSubmitting || isValidating}
-          onClick={onClose}
-        >
-          {t("actions.cancel")}
-        </Button>
-      </ActionGroup>
     </Form>
   );
 };

client/src/app/pages/applications/components/application-form/index.ts

@@ -1 +1 @@
-export { ApplicationForm } from "./application-form";
+export { ApplicationFormModal } from "./application-form-modal";