From 4457f00747936b81c64ace72d743d1e35109d488 Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Fri, 16 Feb 2024 14:53:45 -0500 Subject: [PATCH 01/10] compactMode: add collapsible functionality + reog job card layout --- packages/ui/package.json | 2 + .../JobCard/Details/Details.module.css | 2 +- .../src/components/JobCard/JobCard.module.css | 19 +++- .../ui/src/components/JobCard/JobCard.tsx | 104 +++++++++++------- .../JobCard/Timeline/Timeline.module.css | 2 +- yarn.lock | 20 ++++ 6 files changed, 103 insertions(+), 46 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 7038c48f..3ffc778a 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/components/JobCard/Details/Details.module.css b/packages/ui/src/components/JobCard/Details/Details.module.css index f9eb0ce9..5d070c67 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 2rem; + margin: 1rem 0 0.5rem; display: flex; } diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index 20aab078..ba556281 100644 --- 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.75em; display: flex; - min-height: 320px; max-height: 500px; } .card + .card { - margin-top: 2rem; + margin-top: 0.75rem; } .contentWrapper { @@ -38,6 +37,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; @@ -71,4 +83,5 @@ .jobLink { text-decoration: none; + font-size: large; } diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index f4baa8aa..8834098e 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -4,6 +4,8 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { Card } from '../Card/Card'; +import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons' +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 +37,69 @@ export const JobCard = ({ jobUrl, }: JobCardProps) => { const { t } = useTranslation(); + const JobTitle = #{job.id} + + // 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 ( - -
- {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 && ( - - )} -
-
-
- {typeof job.progress === 'number' && ( - - )} + + +
+ {jobUrl ? ( + + {JobTitle} + + ) : JobTitle} + + + {isExpanded + ? setIsExpanded(false)} /> + : setIsExpanded(true)} />} +
-
+ + +
+
+ +
+ +
+
+

+ {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' && ( + + )} +
+
+
+ + ); }; diff --git a/packages/ui/src/components/JobCard/Timeline/Timeline.module.css b/packages/ui/src/components/JobCard/Timeline/Timeline.module.css index 6e467554..6b63e5ab 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: 1.5rem 1rem 1.5rem 0; + padding: 0.25rem 1rem 1rem 0; margin: 0; list-style: none; border: 0; diff --git a/yarn.lock b/yarn.lock index e248b585..480706ff 100644 --- 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" @@ -3465,6 +3480,11 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-callback-ref" "1.0.1" +"@radix-ui/react-icons@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69" + integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== + "@radix-ui/react-id@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" From e74296746fde3c70003b65e4dfd4ef6666bbb830 Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Sat, 17 Feb 2024 12:44:09 -0500 Subject: [PATCH 02/10] update highlight component + improved collapsible --- .../ui/src/components/Highlight/Highlight.tsx | 84 ++++++++----------- .../ui/src/components/Icons/ArrowUpIcon.tsx | 5 ++ .../Details/DetailsContent/DetailsContent.tsx | 11 ++- .../src/components/JobCard/JobCard.module.css | 10 ++- .../ui/src/components/JobCard/JobCard.tsx | 28 +++++-- .../ui/src/static/locales/en-US/messages.json | 1 + .../ui/src/static/locales/pt-BR/messages.json | 1 + 7 files changed, 75 insertions(+), 65 deletions(-) create mode 100644 packages/ui/src/components/Icons/ArrowUpIcon.tsx diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx index 777b8bb1..3ec348a3 100644 --- a/packages/ui/src/components/Highlight/Highlight.tsx +++ b/packages/ui/src/components/Highlight/Highlight.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,52 +7,40 @@ import { CopyIcon } from '../Icons/Copy'; interface HighlightProps { language: 'json' | 'stacktrace'; - children: string | null; + code: string | null; } -export class Highlight extends React.Component { - private codeRef = React.createRef(); - - public shouldComponentUpdate(nextProps: Readonly) { - 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 ( -
- 
-          
-
- -
- ); - } - - 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 = ({ language, code }) => { + const [highlightedCode, setHighlightedCode] = useState(''); + + const highlightCode = async () => { + setHighlightedCode(await asyncHighlight(code as string, language)); + }; + + useEffect(() => { + highlightCode(); + }, []); + + useEffect(() => { + highlightCode(); + }, [language, code]); + + const handleCopyClick = () => { + navigator.clipboard.writeText(code ?? ''); + }; + + return ( +
+ 
+        
+
+ + +
+ ); +}; diff --git a/packages/ui/src/components/Icons/ArrowUpIcon.tsx b/packages/ui/src/components/Icons/ArrowUpIcon.tsx new file mode 100644 index 00000000..a8c5277b --- /dev/null +++ b/packages/ui/src/components/Icons/ArrowUpIcon.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export const ArrowUpIcon = () => ( + +); diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/DetailsContent.tsx index b26632ee..d1b219d0 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, returnValue, opts, failedReason } = job; + const { stacktrace, data: jobData, returnValue, opts, failedReason } = job; switch (selectedTab) { case 'Data': @@ -29,7 +29,8 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp {t('JOB.SHOW_DATA_BTN')} ) : ( - {JSON.stringify({ data, returnValue }, null, 2)} + ); case 'Options': return collapseJobOptions && !collapseState.options ? ( @@ -37,7 +38,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp {t('JOB.SHOW_OPTIONS_BTN')} ) : ( - {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')} ) : ( - - {stacktrace.join('\n')} - + ); case 'Logs': return ; diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index ba556281..1a1c1cb3 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -3,7 +3,7 @@ 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.75em; + padding: 0.66em; display: flex; max-height: 500px; } @@ -21,6 +21,8 @@ .title { display: flex; justify-content: space-between; + padding-bottom: 0.5rem; + border-bottom: 1px solid #e2e8f0; } .title h4, @@ -69,6 +71,10 @@ padding-right: 1rem; } +.collapseBtn { + padding: 0.15rem; +} + .content { position: relative; flex: 1; @@ -82,6 +88,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 index 8834098e..ea127397 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -4,7 +4,9 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { Card } from '../Card/Card'; -import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons' +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'; @@ -37,7 +39,7 @@ export const JobCard = ({ jobUrl, }: JobCardProps) => { const { t } = useTranslation(); - const JobTitle = #{job.id} + const JobTitle =

#{job.id}

// TODO: Get global config to set the initial state // TODO2: Override to true when its a dedicated job page @@ -54,9 +56,9 @@ export const JobCard = ({ ) : JobTitle} - {isExpanded - ? setIsExpanded(false)} /> - : setIsExpanded(true)} />} +
@@ -68,9 +70,14 @@ export const JobCard = ({
-

- {job.name} - {job.attempts > 1 && {t('JOB.ATTEMPTS', { attempts: job.attempts })}} +

+ {t('JOB.NAME')}: {job.name} + {job.attempts == 0 && ( + + - {t('JOB.ATTEMPTS', { attempts: job.attempts })} + + )} + {!!job.opts?.repeat?.count && ( {t(`JOB.REPEAT${!!job.opts?.repeat?.limit ? '_WITH_LIMIT' : ''}`, { @@ -79,13 +86,16 @@ export const JobCard = ({ })} )} -
+ + {!readOnlyMode && ( )}
+
+ {typeof job.progress === 'number' && ( Date: Sat, 17 Feb 2024 12:49:19 -0500 Subject: [PATCH 03/10] fix arrowup icon --- packages/ui/src/components/Icons/ArrowUpIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/Icons/ArrowUpIcon.tsx b/packages/ui/src/components/Icons/ArrowUpIcon.tsx index a8c5277b..be710af0 100644 --- a/packages/ui/src/components/Icons/ArrowUpIcon.tsx +++ b/packages/ui/src/components/Icons/ArrowUpIcon.tsx @@ -1,5 +1,5 @@ import React from 'react'; export const ArrowUpIcon = () => ( - + ); From ede9ae1add192b07efa98072e50a6cc4b2686d4c Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Sat, 17 Feb 2024 12:51:03 -0500 Subject: [PATCH 04/10] revert attempt condition --- packages/ui/src/components/JobCard/JobCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index ea127397..74d3576e 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -72,7 +72,7 @@ export const JobCard = ({
{t('JOB.NAME')}: {job.name} - {job.attempts == 0 && ( + {job.attempts > 1 && ( - {t('JOB.ATTEMPTS', { attempts: job.attempts })} From d41fc01ec4e7d984cf00af61cba7597a6ec9183d Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Sun, 18 Feb 2024 11:28:21 -0500 Subject: [PATCH 05/10] implement global setting --- packages/ui/package.json | 1 - .../src/components/JobCard/JobCard.module.css | 1 + .../ui/src/components/JobCard/JobCard.tsx | 25 ++++++++++--------- .../SettingsModal/SettingsModal.tsx | 7 ++++++ packages/ui/src/hooks/useSettings.ts | 2 ++ .../ui/src/static/locales/en-US/messages.json | 1 + .../ui/src/static/locales/pt-BR/messages.json | 1 + yarn.lock | 9 ++----- 8 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index 3ffc778a..e02279fc 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -45,7 +45,6 @@ "@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", diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index 1a1c1cb3..a74d16b6 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -20,6 +20,7 @@ .title { display: flex; + align-items: baseline; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 74d3576e..7bb0935e 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -5,6 +5,7 @@ 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'; @@ -39,16 +40,16 @@ export const JobCard = ({ jobUrl, }: JobCardProps) => { const { t } = useTranslation(); - const JobTitle =

#{job.id}

+ const { collapseJob } = useSettingsStore(); + + const [isOpen, setIsOpen] = React.useState(!jobUrl ? true : !collapseJob); - // 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); + const JobTitle =

#{job.id}

return ( - - -
+ + +
{jobUrl ? ( {JobTitle} @@ -56,19 +57,19 @@ export const JobCard = ({ ) : JobTitle} -
-
-
+
+
-
+
{t('JOB.NAME')}: {job.name} diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx index 274d99e1..c9e1c302 100644 --- 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 })} /> + 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 1bebc481..22afbf94 100644 --- a/packages/ui/src/static/locales/en-US/messages.json +++ b/packages/ui/src/static/locales/en-US/messages.json @@ -110,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 index 2ca1731b..363da38f 100644 --- a/packages/ui/src/static/locales/pt-BR/messages.json +++ b/packages/ui/src/static/locales/pt-BR/messages.json @@ -114,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 index 480706ff..acd27224 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3480,11 +3480,6 @@ "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-use-callback-ref" "1.0.1" -"@radix-ui/react-icons@^1.3.0": - version "1.3.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69" - integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw== - "@radix-ui/react-id@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0" @@ -4148,7 +4143,7 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-dom@^17.0.14": +"@types/react-dom@17.0.20", "@types/react-dom@^17.0.14": version "17.0.20" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53" integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA== @@ -4179,7 +4174,7 @@ "@types/history" "^4.7.11" "@types/react" "*" -"@types/react@*", "@types/react@^17", "@types/react@^17.0.14": +"@types/react@*", "@types/react@17.0.63", "@types/react@^17", "@types/react@^17.0.14": version "17.0.63" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.63.tgz#78ca41a34b1e4fd5ba9398d33bc78a81bfd5c180" integrity sha512-T+aaG8RlIkgJ4VzWLJYbMW9QX7sIAV8CcuyV6FU6Hm7yu3Bee1YBZQRu2vYEm/dU8kre+/mzl2aGYh5MFgVLaQ== From caecbba790ea9d31ca07ff8ddb6039ff4974a45b Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Sun, 18 Feb 2024 11:53:18 -0500 Subject: [PATCH 06/10] modify highlt prop name + allow live job collapse setting update --- .../ui/src/components/Highlight/Highlight.tsx | 20 +++++++++---------- .../Details/DetailsContent/DetailsContent.tsx | 6 +++--- .../ui/src/components/JobCard/JobCard.tsx | 6 +++++- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/ui/src/components/Highlight/Highlight.tsx b/packages/ui/src/components/Highlight/Highlight.tsx index 3ec348a3..fcb0384e 100644 --- a/packages/ui/src/components/Highlight/Highlight.tsx +++ b/packages/ui/src/components/Highlight/Highlight.tsx @@ -7,32 +7,32 @@ import { CopyIcon } from '../Icons/Copy'; interface HighlightProps { language: 'json' | 'stacktrace'; - code: string | null; + text: string; } -export const Highlight: React.FC = ({ language, code }) => { - const [highlightedCode, setHighlightedCode] = useState(''); +export const Highlight: React.FC = ({ language, text }) => { + const [code, setCode] = useState(''); - const highlightCode = async () => { - setHighlightedCode(await asyncHighlight(code as string, language)); + const textToCode = async () => { + setCode(await asyncHighlight(text as string, language)); }; useEffect(() => { - highlightCode(); + textToCode(); }, []); useEffect(() => { - highlightCode(); - }, [language, code]); + textToCode(); + }, [language, text]); const handleCopyClick = () => { - navigator.clipboard.writeText(code ?? ''); + navigator.clipboard.writeText(text ?? ''); }; return ( 
-        
+
) : ( - ); case 'Options': @@ -38,7 +38,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp {t('JOB.SHOW_OPTIONS_BTN')} ) : ( - + ); case 'Error': if (stacktrace.length === 0) { @@ -50,7 +50,7 @@ export const DetailsContent = ({ selectedTab, job, actions }: DetailsContentProp {t('JOB.SHOW_ERRORS_BTN')} ) : ( - + ); case 'Logs': return ; diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 7bb0935e..6f5e6edd 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -42,7 +42,11 @@ export const JobCard = ({ const { t } = useTranslation(); const { collapseJob } = useSettingsStore(); - const [isOpen, setIsOpen] = React.useState(!jobUrl ? true : !collapseJob); + const [isOpen, setIsOpen] = React.useState(false); + + React.useEffect(() => { + setIsOpen(!jobUrl ? true : !collapseJob) + }), [jobUrl, collapseJob]; const JobTitle =

#{job.id}

From c76413b3339d539599c178e2c73b3cb9e2307fd9 Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Tue, 27 Feb 2024 10:14:47 -0500 Subject: [PATCH 07/10] fix regression bug + button inside button --- packages/ui/src/components/JobCard/JobCard.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 6f5e6edd..10a7a048 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -42,11 +42,13 @@ export const JobCard = ({ const { t } = useTranslation(); const { collapseJob } = useSettingsStore(); - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = React.useState(); React.useEffect(() => { - setIsOpen(!jobUrl ? true : !collapseJob) - }), [jobUrl, collapseJob]; + if (isOpen === undefined) { + setIsOpen(!jobUrl ? true : !collapseJob) + } + }), []; const JobTitle =

#{job.id}

@@ -60,11 +62,11 @@ export const JobCard = ({ ) : JobTitle} - + {jobUrl && ( - + )}
@@ -78,7 +80,7 @@ export const JobCard = ({
{t('JOB.NAME')}: {job.name} {job.attempts > 1 && ( - + - {t('JOB.ATTEMPTS', { attempts: job.attempts })} )} From 7bd95164e8bb3c506528fcb5fbfa18492b32f827 Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Tue, 27 Feb 2024 10:24:33 -0500 Subject: [PATCH 08/10] f --- packages/ui/src/components/JobCard/JobCard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 10a7a048..912fa37b 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -45,9 +45,8 @@ export const JobCard = ({ const [isOpen, setIsOpen] = React.useState(); React.useEffect(() => { - if (isOpen === undefined) { + if (isOpen === undefined) setIsOpen(!jobUrl ? true : !collapseJob) - } }), []; const JobTitle =

#{job.id}

From 018f0e172380fe4040949fc7ad8450df5bac7d1d Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Wed, 6 Mar 2024 18:16:52 -0500 Subject: [PATCH 09/10] handle global collapse state live --- .../src/components/JobCard/JobCard.module.css | 4 ++++ packages/ui/src/components/JobCard/JobCard.tsx | 17 +++++++---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index a74d16b6..7075f59c 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -26,6 +26,10 @@ border-bottom: 1px solid #e2e8f0; } +.attempts { + margin-left: '0.5rem' +} + .title h4, .sideInfo span { font-size: 1.44rem; diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx index 912fa37b..4e9328f8 100644 --- a/packages/ui/src/components/JobCard/JobCard.tsx +++ b/packages/ui/src/components/JobCard/JobCard.tsx @@ -42,18 +42,15 @@ export const JobCard = ({ const { t } = useTranslation(); const { collapseJob } = useSettingsStore(); - const [isOpen, setIsOpen] = React.useState(); + const [localCollapse, setLocalCollapse] = React.useState(); - React.useEffect(() => { - if (isOpen === undefined) - setIsOpen(!jobUrl ? true : !collapseJob) - }), []; + const isExpandedCard = !jobUrl || (localCollapse || !collapseJob); - const JobTitle =

#{job.id}

+ const JobTitle =

#{job.id}

; return ( - +
{jobUrl ? ( @@ -62,8 +59,8 @@ export const JobCard = ({ ) : JobTitle} {jobUrl && ( - )}
@@ -79,7 +76,7 @@ export const JobCard = ({
{t('JOB.NAME')}: {job.name} {job.attempts > 1 && ( - + - {t('JOB.ATTEMPTS', { attempts: job.attempts })} )} From c40e4179b9a3b151115815aab81928ddebbcadda Mon Sep 17 00:00:00 2001 From: Ivn Nv Date: Wed, 6 Mar 2024 18:32:17 -0500 Subject: [PATCH 10/10] revert spacings --- packages/ui/src/components/JobCard/Details/Details.module.css | 2 +- packages/ui/src/components/JobCard/JobCard.module.css | 4 ++-- .../ui/src/components/JobCard/Timeline/Timeline.module.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css index 7075f59c..ae8da6ff 100644 --- a/packages/ui/src/components/JobCard/JobCard.module.css +++ b/packages/ui/src/components/JobCard/JobCard.module.css @@ -3,13 +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: 0.66em; + padding: 1em; display: flex; max-height: 500px; } .card + .card { - margin-top: 0.75rem; + margin-top: 2rem; } .contentWrapper { 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;