From 9b58b4d96e1c4030ddf810608efb99059825de95 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Tue, 21 Nov 2023 15:40:54 -0500
Subject: [PATCH 1/3] :bug: Update migration wave styles

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../components/migration-wave-form.tsx        | 119 ++++++++----------
 .../pages/migration-waves/migration-waves.tsx |   3 +-
 2 files changed, 56 insertions(+), 66 deletions(-)

diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index 337d071c8c..61b0f435f3 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -11,8 +11,6 @@ import {
   Grid,
   GridItem,
   DatePicker,
-  Level,
-  LevelItem,
 } from "@patternfly/react-core";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
@@ -289,71 +287,62 @@ export const WaveForm: React.FC<WaveFormProps> = ({
             fieldId="name"
           />
         </GridItem>
-        <Level>
-          <LevelItem>
-            <GridItem span={5}>
-              <HookFormPFGroupController
-                control={control}
-                name="startDateStr"
-                label="Potential Start Date"
-                fieldId="startDateStr"
-                isRequired
-                renderInput={({ field: { value, name, onChange } }) => (
-                  <DatePicker
-                    aria-label={name}
-                    onChange={(e, val) => {
-                      onChange(val);
-                      trigger("endDateStr"); // Validation of endDateStr depends on startDateStr
-                    }}
-                    placeholder="MM/DD/YYYY"
-                    value={value}
-                    dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
-                    dateParse={(val) => dayjs(val).toDate()}
-                    validators={[startDateRangeValidator]}
-                    appendTo={() =>
-                      document.getElementById(
-                        "create-edit-migration-wave-modal"
-                      ) as HTMLElement
-                    }
-                  />
-                )}
+        <GridItem span={6}>
+          <HookFormPFGroupController
+            control={control}
+            name="startDateStr"
+            label="Potential Start Date"
+            fieldId="startDateStr"
+            isRequired
+            renderInput={({ field: { value, name, onChange } }) => (
+              <DatePicker
+                aria-label={name}
+                onChange={(e, val) => {
+                  onChange(val);
+                  trigger("endDateStr"); // Validation of endDateStr depends on startDateStr
+                }}
+                placeholder="MM/DD/YYYY"
+                value={value}
+                dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
+                dateParse={(val) => dayjs(val).toDate()}
+                validators={[startDateRangeValidator]}
+                appendTo={() =>
+                  document.getElementById(
+                    "create-edit-migration-wave-modal"
+                  ) as HTMLElement
+                }
               />
-            </GridItem>
-          </LevelItem>
-          <LevelItem>
-            <GridItem span={2}>to</GridItem>
-          </LevelItem>
-          <LevelItem>
-            <GridItem span={5}>
-              <HookFormPFGroupController
-                control={control}
-                name="endDateStr"
-                label="Potential End Date"
-                fieldId="endDateStr"
-                isRequired
-                renderInput={({ field: { value, name, onChange } }) => (
-                  <DatePicker
-                    aria-label={name}
-                    onChange={(e, val) => {
-                      onChange(val);
-                    }}
-                    placeholder="MM/DD/YYYY"
-                    value={value}
-                    dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
-                    dateParse={(val) => dayjs(val).toDate()}
-                    validators={[endDateRangeValidator]}
-                    appendTo={() =>
-                      document.getElementById(
-                        "create-edit-migration-wave-modal"
-                      ) as HTMLElement
-                    }
-                    isDisabled={!!formErrors.startDateStr}
-                  />
-                )}
+            )}
+          />
+        </GridItem>
+        <GridItem span={6}>
+          <HookFormPFGroupController
+            control={control}
+            name="endDateStr"
+            label="Potential End Date"
+            fieldId="endDateStr"
+            isRequired
+            renderInput={({ field: { value, name, onChange } }) => (
+              <DatePicker
+                aria-label={name}
+                onChange={(e, val) => {
+                  onChange(val);
+                }}
+                placeholder="MM/DD/YYYY"
+                value={value}
+                dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
+                dateParse={(val) => dayjs(val).toDate()}
+                validators={[endDateRangeValidator]}
+                appendTo={() =>
+                  document.getElementById(
+                    "create-edit-migration-wave-modal"
+                  ) as HTMLElement
+                }
+                isDisabled={!!formErrors.startDateStr}
               />
-            </GridItem>
-          </LevelItem>
-        </Level>
+            )}
+          />
+        </GridItem>
         <GridItem span={12}>
           <HookFormPFGroupController
             control={control}
diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
index a88365a2a2..9659f02f55 100644
--- a/client/src/app/pages/migration-waves/migration-waves.tsx
+++ b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -584,9 +584,10 @@ export const MigrationWaves: React.FC = () => {
                 what: t("terms.migrationWave").toLowerCase(),
               })
         }
-        variant={ModalVariant.small}
+        variant={ModalVariant.medium}
         isOpen={isWaveModalOpen}
         onClose={closeWaveModal}
+        style={{ minHeight: "62vh" }}
       >
         <WaveForm
           migrationWave={migrationWaveToEdit ? migrationWaveToEdit : undefined}

From 6baa60d97dda3dd3c15c9603d7a45b614ce9c060 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Wed, 22 Nov 2023 14:58:28 -0500
Subject: [PATCH 2/3] PR updates

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../components/migration-wave-form.tsx               | 12 ++----------
 .../app/pages/migration-waves/migration-waves.tsx    |  1 -
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index 61b0f435f3..f1e0394edf 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -306,11 +306,7 @@ export const WaveForm: React.FC<WaveFormProps> = ({
                 dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
                 dateParse={(val) => dayjs(val).toDate()}
                 validators={[startDateRangeValidator]}
-                appendTo={() =>
-                  document.getElementById(
-                    "create-edit-migration-wave-modal"
-                  ) as HTMLElement
-                }
+                appendTo={() => document.body}
               />
             )}
           />
@@ -333,11 +329,7 @@ export const WaveForm: React.FC<WaveFormProps> = ({
                 dateFormat={(val) => dayjs(val).format("MM/DD/YYYY")}
                 dateParse={(val) => dayjs(val).toDate()}
                 validators={[endDateRangeValidator]}
-                appendTo={() =>
-                  document.getElementById(
-                    "create-edit-migration-wave-modal"
-                  ) as HTMLElement
-                }
+                appendTo={() => document.body}
                 isDisabled={!!formErrors.startDateStr}
               />
             )}
diff --git a/client/src/app/pages/migration-waves/migration-waves.tsx b/client/src/app/pages/migration-waves/migration-waves.tsx
index 9659f02f55..586f526b7e 100644
--- a/client/src/app/pages/migration-waves/migration-waves.tsx
+++ b/client/src/app/pages/migration-waves/migration-waves.tsx
@@ -587,7 +587,6 @@ export const MigrationWaves: React.FC = () => {
         variant={ModalVariant.medium}
         isOpen={isWaveModalOpen}
         onClose={closeWaveModal}
-        style={{ minHeight: "62vh" }}
       >
         <WaveForm
           migrationWave={migrationWaveToEdit ? migrationWaveToEdit : undefined}

From c5eb9560f4bd33f0692e5b221c18c067e2de0cf1 Mon Sep 17 00:00:00 2001
From: ibolton336 <ibolton@redhat.com>
Date: Wed, 22 Nov 2023 15:10:23 -0500
Subject: [PATCH 3/3] Add back in the "to"

Signed-off-by: ibolton336 <ibolton@redhat.com>
---
 .../components/migration-wave-form.tsx            | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
index f1e0394edf..3788539a75 100644
--- a/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
+++ b/client/src/app/pages/migration-waves/components/migration-wave-form.tsx
@@ -287,7 +287,7 @@ export const WaveForm: React.FC<WaveFormProps> = ({
             fieldId="name"
           />
         </GridItem>
-        <GridItem span={6}>
+        <GridItem span={3}>
           <HookFormPFGroupController
             control={control}
             name="startDateStr"
@@ -311,7 +311,18 @@ export const WaveForm: React.FC<WaveFormProps> = ({
             )}
           />
         </GridItem>
-        <GridItem span={6}>
+        <GridItem
+          span={1}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          to
+        </GridItem>
+
+        <GridItem span={8}>
           <HookFormPFGroupController
             control={control}
             name="endDateStr"