From 8fd8e32cd25142f1b2bad297a16816dad9a0914e Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 16 Oct 2023 23:13:38 +0530 Subject: [PATCH] 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 --- .../pages/AdminSettings/FormGroup/Button.tsx | 50 ++++++++--------- .../AdminSettings/FormGroup/Checkbox.tsx | 55 +++++++++---------- .../pages/AdminSettings/FormGroup/Common.tsx | 14 ++++- .../pages/AdminSettings/FormGroup/Radio.tsx | 26 +++++---- .../AdminSettings/FormGroup/TextInput.tsx | 27 ++------- 5 files changed, 81 insertions(+), 91 deletions(-) diff --git a/app/client/src/pages/AdminSettings/FormGroup/Button.tsx b/app/client/src/pages/AdminSettings/FormGroup/Button.tsx index e5c3dfbcd6..c1bef4609f 100644 --- 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 ( - - {setting.label} - - { - if (setting.action) { - setting.action(dispatch, settings); - } - }} - size="md" - > - {setting.text} - + + { + if (setting.action) { + setting.action(dispatch, settings); + } + }} + size="md" + > + {setting.text} + + ); } diff --git a/app/client/src/pages/AdminSettings/FormGroup/Checkbox.tsx b/app/client/src/pages/AdminSettings/FormGroup/Checkbox.tsx index 60c38c818b..5d9ad0ba7a 100644 --- 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 ( -
- - {setting.label} - - {setting.isFeatureEnabled === false && } -
- + + + ); } diff --git a/app/client/src/pages/AdminSettings/FormGroup/Common.tsx b/app/client/src/pages/AdminSettings/FormGroup/Common.tsx index 0198b5bc6b..254c3e03de 100644 --- 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" > - + {setting.label && ( )} +
+ {setting.isFeatureEnabled === false && + (setting.isEnterprise === true ? ( + + ) : ( + + ))} +
{children} {setting.subText && ( diff --git a/app/client/src/pages/AdminSettings/FormGroup/Radio.tsx b/app/client/src/pages/AdminSettings/FormGroup/Radio.tsx index 198d8e66d2..81e3624bbe 100644 --- 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 ( -
- - {setting.label} - -
+ ); } diff --git a/app/client/src/pages/AdminSettings/FormGroup/TextInput.tsx b/app/client/src/pages/AdminSettings/FormGroup/TextInput.tsx index ecbc2b57e7..2662119630 100644 --- 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 ? ( - -
{setting.label}
- {setting.isFeatureEnabled === false && - (setting.isEnterprise === true ? : )} - - ) : ( - "" - ); return ( -
setting.placeholder || "")} type={setting.controlSubType} /> -
+ ); }