modify highlt prop name + allow live job collapse setting update

felixmosh · Feb 18, 2024 · caecbba · caecbba
1 parent d41fc01
commit caecbba
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx
@@ -7,32 +7,32 @@ import { CopyIcon } from '../Icons/Copy';
 
 interface HighlightProps {
   language: 'json' | 'stacktrace';
-  code: string | null;
+  text: string;
 }
 
-export const Highlight: React.FC<HighlightProps> = ({ language, code }) => {
-  const [highlightedCode, setHighlightedCode] = useState<string>('');
+export const Highlight: React.FC<HighlightProps> = ({ language, text }) => {
+  const [code, setCode] = useState<string>('');
 
-  const highlightCode = async () => {
-    setHighlightedCode(await asyncHighlight(code as string, language));
+  const textToCode = async () => {
+    setCode(await asyncHighlight(text as string, language));
   };
 
   useEffect(() => {
-    highlightCode();
+    textToCode();
   }, []);
 
   useEffect(() => {
-    highlightCode();
-  }, [language, code]);
+    textToCode();
+  }, [language, text]);
 
   const handleCopyClick = () => {
-    navigator.clipboard.writeText(code ?? '');
+    navigator.clipboard.writeText(text ?? '');
   };
 
   return (
     <div className={s.codeContainerWrapper}>
       <pre>
-        <code className={cn('hljs', language)} dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+        <code className={cn('hljs', language)} dangerouslySetInnerHTML={{ __html: code }} />
       </pre>
 
       <Button

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx
@@ -29,7 +29,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_DATA_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="json" code={JSON.stringify({ jobData, returnValue }, null, 2)}
+        <Highlight language="json" text={JSON.stringify({ jobData, returnValue }, null, 2)}
         />
       );
     case 'Options':
@@ -38,7 +38,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_OPTIONS_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="json" code={JSON.stringify(opts, null, 2)} />
+        <Highlight language="json" text={JSON.stringify(opts, null, 2)} />
       );
     case 'Error':
       if (stacktrace.length === 0) {
@@ -50,7 +50,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_ERRORS_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="stacktrace" key="stacktrace" code={stacktrace.join('\n')} />
+        <Highlight language="stacktrace" key="stacktrace" text={stacktrace.join('\n')} />
       );
     case 'Logs':
       return <JobLogs actions={actions} job={job} />;

diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -42,7 +42,11 @@ export const JobCard = ({
   const { t } = useTranslation();
   const { collapseJob } = useSettingsStore();
 
-  const [isOpen, setIsOpen] = React.useState(!jobUrl ? true : !collapseJob);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsOpen(!jobUrl ? true : !collapseJob)
+  }), [jobUrl, collapseJob];
 
   const JobTitle = <h4 title={`#${job.id}`}>#{job.id}</h4>