From 9f80e935650699544455a469e8f2e3871818adf4 Mon Sep 17 00:00:00 2001
From: Ajith KV <ajith.jaban@gmail.com>
Date: Mon, 9 Dec 2024 17:05:33 +0530
Subject: [PATCH] Add data-cy for workspace constants components (#11530)

---
 .../src/ManageOrgConstants/ConstantForm.jsx    | 18 +++++++++++-------
 .../src/ManageOrgConstants/ConstantTable.jsx   |  2 +-
 frontend/src/ManageOrgConstants/EmptyState.jsx |  2 +-
 .../ManageOrgConstants/ManageOrgConstants.jsx  |  2 +-
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ManageOrgConstants/ConstantForm.jsx b/frontend/src/ManageOrgConstants/ConstantForm.jsx
index 1eecc5fbbf..e04e4ed292 100644
--- a/frontend/src/ManageOrgConstants/ConstantForm.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantForm.jsx
@@ -193,17 +193,19 @@ const ConstantForm = ({
                   {error['name']}
                 </span>
                 {!error['name'] && (
-                  <small style={{ color: 'var(--text-placeholder)' }}>Name must be unique and max 50 characters</small>
+                  <small style={{ color: 'var(--text-placeholder)' }} data-cy="name-info">
+                    Name must be unique and max 50 characters
+                  </small>
                 )}
               </div>
             </div>
             <div className="form-group">
-              <label className="form-label" data-cy="name-label">
+              <label className="form-label" data-cy="type-label">
                 Type
               </label>
               <div className="radio-group" data-tooltip-id="type-tooltip">
                 <div className="radio-item">
-                  <label style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }}>
+                  <label style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }} data-cy="global-constants-label">
                     <input
                       type="radio"
                       name="type"
@@ -211,15 +213,16 @@ const ConstantForm = ({
                       checked={fields['type'] === Constants.Global}
                       onChange={handleFieldChange}
                       disabled={mode === 'edit'}
+                      data-cy="global-constants-input"
                     />
                     Global constants
                   </label>
-                  <small style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }}>
+                  <small style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }} data-cy="global-constants-info">
                     The values can be used anywhere in the product
                   </small>
                 </div>
                 <div className="radio-item">
-                  <label style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }}>
+                  <label style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }} data-cy="secrets-constants-label">
                     <input
                       type="radio"
                       name="type"
@@ -227,10 +230,11 @@ const ConstantForm = ({
                       checked={fields['type'] === Constants.Secret}
                       onChange={handleFieldChange}
                       disabled={mode === 'edit'}
+                      data-cy="secrets-constants-input"
                     />
                     Secrets
                   </label>
-                  <small style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }}>
+                  <small style={{ color: mode === 'edit' ? '#adb5bd' : 'inherit' }} data-cy="secrets-constants-info">
                     The values are hidden and can only be used in data sources and queries
                   </small>
                 </div>
@@ -246,7 +250,7 @@ const ConstantForm = ({
                 <label className="form-label" data-cy="value-label">
                   Value
                 </label>
-                <small className="text-green d-flex align-items-center" data-cy="encrypted-label">
+                <small className="text-green d-flex align-items-center" data-cy="form-encrypted-label">
                   <img
                     className="encrypted-icon me-1"
                     src="assets/images/icons/padlock.svg"
diff --git a/frontend/src/ManageOrgConstants/ConstantTable.jsx b/frontend/src/ManageOrgConstants/ConstantTable.jsx
index cf78cb598b..83b16bd5b2 100644
--- a/frontend/src/ManageOrgConstants/ConstantTable.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantTable.jsx
@@ -52,7 +52,7 @@ const ConstantTable = ({
                     {' '}
                     <small
                       className="text-green d-flex align-items-center justify-content-end"
-                      data-cy="encrypted-label"
+                      data-cy="table-encrypted-label"
                     >
                       <img
                         className="encrypted-icon me-1"
diff --git a/frontend/src/ManageOrgConstants/EmptyState.jsx b/frontend/src/ManageOrgConstants/EmptyState.jsx
index 140f1fba04..6692c06807 100644
--- a/frontend/src/ManageOrgConstants/EmptyState.jsx
+++ b/frontend/src/ManageOrgConstants/EmptyState.jsx
@@ -19,7 +19,7 @@ const EmptyState = ({ canCreateVariable, setIsManageVarDrawerOpen, isLoading, se
               </p>
               {canCreateVariable && searchTerm === '' && (
                 <ButtonSolid
-                  data-cy="add-new-constant-button"
+                  data-cy="table-add-new-constant-button"
                   vaiant="primary"
                   onClick={() => setIsManageVarDrawerOpen(true)}
                   className="add-new-constant-button"
diff --git a/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx b/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
index 29a5f229bf..81bf9d0bbf 100644
--- a/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
+++ b/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
@@ -454,7 +454,7 @@ const ManageOrgConstantsComponent = ({ darkMode }) => {
               <div className="workspace-setting-buttons-wrap">
                 {canCreateVariable() && (
                   <ButtonSolid
-                    data-cy="add-new-constant-button"
+                    data-cy="form-add-new-constant-button"
                     variant="primary"
                     onClick={() => {
                       setMode(() => MODES.CREATE);