CNV-32374: Move template params to Catalog drawer

Move setting of the template parameters that used to be present in
"Customize VirtualMachine" page one step back - to the Catalog drawer.
Remove "Customize VirtualMachine" page.

Fixes https://issues.redhat.com/browse/CNV-32374

locales/en/plugin__kubevirt-plugin.json

@@ -312,7 +312,6 @@
   "Customize and create VirtualMachine": "Customize and create VirtualMachine",
   "Customize template parameters": "Customize template parameters",
   "Customize VirtualMachine": "Customize VirtualMachine",
-  "Customize VirtualMachine parameters": "Customize VirtualMachine parameters",
   "CX series": "CX series",
   "CX Series": "CX Series",
   "cx1": "cx1",
@@ -1069,7 +1068,7 @@
   "This is a CD-ROM boot source": "This is a CD-ROM boot source",
   "This key will override the SSH key secret set on the template": "This key will override the SSH key secret set on the template",
   "This Persistent Volume Claim will be created using a DataVolume through Containerized Data Importer (CDI)": "This Persistent Volume Claim will be created using a DataVolume through Containerized Data Importer (CDI)",
-  "This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.": "This Template requires some additional parameters. Click the Customize VirtualMachine button to complete the creation flow.",
+  "This Template requires some additional parameters.": "This Template requires some additional parameters.",
   "This Template supports quick create VirtualMachine": "This Template supports quick create VirtualMachine",
   "This user is not allowed to edit this boot source": "This user is not allowed to edit this boot source",
   "This VirtualMachine has": "This VirtualMachine has",

src/views/catalog/Catalog.tsx

@@ -1,32 +1,23 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 import CreateVMHorizontalNav from './CreateVMHorizontalNav/CreateVMHorizontalNav';
-import CustomizeVirtualMachine from './customize/CustomizeVirtualMachine';
 import { WizardVMContextProvider } from './utils/WizardVMContext';
 import Wizard from './wizard/Wizard';
 
-const Catalog: React.FC = () => {
-  return (
-    <WizardVMContextProvider>
-      <Switch>
-        <Route
-          path={[
-            '/k8s/ns/:ns/templatescatalog/customize',
-            '/k8s/all-namespaces/templatescatalog/customize',
-          ]}
-          component={CustomizeVirtualMachine}
-        />
-        <Route
-          path={[
-            '/k8s/ns/:ns/templatescatalog/review',
-            '/k8s/all-namespaces/templatescatalog/review',
-          ]}
-          component={Wizard}
-        />
-        <Route component={CreateVMHorizontalNav} />
-      </Switch>
-    </WizardVMContextProvider>
-  );
-};
+const Catalog: FC = () => (
+  <WizardVMContextProvider>
+    <Switch>
+      <Route
+        path={[
+          '/k8s/ns/:ns/templatescatalog/review',
+          '/k8s/all-namespaces/templatescatalog/review',
+        ]}
+        component={Wizard}
+      />
+      <Route component={CreateVMHorizontalNav} />
+    </Switch>
+  </WizardVMContextProvider>
+);
+
 export default Catalog;

src/views/catalog/customize/components/CustomizeForms/CustomizeForm.tsx

@@ -1,15 +1,12 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { getTemplateNameParameterValue } from '@catalog/customize/utils';
 import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
-import { useURLParams } from '@kubevirt-utils/hooks/useURLParams';
 import { Form } from '@patternfly/react-core';
 
-import { buildFields, getVirtualMachineNameField } from '../../utils';
+import { buildFields } from '../../utils';
 import { ExpandableOptionsFields } from '../ExpandableOptionalFields';
 import { FieldGroup } from '../FieldGroup';
-import { FormActionGroup } from '../FormActionGroup';
 import { FormError } from '../FormError';
 
 import { useCustomizeFormSubmit } from './useCustomizeFormSubmit';
@@ -22,26 +19,19 @@ type CustomizeFormProps = {
 export const CustomizeForm: FC<CustomizeFormProps> = ({ template }) => {
   const methods = useForm();
 
-  const { error, loaded, onSubmit } = useCustomizeFormSubmit({ template });
+  const { error, onSubmit } = useCustomizeFormSubmit({ template });
   const [requiredFields, optionalFields] = buildFields(template);
 
-  const { params } = useURLParams();
-  const vmName = params.get('vmName') || getTemplateNameParameterValue(template);
-
-  const nameField = useMemo(() => getVirtualMachineNameField(vmName), [vmName]);
-
   return (
     <FormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit(onSubmit)}>
-        <FieldGroup field={nameField} showError={error} />
         {requiredFields?.map((field) => (
           <FieldGroup field={field} key={field.name} showError={error} />
         ))}
 
         <ExpandableOptionsFields optionalFields={optionalFields} />
 
         <FormError error={error} />
-        <FormActionGroup loading={!loaded} />
       </Form>
     </FormProvider>
   );

src/views/catalog/customize/components/CustomizeForms/CustomizeFormWithStorage.tsx

@@ -1,10 +1,8 @@
 import React, { FC, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { getTemplateNameParameterValue } from '@catalog/customize/utils';
 import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
 import { V1beta1DataVolumeSpec, V1ContainerDiskSource } from '@kubevirt-ui/kubevirt-api/kubevirt';
-import { useURLParams } from '@kubevirt-utils/hooks/useURLParams';
 import {
   getTemplateOS,
   getTemplateVirtualMachineObject,
@@ -14,15 +12,10 @@ import {
 import { Form } from '@patternfly/react-core';
 
 import { addCDToTemplate } from '../../cd';
-import {
-  buildFields,
-  getVirtualMachineNameField,
-  overrideVirtualMachineDataVolumeSpec,
-} from '../../utils';
+import { buildFields, overrideVirtualMachineDataVolumeSpec } from '../../utils';
 import { ExpandableCustomizeSourceSection } from '../CustomizeSource/ExpandableCustomizeSourceSection';
 import { ExpandableOptionsFields } from '../ExpandableOptionalFields';
 import { FieldGroup } from '../FieldGroup';
-import { FormActionGroup } from '../FormActionGroup';
 import { FormError } from '../FormError';
 
 import { useCustomizeFormSubmit } from './useCustomizeFormSubmit';
@@ -37,8 +30,6 @@ const CustomizeFormWithStorage: FC<CustomizeFormWithStorageProps> = ({
   template,
 }) => {
   const methods = useForm();
-  const { params } = useURLParams();
-  const vmName = params.get('vmName') || getTemplateNameParameterValue(template);
 
   const [diskSource, setDiskSource] = useState<V1beta1DataVolumeSpec>();
   const [cdSource, setCDSource] = useState<V1beta1DataVolumeSpec | V1ContainerDiskSource>();
@@ -62,7 +53,7 @@ const CustomizeFormWithStorage: FC<CustomizeFormWithStorageProps> = ({
     getTemplateOS(template) === OS_NAME_TYPES.windows,
   );
 
-  const { cdUpload, diskUpload, error, loaded, onCancel, onSubmit } = useCustomizeFormSubmit({
+  const { cdUpload, diskUpload, error, onSubmit } = useCustomizeFormSubmit({
     cdSource,
     diskSource,
     template: templateWithSources,
@@ -71,13 +62,9 @@ const CustomizeFormWithStorage: FC<CustomizeFormWithStorageProps> = ({
 
   const [requiredFields, optionalFields] = useMemo(() => buildFields(template), [template]);
 
-  const nameField = useMemo(() => getVirtualMachineNameField(vmName), [vmName]);
-
   return (
     <FormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit(onSubmit)}>
-        <FieldGroup field={nameField} showError={error} />
-
         {requiredFields?.map((field) => (
           <FieldGroup field={field} key={field.name} showError={error} />
         ))}
@@ -98,7 +85,6 @@ const CustomizeFormWithStorage: FC<CustomizeFormWithStorageProps> = ({
         <ExpandableOptionsFields optionalFields={optionalFields} />
 
         <FormError error={error} />
-        <FormActionGroup loading={!loaded} onCancel={onCancel} />
       </Form>
     </FormProvider>
   );

src/views/catalog/customize/components/ExpandableOptionalFields.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { FC, useState } from 'react';
 
 import { TemplateParameter } from '@kubevirt-ui/kubevirt-api/console';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
@@ -12,11 +12,9 @@ type ExpandableOptionsFieldsProps = {
   optionalFields: TemplateParameter[];
 };
 
-export const ExpandableOptionsFields: React.FC<ExpandableOptionsFieldsProps> = ({
-  optionalFields,
-}) => {
+export const ExpandableOptionsFields: FC<ExpandableOptionsFieldsProps> = ({ optionalFields }) => {
   const { t } = useKubevirtTranslation();
-  const [optionalFieldsExpanded, setOptionalFieldsExpanded] = React.useState(false);
+  const [optionalFieldsExpanded, setOptionalFieldsExpanded] = useState(false);
 
   if (!optionalFields || optionalFields.length === 0) return null;