diff --git a/packages/ui/package.json b/packages/ui/package.json index e02279fc..7038c48f 100644 --- 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 deleted file mode 100644 index be710af0..00000000 --- a/packages/ui/src/components/Icons/ArrowUpIcon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export const ArrowUpIcon = () => ( - -); diff --git a/packages/ui/src/components/JobCard/Details/Details.module.css b/packages/ui/src/components/JobCard/Details/Details.module.css index 5d070c67..f9eb0ce9 100644 --- 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 index c3305cd5..3687f960 100644 --- 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')} ) : ( - + ); 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 index a74d16b6..20aab078 100644 --- 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 index 6f5e6edd..f4baa8aa 100644 --- 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 =

#{job.id}

- return ( - -
- {jobUrl ? ( - - {JobTitle} - - ) : JobTitle} - - - - +
+ {jobUrl ? ( + + #{job.id} + + ) : ( + #{job.id} + )} + +
+
+
+

+ {job.name} + {job.attempts > 1 && {t('JOB.ATTEMPTS', { attempts: job.attempts })}} + {!!job.opts?.repeat?.count && ( + + {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, { + count: job.opts.repeat.count, + limit: job.opts?.repeat?.limit, + })} + + )} +

+ {!readOnlyMode && ( + + )}
- - -
-
- -
- -
-
-
- {t('JOB.NAME')}: {job.name} - {job.attempts > 1 && ( - - - {t('JOB.ATTEMPTS', { attempts: job.attempts })} - - )} - - {!!job.opts?.repeat?.count && ( - - {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, { - count: job.opts.repeat.count, - limit: job.opts?.repeat?.limit, - })} - - )} -
- - {!readOnlyMode && ( - - )} -
- -
-
- - {typeof job.progress === 'number' && ( - - )} -
-
-
- - +
+
+ {typeof job.progress === 'number' && ( + + )} +
+
); }; diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.module.css b/packages/ui/src/components/JobCard/Timeline/Timeline.module.css index 6b63e5ab..6e467554 100644 --- 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 index c9e1c302..274d99e1 100644 --- 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 })} /> - setSettings({ collapseJob: checked })} - /> ()( 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 index 22afbf94..f9d50797 100644 --- 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 index 363da38f..81ba261f 100644 --- 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 index 4fbc7d87..c8d35683 100644 --- 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/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"