fix(app): use truncation for a long protocol name (#12622)

truncate a long protocol name to avoid breaking a robot card layout
Opentrons · May 3, 2023 · dc58668 · dc58668
1 parent 01da939
commit dc58668
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx
@@ -15,6 +15,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
   TYPOGRAPHY,
+  truncateString,
 } from '@opentrons/components'
 
 import { QuaternaryButton } from '../../atoms/buttons'
@@ -60,8 +61,8 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element {
           paddingRight={SPACING.spacing3}
           overflowWrap="anywhere"
         >
-          {`${String(displayName)}; ${t(
-            `run_details:status_${String(currentRunStatus)}`
+          {`${truncateString(displayName, 80, 65)}; ${t(
+            `run_details:status_${currentRunStatus}`
           )}`}
         </StyledText>
         <Link

diff --git a/components/src/__tests__/utils.test.ts b/components/src/__tests__/utils.test.ts
@@ -0,0 +1,26 @@
+import { truncateString } from '../utils'
+
+describe('truncateString', () => {
+  it('when an input string less than max length, return the original input', () => {
+    // Note (kj:05/03/2023) the max length and breakPoints are the same as what we use for the Desktop app
+    const str = 'opentrons-dev'
+    const result = truncateString(str, 80, 65)
+    expect(result).toEqual(str)
+  })
+
+  it('when an input string is more than 80 characters, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80, 65)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting ...imen Book.Py'
+    expect(result).toEqual(truncatedStr)
+  })
+
+  it('when an input string is more than 80 characters without specifying the break point, return the truncated string', () => {
+    const str = `Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lorem Ipsum Has Been The Industry's Standard Dummy Text Ever Since The 1500s, When An Unknown Printer Took A Galley Of Type And Scrambled It To Make A Type Specimen Book.Py`
+    const result = truncateString(str, 80)
+    const truncatedStr =
+      'Lorem Ipsum Is Simply Dummy Text Of The Printing And Typesetting Industry. Lo...'
+    expect(result).toEqual(truncatedStr)
+  })
+})
diff --git a/components/src/utils.ts b/components/src/utils.ts
@@ -34,19 +34,23 @@ export const wellNameSplit = (wellName: string): [string, string] => {
  *
  * @param {string} text - A string param
  * @param {number} maxLength - A maximum length of display
- * @param {string} breakPoint - A point to insert three dots
+ * @param {number} breakPoint - Optional A point to insert three dots
  *
  * @returns {string} Returns the truncated string
  */
 export function truncateString(
   text: string,
   maxLength: number,
-  breakPoint: number
+  breakPoint?: number
 ): string {
   const dots = '...'
   if (text.length > maxLength)
-    return `${text.substring(0, breakPoint)}${dots}${text.slice(
-      breakPoint - maxLength + dots.length
-    )}`
+    if (breakPoint != null) {
+      return `${text.substring(0, breakPoint)}${dots}${text.slice(
+        breakPoint - maxLength + dots.length
+      )}`
+    } else {
+      return `${text.slice(0, maxLength - dots.length)}${dots}`
+    }
   else return text
 }