feat(deployment-logs): rows remove ANSI characters (#395)

Qovery · Nov 29, 2022 · b0bdfd3 · b0bdfd3
1 parent c073aca
commit b0bdfd3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/libs/pages/logs/deployment/src/lib/ui/row/row.spec.tsx b/libs/pages/logs/deployment/src/lib/ui/row/row.spec.tsx
@@ -220,4 +220,31 @@ describe('Row', () => {
     expect(cellMsg).toHaveClass('py-1 pl-4 pr-6 font-code relative w-[calc(100%-502px)] overflow-hidden text-error-500')
     expect(cellMsg?.textContent).toBe(props.data.error?.user_log_message)
   })
+
+  it('should have cell message without ASCI but with links', () => {
+    props.data = {
+      type: LogsType.INFO,
+      timestamp: new Date().toString(),
+      details: {
+        stage: {
+          step: 'Deployed',
+        },
+        transmitter: {
+          name: 'message',
+        },
+      },
+      message: {
+        safe_message: '\x1b[F\x1b[31;1mmy message https://qovery.com\x1b[m\x1b[E',
+      },
+    }
+
+    render(<Row {...props} />)
+
+    const cellMsg = screen.getByTestId('cell-msg')
+
+    expect(cellMsg?.textContent).toBe('my message https://qovery.com')
+    expect(cellMsg.innerHTML.toString()).toContain(
+      '<a class="link text-accent2-500" target="_blank" href="https://qovery.com">https://qovery.com</a>'
+    )
+  })
 })
diff --git a/libs/pages/logs/deployment/src/lib/ui/row/row.tsx b/libs/pages/logs/deployment/src/lib/ui/row/row.tsx
@@ -34,9 +34,17 @@ export function Row(props: RowProps) {
         : `${white ? 'text-text-200' : 'text-element-light-lighter-700'}`
     }`
 
-  const buildLinkHtml = (content = '') => {
-    const reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g
-    return content.replace(reg, `<a class="link text-accent2-500" target="_blank" href='$1$2'>$1$2</a>`)
+  const buildHtml = (content = '') => {
+    const regexLink = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g
+    // eslint-disable-next-line no-control-regex
+    const regexANSI = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g
+
+    return (
+      content
+        .replace(regexLink, `<a class="link text-accent2-500" target="_blank" href='$1$2'>$1$2</a>`)
+        // remove ANSI characters
+        .replace(regexANSI, '')
+    )
   }
 
   return (
@@ -87,7 +95,7 @@ export function Row(props: RowProps) {
         <span
           className="whitespace-pre-wrap truncate break-all"
           dangerouslySetInnerHTML={{
-            __html: error ? buildLinkHtml(data.error?.user_log_message) : buildLinkHtml(data.message?.safe_message),
+            __html: error ? buildHtml(data.error?.user_log_message) : buildHtml(data.message?.safe_message),
           }}
         />
         <CopyToClipboard