storage navigation refactor

packages/common-components/src/Icons/icons/CreditCardOutlined.icon.tsx

@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as CreditCardOutlinedSvg } from "../svgs/credit-card-outlined.svg"
+
+export { CreditCardOutlinedSvg }
+
+export default createSvgIcon(<CreditCardOutlinedSvg />)

packages/common-components/src/Icons/index.ts

@@ -20,6 +20,7 @@ export { default as CloseIcon, CloseSvg } from "./icons/Close.icon"
 export { default as CloseCircleIcon, CloseCirceSvg } from "./icons/CloseCircle.icon"
 export { default as CopyIcon, CopySvg } from "./icons/Copy.icon"
 export { default as CreditCardIcon, CreditCardSvg } from "./icons/CreditCard.icon"
+export { default as CreditCardOutlinedIcon, CreditCardOutlinedSvg } from "./icons/CreditCardOutlined.icon"
 export { default as CrossIcon, CrossSvg } from "./icons/Cross.icon"
 export { default as CrossOutlinedIcon, CrossOutlinedSvg } from "./icons/CrossOutlined.icon"
 export { default as DaiIcon, DaiSvg } from "./icons/Dai.icon"

packages/storage-ui/cypress/support/page-objects/navigationMenu.ts

@@ -5,8 +5,9 @@ export const navigationMenu = {
   homeNavButton: () => cy.get("[data-cy=home-nav]"),
   cidsNavButton: () => cy.get("[data-cy=cids-nav]"),
   bucketsNavButton: () => cy.get("[data-cy=buckets-nav]"),
-  settingsNavButton: () => cy.get("[data-cy=settings-nav]"),
-  docsNavButton: () => cy.get("[data-cy=docs-nav]"),
+  APIKeysNavButton: () => cy.get("[data-cy=api-keys-nav]"),
+  // settingsNavButton: () => cy.get("[data-cy=settings-nav]"),
+  // docsNavButton: () => cy.get("[data-cy=docs-nav]"),
   spaceUsedLabel: () => cy.get("[data-cy=label-space-used]"),
   spaceUsedProgressBar: () => cy.get("[data-cy=progress-bar-space-used]"),
   // mobile view only

packages/storage-ui/cypress/tests/main-navigation.cy.ts

@@ -19,14 +19,9 @@ describe("Main Navigation", () => {
       cy.url().should("include", "/buckets")
     })
 
-    it("can navigate to the settings page", () => {
-      navigationMenu.settingsNavButton().click()
-      cy.url().should("include", "/settings")
-    })
-
-    it.skip("can navigate to the docs page", () => {
-      navigationMenu.docsNavButton().invoke("removeAttr", "target").click()
-      cy.url().should("eq", "https://docs.storage.chainsafe.io/")
+    it("can navigate to the API keys page", () => {
+      navigationMenu.APIKeysNavButton().click()
+      cy.url().should("include", "/api-keys")
     })
 
     it("can sign out from the navigation bar", () => {
@@ -35,9 +30,9 @@ describe("Main Navigation", () => {
         .should("be.visible")
         .click()
       authenticationPage.web3Button().should("be.visible")
-      cy.url().should("not.include", "/drive")
-      cy.url().should("not.include", "/bin")
-      cy.url().should("not.include", "/settings")
+      cy.url().should("not.include", "/buckets")
+      cy.url().should("not.include", "/cids")
+      cy.url().should("not.include", "/api-keys")
     })
   })
 
@@ -58,24 +53,19 @@ describe("Main Navigation", () => {
       cy.url().should("include", "/buckets")
     })
 
-    it("can navigate to the settings page", () => {
-      navigationMenu.settingsNavButton().click()
-      cy.url().should("include", "/settings")
-    })
-
-    it("can navigate to the docs page", () => {
-      navigationMenu.docsNavButton().invoke("removeAttr", "target").click()
-      cy.url().should("eq", "https://docs.storage.chainsafe.io/")
+    it("can navigate to the API keys page", () => {
+      navigationMenu.APIKeysNavButton().click()
+      cy.url().should("include", "/api-keys")
     })
 
     it("can sign out from the navigation bar", () => {
       navigationMenu.signOutButton()
         .should("be.visible")
         .click()
       authenticationPage.web3Button().should("be.visible")
-      cy.url().should("not.include", "/drive")
-      cy.url().should("not.include", "/bin")
-      cy.url().should("not.include", "/settings")
+      cy.url().should("not.include", "/buckets")
+      cy.url().should("not.include", "/cids")
+      cy.url().should("not.include", "/api-keys")
     })
   })
 })

packages/storage-ui/src/Components/Layouts/AppHeader.tsx

@@ -9,7 +9,9 @@ import {
   MenuDropdown,
   PowerDownSvg,
   useHistory,
-  useToasts
+  useToasts,
+  DocumentSvg,
+  ExternalSvg
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
@@ -36,9 +38,7 @@ const useStyles = makeStyles(
           }px`,
           left: Number(constants.navWidth),
           opacity: 0,
-
           backgroundColor: constants.header.rootBackground,
-
           "& > *:first-child": {
             flex: "1 1 0"
           },
@@ -162,6 +162,25 @@ const useStyles = makeStyles(
         padding: `5px ${constants.generalUnit}px`,
         background: palette.additional["gray"][1],
         boxShadow: constants.nav.profileButtonShadow
+      },
+      docItem: {
+        display: "flex",
+        justifyContent: "center",
+        textDecorationLine: "none",
+        padding: `5px ${constants.generalUnit * 2}px`,
+        color: palette.additional["gray"][8]
+      },
+      docIcon: {
+        height: 18,
+        width: 18,
+        marginRight: constants.generalUnit,
+        fill: palette.additional["gray"][8]
+      },
+      externalIcon: {
+        height: 18,
+        width: 18,
+        marginLeft: constants.generalUnit * 1.5,
+        stroke: palette.primary.main
       }
     })
   }
@@ -200,6 +219,21 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
           {desktop ? (
             <>
               <section className={classes.accountControls}>
+                <a
+                  data-cy="docs-nav"
+                  className={clsx(classes.docItem, classes.profileButton)}
+                  href="https://docs.storage.chainsafe.io/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <DocumentSvg className={classes.docIcon} />
+                  <Typography
+                    variant="h5"
+                  >
+                    <Trans>Docs</Trans>
+                  </Typography>
+                  <ExternalSvg className={classes.externalIcon} />
+                </a>
                 <MenuDropdown
                   anchor="bottom-right"
                   hideIndicator={true}
@@ -243,7 +277,6 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                   }
                 </MenuDropdown>
                 <NotificationsDropdown />
-
               </section>
             </>
           ) : (

packages/storage-ui/src/Components/Layouts/AppNav.tsx

@@ -13,17 +13,18 @@ import {
   formatBytes,
   ChainsafeLogo,
   FolderSvg,
-  SettingSvg,
-  DocumentSvg,
   Button,
   PowerDownIcon,
-  useLocation
+  useLocation,
+  KeySvg,
+  CreditCardOutlinedSvg
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
 import { CSSTheme } from "../../Themes/types"
 import { useStorageApi } from "../../Contexts/StorageApiContext"
 import { useStorage } from "../../Contexts/StorageContext"
+import { useBilling } from "../../Contexts/BillingContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSSTheme) => {
@@ -90,7 +91,6 @@ const useStyles = makeStyles(
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
-
         [breakpoints.up("md")]: {
           "& img": {
             height: constants.generalUnit * 5,
@@ -150,6 +150,14 @@ const useStyles = makeStyles(
             color: constants.nav.itemColorHover
           }
         },
+        "&:hover": {
+          backgroundColor: palette.additional["gray"][5],
+          [breakpoints.down("md")]: {
+            color: constants.nav.backgroundColor
+          }
+        }
+      },
+      navItemIconFill: {
         "& svg": {
           "& path": {
             fill: constants.nav.headingColor
@@ -163,10 +171,27 @@ const useStyles = makeStyles(
             fill: constants.nav.itemIconColorHover
           }
         },
-        "&:hover": {
+        "&.selected": {
           backgroundColor: palette.additional["gray"][5],
           [breakpoints.down("md")]: {
-            color: constants.nav.backgroundColor
+            "& span": {
+              color: constants.nav.mobileSelectedBackground
+            },
+            "& svg": {
+              fill: constants.nav.mobileSelectedBackground
+            }
+          }
+        }
+      },
+      navItemIconStroke: {
+        "& svg": {
+          width: Number(constants.svgWidth),
+          marginRight: constants.generalUnit * 2,
+          [breakpoints.down("md")]: {
+            stroke: constants.nav.itemIconColorHover,
+            "& path": {
+              stroke: constants.nav.headingColor
+            }
           }
         },
         "&.selected": {
@@ -176,7 +201,7 @@ const useStyles = makeStyles(
               color: constants.nav.mobileSelectedBackground
             },
             "& svg": {
-              fill: constants.nav.mobileSelectedBackground
+              stroke: constants.nav.mobileSelectedBackground
             }
           }
         }
@@ -232,13 +257,14 @@ interface IAppNav {
   setNavOpen: (state: boolean) => void
 }
 
-type AppNavTab = "buckets" | "cids" | "settings"
+type AppNavTab = "buckets" | "cids" | "settings" | "api-keys" | "subscription"
 
 const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
   const location = useLocation()
   const { storageSummary } = useStorage()
+  const { isBillingEnabled } = useBilling()
   const { isLoggedIn, logout } = useStorageApi()
 
   const signOut = useCallback(() => {
@@ -257,6 +283,8 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
       case "cids": return "cids"
       case "buckets": return "buckets"
       case "bucket": return "buckets"
+      case "api-keys": return "api-keys"
+      case "subscription": return "subscription"
       case "settings": return "settings"
       default: return
     }
@@ -290,7 +318,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               <Link
                 data-cy="buckets-nav"
                 onClick={handleOnClick}
-                className={clsx(classes.navItem, appNavTab === "buckets" && "selected")}
+                className={clsx(classes.navItem, classes.navItemIconFill, appNavTab === "buckets" && "selected")}
                 to={ROUTE_LINKS.Buckets}
               >
                 <FolderSvg />
@@ -303,7 +331,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
               <Link
                 data-cy="cids-nav"
                 onClick={handleOnClick}
-                className={clsx(classes.navItem, appNavTab === "cids" && "selected")}
+                className={clsx(classes.navItem, classes.navItemIconFill, appNavTab === "cids" && "selected")}
                 to={ROUTE_LINKS.Cids}
               >
                 <DatabaseSvg />
@@ -313,35 +341,47 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
                   <Trans>CIDs</Trans>
                 </Typography>
               </Link>
-            </nav>
-            <nav className={classes.navMenu}>
               <Link
-                data-cy="settings-nav"
+                data-cy="api-keys-nav"
                 onClick={handleOnClick}
-                className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
-                to={ROUTE_LINKS.SettingsRoot}
+                className={clsx(classes.navItem, classes.navItemIconStroke, appNavTab === "api-keys" && "selected")}
+                to={ROUTE_LINKS.ApiKeys}
               >
-                <SettingSvg />
+                <KeySvg />
                 <Typography
                   variant="h5"
                 >
-                  <Trans>Settings</Trans>
+                  <Trans>API Keys</Trans>
                 </Typography>
               </Link>
-              <a
-                data-cy="docs-nav"
-                className={classes.navItem}
-                href="https://docs.storage.chainsafe.io/"
-                target="_blank"
-                rel="noopener noreferrer"
+              {isBillingEnabled &&
+                <Link
+                  data-cy="subscription-nav"
+                  onClick={handleOnClick}
+                  className={clsx(classes.navItem, classes.navItemIconStroke, appNavTab === "subscription" && "selected")}
+                  to={ROUTE_LINKS.Subscription}
+                >
+                  <CreditCardOutlinedSvg />
+                  <Typography
+                    variant="h5"
+                  >
+                    <Trans>Subscription</Trans>
+                  </Typography>
+                </Link>
+              }
+              {/* <Link
+                data-cy="settings-nav"
+                onClick={handleOnClick}
+                className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
+                to={ROUTE_LINKS.SettingsRoot}
               >
-                <DocumentSvg />
+                <SettingSvg />
                 <Typography
                   variant="h5"
                 >
-                  <Trans>Docs</Trans>
+                  <Trans>Settings</Trans>
                 </Typography>
-              </a>
+              </Link> */}
             </nav>
           </div>
           <section className={classes.bottomSection}>