enable tech preview badge for arbiter

Signed-off-by: Jayashree-panda <[email protected]>

frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json

@@ -435,14 +435,14 @@
  "Create Button": "Create Button",
  "Create Storage Cluster": "Create Storage Cluster",
  "OCS runs as a cloud-native service for optimal integration with applications in need of storage and handles the scenes such as provisioning and management.": "OCS runs as a cloud-native service for optimal integration with applications in need of storage and handles the scenes such as provisioning and management.",
+ "Enable arbiter": "Enable arbiter",
  "If not labeled, the selected nodes are labeled <1>{{label}}</1> to make them target hosts for OCS components.": "If not labeled, the selected nodes are labeled <1>{{label}}</1> to make them target hosts for OCS components.",
  "selected ({{cpu}} CPU and {{memory}} on ": "selected ({{cpu}} CPU and {{memory}} on ",
  "Enable taint nodes": "Enable taint nodes",
  "Selected nodes will be dedicated to OCS use only": "Selected nodes will be dedicated to OCS use only",
  "Stretch Cluster": "Stretch Cluster",
  "OpenShift Container Storage deployment in two data centers, with an arbiter node to settle quorum decisions.": "OpenShift Container Storage deployment in two data centers, with an arbiter node to settle quorum decisions.",
  "Enable Arbiter": "Enable Arbiter",
- "Enable arbiter": "Enable arbiter",
  "To support high availability when two data centers can be used, enable arbiter to get the valid quorum between two data centers.": "To support high availability when two data centers can be used, enable arbiter to get the valid quorum between two data centers.",
  "Arbiter minimum requirements": "Arbiter minimum requirements",
  "Select an arbiter zone": "Select an arbiter zone",

frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/_capacity-and-nodes.scss

@@ -1,4 +1,11 @@
-.ocs-install__enable-taint {
+.ocs-enable-taint {
  padding-top: var(--pf-global--spacer--md);
  padding-bottom: var(--pf-global--spacer--md);
 }
+
+.ocs-enable-arbiter-label {
+ display: inline-block;
+ &__title--padding {
+ padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0;
+ }
+}

frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/capacity-and-nodes.tsx

@@ -16,7 +16,7 @@ import {
 import { humanizeBinaryBytes, Dropdown, FieldLevelHelp } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { StorageClassResourceKind, NodeKind, K8sResourceKind } from '@console/internal/module/k8s';
-import { useDeepCompareMemoize } from '@console/shared';
+import { TechPreviewBadge, useDeepCompareMemoize } from '@console/shared';
 import { State, Action } from '../attached-devices-mode/reducer';
 import { scResource } from '../../../resources';
 import { arbiterText, MODES } from '../../../constants';
@@ -25,6 +25,20 @@ import { AdvancedSubscription } from '../subscription-icon';
 import { ActionType, InternalClusterAction, InternalClusterState } from '../internal-mode/reducer';
 import './_capacity-and-nodes.scss';
 
+const EnableArbiterLabel: React.FC = () => {
+ const { t } = useTranslation();
+
+ return (
+ <div className="ocs-enable-arbiter-label">
+ <span className="ocs-enable-arbiter-label__title--padding">
+ {t('ceph-storage-plugin~Enable arbiter')}
+ </span>
+ <TechPreviewBadge />
+ <AdvancedSubscription />
+ </div>
+ );
+};
+
 export const SelectNodesText: React.FC<SelectNodesTextProps> = React.memo(({ text }) => {
  const { t } = useTranslation();
  const label = 'cluster.ocs.openshift.io/openshift-storage=""';
@@ -77,7 +91,7 @@ export const EnableTaintNodes: React.FC<EnableTaintNodesProps> = ({ state, dispa
  <Checkbox
  label={t('ceph-storage-plugin~Enable taint nodes')}
  description={t('ceph-storage-plugin~Selected nodes will be dedicated to OCS use only')}
- className="ocs-install__enable-taint"
+ className="ocs-enable-taint"
  id="taint-nodes"
  isChecked={state.enableTaint}
  onChange={() =>
@@ -151,7 +165,7 @@ export const StretchClusterFormGroup: React.FC<StretchClusterFormGroupProps> = (
  aria-label={t('ceph-storage-plugin~Enable Arbiter')}
  id="arbiter-cluster"
  isChecked={stretchClusterChecked}
- label={<AdvancedSubscription prefix={t('ceph-storage-plugin~Enable arbiter')} />}
+ label={<EnableArbiterLabel />}
  description={t(
  'ceph-storage-plugin~To support high availability when two data centers can be used, enable arbiter to get the valid quorum between two data centers.',
  )}