Add various CSS variables and fix small UI issues

rsanteri · rsanteri · commit b4f5dfd0dfe1 · 2025-02-26T18:38:14.000+02:00
diff --git a/src/components/Breadcrumb/index.tsx b/src/components/Breadcrumb/index.tsx
@@ -380,6 +380,8 @@ const ContainerBaseStyle = css`
   border: var(--breadcrumb-border);
   height: var(--breadcrumb-height);
   background: var(--breadcrumb-bg);
+  box-shadow: var(--breadcrumb-shadow);
+  border-radius: var(--breadcrumb-border-radius);
 `;
 
 const BreadcrumbGroup = styled.div`
@@ -417,7 +419,8 @@ const ButtonCrumb = styled(BigButton)`
 
   padding-left: var(--spacing-3);
   padding-right: var(--spacing-3);
-  color: var(--color-text-primary);
+  font-weight: var(--breadcrumb-font-weight);
+  color: var(--breadcrumb-text-color);
 
   overflow-x: hidden;
   max-width: 18.75rem;
@@ -426,6 +429,8 @@ const ButtonCrumb = styled(BigButton)`
 
   &.active {
     background: transparent;
+    font-weight: var(--breadcrumb-highlight-font-weight);
+    color: var(--breadcrumb-highlight-text-color);
   }
 
   &:hover {
@@ -437,7 +442,7 @@ const ButtonCrumb = styled(BigButton)`
 const BreadcrumbDivider = styled.div`
   display: inline-block;
   pointer-events: none;
-  color: var(--color-text-primary);
+  color: var(--breadcrumb-text-color);
   font-weight: bold;
   &:after {
     content: '/';
@@ -465,9 +470,11 @@ const StyledBreadcrumb = styled(ItemRow)`
 
 const BreadcrumbInputWrapper = styled(InputWrapper)`
   ${ContainerBaseStyle}
+  box-shadow: none;
 `;
 
 const GoToHolder = styled.div`
+  margin-right: 0;
   position: relative;
   font-size: var(--font-size-primary);
   height: var(--breadcrumb-height);
@@ -480,7 +487,7 @@ const GoToContainer = styled.div`
   top: calc(var(--spacing-3) * -1);
   left: calc(var(--spacing-3) * -1);
   ${PopoverStyles}
-  width: 100%;
+  width: calc(100% + var(--spacing-3));
 `;
 
 const GotoClose = styled.div`
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -155,7 +155,7 @@ export const ButtonCSS = css`
 
 const StyledButton = styled.button<StyledButtonProps>`
   ${ButtonCSS};
-  padding: var(--spacing-1) ${(p) => (p.iconOnly ? 'var(--spacing-1)' : 'var(--spacing-3)')};
+  padding: ${(p) => (p.iconOnly ? 'var(--icon-button-padding)' : 'var(--button-padding)')};
   ${(p) => getButtonColors(p.variant)};
   ${(p) => p.active && ActiveButtonCSS};
   ${(p) => p.disabled && DisabledButtonCSS};
diff --git a/src/components/Collapsable/index.tsx b/src/components/Collapsable/index.tsx
@@ -38,6 +38,7 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
     <CollapseContainer>
       <Container active={transitioning}>
         <CollapsableHeader
+          open={open}
           onClick={() => {
             setTransitioning(true);
             setOpen(!open);
@@ -65,15 +66,16 @@ const Collapsable: React.FC<CollapsableProps> = ({ children, title, animated = t
 //
 
 const CollapseContainer = styled.div`
-  margin: 0.5rem 0 1rem 0;
+  margin: var(--collapsable-margin);
 `;
 
-const CollapsableHeader = styled.div`
+const CollapsableHeader = styled.div<{ open: boolean }>`
   display: flex;
   justify-content: flex-start;
+  font-family: var(--collapsable-header-font-family);
   font-size: var(--font-size-primary);
-  color: var(--collapsable-header-text-color);
   font-weight: 500;
+  color: ${(p) => (p.open ? 'var(--collapsable-header-open-text-color)' : 'var(--collapsable-header-text-color)')};
   line-height: 1.5rem;
   padding: var(--collapsable-header-padding);
   border-bottom: var(--collapsable-header-border-bottom);
diff --git a/src/components/DataHeader/index.tsx b/src/components/DataHeader/index.tsx
@@ -44,7 +44,7 @@ const DataHeaderContainer = styled.div<{ isWide: boolean }>`
   font-size: var(--data-header-font-size);
   color: var(--data-header-text-color);
   margin: 0 ${(p) => (p.isWide ? 'calc(var(--layout-page-padding-x) * -1)' : '0')};
-  padding: 1rem ${(p) => (p.isWide ? 'var(--layout-page-padding-x)' : '0.5rem')};
+  padding: ${(p) => (p.isWide ? 'var(--data-header-padding-wide)' : 'var(--data-header-padding)')};
 `;
 
 const DataHeaderContent = styled.div`
diff --git a/src/components/Form/InputLabel.tsx b/src/components/Form/InputLabel.tsx
@@ -7,7 +7,7 @@ import { AsyncStatus } from '../../types';
 //
 
 export const InputLabel = styled(ForceNoWrapText)<{ active: boolean; status?: AsyncStatus }>`
-  background: var(--color-bg-primary);
+  background: inherit;
   font-size: var(--input-label-font-size);
   font-weight: var(--input-label-font-weight);
   padding: 0 0.25rem;
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import styled, { css } from 'styled-components';
+import InputWrapper from '../Form/InputWrapper';
 
 //
 // Fixed container for popups
@@ -23,6 +24,10 @@ export const PopoverStyles = css`
   padding: var(--popover-padding);
   background: var(--popover-background);
   border-radius: var(--popover-border-radius);
+
+  ${InputWrapper} {
+    background: var(--popover-background);
+  }
 `;
 
 export const PopoverWrapper = styled.div<{ show: boolean; alignment?: 'left' | 'right' }>`
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -154,8 +154,17 @@ export const HeaderColumn: React.FC<HeaderColumnProps> = ({
     >
       <HeaderColumnWrapper>
         {label}
-        {sortable && <SortIcon active={active} direction={direction} padLeft />}
+        {sortable && (
+          <SortIconContainer>
+            <SortIcon active={active} direction={direction} padLeft />
+          </SortIconContainer>
+        )}
       </HeaderColumnWrapper>
     </TH>
   );
 };
+
+const SortIconContainer = styled.div`
+  display: inline-flex;
+  margin-left: var(--spacing-1);
+`;
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
@@ -37,7 +37,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, activeTab, widen }) => {
 
   return (
     <TabsContainer>
-      <Scrollbars style={{ height: '2.875rem', width: '100%' }} autoHide>
+      <Scrollbars style={{ height: 'var(--tab-heading-height)', width: '100%' }} autoHide>
         <TabsHeading widen={widen}>
           {tabs.map((tab) =>
             tab.linkTo ? (
@@ -108,10 +108,12 @@ export const TabsHeadingItem = styled.div<{ active: boolean; temporary?: boolean
     p.active ? 'var(--tab-heading-item-active-border-bottom)' : 'var(--tab-heading-item-border-bottom)'};
   background: ${(p) =>
     p.temporary && p.active
-      ? 'var(--color-bg-secondary-highlight)'
+      ? 'var(--tab-heading-active-bg)'
       : p.temporary
         ? '#f6f6f6'
-        : 'var(--tab-heading-bg)'};
+        : p.active
+          ? 'var(--tab-heading-active-bg)'
+          : 'var(--tab-heading-bg)'};
   color: ${(p) => (p.active ? 'var(--tab-heading-active-text-color)' : 'var(--tab-heading-text-color)')};
   font-weight: ${(p) => (p.active ? 'var(--tab-heading-active-font-weight)' : 'var(--tab-heading-font-weight)')};
   cursor: pointer;
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -276,7 +276,7 @@ const StickyHeader: React.FC<{
 // Style
 //
 
-const ListContainer = styled.div<{ customMinHeight: number }>`
+export const ListContainer = styled.div<{ customMinHeight: number }>`
   flex: 1;
   min-height: ${(p) => `${p.customMinHeight}rem`};
   max-width: 100%;
diff --git a/src/components/TitledRow/index.tsx b/src/components/TitledRow/index.tsx
@@ -85,7 +85,7 @@ export function valueToRenderableType(
 //
 
 const StyledTitledRow = styled.div`
-  margin: 1rem 0 0.5rem 0;
+  margin: var(--titled-row-margin);
 `;
 
 const TitledRowTitle = styled.div`
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,4 @@
 import { FeatureFlags } from './utils/FEATURE';
-import { toRelativeSize } from './utils/style';
 
 declare global {
   interface Window {
@@ -37,9 +36,6 @@ export const formatUrl = (base: string, path: string): string => `${base}/${path
 export const apiHttp = (path: string): string => formatUrl(METAFLOW_SERVICE, path);
 export const apiWs = (path: string): string => formatUrl(METAFLOW_SERVICE_WS, path);
 
-export const HEADER_SIZE_PX = 112;
-export const HEADER_SIZE_REM = toRelativeSize(112 / 16);
-
 /**
  * Look for number of days to display in following order:
  *
diff --git a/src/mocks/browser.js b/src/mocks/browser.js
@@ -91,7 +91,7 @@ export const worker = setupWorker(
     ts_epoch: 1739390473221,
     tags: ['testingtag'],
     status: 'completed',
-    system_tags: ['user:SanteriCM'],
+    system_tags: ['user:SanteriCM', 'Another_tag', 'Hello world'],
   }),
   stantardGetEndpoint('api/flows/:flowid/runs/:id/metadata', [
     {
@@ -395,6 +395,50 @@ export const worker = setupWorker(
     decorators: [],
     extensions: {},
   }),
+  stantardGetEndpoint('api/flows/:flowid/runs/:runid/steps/:stepid/tasks/:taskid/logs/out', [
+    {
+      row: 0,
+      timestamp: 1730493994529,
+      line: 'Start of std out logs',
+    },
+    {
+      row: 1,
+      timestamp: 1730493994529,
+      line: 'Log message: Hello world',
+    },
+    {
+      row: 2,
+      timestamp: 1730493994529,
+      line: 'Log message: Hello world',
+    },
+    {
+      row: 3,
+      timestamp: 1730493994529,
+      line: 'End of logs',
+    },
+  ]),
+  stantardGetEndpoint('api/flows/:flowid/runs/:runid/steps/:stepid/tasks/:taskid/logs/err', [
+    {
+      row: 0,
+      timestamp: 1730493994529,
+      line: 'Start of error logs',
+    },
+    {
+      row: 1,
+      timestamp: 1730493994529,
+      line: 'Critical error in some background system:',
+    },
+    {
+      row: 2,
+      timestamp: 1730493994529,
+      line: 'Error: 404 Not Found',
+    },
+    {
+      row: 3,
+      timestamp: 1730493994529,
+      line: 'End of error logs',
+    },
+  ]),
   rawGetEndpoint('api/plugin', []),
   rawGetEndpoint('api/features', {}),
   stantardGetEndpoint('api/links', []),
diff --git a/src/pages/Home/ResultGroup/ResultGroupRow.tsx b/src/pages/Home/ResultGroup/ResultGroupRow.tsx
@@ -146,7 +146,7 @@ const StyledTD = styled.td`
 `;
 
 const StyledSection = styled(Section)<{ closing: boolean }>`
-  padding: 0.5rem 0.5rem 0;
+  padding: var(--result-group-expand-padding);
   margin-bottom 0;
   border-right: var(--border-thin-1);
   border-bottom: var(--border-thin-1);
diff --git a/src/pages/Home/ResultGroup/StickyHeader.tsx b/src/pages/Home/ResultGroup/StickyHeader.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { HEADER_SIZE_PX } from '../../../constants';
 import styled from 'styled-components';
+import { getHeaderSizePx } from '../../../utils/style';
 
 //
 // Typedef
@@ -39,7 +39,7 @@ const StickyHeader: React.FC<Props> = ({ tableRef, children }) => {
 //
 
 function headerShouldStick(rect: DOMRect | undefined) {
-  if (rect && rect.y < HEADER_SIZE_PX && rect.y + rect.height > 84) {
+  if (rect && rect.y < getHeaderSizePx() && rect.y + rect.height > 84) {
     return true;
   }
   return false;
diff --git a/src/pages/Home/ResultGroup/TimelinePreview.tsx b/src/pages/Home/ResultGroup/TimelinePreview.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import Collapsable from '../../../components/Collapsable';
-import Timeline, { ROW_HEIGHT, SPACE_UNDER_TIMELINE } from '../../../components/Timeline/Timeline';
+import Timeline, { ListContainer, ROW_HEIGHT, SPACE_UNDER_TIMELINE } from '../../../components/Timeline/Timeline';
 import useTaskData from '../../../components/Timeline/useTaskData';
 import TimelineNoRows from '../../../components/Timeline/TimelineNoRows';
 import { makeVisibleRows } from '../../Run/Run.utils';
@@ -73,8 +73,13 @@ const TimelinePreview: React.FC<TimelinePreviewProps> = ({ run }) => {
 
 const TimelinePreviewContainer = styled.div`
   max-height: 30rem;
-  margin-top: 1rem;
+  margin: var(--result-group-timeline-preview-margin);
   border-top: var(--border-medium-1);
+
+  ${ListContainer} {
+    border-radius: none;
+    box-shadow: none;
+  }
 `;
 
 export default TimelinePreview;
diff --git a/src/pages/Home/Sidebar/SidebarStatusSelection.tsx b/src/pages/Home/Sidebar/SidebarStatusSelection.tsx
@@ -22,8 +22,6 @@ const SidebarStatusSelection: React.FC<Props> = ({ updateField, status }) => {
         <SectionHeader>{t('fields.filter-by')}</SectionHeader>
       ) : (
         <>
-          <SectionHeader>{t('fields.status')}</SectionHeader>
-
           <CheckboxContainer>
             <StatusCheckboxField
               label={t('filters.completed')}
diff --git a/src/pages/Home/Sidebar/index.tsx b/src/pages/Home/Sidebar/index.tsx
@@ -11,10 +11,10 @@ import SidebarStatusSelection from './SidebarStatusSelection';
 import { TagParameterList } from './SidebarTags';
 import SidebarTimerangeSelection from './SidebarTimerangeSelection';
 import { isDefaultParams } from '../Home.utils';
-import { HEADER_SIZE_REM } from '../../../constants';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import { TimezoneContext } from '../../../components/TimezoneProvider';
 import FEATURE_FLAGS from '../../../utils/FEATURE';
+import { getHeaderSizeRem } from '../../../utils/style';
 
 //
 // Typedef
@@ -209,7 +209,7 @@ const SidebarContent = styled.div`
 `;
 
 const StyledScrollbars = styled(Scrollbars)`
-  height: calc(100vh - ${HEADER_SIZE_REM + 1}rem) !important;
+  height: calc(100vh - ${getHeaderSizeRem() + 1}rem) !important;
   width: calc(var(--sidebar-width-md) + 1rem) !important;
   @media (max-width: var(--layout-breakpoint-sm)) {
     width: calc(var(--sidebar-width-sm) + 1rem) !important;
diff --git a/src/pages/Run/RunHeader.tsx b/src/pages/Run/RunHeader.tsx
@@ -22,6 +22,7 @@ import Triggers from '../../components/Triggers';
 import TitledRow from '../../components/TitledRow';
 import { getISOString } from '../../utils/date';
 import { TriggerEventsValue } from '../../components/Trigger';
+import { PluginsContext } from '../../components/Plugins/PluginManager';
 
 //
 // Typedef
@@ -47,6 +48,8 @@ const RunHeader: React.FC<Props> = ({ run, metadataRecord }) => {
   const { t } = useTranslation();
   const history = useHistory();
   const { timezone } = useContext(TimezoneContext);
+  const { getPluginsBySlot } = useContext(PluginsContext);
+  const hasPlugins = getPluginsBySlot('run-header').length > 0;
 
   const headerItems = [
     { label: t('fields.run-id'), value: getRunId(run) },
@@ -131,7 +134,7 @@ const RunHeader: React.FC<Props> = ({ run, metadataRecord }) => {
             push={history.push}
             noTagsMsg={t('run.no-system-tags')}
           />
-          <PluginWrapper>
+          <PluginWrapper active={hasPlugins}>
             <PluginGroup id={getRunId(run)} title="Extensions" slot="run-header" />
           </PluginWrapper>
         </>
@@ -182,8 +185,8 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const PluginWrapper = styled.div`
-  margin-top: 1rem;
+const PluginWrapper = styled.div<{ active: boolean }>`
+  margin-top: ${(p) => (p.active ? '1rem' : '0')};
 `;
 
 const TriggersInHeader = styled(Triggers)`
diff --git a/src/pages/Run/components/TagRow.tsx b/src/pages/Run/components/TagRow.tsx
diff --git a/src/pages/Task/components/AnchorMenu.tsx b/src/pages/Task/components/AnchorMenu.tsx
diff --git a/src/pages/Task/components/AnchoredView.tsx b/src/pages/Task/components/AnchoredView.tsx
diff --git a/src/pages/Task/components/ArtifactViewer.tsx b/src/pages/Task/components/ArtifactViewer.tsx
diff --git a/src/pages/Task/components/AttemptSelector.tsx b/src/pages/Task/components/AttemptSelector.tsx
diff --git a/src/pages/Task/components/TaskList.tsx b/src/pages/Task/components/TaskList.tsx
diff --git a/src/theme/theme.css b/src/theme/theme.css
diff --git a/src/utils/style.ts b/src/utils/style.ts
