From 68ca09b32446304db692d4eb3d5e1486e8631133 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 24 Aug 2023 18:02:51 +0530 Subject: [PATCH] fix: Updating UI for members page and admin settings left pane upgrade tags (#26622) ## Description - Updating UI for members page to remove the borders between rows. - Updating the condition for upgrade tags on the left pane of admin settings, to use feature flags instead. #### PR fixes following issue(s) Fixes [#26627](https://github.com/appsmithorg/appsmith/issues/26627) #### Type of change - Bug fix (non-breaking change which fixes an issue) - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [x] 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/pages/AdminSettings/LeftPane.tsx | 11 +-- .../AdminSettings/config/auditLogsConfig.ts | 2 +- .../config/authentication/AuthPage.tsx | 1 - .../AdminSettings/config/branding/index.tsx | 1 - .../ce/pages/AdminSettings/config/general.tsx | 2 +- .../AdminSettings/config/provisioning.ts | 2 +- .../ce/pages/AdminSettings/config/types.ts | 4 +- .../pages/AdminSettings/config/userlisting.ts | 2 +- app/client/src/ce/pages/workspace/Members.tsx | 80 ++++++++++--------- .../src/pages/Settings/FormGroup/Checkbox.tsx | 6 +- .../pages/Settings/config/ConfigFactory.ts | 1 - 11 files changed, 57 insertions(+), 55 deletions(-) diff --git a/app/client/src/ce/pages/AdminSettings/LeftPane.tsx b/app/client/src/ce/pages/AdminSettings/LeftPane.tsx index e1b8acaa4a..bc666cc74d 100644 --- a/app/client/src/ce/pages/AdminSettings/LeftPane.tsx +++ b/app/client/src/ce/pages/AdminSettings/LeftPane.tsx @@ -113,13 +113,13 @@ export function Categories({ }); }; - const onClickHandler = (category: string, needsUpgrade: boolean) => { + const onClickHandler = (category: string, showUpgradeTag: boolean) => { if (category === "general") { dispatch({ type: ReduxActionTypes.FETCH_ADMIN_SETTINGS, }); } - if (needsUpgrade) { + if (showUpgradeTag) { triggerAnalytics(category); } }; @@ -131,6 +131,7 @@ export function Categories({ !!currentSubCategory && showSubCategory ? currentSubCategory == config.slug : currentCategory == config.slug; + const showUpgradeTag = config?.isFeatureEnabled === false; return ( - onClickHandler(config.slug, config?.needsUpgrade || false) + onClickHandler(config.slug, showUpgradeTag || false) } to={ !parentCategory @@ -150,13 +151,13 @@ export function Categories({ }) } > - {config?.needsUpgrade ? ( + {showUpgradeTag ? ( ) : ( config?.icon && )} {config.title} - {config?.needsUpgrade && + {showUpgradeTag && (config?.isEnterprise ? : )} {showSubCategory && ( diff --git a/app/client/src/ce/pages/AdminSettings/config/auditLogsConfig.ts b/app/client/src/ce/pages/AdminSettings/config/auditLogsConfig.ts index 5d0b5a2ff4..ead2de6cc5 100644 --- a/app/client/src/ce/pages/AdminSettings/config/auditLogsConfig.ts +++ b/app/client/src/ce/pages/AdminSettings/config/auditLogsConfig.ts @@ -14,5 +14,5 @@ export const config: AdminConfigType = { component: AuditLogsUpgradePage, title: "Audit logs", canSave: false, - needsUpgrade: true, + isFeatureEnabled: false, } as AdminConfigType; diff --git a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx index 96edfc5251..d67ae142aa 100644 --- a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx @@ -90,7 +90,6 @@ export type AuthMethodType = { label: string; subText?: string; image?: any; - needsUpgrade?: boolean; isConnected?: boolean; calloutBanner?: banner; icon?: string; diff --git a/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx b/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx index 7d0e669868..4c4c453eb5 100644 --- a/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx @@ -20,5 +20,4 @@ export const config: AdminConfigType = { icon: "pantone", component: BrandingPage, isFeatureEnabled: isBrandingEnabled(featureFlags), - needsUpgrade: true, }; diff --git a/app/client/src/ce/pages/AdminSettings/config/general.tsx b/app/client/src/ce/pages/AdminSettings/config/general.tsx index afdbf7fcf5..385eb083f4 100644 --- a/app/client/src/ce/pages/AdminSettings/config/general.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/general.tsx @@ -78,7 +78,7 @@ export const APPSMITH_HIDE_WATERMARK_SETTING: Setting = { controlType: SettingTypes.CHECKBOX, label: "Appsmith watermark", text: "Show Appsmith watermark", - needsUpgrade: true, + isFeatureEnabled: false, isDisabled: () => true, textSuffix: , }; diff --git a/app/client/src/ce/pages/AdminSettings/config/provisioning.ts b/app/client/src/ce/pages/AdminSettings/config/provisioning.ts index a17073cb0c..29c950a6ca 100644 --- a/app/client/src/ce/pages/AdminSettings/config/provisioning.ts +++ b/app/client/src/ce/pages/AdminSettings/config/provisioning.ts @@ -14,6 +14,6 @@ export const config: AdminConfigType = { component: ProvisioningUpgradePage, title: "Provisioning", canSave: false, - needsUpgrade: true, + isFeatureEnabled: false, isEnterprise: true, } as AdminConfigType; diff --git a/app/client/src/ce/pages/AdminSettings/config/types.ts b/app/client/src/ce/pages/AdminSettings/config/types.ts index ce824406a6..2b30ab4c74 100644 --- a/app/client/src/ce/pages/AdminSettings/config/types.ts +++ b/app/client/src/ce/pages/AdminSettings/config/types.ts @@ -82,7 +82,7 @@ export type Setting = ControlType & { formName?: string; fieldName?: string; dropdownOptions?: Partial[]; - needsUpgrade?: boolean; + isFeatureEnabled?: boolean; tooltip?: string; }; @@ -95,7 +95,6 @@ export interface Category { children?: Category[]; icon?: string; categoryType: string; - needsUpgrade?: boolean; isEnterprise?: boolean; isFeatureEnabled?: boolean; } @@ -136,7 +135,6 @@ export type AdminConfigType = { isConnected?: boolean; needsRefresh?: boolean; icon?: string; - needsUpgrade?: boolean; categoryType: CategoryType; isEnterprise?: boolean; isFeatureEnabled?: boolean; diff --git a/app/client/src/ce/pages/AdminSettings/config/userlisting.ts b/app/client/src/ce/pages/AdminSettings/config/userlisting.ts index 421aa33f97..ae560a4c01 100644 --- a/app/client/src/ce/pages/AdminSettings/config/userlisting.ts +++ b/app/client/src/ce/pages/AdminSettings/config/userlisting.ts @@ -14,5 +14,5 @@ export const config: AdminConfigType = { component: AccessControlUpgradePage, title: "Access Control", canSave: false, - needsUpgrade: true, + isFeatureEnabled: false, } as AdminConfigType; diff --git a/app/client/src/ce/pages/workspace/Members.tsx b/app/client/src/ce/pages/workspace/Members.tsx index d7350be9a9..5cbd6f2f9c 100644 --- a/app/client/src/ce/pages/workspace/Members.tsx +++ b/app/client/src/ce/pages/workspace/Members.tsx @@ -52,52 +52,54 @@ export type PageProps = RouteComponentProps<{ export const MembersWrapper = styled.div<{ isMobile?: boolean; }>` - ${(props) => (props.isMobile ? "width: 100%; margin: auto" : null)} - table { - table-layout: fixed; + &.members-wrapper { + ${(props) => (props.isMobile ? "width: 100%; margin: auto" : null)} + table { + table-layout: fixed; - thead { - z-index: 1; - tr { - border-bottom: 1px solid var(--ads-v2-color-border); - th { - font-size: 14px; - font-weight: 500; - line-height: 1.5; - color: var(--ads-v2-color-fg); - padding: 8px 20px; + thead { + z-index: 1; + tr { + border-bottom: 1px solid var(--ads-v2-color-border); + th { + font-size: 14px; + font-weight: 500; + line-height: 1.5; + color: var(--ads-v2-color-fg); + padding: 8px 20px; - &:last-child { - width: 120px; - } + &:last-child { + width: 120px; + } - svg { - margin: auto 8px; - display: initial; + svg { + margin: auto 8px; + display: initial; + } } } } - } - tbody { - tr { - td { - word-break: break-word; - padding: 0 var(--ads-spaces-9); - border-bottom: none; - height: 40px; + tbody { + tr { + td { + word-break: break-word; + padding: 0 var(--ads-spaces-9); + border-bottom: none; + height: 40px; - &:first-child { - text-align: left; - } + &:first-child { + text-align: left; + } - .ads-v2-select { - width: fit-content; - > .rc-select-selector { - border: none; + .ads-v2-select { + width: fit-content; + > .rc-select-selector { + border: none; - > .rc-select-selection-item { - padding-left: 0; + > .rc-select-selection-item { + padding-left: 0; + } } } } @@ -472,7 +474,11 @@ export default function MemberSettings(props: PageProps) { }; return ( - + <> {!isMobile && ( {setting.label} - {setting.needsUpgrade && } + {setting.isFeatureEnabled === false && }