fix(app): rename robot slideout character limit and error message (#1…

…2493)

* 35->17 char, new error text

* test and lint

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

@@ -19,7 +19,7 @@
  "calibration_health_check_title": "Calibration Health Check",
  "calibration": "Calibration",
  "change_network": "Change network",
- "characters_max": "35 characters max",
+ "characters_max": "17 characters max",
  "choose_reset_settings": "Choose reset settings",
  "choose": "Choose...",
  "clear_data_and_restart_robot": "Clear data and restart robot",
@@ -108,7 +108,8 @@
  "recalibration_recommended": "Recalibration recommended",
  "reinstall": "reinstall",
  "remind_me_later": "Remind me later",
- "rename_robot_input_limitation_detail": "Please enter 35 characters max using valid inputs: letters and numbers",
+ "rename_robot_input_limitation_detail": "Please enter 17 characters max using valid inputs: letters and numbers",
+ "rename_robot_input_error": "Oops! Robot name must follow the character count and limitations",
  "rename_robot_prefer_usb_connection": "To ensure reliable renaming of your robot, please connect to it via USB.",
  "rename_robot_title": "Rename Robot",
  "rename_robot": "Rename robot",
@@ -163,7 +164,7 @@
  "protocol_run_history_description": "Resetting run history will also clear Labware Offset data.",
  "name_your_robot": "Name your robot",
  "name_your_robot_description": "Don’t worry, you can always change this in your settings.",
- "name_rule_description": "Up to 35 characters using letters and numbers only.",
+ "name_rule_description": "Up to 17 characters using letters and numbers only.",
  "name_rule_error_too_short": "Oops! Too short. Robot name must be at least 1 character.",
  "name_rule_error_exist": "Oops! Name is already in use. Choose a different name.",
  "hide": "Hide",

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

@@ -36,11 +36,11 @@ interface FormikErrors {
  newRobotName?: string
 }
 
-/* max length is 35 and min length is 1
+/* max length is 17 and min length is 1
  allow users to use alphabets(a-z & A-Z) and numbers
  https://github.com/Opentrons/opentrons/issues/10214
 */
-const REGEX_RENAME_ROBOT_PATTERN = /^([a-zA-Z0-9]{0,35})$/
+const REGEX_RENAME_ROBOT_PATTERN = /^([a-zA-Z0-9]{0,17})$/
 const regexPattern = new RegExp(REGEX_RENAME_ROBOT_PATTERN)
 
 export function RenameRobotSlideout({
@@ -85,7 +85,7 @@ export function RenameRobotSlideout({
  const errors: FormikErrors = {}
  const newName = values.newRobotName
  if (!regexPattern.test(newName)) {
- errors.newRobotName = t('rename_robot_input_limitation_detail')
+ errors.newRobotName = t('rename_robot_input_error')
  }
  if (
  [...connectableRobots, ...reachableRobots].some(

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

@@ -63,10 +63,10 @@ describe('RobotSettings RenameRobotSlideout', () => {
 
  getByText('Rename Robot')
  getByText(
- 'Please enter 35 characters max using valid inputs: letters and numbers'
+ 'Please enter 17 characters max using valid inputs: letters and numbers'
  )
  getByText('Robot Name')
- getByText('35 characters max')
+ getByText('17 characters max')
  getByRole('textbox')
  const renameButton = getByRole('button', { name: 'Rename robot' })
  expect(renameButton).toBeInTheDocument()
@@ -97,24 +97,24 @@ describe('RobotSettings RenameRobotSlideout', () => {
  expect(input).toHaveValue('mockInput@@@')
  const renameButton = getByRole('button', { name: 'Rename robot' })
  const error = await findByText(
- 'Please enter 35 characters max using valid inputs: letters and numbers'
+ 'Oops! Robot name must follow the character count and limitations'
  )
  await waitFor(() => {
  expect(renameButton).toBeDisabled()
  expect(error).toBeInTheDocument()
  })
  })
 
- it('button should be disabled and render the error message when a user types more than 36 characters', async () => {
+ it('button should be disabled and render the error message when a user types more than 17 characters', async () => {
  const [{ getByRole, findByText }] = render()
  const input = getByRole('textbox')
  fireEvent.change(input, {
- target: { value: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
+ target: { value: 'aaaaaaaaaaaaaaaaaa' },
  })
- expect(input).toHaveValue('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+ expect(input).toHaveValue('aaaaaaaaaaaaaaaaaa')
  const renameButton = getByRole('button', { name: 'Rename robot' })
  const error = await findByText(
- 'Please enter 35 characters max using valid inputs: letters and numbers'
+ 'Oops! Robot name must follow the character count and limitations'
  )
  await waitFor(() => {
  expect(renameButton).toBeDisabled()
@@ -131,7 +131,7 @@ describe('RobotSettings RenameRobotSlideout', () => {
  expect(input).toHaveValue('Hello world123')
  const renameButton = getByRole('button', { name: 'Rename robot' })
  const error = await findByText(
- 'Please enter 35 characters max using valid inputs: letters and numbers'
+ 'Oops! Robot name must follow the character count and limitations'
  )
  await waitFor(() => {
  expect(renameButton).toBeDisabled()
@@ -148,7 +148,7 @@ describe('RobotSettings RenameRobotSlideout', () => {
  expect(input).toHaveValue(' ')
  const renameButton = getByRole('button', { name: 'Rename robot' })
  const error = await findByText(
- 'Please enter 35 characters max using valid inputs: letters and numbers'
+ 'Oops! Robot name must follow the character count and limitations'
  )
  await waitFor(() => {
  expect(renameButton).toBeDisabled()

app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx

@@ -53,7 +53,7 @@ describe('NameRobot', () => {
  const [{ getByText, getByRole, queryByRole }] = render()
  getByText('Name your robot')
  getByText('Don’t worry, you can always change this in your settings.')
- getByText('Up to 35 characters using letters and numbers only.')
+ getByText('Up to 17 characters using letters and numbers only.')
  getByRole('textbox')
  getByRole('button', { name: 'Confirm' })
  // keyboard