web: add download snapshot dialog behind feature flag

internal/feature/flags.go

@@ -28,6 +28,7 @@ const LiveUpdateV2 = "live_update_v2"
 const DisableResources = "disable_resources"
 const BulkDisableResources = "bulk_disable_resources"
 const ClusterRefresh = "cluster_refresh"
+const OfflineSnapshotCreation = "offline_snapshot_creation"
 
 // The Value a flag can have. Status should never be changed.
 type Value struct {
@@ -83,6 +84,10 @@ var MainDefaults = Defaults{
 		Enabled: false,
 		Status:  Active,
 	},
+	OfflineSnapshotCreation: Value{
+		Enabled: false,
+		Status:  Active,
+	},
 }
 
 // FeatureSet is a mutable set of Features.

web/package.json

@@ -6,6 +6,8 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/styles": "^4.11.5",
+    "@types/file-saver": "^2.0.5",
+    "file-saver": "^2.0.5",
     "history": "^4.9.0",
     "js-cookie": "^2.2.1",
     "moment": "^2.29.2",
@@ -71,6 +73,7 @@
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
     "babel-loader": "8.1.0",
+    "blob-polyfill": "^7.0.20220408",
     "eslint": "^7.11.0",
     "eslint-plugin-jest": "^25.2.4",
     "eslint-plugin-react": "^7.27.0",

web/src/ClusterStatusDialog.tsx

@@ -153,9 +153,6 @@ export function ClusterStatusDialog(props: ClusterStatusDialogProps) {
       <UnhealthyIcon role="presentation" data-testid="unhealthy-icon" />
     )
 
-  // TODO (lizz): When Docker connection info is populated in the Cluster
-  // API object, display the details here, and determine which item to
-  // display first based on the presence of k8s
   const clusterTitle = (
     <ClusterHeading>
       {clusterStatusIcon}

web/src/GlobalNav.tsx

@@ -180,6 +180,8 @@ export type GlobalNavProps = {
   clusterConnections?: Cluster[]
 }
 
+// The snapshot menu item is handled separately in HUD
+// since it requires access to HUD state.
 enum NavDialog {
   Account = "account",
   Cluster = "cluster",
@@ -199,6 +201,7 @@ export function GlobalNav(props: GlobalNavProps) {
   const accountButton = useRef<HTMLButtonElement | null>(null)
   const updateButton = useRef<HTMLButtonElement | null>(null)
   const clusterButton = useRef<HTMLButtonElement | null>(null)
+  const snapshotButton = useRef<HTMLButtonElement | null>(null)
 
   const [openDialog, setOpenDialog] = useState<NavDialog | null>(null)
 
@@ -219,12 +222,14 @@ export function GlobalNav(props: GlobalNavProps) {
 
   let accountMenuHeader = <AccountMenuHeader {...props} />
   let accountMenuContent = <AccountMenuContent {...props} />
-  let snapshotButton = props.snapshot.enabled ? (
+  let snapshotMenuItem = props.snapshot.enabled ? (
     <MenuButtonLabeled label="Snapshot">
       <MenuButton
-        onClick={props.snapshot.openModal}
+        ref={snapshotButton}
+        onClick={() => props.snapshot.openModal(snapshotButton.current)}
         role="menuitem"
         aria-label="Snapshot"
+        aria-haspopup="true"
       >
         <SnapshotIcon width="24" height="24" />
       </MenuButton>
@@ -287,7 +292,7 @@ export function GlobalNav(props: GlobalNavProps) {
         </MenuButton>
       </MenuButtonLabeled>
 
-      {snapshotButton}
+      {snapshotMenuItem}
 
       <MenuButtonLabeled label="Help">
         <MenuButton

web/src/HUD.tsx

@@ -43,7 +43,7 @@ export type HudProps = {
 
 // Snapshot logs are capped to 1MB (max upload size is 4MB; this ensures between the rest of state and JSON overhead
 // that the snapshot should still fit)
-const maxSnapshotLogSize = 1000 * 1000
+const MAX_SNAPSHOT_LOG_SIZE = 1000 * 1000
 
 // The Main HUD view, as specified in
 // https://docs.google.com/document/d/1VNIGfpC4fMfkscboW0bjYYFJl07um_1tsFrbN-Fu3FI/edit#heading=h.l8mmnclsuxl1
@@ -74,6 +74,7 @@ export default class HUD extends Component<HudProps, HudState> {
       showFatalErrorModal: ShowFatalErrorModal.Default,
       showCopySuccess: false,
       snapshotHighlight: undefined,
+      snapshotDialogAnchor: null,
       socketState: SocketState.Closed,
       showErrorModal: ShowErrorModal.Default,
       error: undefined,
@@ -83,6 +84,8 @@ export default class HUD extends Component<HudProps, HudState> {
     this.handleOpenModal = this.handleOpenModal.bind(this)
     this.handleShowCopySuccess = this.handleShowCopySuccess.bind(this)
     this.setError = this.setError.bind(this)
+    this.sendSnapshot = this.sendSnapshot.bind(this)
+    this.snapshotFromState = this.snapshotFromState.bind(this)
   }
 
   componentDidMount() {
@@ -120,7 +123,7 @@ export default class HUD extends Component<HudProps, HudState> {
       Object.assign(view, state.view)
     }
     if (state.logStore) {
-      view.logList = state.logStore.toLogList(maxSnapshotLogSize)
+      view.logList = state.logStore.toLogList(MAX_SNAPSHOT_LOG_SIZE)
     }
     return {
       view: view,
@@ -192,8 +195,11 @@ export default class HUD extends Component<HudProps, HudState> {
     )
   }
 
-  private handleOpenModal() {
-    this.setState({ showSnapshotModal: true })
+  private handleOpenModal(dialogAnchor?: HTMLElement | null) {
+    this.setState({
+      showSnapshotModal: true,
+      snapshotDialogAnchor: dialogAnchor ?? null,
+    })
   }
 
   render() {
@@ -292,8 +298,6 @@ export default class HUD extends Component<HudProps, HudState> {
   renderShareSnapshotModal(view: Proto.webviewView | null) {
     let handleClose = () =>
       this.setState({ showSnapshotModal: false, snapshotLink: "" })
-    let handleSendSnapshot = () =>
-      this.sendSnapshot(this.snapshotFromState(this.state))
     let session = view?.uiSession?.status
     let tiltCloudUsername = session?.tiltCloudUsername || null
     let tiltCloudSchemeHost = session?.tiltCloudSchemeHost || ""
@@ -305,16 +309,22 @@ export default class HUD extends Component<HudProps, HudState> {
         ) + 1
       : null
     return (
-      <ShareSnapshotModal
-        handleSendSnapshot={handleSendSnapshot}
-        handleClose={handleClose}
-        snapshotUrl={this.state.snapshotLink}
-        tiltCloudUsername={tiltCloudUsername}
-        tiltCloudSchemeHost={tiltCloudSchemeHost}
-        tiltCloudTeamID={tiltCloudTeamID}
-        isOpen={this.state.showSnapshotModal}
-        highlightedLines={highlightedLines}
-      />
+      <FeaturesProvider
+        featureFlags={this.state.view.uiSession?.status?.featureFlags || null}
+      >
+        <ShareSnapshotModal
+          handleSendSnapshot={this.sendSnapshot}
+          getSnapshot={() => this.snapshotFromState(this.state)}
+          handleClose={handleClose}
+          snapshotUrl={this.state.snapshotLink}
+          tiltCloudUsername={tiltCloudUsername}
+          tiltCloudSchemeHost={tiltCloudSchemeHost}
+          tiltCloudTeamID={tiltCloudTeamID}
+          isOpen={this.state.showSnapshotModal}
+          dialogAnchor={this.state.snapshotDialogAnchor}
+          highlightedLines={highlightedLines}
+        />
+      </FeaturesProvider>
     )
   }
 

web/src/HudState.tsx

@@ -15,7 +15,9 @@ type HudState = {
   error: string | undefined
   showErrorModal: ShowErrorModal
   snapshotHighlight: SnapshotHighlight | undefined
+  snapshotDialogAnchor: HTMLElement | null
   socketState: SocketState
   logStore?: LogStore
 }
+
 export default HudState

web/src/ShareSnapshotModal.stories.tsx

@@ -11,13 +11,17 @@ let signedOut = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
+      getSnapshot={() => {
+        return {}
+      }}
       handleClose={handleClose}
       snapshotUrl={""}
       tiltCloudUsername={""}
       tiltCloudSchemeHost={"https://cloud.tilt.dev"}
       tiltCloudTeamID={""}
       isOpen={true}
       highlightedLines={null}
+      dialogAnchor={null}
     />
   )
 }
@@ -26,13 +30,17 @@ let signedIn = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
+      getSnapshot={() => {
+        return {}
+      }}
       handleClose={handleClose}
       snapshotUrl={""}
       tiltCloudUsername={"peridot"}
       tiltCloudSchemeHost={"https://cloud.tilt.dev"}
       tiltCloudTeamID={""}
       isOpen={true}
       highlightedLines={null}
+      dialogAnchor={null}
     />
   )
 }
@@ -41,13 +49,17 @@ let withUrl = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
+      getSnapshot={() => {
+        return {}
+      }}
       handleClose={handleClose}
       snapshotUrl={"https://cloud.tilt.dev/snapshot/garnet"}
       tiltCloudUsername={"peridot"}
       tiltCloudSchemeHost={"https://cloud.tilt.dev"}
       tiltCloudTeamID={""}
       isOpen={true}
       highlightedLines={null}
+      dialogAnchor={null}
     />
   )
 }
@@ -56,6 +68,9 @@ let withUrlOverflow = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
+      getSnapshot={() => {
+        return {}
+      }}
       handleClose={handleClose}
       snapshotUrl={
         "https://cloud.tilt.dev/snapshot/rose-quartz-long-overflow-string"
@@ -65,6 +80,7 @@ let withUrlOverflow = () => {
       tiltCloudTeamID={""}
       isOpen={true}
       highlightedLines={null}
+      dialogAnchor={null}
     />
   )
 }
@@ -73,13 +89,17 @@ let withTeam = () => {
   return (
     <ShareSnapshotModal
       handleSendSnapshot={handleSendSnapshot}
+      getSnapshot={() => {
+        return {}
+      }}
       handleClose={handleClose}
       snapshotUrl={""}
       tiltCloudUsername={"peridot"}
       tiltCloudSchemeHost={"https://cloud.tilt.dev"}
       tiltCloudTeamID={"3e8e3af3-52e7-4f86-9006-9b1cce9ec85d"}
       isOpen={true}
       highlightedLines={null}
+      dialogAnchor={null}
     />
   )
 }