Revert "compactMode: add collapsible functionality + reog job card la…

…yout (#687)" This reverts commit f3b3c2c.
felixmosh · Feb 27, 2024 · f00b584 · f00b584
1 parent f3b3c2c
commit f00b584
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 139 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -42,7 +42,6 @@
     "@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
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 0.5rem;
+  margin: 1rem 0 2rem;
   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: jobData, returnValue, opts, failedReason } = job;
+  const { stacktrace, data, 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({ jobData, returnValue }, null, 2)} />
+        <Highlight language="json" text={JSON.stringify({ data, 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,13 +3,14 @@
   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: 0.66em;
+  padding: 1em;
   display: flex;
+  min-height: 320px;
   max-height: 500px;
 }
 
 .card + .card {
-  margin-top: 0.75rem;
+  margin-top: 2rem;
 }
 
 .contentWrapper {
@@ -20,10 +21,7 @@
 
 .title {
   display: flex;
-  align-items: baseline;
   justify-content: space-between;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid #e2e8f0;
 }
 
 .title h4,
@@ -40,19 +38,6 @@
   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;
@@ -72,10 +57,6 @@
   padding-right: 1rem;
 }
 
-.collapseBtn {
-  padding: 0.15rem;
-}
-
 .content {
   position: relative;
   flex: 1;
@@ -89,6 +70,5 @@
 }
 
 .jobLink {
-  color: #4a5568;
-  font-size: large;
+  text-decoration: none;
 }
diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -4,11 +4,6 @@ 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';
@@ -40,81 +35,49 @@ 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}>
-      <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 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>
-
-        <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>
+        <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>
     </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: 0.25rem 1rem 1rem 0;
+    padding: 1.5rem 1rem 1.5rem 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,7 +21,6 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
     jobsPerPage,
     confirmQueueActions,
     confirmJobActions,
-    collapseJob,
     collapseJobData,
     collapseJobOptions,
     collapseJobError,
@@ -82,12 +81,6 @@ 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,7 +7,6 @@ interface SettingsState {
   jobsPerPage: number;
   confirmQueueActions: boolean;
   confirmJobActions: boolean;
-  collapseJob: boolean;
   collapseJobData: boolean;
   collapseJobOptions: boolean;
   collapseJobError: boolean;
@@ -22,7 +21,6 @@ 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,7 +10,6 @@
     "JOBS_COUNT": "{{count}} Jobs"
   },
   "JOB": {
-    "NAME": "Name",
     "NOT_FOUND": "Job Not found",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Added at",
@@ -110,7 +109,6 @@
     "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,7 +12,6 @@
     "JOBS_COUNT": "{{count}} Tarefas"
   },
   "JOB": {
-    "NAME": "Nome",
     "NOT_FOUND": "Tarefa não encontrada",
     "STATUS": "Status: {{status}}",
     "ADDED_AT": "Adicionado em",
@@ -114,7 +113,6 @@
     "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,21 +3369,6 @@
     "@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/[email protected]":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"