refactor(app): add guidance copy to rename robot slideout (#11137)

Co-authored-by: Josh McVey <[email protected]>

Author: b-cooper

app/src/assets/localization/en/device_settings.json

@@ -116,6 +116,7 @@
   "rename_robot_button": "Rename robot",
   "rename_robot_input_limitation_label": "35 characters max",
   "rename_robot_input_limitation_detail": "Please enter 35 characters max using valid inputs: letters and numbers",
+  "rename_robot_prefer_usb_connection": "To ensure reliable renaming of your robot, please connect to it via USB.",
   "robot_name_already_exists": "Robot name already exists",
   "factory_reset_slideout_title": "Factory Reset",
   "factory_reset_slideout_description": "Select the robot data to clear.",

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx

@@ -22,6 +22,7 @@ import { Slideout } from '../../../../../atoms/Slideout'
 import { StyledText } from '../../../../../atoms/text'
 import { PrimaryButton } from '../../../../../atoms/buttons'
 import { InputField } from '../../../../../atoms/InputField'
+import { Banner } from '../../../../../atoms/Banner'
 
 import type { UpdatedRobotName } from '@opentrons/api-client'
 import type { State, Dispatch } from '../../../../../redux/types'
@@ -140,6 +141,9 @@ export function RenameRobotSlideout({
       }
     >
       <Flex flexDirection={DIRECTION_COLUMN}>
+        <Banner type="informing" marginBottom={SPACING.spacing4}>
+          {t('rename_robot_prefer_usb_connection')}
+        </Banner>
         <StyledText as="p" marginBottom={SPACING.spacing4}>
           {t('rename_robot_input_limitation_detail')}
         </StyledText>