From 13b5d0fd99cd3a18c25add5a306b79e2108b5a73 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Fri, 3 May 2024 00:59:27 +0530
Subject: [PATCH 01/12] masking workspace constants on frontend

---
 .../src/Editor/CodeBuilder/CodeHinter.jsx     |  12 +-
 frontend/src/Editor/Editor.jsx                |   4 +-
 .../src/ManageOrgConstants/ConstantForm.jsx   | 112 ++++++++++++++----
 .../src/ManageOrgConstants/ConstantTable.jsx  |  60 ++++++++--
 .../ManageOrgConstants/ManageOrgConstants.jsx |   2 +-
 .../OrgConstantsVariablesPreviewBox.jsx       |   6 +-
 .../organization_constants.service.js         |  21 ++--
 .../organization_constants.controller.ts      |  33 +++++-
 .../organization_constants.service.ts         |  21 +++-
 9 files changed, 211 insertions(+), 60 deletions(-)

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index b3d0d4c7d2..0d77d7b606 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -103,6 +103,8 @@ export function CodeHinter({
 }) {
   const context = useContext(CodeHinterContext);
 
+  const hiddenWorkspaceConstant = 'Workspace constant values are hidden';
+
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const options = {
     lineNumbers: lineNumbers ?? false,
@@ -134,6 +136,8 @@ export function CodeHinter({
   const isWorkspaceVariable =
     typeof currentValue === 'string' && (currentValue.includes('%%client') || currentValue.includes('%%server'));
 
+  const isWorkspaceConstant = typeof currentValue === 'string' && currentValue.includes('constants');
+
   const slideInStyles = useSpring({
     config: { ...config.stiff },
     from: { opacity: 0, height: 0 },
@@ -240,7 +244,7 @@ export function CodeHinter({
       globalPreviewCopy = preview;
       globalErrorCopy = null;
       setResolvingError(null);
-      setResolvedValue(preview);
+      setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstant : preview);
     }
 
     return [globalPreviewCopy, globalErrorCopy];
@@ -252,7 +256,7 @@ export function CodeHinter({
     return () => {
       if (enablePreview) {
         setPrevCurrentValue(null);
-        setResolvedValue(globalPreviewCopy);
+        setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstant : globalPreviewCopy);
         setResolvingError(globalErrorCopy);
       }
     };
@@ -348,9 +352,9 @@ export function CodeHinter({
           <div>
             <div className="d-flex my-1">
               <div className="flex-grow-1" style={{ fontWeight: 700, textTransform: 'capitalize' }}>
-                {previewType}
+                {!isWorkspaceConstant && previewType}
               </div>
-              {isFocused && (
+              {isFocused && !isWorkspaceConstant && (
                 <div className="preview-icons position-relative">
                   <CodeHinter.PopupIcon callback={() => copyToClipboard(content)} icon="copy" tip="Copy to clipboard" />
                 </div>
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 87ee134c34..00e8cbd935 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -77,6 +77,8 @@ enablePatches();
 
 const decimalToHex = (alpha) => (alpha === 0 ? '00' : Math.round(255 * alpha).toString(16));
 
+const maskedWorkspaceConstantStr = '**************';
+
 const EditorComponent = (props) => {
   const { socket } = createWebsocketConnection(props?.params?.id);
   const mounted = useMounted();
@@ -373,7 +375,7 @@ const EditorComponent = (props) => {
       const orgConstants = {};
       constants.map((constant) => {
         const constantValue = constant.values.find((value) => value.environmentName === 'production')['value'];
-        orgConstants[constant.name] = constantValue;
+        orgConstants[constant.name] = maskedWorkspaceConstantStr;
       });
 
       useCurrentStateStore.getState().actions.setCurrentState({
diff --git a/frontend/src/ManageOrgConstants/ConstantForm.jsx b/frontend/src/ManageOrgConstants/ConstantForm.jsx
index 30ac314fe2..9e8fdece32 100644
--- a/frontend/src/ManageOrgConstants/ConstantForm.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantForm.jsx
@@ -4,6 +4,8 @@ import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import _, { capitalize } from 'lodash';
 import { Tooltip } from 'react-tooltip';
 import { FormWrapper, textAreaEnterOnSave } from '@/_components/FormWrapper';
+import EyeHide from '../../assets/images/onboardingassets/Icons/EyeHide';
+import EyeShow from '../../assets/images/onboardingassets/Icons/EyeShow';
 
 const ConstantForm = ({
   selectedConstant,
@@ -19,6 +21,21 @@ const ConstantForm = ({
     environments: [{ label: currentEnvironment?.name, value: currentEnvironment?.id }],
   }));
 
+  const [showValue, setShowValue] = useState(false);
+
+  const toggleShowValue = () => {
+    setShowValue(!showValue);
+  };
+
+  const getDisplayedValue = () => {
+    if (!fields['value']) {
+      return '';
+    }
+    return showValue ? fields['value'] : '*'.repeat(fields['value'].length);
+  };
+
+  const darkMode = localStorage.getItem('darkMode') === 'true';
+
   const [error, setError] = useState({});
 
   function isValidPropertyName(name) {
@@ -133,6 +150,10 @@ const ConstantForm = ({
     }
   };
 
+  const handleBlur = () => {
+    setShowValue(false);
+  };
+
   return (
     <div className="variable-form-wrap">
       <div className="card-header">
@@ -177,28 +198,77 @@ const ConstantForm = ({
             <div className="col tj-app-input">
               <label className="form-label" data-cy="value-label">
                 Value
+                <small className="text-green" style={{ marginLeft: '380px' }}>
+                  <img className="mx-2 encrypted-icon" src="assets/images/icons/padlock.svg" width="12" height="12" />
+                  Encrypted
+                </small>
               </label>
-              <textarea
-                ref={inputRef}
-                type="text"
-                className={`tj-input-element ${error['value'] ? 'tj-input-error-state' : ''}`}
-                placeholder={'Enter Value'}
-                name="value"
-                onChange={handleFieldChange}
-                value={fields['value']}
-                onKeyDown={(e) => textAreaEnterOnSave(e, handlecreateOrUpdate)}
-                onInput={handleInput}
-                onFocus={() => !!selectedConstant && handleInput()}
-                style={{
-                  height: !!selectedConstant && selectedConstant?.value?.length > 50 ? '300px' : '36px',
-                  minHeight: '36px',
-                  maxHeight: '500px',
-                  whiteSpace: 'pre-line',
-                  resize: 'none',
-                  overflow: 'hidden',
-                }}
-                data-cy="value-input-field"
-              />
+              <div className="position-relative">
+                <textarea
+                  ref={inputRef}
+                  type={'text'}
+                  className={`tj-input-element ${error['value'] ? 'tj-input-error-state' : ''}`}
+                  onChange={handleFieldChange}
+                  name="value"
+                  value={getDisplayedValue()}
+                  placeholder={'Enter value'}
+                  onKeyDown={(e) => textAreaEnterOnSave(e, handlecreateOrUpdate)}
+                  readOnly={!showValue}
+                  onInput={handleInput}
+                  onFocus={() => {
+                    setShowValue(true);
+                    !!selectedConstant && handleInput();
+                  }}
+                  onBlur={handleBlur}
+                  style={{
+                    paddingRight: '35px',
+                    height: !!selectedConstant && selectedConstant?.value?.length > 50 ? '300px' : '36px',
+                    minHeight: '36px',
+                    maxHeight: '500px',
+                    whiteSpace: 'pre-line',
+                    resize: 'none',
+                    overflow: 'hidden',
+                  }}
+                  data-cy="value-input-field"
+                />
+                <div
+                  onClick={() => toggleShowValue()}
+                  data-cy="show-password-icon"
+                  style={{
+                    position: 'absolute',
+                    top: 5,
+                    right: '10px',
+                    cursor: 'pointer',
+                    zIndex: 2,
+                  }}
+                >
+                  {!showValue ? (
+                    <EyeHide
+                      fill={
+                        darkMode
+                          ? String(fields['value'])?.length
+                            ? '#D1D5DB'
+                            : '#656565'
+                          : String(fields['value'])?.length
+                          ? '#384151'
+                          : '#D1D5DB'
+                      }
+                    />
+                  ) : (
+                    <EyeShow
+                      fill={
+                        darkMode
+                          ? String(fields['value'])?.length
+                            ? '#D1D5DB'
+                            : '#656565'
+                          : String(fields['value'])?.length
+                          ? '#384151'
+                          : '#D1D5DB'
+                      }
+                    />
+                  )}
+                </div>
+              </div>
 
               <span className="text-danger" data-cy="value-error-text">
                 {error['value']}
diff --git a/frontend/src/ManageOrgConstants/ConstantTable.jsx b/frontend/src/ManageOrgConstants/ConstantTable.jsx
index 425a210739..670c7dff54 100644
--- a/frontend/src/ManageOrgConstants/ConstantTable.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantTable.jsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { Tooltip } from 'react-tooltip';
+import EyeHide from '../../assets/images/onboardingassets/Icons/EyeHide';
+import EyeShow from '../../assets/images/onboardingassets/Icons/EyeShow';
 
 const ConstantTable = ({
   constants = [],
@@ -10,6 +12,19 @@ const ConstantTable = ({
   isLoading = false,
 }) => {
   const tableRef = React.createRef(null);
+  const [showValues, setShowValues] = useState({});
+  const toggleShowValue = (id) => {
+    setShowValues((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+  const darkMode = localStorage.getItem('darkMode') === 'true';
+  const displayValue = (constant) => {
+    return String(constant.value).length > (canUpdateDeleteConstant ? 30 : 50)
+      ? String(constant.value).substring(0, canUpdateDeleteConstant ? 30 : 50) + '...'
+      : constant.value;
+  };
 
   const calculateOffset = () => {
     const elementHeight = tableRef.current.getBoundingClientRect().top;
@@ -20,11 +35,11 @@ const ConstantTable = ({
     <div className="container-xl">
       <div className="card constant-table-card" style={{ border: 'none' }}>
         <div
-          className="fixedHeader table-responsive px-2"
+          className="fixedHeader table-responsive constant-table-wrapper px-2"
           ref={tableRef}
           style={{ maxHeight: tableRef.current && calculateOffset() }}
         >
-          <table className="table table-vcenter constant-table-wrapper mt-2" disabled={true}>
+          <table className="table table-vcenter mt-2" disabled={true}>
             <thead>
               <tr>
                 <th data-cy="workspace-variable-table-name-header">Name</th>
@@ -33,7 +48,7 @@ const ConstantTable = ({
               </tr>
             </thead>
             {isLoading ? (
-              <tbody className="w-100" style={{ minHeight: '300px' }}>
+              <tbody className="w-100">
                 {Array.from(Array(4)).map((_item, index) => (
                   <tr key={index}>
                     <td className="col-4 p-3">
@@ -53,7 +68,6 @@ const ConstantTable = ({
               </tbody>
             ) : (
               <tbody>
-                <Tooltip id="tooltip-for-org-constant-cell" />
                 {constants.map((constant) => (
                   <tr key={constant.id}>
                     <td className="p-3">
@@ -71,14 +85,8 @@ const ConstantTable = ({
                       <a
                         className="text-reset user-email"
                         data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-workspace-constant-value`}
-                        data-tooltip-id="tooltip-for-org-constant-cell"
-                        data-tooltip-content={constant.value}
-                        data-tooltip-offset={5}
-                        data-tooltip-place={constant.value.length > 50 ? 'right' : 'bottom'}
                       >
-                        {String(constant.value).length > (canUpdateDeleteConstant ? 30 : 50)
-                          ? String(constant.value).substring(0, canUpdateDeleteConstant ? 30 : 50) + '...'
-                          : constant.value}
+                        {!showValues[constant.id] ? '*'.repeat(displayValue(constant).length) : displayValue(constant)}
                       </a>
                     </td>
 
@@ -88,6 +96,34 @@ const ConstantTable = ({
                           style={{ display: 'flex', justifyContent: 'space-between', gap: 5 }}
                           data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-workspace-constant-update`}
                         >
+                          <div onClick={() => toggleShowValue(constant.id)} data-cy="show-password-icon">
+                            {!showValues[constant.id] ? (
+                              <EyeHide
+                                fill={
+                                  darkMode
+                                    ? String(constant.value)?.length
+                                      ? '#D1D5DB'
+                                      : '#656565'
+                                    : String(constant.value)?.length
+                                    ? '#384151'
+                                    : '#D1D5DB'
+                                }
+                              />
+                            ) : (
+                              <EyeShow
+                                fill={
+                                  darkMode
+                                    ? String(constant.value)?.length
+                                      ? '#D1D5DB'
+                                      : '#656565'
+                                    : String(constant.value)?.length
+                                    ? '#384151'
+                                    : '#D1D5DB'
+                                }
+                              />
+                            )}
+                          </div>
+                          {/* <SolidIcon className="eye-icon" name={'eye'} /> */}
                           <ButtonSolid
                             variant="secondary"
                             style={{ minWidth: '100px' }}
diff --git a/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx b/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
index 2d8dcea37a..77e7bc3a7d 100644
--- a/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
+++ b/frontend/src/ManageOrgConstants/ManageOrgConstants.jsx
@@ -172,7 +172,7 @@ const ManageOrgConstantsComponent = ({ darkMode }) => {
   };
 
   const fetchConstantsAndEnvironments = async () => {
-    const orgConstants = await orgEnvironmentConstantService.getAll();
+    const orgConstants = await orgEnvironmentConstantService.getAll(true);
 
     if (orgConstants?.constants?.length > 1) {
       orgConstants.constants.sort((a, b) => {
diff --git a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
index 711731a867..cc99c025a8 100644
--- a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
+++ b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
@@ -23,6 +23,8 @@ export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceCo
     return null;
   };
 
+  const workspaceConstantInfo = 'Workspace constants values are hidden';
+
   const shouldResolve =
     typeof value === 'string' &&
     ((value.includes('%%') && (value.includes('client.') || value.includes('server.'))) ||
@@ -101,10 +103,10 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
           <div className="alert-banner-type-text">
             <div className="d-flex my-1">
               <div className="flex-grow-1" style={{ fontWeight: 800, textTransform: 'capitalize' }}>
-                {isValidError ? 'Error' : ` ${type} - ${previewType}`}
+                {isValidError ? 'Error' : isConstant ? null : ` ${type} - ${previewType}`}
               </div>
             </div>
-            {getPreviewContent(resolvedValue, previewType)}
+            {isConstant ? this.workspaceConstantInfo : getPreviewContent(resolvedValue, previewType)}
           </div>
         </div>
         <DepericatedAlerForWorkspaceVariable text="Workspace variables deprecating soon" shouldShow={!isConstant} />
diff --git a/frontend/src/_services/organization_constants.service.js b/frontend/src/_services/organization_constants.service.js
index 7ad8f3fea0..6225f266d9 100644
--- a/frontend/src/_services/organization_constants.service.js
+++ b/frontend/src/_services/organization_constants.service.js
@@ -10,9 +10,11 @@ export const orgEnvironmentConstantService = {
   getConstantsFromPublicApp,
 };
 
-function getAll() {
+function getAll(decryptValue = false) {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
-  return fetch(`${config.apiUrl}/organization-constants`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/organization-constants?decryptValue=${decryptValue}`, requestOptions).then(
+    handleResponse
+  );
 }
 
 function create(name, value, environments) {
@@ -43,14 +45,17 @@ function remove(id, environmentId) {
   );
 }
 
-function getConstantsFromEnvironment(environmentId) {
+function getConstantsFromEnvironment(environmentId, decryptValue = false) {
   const requestOptions = { method: 'GET', headers: authHeader(), credentials: 'include' };
-  return fetch(`${config.apiUrl}/organization-constants/environment/${environmentId}`, requestOptions).then(
-    handleResponse
-  );
+  return fetch(
+    `${config.apiUrl}/organization-constants/environment/${environmentId}?decryptValue=${decryptValue}`,
+    requestOptions
+  ).then(handleResponse);
 }
 
-function getConstantsFromPublicApp(slug) {
+function getConstantsFromPublicApp(slug, decryptValue = false) {
   const requestOptions = { method: 'GET' };
-  return fetch(`${config.apiUrl}/organization-constants/${slug}`, requestOptions).then(handleResponse);
+  return fetch(`${config.apiUrl}/organization-constants/${slug}?decryptValue=${decryptValue}`, requestOptions).then(
+    handleResponse
+  );
 }
diff --git a/server/src/controllers/organization_constants.controller.ts b/server/src/controllers/organization_constants.controller.ts
index e0b97f664a..ccb112491b 100644
--- a/server/src/controllers/organization_constants.controller.ts
+++ b/server/src/controllers/organization_constants.controller.ts
@@ -9,6 +9,7 @@ import {
   Delete,
   ForbiddenException,
   Query,
+  Req,
 } from '@nestjs/common';
 import { decamelizeKeys } from 'humps';
 import { JwtAuthGuard } from '../modules/auth/jwt-auth.guard';
@@ -20,6 +21,7 @@ import { OrganizationConstantsAbilityFactory } from 'src/modules/casl/abilities/
 import { AppDecorator as App } from 'src/decorators/app.decorator';
 import { OrgEnvironmentVariablesAbilityFactory } from 'src/modules/casl/abilities/org-environment-variables-ability.factory';
 import { OrgEnvironmentVariable } from 'src/entities/org_envirnoment_variable.entity';
+import { OrganizationConstant } from 'src/entities/organization_constants.entity';
 
 @Controller('organization-constants')
 export class OrganizationConstantController {
@@ -31,24 +33,43 @@ export class OrganizationConstantController {
 
   @UseGuards(JwtAuthGuard)
   @Get()
-  async get(@User() user) {
-    const result = await this.organizationConstantsService.allEnvironmentConstants(user.organizationId);
+  async get(@User() user, @Req() req) {
+    const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
+    const { decryptValue } = req.query;
+    const decrypt =
+      decryptValue === 'true' &&
+      (ability.can('createOrganizationConstant', OrganizationConstant) ||
+        ability.can('deleteOrganizationConstant', OrganizationConstant));
+    const result = await this.organizationConstantsService.allEnvironmentConstants(user.organizationId, decrypt);
     return { constants: result };
   }
 
   @UseGuards(IsPublicGuard)
   @Get(':app_slug')
-  async getConstantsFromApp(@App() app) {
-    const result = await this.organizationConstantsService.allEnvironmentConstants(app.organizationId);
+  async getConstantsFromApp(@App() app, @User() user, @Req() req) {
+    const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
+    const { decryptValue } = req.query;
+    const decrypt =
+      decryptValue === 'true' &&
+      (ability.can('createOrganizationConstant', OrganizationConstant) ||
+        ability.can('deleteOrganizationConstant', OrganizationConstant));
+    const result = await this.organizationConstantsService.allEnvironmentConstants(app.organizationId, decrypt);
     return { constants: result };
   }
 
   @UseGuards(JwtAuthGuard)
   @Get('/environment/:environmentId')
-  async getConstantsFromEnvironment(@User() user, @Param('environmentId') environmentId) {
+  async getConstantsFromEnvironment(@User() user, @Param('environmentId') environmentId, @Req() req) {
+    const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
+    const { decryptValue } = req.query;
+    const decrypt =
+      decryptValue === 'true' &&
+      (ability.can('createOrganizationConstant', OrganizationConstant) ||
+        ability.can('deleteOrganizationConstant', OrganizationConstant));
     const result = await this.organizationConstantsService.getConstantsForEnvironment(
       user.organizationId,
-      environmentId
+      environmentId,
+      decrypt
     );
     return { constants: result };
   }
diff --git a/server/src/services/organization_constants.service.ts b/server/src/services/organization_constants.service.ts
index ab49c597b4..fcb8ab0b5b 100644
--- a/server/src/services/organization_constants.service.ts
+++ b/server/src/services/organization_constants.service.ts
@@ -17,7 +17,7 @@ export class OrganizationConstantsService {
     private appEnvironmentService: AppEnvironmentService
   ) {}
 
-  async allEnvironmentConstants(organizationId: string): Promise<OrganizationConstant[]> {
+  async allEnvironmentConstants(organizationId: string, decryptValue: boolean): Promise<OrganizationConstant[]> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const query = manager
         .createQueryBuilder(OrganizationConstant, 'organization_constants')
@@ -35,7 +35,12 @@ export class OrganizationConstantsService {
 
               return {
                 environmentName: env.name,
-                value: value && value.value.length > 0 ? await this.decryptSecret(organizationId, value.value) : '',
+                value:
+                  value && value.value.length > 0
+                    ? decryptValue
+                      ? await this.decryptSecret(organizationId, value.value)
+                      : value.value
+                    : '',
                 id: value.environmentId,
               };
             })
@@ -54,7 +59,11 @@ export class OrganizationConstantsService {
     });
   }
 
-  async getConstantsForEnvironment(organizationId: string, environmentId: string): Promise<OrganizationConstant[]> {
+  async getConstantsForEnvironment(
+    organizationId: string,
+    environmentId: string,
+    decryptValue: boolean
+  ): Promise<OrganizationConstant[]> {
     return await dbTransactionWrap(async (manager: EntityManager) => {
       const query = manager
         .createQueryBuilder(OrganizationConstant, 'organization_constants')
@@ -64,11 +73,13 @@ export class OrganizationConstantsService {
       const result = await query.getMany();
 
       const constantsWithValues = result.map(async (constant) => {
-        const decryptedValue = await this.decryptSecret(organizationId, constant.orgEnvironmentConstantValues[0].value);
+        const value = decryptValue
+          ? await this.decryptSecret(organizationId, constant.orgEnvironmentConstantValues[0].value)
+          : constant.orgEnvironmentConstantValues[0].value;
         return {
           id: constant.id,
           name: constant.constantName,
-          value: decryptedValue,
+          value: value,
         };
       });
 

From 6b70e7ebab0bac8a1aeac75aa17d81cf09285cf1 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Fri, 3 May 2024 11:11:25 +0530
Subject: [PATCH 02/12] remove comment

---
 frontend/src/Editor/CodeBuilder/CodeHinter.jsx             | 6 +++---
 frontend/src/ManageOrgConstants/ConstantTable.jsx          | 1 -
 .../OrgConstantsVariablesPreviewBox.jsx                    | 7 +++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index 0d77d7b606..bc948468ef 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -103,7 +103,7 @@ export function CodeHinter({
 }) {
   const context = useContext(CodeHinterContext);
 
-  const hiddenWorkspaceConstant = 'Workspace constant values are hidden';
+  const hiddenWorkspaceConstantText = 'Workspace constant values are hidden';
 
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const options = {
@@ -244,7 +244,7 @@ export function CodeHinter({
       globalPreviewCopy = preview;
       globalErrorCopy = null;
       setResolvingError(null);
-      setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstant : preview);
+      setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstantText : preview);
     }
 
     return [globalPreviewCopy, globalErrorCopy];
@@ -256,7 +256,7 @@ export function CodeHinter({
     return () => {
       if (enablePreview) {
         setPrevCurrentValue(null);
-        setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstant : globalPreviewCopy);
+        setResolvedValue(isWorkspaceConstant ? hiddenWorkspaceConstantText : globalPreviewCopy);
         setResolvingError(globalErrorCopy);
       }
     };
diff --git a/frontend/src/ManageOrgConstants/ConstantTable.jsx b/frontend/src/ManageOrgConstants/ConstantTable.jsx
index 670c7dff54..73e5f50e74 100644
--- a/frontend/src/ManageOrgConstants/ConstantTable.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantTable.jsx
@@ -123,7 +123,6 @@ const ConstantTable = ({
                               />
                             )}
                           </div>
-                          {/* <SolidIcon className="eye-icon" name={'eye'} /> */}
                           <ButtonSolid
                             variant="secondary"
                             style={{ minWidth: '100px' }}
diff --git a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
index cc99c025a8..ea7950815b 100644
--- a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
+++ b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
@@ -22,9 +22,6 @@ export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceCo
 
     return null;
   };
-
-  const workspaceConstantInfo = 'Workspace constants values are hidden';
-
   const shouldResolve =
     typeof value === 'string' &&
     ((value.includes('%%') && (value.includes('client.') || value.includes('server.'))) ||
@@ -93,6 +90,8 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
     },
   });
 
+  const hiddenWorkspaceConstantText = 'Workspace constant values are hidden';
+
   return (
     <React.Fragment>
       <animated.div className={themeCls} style={{ ...slideInStyles, overflow: 'hidden' }}>
@@ -106,7 +105,7 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
                 {isValidError ? 'Error' : isConstant ? null : ` ${type} - ${previewType}`}
               </div>
             </div>
-            {isConstant ? this.workspaceConstantInfo : getPreviewContent(resolvedValue, previewType)}
+            {isConstant ? hiddenWorkspaceConstantText : getPreviewContent(resolvedValue, previewType)}
           </div>
         </div>
         <DepericatedAlerForWorkspaceVariable text="Workspace variables deprecating soon" shouldShow={!isConstant} />

From 164610e4df67a1f482270eced8a4e18b9d61ef22 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Fri, 3 May 2024 16:44:59 +0530
Subject: [PATCH 03/12] update

---
 frontend/src/Editor/Viewer.jsx              | 3 ++-
 server/src/services/data_queries.service.ts | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Viewer.jsx b/frontend/src/Editor/Viewer.jsx
index ccae0a6580..a179e1d221 100644
--- a/frontend/src/Editor/Viewer.jsx
+++ b/frontend/src/Editor/Viewer.jsx
@@ -48,6 +48,7 @@ import DesktopHeader from './Viewer/DesktopHeader';
 import './Viewer/viewer.scss';
 import useAppDarkMode from '@/_hooks/useAppDarkMode';
 
+const maskedWorkspaceConstantStr = '**************';
 class ViewerComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -245,7 +246,7 @@ class ViewerComponent extends React.Component {
     if (variablesResult && Array.isArray(variablesResult)) {
       variablesResult.map((constant) => {
         const constantValue = constant.values.find((value) => value.environmentName === 'production')['value'];
-        orgConstants[constant.name] = constantValue;
+        orgConstants[constant.name] = maskedWorkspaceConstantStr;
       });
       return {
         constants: orgConstants,
diff --git a/server/src/services/data_queries.service.ts b/server/src/services/data_queries.service.ts
index dea94f2ce1..46f57bc9b5 100644
--- a/server/src/services/data_queries.service.ts
+++ b/server/src/services/data_queries.service.ts
@@ -602,7 +602,7 @@ export class DataQueriesService {
 
         if (variables?.length > 0) {
           for (const variable of variables) {
-            object = object.replace(variable, options[variable]);
+            object = object.replace(variable, await this.resolveConstants(variable, organization_id, environmentId));
           }
         }
         return object;

From e67f640804310b748a05e2a463b6f435016fe71d Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Fri, 3 May 2024 20:35:12 +0530
Subject: [PATCH 04/12] added logic to verify constants keys used in codehinter

---
 .../src/Editor/CodeBuilder/CodeHinter.jsx     | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index bc948468ef..4f89597f21 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -118,6 +118,7 @@ export function CodeHinter({
     placeholder,
   };
   const currentState = useCurrentState();
+  const definedConstants = currentState?.constants;
   const [realState, setRealState] = useState({ ...currentState, ..._currentState, ...context });
 
   const [currentValue, setCurrentValue] = useState('');
@@ -136,7 +137,9 @@ export function CodeHinter({
   const isWorkspaceVariable =
     typeof currentValue === 'string' && (currentValue.includes('%%client') || currentValue.includes('%%server'));
 
-  const isWorkspaceConstant = typeof currentValue === 'string' && currentValue.includes('constants');
+  const isWorkspaceConstant = typeof currentValue === 'string' && currentValue.includes('constants.');
+
+  const constantRegex = /{{constants\.([a-zA-Z0-9_]+)}}/g;
 
   const slideInStyles = useSpring({
     config: { ...config.stiff },
@@ -184,10 +187,29 @@ export function CodeHinter({
 
   const getPreviewAndErrorFromValue = (value) => {
     const customResolvables = getCustomResolvables();
+    const invalidConstants = verifyConstant(value);
+    if (invalidConstants?.length) {
+      return [value, `${invalidConstants} are undefined`];
+    }
     const [preview, error] = resolveReferences(value, realState, null, customResolvables, true, true);
     return [preview, error];
   };
 
+  const verifyConstant = (value) => {
+    const matches = value.match(constantRegex);
+    if (!matches) {
+      return [];
+    }
+    const resolvedMatches = matches.map((match) => {
+      const cleanedMatch = match.replace(/{{constants\./, '').replace(/}}/, '');
+      return Object.keys(definedConstants).includes(cleanedMatch) ? null : cleanedMatch;
+    });
+    const invalidConstants = resolvedMatches?.filter((item) => item != null);
+    if (invalidConstants?.length) {
+      return invalidConstants;
+    }
+  };
+
   useEffect(() => {
     setCurrentValue(initialValue);
     const [preview, error] = getPreviewAndErrorFromValue(initialValue);

From 05f35f2784c43082154fd0c34f0c9c0e3fb171b2 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Mon, 6 May 2024 13:41:47 +0530
Subject: [PATCH 05/12] Add check for value type

---
 frontend/src/Editor/CodeBuilder/CodeHinter.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index 4f89597f21..c0fc187185 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -189,13 +189,16 @@ export function CodeHinter({
     const customResolvables = getCustomResolvables();
     const invalidConstants = verifyConstant(value);
     if (invalidConstants?.length) {
-      return [value, `${invalidConstants} are undefined`];
+      return [value, `undefined constants: ${invalidConstants}`];
     }
     const [preview, error] = resolveReferences(value, realState, null, customResolvables, true, true);
     return [preview, error];
   };
 
   const verifyConstant = (value) => {
+    if (typeof value !== 'string') {
+      return [];
+    }
     const matches = value.match(constantRegex);
     if (!matches) {
       return [];

From 20e7968a8da332c55d881a391c3a8ab6fedc6229 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Mon, 6 May 2024 17:08:28 +0530
Subject: [PATCH 06/12] update workspace constant permissions

---
 .../ManageGroupPermissionResources.jsx                      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
index a8b5dcd023..906517fe1f 100644
--- a/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
+++ b/frontend/src/ManageGroupPermissionResources/ManageGroupPermissionResources.jsx
@@ -319,7 +319,9 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
     const orgEnvironmentPermission = groupPermission
       ? groupPermission.org_environment_variable_create &&
         groupPermission.org_environment_variable_update &&
-        groupPermission.org_environment_variable_delete
+        groupPermission.org_environment_variable_delete &&
+        groupPermission.org_environment_constant_create &&
+        groupPermission.org_environment_constant_delete
       : false;
 
     return (
@@ -893,6 +895,8 @@ class ManageGroupPermissionResourcesComponent extends React.Component {
                                               org_environment_variable_create: !orgEnvironmentPermission,
                                               org_environment_variable_update: !orgEnvironmentPermission,
                                               org_environment_variable_delete: !orgEnvironmentPermission,
+                                              org_environment_constant_create: !orgEnvironmentPermission,
+                                              org_environment_constant_delete: !orgEnvironmentPermission,
                                             });
                                           }}
                                           checked={orgEnvironmentPermission}

From 06e9186b137b86b9f9ba21e9240ca1e428f72289 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Mon, 6 May 2024 23:37:50 +0530
Subject: [PATCH 07/12] Fix exitsing issues related to validation on code
 hinter

---
 .../OrgConstantsVariablesPreviewBox.jsx       | 44 +++++++++++++++----
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
index ea7950815b..db0fe9ffbb 100644
--- a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
+++ b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { useSpring, config, animated } from 'react-spring';
 import { resolveReferences } from '../../_helpers/utils';
 import { Alert } from '../../_ui/Alert';
 import useHeight from '@/_hooks/use-height-transition';
+import React from 'react';
 
 export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceConstants, value, isFocused }) => {
   const getResolveValueType = (currentValue) => {
@@ -41,8 +41,40 @@ export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceCo
   );
 };
 
+const verifyConstant = (value, definedConstants) => {
+  const constantRegex = /{{constants\.([a-zA-Z0-9_]+)}}/g;
+  if (typeof value !== 'string') {
+    return [];
+  }
+  const matches = value.match(constantRegex);
+  if (!matches) {
+    return [];
+  }
+  const resolvedMatches = matches.map((match) => {
+    const cleanedMatch = match.replace(/{{constants\./, '').replace(/}}/, '');
+    return Object.keys(definedConstants).includes(cleanedMatch) ? null : cleanedMatch;
+  });
+  const invalidConstants = resolvedMatches?.filter((item) => item != null);
+  if (invalidConstants?.length) {
+    return invalidConstants;
+  }
+};
+
 const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
-  const [preview, error] = resolveReferences(value, state, null, {}, true, true);
+  const isConstant = type === 'Workspace Constant';
+  const hiddenWorkspaceConstantText = 'Workspace constant values are hidden';
+  const invalidConstants = verifyConstant(value, state.constants);
+  let preview;
+  let error;
+  if (invalidConstants?.length) {
+    [preview, error] = [value, `Undefined constants: ${invalidConstants}`];
+  } else {
+    [preview, error] = resolveReferences(value, state, null, {}, true, true);
+    if (isConstant) {
+      preview = hiddenWorkspaceConstantText;
+    }
+  }
+
   const previewType = typeof preview;
 
   let resolvedValue = preview;
@@ -52,7 +84,7 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
     : error?.toString();
   const isValidError = error && errorMessage !== 'HiddenEnvironmentVariable';
 
-  if (error && !isValidError) {
+  if (error && (!isValidError || error?.toString().includes('Undefined constants:'))) {
     resolvedValue = errorMessage;
   }
 
@@ -77,8 +109,6 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
     }
   };
 
-  const isConstant = type === 'Workspace Constant';
-
   const [heightRef, currentHeight] = useHeight();
 
   const slideInStyles = useSpring({
@@ -90,8 +120,6 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
     },
   });
 
-  const hiddenWorkspaceConstantText = 'Workspace constant values are hidden';
-
   return (
     <React.Fragment>
       <animated.div className={themeCls} style={{ ...slideInStyles, overflow: 'hidden' }}>
@@ -105,7 +133,7 @@ const ResolvedValue = ({ value, isFocused, state = {}, type }) => {
                 {isValidError ? 'Error' : isConstant ? null : ` ${type} - ${previewType}`}
               </div>
             </div>
-            {isConstant ? hiddenWorkspaceConstantText : getPreviewContent(resolvedValue, previewType)}
+            {getPreviewContent(resolvedValue, previewType)}
           </div>
         </div>
         <DepericatedAlerForWorkspaceVariable text="Workspace variables deprecating soon" shouldShow={!isConstant} />

From f02cb71015f7bc48d9bca1a630fb7a45765bad87 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Tue, 7 May 2024 13:55:49 +0530
Subject: [PATCH 08/12] do not send encrypted value to fe

---
 .../OrgConstantsVariablesPreviewBox.jsx       |  8 ++--
 .../organization_constants.service.ts         | 37 ++++++++++++-------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
index db0fe9ffbb..4a297be32e 100644
--- a/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
+++ b/frontend/src/_components/OrgConstantsVariablesResolver/OrgConstantsVariablesPreviewBox.jsx
@@ -8,6 +8,10 @@ export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceCo
   const getResolveValueType = (currentValue) => {
     if (!currentValue) return null;
 
+    if (currentValue.includes('constants')) {
+      return 'Workspace Constant';
+    }
+
     if (currentValue.includes('client')) {
       return 'client workspace variable';
     }
@@ -16,10 +20,6 @@ export const OrgConstantVariablesPreviewBox = ({ workspaceVariables, workspaceCo
       return 'server workspace variable';
     }
 
-    if (currentValue.includes('constants')) {
-      return 'Workspace Constant';
-    }
-
     return null;
   };
   const shouldResolve =
diff --git a/server/src/services/organization_constants.service.ts b/server/src/services/organization_constants.service.ts
index fcb8ab0b5b..a30c9bfe4a 100644
--- a/server/src/services/organization_constants.service.ts
+++ b/server/src/services/organization_constants.service.ts
@@ -33,16 +33,21 @@ export class OrganizationConstantsService {
             appEnvironments.map(async (env) => {
               const value = constant.orgEnvironmentConstantValues.find((value) => value.environmentId === env.id);
 
-              return {
+              const valueResult = {
                 environmentName: env.name,
-                value:
-                  value && value.value.length > 0
-                    ? decryptValue
-                      ? await this.decryptSecret(organizationId, value.value)
-                      : value.value
-                    : '',
-                id: value.environmentId,
+                id: value ? value.environmentId : undefined, // Safeguard for undefined 'value'
               };
+
+              if (value && value.value.length > 0) {
+                const decryptedOrRawValue = decryptValue
+                  ? await this.decryptSecret(organizationId, value.value)
+                  : value.value;
+
+                if (decryptValue) {
+                  valueResult['value'] = decryptedOrRawValue;
+                }
+              }
+              return valueResult;
             })
           );
 
@@ -73,14 +78,20 @@ export class OrganizationConstantsService {
       const result = await query.getMany();
 
       const constantsWithValues = result.map(async (constant) => {
-        const value = decryptValue
-          ? await this.decryptSecret(organizationId, constant.orgEnvironmentConstantValues[0].value)
-          : constant.orgEnvironmentConstantValues[0].value;
-        return {
+        const constantResult = {
           id: constant.id,
           name: constant.constantName,
-          value: value,
         };
+
+        if (decryptValue && constant.orgEnvironmentConstantValues.length > 0) {
+          const decryptedValue = await this.decryptSecret(
+            organizationId,
+            constant.orgEnvironmentConstantValues[0].value
+          );
+          constantResult['value'] = decryptedValue;
+        }
+
+        return constantResult;
       });
 
       return Promise.all(constantsWithValues);

From 48e92d78dc8d8dc88ad4e392009511918d9a0d86 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Wed, 8 May 2024 10:20:47 +0530
Subject: [PATCH 09/12] small updates

---
 frontend/src/Editor/Editor.jsx                |  1 -
 .../organization_constants.controller.ts      | 21 +++++++------------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 00e8cbd935..54065e5bc2 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -374,7 +374,6 @@ const EditorComponent = (props) => {
     orgEnvironmentConstantService.getAll().then(({ constants }) => {
       const orgConstants = {};
       constants.map((constant) => {
-        const constantValue = constant.values.find((value) => value.environmentName === 'production')['value'];
         orgConstants[constant.name] = maskedWorkspaceConstantStr;
       });
 
diff --git a/server/src/controllers/organization_constants.controller.ts b/server/src/controllers/organization_constants.controller.ts
index ccb112491b..385467336a 100644
--- a/server/src/controllers/organization_constants.controller.ts
+++ b/server/src/controllers/organization_constants.controller.ts
@@ -9,7 +9,6 @@ import {
   Delete,
   ForbiddenException,
   Query,
-  Req,
 } from '@nestjs/common';
 import { decamelizeKeys } from 'humps';
 import { JwtAuthGuard } from '../modules/auth/jwt-auth.guard';
@@ -33,9 +32,8 @@ export class OrganizationConstantController {
 
   @UseGuards(JwtAuthGuard)
   @Get()
-  async get(@User() user, @Req() req) {
+  async get(@User() user, @Query('decryptValue') decryptValue) {
     const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
-    const { decryptValue } = req.query;
     const decrypt =
       decryptValue === 'true' &&
       (ability.can('createOrganizationConstant', OrganizationConstant) ||
@@ -46,22 +44,19 @@ export class OrganizationConstantController {
 
   @UseGuards(IsPublicGuard)
   @Get(':app_slug')
-  async getConstantsFromApp(@App() app, @User() user, @Req() req) {
-    const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
-    const { decryptValue } = req.query;
-    const decrypt =
-      decryptValue === 'true' &&
-      (ability.can('createOrganizationConstant', OrganizationConstant) ||
-        ability.can('deleteOrganizationConstant', OrganizationConstant));
-    const result = await this.organizationConstantsService.allEnvironmentConstants(app.organizationId, decrypt);
+  async getConstantsFromApp(@App() app, @User() user) {
+    const result = await this.organizationConstantsService.allEnvironmentConstants(app.organizationId, false);
     return { constants: result };
   }
 
   @UseGuards(JwtAuthGuard)
   @Get('/environment/:environmentId')
-  async getConstantsFromEnvironment(@User() user, @Param('environmentId') environmentId, @Req() req) {
+  async getConstantsFromEnvironment(
+    @User() user,
+    @Param('environmentId') environmentId,
+    @Query('decryptValue') decryptValue
+  ) {
     const ability = await this.organizationConstantsAbilityFactory.organizationConstantActions(user, null);
-    const { decryptValue } = req.query;
     const decrypt =
       decryptValue === 'true' &&
       (ability.can('createOrganizationConstant', OrganizationConstant) ||

From fb5ca9bf56c2f216aa4c5b1ab274d4313262c186 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Fri, 10 May 2024 18:12:15 +0530
Subject: [PATCH 10/12] Add data-cy for workspace constants components

---
 frontend/src/ManageOrgConstants/ConstantForm.jsx  | 3 ++-
 frontend/src/ManageOrgConstants/ConstantTable.jsx | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ManageOrgConstants/ConstantForm.jsx b/frontend/src/ManageOrgConstants/ConstantForm.jsx
index 9e8fdece32..5d6a6a6c13 100644
--- a/frontend/src/ManageOrgConstants/ConstantForm.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantForm.jsx
@@ -198,7 +198,7 @@ const ConstantForm = ({
             <div className="col tj-app-input">
               <label className="form-label" data-cy="value-label">
                 Value
-                <small className="text-green" style={{ marginLeft: '380px' }}>
+                <small className="text-green" style={{ marginLeft: '380px' }} data-cy="encrypted-label">
                   <img className="mx-2 encrypted-icon" src="assets/images/icons/padlock.svg" width="12" height="12" />
                   Encrypted
                 </small>
@@ -265,6 +265,7 @@ const ConstantForm = ({
                           ? '#384151'
                           : '#D1D5DB'
                       }
+                      data-cy="test"
                     />
                   )}
                 </div>
diff --git a/frontend/src/ManageOrgConstants/ConstantTable.jsx b/frontend/src/ManageOrgConstants/ConstantTable.jsx
index 73e5f50e74..16300d8659 100644
--- a/frontend/src/ManageOrgConstants/ConstantTable.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantTable.jsx
@@ -96,7 +96,10 @@ const ConstantTable = ({
                           style={{ display: 'flex', justifyContent: 'space-between', gap: 5 }}
                           data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-workspace-constant-update`}
                         >
-                          <div onClick={() => toggleShowValue(constant.id)} data-cy="show-password-icon">
+                          <div
+                            onClick={() => toggleShowValue(constant.id)}
+                            data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-constant-visibility`}
+                          >
                             {!showValues[constant.id] ? (
                               <EyeHide
                                 fill={

From cefa521960bf48e2999a523948972cddc1a87088 Mon Sep 17 00:00:00 2001
From: ajith-k-v <ajith.jaban@gmail.com>
Date: Fri, 10 May 2024 18:18:59 +0530
Subject: [PATCH 11/12] Modify workspace constants cypress test cases

---
 .../constants/selectors/workspaceConstants.js |   3 +
 .../workspace/workspaceConstants.cy.js        | 166 +++++++++---------
 .../cypress/support/utils/dataSource.js       |  42 ++++-
 .../support/utils/workspaceConstants.js       |  10 +-
 4 files changed, 134 insertions(+), 87 deletions(-)

diff --git a/cypress-tests/cypress/constants/selectors/workspaceConstants.js b/cypress-tests/cypress/constants/selectors/workspaceConstants.js
index 3f2a0e9275..de38a10273 100644
--- a/cypress-tests/cypress/constants/selectors/workspaceConstants.js
+++ b/cypress-tests/cypress/constants/selectors/workspaceConstants.js
@@ -27,4 +27,7 @@ export const workspaceConstantsSelectors = {
     constDeleteButton: (constName) => {
         return `[data-cy="${cyParamName(constName)}-delete-button"]`;
     },
+    constHideButton: (constName) => {
+        return `[data-cy="${cyParamName(constName)}-constant-visibility"]`;
+    },
 };
diff --git a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js
index 1fc8cab168..989748a159 100644
--- a/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js
+++ b/cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js
@@ -9,11 +9,9 @@ import {
     AddNewconstants,
 } from "Support/utils/workspaceConstants";
 import { buttonText } from "Texts/button";
-import {
-    editAndVerifyWidgetName,
-} from "Support/utils/commonWidget";
-import { verifypreview } from "Support/utils/dataSource";
-
+import { editAndVerifyWidgetName } from "Support/utils/commonWidget";
+import { verifypreview, createDataQuery } from "Support/utils/dataSource";
+import { dataSourceSelector } from "Selectors/dataSource";
 import {
     selectQueryFromLandingPage,
     query,
@@ -21,12 +19,6 @@ import {
 } from "Support/utils/queries";
 
 const data = {};
-data.constName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
-data.newConstvalue = `New ${data.constName}`;
-data.constantsName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
-data.constantsValue = "dJ_8Q~BcaMPd";
-data.appName = `${fake.companyName}-App`;
-data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
 
 describe("Workspace constants", () => {
     const envVar = Cypress.env("environment");
@@ -36,7 +28,16 @@ describe("Workspace constants", () => {
         cy.skipWalkthrough();
     });
     it("Verify workspace constants UI and CRUD operations", () => {
-        cy.get('[data-cy="icon-workspace-constants"]').click();
+        data.constName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
+        data.newConstvalue = `New ${data.constName}`;
+        data.constantsName = fake.firstName
+            .toLowerCase()
+            .replaceAll("[^A-Za-z]", "");
+        data.constantsValue = "dJ_8Q~BcaMPd";
+        data.appName = `${fake.companyName}-App`;
+        data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
+
+        cy.get(commonSelectors.workspaceConstantsIcon).click();
 
         cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
             "have.text",
@@ -88,13 +89,14 @@ describe("Workspace constants", () => {
             .invoke("attr", "placeholder")
             .should("eq", "Enter Constant Name");
         cy.get(commonSelectors.nameInputField).should("be.visible");
-        cy.get(commonSelectors.valueLabel).verifyVisibleElement(
-            "have.text",
-            "Value"
-        );
+        cy.get(commonSelectors.valueLabel).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Value");
+        });
+        cy.get('[data-cy="encrypted-label"]>').should("be.visible");
+        cy.verifyLabel("Encrypted");
         cy.get(commonSelectors.valueInputField)
             .invoke("attr", "placeholder")
-            .should("eq", "Enter Value");
+            .should("eq", "Enter value");
         cy.get(commonSelectors.valueInputField).should("be.visible");
         cy.get(commonSelectors.cancelButton).verifyVisibleElement(
             "have.text",
@@ -118,6 +120,7 @@ describe("Workspace constants", () => {
             "Constant name should be between 1 and 32 characters"
         );
 
+        cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, " ");
         cy.get(commonSelectors.valueErrorText).verifyVisibleElement(
             "have.text",
@@ -128,6 +131,7 @@ describe("Workspace constants", () => {
         cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
 
         cy.clearAndType(commonSelectors.nameInputField, data.constName);
+        cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.constName);
         cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
         cy.get(commonSelectors.cancelButton).click();
@@ -137,6 +141,7 @@ describe("Workspace constants", () => {
 
         cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
         cy.clearAndType(commonSelectors.nameInputField, data.constName);
+        cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.constName);
         cy.get(workspaceConstantsSelectors.addConstantButton).click();
         cy.verifyToastMessage(
@@ -167,6 +172,8 @@ describe("Workspace constants", () => {
         cy.get(
             workspaceConstantsSelectors.constantName(data.constName)
         ).verifyVisibleElement("have.text", data.constName);
+
+        cy.get(workspaceConstantsSelectors.constHideButton(data.constName)).click();
         cy.get(
             workspaceConstantsSelectors.constantValue(data.constName)
         ).verifyVisibleElement("have.text", data.constName);
@@ -189,13 +196,15 @@ describe("Workspace constants", () => {
         cy.get(commonSelectors.nameInputField)
             .should("be.visible")
             .and("be.disabled");
-        cy.get(commonSelectors.valueLabel).verifyVisibleElement(
-            "have.text",
-            "Value"
-        );
+        cy.get(commonSelectors.valueLabel).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Value");
+        });
         cy.get(commonSelectors.valueInputField)
+            .click()
             .should("be.visible")
             .and("have.value", data.constName);
+        // cy.get(commonSelectors.valueInputField)
+
         cy.get(commonSelectors.cancelButton).verifyVisibleElement(
             "have.text",
             "Cancel"
@@ -206,6 +215,7 @@ describe("Workspace constants", () => {
         );
         cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
 
+        cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
         cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
         cy.get(commonSelectors.cancelButton).click();
@@ -214,16 +224,17 @@ describe("Workspace constants", () => {
         ).verifyVisibleElement("have.text", data.constName);
 
         cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
+        cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
         cy.get(workspaceConstantsSelectors.addConstantButton).click();
         cy.verifyToastMessage(
             commonSelectors.toastMessage,
             "Constant updated successfully"
         );
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constName)
-        ).verifyVisibleElement("have.text", data.newConstvalue);
 
+        cy.get(workspaceConstantsSelectors.constantValue(data.constName))
+            .should("be.visible")
+            .and("have.text", data.newConstvalue);
         cy.get(
             workspaceConstantsSelectors.constDeleteButton(data.constName)
         ).click();
@@ -256,77 +267,74 @@ describe("Workspace constants", () => {
     });
 
     it("should verify the constants resolving value on components and query", () => {
-        cy.get('[data-cy="icon-workspace-constants"]').click();
-        AddNewconstants(data.constantsName, data.constantsValue);
-        cy.get(
-            workspaceConstantsSelectors.constantName(data.constantsName)
-        ).verifyVisibleElement("have.text", data.constantsName);
-        cy.get(
-            workspaceConstantsSelectors.constantValue(data.constantsName)
-        ).verifyVisibleElement("have.text", data.constantsValue);
+        cy.viewport(1200, 1300);
+
+        data.widgetName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
+        data.appName = `${fake.companyName}-App`;
+        data.restapilink = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
+        data.restapiHeaderKey = fake.firstName
+            .toLowerCase()
+            .replaceAll("[^A-Za-z]", "");
+        data.restapiHeaderValue = fake.firstName
+            .toLowerCase()
+            .replaceAll("[^A-Za-z]", "");
+
+        cy.get(commonSelectors.workspaceConstantsIcon).click();
+        AddNewconstants(data.restapilink, "http://localhost:4000/production");
+        AddNewconstants(data.restapiHeaderKey, "customHeader");
+        AddNewconstants(data.restapiHeaderValue, "key=value");
 
         cy.get(commonSelectors.homePageLogo).click();
         cy.wait("@homePage");
-        cy.createApp(data.appName);
+        cy.apiCreateApp(data.appName);
+
+        cy.getCookie("tj_auth_token").then((cookie) => {
+            const headers = {
+                "Tj-Workspace-Id": Cypress.env("workspaceId"),
+                Cookie: `tj_auth_token=${cookie.value}`,
+            };
+            cy.request({
+                method: "GET",
+                url: `http://localhost:3000/api/app-environments/versions?app_id=${Cypress.env(
+                    "appId"
+                )}`,
+                headers: headers,
+            }).then((response) => {
+                const appVersions = response.body.appVersions;
+                const appVersionId = appVersions[0].id;
+                createDataQuery(
+                    appVersionId,
+                    data.restapilink,
+                    data.restapiHeaderKey,
+                    data.restapiHeaderValue
+                );
+            });
+        });
 
-        selectQueryFromLandingPage("runjs", "JavaScript");
-        addInputOnQueryField("runjs", `return constants.${data.constantsName}`);
-        query("preview");
-        verifypreview("raw", "dJ_8Q~BcaMPd");
+        cy.openApp();
 
-        cy.dragAndDropWidget("Text", 550, 350);
-        editAndVerifyWidgetName(data.constantsName, []);
+        cy.get(".custom-toggle-switch>.switch>").eq(3).click();
+
+        cy.waitForAutoSave();
+        cy.dragAndDropWidget("Text", 550, 650);
+        editAndVerifyWidgetName(data.widgetName, []);
         cy.waitForAutoSave();
 
         cy.get(
             '[data-cy="textcomponenttextinput-input-field"]'
-        ).clearAndTypeOnCodeMirror(`{{constants.${data.constantsName}`);
+        ).clearAndTypeOnCodeMirror(`{{queries.restapi1.data.message`);
         cy.forceClickOnCanvas();
         cy.waitForAutoSave();
-
-        common.pinInspector();
-        // cy.get(".tooltip-inner").invoke("hide");
-        cy.get(commonWidgetSelector.sidebarinspector).click();
-        cy.get(commonWidgetSelector.inspectorNodeComponents).click();
-        cy.get(commonWidgetSelector.nodeComponent(data.constantsName)).click();
-        cy.get('[data-cy="inspector-node-text"] > .mx-2').verifyVisibleElement(
-            "have.text",
-            `"dJ_8Q~BcaMPd"`
-        );
-
-        cy.get('[data-cy="inspector-node-constants"] > .node-key').click();
-        cy.get(`[data-cy="inspector-node-${data.constantsName}"] > .node-key`)
-            .eq(1)
-            .verifyVisibleElement("have.text", data.constantsName);
+        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
         cy.get(
-            `[data-cy="inspector-node-${data.constantsName}"] > .mx-2`
-        ).verifyVisibleElement("have.text", `"dJ_8Q~BcaMPd"`);
+            commonWidgetSelector.draggableWidget(data.widgetName)
+        ).verifyVisibleElement("have.text", "Production environment testing");
 
-        cy.get('[data-cy="button-release"]').click();
-        cy.get('[data-cy="yes-button"]').click();
-        cy.verifyToastMessage(commonSelectors.toastMessage, "Version v1 released");
-
-        cy.get(commonWidgetSelector.shareAppButton).click();
-        cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
-        cy.wait(1500);
-        cy.get(commonWidgetSelector.modalCloseButton).click();
-        cy.forceClickOnCanvas();
-        cy.waitForAutoSave();
-        cy.wait(500);
         cy.openInCurrentTab(commonWidgetSelector.previewButton);
         cy.wait(4000);
 
         cy.get(
-            commonWidgetSelector.draggableWidget(data.constantsName)
-        ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
-
-        cy.get('[data-cy="viewer-page-logo"]').click();
-        cy.wait("@homePage");
-        cy.visit(`/applications/${data.slug}`);
-        cy.wait(4000);
-
-        cy.get(
-            commonWidgetSelector.draggableWidget(data.constantsName)
-        ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+            commonWidgetSelector.draggableWidget(data.widgetName)
+        ).verifyVisibleElement("have.text", "Production environment testing");
     });
 });
diff --git a/cypress-tests/cypress/support/utils/dataSource.js b/cypress-tests/cypress/support/utils/dataSource.js
index 29939455c2..8ba7a51019 100644
--- a/cypress-tests/cypress/support/utils/dataSource.js
+++ b/cypress-tests/cypress/support/utils/dataSource.js
@@ -7,7 +7,6 @@ import { dataSourceSelector } from "Selectors/dataSource";
 import { dataSourceText } from "Texts/dataSource";
 import { navigateToAppEditor } from "Support/utils/common";
 
-
 export const verifyCouldnotConnectWithAlert = (dangerText) => {
   cy.get(postgreSqlSelector.connectionFailedText, {
     timeout: 10000,
@@ -133,7 +132,6 @@ export const addQueryAndOpenEditor = (queryName, query, dbName, appName) => {
   });
 };
 
-
 export const verifyValueOnInspector = (queryName, value) => {
   cy.get('[data-cy="inspector-node-queries"]')
     .parent()
@@ -157,6 +155,40 @@ export const verifyValueOnInspector = (queryName, value) => {
 export const selectDatasource = (datasourceName) => {
   cy.get(dataSourceSelector.addedDsSearchIcon).click();
   cy.clearAndType(dataSourceSelector.AddedDsSearchBar, datasourceName);
-  cy.wait(500)
-  cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`).click()
-}
\ No newline at end of file
+  cy.wait(500);
+  cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`).click();
+};
+
+export const createDataQuery = (versionId, url, key, value) => {
+  cy.getCookie("tj_auth_token").then((cookie) => {
+    const headers = {
+      "Tj-Workspace-Id": Cypress.env("workspaceId"),
+      Cookie: `tj_auth_token=${cookie.value}`,
+    };
+    cy.request({
+      method: "POST",
+      url: "http://localhost:3000/api/data_queries",
+      headers: headers,
+      body: {
+        app_id: Cypress.env("appId"),
+        app_version_id: versionId,
+        name: "restapi1",
+        kind: "restapi",
+        options: {
+          method: "get",
+          url: `{{constants.${url}}}`,
+          url_params: [["", ""]],
+          headers: [[`{{constants.${key}}}`, `{{constants.${value}}}`]],
+          body: [["", ""]],
+          json_body: null,
+          body_toggle: false,
+          transformationLanguage: "javascript",
+          enableTransformation: false,
+        },
+        data_source_id: null,
+      },
+    }).then((response) => {
+      expect(response.status).to.equal(201);
+    });
+  });
+};
diff --git a/cypress-tests/cypress/support/utils/workspaceConstants.js b/cypress-tests/cypress/support/utils/workspaceConstants.js
index 5e874b016a..3634c91908 100644
--- a/cypress-tests/cypress/support/utils/workspaceConstants.js
+++ b/cypress-tests/cypress/support/utils/workspaceConstants.js
@@ -7,13 +7,17 @@ import * as common from "Support/utils/common";
 
 export const contantsNameValidation = (value, error) => {
     cy.clearAndType(commonSelectors.nameInputField, value);
-    cy.get(commonSelectors.nameErrorText).verifyVisibleElement("have.text", error)
+    cy.get(commonSelectors.nameErrorText).verifyVisibleElement(
+        "have.text",
+        error
+    );
     cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
-}
+};
 
 export const AddNewconstants = (name, value) => {
     cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
     cy.clearAndType(commonSelectors.nameInputField, name);
+    cy.get(commonSelectors.valueInputField).click();
     cy.clearAndType(commonSelectors.valueInputField, value);
     cy.get(workspaceConstantsSelectors.addConstantButton).click();
-}
\ No newline at end of file
+};

From d3d620243bc34baac3c4e3ec6ef1d8301111f9c1 Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Tue, 14 May 2024 14:51:28 +0530
Subject: [PATCH 12/12] fix value alignment

---
 frontend/src/ManageOrgConstants/ConstantTable.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ManageOrgConstants/ConstantTable.jsx b/frontend/src/ManageOrgConstants/ConstantTable.jsx
index 16300d8659..334360f1b9 100644
--- a/frontend/src/ManageOrgConstants/ConstantTable.jsx
+++ b/frontend/src/ManageOrgConstants/ConstantTable.jsx
@@ -81,7 +81,7 @@ const ConstantTable = ({
                           : constant.name}
                       </span>
                     </td>
-                    <td className="text-muted p-3">
+                    <td className="text-muted p-3" style={{ width: '350px' }}>
                       <a
                         className="text-reset user-email"
                         data-cy={`${constant.name.toLowerCase().replace(/\s+/g, '-')}-workspace-constant-value`}