From 0998b441e7f4e7a429e15f5ca3c76b533a77dff8 Mon Sep 17 00:00:00 2001 From: Ankita Kinger <28362912+ankitakinger@users.noreply.github.com> Date: Mon, 14 Feb 2022 17:25:12 +0530 Subject: [PATCH] refactor: superadmin settings UI/UX (#11130) * refactor admin settings feature * separated save-restart bar to separate component * created new CE dir to facilitate code split * created separate ee dir and exporting everything we have in ce file. * little mod * minor fix * splitting settings types config * using object literals for category types instead of enums * CE: support use of component for each category * minor style fix * authentication page UI changes implemented * github signup doc url added back * removed comments * routing updates * made subcategories listing in left pane optional * added muted saml to auth listing * added breadcrumbs and enabled button * created separate component for auth page and auth config * added callout and disconnect components * updated breadcrumbs component * minor updates to common components * updated warning callout and added icon * ce: test cases fixed * updated test file name * warning banner callout added on auth page * updated callout banner for form login * CE: Split config files * CE: moved the window declaration in EE file as its dependency will be updated in EE * CE: Splitting ApiConstants and SocialLogin constants * CE: split login page * CE: moved getSocialLoginButtonProps func to EE file as it's dependencies will be updated in EE * added key icon * CE: created a factory class to share social auths list * Minor style fix for social btns * Updated the third party auth styles * Small fixes to styling * ce: splitting forms constants * breadcrumbs implemented for all pages in admin settings * Settings breadcrumbs separated * splitted settings breadcrumbs between ce and ee * renamed default import * minor style fix * added login form config. * updated login/signup pages to use form login disabled config * removed common functionality outside * implemented breadcrumb component from scratch without using blueprint * removed unwanted code * Small style update * updated breadcrumb categories file name and breadcrumb icon * added cypress tests for admin settings auth page * added comments * update locator for upgrade button * added link for intercom on upgrade button * removed unnecessary file * minor style fix * style fix for auth option cards * split messages constant * fixed imports for message constants splitting. * added message constants * updated unit test cases * fixed messages import in cypress index * fixed messages import again, cypress fails to read re-exported objs. * added OIDC auth method on authentication page * updated import statements from ee to @appsmith * removed dead code * updated read more link UI * PR comments fixes * some UI fixes * used color and fonts from theme * fixed some imports * fixed some imports * removed warning imports * updated OIDC logo and auth method desc copies * css changes * css changes * css changes * updated cypress test for breadcrumb * moved callout component to ads as calloutv2 * UI changes for form fields * updated css for spacing between form fields * added sub-text on auth pages * added active class for breadcrumb item * added config for disable signup toggle and fixed UI issues of restart banner * fixed admin settings page bugs * assigned true as default state for signup * fixed messages import statements * updated code for PR comments related suggestions * reverted file path change in cypress support * updated cypress test * updated cypress test * css changes for admin settings page and breadcrumb removal Co-authored-by: Pranav Kanade --- .../AdminSettings/Admin_settings_spec.js | 67 ------------- .../locators/AdminsSettingsLocators.json | 4 +- app/client/src/ce/constants/messages.ts | 2 +- .../config/authentication/AuthPage.tsx | 95 ++++++++----------- .../src/pages/Settings/FormGroup/Common.tsx | 2 +- .../src/pages/Settings/FormGroup/group.tsx | 2 +- .../src/pages/Settings/SettingsForm.tsx | 22 +++-- 7 files changed, 59 insertions(+), 135 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AdminSettings/Admin_settings_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AdminSettings/Admin_settings_spec.js index fdfc72da0a..dd7afd9b21 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AdminSettings/Admin_settings_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/AdminSettings/Admin_settings_spec.js @@ -203,71 +203,4 @@ describe("Admin settings page", function() { cy.get(AdminsSettingsLocators.restartNotice).should("not.exist"); cy.wait(3000); }); - - it("should test that breadcrumbs work properly", () => { - // checking settings default page - cy.visit("/settings/general"); - cy.get(AdminsSettingsLocators.breadcrumbList) - .children() - .within(() => { - cy.get(AdminsSettingsLocators.breadcrumbItem).should( - "have.length", - "2", - ); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(0) - .contains("Homepage") - .should("have.attr", "href") - .and("eq", "/applications"); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(1) - .contains("General") - .should("not.have.attr", "href"); - }); - - // checking settings category page - cy.visit("/settings/authentication"); - cy.get(AdminsSettingsLocators.breadcrumbList) - .children() - .within(() => { - cy.get(AdminsSettingsLocators.breadcrumbItem).should( - "have.length", - "2", - ); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(0) - .contains("Homepage") - .should("have.attr", "href") - .and("eq", "/applications"); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(1) - .contains("Authentication") - .should("not.have.attr", "href"); - }); - - // checking settings subcategory page - cy.visit("/settings/authentication/google-auth"); - cy.get(AdminsSettingsLocators.breadcrumbList) - .children() - .within(() => { - cy.get(AdminsSettingsLocators.breadcrumbItem).should( - "have.length", - "3", - ); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(0) - .contains("Homepage") - .should("have.attr", "href") - .and("eq", "/applications"); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(1) - .contains("Authentication") - .should("have.attr", "href") - .and("eq", "/settings/authentication"); - cy.get(AdminsSettingsLocators.breadcrumbItem) - .eq(2) - .contains("Google Authentication") - .should("not.have.attr", "href"); - }); - }); }); diff --git a/app/client/cypress/locators/AdminsSettingsLocators.json b/app/client/cypress/locators/AdminsSettingsLocators.json index 64445555ab..8248c005f4 100644 --- a/app/client/cypress/locators/AdminsSettingsLocators.json +++ b/app/client/cypress/locators/AdminsSettingsLocators.json @@ -16,7 +16,5 @@ "textInput": ".t--admin-settings-text-input input", "instanceName": ".t--admin-settings-APPSMITH_INSTANCE_NAME input", "fromAddress": ".t--admin-settings-APPSMITH_MAIL_FROM input", - "restartNotice": ".t--admin-settings-restart-notice", - "breadcrumbList": ".t--breadcrumb-list", - "breadcrumbItem": ".t--breadcrumb-item" + "restartNotice": ".t--admin-settings-restart-notice" } \ No newline at end of file diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 79ada0d4e2..a4351b2bf2 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -269,7 +269,7 @@ export const EDIT_DATASOURCE_MESSAGE = () => "Edit Datasource to access authentication settings"; export const OAUTH_ERROR = () => "OAuth Error"; export const OAUTH_2_0 = () => "OAuth 2.0"; -export const ADD = () => "ADD"; +export const ENABLE = () => "ENABLE"; export const UPGRADE = () => "UPGRADE"; export const EDIT = () => "EDIT"; 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 dff8b87222..5cda94a76f 100644 --- a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx +++ b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx @@ -4,7 +4,7 @@ import { SettingCategories } from "../types"; import styled from "styled-components"; import Button, { Category } from "components/ads/Button"; import { - ADD, + ENABLE, ADMIN_AUTH_SETTINGS_SUBTITLE, ADMIN_AUTH_SETTINGS_TITLE, createMessage, @@ -13,14 +13,13 @@ import { UPGRADE_TO_EE, } from "@appsmith/constants/messages"; import { getAdminSettingsCategoryUrl } from "constants/routes"; -import Icon, { IconSize } from "components/ads/Icon"; import { Callout, CalloutType } from "components/ads/CalloutV2"; -import SettingsBreadcrumbs from "pages/Settings/SettingsBreadcrumbs"; import { getAppsmithConfigs } from "@appsmith/configs"; import { getCurrentUser } from "selectors/usersSelectors"; import { useSelector } from "react-redux"; import { bootIntercom } from "utils/helpers"; import { Colors } from "constants/Colors"; +import Icon from "components/ads/Icon"; const { intercomAppID } = getAppsmithConfigs(); @@ -75,6 +74,11 @@ const MethodTitle = styled.div` display: flex; align-items: center; margin: 0 0 4px; + + svg { + width: 14px; + height: 14px; + } `; const MethodDets = styled.div` @@ -102,22 +106,12 @@ export type AuthMethodType = { calloutBanner?: banner; }; -const EditButton = styled.div` - display: flex; - align-items: center; - cursor: pointer; -`; - -const AddButton = styled(Button)` +const StyledAuthButton = styled(Button)` height: 30px; + width: 94px; padding: 8px 16px; `; -const ButtonTitle = styled.span` - margin-right: 2px; - font-size: 11px; -`; - const Label = styled.span<{ enterprise?: boolean }>` display: inline; ${(props) => @@ -154,7 +148,6 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) { return ( - {createMessage(ADMIN_AUTH_SETTINGS_TITLE)} @@ -170,9 +163,14 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) { {method.label}  - {method.isConnected && } {method.needsUpgrade && ( - + <> + +   + + )} + {method.isConnected && ( + )} {method.subText} @@ -184,41 +182,32 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) { /> )} - {method.isConnected ? ( - - history.push( - getAdminSettingsCategoryUrl( - SettingCategories.AUTHENTICATION, - method.category, - ), - ) - } - > - {createMessage(EDIT)} - - - ) : ( - - !method.needsUpgrade - ? history.push( - getAdminSettingsCategoryUrl( - SettingCategories.AUTHENTICATION, - method.category, - ), - ) - : triggerIntercom(method.label) - } - text={createMessage(!!method.needsUpgrade ? UPGRADE : ADD)} - /> - )} + + !method.needsUpgrade || method.isConnected + ? history.push( + getAdminSettingsCategoryUrl( + SettingCategories.AUTHENTICATION, + method.category, + ), + ) + : triggerIntercom(method.label) + } + text={createMessage( + method.isConnected + ? EDIT + : !!method.needsUpgrade + ? UPGRADE + : ENABLE, + )} + /> ); })} diff --git a/app/client/src/pages/Settings/FormGroup/Common.tsx b/app/client/src/pages/Settings/FormGroup/Common.tsx index 1630cc9d05..7262721df0 100644 --- a/app/client/src/pages/Settings/FormGroup/Common.tsx +++ b/app/client/src/pages/Settings/FormGroup/Common.tsx @@ -19,7 +19,7 @@ const StyledIcon = styled(Icon)` export const StyledFormGroup = styled.div` width: 634px; - margin-bottom: ${(props) => props.theme.spaces[11]}px; + margin-bottom: ${(props) => props.theme.spaces[7]}px; & span.bp3-popover-target { display: inline-block; background: ${(props) => props.theme.colors.menuItem.normalIcon}; diff --git a/app/client/src/pages/Settings/FormGroup/group.tsx b/app/client/src/pages/Settings/FormGroup/group.tsx index 06c4db26a1..4f94cb25e7 100644 --- a/app/client/src/pages/Settings/FormGroup/group.tsx +++ b/app/client/src/pages/Settings/FormGroup/group.tsx @@ -61,7 +61,7 @@ export default function Group({ const state = useSelector((state) => state); return ( - {createMessage(() => name || "")} + {name && {createMessage(() => name)}} {settings && settings.map((setting) => { diff --git a/app/client/src/pages/Settings/SettingsForm.tsx b/app/client/src/pages/Settings/SettingsForm.tsx index 600bef9aba..8c31baf727 100644 --- a/app/client/src/pages/Settings/SettingsForm.tsx +++ b/app/client/src/pages/Settings/SettingsForm.tsx @@ -19,7 +19,6 @@ import RestartBanner from "./RestartBanner"; import AdminConfig from "./config"; import SaveAdminSettings from "./SaveSettings"; import { SettingTypes } from "@appsmith/pages/AdminSettings/config/types"; -import SettingsBreadcrumbs from "./SettingsBreadcrumbs"; const Wrapper = styled.div` flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px); @@ -35,11 +34,15 @@ export const BottomSpace = styled.div` height: ${(props) => props.theme.settings.footerHeight + 20}px; `; +export const HeaderWrapper = styled.div` + margin-bottom: 16px; +`; + export const SettingsHeader = styled.h2` font-size: 24px; font-weight: 500; text-transform: capitalize; - margin-bottom: 0; + margin-bottom: 0px; `; export const SettingsSubHeader = styled.div` @@ -110,14 +113,15 @@ export function SettingsForm( return ( - - - {getSettingLabel(details?.title || (subCategory ?? category))} - - {details?.subText && ( - {details.subText} - )} + + + {getSettingLabel(details?.title || (subCategory ?? category))} + + {details?.subText && ( + {details.subText} + )} +