From dbe388441702c54179ce3ab482a0578693c4ee50 Mon Sep 17 00:00:00 2001 From: Dipyaman Biswas Date: Wed, 16 Aug 2023 15:51:04 +0530 Subject: [PATCH] feat: one click code splitting - Branding, SSO (#25231) ## Description Adds Support to show different versions of the following pages based on the plan the user is subscribed to. -Branding -SSO #### PR fixes following issue(s) Fixes #https://github.com/appsmithorg/appsmith-ee/issues/1800 #### Media https://www.notion.so/appsmith/POC-Code-Splitting-1-Click-Upgrade-Downgrade-Frontend-4fe83a8de6c54224bad2bc43e8e4d34b #### Type of change - New feature (non-breaking change which adds functionality) ## Testing - [x] Manual - [ ] Jest - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] 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 --- .../AdminSettings/Admin_settings_spec.js | 1 + app/client/cypress/locators/AdminsSettings.js | 1 + app/client/src/ce/constants/messages.ts | 4 ++-- app/client/src/ce/entities/FeatureFlag.ts | 4 ++++ .../config/authentication/AuthPage.tsx | 15 +++++++++++---- .../AdminSettings/config/authentication/index.tsx | 12 ++++++++++-- .../config/branding/UpgradeBanner.tsx | 15 ++++++++++----- .../pages/AdminSettings/config/branding/index.tsx | 6 ++++++ .../src/ce/pages/AdminSettings/config/types.ts | 2 ++ app/client/src/ce/pages/Upgrade/Footer.tsx | 2 +- app/client/src/ce/utils/planHelpers.ts | 10 ++++++++++ app/client/src/ee/utils/planHelpers.ts | 1 + .../src/pages/Settings/config/ConfigFactory.ts | 1 + .../Settings/config/branding/BrandingPage.tsx | 11 ++++++----- .../Settings/config/branding/SettingsForm.tsx | 7 ++++++- .../BusinessFeatures/brandingPageHelpers.tsx | 10 ++++++++++ 16 files changed, 82 insertions(+), 20 deletions(-) create mode 100644 app/client/src/ce/utils/planHelpers.ts create mode 100644 app/client/src/ee/utils/planHelpers.ts create mode 100644 app/client/src/utils/BusinessFeatures/brandingPageHelpers.tsx diff --git a/app/client/cypress/e2e/Regression/Enterprise/AdminSettings/Admin_settings_spec.js b/app/client/cypress/e2e/Regression/Enterprise/AdminSettings/Admin_settings_spec.js index 9bfa4484b4..ccf1842169 100644 --- a/app/client/cypress/e2e/Regression/Enterprise/AdminSettings/Admin_settings_spec.js +++ b/app/client/cypress/e2e/Regression/Enterprise/AdminSettings/Admin_settings_spec.js @@ -53,6 +53,7 @@ describe("Admin settings page", function () { stubPricingPage(); cy.get(".t--settings-category-branding").click(); cy.url().should("contain", "/settings/branding"); + cy.get(adminsSettings.brandingSubmitButton).should("be.disabled"); cy.xpath(adminsSettings.upgrade).click(); cy.get("@pricingPage").should("be.called"); cy.wait(2000); diff --git a/app/client/cypress/locators/AdminsSettings.js b/app/client/cypress/locators/AdminsSettings.js index 28b04491e3..6ccffb48cf 100644 --- a/app/client/cypress/locators/AdminsSettings.js +++ b/app/client/cypress/locators/AdminsSettings.js @@ -31,6 +31,7 @@ export default { auditLogs: ".t--settings-category-audit-logs", provisioning: ".t--settings-category-provisioning", upgrageLeftPane: "[data-testid='t--enterprise-settings-category-item-be']", + brandingSubmitButton: ".t--settings-branding-submit-button", businessTag: "[data-testid='t--business-tag']", enterpriseTag: "[data-testid='t--enterprise-tag']", }; diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 618bbc428b..447b3d97db 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -1386,9 +1386,9 @@ export const DISCONNECT_AUTH_METHOD = () => "Disconnect"; export const DISCONNECT_CONFIRMATION = () => "Are you sure?"; // Branding -export const ADMIN_BRANDING_SETTINGS_TITLE = () => +export const ADMIN_BRANDING_SETTINGS_TITLE_UPGRADE = () => "Custom Branding for your workspaces"; -export const ADMIN_BRANDING_SETTINGS_SUBTITLE = () => +export const ADMIN_BRANDING_SETTINGS_SUBTITLE_UPGRADE = () => "Make your workspaces and apps look more yours in a few clicks as in the example below. Upload your logo and favicon, set your primary color, and preview the new look. To save a look you like, upgrade to our Business Edition."; export const ADMIN_BRANDING_COLOR_TOOLTIP = () => `When you choose a primary color, we auto-magically fill in the secondary and accent colors. You can change them to get the look you want.`; diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts index e00ab6d601..43b2703321 100644 --- a/app/client/src/ce/entities/FeatureFlag.ts +++ b/app/client/src/ce/entities/FeatureFlag.ts @@ -15,6 +15,8 @@ export const FEATURE_FLAG = { ab_gsheet_schema_enabled: "ab_gsheet_schema_enabled", ab_wds_enabled: "ab_wds_enabled", release_widgetdiscovery_enabled: "release_widgetdiscovery_enabled", + license_sso_enabled: "license_sso_enabled", + license_branding_enabled: "license_branding_enabled", ab_table_widget_activation_enabled: "ab_table_widget_activation_enabled", } as const; @@ -35,6 +37,8 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = { ab_gsheet_schema_enabled: false, ab_wds_enabled: false, release_widgetdiscovery_enabled: false, + license_sso_enabled: false, + license_branding_enabled: false, ab_table_widget_activation_enabled: false, }; 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 a99a52d7a9..3bde0d80ba 100644 --- a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx @@ -94,6 +94,7 @@ export type AuthMethodType = { isConnected?: boolean; calloutBanner?: banner; icon?: string; + isFeatureEnabled: boolean; }; const ButtonWrapper = styled.div` @@ -109,7 +110,7 @@ export function ActionButton({ method }: { method: AuthMethodType }) { }); const onClickHandler = (method: AuthMethodType) => { - if (!method.needsUpgrade || method.isConnected) { + if (method?.isFeatureEnabled || method.isConnected) { AnalyticsUtil.logEvent( method.isConnected ? "ADMIN_SETTINGS_EDIT_AUTH_METHOD" @@ -133,7 +134,9 @@ export function ActionButton({ method }: { method: AuthMethodType }) { @@ -183,7 +190,7 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) { renderAs="p" > {method.label}  - {method.needsUpgrade && } + {!method.isFeatureEnabled && } {method.isConnected && ( { kind="heading-l" renderAs="h1" > - {createMessage(ADMIN_BRANDING_SETTINGS_TITLE)} + {createMessage(ADMIN_BRANDING_SETTINGS_TITLE_UPGRADE)} { kind="body-m" renderAs="h2" > - {createMessage(ADMIN_BRANDING_SETTINGS_SUBTITLE)} + {createMessage(ADMIN_BRANDING_SETTINGS_SUBTITLE_UPGRADE)} 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 7f889fda9c..4c4c453eb5 100644 --- a/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/branding/index.tsx @@ -4,7 +4,12 @@ import { SettingCategories, SettingTypes, } from "@appsmith/pages/AdminSettings/config/types"; +import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors"; +import { isBrandingEnabled } from "@appsmith/utils/planHelpers"; import BrandingPage from "pages/Settings/config/branding/BrandingPage"; +import store from "store"; + +const featureFlags = selectFeatureFlags(store.getState()); export const config: AdminConfigType = { type: SettingCategories.BRANDING, @@ -14,4 +19,5 @@ export const config: AdminConfigType = { title: "Branding", icon: "pantone", component: BrandingPage, + isFeatureEnabled: isBrandingEnabled(featureFlags), }; diff --git a/app/client/src/ce/pages/AdminSettings/config/types.ts b/app/client/src/ce/pages/AdminSettings/config/types.ts index e6188bd156..7856e12e98 100644 --- a/app/client/src/ce/pages/AdminSettings/config/types.ts +++ b/app/client/src/ce/pages/AdminSettings/config/types.ts @@ -97,6 +97,7 @@ export interface Category { categoryType: string; needsUpgrade?: boolean; isEnterprise?: boolean; + isFeatureEnabled?: boolean; } export const SettingCategories = { @@ -136,4 +137,5 @@ export type AdminConfigType = { needsUpgrade?: boolean; categoryType: CategoryType; isEnterprise?: boolean; + isFeatureEnabled?: boolean; }; diff --git a/app/client/src/ce/pages/Upgrade/Footer.tsx b/app/client/src/ce/pages/Upgrade/Footer.tsx index 02187b4393..0155270ab0 100644 --- a/app/client/src/ce/pages/Upgrade/Footer.tsx +++ b/app/client/src/ce/pages/Upgrade/Footer.tsx @@ -64,7 +64,7 @@ export function FooterComponent(props: FooterProps) {
-
diff --git a/app/client/src/ce/utils/planHelpers.ts b/app/client/src/ce/utils/planHelpers.ts new file mode 100644 index 0000000000..5837de0e2b --- /dev/null +++ b/app/client/src/ce/utils/planHelpers.ts @@ -0,0 +1,10 @@ +import type { FeatureFlags } from "@appsmith/entities/FeatureFlag"; + +//if feature flag is true then return feature is enbaled +export const isBrandingEnabled = (featureFlags: FeatureFlags) => { + return featureFlags?.license_branding_enabled; +}; + +export const isSSOEnabled = (featureFlags: FeatureFlags) => { + return featureFlags?.license_sso_enabled; +}; diff --git a/app/client/src/ee/utils/planHelpers.ts b/app/client/src/ee/utils/planHelpers.ts new file mode 100644 index 0000000000..8c9cc57651 --- /dev/null +++ b/app/client/src/ee/utils/planHelpers.ts @@ -0,0 +1 @@ +export * from "ce/utils/planHelpers"; diff --git a/app/client/src/pages/Settings/config/ConfigFactory.ts b/app/client/src/pages/Settings/config/ConfigFactory.ts index 485e224b27..c2b80ea0a3 100644 --- a/app/client/src/pages/Settings/config/ConfigFactory.ts +++ b/app/client/src/pages/Settings/config/ConfigFactory.ts @@ -47,6 +47,7 @@ export class ConfigFactory { needsUpgrade: config.needsUpgrade, isEnterprise: config.isEnterprise, needsRefresh: config.needsRefresh, + isFeatureEnabled: config.isFeatureEnabled, children: config?.children?.map((child) => ConfigFactory.getCategory(child), ), diff --git a/app/client/src/pages/Settings/config/branding/BrandingPage.tsx b/app/client/src/pages/Settings/config/branding/BrandingPage.tsx index ad082b6651..88be9c93db 100644 --- a/app/client/src/pages/Settings/config/branding/BrandingPage.tsx +++ b/app/client/src/pages/Settings/config/branding/BrandingPage.tsx @@ -5,10 +5,11 @@ import { useForm } from "react-hook-form"; import Previews from "./previews"; import SettingsForm from "./SettingsForm"; import { getTenantConfig } from "@appsmith/selectors/tenantSelectors"; -import type { AdminConfigType } from "@appsmith/pages/AdminSettings/config/types"; import { Wrapper } from "@appsmith/pages/AdminSettings/config/authentication/AuthPage"; -import UpgradeBanner from "@appsmith/pages/AdminSettings/config/branding/UpgradeBanner"; + import { getAssetUrl } from "@appsmith/utils/airgapHelpers"; +import type { AdminConfigType } from "@appsmith/pages/AdminSettings/config/types"; +import { getUpgradeBanner } from "utils/BusinessFeatures/brandingPageHelpers"; export type brandColorsKeys = | "primary" @@ -29,7 +30,7 @@ type BrandingPageProps = { function BrandingPage(props: BrandingPageProps) { const { category } = props; - const { needsUpgrade = true } = category; + const isBrandingEnabled = category?.isFeatureEnabled ?? false; const tentantConfig = useSelector(getTenantConfig); const defaultValues = { brandColors: tentantConfig.brandColors, @@ -66,12 +67,12 @@ function BrandingPage(props: BrandingPageProps) { return ( - + {getUpgradeBanner(isBrandingEnabled)}
- diff --git a/app/client/src/utils/BusinessFeatures/brandingPageHelpers.tsx b/app/client/src/utils/BusinessFeatures/brandingPageHelpers.tsx new file mode 100644 index 0000000000..36d17aafc0 --- /dev/null +++ b/app/client/src/utils/BusinessFeatures/brandingPageHelpers.tsx @@ -0,0 +1,10 @@ +// eslint-disable-next-line @typescript-eslint/no-restricted-imports +import { default as UpgradeBanner_CE } from "ce/pages/AdminSettings/config/branding/UpgradeBanner"; +import { default as UpgradeBanner_EE } from "ee/pages/AdminSettings/config/branding/UpgradeBanner"; +import React from "react"; + +export const getUpgradeBanner = (isEnabled: boolean) => { + if (isEnabled) { + return ; + } else return ; +};