felixmosh · felixmosh · Feb 27, 2024 · Feb 16, 2024 · Feb 17, 2024 · Feb 17, 2024
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -42,6 +42,7 @@
     "@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-switch": "^1.0.3",

diff --git a/packages/ui/src/components/Icons/ArrowUpIcon.tsx b/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>
+);
diff --git a/packages/ui/src/components/JobCard/Details/Details.module.css b/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;
 }
 

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/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,7 +29,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp
           {t('JOB.SHOW_DATA_BTN')} <ArrowDownIcon />
         </Button>
       ) : (
-        <Highlight language="json" text={JSON.stringify({ data, returnValue }, null, 2)} />
+        <Highlight language="json" text={JSON.stringify({ jobData, returnValue }, null, 2)} />
       );
     case 'Options':
       return collapseJobOptions && !collapseState.options ? (

diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/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 {
@@ -21,7 +20,10 @@
 
 .title {
   display: flex;
+  align-items: baseline;
   justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .title h4,
@@ -38,6 +40,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 +72,10 @@
   padding-right: 1rem;
 }
 
+.collapseBtn {
+  padding: 0.15rem;
+}
+
 .content {
   position: relative;
   flex: 1;
@@ -70,5 +89,6 @@
 }
 
 .jobLink {
-  text-decoration: none;
+  color: #4a5568;
+  font-size: large;
 }
diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -4,6 +4,11 @@ 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 { useSettingsStore } from '../../hooks/useSettings';
+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 +40,81 @@ export const JobCard = ({
   jobUrl,
 }: JobCardProps) => {
   const { t } = useTranslation();
+  const { collapseJob } = useSettingsStore();
+
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsOpen(!jobUrl ? true : !collapseJob)
+  }), [jobUrl, collapseJob];
+
+  const JobTitle = <h4 title={`#${job.id}`}>#{job.id}</h4>
+
   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}
-            />
-          )}
+      <Collapsible.Root style={{ width: '100%' }} open={isOpen}>
+        <div className={s.header}>
+          {jobUrl ? (
+            <Link className={s.jobLink} to={jobUrl}>
+              {JobTitle}
+            </Link>
+          ) : JobTitle}
+
+          <Collapsible.Trigger style={{ border: 'none', borderRadius: '5px' }}>
+            <Button className={s.collapseBtn} onClick={() => setIsOpen(!isOpen)}>
+              {isOpen ? <ArrowUpIcon/> :  <ArrowDownIcon/>}
+            </Button>
+          </Collapsible.Trigger>
         </div>
-      </div>
+
+        <Collapsible.Content>
+          <div className={s.details}>
+            <div className={s.sideInfo}>
+              <Timeline job={job} status={status} />
+            </div>
+
+            <div className={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>
   );
 };
diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.module.css b/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;

diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx
@@ -21,6 +21,7 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
     jobsPerPage,
     confirmQueueActions,
     confirmJobActions,
+    collapseJob,
     collapseJobData,
     collapseJobOptions,
     collapseJobError,
@@ -81,6 +82,12 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
         checked={confirmJobActions}
         onCheckedChange={(checked) => setSettings({ confirmJobActions: checked })}
       />
+      <SwitchField
+        label={t('SETTINGS.COLLAPSE_JOB')}
+        id="collapse-job"
+        checked={collapseJob}
+        onCheckedChange={(checked) => setSettings({ collapseJob: checked })}
+      />
       <SwitchField
         label={t('SETTINGS.COLLAPSE_JOB_DATA')}
         id="collapse-job-data"

diff --git a/packages/ui/src/hooks/useSettings.ts b/packages/ui/src/hooks/useSettings.ts
@@ -7,6 +7,7 @@ interface SettingsState {
   jobsPerPage: number;
   confirmQueueActions: boolean;
   confirmJobActions: boolean;
+  collapseJob: boolean;
   collapseJobData: boolean;
   collapseJobOptions: boolean;
   collapseJobError: boolean;
@@ -21,6 +22,7 @@ export const useSettingsStore = create<SettingsState>()(
       jobsPerPage: 10,
       confirmJobActions: true,
       confirmQueueActions: true,
+      collapseJob: false,
       collapseJobData: false,
       collapseJobOptions: false,
       collapseJobError: false,

diff --git a/packages/ui/src/static/locales/en-US/messages.json b/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",
@@ -109,6 +110,7 @@
     "JOBS_PER_PAGE": "Jobs per page (1-50)",
     "CONFIRM_QUEUE_ACTIONS": "Confirm queue actions",
     "CONFIRM_JOB_ACTIONS": "Confirm job actions",
+    "COLLAPSE_JOB": "Collapse job",
     "COLLAPSE_JOB_DATA": "Collapse job data",
     "COLLAPSE_JOB_OPTIONS": "Collapse job options",
     "COLLAPSE_JOB_ERROR": "Collapse job error"

diff --git a/packages/ui/src/static/locales/pt-BR/messages.json b/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",
@@ -113,6 +114,7 @@
     "JOBS_PER_PAGE": "Tarefas por página (1-50)",
     "CONFIRM_QUEUE_ACTIONS": "Confirma ações da fila",
     "CONFIRM_JOB_ACTIONS": "Confirma ações da tarefa",
+    "COLLAPSE_JOB": "Recolher tarefa",
     "COLLAPSE_JOB_DATA": "Recolher dados da tarefa",
     "COLLAPSE_JOB_OPTIONS": "Recolher opções da tarefa",
     "COLLAPSE_JOB_ERROR": "Recolher erros da tarefa"

diff --git a/yarn.lock b/yarn.lock
@@ -3369,6 +3369,21 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-collapsible@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"
+  integrity sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"