chore: temp - tone down drift chip (will be split to separate branch)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Signed-off-by: Kavith Lokuhewage <kaviththiranga@gmail.com>

Author: kaviththiranga

plugins/openchoreo/src/components/Environments/PipelineDAG/DeployFlowCanvas.tsx

@@ -23,8 +23,6 @@ import { useDeployFlowCanvasStyles } from '../styles';
 import { MiniEnvironmentNode } from '../components/MiniEnvironmentNode';
 import { SetupCard } from '../components/SetupCard';
 import type { ActionTrackers, Environment } from '../types';
-import type { ReleaseDriftInfo } from '../hooks/computeReleaseDrift';
-
 const SETUP_NODE_ID = '__setup__';
 
 export interface DeployFlowCanvasProps {
@@ -36,8 +34,6 @@ export interface DeployFlowCanvasProps {
   refreshingEnvName: (envName: string) => boolean;
   isAlreadyPromoted: (sourceEnv: Environment, targetEnvName: string) => boolean;
   actionTrackers: ActionTrackers;
-  /** Per-env drift info, keyed by env name. Missing entries default to no drift. */
-  driftByEnv?: Map<string, ReleaseDriftInfo>;
   /** Per-env active-incident summary, keyed by env name. */
   incidentsSummaries?: Map<string, { activeCount: number; loading: boolean }>;
   onSelectEnv: (envName: string | null) => void;
@@ -65,7 +61,6 @@ export const DeployFlowCanvas: FC<DeployFlowCanvasProps> = ({
   refreshingEnvName,
   isAlreadyPromoted,
   actionTrackers,
-  driftByEnv,
   incidentsSummaries,
   onSelectEnv,
   onSelectSetup,
@@ -255,7 +250,6 @@ export const DeployFlowCanvas: FC<DeployFlowCanvasProps> = ({
                   isRefreshing={refreshingEnvName(env.name)}
                   isAlreadyPromoted={target => isAlreadyPromoted(env, target)}
                   actionTrackers={actionTrackers}
-                  driftInfo={driftByEnv?.get(env.name)}
                   activeIncidentCount={
                     incidentsSummaries?.get(env.name)?.activeCount
                   }

plugins/openchoreo/src/components/Environments/PipelineDAG/PipelineCanvas.tsx

@@ -385,7 +385,6 @@ export const PipelineCanvas: FC = () => {
             refreshingEnvName={envName => refreshTracker.isActive(envName)}
             isAlreadyPromoted={isAlreadyPromoted}
             actionTrackers={actionTrackers}
-            driftByEnv={driftByEnv}
             incidentsSummaries={incidentsSummaries}
             onSelectEnv={name =>
               setSelection(name ? { kind: 'env', name } : null)

plugins/openchoreo/src/components/Environments/components/EnvironmentDetailPanel.test.tsx

@@ -415,7 +415,7 @@ describe('EnvironmentDetailPanel', () => {
     expect(screen.queryByLabelText('Copy release name')).toBeNull();
   });
 
-  it('renders a short "Behind upstream" line when driftInfo.isBehind', () => {
+  it('renders a short "Behind {upstream}" line when driftInfo.isBehind', () => {
     renderPanel({
       selection: {
         kind: 'env',
@@ -430,7 +430,7 @@ describe('EnvironmentDetailPanel', () => {
         aheadUpstreams: [{ envName: 'dev', releaseName: 'rel-7' }],
       },
     });
-    expect(screen.getByText(/^Behind upstream$/)).toBeInTheDocument();
+    expect(screen.getByText(/^Behind dev$/)).toBeInTheDocument();
     // Full upstream details live on the tooltip, not inline.
     expect(screen.queryByText(/rel-7/)).toBeNull();
   });

plugins/openchoreo/src/components/Environments/components/EnvironmentDetailPanel.tsx

@@ -19,6 +19,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import AllInboxOutlinedIcon from '@material-ui/icons/AllInboxOutlined';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined';
 import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
 import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined';
 import { StatusBadge } from '@openchoreo/backstage-design-system';
@@ -300,8 +301,10 @@ export const EnvironmentDetailPanel = ({
                   }
                 >
                   <Box className={classes.driftLabel}>
-                    <ReportProblemOutlinedIcon fontSize="small" />
-                    <Typography variant="caption">Behind upstream</Typography>
+                    <InfoOutlinedIcon fontSize="small" />
+                    <Typography variant="caption">
+                      Behind {driftInfo.aheadUpstreams[0]?.envName}
+                    </Typography>
                   </Box>
                 </Tooltip>
                 {driftInfo.aheadUpstreams[0]?.releaseName &&

plugins/openchoreo/src/components/Environments/components/MiniEnvironmentNode.test.tsx

@@ -319,32 +319,6 @@ describe('MiniEnvironmentNode', () => {
     ).toBeNull();
   });
 
-  it('renders the drift badge when driftInfo.isBehind is true', () => {
-    renderNode({
-      environment: makeEnv({
-        name: 'staging',
-        bindingName: 'staging-binding',
-        deployment: { status: 'Ready', releaseName: 'rel-5' },
-      }),
-      driftInfo: {
-        isBehind: true,
-        aheadUpstreams: [{ envName: 'dev', releaseName: 'rel-7' }],
-      },
-    });
-    expect(screen.getByLabelText('behind upstream')).toBeInTheDocument();
-  });
-
-  it('omits the drift badge when not behind', () => {
-    renderNode({
-      environment: makeEnv({
-        name: 'staging',
-        bindingName: 'staging-binding',
-        deployment: { status: 'Ready' },
-      }),
-    });
-    expect(screen.queryByLabelText('behind upstream')).toBeNull();
-  });
-
   it('lists "View release manifest" in the overflow menu when releaseName exists', async () => {
     const user = userEvent.setup();
     renderNode({

plugins/openchoreo/src/components/Environments/components/MiniEnvironmentNode.tsx

@@ -24,7 +24,6 @@ import { formatRelativeTime } from '@openchoreo/backstage-plugin-react';
 import { useMiniEnvironmentNodeStyles } from '../styles';
 import { useEnvironmentStatusVariant } from '../hooks/useEnvironmentStatusVariant';
 import { usePromotionAction } from '../hooks/usePromotionAction';
-import { NO_DRIFT, type ReleaseDriftInfo } from '../hooks/computeReleaseDrift';
 import { deriveVersionLabel } from '../utils/deriveVersionLabel';
 import type { ActionTrackers, Environment } from '../types';
 import { ReleaseManifestDialog } from './ReleaseManifestDialog';
@@ -35,8 +34,6 @@ export interface MiniEnvironmentNodeProps {
   isRefreshing: boolean;
   isAlreadyPromoted: (targetEnvName: string) => boolean;
   actionTrackers: ActionTrackers;
-  /** Drift relative to direct upstreams; defaults to no drift. */
-  driftInfo?: ReleaseDriftInfo;
   /**
    * Active-incident count from useIncidentsSummary. Undefined when
    * observability isn't configured; rendered as a red chip when > 0.
@@ -62,7 +59,6 @@ export const MiniEnvironmentNode = ({
   isRefreshing,
   isAlreadyPromoted,
   actionTrackers,
-  driftInfo = NO_DRIFT,
   activeIncidentCount,
   onSelect,
   onRefresh,
@@ -274,33 +270,6 @@ export const MiniEnvironmentNode = ({
                 <span className={classes.versionChip}>{versionLabel}</span>
               </Tooltip>
             )}
-            {driftInfo.isBehind && (
-              <Tooltip
-                title={
-                  <>
-                    <div>
-                      Behind{' '}
-                      {driftInfo.aheadUpstreams.map(u => u.envName).join(', ')}
-                    </div>
-                    {driftInfo.aheadUpstreams[0]?.releaseName && (
-                      <div>
-                        {driftInfo.aheadUpstreams[0].envName} on{' '}
-                        {driftInfo.aheadUpstreams[0].releaseName}
-                      </div>
-                    )}
-                  </>
-                }
-                PopperProps={{ disablePortal: true }}
-              >
-                <span
-                  className={classes.driftBadge}
-                  aria-label="behind upstream"
-                >
-                  <ReportProblemOutlinedIcon fontSize="inherit" />
-                  behind
-                </span>
-              </Tooltip>
-            )}
           </Box>
 
           {/* Row 2 — supplementary: incidents + freshness. Skipped

plugins/openchoreo/src/components/Environments/components/SetupDetailPane.tsx

@@ -61,7 +61,7 @@ const LatestReleaseRow = ({
 
   return (
     <Box display="flex" flexDirection="column" gridGap={4}>
-      <Typography variant="subtitle2">Latest release</Typography>
+      <Typography variant="subtitle2">Latest Release</Typography>
       {releasesLoading && !latest && (
         <Typography variant="body2" color="textSecondary">
           Loading…
@@ -268,7 +268,7 @@ export const SetupDetailPane = ({
               /* Auto-deploy ON: configure component + read-only latest release */
               <>
                 <Box display="flex" flexDirection="column" gridGap={8}>
-                  <Typography variant="subtitle2">Component</Typography>
+                  <Typography variant="subtitle2">Release</Typography>
                   <Typography variant="caption" color="textSecondary">
                     Auto-deploy is on. Saving any configuration change creates a
                     release automatically and rolls it out to{' '}

plugins/openchoreo/src/components/Environments/styles.ts

@@ -260,18 +260,6 @@ export const useMiniEnvironmentNodeStyles = makeStyles(theme => ({
     padding: theme.spacing(0.25, 0.75),
     whiteSpace: 'nowrap',
   },
-  driftBadge: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 2,
-    fontSize: '0.7rem',
-    fontWeight: 500,
-    color: theme.palette.warning.dark,
-    backgroundColor: alpha(theme.palette.warning.main, 0.16),
-    borderRadius: 4,
-    padding: theme.spacing(0.1, 0.5),
-    whiteSpace: 'nowrap',
-  },
   metaChip: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -530,7 +518,7 @@ export const useEnvironmentDetailPanelStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(0.5),
-    color: theme.palette.warning.dark,
+    color: theme.palette.info.dark,
     flex: 1,
     minWidth: 0,
   },