From db501fbade288abb66fc4dacdfb9b3e07b858aeb Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Mon, 18 May 2026 16:45:03 -0300 Subject: [PATCH 1/2] fix: feature pipeline status dark mode (#7018) Swap hardcoded `white`, `#AAA`, `#6837fc`, `#53af41` for semantic tokens so the stage circles and connector lines render correctly in dark mode (and align with the design system in light mode). Co-Authored-By: Claude Opus 4.7 --- .../components/_feature-pipeline-status.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/web/styles/components/_feature-pipeline-status.scss b/frontend/web/styles/components/_feature-pipeline-status.scss index 07470670fb55..957fb958eae8 100644 --- a/frontend/web/styles/components/_feature-pipeline-status.scss +++ b/frontend/web/styles/components/_feature-pipeline-status.scss @@ -1,7 +1,7 @@ .circle-container { - background-color: white; + background-color: var(--color-surface-default); border: 4px solid; - border-color: #AAA; + border-color: var(--color-border-default); border-radius: 50%; height: 40px; width: 40px; @@ -13,11 +13,11 @@ justify-content: center; &.in-stage { - border-color: #6837fc; + border-color: var(--color-border-action); } &.completed { - border-color: #53af41; + border-color: var(--color-border-success); } } @@ -27,7 +27,7 @@ } .line-left { - background-color: #AAA; + background-color: var(--color-border-default); border: unset; height: 3px; left: 0%; @@ -36,11 +36,11 @@ z-index: 1; &.completed { - background-color: #53af41; + background-color: var(--color-border-success); } } .line-right { - background-color: #AAA; + background-color: var(--color-border-default); border: unset; height: 3px; left: 50%; @@ -49,6 +49,6 @@ z-index: 1; &.completed { - background-color: #53af41; + background-color: var(--color-border-success); } - } \ No newline at end of file + } From 73c3253faa7e1c4eb9abc179d6de62fc37514f66 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Mon, 18 May 2026 17:00:32 -0300 Subject: [PATCH 2/2] refactor: decouple feature pipeline status from flux store + minor cleanup - Lift environment lookup from StageStatus into FeaturePipelineStatus via useGetEnvironmentsQuery; pass resolved envName as a prop so StageStatus no longer depends on ProjectStore. - Drop hardcoded `fill='#6837FC'` and `fill='#53af41'` on stage icons; icons now inherit `currentColor` from `.in-stage` / `.completed` modifiers on `.circle-container`. - Replace inline `style={{ marginRight }}` with Bootstrap `me-0` / `me-4` classNames. - Use `` instead of `

` for the env-name label so it sits inline with the stage name. - Remove duplicate `lastStage` / `isLastStage` variables. - Swap `?? NaN` sentinel on `pipelineId` for `?? 0`. Co-Authored-By: Claude Opus 4.7 --- .../FeaturePipelineStatus.tsx | 15 +++++++- .../release-pipelines/StageStatus.tsx | 37 ++++++------------- .../components/_feature-pipeline-status.scss | 2 + 3 files changed, 26 insertions(+), 28 deletions(-) diff --git a/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx b/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx index afd77e9b239a..13664d777bd8 100644 --- a/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx +++ b/frontend/web/components/release-pipelines/FeaturePipelineStatus.tsx @@ -2,6 +2,7 @@ import { useGetReleasePipelineQuery, useGetReleasePipelinesQuery, } from 'common/services/useReleasePipelines' +import { useGetEnvironmentsQuery } from 'common/services/useEnvironment' import AccordionCard from 'components/base/accordion/AccordionCard' import { useMemo } from 'react' @@ -39,7 +40,7 @@ const FeaturePipelineStatus = ({ const { data: releasePipeline } = useGetReleasePipelineQuery( { - pipelineId: matchingReleasePipeline?.id ?? NaN, + pipelineId: matchingReleasePipeline?.id ?? 0, projectId: Number(projectId), }, { @@ -50,6 +51,16 @@ const FeaturePipelineStatus = ({ const stages = releasePipeline?.stages const totalStages = (stages?.length ?? 0) + 1 + const { data: environments } = useGetEnvironmentsQuery( + { projectId: Number(projectId) }, + { skip: !projectId || !stages?.length }, + ) + const envNameById = useMemo(() => { + const map = new Map() + environments?.results?.forEach((env) => map.set(env.id, env.name)) + return map + }, [environments]) + const stageHasFeature = useMemo( () => stages?.find((stage) => { @@ -74,7 +85,7 @@ const FeaturePipelineStatus = ({ key={stage.id} stageOrder={stage.order} stageName={stage.name} - stageEnvironment={stage.environment} + envName={envNameById.get(stage.environment)} stageActions={stage.actions} stageTrigger={stage.trigger} totalStages={totalStages} diff --git a/frontend/web/components/release-pipelines/StageStatus.tsx b/frontend/web/components/release-pipelines/StageStatus.tsx index da86dcadbee3..c75afdca27f4 100644 --- a/frontend/web/components/release-pipelines/StageStatus.tsx +++ b/frontend/web/components/release-pipelines/StageStatus.tsx @@ -1,6 +1,4 @@ -import ProjectStore from 'common/stores/project-store' import { - Environment, Features, StageAction, StageTrigger, @@ -18,16 +16,16 @@ interface StageStatusProps { totalStages: number stageActions?: StageAction[] stageTrigger?: StageTrigger - stageEnvironment?: number + envName?: string featureInStage?: Features[number] isCompleted?: boolean } const StageStatus = ({ + envName, featureInStage, isCompleted, stageActions, - stageEnvironment, stageName, stageOrder, stageTrigger, @@ -35,27 +33,19 @@ const StageStatus = ({ }: StageStatusProps) => { const isFeatureInStage = !!featureInStage const showLine = totalStages > 1 - const lastStage = stageOrder === totalStages - 1 + const isLastStage = stageOrder === totalStages - 1 const showLeftLine = showLine && stageOrder > 0 - const showRightLine = showLine && stageOrder !== totalStages - 1 + const showRightLine = showLine && !isLastStage const isWaiting = stageTrigger?.trigger_type === StageTriggerType.WAIT_FOR && isFeatureInStage - const isLastStage = stageOrder === totalStages - 1 - - const stageStyle = { - marginRight: lastStage ? '0px' : '24px', - } - - const env = ProjectStore.getEnvironmentById( - stageEnvironment, - ) as unknown as Environment - const envName = env?.name return (

{showLeftLine && (
{isWaiting ? ( - + ) : undefined} {isCompleted ? ( - + ) : undefined}
} @@ -108,7 +93,7 @@ const StageStatus = ({ {stageName} - {envName &&

{envName}

} + {envName && {envName}}
) } diff --git a/frontend/web/styles/components/_feature-pipeline-status.scss b/frontend/web/styles/components/_feature-pipeline-status.scss index 957fb958eae8..1902077a2eb6 100644 --- a/frontend/web/styles/components/_feature-pipeline-status.scss +++ b/frontend/web/styles/components/_feature-pipeline-status.scss @@ -14,10 +14,12 @@ &.in-stage { border-color: var(--color-border-action); + color: var(--color-icon-action); } &.completed { border-color: var(--color-border-success); + color: var(--color-icon-success); } }