From ab66b5c0655341a54906157af27f5eb82cb62d99 Mon Sep 17 00:00:00 2001
From: Jayashree-panda <jayashreepanda12345@gmail.com>
Date: Thu, 29 Apr 2021 10:11:47 +0530
Subject: [PATCH] enable tech preview badge for arbiter

Signed-off-by: Jayashree-panda <jayashreepanda12345@gmail.com>
---
 .../locales/en/ceph-storage-plugin.json       |  2 +-
 .../install-wizard/_capacity-and-nodes.scss   |  9 ++++++++-
 .../install-wizard/capacity-and-nodes.tsx     | 20 ++++++++++++++++---
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
index 2111ce98f2f..095215367c0 100644
--- a/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
+++ b/frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json
@@ -435,6 +435,7 @@
   "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",
@@ -442,7 +443,6 @@
   "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",
diff --git a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/_capacity-and-nodes.scss b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/_capacity-and-nodes.scss
index adfeb91d1ce..98abe21d6ac 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/_capacity-and-nodes.scss
+++ b/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;
+    }
+}
diff --git a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/capacity-and-nodes.tsx b/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/capacity-and-nodes.tsx
index db2ba904a9d..e2e69d5ed26 100644
--- a/frontend/packages/ceph-storage-plugin/src/components/ocs-install/install-wizard/capacity-and-nodes.tsx
+++ b/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.',
         )}