NCL-9058 Add skip Brew Push option to Close Milestone modal

Author: patrikk0123

src/common/productMilestoneCloseRequestEntityAttributes.ts

@@ -0,0 +1,11 @@
+import { MilestoneCloseRequest } from 'pnc-api-types-ts';
+
+import { TEntityAttributes } from 'common/entityAttributes';
+
+export const productMilestoneCloseRequestEntityAttributes = {
+  skipBrewPush: {
+    id: 'skipBrewPush',
+    title: 'Skip Brew push',
+    tooltip: 'Brew push of the Builds in the Milestone will be skipped and the Milestone will be closed immediately.',
+  },
+} as const satisfies TEntityAttributes<MilestoneCloseRequest>;

src/components/ProductMilestoneCloseModal/ProductMilestoneCloseModal.tsx

@@ -1,11 +1,24 @@
+import { Form, FormGroup, Switch } from '@patternfly/react-core';
+
 import { ProductMilestone } from 'pnc-api-types-ts';
 
+import { productMilestoneCloseRequestEntityAttributes } from 'common/productMilestoneCloseRequestEntityAttributes';
+
+import { IFieldConfigs, IFieldValues, useForm } from 'hooks/useForm';
 import { useServiceContainer } from 'hooks/useServiceContainer';
 
 import { ActionModal } from 'components/ActionModal/ActionModal';
+import { FormInput } from 'components/FormInput/FormInput';
+import { TooltipWrapper } from 'components/TooltipWrapper/TooltipWrapper';
 
 import * as productMilestoneApi from 'services/productMilestoneApi';
 
+const fieldConfigs = {
+  skipBrewPush: {
+    value: false,
+  },
+} satisfies IFieldConfigs;
+
 export interface IProductMilestoneCloseModalProps {
   isModalOpen: boolean;
   toggleModal: () => void;
@@ -15,9 +28,11 @@ export interface IProductMilestoneCloseModalProps {
 export const ProductMilestoneCloseModal = ({ isModalOpen, toggleModal, productMilestone }: IProductMilestoneCloseModalProps) => {
   const serviceContainerProductMilestoneClose = useServiceContainer(productMilestoneApi.closeProductMilestone, 0);
 
-  const confirmModal = () => {
+  const { register, handleSubmit, isSubmitDisabled, hasFormChanged } = useForm();
+
+  const confirmModal = (data: IFieldValues) => {
     return serviceContainerProductMilestoneClose.run({
-      serviceData: { id: productMilestone.id },
+      serviceData: { id: productMilestone.id, data: { skipBrewPush: data.skipBrewPush } },
       onError: () => console.error('Failed to close Product Milestone.'),
     });
   };
@@ -28,11 +43,37 @@ export const ProductMilestoneCloseModal = ({ isModalOpen, toggleModal, productMi
       actionTitle="Close Milestone"
       isOpen={isModalOpen}
       onToggle={toggleModal}
-      onSubmit={confirmModal}
+      isSubmitDisabled={isSubmitDisabled}
+      wereSubmitDataChanged={hasFormChanged}
+      onSubmit={handleSubmit(confirmModal)}
       serviceContainer={serviceContainerProductMilestoneClose}
-      modalVariant="medium"
+      modalVariant="large"
     >
-      Product Milestone <b>{productMilestone.version}</b> will be closed.
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormGroup
+          label={productMilestoneCloseRequestEntityAttributes.skipBrewPush.title}
+          fieldId={productMilestoneCloseRequestEntityAttributes.skipBrewPush.id}
+          labelIcon={<TooltipWrapper tooltip={productMilestoneCloseRequestEntityAttributes.skipBrewPush.tooltip} />}
+        >
+          <FormInput<boolean>
+            {...register<boolean>(productMilestoneCloseRequestEntityAttributes.skipBrewPush.id, fieldConfigs.skipBrewPush)}
+            render={({ value, ...rest }) => (
+              <Switch
+                id={productMilestoneCloseRequestEntityAttributes.skipBrewPush.id}
+                name={productMilestoneCloseRequestEntityAttributes.skipBrewPush.id}
+                label="Enabled"
+                labelOff="Disabled"
+                isChecked={value}
+                {...rest}
+              />
+            )}
+          />
+        </FormGroup>
+      </Form>
     </ActionModal>
   );
 };

src/services/productMilestoneApi.ts

@@ -223,8 +223,11 @@ export const getProductMilestoneComparison = (
  *  - id - Product Milestone ID
  * @param requestConfig - Axios based request config
  */
-export const closeProductMilestone = ({ id }: IProductMilestoneApiData, requestConfig: AxiosRequestConfig = {}) => {
-  return pncClient.getHttpClient().post<undefined>(`/product-milestones/${id}/close`, undefined, requestConfig);
+export const closeProductMilestone = (
+  { id, data }: { id: string; data: { skipBrewPush: boolean } },
+  requestConfig: AxiosRequestConfig = {}
+) => {
+  return pncClient.getHttpClient().post<undefined>(`/product-milestones/${id}/close`, data, requestConfig);
 };
 
 /**