Adjust avatar component according to Zoe's design (#1615)

* refactor: adjust avatar according to Zoes design * chore: add changeset * refactor: use parameters for signup * refactor: use designsystem props * fix: tests * refactor: use correct spacing between signup button and search box * fix: tests * refactor: remove unused dependencies * Toggle login/logout buttons over the `hideLogin` flag in the sso plugin config (#1622) * feat: hide login buttons in the top bar with a flag in the config * chore: add changeset * chore: remove changeset for this PR * chore: fix tests * chore: adjust tests * chore: toggle login buttons via new plugin config parameter * feat: enhance quiz login button + restructure buttons * refactor: rename override components + move hideLogin evaluation to top lvl * chore: change data-test-id in e2e test * chore: add gatsby-ssr.js to sso plugin * refactor: use right test id to identify login button * fix: lint test * chore: adjust e2e common steps * fix: last e2e test * refactor: logout e2e test * chore: add appState/returnTo parameter to signup button
commercetools · Apr 26, 2023 · 7660724 · 7660724
1 parent 5741b93
commit 7660724
Show file tree

Hide file tree

Showing 28 changed files with 277 additions and 384 deletions.
diff --git a/.changeset/good-vans-prove.md b/.changeset/good-vans-prove.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-sso-ui-kit': minor
+---
+
+The avatar component was reimplemented and a signup button was introduced. The design of the buttons have changed as well.
diff --git a/cypress/e2e/docs-smoke-test/learn-api/e2e.const.ts b/cypress/e2e/docs-smoke-test/learn-api/e2e.const.ts
@@ -2,12 +2,12 @@
 export enum ETestId {
   avatarContainer = 'avatar-container',
   quizWrapper = 'quiz-wrapper',
-  loginButton = 'login-button',
+  loginButton = 'login-quiz-button',
+  logoutButton = 'logout-button',
   quizLoading = 'quiz-loading',
   quizForm = 'quiz-form',
   quizFormSubmit = 'quiz-form-submit',
   avatarMenu = 'avatar-menu',
-  avatarMenuLogout = 'avatar-menu-logout',
   quizFeedback = 'quiz-feedback',
   quizQuestionFeedback = 'quiz-question-feedback',
   tryAgainButton = 'try-again-button',

diff --git a/cypress/e2e/docs-smoke-test/learn-api/login.ts b/cypress/e2e/docs-smoke-test/learn-api/login.ts
@@ -40,7 +40,7 @@ When(`The user scrolls to the quiz area`, () => {
 });
 
 Then('The user sees a login button', () => {
-  cy.get(`button[data-test-id="${ETestId.loginButton}"]`).should('exist');
+  cy.get(`div[data-test-id="${ETestId.loginButton}"]`).should('exist');
 });
 
 When('The user submits valid auth0 credentials', () => {

diff --git a/cypress/e2e/docs-smoke-test/learn-api/logout.feature b/cypress/e2e/docs-smoke-test/learn-api/logout.feature
@@ -3,7 +3,5 @@ Feature: Logout
   @full @smoke
   Scenario: User logs out from the quiz page
     Given The "user" is logged in
-    And The user clicks the "avatar icon"
-    And The avatar menu is displayed
-    And The user clicks the "avatar menu logout button"
+    And The user clicks the "logout button"
     Then The user is redirected to "home page"
diff --git a/cypress/support/step_definitions/common.steps.ts b/cypress/support/step_definitions/common.steps.ts
@@ -28,13 +28,13 @@ const redirectionStep = (page) => {
 
 const clickStep = (clickArea) => {
   if (clickArea === 'avatar icon') {
-    cy.get(`[data-test-id="${ETestId.avatarContainer}"]`).click();
+    cy.get(`div[data-test-id="${ETestId.avatarContainer}"]`).click();
   }
-  if (clickArea === 'avatar menu logout button') {
-    cy.get(`[data-test-id="${ETestId.avatarMenuLogout}"]`).click();
+  if (clickArea === 'logout button') {
+    cy.get(`[data-testid="${ETestId.logoutButton}"]`).click();
   }
   if (clickArea === 'login button') {
-    cy.get(`button[data-test-id="${ETestId.loginButton}"]`).click({
+    cy.get(`div[data-test-id="${ETestId.loginButton}"]`).click({
       force: true,
     });
   }
@@ -75,7 +75,7 @@ const loginToQuizStep = (user: string, isNewAttempt: boolean) => {
     ).as('fetchAttempt');
   }
   cy.get(`div[data-test-id="${ETestId.quizWrapper}"]`).scrollIntoView();
-  cy.get(`button[data-test-id="${ETestId.loginButton}"]`).click({
+  cy.get(`div[data-test-id="${ETestId.loginButton}"]`).click({
     force: true,
   });
   cy.origin(
@@ -107,8 +107,7 @@ Given(`The {string} is logged in with new attempt`, (user: string) =>
 );
 
 Given(`The user logs out`, () => {
-  cy.get(`[data-test-id="${ETestId.avatarContainer}"]`).click();
-  cy.get(`[data-test-id="${ETestId.avatarMenuLogout}"]`).click();
+  cy.get(`[data-testid="${ETestId.logoutButton}"]`).click();
 });
 
 Given('The avatar menu is displayed', () => {

diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-header.js
@@ -12,7 +12,7 @@ import {
   Icons,
 } from '@commercetools-docs/ui-kit';
 import { SearchDialog, SearchInput, Overlay } from '../../components';
-import PlaceholderAvatarArea from '../../overrides/avatar';
+import PlaceholderLoginInfoArea from '../../overrides/topbar-login-info';
 import { useSiteData } from '../../hooks/use-site-data';
 import useTopMenuItems from '../../hooks/use-top-menu-items';
 import getSiteContextTitleByPath from '../../utils/get-site-context-title';
@@ -304,7 +304,7 @@ const LayoutHeader = forwardRef((props, ref) => {
           </DocumentationSwitcherButton>
         </Inline>
         <Inline>
-          <PlaceholderAvatarArea />
+          <PlaceholderLoginInfoArea />
         </Inline>
       </TopMenuContainer>
       <SearchBoxContainer ref={ref}>

diff --git a/...gatsby-theme-docs/src/overrides/avatar.js → ...e-docs/src/overrides/topbar-login-info.js b/...gatsby-theme-docs/src/overrides/avatar.js → ...e-docs/src/overrides/topbar-login-info.js
@@ -1,3 +1,3 @@
 // A React component to be rendered in the top bar next to the top menu toggle button
-const Avatar = () => null;
-export default Avatar;
+const LoginInfo = () => null;
+export default LoginInfo;
diff --git a/packages/gatsby-theme-learning/package.json b/packages/gatsby-theme-learning/package.json
@@ -16,7 +16,6 @@
     "@auth0/auth0-react": "2.0.1",
     "@commercetools-docs/gatsby-theme-sso-ui-kit": "21.3.1",
     "@commercetools-docs/ui-kit": "21.3.1",
-    "@commercetools-uikit/avatar": "16.0.0",
     "@commercetools-uikit/checkbox-input": "16.0.0",
     "@commercetools-uikit/design-system": "16.0.0",
     "@commercetools-uikit/icons": "16.0.0",

diff --git a/packages/gatsby-theme-learning/src/components/quiz.tsx b/packages/gatsby-theme-learning/src/components/quiz.tsx
@@ -224,11 +224,7 @@ const Quiz = (props: QuizProps) => {
           Logging you in...
         </LoadingSpinner>
       ) : (
-        <LoginButton
-          data-test-id="login-button"
-          label="Login to assess your knowledge"
-          quizId={`quiz-${props.quizId}`}
-        />
+        <LoginButton quizId={`quiz-${props.quizId}`} />
       )
     ) : (
       <QuizContent />

diff --git a/packages/gatsby-theme-sso-ui-kit/README.md b/packages/gatsby-theme-sso-ui-kit/README.md
@@ -5,12 +5,14 @@ The plugin interacts with auth0 authentication provider and therefore needs to b
 
 ## Configuration
 
-`gatsby-theme-sso-ui-kit` plugin expects 2 parameters:
+`gatsby-theme-sso-ui-kit` plugin expects 3 parameters:
 
 - `auth0Domain`: the auth0 application domain url (it is defined in the auth0 management app)
 - `auth0ClientId`: the auth0 application client id (it is defined in the auth0 management app)
 - `learnApiBaseUrl`: the learn API base url. It can be omitted if the host running the site matches the api host.
 
+You can also add the optional `hideLogin` parameter if you don't want the login information to be visible in the top bar.
+
 In order to enable the plugin, the following configuration should be added to the `gatsby-config.js` plugin section:
 
 ```
@@ -20,6 +22,7 @@ In order to enable the plugin, the following configuration should be added to th
         auth0Domain: 'auth0domain.dummy.tld',
         auth0ClientId: 'cliendItString',
         learnApiBaseUrl: 'https://api.host.tld',
+        hideLogin: false,
     },
 },
 ```

diff --git a/packages/gatsby-theme-sso-ui-kit/gatsby-browser.js b/packages/gatsby-theme-sso-ui-kit/gatsby-browser.js
@@ -19,6 +19,7 @@ export const wrapRootElement = ({ element }, pluginOptions) => {
         learnApiBaseUrl: pluginOptions.learnApiBaseUrl,
         auth0Domain: pluginOptions.auth0Domain,
         auth0ClientId: pluginOptions.auth0ClientId,
+        hideLogin: pluginOptions.hideLogin || false,
       }}
     >
       <Auth0Provider

diff --git a/packages/gatsby-theme-sso-ui-kit/gatsby-node.mjs b/packages/gatsby-theme-sso-ui-kit/gatsby-node.mjs
@@ -6,5 +6,8 @@ export const pluginOptionsSchema = ({ Joi }) => {
       .allow('')
       .default('')
       .description(`Learn API base url`),
+    hideLogin: Joi.bool().description(
+      `Flag that determines if the login information are visible in the top bar`
+    ),
   });
 };
diff --git a/packages/gatsby-theme-sso-ui-kit/gatsby-ssr.js b/packages/gatsby-theme-sso-ui-kit/gatsby-ssr.js
@@ -0,0 +1,21 @@
+import ConfigContext from './src/components/config-context';
+
+export const wrapRootElement = ({ element }, pluginOptions) => {
+  const isPluginEnabled =
+    pluginOptions.auth0Domain && pluginOptions.auth0ClientId;
+
+  return isPluginEnabled ? (
+    <ConfigContext.Provider
+      value={{
+        learnApiBaseUrl: pluginOptions.learnApiBaseUrl,
+        auth0Domain: pluginOptions.auth0Domain,
+        auth0ClientId: pluginOptions.auth0ClientId,
+        hideLogin: pluginOptions.hideLogin || false,
+      }}
+    >
+      {element}
+    </ConfigContext.Provider>
+  ) : (
+    <>{element}</>
+  );
+};
diff --git a/packages/gatsby-theme-sso-ui-kit/package.json b/packages/gatsby-theme-sso-ui-kit/package.json
@@ -15,13 +15,11 @@
   "dependencies": {
     "@auth0/auth0-react": "2.0.1",
     "@commercetools-docs/ui-kit": "21.3.1",
-    "@commercetools-uikit/avatar": "16.0.0",
     "@commercetools-uikit/icons": "16.0.0",
     "@commercetools-uikit/secondary-button": "16.0.0",
     "@commercetools-uikit/spacings": "16.0.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "downshift": "7.6.0",
     "md5": "2.3.0",
     "react-intl": "^6.2.8",
     "react-router-dom": "6.9.0"