From e77ae6b73f1c7c899957a41d1ae5716fcb5dbcca Mon Sep 17 00:00:00 2001 From: Brendan Gibson Date: Thu, 25 Jul 2024 15:37:17 -0600 Subject: [PATCH] Reduce column widths --- .../__tests__/LogList.test.cypress.tsx | 2 -- src/components/StatusIndicator/index.tsx | 1 + src/components/Structure/index.tsx | 2 +- src/components/Trigger/index.tsx | 15 ++++++++++- src/pages/Home/Content/index.tsx | 5 +++- src/pages/Home/ResultGroup/StartedAtCell.tsx | 17 +++++++----- src/pages/Home/ResultGroup/index.tsx | 6 ++--- src/pages/Home/Sidebar/index.tsx | 26 ++++++++++++++----- src/styled.d.ts | 9 ++++++- src/theme/index.tsx | 9 ++++++- src/translations/en.ts | 4 +-- 11 files changed, 71 insertions(+), 25 deletions(-) diff --git a/src/components/LogList/__tests__/LogList.test.cypress.tsx b/src/components/LogList/__tests__/LogList.test.cypress.tsx index 80e1dcd0..73b786e0 100644 --- a/src/components/LogList/__tests__/LogList.test.cypress.tsx +++ b/src/components/LogList/__tests__/LogList.test.cypress.tsx @@ -32,8 +32,6 @@ function generateLines(amount: number) { const LIST_CONTAINER_CLASS = 'ReactVirtualized__List'; describe('LogActionBar', () => { - - it('Should render message about empty preload when preload was empty or error and final fetch is not started', () => { mount( diff --git a/src/components/StatusIndicator/index.tsx b/src/components/StatusIndicator/index.tsx index b33eea97..5cabf894 100644 --- a/src/components/StatusIndicator/index.tsx +++ b/src/components/StatusIndicator/index.tsx @@ -16,6 +16,7 @@ const StatusIndicator: React.FC<{ status: keyof RunStatus | TaskStatus }> = ({ s const StatusColorIndicator = styled.div<{ status: string }>` display: flex; color: ${(p) => (p.status === 'failed' ? 'white' : colorByStatus(p.theme, p.status))}; + justify-content: center; `; export default StatusIndicator; diff --git a/src/components/Structure/index.tsx b/src/components/Structure/index.tsx index 5a4ce0a1..1a7e464e 100755 --- a/src/components/Structure/index.tsx +++ b/src/components/Structure/index.tsx @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components'; export const Page = styled.div` max-width: ${(p) => p.theme.layout.maxWidth}px; margin: 0 auto 0 auto; - padding: 0 ${(p) => p.theme.layout.pagePaddingX}rem ${(p) => p.theme.layout.pagePaddingY}rem; + padding: 0 0 ${(p) => p.theme.layout.pagePaddingY}rem ${(p) => p.theme.layout.pagePaddingX}rem; min-height: 100vh; display: flex; flex-direction: column; diff --git a/src/components/Trigger/index.tsx b/src/components/Trigger/index.tsx index 9f916695..4d4a4c62 100644 --- a/src/components/Trigger/index.tsx +++ b/src/components/Trigger/index.tsx @@ -48,7 +48,7 @@ const Trigger: React.FC = ({ triggerEventsValue, className, showToolTip = {link ? ( - {showToolTip ? displayLabel : id} + {showToolTip ? displayLabel : id} ) : ( <> @@ -86,4 +86,17 @@ const StyledIcon = styled(Icon)` } `; +const LabelWrapper = styled.div` + vertical-align: middle; + display: inline-block; + white-space: nowrap; + + @media (max-width: ${(p) => p.theme.breakpoint.sm}) { + text-overflow: ellipsis; + overflow: hidden; + width: 0; + min-width: 100%; + } +`; + export default Trigger; diff --git a/src/pages/Home/Content/index.tsx b/src/pages/Home/Content/index.tsx index 18d9967b..2456a091 100644 --- a/src/pages/Home/Content/index.tsx +++ b/src/pages/Home/Content/index.tsx @@ -91,7 +91,10 @@ export default HomeContentArea; const Content = styled.div` position: relative; - margin-left: ${(p) => p.theme.layout.sidebarWidth + 1}rem; + margin-left: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem; + @media (max-width: ${(p) => p.theme.breakpoint.sm}) { + margin-left: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem; + } max-width: 100%; display: flex; flex-direction: column; diff --git a/src/pages/Home/ResultGroup/StartedAtCell.tsx b/src/pages/Home/ResultGroup/StartedAtCell.tsx index 0f2e813c..992ae3fb 100644 --- a/src/pages/Home/ResultGroup/StartedAtCell.tsx +++ b/src/pages/Home/ResultGroup/StartedAtCell.tsx @@ -41,17 +41,18 @@ const StartedAtCell: React.FC = ({ run, link, timezone }) => { fetchAllData: true, }); - const hasTrigger = Boolean(metadataRecord?.['execution-triggers']); + const triggerEventsValue = JSON.parse(metadataRecord?.['execution-triggers'] ?? '[]'); + const hasTrigger = Boolean(triggerEventsValue); const displayTime = getRunStartTime(run, timezone); const [date, time] = displayTime ? displayTime.split(' ') : [null, null]; return ( - {date} - {time} - {hasTrigger ? ( - - ) : null} + + {date} + {time} + {hasTrigger ? : null} + ); }; @@ -65,4 +66,8 @@ const DisplayTime = styled.div` word-break: break-word; `; +const StartedAtWrapper = styled.div` + display: inline-block; +`; + export default StartedAtCell; diff --git a/src/pages/Home/ResultGroup/index.tsx b/src/pages/Home/ResultGroup/index.tsx index c34bd763..8276984b 100644 --- a/src/pages/Home/ResultGroup/index.tsx +++ b/src/pages/Home/ResultGroup/index.tsx @@ -86,9 +86,9 @@ const ResultGroup: React.FC = React.memo( hidden: queryParams._group === 'user', maxWidth: '12.5%', }, - { label: t('fields.started-at'), sortable: true, key: 'ts_epoch', maxWidth: '170' }, - { label: t('fields.finished-at'), sortable: true, key: 'finished_at', maxWidth: '170' }, - { label: t('fields.duration'), sortable: true, key: 'duration', maxWidth: '130' }, + { label: t('fields.started-at'), sortable: true, key: 'ts_epoch' }, + { label: t('fields.finished-at'), sortable: true, key: 'finished_at' }, + { label: t('fields.duration'), sortable: true, key: 'duration' }, { label: t('fields.user-tags'), key: 'tags' }, ].filter((item) => !item.hidden); diff --git a/src/pages/Home/Sidebar/index.tsx b/src/pages/Home/Sidebar/index.tsx index 96b84f3c..7eb3a2ab 100644 --- a/src/pages/Home/Sidebar/index.tsx +++ b/src/pages/Home/Sidebar/index.tsx @@ -42,10 +42,7 @@ const HomeSidebar: React.FC = ({ handleParamChange, updateListValue, para return ( {/* Add sidebar size to be 100% viewheight - (header size + 1 rem for padding) */} - + {FEATURE_FLAGS.RUN_GROUPS && ( @@ -161,7 +158,7 @@ const HomeSidebar: React.FC = ({ handleParamChange, updateListValue, para )} - + ); }; @@ -191,18 +188,33 @@ const ButtonResetAll = styled(Button)` const Sidebar = styled.div` position: fixed; - width: ${(p) => p.theme.layout.sidebarWidth}rem; + width: ${(p) => p.theme.layout.sidebarWidth.md}rem; + @media (max-width: ${(p) => p.theme.breakpoint.sm}) { + width: ${(p) => p.theme.layout.sidebarWidth.sm}rem; + } top: ${(p) => p.theme.layout.appbarHeight}rem; font-size: 0.875rem; padding-top: 6px; `; const SidebarContent = styled.div` - width: 14rem; + width: ${(p) => p.theme.layout.sidebarWidth.md}rem; + @media (max-width: ${(p) => p.theme.breakpoint.sm}) { + width: ${(p) => p.theme.layout.sidebarWidth.sm}rem; + } padding-top: 0.5rem; padding-left: 0.25rem; `; +const StyledScrollbars = styled(Scrollbars)` + height: calc(100vh - ${HEADER_SIZE_REM + 1}rem) !important; + width: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem !important; + @media (max-width: ${(p) => p.theme.breakpoint.sm}) { + width: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem !important; + } + padding-top: 0.25rem; +`; + export const SidebarSectionWrapper = styled.div` margin: 0 0 1rem; `; diff --git a/src/styled.d.ts b/src/styled.d.ts index 30c99e60..20b83f12 100755 --- a/src/styled.d.ts +++ b/src/styled.d.ts @@ -22,7 +22,14 @@ declare module 'styled-components' { /** This value is used for horizontal padding in pages and pagewide floating elements (rem) */ pagePaddingX: number; pagePaddingY: number; - sidebarWidth: number; + sidebarWidth: { + sm: number; + md: number; + }; + }; + + breakpoint: { + sm: string; }; spacer: { diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 16c7ce92..32c2efc0 100755 --- a/src/theme/index.tsx +++ b/src/theme/index.tsx @@ -104,11 +104,18 @@ const defaultTheme: DefaultTheme = { appbarLogoHeight: 1.5, pagePaddingX: spacer.ml, pagePaddingY: spacer.lg, - sidebarWidth: 14, + sidebarWidth: { + md: 14, + sm: 12, + }, }, spacer, + breakpoint: { + sm: '1280px', + }, + color: { text: textColor, bg: bgColor, diff --git a/src/translations/en.ts b/src/translations/en.ts index 8d3acabb..dc410979 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -46,13 +46,13 @@ const en = { tag: 'Tag', project: 'Project', branch: 'Branch', - 'user-tags': 'User tags', + 'user-tags': 'Tags', tasks: 'Tasks', 'filter-by': 'Filter by', flow_id: 'Flow', id: 'ID', - status: 'Status', + status: '', 'triggered-by': 'Triggered by', 'started-at': 'Started at', 'finished-at': 'Finished at',