compactMode: add collapsible functionality + reog job card layout

packages/ui/package.json

@@ -42,8 +42,10 @@
     "@babel/runtime": "^7.17.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@radix-ui/react-alert-dialog": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.14",

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;
+  code: string | null;
 }
 
-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, code }) => {
+  const [highlightedCode, setHighlightedCode] = useState<string>('');
+
+  const highlightCode = async () => {
+    setHighlightedCode(await asyncHighlight(code as string, language));
+  };
+
+  useEffect(() => {
+    highlightCode();
+  }, []);
+
+  useEffect(() => {
+    highlightCode();
+  }, [language, code]);
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(code ?? '');
+  };
+
+  return (
+    <div className={s.codeContainerWrapper}>
+      <pre>
+        <code className={cn('hljs', language)} dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      </pre>
+
+      <Button
+        onClick={handleCopyClick}
+        className={s.copyBtn}
+      >
+        <CopyIcon />
+      </Button>
+    </div>
+  );
+};

packages/ui/src/components/Icons/ArrowUpIcon.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ArrowUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M241 130.5l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9l-22.7 22.7c-9.4 9.4-24.5 9.4-33.9 0L224 227.5 69.3 381.5c-9.4 9.3-24.5 9.3-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.6 0-33.9L207 130.5C216.4 121.2 231.6 121.2 241 130.5z"/></svg>
+);

packages/ui/src/components/JobCard/Details/Details.module.css

@@ -7,7 +7,7 @@
 .tabActions {
   list-style: none;
   padding: 0;
-  margin: 1rem 0 2rem;
+  margin: 1rem 0 0.5rem;
   display: flex;
 }
 

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

@@ -20,7 +20,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
   const { t } = useTranslation();
   const { collapseJobData, collapseJobOptions, collapseJobError } = useSettingsStore();
   const [collapseState, setCollapse] = useState({ data: false, options: false, error: false });
-  const { stacktrace, data, returnValue, opts, failedReason } = job;
+  const { stacktrace, data: jobData, returnValue, opts, failedReason } = job;
 
   switch (selectedTab) {
     case 'Data':
@@ -29,15 +29,16 @@ 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" code={JSON.stringify({ jobData, 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" code={JSON.stringify(opts, null, 2)} />
       );
     case 'Error':
       if (stacktrace.length === 0) {
@@ -49,9 +50,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" code={stacktrace.join('\n')} />
       );
     case 'Logs':
       return <JobLogs actions={actions} job={job} />;

packages/ui/src/components/JobCard/JobCard.module.css

@@ -3,14 +3,13 @@
   box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
     0 1px 3px 0 rgba(60, 75, 100, 0.2);
   border-radius: 0.25rem;
-  padding: 1em;
+  padding: 0.66em;
   display: flex;
-  min-height: 320px;
   max-height: 500px;
 }
 
 .card + .card {
-  margin-top: 2rem;
+  margin-top: 0.75rem;
 }
 
 .contentWrapper {
@@ -22,6 +21,8 @@
 .title {
   display: flex;
   justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .title h4,
@@ -38,6 +39,19 @@
   font-size: 0.694em;
 }
 
+.header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.details {
+  display: flex;
+  margin-top: 1rem;
+  width: 100%;
+}
+
 .sideInfo {
   width: 200px;
   padding-right: 2rem;
@@ -57,6 +71,10 @@
   padding-right: 1rem;
 }
 
+.collapseBtn {
+  padding: 0.15rem;
+}
+
 .content {
   position: relative;
   flex: 1;
@@ -70,5 +88,6 @@
 }
 
 .jobLink {
-  text-decoration: none;
+  color: #4a5568;
+  font-size: large;
 }

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

@@ -4,6 +4,10 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { Card } from '../Card/Card';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
+import { ArrowUpIcon } from '../Icons/ArrowUpIcon';
+import { Button } from '../Button/Button';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { Details } from './Details/Details';
 import { JobActions } from './JobActions/JobActions';
 import s from './JobCard.module.css';
@@ -35,49 +39,77 @@ export const JobCard = ({
   jobUrl,
 }: JobCardProps) => {
   const { t } = useTranslation();
+  const JobTitle = <h4 title={`#${job.id}`}>#{job.id}</h4>
+
+  // TODO: Get global config to set the initial state
+  // TODO2: Override to true when its a dedicated job page
+  const [isExpanded, setIsExpanded] = React.useState(true);
+
   return (
-    <Card className={s.card}>
-      <div className={s.sideInfo}>
-        {jobUrl ? (
-          <Link className={s.jobLink} to={jobUrl}>
-            <span title={`#${job.id}`}>#{job.id}</span>
-          </Link>
-        ) : (
-          <span title={`#${job.id}`}>#{job.id}</span>
-        )}
-        <Timeline job={job} status={status} />
-      </div>
-      <div className={s.contentWrapper}>
-        <div className={s.title}>
-          <h4>
-            {job.name}
-            {job.attempts > 1 && <span>{t('JOB.ATTEMPTS', { attempts: job.attempts })}</span>}
-            {!!job.opts?.repeat?.count && (
-              <span>
-                {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, {
-                  count: job.opts.repeat.count,
-                  limit: job.opts?.repeat?.limit,
-                })}
-              </span>
-            )}
-          </h4>
-          {!readOnlyMode && (
-            <JobActions status={status} actions={actions} allowRetries={allowRetries} />
-          )}
-        </div>
-        <div className={s.content}>
-          <Details status={status} job={job} actions={actions} />
-          {typeof job.progress === 'number' && (
-            <Progress
-              percentage={job.progress}
-              status={
-                job.isFailed && !greenStatuses.includes(status as any) ? STATUSES.failed : status
-              }
-              className={s.progress}
-            />
-          )}
+    <Card className={`jobCard ${s.card}`}>
+      <Collapsible.Root style={{ width: '100%' }}>
+        <div className={`jobHeader ${s.header}`}>
+          {jobUrl ? (
+            <Link className={s.jobLink} to={jobUrl}>
+              {JobTitle}
+            </Link>
+          ) : JobTitle}
+
+          <Collapsible.Trigger style={{ border: 'none', borderRadius: '5px' }}>
+            <Button className={s.collapseBtn} onClick={() => setIsExpanded(!isExpanded)}>
+              {isExpanded ? <ArrowDownIcon/> : <ArrowUpIcon/>}
+            </Button>
+          </Collapsible.Trigger>
         </div>
-      </div>
+
+        <Collapsible.Content>
+          <div className={`jobDetails ${s.details}`}>
+            <div className={`sideInfo ${s.sideInfo}`}>
+              <Timeline job={job} status={status} />
+            </div>
+
+            <div className={`jobContentWrapper ${s.contentWrapper}`}>
+              <div className={s.title}>
+                <h5>
+                  {t('JOB.NAME')}: {job.name}
+                  {job.attempts > 1 && (
+                    <span style={{marginLeft: '0.5rem'}}>
+                      - {t('JOB.ATTEMPTS', { attempts: job.attempts })}
+                    </span>
+                  )}
+
+                  {!!job.opts?.repeat?.count && (
+                    <span>
+                      {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, {
+                        count: job.opts.repeat.count,
+                        limit: job.opts?.repeat?.limit,
+                      })}
+                    </span>
+                  )}
+                </h5>
+
+                {!readOnlyMode && (
+                  <JobActions status={status} actions={actions} allowRetries={allowRetries} />
+                )}
+              </div>
+
+              <div className={s.content}>
+                <Details status={status} job={job} actions={actions} />
+
+                {typeof job.progress === 'number' && (
+                  <Progress
+                    percentage={job.progress}
+                    status={
+                      job.isFailed && !greenStatuses.includes(status as any) ? STATUSES.failed : status
+                    }
+                    className={s.progress}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
     </Card>
   );
 };

packages/ui/src/components/JobCard/Timeline/Timeline.module.css

@@ -1,5 +1,5 @@
 .timeline {
-    padding: 1.5rem 1rem 1.5rem 0;
+    padding: 0.25rem 1rem 1rem 0;
     margin: 0;
     list-style: none;
     border: 0;

packages/ui/src/static/locales/en-US/messages.json

@@ -10,6 +10,7 @@
     "JOBS_COUNT": "{{count}} Jobs"
   },
   "JOB": {
+    "NAME": "Name",
     "NOT_FOUND": "Job Not found",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Added at",

packages/ui/src/static/locales/pt-BR/messages.json

@@ -12,6 +12,7 @@
     "JOBS_COUNT": "{{count}} Tarefas"
   },
   "JOB": {
+    "NAME": "Nome",
     "NOT_FOUND": "Tarefa não encontrada",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Adicionado em",