From a3cda0bf4261e761a6809f3efeb1dac24b0a090b Mon Sep 17 00:00:00 2001
From: Jethary Rader <66035149+jerader@users.noreply.github.com>
Date: Tue, 19 Mar 2024 16:21:40 -0400
Subject: [PATCH] refactor(protocol-designer): a few style fixes with modal
 size and alert text (#14683)

closes RQA-2520 RQA-2521 RQA-2525 RQA-2523 RQA-2528
---
 .../StepEditForm/forms/MagnetForm.tsx         |  10 +-
 .../forms/MoveLabwareForm/index.tsx           |   1 +
 .../CreateFileWizard/PipetteTipsTile.tsx      |   2 +-
 .../modals/EditModulesModal/index.tsx         | 126 +++++++++---------
 .../FilePipettesModal.module.css              |   2 +-
 5 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx b/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
index 7b546cc43d5..8873c10eb52 100644
--- a/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
+++ b/protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
@@ -59,7 +59,9 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             {...propsForFields.magnetAction}
             options={[
               {
-                name: t('step_edit_form.field.magnetAction.options.engage'),
+                name: t(
+                  'form:step_edit_form.field.magnetAction.options.engage'
+                ),
                 value: 'engage',
               },
             ]}
@@ -68,7 +70,9 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             {...propsForFields.magnetAction}
             options={[
               {
-                name: t('step_edit_form.field.magnetAction.options.disengage'),
+                name: t(
+                  'form:step_edit_form.field.magnetAction.options.disengage'
+                ),
                 value: 'disengage',
               },
             ]}
@@ -76,7 +80,7 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
         </FormGroup>
         {magnetAction === 'engage' && (
           <FormGroup
-            label={t('step_edit_form.field.engageHeight.label')}
+            label={t('form:step_edit_form.field.engageHeight.label')}
             className={styles.magnet_form_group}
           >
             <TextField
diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx b/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx
index c108ed2a037..e7dde2d26fb 100644
--- a/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx
+++ b/protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx
@@ -69,6 +69,7 @@ export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
                   {...propsForFields.useGripper}
                   disabled={!isGripperAttached}
                   label={t('form:step_edit_form.field.useGripper.label')}
+                  tooltipContent={null}
                 />
               </FormGroup>
             </div>
diff --git a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx
index 93e4f6969c9..cbe4075b3e3 100644
--- a/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx
+++ b/protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx
@@ -276,7 +276,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
               backgroundColor={COLORS.grey35}
               padding={SPACING.spacing8}
               border={BORDERS.lineBorder}
-              borderRadius={BORDERS.borderRadiusFull}
+              borderRadius={BORDERS.borderRadius16}
             >
               <Text
                 as="h4"
diff --git a/protocol-designer/src/components/modals/EditModulesModal/index.tsx b/protocol-designer/src/components/modals/EditModulesModal/index.tsx
index 2e7bafa56b6..3b65879f996 100644
--- a/protocol-designer/src/components/modals/EditModulesModal/index.tsx
+++ b/protocol-designer/src/components/modals/EditModulesModal/index.tsx
@@ -180,9 +180,13 @@ export const EditModulesModal = (props: EditModulesModalProps): JSX.Element => {
       //  TODO(jr, 8/31/23): this is a bit hacky since the TCGEN2 slot is only B1 instead of B1 and A1
       //  so we have to manually check if slot A1 has issues as well as looking at selectedSlot
       //  this probably deserves a more elegant refactor
-      (selectedModel === THERMOCYCLER_MODULE_V2 && hasSlotIssue('A1')) ||
-      hasSlotIssue(selectedSlot)
+      selectedModel === THERMOCYCLER_MODULE_V2 &&
+      hasSlotIssue('A1')
     ) {
+      errors.selectedSlot = t('module_placement.SLOT_OCCUPIED_TC.body', {
+        selectedSlot,
+      })
+    } else if (hasSlotIssue(selectedSlot)) {
       errors.selectedSlot = t('module_placement.SLOT_OCCUPIED.body', {
         selectedSlot,
       })
@@ -342,68 +346,68 @@ const EditModulesModalComponent = (
           height="3.125rem"
           alignItems={ALIGN_CENTER}
         >
-          <Flex gridGap={SPACING.spacing8}>
-            <FormGroup label="Model">
-              <Box width="4rem">
-                <ModelDropdown
-                  fieldName="selectedModel"
-                  tabIndex={0}
-                  options={getModuleOptionsForRobotType(
-                    MODELS_FOR_MODULE_TYPE[moduleType],
-                    robotType
+          <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
+            <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
+              <FormGroup label="Model">
+                <Box width="4rem">
+                  <ModelDropdown
+                    fieldName="selectedModel"
+                    tabIndex={0}
+                    options={getModuleOptionsForRobotType(
+                      MODELS_FOR_MODULE_TYPE[moduleType],
+                      robotType
+                    )}
+                    field={field}
+                    fieldState={fieldState}
+                  />
+                </Box>
+              </FormGroup>
+              {showSlotOption && (
+                <>
+                  {!enableSlotSelection && (
+                    <Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
                   )}
-                  field={field}
-                  fieldState={fieldState}
-                />
-              </Box>
-            </FormGroup>
-            {showSlotOption && (
-              <>
-                {!enableSlotSelection && (
-                  <Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
-                )}
 
-                <Box {...targetProps} height="3.125rem">
-                  <FormGroup label="Position">
-                    <Box
-                      width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
-                    >
-                      <Controller
-                        name="selectedSlot"
-                        control={control}
-                        render={({ field, fieldState }) => (
-                          <SlotDropdown
-                            fieldName="selectedSlot"
-                            options={getAllModuleSlotsByType(
-                              moduleType,
-                              robotType
-                            )}
-                            disabled={!enableSlotSelection}
-                            tabIndex={1}
-                            field={field}
-                            fieldState={fieldState}
-                          />
-                        )}
-                      />
-                    </Box>
-                  </FormGroup>
-                </Box>
-              </>
-            )}
+                  <Box {...targetProps} height="3.125rem">
+                    <FormGroup label="Position">
+                      <Box
+                        width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
+                      >
+                        <Controller
+                          name="selectedSlot"
+                          control={control}
+                          render={({ field, fieldState }) => (
+                            <SlotDropdown
+                              fieldName="selectedSlot"
+                              options={getAllModuleSlotsByType(
+                                moduleType,
+                                robotType
+                              )}
+                              disabled={!enableSlotSelection}
+                              tabIndex={1}
+                              field={field}
+                              fieldState={fieldState}
+                            />
+                          )}
+                        />
+                      </Box>
+                    </FormGroup>
+                  </Box>
+                </>
+              )}
+            </Flex>
+            <Box>
+              {slotIssue ? (
+                <PDAlert
+                  alertType="warning"
+                  title={t('alert:module_placement.SLOT_OCCUPIED.title')}
+                  //  TODO(Jr, 3/18/24): add decription back: validation.selectedSlot
+                  //  when we fix designs in the future
+                  description={''}
+                />
+              ) : null}
+            </Box>
           </Flex>
-          <Box>
-            {slotIssue ? (
-              <PDAlert
-                alertType="warning"
-                title={
-                  robotType === OT2_ROBOT_TYPE
-                    ? t('alert:module_placement.SLOT_OCCUPIED.title')
-                    : validation.selectedSlot
-                }
-                description={''}
-              />
-            ) : null}
-          </Box>
         </Flex>
 
         {robotType === OT2_ROBOT_TYPE ? (
diff --git a/protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css b/protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css
index 3547801aff5..abe91d7eb6c 100644
--- a/protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css
+++ b/protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css
@@ -22,7 +22,7 @@
 
 .new_file_modal {
   line-height: 1.5;
-  height: 100%;
+  max-height: 100%;
   padding: 2rem;
   min-height: 38rem;