🐛 Update migration wave form & modal styles (#1563)

Resolves https://issues.redhat.com/browse/MTA-742 --------- Signed-off-by: ibolton336 <[email protected]>
konveyor · Nov 22, 2023 · 375db82 · 375db82
1 parent bac9ebe
commit 375db82
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 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
@@ -11,8 +11,6 @@ import {
   Grid,
   GridItem,
   DatePicker,
-  Level,
-  LevelItem,
 } from "@patternfly/react-core";
 
 import { useFetchStakeholders } from "@app/queries/stakeholders";
@@ -289,71 +287,65 @@ 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={3}>
+          <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.body}
               />
-            </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={1}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          to
+        </GridItem>
+
+        <GridItem span={8}>
+          <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.body}
+                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
@@ -584,7 +584,7 @@ export const MigrationWaves: React.FC = () => {
                 what: t("terms.migrationWave").toLowerCase(),
               })
         }
-        variant={ModalVariant.small}
+        variant={ModalVariant.medium}
         isOpen={isWaveModalOpen}
         onClose={closeWaveModal}
       >