fix: Refactoring the code for label wrapper on admin settings (#28123)

## Description Refactoring the code for label wrapper on admin settings #### PR fixes following issue(s) Fixes [#28099](https://github.com/appsmithorg/appsmith/issues/28099) #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] 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
2023-10-16 23:13:38 +05:30 · 2023-10-16 23:13:38 +05:30 · 8fd8e32cd2
commit 8fd8e32cd2
parent 018b845af7
5 changed files with 81 additions and 91 deletions
--- a/app/client/src/pages/AdminSettings/FormGroup/Button.tsx
+++ b/app/client/src/pages/AdminSettings/FormGroup/Button.tsx
@ -1,14 +1,21 @@
 import { SETTINGS_FORM_NAME } from "@appsmith/constants/forms";
 import React from "react";
-import { Button, Text } from "design-system";
+import { Button } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { getFormValues } from "redux-form";
 import styled from "styled-components";
-import type { SettingComponentProps } from "./Common";
+import { FormGroup, type SettingComponentProps } from "./Common";

 const ButtonWrapper = styled.div`
  width: 357px;
-  margin-bottom: 8px;
+
+  .styled-label {
+    padding: 0 0 0.5rem;
+  }
+
+  .admin-settings-form-group-label {
+    font-weight: var(--ads-v2-h5-font-weight);
+  }
 `;

 export const StyledButton = styled(Button)`
@ -22,28 +29,21 @@ export default function ButtonComponent({ setting }: SettingComponentProps) {
  const settings = useSelector(formValuesSelector);
  return (
    <ButtonWrapper>
-      <Text
-        className="admin-settings-form-group-label pb-2"
-        color="var(--ads-v2-color-fg)"
-        data-testid="admin-settings-form-group-label"
-        kind="heading-xs"
-        renderAs="p"
-      >
-        {setting.label}
-      </Text>
-      <StyledButton
-        data-testid="admin-settings-button"
-        isDisabled={setting.isDisabled && setting.isDisabled(settings)}
-        kind="secondary"
-        onClick={() => {
-          if (setting.action) {
-            setting.action(dispatch, settings);
-          }
-        }}
-        size="md"
-      >
-        {setting.text}
-      </StyledButton>
+      <FormGroup setting={setting}>
+        <StyledButton
+          data-testid="admin-settings-button"
+          isDisabled={setting.isDisabled && setting.isDisabled(settings)}
+          kind="secondary"
+          onClick={() => {
+            if (setting.action) {
+              setting.action(dispatch, settings);
+            }
+          }}
+          size="md"
+        >
+          {setting.text}
+        </StyledButton>
+      </FormGroup>
    </ButtonWrapper>
  );
 }
--- a/app/client/src/pages/AdminSettings/FormGroup/Checkbox.tsx
+++ b/app/client/src/pages/AdminSettings/FormGroup/Checkbox.tsx
@ -2,13 +2,12 @@ import React, { memo } from "react";
 import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import { Field, getFormValues } from "redux-form";
 import styled from "styled-components";
-import type { SettingComponentProps } from "./Common";
+import { FormGroup, type SettingComponentProps } from "./Common";
 import type { FormTextFieldProps } from "components/utils/ReduxFormTextField";
-import { Checkbox, Text } from "design-system";
+import { Checkbox } from "design-system";
 import { useSelector } from "react-redux";
 import { SETTINGS_FORM_NAME } from "@appsmith/constants/forms";
 import { isTenantConfig } from "@appsmith/utils/adminSettingsHelpers";
-import BusinessTag from "components/BusinessTag";

 const CheckboxWrapper = styled.div`
  display: grid;
@ -65,7 +64,13 @@ function FieldCheckboxWithCheckboxText(props: CheckboxProps) {
 }

 const StyledFieldCheckboxGroup = styled.div`
-  margin-bottom: 8px;
+  .styled-label {
+    padding: 0 0 0.5rem;
+  }
+
+  .admin-settings-form-group-label {
+    font-weight: var(--ads-v2-h5-font-weight);
+  }
 `;

 const formValuesSelector = getFormValues(SETTINGS_FORM_NAME);
@ -75,32 +80,22 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {

  return (
    <StyledFieldCheckboxGroup>
-      <div className="flex gap-1 items-center">
-        <Text
-          className="admin-settings-form-group-label pt-2 pb-2"
-          color="var(--ads-v2-color-fg)"
-          data-testid="admin-settings-form-group-label"
-          kind="heading-xs"
-          renderAs="p"
-        >
-          {setting.label}
-        </Text>
-        {setting.isFeatureEnabled === false && <BusinessTag />}
-      </div>
-      <Field
-        component={FieldCheckboxWithCheckboxText({
-          label: setting.label,
-          text: setting.text || "",
-          id: setting.id,
-          isDisabled: setting.isDisabled && setting.isDisabled(settings),
-          isFeatureEnabled: setting.isFeatureEnabled,
-          labelSuffix: setting.textSuffix,
-          isPropertyDisabled: isTenantConfig(setting.id)
-            ? false
-            : !setting.name?.toLowerCase().includes("enable"),
-        })}
-        name={setting.name}
-      />
+      <FormGroup setting={setting}>
+        <Field
+          component={FieldCheckboxWithCheckboxText({
+            label: setting.label,
+            text: setting.text || "",
+            id: setting.id,
+            isDisabled: setting.isDisabled && setting.isDisabled(settings),
+            isFeatureEnabled: setting.isFeatureEnabled,
+            labelSuffix: setting.textSuffix,
+            isPropertyDisabled: isTenantConfig(setting.id)
+              ? false
+              : !setting.name?.toLowerCase().includes("enable"),
+          })}
+          name={setting.name}
+        />
+      </FormGroup>
    </StyledFieldCheckboxGroup>
  );
 }
--- a/app/client/src/pages/AdminSettings/FormGroup/Common.tsx
+++ b/app/client/src/pages/AdminSettings/FormGroup/Common.tsx
@ -3,6 +3,8 @@ import React from "react";
 import styled from "styled-components";
 import { Icon, Tooltip, Text } from "design-system";
 import type { Setting } from "@appsmith/pages/AdminSettings/config/types";
+import EnterpriseTag from "components/EnterpriseTag";
+import BusinessTag from "components/BusinessTag";

 interface FieldHelperProps {
  setting: Setting;
@ -28,6 +30,8 @@ export const StyledFormGroup = styled.div`

 export const StyledLabel = styled.div`
  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
 `;

 export const StyledSubtext = styled(Text)`
@ -48,7 +52,7 @@ export function FormGroup({ children, className, setting }: FieldHelperProps) {
      className={`${className}`}
      data-testid="admin-settings-form-group"
    >
-      <StyledLabel>
+      <StyledLabel className="styled-label">
        {setting.label && (
          <Text
            className="admin-settings-form-group-label"
@ -73,6 +77,14 @@ export function FormGroup({ children, className, setting }: FieldHelperProps) {
            />
          </Tooltip>
        )}
+        <div className="ml-2">
+          {setting.isFeatureEnabled === false &&
+            (setting.isEnterprise === true ? (
+              <EnterpriseTag />
+            ) : (
+              <BusinessTag />
+            ))}
+        </div>
      </StyledLabel>
      {children}
      {setting.subText && (
--- a/app/client/src/pages/AdminSettings/FormGroup/Radio.tsx
+++ b/app/client/src/pages/AdminSettings/FormGroup/Radio.tsx
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import type { ReactElement } from "react";
 import { FieldError } from "design-system-old";
 import { Popover2 } from "@blueprintjs/popover2";
-import type { SettingComponentProps } from "./Common";
+import { FormGroup, type SettingComponentProps } from "./Common";
 import type { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import { Field } from "redux-form";
 import styled, { createGlobalStyle } from "styled-components";
@ -87,6 +87,16 @@ const PopoverStyles = createGlobalStyle`
  }
 `;

+const StyledFormGroup = styled(FormGroup)`
+  .styled-label {
+    padding: 0 0 0.5rem;
+  }
+
+  .admin-settings-form-group-label {
+    font-weight: var(--ads-v2-h5-font-weight);
+  }
+`;
+
 type RadioGroupProps = SettingComponentProps;

 function RadioFieldWrapper(
@ -201,20 +211,12 @@ export default function RadioField({ setting }: RadioGroupProps) {
  const controlTypeProps = setting.controlTypeProps as RadioOptionProps;

  return (
-    <div
+    <StyledFormGroup
      className={`t--admin-settings-radio t--admin-settings-${
        setting.name || setting.id
      }`}
+      setting={setting}
    >
-      <Text
-        className="admin-settings-form-group-label pt-2 pb-4"
-        color="var(--ads-v2-color-fg)"
-        data-testid="admin-settings-form-group-label"
-        kind="heading-xs"
-        renderAs="p"
-      >
-        {setting.label}
-      </Text>
      <Field
        component={RadioFieldWrapper}
        {...controlTypeProps}
@ -222,6 +224,6 @@ export default function RadioField({ setting }: RadioGroupProps) {
        name={setting.name}
        parse={setting.parse}
      />
-    </div>
+    </StyledFormGroup>
  );
 }
--- a/app/client/src/pages/AdminSettings/FormGroup/TextInput.tsx
+++ b/app/client/src/pages/AdminSettings/FormGroup/TextInput.tsx
@ -1,42 +1,23 @@
 import FormTextField from "components/utils/ReduxFormTextField";
 import { createMessage } from "@appsmith/constants/messages";
 import React from "react";
-import type { SettingComponentProps } from "./Common";
-import BusinessTag from "components/BusinessTag";
-import EnterpriseTag from "components/EnterpriseTag";
-import styled from "styled-components";
-
-const LabelWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
+import { FormGroup, type SettingComponentProps } from "./Common";

 export default function TextInput({ setting }: SettingComponentProps) {
-  const inputLabel = setting.label ? (
-    <LabelWrapper>
-      <section>{setting.label} </section>
-      {setting.isFeatureEnabled === false &&
-        (setting.isEnterprise === true ? <EnterpriseTag /> : <BusinessTag />)}
-    </LabelWrapper>
-  ) : (
-    ""
-  );
  return (
-    <div
+    <FormGroup
      className={`t--admin-settings-text-input t--admin-settings-${
        setting.name || setting.id
      } mb-4`}
+      setting={setting}
    >
      <FormTextField
-        description={setting.subText || ""}
        disabled={setting.isFeatureEnabled === false}
        isRequired={setting.isRequired}
-        label={inputLabel}
        name={setting.name || setting.id || ""}
        placeholder={createMessage(() => setting.placeholder || "")}
        type={setting.controlSubType}
      />
-    </div>
+    </FormGroup>
  );
 }