Highlight to be a FunctionalComponent

packages/ui/src/components/Highlight/Highlight.tsx

@@ -1,58 +1,46 @@
 import cn from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { asyncHighlight } from '../../utils/highlight/highlight';
 import s from './Highlight.module.css';
 import { Button } from '../Button/Button';
 import { CopyIcon } from '../Icons/Copy';
 
 interface HighlightProps {
   language: 'json' | 'stacktrace';
-  children: string | null;
+  text: string;
 }
 
-export class Highlight extends React.Component<HighlightProps> {
-  private codeRef = React.createRef<HTMLPreElement>();
-
-  public shouldComponentUpdate(nextProps: Readonly<HighlightProps>) {
-    return (
-      nextProps.language !== this.props.language ||
-      (Array.isArray(this.props.children)
-        ? this.props.children.some(
-            (item: any) => !([] as any).concat(nextProps.children).includes(item)
-          )
-        : nextProps.children !== this.props.children)
-    );
-  }
-
-  public componentDidMount() {
-    return this.highlightCode();
-  }
-
-  public componentDidUpdate() {
-    return this.highlightCode();
-  }
-
-  public render() {
-    const { language } = this.props;
-    return (
-      <div className={s.codeContainerWrapper}>
-        <pre ref={this.codeRef}>
-          <code className={cn('hljs', language)} />
-        </pre>
-        <Button
-          onClick={() => navigator.clipboard.writeText(this.props.children ?? '')}
-          className={s.copyBtn}
-        >
-          <CopyIcon />
-        </Button>
-      </div>
-    );
-  }
-
-  private async highlightCode() {
-    const node = this.codeRef.current?.querySelector('code');
-    if (node) {
-      node.innerHTML = await asyncHighlight(this.props.children as string, this.props.language);
-    }
-  }
-}
+export const Highlight: React.FC<HighlightProps> = ({ language, text }) => {
+  const [code, setCode] = useState<string>('');
+
+  const textToCode = async () => {
+    setCode(await asyncHighlight(text as string, language));
+  };
+
+  useEffect(() => {
+    textToCode();
+  }, []);
+
+  useEffect(() => {
+    textToCode();
+  }, [language, text]);
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(text ?? '');
+  };
+
+  return (
+    <div className={s.codeContainerWrapper}>
+      <pre>
+        <code className={cn('hljs', language)} dangerouslySetInnerHTML={{ __html: code }} />
+      </pre>
+
+      <Button
+        onClick={handleCopyClick}
+        className={s.copyBtn}
+      >
+        <CopyIcon />
+      </Button>
+    </div>
+  );
+};

packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx

@@ -29,15 +29,15 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_DATA_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="json">{JSON.stringify({ data, returnValue }, null, 2)}</Highlight>
+        <Highlight language="json" text={JSON.stringify({ data, returnValue }, null, 2)} />
       );
     case 'Options':
       return collapseJobOptions && !collapseState.options ? (
         <Button onClick={() => setCollapse({ ...collapseState, options: true })}>
           {t('JOB.SHOW_OPTIONS_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="json">{JSON.stringify(opts, null, 2)}</Highlight>
+        <Highlight language="json" text={JSON.stringify(opts, null, 2)} />
       );
     case 'Error':
       if (stacktrace.length === 0) {
@@ -49,9 +49,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_ERRORS_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="stacktrace" key="stacktrace">
-          {stacktrace.join('\n')}
-        </Highlight>
+        <Highlight language="stacktrace" key="stacktrace" text={stacktrace.join('\n')} />
       );
     case 'Logs':
       return <JobLogs actions={actions} job={job} />;