OCPBUGS-86755: use a clip path instead of overlapping triangles

[logonoff]

Analysis / Root cause:

Can't rely on overlapping elements anymore because the background colour is transparent

Solution description:

Use a clip path

Screenshots / screen recording:

before	after

bonus fix

before	after

Test setup:

Claude wrote this diff to apply mock data:

diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index 6e412b019e..0775ef133d 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import type { FC, ReactNode } from 'react';
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
 import * as _ from 'lodash';
 import { css } from '@patternfly/react-styles';
 import * as semver from 'semver';
@@ -124,6 +124,255 @@ import { UpdateStatus } from './cluster-status';
 import { ErrorModal } from '../modals/error-modal';
 import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';
 
+// DEV ONLY: inline mock data for testing cluster version states
+/* eslint-disable @typescript-eslint/naming-convention */
+const _baseCv = {
+  apiVersion: 'config.openshift.io/v1',
+  kind: 'ClusterVersion',
+  metadata: {
+    creationTimestamp: '2024-01-04T05:14:57Z',
+    generation: 4,
+    name: 'version',
+    resourceVersion: '370626',
+    uid: '40b1ad1b-13d2-4c7c-932a-ce78c4447ed8',
+  },
+  spec: {
+    channel: 'stable-4.16',
+    clusterID: '4976480a-15e1-4c94-bafe-aafb96bc0248',
+    upstream: 'https://openshift-release.apps.ci.l2s4.p1.openshiftapps.com/graph',
+  },
+  status: {
+    availableUpdates: [],
+    conditions: [
+      { lastTransitionTime: '2024-01-04T05:37:10Z', status: 'True', type: 'RetrievedUpdates' },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message: 'Capabilities match configured spec',
+        reason: 'AsExpected',
+        status: 'False',
+        type: 'ImplicitlyEnabledCapabilities',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message:
+          'Payload loaded version="4.16.0" image="registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721" architecture="amd64"',
+        reason: 'PayloadLoaded',
+        status: 'True',
+        type: 'ReleaseAccepted',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Done applying 4.16.0',
+        status: 'True',
+        type: 'Available',
+      },
+      { lastTransitionTime: '2024-01-04T05:35:14Z', status: 'False', type: 'Failing' },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Cluster version is 4.16.0',
+        status: 'False',
+        type: 'Progressing',
+      },
+    ],
+    desired: {
+      image:
+        'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+      version: '4.16.0',
+    },
+    history: [
+      {
+        completionTime: '2024-01-04T05:35:14Z',
+        image:
+          'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+        startedTime: '2024-01-04T05:15:00Z',
+        state: 'Completed',
+        verified: false,
+        version: '4.16.0',
+      },
+    ],
+    observedGeneration: 3,
+    versionHash: 'rqBs61ZyVwQ=',
+  },
+};
+
+const _clone = (o: any) => JSON.parse(JSON.stringify(o));
+const _upsert = (conditions: any[], c: any) => [
+  ...conditions.filter((x: any) => x.type !== c.type),
+  c,
+];
+
+const _availableUpdates = [
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6d',
+    version: '4.16.1',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6e',
+    version: '4.16.2',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad3',
+    version: '4.17.0',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad4',
+    version: '4.17.1',
+  },
+];
+
+const _conditionalUpdates = [
+  {
+    release: {
+      version: '4.16.3',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.16'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+      },
+    ],
+  },
+  {
+    release: {
+      version: '4.16.4',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.14'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AsExpected',
+        message:
+          'The update is recommended, because none of the conditional update risks apply to this cluster.',
+      },
+    ],
+  },
+];
+
+const _mockWithoutChannel = (() => {
+  const cv = _clone(_baseCv);
+  cv.spec.channel = '';
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-10T18:10:53Z',
+    message: 'The update channel has not been configured.',
+    reason: 'NoChannel',
+    status: 'False',
+    type: 'RetrievedUpdates',
+  });
+  return cv;
+})();
+
+const _mockWithDesiredChannels = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.desired.channels = [
+    'stable-4.16',
+    'candidate-4.16',
+    'fast-4.16',
+    'stable-4.17',
+    'candidate-4.17',
+    'fast-4.17',
+  ];
+  return cv;
+})();
+
+const _mockProgressing = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-11T13:45:34Z',
+    message: 'Cluster version is 4.16.0',
+    status: 'True',
+    type: 'Progressing',
+  });
+  const desired = {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+    version: '4.16.2',
+  };
+  cv.spec.desired = desired;
+  cv.status.desired = desired;
+  return cv;
+})();
+
+const _mockAvailableUpdates = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.availableUpdates = _availableUpdates;
+  return cv;
+})();
+
+const _mockAvailableAndConditional = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockConditionalOnly = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockUpgradeableFalse = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditions.push({
+    lastTransitionTime: '2024-01-04T05:45:29Z',
+    message:
+      'Cluster operator operator-lifecycle-manager should not be upgraded between minor versions: ClusterServiceVersions blocking cluster upgrade: openshift-operators/openshift-pipelines-operator-rh.v1.12.2 is incompatible with OpenShift minor versions greater than 4.14',
+    reason: 'IncompatibleOperatorsInstalled',
+    status: 'False',
+    type: 'Upgradeable',
+  });
+  return cv;
+})();
+/* eslint-enable @typescript-eslint/naming-convention */
+
 export const clusterAutoscalerReference = referenceForModel(ClusterAutoscalerModel);
 
 const getMCPByName = (
@@ -1180,10 +1429,22 @@ export const ClusterOperatorTabPage: FC<ClusterOperatorTabPageProps> = ({ obj: c
   <ClusterOperatorPage cv={cv} autoFocus={false} showTitle={false} />
 );
 
+const mockClusterVersions: Record<string, any> = {
+  '': null,
+  'Without Channel': _mockWithoutChannel,
+  'With Desired Channels': _mockWithDesiredChannels,
+  'Progressing': _mockProgressing,
+  'Available Updates': _mockAvailableUpdates,
+  'Available + Conditional Updates': _mockAvailableAndConditional,
+  'Conditional Updates Only': _mockConditionalOnly,
+  'Upgradeable=False': _mockUpgradeableFalse,
+};
+
 export const ClusterSettingsPage: FC = () => {
   const { t } = useTranslation();
   const hasClusterAutoscaler = useFlag(FLAGS.CLUSTER_AUTOSCALER);
   const title = t('public~Cluster Settings');
+  const [selectedMock, setSelectedMock] = useState('');
 
   const [objData, objLoaded, objLoadError] = useK8sWatchResource<ClusterVersionKind>({
     kind: clusterVersionReference,
@@ -1230,10 +1491,14 @@ export const ClusterSettingsPage: FC = () => {
   const loaded = hasClusterAutoscaler ? objLoaded && autoscalersLoaded : objLoaded;
   const loadError = objLoadError || autoscalersLoadError;
 
+  const effectiveObjData = selectedMock
+    ? (mockClusterVersions[selectedMock] as ClusterVersionKind)
+    : objData;
+
   const horizontalNavProps = {
     pages,
     resourceKeys,
-    obj: { data: objData, loaded: objLoaded },
+    obj: { data: effectiveObjData, loaded: selectedMock ? true : objLoaded },
     ...(hasClusterAutoscaler && {
       autoscalers: { data: autoscalersData, loaded: autoscalersLoaded },
     }),
@@ -1253,6 +1518,22 @@ export const ClusterSettingsPage: FC = () => {
           </div>
         }
       />
+      <div style={{ padding: '16px', background: '#fff3cd', borderBottom: '1px solid #ffc107' }}>
+        <label htmlFor="mock-cv-select" style={{ fontWeight: 'bold', marginRight: '8px' }}>
+          DEV: Mock ClusterVersion
+        </label>
+        <select
+          id="mock-cv-select"
+          value={selectedMock}
+          onChange={(e) => setSelectedMock(e.target.value)}
+        >
+          {Object.keys(mockClusterVersions).map((key) => (
+            <option key={key} value={key}>
+              {key || '(Live data)'}
+            </option>
+          ))}
+        </select>
+      </div>
       <HorizontalNav {...horizontalNavProps} />
     </PageTitleContext.Provider>
   );

Test cases:

Go through the cases and make sure they look good in all 6 theme combinations

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

Reviewers and assignees:

Summary by CodeRabbit

• Style
  • Updated channel background for improved visual consistency with floating surface styles.
  • Redesigned channel switch for simpler visuals and more accurate positioning (cleaner shape clipping and sizing).
  • Adjusted channel-start connector rendering to remove unintended generated content.
  • Updated cluster settings section border color for better visual alignment with global borders.

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-86755, which is invalid:

• expected the bug to target the "5.0.0" version, but no target version was set

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Analysis / Root cause:

Can't rely on overlapping elements anymore because the background colour is transparent

Solution description:

Use a clip path

Screenshots / screen recording:

before	after

bonus fix

before	after

Test setup:

Claude wrote this diff to apply mock data:

diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index 6e412b019e..0775ef133d 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import type { FC, ReactNode } from 'react';
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
import * as _ from 'lodash';
import { css } from '@patternfly/react-styles';
import * as semver from 'semver';
@@ -124,6 +124,255 @@ import { UpdateStatus } from './cluster-status';
import { ErrorModal } from '../modals/error-modal';
import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';

+// DEV ONLY: inline mock data for testing cluster version states
+/* eslint-disable @typescript-eslint/naming-convention */
+const _baseCv = {
+  apiVersion: 'config.openshift.io/v1',
+  kind: 'ClusterVersion',
+  metadata: {
+    creationTimestamp: '2024-01-04T05:14:57Z',
+    generation: 4,
+    name: 'version',
+    resourceVersion: '370626',
+    uid: '40b1ad1b-13d2-4c7c-932a-ce78c4447ed8',
+  },
+  spec: {
+    channel: 'stable-4.16',
+    clusterID: '4976480a-15e1-4c94-bafe-aafb96bc0248',
+    upstream: 'https://openshift-release.apps.ci.l2s4.p1.openshiftapps.com/graph',
+  },
+  status: {
+    availableUpdates: [],
+    conditions: [
+      { lastTransitionTime: '2024-01-04T05:37:10Z', status: 'True', type: 'RetrievedUpdates' },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message: 'Capabilities match configured spec',
+        reason: 'AsExpected',
+        status: 'False',
+        type: 'ImplicitlyEnabledCapabilities',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message:
+          'Payload loaded version="4.16.0" image="registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721" architecture="amd64"',
+        reason: 'PayloadLoaded',
+        status: 'True',
+        type: 'ReleaseAccepted',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Done applying 4.16.0',
+        status: 'True',
+        type: 'Available',
+      },
+      { lastTransitionTime: '2024-01-04T05:35:14Z', status: 'False', type: 'Failing' },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Cluster version is 4.16.0',
+        status: 'False',
+        type: 'Progressing',
+      },
+    ],
+    desired: {
+      image:
+        'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+      version: '4.16.0',
+    },
+    history: [
+      {
+        completionTime: '2024-01-04T05:35:14Z',
+        image:
+          'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+        startedTime: '2024-01-04T05:15:00Z',
+        state: 'Completed',
+        verified: false,
+        version: '4.16.0',
+      },
+    ],
+    observedGeneration: 3,
+    versionHash: 'rqBs61ZyVwQ=',
+  },
+};
+
+const _clone = (o: any) => JSON.parse(JSON.stringify(o));
+const _upsert = (conditions: any[], c: any) => [
+  ...conditions.filter((x: any) => x.type !== c.type),
+  c,
+];
+
+const _availableUpdates = [
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6d',
+    version: '4.16.1',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6e',
+    version: '4.16.2',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad3',
+    version: '4.17.0',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad4',
+    version: '4.17.1',
+  },
+];
+
+const _conditionalUpdates = [
+  {
+    release: {
+      version: '4.16.3',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.16'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+      },
+    ],
+  },
+  {
+    release: {
+      version: '4.16.4',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.14'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AsExpected',
+        message:
+          'The update is recommended, because none of the conditional update risks apply to this cluster.',
+      },
+    ],
+  },
+];
+
+const _mockWithoutChannel = (() => {
+  const cv = _clone(_baseCv);
+  cv.spec.channel = '';
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-10T18:10:53Z',
+    message: 'The update channel has not been configured.',
+    reason: 'NoChannel',
+    status: 'False',
+    type: 'RetrievedUpdates',
+  });
+  return cv;
+})();
+
+const _mockWithDesiredChannels = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.desired.channels = [
+    'stable-4.16',
+    'candidate-4.16',
+    'fast-4.16',
+    'stable-4.17',
+    'candidate-4.17',
+    'fast-4.17',
+  ];
+  return cv;
+})();
+
+const _mockProgressing = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-11T13:45:34Z',
+    message: 'Cluster version is 4.16.0',
+    status: 'True',
+    type: 'Progressing',
+  });
+  const desired = {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+    version: '4.16.2',
+  };
+  cv.spec.desired = desired;
+  cv.status.desired = desired;
+  return cv;
+})();
+
+const _mockAvailableUpdates = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.availableUpdates = _availableUpdates;
+  return cv;
+})();
+
+const _mockAvailableAndConditional = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockConditionalOnly = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockUpgradeableFalse = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditions.push({
+    lastTransitionTime: '2024-01-04T05:45:29Z',
+    message:
+      'Cluster operator operator-lifecycle-manager should not be upgraded between minor versions: ClusterServiceVersions blocking cluster upgrade: openshift-operators/openshift-pipelines-operator-rh.v1.12.2 is incompatible with OpenShift minor versions greater than 4.14',
+    reason: 'IncompatibleOperatorsInstalled',
+    status: 'False',
+    type: 'Upgradeable',
+  });
+  return cv;
+})();
+/* eslint-enable @typescript-eslint/naming-convention */
+
export const clusterAutoscalerReference = referenceForModel(ClusterAutoscalerModel);

const getMCPByName = (
@@ -1180,10 +1429,22 @@ export const ClusterOperatorTabPage: FC<ClusterOperatorTabPageProps> = ({ obj: c
  <ClusterOperatorPage cv={cv} autoFocus={false} showTitle={false} />
);

+const mockClusterVersions: Record<string, any> = {
+  '': null,
+  'Without Channel': _mockWithoutChannel,
+  'With Desired Channels': _mockWithDesiredChannels,
+  'Progressing': _mockProgressing,
+  'Available Updates': _mockAvailableUpdates,
+  'Available + Conditional Updates': _mockAvailableAndConditional,
+  'Conditional Updates Only': _mockConditionalOnly,
+  'Upgradeable=False': _mockUpgradeableFalse,
+};
+
export const ClusterSettingsPage: FC = () => {
  const { t } = useTranslation();
  const hasClusterAutoscaler = useFlag(FLAGS.CLUSTER_AUTOSCALER);
  const title = t('public~Cluster Settings');
+  const [selectedMock, setSelectedMock] = useState('');

  const [objData, objLoaded, objLoadError] = useK8sWatchResource<ClusterVersionKind>({
    kind: clusterVersionReference,
@@ -1230,10 +1491,14 @@ export const ClusterSettingsPage: FC = () => {
  const loaded = hasClusterAutoscaler ? objLoaded && autoscalersLoaded : objLoaded;
  const loadError = objLoadError || autoscalersLoadError;

+  const effectiveObjData = selectedMock
+    ? (mockClusterVersions[selectedMock] as ClusterVersionKind)
+    : objData;
+
  const horizontalNavProps = {
    pages,
    resourceKeys,
-    obj: { data: objData, loaded: objLoaded },
+    obj: { data: effectiveObjData, loaded: selectedMock ? true : objLoaded },
    ...(hasClusterAutoscaler && {
      autoscalers: { data: autoscalersData, loaded: autoscalersLoaded },
    }),
@@ -1253,6 +1518,22 @@ export const ClusterSettingsPage: FC = () => {
          </div>
        }
      />
+      <div style={{ padding: '16px', background: '#fff3cd', borderBottom: '1px solid #ffc107' }}>
+        <label htmlFor="mock-cv-select" style={{ fontWeight: 'bold', marginRight: '8px' }}>
+          DEV: Mock ClusterVersion
+        </label>
+        <select
+          id="mock-cv-select"
+          value={selectedMock}
+          onChange={(e) => setSelectedMock(e.target.value)}
+        >
+          {Object.keys(mockClusterVersions).map((key) => (
+            <option key={key} value={key}>
+              {key || '(Live data)'}
+            </option>
+          ))}
+        </select>
+      </div>
      <HorizontalNav {...horizontalNavProps} />
    </PageTitleContext.Provider>
  );

Test cases:

Go through the cases and make sure they look good in all 6 theme combinations

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

Reviewers and assignees:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[logonoff]

/jira refresh

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-86755, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

/jira refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 8d4cee14-bf34-42a4-8d14-574af483581e

📥 Commits

Reviewing files that changed from the base of the PR and between cc4fe85 and c08168c.

📒 Files selected for processing (1)

• frontend/public/components/cluster-settings/_cluster-settings.scss

---

Walkthrough

Cluster settings SCSS now uses the floating-default background token for channel backgrounds, uses the global default border token for the settings section, and refactors the channel switch visuals from gradient overlays to a clip-path-based element with adjusted positioning.

Changes

Channel Component Styling and Token

Layer / File(s)	Summary
Design token update for channel background & section border frontend/public/components/cluster-settings/_cluster-settings.scss	$co-channel-background-color now references the floating default background token; .co-cluster-settings border uses the global default border token.
Channel switch styling refactor frontend/public/components/cluster-settings/_cluster-settings.scss	.co-channel-start::before content is unset; .co-channel-switch replaced gradient overlays with a clip-path shape, direct background-color, and updated absolute positioning/width (right: -4px, width: 50%).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

tide/merge-method-squash

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
No-Sensitive-Data-In-Logs	❌ Error	The PR adds logging statements that may expose sensitive data: console.error logging an OAuth configuration restoration error in oauth.spec.ts could expose API credentials or configuration details.	Remove or redact the console.error statements that log OAuth API errors and error objects. For test files, consider logging only error codes/types without full error objects.

✅ Passed checks (14 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'use a clip path instead of overlapping triangles' accurately summarizes the main technical change in this SCSS refactor from gradient overlays to clip-path approach.
Description check	✅ Passed	The description provides analysis, solution, comprehensive before/after screenshots, test setup with mock data, and test cases, though browser conformance and reviewer assignments are partially incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	Check not applicable: PR modifies SCSS styling, not Ginkgo tests. Repository does not use Ginkgo testing framework.
Test Structure And Quality	✅ Passed	Check not applicable: PR contains only frontend SCSS styling changes, not Go/Ginkgo test code that the check instructions require.
Microshift Test Compatibility	✅ Passed	PR contains no new Ginkgo e2e tests. The changes are frontend SCSS styling modifications only, making this check not applicable.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	PR adds only UI styling and mock data changes, no new Ginkgo e2e tests (It/Describe/Context/When) are added, so SNO compatibility check is not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only _cluster-settings.scss, a frontend styling file. No deployment manifests, operator code, controllers, or scheduling constraints are introduced.
Ote Binary Stdout Contract	✅ Passed	PR is a frontend UI styling change (SCSS and React components). The OTE Binary Stdout Contract check targets Go test code and binaries; this PR contains no Go test files or OTE binaries.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	No new Ginkgo e2e tests added. PR changes only SCSS styling in frontend/public/components/cluster-settings/. IPv6/disconnected network check not applicable.
No-Weak-Crypto	✅ Passed	PR modifies only SCSS styling files. No cryptographic code, weak algorithms, custom crypto, or token comparisons found. Check not applicable.
Container-Privileges	✅ Passed	PR modifies only frontend SCSS and TypeScript UI code; no Kubernetes manifests or container privilege configurations present.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-86755, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (5.0.0) matches configured target version for branch (5.0.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

Analysis / Root cause:

Can't rely on overlapping elements anymore because the background colour is transparent

Solution description:

Use a clip path

Screenshots / screen recording:

before	after

bonus fix

before	after

Test setup:

Claude wrote this diff to apply mock data:

diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index 6e412b019e..0775ef133d 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-use-before-define */
import type { FC, ReactNode } from 'react';
-import { useEffect, useRef, useMemo } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
import * as _ from 'lodash';
import { css } from '@patternfly/react-styles';
import * as semver from 'semver';
@@ -124,6 +124,255 @@ import { UpdateStatus } from './cluster-status';
import { ErrorModal } from '../modals/error-modal';
import { useOverlay } from '@console/dynamic-plugin-sdk/src/app/modal-support/useOverlay';

+// DEV ONLY: inline mock data for testing cluster version states
+/* eslint-disable @typescript-eslint/naming-convention */
+const _baseCv = {
+  apiVersion: 'config.openshift.io/v1',
+  kind: 'ClusterVersion',
+  metadata: {
+    creationTimestamp: '2024-01-04T05:14:57Z',
+    generation: 4,
+    name: 'version',
+    resourceVersion: '370626',
+    uid: '40b1ad1b-13d2-4c7c-932a-ce78c4447ed8',
+  },
+  spec: {
+    channel: 'stable-4.16',
+    clusterID: '4976480a-15e1-4c94-bafe-aafb96bc0248',
+    upstream: 'https://openshift-release.apps.ci.l2s4.p1.openshiftapps.com/graph',
+  },
+  status: {
+    availableUpdates: [],
+    conditions: [
+      { lastTransitionTime: '2024-01-04T05:37:10Z', status: 'True', type: 'RetrievedUpdates' },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message: 'Capabilities match configured spec',
+        reason: 'AsExpected',
+        status: 'False',
+        type: 'ImplicitlyEnabledCapabilities',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:15:00Z',
+        message:
+          'Payload loaded version="4.16.0" image="registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721" architecture="amd64"',
+        reason: 'PayloadLoaded',
+        status: 'True',
+        type: 'ReleaseAccepted',
+      },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Done applying 4.16.0',
+        status: 'True',
+        type: 'Available',
+      },
+      { lastTransitionTime: '2024-01-04T05:35:14Z', status: 'False', type: 'Failing' },
+      {
+        lastTransitionTime: '2024-01-04T05:35:14Z',
+        message: 'Cluster version is 4.16.0',
+        status: 'False',
+        type: 'Progressing',
+      },
+    ],
+    desired: {
+      image:
+        'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+      version: '4.16.0',
+    },
+    history: [
+      {
+        completionTime: '2024-01-04T05:35:14Z',
+        image:
+          'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+        startedTime: '2024-01-04T05:15:00Z',
+        state: 'Completed',
+        verified: false,
+        version: '4.16.0',
+      },
+    ],
+    observedGeneration: 3,
+    versionHash: 'rqBs61ZyVwQ=',
+  },
+};
+
+const _clone = (o: any) => JSON.parse(JSON.stringify(o));
+const _upsert = (conditions: any[], c: any) => [
+  ...conditions.filter((x: any) => x.type !== c.type),
+  c,
+];
+
+const _availableUpdates = [
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6d',
+    version: '4.16.1',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:f31d5b0e23c8f978b57f5ef74c8811e7f87103187aa1895880f67eac4eb76f6e',
+    version: '4.16.2',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad3',
+    version: '4.17.0',
+  },
+  {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:06cd433ae0036e3b79e2ecd08512abca540fbefe9805b225a6a9c33ca9456ad4',
+    version: '4.17.1',
+  },
+];
+
+const _conditionalUpdates = [
+  {
+    release: {
+      version: '4.16.3',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.16'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+      },
+    ],
+  },
+  {
+    release: {
+      version: '4.16.4',
+      image:
+        'quay.io/openshift-release-dev/ocp-release@sha256:7082f01282a07f4033308ccadb1ca0c6acacadd83812d7cc1135a022f5382391',
+      channels: ['candidate-4.14'],
+    },
+    risks: [
+      {
+        url: 'https://bugzilla.redhat.com/show_bug.cgi?id=2047190',
+        name: 'AlibabaStorageDriverDemo',
+        message:
+          'The Alibaba storage driver was updated from a patched 1.1.4 to a patched 1.1.6 in 4.10.0-rc.0.',
+        matchingRules: [
+          {
+            type: 'PromQL',
+            promql: {
+              promql:
+                'cluster_infrastructure_provider{type="AlibabaCloud"} or 0 * cluster_infrastructure_provider',
+            },
+          },
+        ],
+      },
+    ],
+    conditions: [
+      {
+        type: 'Recommended',
+        status: 'False',
+        lastTransitionTime: '2024-02-03T22:53:33Z',
+        reason: 'AsExpected',
+        message:
+          'The update is recommended, because none of the conditional update risks apply to this cluster.',
+      },
+    ],
+  },
+];
+
+const _mockWithoutChannel = (() => {
+  const cv = _clone(_baseCv);
+  cv.spec.channel = '';
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-10T18:10:53Z',
+    message: 'The update channel has not been configured.',
+    reason: 'NoChannel',
+    status: 'False',
+    type: 'RetrievedUpdates',
+  });
+  return cv;
+})();
+
+const _mockWithDesiredChannels = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.desired.channels = [
+    'stable-4.16',
+    'candidate-4.16',
+    'fast-4.16',
+    'stable-4.17',
+    'candidate-4.17',
+    'fast-4.17',
+  ];
+  return cv;
+})();
+
+const _mockProgressing = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditions = _upsert(cv.status.conditions, {
+    lastTransitionTime: '2024-01-11T13:45:34Z',
+    message: 'Cluster version is 4.16.0',
+    status: 'True',
+    type: 'Progressing',
+  });
+  const desired = {
+    image:
+      'registry.ci.openshift.org/ocp/release@sha256:ff486203f5b065836105fcd56f29467229bfc6258e5d8ba7f479ac575d81c721',
+    version: '4.16.2',
+  };
+  cv.spec.desired = desired;
+  cv.status.desired = desired;
+  return cv;
+})();
+
+const _mockAvailableUpdates = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.availableUpdates = _availableUpdates;
+  return cv;
+})();
+
+const _mockAvailableAndConditional = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockConditionalOnly = (() => {
+  const cv = _clone(_baseCv);
+  cv.status.conditionalUpdates = _conditionalUpdates;
+  return cv;
+})();
+
+const _mockUpgradeableFalse = (() => {
+  const cv = _clone(_mockAvailableUpdates);
+  cv.status.conditions.push({
+    lastTransitionTime: '2024-01-04T05:45:29Z',
+    message:
+      'Cluster operator operator-lifecycle-manager should not be upgraded between minor versions: ClusterServiceVersions blocking cluster upgrade: openshift-operators/openshift-pipelines-operator-rh.v1.12.2 is incompatible with OpenShift minor versions greater than 4.14',
+    reason: 'IncompatibleOperatorsInstalled',
+    status: 'False',
+    type: 'Upgradeable',
+  });
+  return cv;
+})();
+/* eslint-enable @typescript-eslint/naming-convention */
+
export const clusterAutoscalerReference = referenceForModel(ClusterAutoscalerModel);

const getMCPByName = (
@@ -1180,10 +1429,22 @@ export const ClusterOperatorTabPage: FC<ClusterOperatorTabPageProps> = ({ obj: c
  <ClusterOperatorPage cv={cv} autoFocus={false} showTitle={false} />
);

+const mockClusterVersions: Record<string, any> = {
+  '': null,
+  'Without Channel': _mockWithoutChannel,
+  'With Desired Channels': _mockWithDesiredChannels,
+  'Progressing': _mockProgressing,
+  'Available Updates': _mockAvailableUpdates,
+  'Available + Conditional Updates': _mockAvailableAndConditional,
+  'Conditional Updates Only': _mockConditionalOnly,
+  'Upgradeable=False': _mockUpgradeableFalse,
+};
+
export const ClusterSettingsPage: FC = () => {
  const { t } = useTranslation();
  const hasClusterAutoscaler = useFlag(FLAGS.CLUSTER_AUTOSCALER);
  const title = t('public~Cluster Settings');
+  const [selectedMock, setSelectedMock] = useState('');

  const [objData, objLoaded, objLoadError] = useK8sWatchResource<ClusterVersionKind>({
    kind: clusterVersionReference,
@@ -1230,10 +1491,14 @@ export const ClusterSettingsPage: FC = () => {
  const loaded = hasClusterAutoscaler ? objLoaded && autoscalersLoaded : objLoaded;
  const loadError = objLoadError || autoscalersLoadError;

+  const effectiveObjData = selectedMock
+    ? (mockClusterVersions[selectedMock] as ClusterVersionKind)
+    : objData;
+
  const horizontalNavProps = {
    pages,
    resourceKeys,
-    obj: { data: objData, loaded: objLoaded },
+    obj: { data: effectiveObjData, loaded: selectedMock ? true : objLoaded },
    ...(hasClusterAutoscaler && {
      autoscalers: { data: autoscalersData, loaded: autoscalersLoaded },
    }),
@@ -1253,6 +1518,22 @@ export const ClusterSettingsPage: FC = () => {
          </div>
        }
      />
+      <div style={{ padding: '16px', background: '#fff3cd', borderBottom: '1px solid #ffc107' }}>
+        <label htmlFor="mock-cv-select" style={{ fontWeight: 'bold', marginRight: '8px' }}>
+          DEV: Mock ClusterVersion
+        </label>
+        <select
+          id="mock-cv-select"
+          value={selectedMock}
+          onChange={(e) => setSelectedMock(e.target.value)}
+        >
+          {Object.keys(mockClusterVersions).map((key) => (
+            <option key={key} value={key}>
+              {key || '(Live data)'}
+            </option>
+          ))}
+        </select>
+      </div>
      <HorizontalNav {...horizontalNavProps} />
    </PageTitleContext.Provider>
  );

Test cases:

Go through the cases and make sure they look good in all 6 theme combinations

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:

Reviewers and assignees:

Summary by CodeRabbit

• Style
• Updated color scheme applied to channel UI components
• Enhanced channel switch element styling and visual rendering

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/public/components/cluster-settings/_cluster-settings.scss`:
- Around line 115-124: The .co-channel-switch rule uses clip-path without a
Safari fallback; add a vendor-prefixed fallback by adding -webkit-clip-path with
the same polygon value before the unprefixed clip-path in the .co-channel-switch
selector (or confirm older Safari versions aren’t supported and leave as-is),
then verify the visual appearance in Safari (especially <13) to ensure the
clipped shape renders correctly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 35a75ee3-e6b5-4b1f-bca4-8624609dae26

📥 Commits

Reviewing files that changed from the base of the PR and between e55c685 and d9d519c.

📒 Files selected for processing (1)

• frontend/public/components/cluster-settings/_cluster-settings.scss

[sg00dwin]

@logonoff Looks good!

One extra item that needs addressing, a second bonus fix... is the .co-cluster-settings box grey border color variable should be var(--pf-t--global--border--color--default) in order for it to be grey when viewing glass + light theme.

[openshift-ci]

@logonoff: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-playwright	c08168c	link	false	/test e2e-playwright
ci/prow/e2e-gcp-console	c08168c	link	true	/test e2e-gcp-console

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.