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

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
+      <FormGroup setting={setting}>
-        className="admin-settings-form-group-label pb-2"
+        <StyledButton
-        color="var(--ads-v2-color-fg)"
+          data-testid="admin-settings-button"
-        data-testid="admin-settings-form-group-label"
+          isDisabled={setting.isDisabled && setting.isDisabled(settings)}
-        kind="heading-xs"
+          kind="secondary"
-        renderAs="p"
+          onClick={() => {
-      >
+            if (setting.action) {
-        {setting.label}
+              setting.action(dispatch, settings);
-      </Text>
+            }
-      <StyledButton
+          }}
-        data-testid="admin-settings-button"
+          size="md"
-        isDisabled={setting.isDisabled && setting.isDisabled(settings)}
+        >
-        kind="secondary"
+          {setting.text}
-        onClick={() => {
+        </StyledButton>
-          if (setting.action) {
+      </FormGroup>
-            setting.action(dispatch, settings);
-          }
-        }}
-        size="md"
-      >
-        {setting.text}
-      </StyledButton>
     </ButtonWrapper>
   );
 }

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">
+      <FormGroup setting={setting}>
-        <Text
+        <Field
-          className="admin-settings-form-group-label pt-2 pb-2"
+          component={FieldCheckboxWithCheckboxText({
-          color="var(--ads-v2-color-fg)"
+            label: setting.label,
-          data-testid="admin-settings-form-group-label"
+            text: setting.text || "",
-          kind="heading-xs"
+            id: setting.id,
-          renderAs="p"
+            isDisabled: setting.isDisabled && setting.isDisabled(settings),
-        >
+            isFeatureEnabled: setting.isFeatureEnabled,
-          {setting.label}
+            labelSuffix: setting.textSuffix,
-        </Text>
+            isPropertyDisabled: isTenantConfig(setting.id)
-        {setting.isFeatureEnabled === false && <BusinessTag />}
+              ? false
-      </div>
+              : !setting.name?.toLowerCase().includes("enable"),
-      <Field
+          })}
-        component={FieldCheckboxWithCheckboxText({
+          name={setting.name}
-          label: setting.label,
+        />
-          text: setting.text || "",
+      </FormGroup>
-          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}
-      />
     </StyledFieldCheckboxGroup>
   );
 }

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 && (

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>
   );
 }

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 { FormGroup, 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;
-`;
 
 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>
   );
 }