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 <pranav@appsmith.com>
2022-02-14 17:25:12 +05:30 · 2022-02-14 17:25:12 +05:30 · 0998b441e7
commit 0998b441e7
parent 80bab90e28
7 changed files with 59 additions and 135 deletions
--- 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");
-      });
-  });
 });
--- 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"
 }
--- 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";

--- 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 (
    <Wrapper>
-      <SettingsBreadcrumbs category={SettingCategories.AUTHENTICATION} />
      <SettingsFormWrapper>
        <SettingsHeader>
          {createMessage(ADMIN_AUTH_SETTINGS_TITLE)}
@ -170,9 +163,14 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
                <MethodDetailsWrapper>
                  <MethodTitle>
                    {method.label}&nbsp;
-                    {method.isConnected && <Label>Enabled</Label>}
                    {method.needsUpgrade && (
-                      <Label enterprise>Enterprise</Label>
+                      <>
+                        <Label enterprise>Enterprise</Label>
+                        &nbsp;
+                      </>
+                    )}
+                    {method.isConnected && (
+                      <Icon fillColor="#03B365" name="oval-check" />
                    )}
                  </MethodTitle>
                  <MethodDets>{method.subText}</MethodDets>
@ -184,41 +182,32 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
                    />
                  )}
                </MethodDetailsWrapper>
-                {method.isConnected ? (
-                  <EditButton
-                    className={`t--settings-sub-category-${method.category}`}
-                    onClick={() =>
-                      history.push(
-                        getAdminSettingsCategoryUrl(
-                          SettingCategories.AUTHENTICATION,
-                          method.category,
-                        ),
-                      )
-                    }
-                  >
-                    <ButtonTitle>{createMessage(EDIT)}</ButtonTitle>
-                    <Icon name="right-arrow" size={IconSize.XL} />
-                  </EditButton>
-                ) : (
-                  <AddButton
-                    category={Category.tertiary}
-                    className={`add-button t--settings-sub-category-${
-                      method.needsUpgrade ? "upgrade" : method.category
-                    }`}
-                    data-cy="add-auth-account"
-                    onClick={() =>
-                      !method.needsUpgrade
-                        ? history.push(
-                            getAdminSettingsCategoryUrl(
-                              SettingCategories.AUTHENTICATION,
-                              method.category,
-                            ),
-                          )
-                        : triggerIntercom(method.label)
-                    }
-                    text={createMessage(!!method.needsUpgrade ? UPGRADE : ADD)}
-                  />
-                )}
+                <StyledAuthButton
+                  category={
+                    method.isConnected ? Category.primary : Category.tertiary
+                  }
+                  className={`t--settings-sub-category-${
+                    method.needsUpgrade ? "upgrade" : method.category
+                  }`}
+                  data-cy="btn-auth-account"
+                  onClick={() =>
+                    !method.needsUpgrade || method.isConnected
+                      ? history.push(
+                          getAdminSettingsCategoryUrl(
+                            SettingCategories.AUTHENTICATION,
+                            method.category,
+                          ),
+                        )
+                      : triggerIntercom(method.label)
+                  }
+                  text={createMessage(
+                    method.isConnected
+                      ? EDIT
+                      : !!method.needsUpgrade
+                      ? UPGRADE
+                      : ENABLE,
+                  )}
+                />
              </MethodCard>
            );
          })}
--- 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};
--- 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 (
    <GroupWrapper data-testid="admin-settings-group-wrapper">
-      <GroupHeader>{createMessage(() => name || "")}</GroupHeader>
+      {name && <GroupHeader>{createMessage(() => name)}</GroupHeader>}
      <GroupBody>
        {settings &&
          settings.map((setting) => {
--- 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 (
    <Wrapper>
-      <SettingsBreadcrumbs category={category} subCategory={subCategory} />
      <SettingsFormWrapper>
-        <SettingsHeader>
-          {getSettingLabel(details?.title || (subCategory ?? category))}
-        </SettingsHeader>
-        {details?.subText && (
-          <SettingsSubHeader>{details.subText}</SettingsSubHeader>
-        )}
+        <HeaderWrapper>
+          <SettingsHeader>
+            {getSettingLabel(details?.title || (subCategory ?? category))}
+          </SettingsHeader>
+          {details?.subText && (
+            <SettingsSubHeader>{details.subText}</SettingsSubHeader>
+          )}
+        </HeaderWrapper>
        <Group
          category={category}
          settings={settings}