web: don't display account menu item when offline snapshots are enabl…

…ed (#5799)

web/src/AccountMenu.stories.tsx

@@ -31,7 +31,6 @@ export const SignedOut = () => (
     tiltCloudSchemeHost="http://cloud.tilt.dev"
     tiltCloudTeamID=""
     tiltCloudTeamName=""
-    isSnapshot={false}
   />
 )
 
@@ -41,6 +40,5 @@ export const SignedIn = () => (
     tiltCloudSchemeHost="http://cloud.tilt.dev"
     tiltCloudTeamID="cactus inc"
     tiltCloudTeamName=""
-    isSnapshot={false}
   />
 )

web/src/AccountMenu.test.tsx

@@ -1,42 +1,85 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
-import ReactModal from "react-modal"
-import { AccountMenuContent } from "./AccountMenu"
+import { AccountMenuContent, AccountMenuDialog } from "./AccountMenu"
+import Features, { FeaturesTestProvider, Flag } from "./feature"
 
-beforeEach(() => {
-  // Note: `body` is used as the app element _only_ in a test env
-  // since the app root element isn't available; in prod, it should
-  // be set as the app root so that accessibility features are set correctly
-  ReactModal.setAppElement(document.body)
-})
+describe("AccountMenuDialog", () => {
+  it("does render when offline snapshot creation is NOT enabled", () => {
+    const features = new Features({ [Flag.OfflineSnapshotCreation]: false })
+    render(
+      <AccountMenuDialog
+        open={true}
+        onClose={() => {}}
+        anchorEl={document.body}
+        tiltCloudUsername=""
+        tiltCloudSchemeHost="http://cloud.tilt.dev"
+        tiltCloudTeamID=""
+        tiltCloudTeamName=""
+      />,
+      {
+        wrapper: ({ children }) => (
+          <FeaturesTestProvider value={features} children={children} />
+        ),
+      }
+    )
 
-it("renders Sign Up button when user is not signed in", () => {
-  render(
-    <AccountMenuContent
-      tiltCloudUsername=""
-      tiltCloudSchemeHost="http://cloud.tilt.dev"
-      tiltCloudTeamID=""
-      tiltCloudTeamName=""
-      isSnapshot={false}
-    />
-  )
+    expect(
+      screen.getByRole("button", { name: "Link Tilt to Tilt Cloud" })
+    ).toBeInTheDocument()
+  })
 
-  expect(
-    screen.getByRole("button", { name: "Link Tilt to Tilt Cloud" })
-  ).toBeInTheDocument()
-})
+  it("does NOT render when offline snapshot creation is enabled", () => {
+    const features = new Features({ [Flag.OfflineSnapshotCreation]: true })
+    render(
+      <AccountMenuDialog
+        open={true}
+        onClose={() => {}}
+        anchorEl={document.body}
+        tiltCloudUsername=""
+        tiltCloudSchemeHost="http://cloud.tilt.dev"
+        tiltCloudTeamID=""
+        tiltCloudTeamName=""
+      />,
+      {
+        wrapper: ({ children }) => (
+          <FeaturesTestProvider value={features} children={children} />
+        ),
+      }
+    )
+
+    expect(
+      screen.queryByRole("button", { name: "Link Tilt to Tilt Cloud" })
+    ).toBeNull()
+  })
+
+  describe("AccountMenuContent", () => {
+    it("renders Sign Up button when user is not signed in", () => {
+      render(
+        <AccountMenuContent
+          tiltCloudUsername=""
+          tiltCloudSchemeHost="http://cloud.tilt.dev"
+          tiltCloudTeamID=""
+          tiltCloudTeamName=""
+        />
+      )
+
+      expect(
+        screen.getByRole("button", { name: "Link Tilt to Tilt Cloud" })
+      ).toBeInTheDocument()
+    })
 
-it("renders TiltCloud button when user is signed in", () => {
-  render(
-    <AccountMenuContent
-      tiltCloudUsername="amaia"
-      tiltCloudSchemeHost="http://cloud.tilt.dev"
-      tiltCloudTeamID="cactus inc"
-      tiltCloudTeamName=""
-      isSnapshot={false}
-    />
-  )
-  expect(
-    screen.getByRole("link", { name: "View Tilt Cloud" })
-  ).toBeInTheDocument()
+    it("renders TiltCloud button when user is signed in", () => {
+      render(
+        <AccountMenuContent
+          tiltCloudUsername="amaia"
+          tiltCloudSchemeHost="http://cloud.tilt.dev"
+          tiltCloudTeamID="cactus inc"
+          tiltCloudTeamName=""
+        />
+      )
+      expect(
+        screen.getByRole("link", { name: "View Tilt Cloud" })
+      ).toBeInTheDocument()
+    })
+  })
 })

web/src/AccountMenu.tsx

@@ -4,6 +4,8 @@ import styled from "styled-components"
 import { ReactComponent as TiltCloudLogoSvg } from "./assets/svg/logo-Tilt-Cloud.svg"
 import ButtonInput from "./ButtonInput"
 import ButtonLink from "./ButtonLink"
+import { Flag, useFeatures } from "./feature"
+import FloatDialog from "./FloatDialog"
 import { AnimDuration, Color, Font, FontSize, SizeUnit } from "./style-helpers"
 
 let AccountMenuContentRoot = styled.div`
@@ -66,7 +68,6 @@ function notifyTiltOfRegistration() {
 }
 
 type AccountMenuProps = {
-  isSnapshot: boolean
   tiltCloudUsername: string | null
   tiltCloudSchemeHost: string
   tiltCloudTeamID: string | null
@@ -166,3 +167,33 @@ export function AccountMenuHeader(props: AccountMenuProps) {
     </AccountMenuHeaderRoot>
   )
 }
+
+type AccountMenuDialogProps = {
+  open: boolean
+  anchorEl: HTMLElement | null
+  onClose: () => void
+} & AccountMenuProps
+
+export function AccountMenuDialog(props: AccountMenuDialogProps) {
+  const { open, anchorEl, onClose, ...accountMenuProps } = props
+  const features = useFeatures()
+
+  const hideAccountDialog = features.isEnabled(Flag.OfflineSnapshotCreation)
+  if (hideAccountDialog) {
+    return null
+  }
+
+  const accountMenuHeader = <AccountMenuHeader {...accountMenuProps} />
+  const accountMenuContent = <AccountMenuContent {...accountMenuProps} />
+  return (
+    <FloatDialog
+      id="accountMenu"
+      title={accountMenuHeader}
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+    >
+      {accountMenuContent}
+    </FloatDialog>
+  )
+}

web/src/GlobalNav.tsx

@@ -1,6 +1,6 @@
 import React, { Component, useMemo, useRef, useState } from "react"
 import styled from "styled-components"
-import { AccountMenuContent, AccountMenuHeader } from "./AccountMenu"
+import { AccountMenuDialog } from "./AccountMenu"
 import { AnalyticsAction, AnalyticsType, incr } from "./analytics"
 import { ReactComponent as AccountIcon } from "./assets/svg/account.svg"
 import { ReactComponent as ClusterErrorIcon } from "./assets/svg/close.svg"
@@ -9,7 +9,7 @@ import { ReactComponent as HelpIcon } from "./assets/svg/help.svg"
 import { ReactComponent as SnapshotIcon } from "./assets/svg/snapshot.svg"
 import { ReactComponent as UpdateAvailableIcon } from "./assets/svg/update-available.svg"
 import { ClusterStatusDialog, getDefaultCluster } from "./ClusterStatusDialog"
-import FloatDialog from "./FloatDialog"
+import { Flag, useFeatures } from "./feature"
 import HelpDialog from "./HelpDialog"
 import { isTargetEditable } from "./shortcut"
 import { SnapshotAction } from "./snapshot"
@@ -205,6 +205,8 @@ export function GlobalNav(props: GlobalNavProps) {
 
   const [openDialog, setOpenDialog] = useState<NavDialog | null>(null)
 
+  const features = useFeatures()
+
   // Don't display global nav for snapshots
   if (props.isSnapshot) {
     return null
@@ -220,8 +222,6 @@ export function GlobalNav(props: GlobalNavProps) {
     setOpenDialog(nextDialogState)
   }
 
-  let accountMenuHeader = <AccountMenuHeader {...props} />
-  let accountMenuContent = <AccountMenuContent {...props} />
   let snapshotMenuItem = props.snapshot.enabled ? (
     <MenuButtonLabeled label="Snapshot">
       <MenuButton
@@ -268,6 +268,25 @@ export function GlobalNav(props: GlobalNavProps) {
     </MenuButtonLabeled>
   ) : null
 
+  // Don't render the account button if offline snapshots are enabled
+  // because an account isn't needed to generate them
+  const displayAccountInfo = !features.isEnabled(Flag.OfflineSnapshotCreation)
+  const accountMenuButton = displayAccountInfo ? (
+    <MenuButtonLabeled label="Account">
+      <MenuButton
+        ref={accountButton}
+        onClick={() => toggleDialog(NavDialog.Account)}
+        data-open={openDialog === NavDialog.Account}
+        aria-expanded={openDialog === NavDialog.Account}
+        aria-label="Account"
+        aria-haspopup="true"
+        role="menuitem"
+      >
+        <AccountIcon width="24" height="24" />
+      </MenuButton>
+    </MenuButtonLabeled>
+  ) : null
+
   const versionButtonLabel = props.showUpdate ? "Get Update" : "Version"
 
   return (
@@ -308,35 +327,23 @@ export function GlobalNav(props: GlobalNavProps) {
         </MenuButton>
       </MenuButtonLabeled>
 
-      <MenuButtonLabeled label="Account">
-        <MenuButton
-          ref={accountButton}
-          onClick={() => toggleDialog(NavDialog.Account)}
-          data-open={openDialog === NavDialog.Account}
-          aria-expanded={openDialog === NavDialog.Account}
-          aria-label="Account"
-          aria-haspopup="true"
-          role="menuitem"
-        >
-          <AccountIcon width="24" height="24" />
-        </MenuButton>
-      </MenuButtonLabeled>
+      {accountMenuButton}
 
       <ClusterStatusDialog
         open={openDialog === NavDialog.Cluster}
         onClose={() => toggleDialog(NavDialog.Cluster)}
         anchorEl={clusterButton?.current}
         clusterConnection={defaultClusterInfo}
       />
-      <FloatDialog
-        id="accountMenu"
-        title={accountMenuHeader}
+      <AccountMenuDialog
         open={openDialog === NavDialog.Account}
         anchorEl={accountButton?.current}
         onClose={() => toggleDialog(NavDialog.Account)}
-      >
-        {accountMenuContent}
-      </FloatDialog>
+        tiltCloudUsername={props.tiltCloudUsername}
+        tiltCloudSchemeHost={props.tiltCloudSchemeHost}
+        tiltCloudTeamID={props.tiltCloudTeamID}
+        tiltCloudTeamName={props.tiltCloudTeamName}
+      />
       <HelpDialog
         open={openDialog === NavDialog.Help}
         anchorEl={helpButton?.current}

web/src/ShareSnapshotModal.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react"
 import ReactModal from "react-modal"
+import Features, { FeaturesTestProvider, Flag } from "./feature"
 import ShareSnapshotModal from "./ShareSnapshotModal"
+import { nResourceView } from "./testdata"
 
 ReactModal.setAppElement("#root")
 
@@ -11,9 +13,7 @@ let signedOut = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
-      getSnapshot={() => {
-        return {}
-      }}
+      getSnapshot={() => ({})}
       handleClose={handleClose}
       snapshotUrl={""}
       tiltCloudUsername={""}
@@ -49,9 +49,7 @@ let withUrl = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
-      getSnapshot={() => {
-        return {}
-      }}
+      getSnapshot={() => ({})}
       handleClose={handleClose}
       snapshotUrl={"https://cloud.tilt.dev/snapshot/garnet"}
       tiltCloudUsername={"peridot"}
@@ -68,9 +66,7 @@ let withUrlOverflow = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
-      getSnapshot={() => {
-        return {}
-      }}
+      getSnapshot={() => ({})}
       handleClose={handleClose}
       snapshotUrl={
         "https://cloud.tilt.dev/snapshot/rose-quartz-long-overflow-string"
@@ -89,9 +85,7 @@ let withTeam = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
-      getSnapshot={() => {
-        return {}
-      }}
+      getSnapshot={() => ({})}
       handleClose={handleClose}
       snapshotUrl={""}
       tiltCloudUsername={"peridot"}
@@ -104,16 +98,39 @@ let withTeam = () => {
   )
 }
 
+const offlineSnapshot = () => {
+  const features = new Features({ [Flag.OfflineSnapshotCreation]: true })
+  const anchorEl: HTMLElement | null = document.body.querySelector("#root")
+  return (
+    <FeaturesTestProvider value={features}>
+      <ShareSnapshotModal
+        handleSendSnapshot={handleSendSnapshot}
+        getSnapshot={() => ({ view: nResourceView(1) })}
+        handleClose={handleClose}
+        snapshotUrl=""
+        tiltCloudUsername=""
+        tiltCloudSchemeHost=""
+        tiltCloudTeamID=""
+        isOpen={true}
+        highlightedLines={null}
+        dialogAnchor={anchorEl}
+      />
+    </FeaturesTestProvider>
+  )
+}
+
 export default {
   title: "New UI/Shared/ShareSnapshotModal",
 }
 
-export const SignedOut = signedOut
+export const CloudSignedOut = signedOut
+
+export const CloudSignedIn = signedIn
 
-export const SignedIn = signedIn
+export const CloudWithUrl = withUrl
 
-export const WithUrl = withUrl
+export const CloudWithUrlOverflow = withUrlOverflow
 
-export const WithUrlOverflow = withUrlOverflow
+export const CloudWithTeam = withTeam
 
-export const WithTeam = withTeam
+export const OfflineSnapshot = offlineSnapshot