compactMode: add collapsible functionality + reog job card layout (#697)

* compactMode: add collapsible functionality + reog job card layout * update highlight component + improved collapsible * fix arrowup icon * revert attempt condition * implement global setting * modify highlt prop name + allow live job collapse setting update * fix regression bug + button inside button * f * handle global collapse state live * revert spacings --------- Co-authored-by: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
felixmosh · Mar 11, 2024 · 3a0867d · 3a0867d
1 parent 1a3009e
commit 3a0867d
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 43 deletions.
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/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
@@ -5,7 +5,6 @@
   border-radius: 0.25rem;
   padding: 1em;
   display: flex;
-  min-height: 320px;
   max-height: 500px;
 }
 
@@ -21,7 +20,14 @@
 
 .title {
   display: flex;
+  align-items: baseline;
   justify-content: space-between;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.attempts {
+  margin-left: '0.5rem'
 }
 
 .title h4,
@@ -38,6 +44,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 +76,10 @@
   padding-right: 1rem;
 }
 
+.collapseBtn {
+  padding: 0.15rem;
+}
+
 .content {
   position: relative;
   flex: 1;
@@ -70,5 +93,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,79 @@ export const JobCard = ({
   jobUrl,
 }: JobCardProps) => {
   const { t } = useTranslation();
+  const { collapseJob } = useSettingsStore();
+
+  const [localCollapse, setLocalCollapse] = React.useState<boolean>();
+
+  const isExpandedCard = !jobUrl || (localCollapse || !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={isExpandedCard}>
+        <div className={s.header}>
+          {jobUrl ? (
+            <Link className={s.jobLink} to={jobUrl}>
+              {JobTitle}
+            </Link>
+          ) : JobTitle}
+
+          {jobUrl && (
+            <Button className={s.collapseBtn} onClick={() => setLocalCollapse(!isExpandedCard)}>
+              {isExpandedCard ? <ArrowUpIcon /> : <ArrowDownIcon />}
+            </Button>
           )}
         </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 className={s.attempts}>
+                      - {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/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"