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