Merge pull request #408 from ably/WEB-3869

[WEB-3869] Remove the Meganav Account Panel dropdown
ably · Jul 18, 2024 · f52a2a6 · f52a2a6
2 parents 64d089c + 711737c
commit f52a2a6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.1.5",
+  "version": "14.1.7",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/Meganav/Meganav.stories.tsx b/src/core/Meganav/Meganav.stories.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { http, HttpResponse } from "msw";
-
 import Meganav from "../Meganav";
 import loadIcons from "../icons.js";
 import logo from "../images/ably-logo.png";
@@ -26,7 +25,18 @@ export default {
     msw: {
       handlers: [
         http.get("/api/me", () => {
-          return HttpResponse.json({});
+          return HttpResponse.json({
+            accountName: "Account Name",
+            signedIn: true,
+            account: {
+              links: {
+                dashboard: {
+                  text: "Dashboard",
+                  href: "/accounts/1",
+                },
+              },
+            },
+          });
         }),
         http.get("/api/blog", () => {
           return HttpResponse.json([
@@ -66,7 +76,7 @@ const Page = () => {
 
     const store = getRemoteDataStore();
 
-    fetchSessionData(store, "/api/me");
+    fetchSessionData(store, "");
     fetchBlogPosts(store, "/api/blog");
   }, []);
 
@@ -84,3 +94,26 @@ const Page = () => {
 export const Default = {
   render: () => <Page />,
 };
+
+const PageSignedIn = () => {
+  useEffect(() => {
+    loadIcons();
+    const store = getRemoteDataStore();
+    fetchSessionData(store, "/api/me");
+    fetchBlogPosts(store, "/api/blog");
+  }, []);
+
+  return (
+    <Meganav
+      paths={{
+        logo,
+        ablyStack,
+        awsLogo,
+      }}
+    />
+  );
+};
+
+export const SignedIn = {
+  render: () => <PageSignedIn />,
+};
diff --git a/src/core/MeganavItemsSignedIn.tsx b/src/core/MeganavItemsSignedIn.tsx
@@ -1,7 +1,4 @@
 import React from "react";
-
-import MeganavControl from "./MeganavControl";
-import SignOutLink from "./SignOutLink";
 import MeganavSearch from "./MeganavSearch";
 import { AbsUrl, MeganavSessionState, MeganavTheme } from "./Meganav";
 
@@ -11,102 +8,24 @@ type MeganavItemsSignedIn = {
   absUrl: AbsUrl;
 };
 
-const truncate = (string, length) => {
+const truncate = (string: string, length: number) => {
   return string?.length && string.length > length
     ? `${string.slice(0, length - 1)}…`
     : string;
 };
 
 const MeganavItemsSignedIn = ({
   sessionState,
-  theme,
   absUrl,
 }: MeganavItemsSignedIn) => {
-  const links = sessionState.account
-    ? Object.keys(sessionState.account.links).map(
-        (key) => sessionState.account.links[key],
-      )
-    : [];
   const accountName = truncate(sessionState.accountName, 20);
-  const preferredEmail = truncate(sessionState.preferredEmail, 20);
 
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl
-          ariaControls="account-panel"
-          ariaLabel="Account"
-          theme={theme}
-          additionalCSS="mr-0"
-        >
+        <span className="ui-meganav-link h-64 hover:text-cool-black mr-0">
           {accountName}
-        </MeganavControl>
-
-        <div
-          className="ui-meganav-panel-account invisible"
-          id="account-panel"
-          data-id="meganav-panel"
-        >
-          {/* Users exist without accounts in which case there is no links here */}
-          {sessionState.account && (
-            <>
-              <p className="ui-meganav-overline mt-16 mx-16">Your account</p>
-              <ul className="mb-16 mx-16">
-                {links.map((item) => (
-                  <li key={item.href}>
-                    <a
-                      className="ui-meganav-account-link"
-                      href={absUrl(item.href)}
-                    >
-                      {item.text}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-
-          <p className="ui-meganav-overline mx-16">{preferredEmail}</p>
-          <ul className="mb-8 mx-16">
-            <li>
-              <a
-                href={absUrl(sessionState.mySettings.href)}
-                className="ui-meganav-account-link"
-              >
-                {sessionState.mySettings.text}
-              </a>
-            </li>
-            {sessionState.myAccessTokens && (
-              <li>
-                <a
-                  href={absUrl(sessionState.myAccessTokens.href)}
-                  className="ui-meganav-account-link"
-                >
-                  {sessionState.myAccessTokens.text}
-                  <span className="ui-version-tag">preview</span>
-                </a>
-              </li>
-            )}
-          </ul>
-
-          <hr className="ui-meganav-hr mb-16" />
-
-          {sessionState.logOut && (
-            <div className="mb-16 px-16">
-              <SignOutLink absUrl={absUrl} {...sessionState.logOut}>
-                {({ text, href, onClick }) => (
-                  <a
-                    onClick={onClick}
-                    href={absUrl(href)}
-                    className="ui-meganav-account-link"
-                  >
-                    {text}
-                  </a>
-                )}
-              </SignOutLink>
-            </div>
-          )}
-        </div>
+        </span>
       </li>
 
       <li>