🐛 New application form has basic and source sections expanded by default (konveyor#2585)

Resolves: https://issues.redhat.com/browse/MTA-6003

The new application form should have the basic details and the source
code sections expanded by default. The other sections should be
collapsed by default.

When editing an existing application, the sections that have data should
be expanded by default.

UI tests PR: 1660

Signed-off-by: Scott J Dickerson <[email protected]>

Author: sjd78

client/src/app/pages/applications/application-form/application-form-modal.tsx

@@ -65,7 +65,7 @@ export const ApplicationFormModal: React.FC<ApplicationFormModalProps> = ({
         </Button>,
       ]}
     >
-      <ApplicationForm form={form} data={data} />
+      <ApplicationForm application={application} form={form} data={data} />
     </Modal>
   );
 };

client/src/app/pages/applications/application-form/application-form.tsx

@@ -22,10 +22,12 @@ import { QuestionCircleIcon } from "@patternfly/react-icons";
 import { SchemaDefinedField } from "@app/components/schema-defined-fields/SchemaDefinedFields";
 import { useApplicationForm } from "./useApplicationForm";
 import { useApplicationFormData } from "./useApplicationFormData";
+import { Application } from "@app/api/models";
 
 export const ApplicationForm: React.FC<{
   form: ReturnType<typeof useApplicationForm>["form"];
   data: ReturnType<typeof useApplicationFormData>;
+  application: Application | null;
 }> = ({
   form: { control, trigger, getValues },
   data: {
@@ -36,6 +38,7 @@ export const ApplicationForm: React.FC<{
     businessServiceOptions,
     sourcePlatformOptions,
   },
+  application,
 }) => {
   const { t } = useTranslation();
   const watchKind = useWatch({ control, name: "kind" });
@@ -45,19 +48,24 @@ export const ApplicationForm: React.FC<{
   const [isBasicExpanded, setBasicExpanded] = React.useState(true);
 
   const [isSourceCodeExpanded, setSourceCodeExpanded] = React.useState(
-    !!values.kind && !!values.sourceRepository
+    application === null || (!!values.kind && !!values.sourceRepository)
   );
 
   const [isBinaryExpanded, setBinaryExpanded] = React.useState(
-    !!values.group && !!values.artifact && !!values.version
+    application !== null &&
+      !!values.group &&
+      !!values.artifact &&
+      !!values.version
   );
 
   const [isSourcePlatformExpanded, setSourcePlatformExpanded] = React.useState(
-    values.id === undefined || !!values.sourcePlatform
+    application !== null && !!values.sourcePlatform
   );
 
   const [isAssetRepositoryExpanded, setAssetRepositoryExpanded] =
-    React.useState(!!values.assetKind && !!values.assetRepository);
+    React.useState(
+      application !== null && !!values.assetKind && !!values.assetRepository
+    );
 
   return (
     <Form>

client/src/app/pages/applications/application-form/useApplicationForm.ts

@@ -17,6 +17,7 @@ import { jsonSchemaToYupSchema } from "@app/components/schema-defined-fields/uti
 import { useFetchPlatformCoordinatesSchema } from "@app/queries/schemas";
 import { useApplicationFormData } from "./useApplicationFormData";
 
+type RepositoryKind = "git" | "subversion" | "";
 export interface FormValues {
   id?: number;
   name: string;
@@ -26,15 +27,15 @@ export interface FormValues {
   tags: TagItemType[];
   owner: string | null;
   contributors: string[];
-  kind: string;
+  kind: RepositoryKind;
   sourceRepository: string;
   branch: string;
   rootPath: string;
   group: string;
   artifact: string;
   version: string;
   packaging: string;
-  assetKind: string;
+  assetKind: RepositoryKind;
   assetRepository: string;
   assetBranch: string;
   assetRootPath: string;
@@ -230,7 +231,7 @@ export const useApplicationForm = ({
       contributors:
         application?.contributors?.map((contributor) => contributor.name) || [],
 
-      kind: application?.repository?.kind || "",
+      kind: (application?.repository?.kind ?? "") as RepositoryKind,
       sourceRepository: application?.repository?.url || "",
       branch: application?.repository?.branch || "",
       rootPath: application?.repository?.path || "",
@@ -239,7 +240,7 @@ export const useApplicationForm = ({
       version: getBinaryInitialValue(application, "version"),
       packaging: getBinaryInitialValue(application, "packaging"),
 
-      assetKind: application?.assets?.kind || "",
+      assetKind: (application?.assets?.kind ?? "") as RepositoryKind,
       assetRepository: application?.assets?.url || "",
       assetBranch: application?.assets?.branch || "",
       assetRootPath: application?.assets?.path || "",