From a866aa47c92e2013ef9dc6cf6c70ff583e8e76ff Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Wed, 14 Jun 2023 19:39:38 +0530
Subject: [PATCH] chore: Optimizing the solution for supporting tenant config
 on admin settings (#24454)

## Description

Optimizing the solution for supporting tenant config on admin settings

#### PR fixes following issue(s)
Fixes # (issue number)

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

## Testing

#### How Has This Been Tested?
- [x] Manual
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 .../src/ce/constants/tenantConstants.ts       |  1 +
 app/client/src/ce/reducers/settingsReducer.ts | 12 ++-
 .../src/ce/utils/adminSettingsHelpers.ts      |  5 +-
 .../formControls/KeyValueArrayControl.tsx     | 78 ++++++++++++++-----
 .../src/ee/constants/tenantConstants.ts       |  1 +
 .../src/pages/Settings/SettingsForm.tsx       | 11 +--
 6 files changed, 72 insertions(+), 36 deletions(-)
 create mode 100644 app/client/src/ce/constants/tenantConstants.ts
 create mode 100644 app/client/src/ee/constants/tenantConstants.ts

diff --git a/app/client/src/ce/constants/tenantConstants.ts b/app/client/src/ce/constants/tenantConstants.ts
new file mode 100644
index 0000000000..8d8688921d
--- /dev/null
+++ b/app/client/src/ce/constants/tenantConstants.ts
@@ -0,0 +1 @@
+export const tenantConfigConnection: string[] = [];
diff --git a/app/client/src/ce/reducers/settingsReducer.ts b/app/client/src/ce/reducers/settingsReducer.ts
index 5ed6be20a5..6c33f54324 100644
--- a/app/client/src/ce/reducers/settingsReducer.ts
+++ b/app/client/src/ce/reducers/settingsReducer.ts
@@ -5,7 +5,7 @@ import {
 } from "@appsmith/constants/ReduxActionConstants";
 import { createReducer } from "utils/ReducerUtils";
 import type { TenantReduxState } from "./tenantReducer";
-import { tenantConfigConnection } from "@appsmith/utils/adminSettingsHelpers";
+import { tenantConfigConnection } from "@appsmith/constants/tenantConstants";
 
 export const initialState: SettingsReduxState = {
   isLoading: false,
@@ -48,10 +48,9 @@ export const handlers = {
     action: ReduxAction<TenantReduxState<any>>,
   ) => {
     const configs: any = {};
-    Object.keys(tenantConfigConnection).forEach((key) => {
+    tenantConfigConnection.forEach((key: string) => {
       if (action.payload?.tenantConfiguration?.hasOwnProperty(key)) {
-        configs[tenantConfigConnection[key]] =
-          action.payload?.tenantConfiguration?.[key];
+        configs[key] = action.payload?.tenantConfiguration?.[key];
       }
     });
     return {
@@ -68,10 +67,9 @@ export const handlers = {
     action: ReduxAction<TenantReduxState<any>>,
   ) => {
     const configs: any = {};
-    Object.keys(tenantConfigConnection).forEach((key) => {
+    tenantConfigConnection.forEach((key: string) => {
       if (action.payload?.tenantConfiguration?.hasOwnProperty(key)) {
-        configs[tenantConfigConnection[key]] =
-          action.payload?.tenantConfiguration?.[key];
+        configs[key] = action.payload?.tenantConfiguration?.[key];
       }
     });
     return {
diff --git a/app/client/src/ce/utils/adminSettingsHelpers.ts b/app/client/src/ce/utils/adminSettingsHelpers.ts
index 55fccb903a..591e7328b6 100644
--- a/app/client/src/ce/utils/adminSettingsHelpers.ts
+++ b/app/client/src/ce/utils/adminSettingsHelpers.ts
@@ -1,3 +1,4 @@
+import { tenantConfigConnection } from "@appsmith/constants/tenantConstants";
 import { ADMIN_SETTINGS_CATEGORY_DEFAULT_PATH } from "constants/routes";
 import type { User } from "constants/userConstants";
 
@@ -44,9 +45,7 @@ export const getLoginUrl = (method: string): string => {
 };
 
 export const isTenantConfig = (name: string): boolean => {
-  const fields: string[] = [];
+  const fields: string[] = tenantConfigConnection;
 
   return fields.includes(name);
 };
-
-export const tenantConfigConnection: any = {};
diff --git a/app/client/src/components/formControls/KeyValueArrayControl.tsx b/app/client/src/components/formControls/KeyValueArrayControl.tsx
index f347c336c3..63e25718bb 100644
--- a/app/client/src/components/formControls/KeyValueArrayControl.tsx
+++ b/app/client/src/components/formControls/KeyValueArrayControl.tsx
@@ -13,7 +13,7 @@ import DynamicTextField from "components/editorComponents/form/fields/DynamicTex
 import type { InputProps } from "design-system";
 import { setDefaultKeyValPairFlag } from "actions/datasourceActions";
 import { useDispatch } from "react-redux";
-import { Button, Input, Text } from "design-system";
+import { Button, Icon, Input, Text, Tooltip } from "design-system";
 export interface KeyValueArrayControlProps extends ControlProps {
   name: string;
   label: string;
@@ -23,6 +23,10 @@ export interface KeyValueArrayControlProps extends ControlProps {
   extraData?: ControlData[];
   isRequired?: boolean;
   showHeader?: boolean;
+  headerTooltips?: {
+    key?: string;
+    value?: string;
+  };
 }
 
 const FormRowWithLabel = styled.div`
@@ -54,20 +58,26 @@ const StyledButton = styled(Button)`
 `;
 const AddMoreButton = styled(Button)``;
 
-const Flex = styled.div`
-  flex: 1;
-`;
-
 const FlexContainer = styled.div`
   display: flex;
   align-items: center;
   width: calc(100% - 30px);
+  margin-bottom: 8px;
+
   .key-value {
-    padding: 6px 0px 6px 0px;
-    border-bottom: 0px;
-  }
-  .key-value:nth-child(2) {
-    margin-left: 0;
+    line-height: 1;
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    .ads-v2-icon {
+      cursor: pointer;
+      margin-left: 8px;
+    }
+
+    label:first-child {
+      font-weight: normal;
+    }
   }
 `;
 
@@ -128,12 +138,44 @@ function KeyValueRow(
     <>
       {props.showHeader && (
         <FlexContainer>
-          <Flex className="key-value">
-            <Text kind="body-m">Key</Text>
-          </Flex>
-          <Flex className="key-value">
-            <Text kind="body-m">Value</Text>
-          </Flex>
+          <div className="key-value">
+            <Text kind="body-m" renderAs="label">
+              Key
+            </Text>
+            {props.headerTooltips && (
+              <Tooltip
+                content={props.headerTooltips.key}
+                placement="right"
+                trigger="hover"
+              >
+                <Icon
+                  className={"help-icon"}
+                  color="var(--ads-v2-color-fg)"
+                  name="question-line"
+                  size="md"
+                />
+              </Tooltip>
+            )}
+          </div>
+          <div className="key-value">
+            <Text kind="body-m" renderAs="label">
+              Value
+            </Text>
+            {props.headerTooltips && (
+              <Tooltip
+                content={props.headerTooltips.value}
+                placement="right"
+                trigger="hover"
+              >
+                <Icon
+                  className={"help-icon"}
+                  color="var(--ads-v2-color-fg)"
+                  name="question-line"
+                  size="md"
+                />
+              </Tooltip>
+            )}
+          </div>
         </FlexContainer>
       )}
       {props.fields.map((field: any, index: number) => {
@@ -161,7 +203,7 @@ function KeyValueRow(
                   isKeyFieldValid: isKeyFieldValid,
                   placeholder: props.extraData
                     ? props.extraData[1]?.placeholderText
-                    : "",
+                    : `Key ${index + 1}`,
                   isRequired: extraData[0]?.isRequired,
                   name: keyTextFieldName,
                 }}
@@ -181,7 +223,7 @@ function KeyValueRow(
                       defaultValue: extraData[1]?.initialValue,
                       placeholder: props.extraData
                         ? props.extraData[1]?.placeholderText
-                        : "",
+                        : `Value ${index + 1}`,
                       name: valueTextFieldName,
                       isRequired: extraData[1]?.isRequired,
                     }}
diff --git a/app/client/src/ee/constants/tenantConstants.ts b/app/client/src/ee/constants/tenantConstants.ts
new file mode 100644
index 0000000000..2866f0898e
--- /dev/null
+++ b/app/client/src/ee/constants/tenantConstants.ts
@@ -0,0 +1 @@
+export * from "ce/constants/tenantConstants";
diff --git a/app/client/src/pages/Settings/SettingsForm.tsx b/app/client/src/pages/Settings/SettingsForm.tsx
index 1364ca810a..4ae902a650 100644
--- a/app/client/src/pages/Settings/SettingsForm.tsx
+++ b/app/client/src/pages/Settings/SettingsForm.tsx
@@ -32,7 +32,6 @@ import {
 import {
   isTenantConfig,
   saveAllowed,
-  tenantConfigConnection,
 } from "@appsmith/utils/adminSettingsHelpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import {
@@ -50,6 +49,7 @@ import {
   getThirdPartyAuths,
 } from "@appsmith/selectors/tenantSelectors";
 import { updateTenantConfig } from "@appsmith/actions/tenantActions";
+import { tenantConfigConnection } from "@appsmith/constants/tenantConstants";
 
 type FormProps = {
   settings: Record<string, string>;
@@ -70,10 +70,6 @@ function getSettingsConfig(category: string, subCategory?: string) {
   return AdminConfig.get(subCategory ?? category);
 }
 
-function getKeyByValue(object: any, value: string) {
-  return Object.keys(object).find((key) => object[key] === value);
-}
-
 export function SettingsForm(
   props: InjectedFormProps & RouteComponentProps & FormProps,
 ) {
@@ -111,9 +107,8 @@ export function SettingsForm(
       // only tenant settings
       const config: any = {};
       for (const each in props.settings) {
-        const key = getKeyByValue(tenantConfigConnection, each) || "";
-        if (key) {
-          config[key] = props.settings[each];
+        if (tenantConfigConnection.includes(each)) {
+          config[each] = props.settings[each];
         }
       }
       dispatch(