web: fix re-rendering on a few providers

tilt-dev · Feb 10, 2022 · 288fba1 · 288fba1
1 parent e08c400
commit 288fba1
Show file tree

Hide file tree

Showing 18 changed files with 246 additions and 127 deletions.
diff --git a/web/src/HUD.tsx b/web/src/HUD.tsx
@@ -10,7 +10,7 @@ import AppController from "./AppController"
 import { tiltfileKeyContext } from "./BrowserStorage"
 import ErrorModal from "./ErrorModal"
 import FatalErrorModal from "./FatalErrorModal"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import { FeaturesProvider } from "./feature"
 import HeroScreen from "./HeroScreen"
 import "./HUD.scss"
 import { HudErrorContextProvider } from "./HudErrorContext"
@@ -163,15 +163,6 @@ export default class HUD extends Component<HudProps, HudState> {
       })
   }
 
-  private getFeatures(): Features {
-    let featureFlags = {} as { [key: string]: boolean }
-    let flagList = this.state.view.uiSession?.status?.featureFlags || []
-    flagList.forEach((flag) => {
-      featureFlags[flag.name || ""] = !!flag.value
-    })
-    return new Features(featureFlags)
-  }
-
   handleShowCopySuccess() {
     this.setState(
       {
@@ -248,45 +239,36 @@ export default class HUD extends Component<HudProps, HudState> {
   }
 
   renderOverviewSwitch() {
-    const features = this.getFeatures()
-    let showSnapshot =
-      features.isEnabled(Flag.Snapshots) && !this.pathBuilder.isSnapshot()
-    let snapshotAction = {
-      enabled: showSnapshot,
-      openModal: this.handleOpenModal,
-    }
-
     return (
-      /* allow Styled Components to override MUI - https://material-ui.com/guides/interoperability/#controlling-priority-3*/
-      <StylesProvider injectFirst>
-        <FeaturesProvider value={features}>
-          <SnapshotActionProvider value={snapshotAction}>
-            <PathBuilderProvider value={this.pathBuilder}>
-              <LogStoreProvider value={this.state.logStore || new LogStore()}>
-                <ResourceGroupsContextProvider>
-                  <ResourceListOptionsProvider>
-                    <ResourceSelectionProvider>
-                      <Switch>
-                        <Route
-                          path={this.path("/r/:name/overview")}
-                          render={(props: RouteComponentProps<any>) => (
-                            <OverviewResourcePane view={this.state.view} />
-                          )}
-                        />
-                        <Route
-                          render={() => (
-                            <OverviewTablePane view={this.state.view} />
-                          )}
-                        />
-                      </Switch>
-                    </ResourceSelectionProvider>
-                  </ResourceListOptionsProvider>
-                </ResourceGroupsContextProvider>
-              </LogStoreProvider>
-            </PathBuilderProvider>
+      <FeaturesProvider
+        featureFlags={this.state.view.uiSession?.status?.featureFlags || null}
+      >
+        <PathBuilderProvider value={this.pathBuilder}>
+          <SnapshotActionProvider openModal={this.handleOpenModal}>
+            <LogStoreProvider value={this.state.logStore || new LogStore()}>
+              <ResourceGroupsContextProvider>
+                <ResourceListOptionsProvider>
+                  <ResourceSelectionProvider>
+                    <Switch>
+                      <Route
+                        path={this.path("/r/:name/overview")}
+                        render={(props: RouteComponentProps<any>) => (
+                          <OverviewResourcePane view={this.state.view} />
+                        )}
+                      />
+                      <Route
+                        render={() => (
+                          <OverviewTablePane view={this.state.view} />
+                        )}
+                      />
+                    </Switch>
+                  </ResourceSelectionProvider>
+                </ResourceListOptionsProvider>
+              </ResourceGroupsContextProvider>
+            </LogStoreProvider>
           </SnapshotActionProvider>
-        </FeaturesProvider>
-      </StylesProvider>
+        </PathBuilderProvider>
+      </FeaturesProvider>
     )
   }
 
@@ -356,7 +338,12 @@ export default class HUD extends Component<HudProps, HudState> {
 export function HUDFromContext(props: React.PropsWithChildren<{}>) {
   let history = useHistory()
   let interfaceVersion = useInterfaceVersion()
-  return <HUD history={history} interfaceVersion={interfaceVersion} />
+  return (
+    /* allow Styled Components to override MUI - https://material-ui.com/guides/interoperability/#controlling-priority-3*/
+    <StylesProvider injectFirst>
+      <HUD history={history} interfaceVersion={interfaceVersion} />
+    </StylesProvider>
+  )
 }
 
 function compareObjectsOrder<

diff --git a/web/src/HeaderBar.test.tsx b/web/src/HeaderBar.test.tsx
@@ -5,7 +5,7 @@ import { act } from "react-dom/test-utils"
 import { MemoryRouter } from "react-router-dom"
 import { TwoResources } from "./HeaderBar.stories"
 import HelpDialog from "./HelpDialog"
-import { SnapshotActionProvider } from "./snapshot"
+import { SnapshotActionValueProvider } from "./snapshot"
 
 it("renders shortcuts dialog on ?", () => {
   const root = mount(
@@ -29,9 +29,9 @@ it("opens snapshot modal on s", () => {
   }
   const root = mount(
     <MemoryRouter initialEntries={["/"]}>
-      <SnapshotActionProvider value={snapshot}>
+      <SnapshotActionValueProvider value={snapshot}>
         {TwoResources()}
-      </SnapshotActionProvider>
+      </SnapshotActionValueProvider>
     </MemoryRouter>
   )
 

diff --git a/web/src/OverviewResourceBar.test.tsx b/web/src/OverviewResourceBar.test.tsx
@@ -5,7 +5,7 @@ import { act } from "react-dom/test-utils"
 import { MemoryRouter } from "react-router-dom"
 import HelpDialog from "./HelpDialog"
 import { TwoResources } from "./OverviewResourceBar.stories"
-import { SnapshotActionProvider } from "./snapshot"
+import { SnapshotActionValueProvider } from "./snapshot"
 
 it("renders shortcuts dialog on ?", () => {
   const root = mount(
@@ -29,9 +29,9 @@ it("opens snapshot modal on s", () => {
   }
   const root = mount(
     <MemoryRouter initialEntries={["/"]}>
-      <SnapshotActionProvider value={snapshot}>
+      <SnapshotActionValueProvider value={snapshot}>
         {TwoResources()}
-      </SnapshotActionProvider>
+      </SnapshotActionValueProvider>
     </MemoryRouter>
   )
 

diff --git a/web/src/OverviewResourcePane.stories.tsx b/web/src/OverviewResourcePane.stories.tsx
@@ -1,7 +1,7 @@
 import { StylesProvider } from "@material-ui/core/styles"
 import React from "react"
 import { MemoryRouter } from "react-router"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import LogStore, { LogStoreProvider } from "./LogStore"
 import OverviewResourcePane from "./OverviewResourcePane"
 import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
@@ -27,7 +27,7 @@ export default {
       return (
         <MemoryRouter initialEntries={["/"]}>
           <TiltSnackbarProvider>
-            <FeaturesProvider value={features}>
+            <FeaturesValueProvider value={features}>
               <ResourceGroupsContextProvider>
                 <ResourceListOptionsProvider>
                   <StarredResourceMemoryProvider>
@@ -39,7 +39,7 @@ export default {
                   </StarredResourceMemoryProvider>
                 </ResourceListOptionsProvider>
               </ResourceGroupsContextProvider>
-            </FeaturesProvider>
+            </FeaturesValueProvider>
           </TiltSnackbarProvider>
         </MemoryRouter>
       )

diff --git a/web/src/OverviewResourceSidebar.stories.tsx b/web/src/OverviewResourceSidebar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { MemoryRouter } from "react-router"
 import SplitPane from "react-split-pane"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import LogStore, { LogStoreProvider } from "./LogStore"
 import OverviewResourceSidebar from "./OverviewResourceSidebar"
 import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
@@ -27,7 +27,7 @@ export default {
       })
       return (
         <MemoryRouter initialEntries={["/"]}>
-          <FeaturesProvider value={features}>
+          <FeaturesValueProvider value={features}>
             <ResourceGroupsContextProvider>
               <div style={{ margin: "-1rem", height: "80vh" }}>
                 <SplitPane
@@ -39,7 +39,7 @@ export default {
                 </SplitPane>
               </div>
             </ResourceGroupsContextProvider>
-          </FeaturesProvider>
+          </FeaturesValueProvider>
         </MemoryRouter>
       )
     },

diff --git a/web/src/OverviewTable.stories.tsx b/web/src/OverviewTable.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { MemoryRouter } from "react-router"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import LogStore, { LogStoreProvider } from "./LogStore"
 import OverviewTable from "./OverviewTable"
 import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
@@ -28,7 +28,7 @@ export default {
       return (
         <MemoryRouter initialEntries={["/"]}>
           <TiltSnackbarProvider>
-            <FeaturesProvider value={features}>
+            <FeaturesValueProvider value={features}>
               <ResourceGroupsContextProvider>
                 <ResourceListOptionsProvider>
                   <ResourceSelectionProvider>
@@ -38,7 +38,7 @@ export default {
                   </ResourceSelectionProvider>
                 </ResourceListOptionsProvider>
               </ResourceGroupsContextProvider>
-            </FeaturesProvider>
+            </FeaturesValueProvider>
           </TiltSnackbarProvider>
         </MemoryRouter>
       )

diff --git a/web/src/OverviewTable.test.tsx b/web/src/OverviewTable.test.tsx
@@ -8,7 +8,7 @@ import {
   mockAnalyticsCalls,
 } from "./analytics_test_helpers"
 import { ApiButton } from "./ApiButton"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import { GroupByLabelView, TILTFILE_LABEL, UNLABELED_LABEL } from "./labels"
 import LogStore from "./LogStore"
 import OverviewTable, {
@@ -85,7 +85,7 @@ const tableViewWithSettings = ({
   return (
     <MemoryRouter initialEntries={["/"]}>
       <SnackbarProvider>
-        <FeaturesProvider value={features}>
+        <FeaturesValueProvider value={features}>
           <ResourceGroupsContextProvider>
             <ResourceListOptionsProvider
               initialValuesForTesting={resourceListOptions}
@@ -97,7 +97,7 @@ const tableViewWithSettings = ({
               </ResourceSelectionProvider>
             </ResourceListOptionsProvider>
           </ResourceGroupsContextProvider>
-        </FeaturesProvider>
+        </FeaturesValueProvider>
       </SnackbarProvider>
     </MemoryRouter>
   )

diff --git a/web/src/OverviewTableBulkActions.test.tsx b/web/src/OverviewTableBulkActions.test.tsx
@@ -11,7 +11,7 @@ import {
 } from "./analytics_test_helpers"
 import { buttonsByComponent } from "./ApiButton"
 import { mockUIButtonUpdates } from "./ApiButton.testhelpers"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import {
   BulkAction,
   buttonsByAction,
@@ -36,11 +36,11 @@ const OverviewTableBulkActionsTestWrapper = (props: {
   const { flagEnabled, resourceSelections } = props
   const features = new Features({ [Flag.DisableResources]: flagEnabled })
   return (
-    <FeaturesProvider value={features}>
+    <FeaturesValueProvider value={features}>
       <ResourceSelectionProvider initialValuesForTesting={resourceSelections}>
         <OverviewTableBulkActions uiButtons={TEST_UIBUTTONS} />
       </ResourceSelectionProvider>
-    </FeaturesProvider>
+    </FeaturesValueProvider>
   )
 }
 

diff --git a/web/src/OverviewTablePane.stories.tsx b/web/src/OverviewTablePane.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { MemoryRouter } from "react-router"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import OverviewTablePane from "./OverviewTablePane"
 import { ResourceGroupsContextProvider } from "./ResourceGroupsContext"
 import { ResourceListOptionsProvider } from "./ResourceListOptionsContext"
@@ -23,7 +23,7 @@ export default {
       })
       return (
         <MemoryRouter initialEntries={["/"]}>
-          <FeaturesProvider value={features}>
+          <FeaturesValueProvider value={features}>
             <ResourceListOptionsProvider>
               <StarredResourceMemoryProvider>
                 <ResourceGroupsContextProvider>
@@ -35,7 +35,7 @@ export default {
                 </ResourceGroupsContextProvider>
               </StarredResourceMemoryProvider>
             </ResourceListOptionsProvider>
-          </FeaturesProvider>
+          </FeaturesValueProvider>
         </MemoryRouter>
       )
     },

diff --git a/web/src/ResourceNav.test.tsx b/web/src/ResourceNav.test.tsx
@@ -1,3 +1,4 @@
+import { render } from "@testing-library/react"
 import { mount, ReactWrapper } from "enzyme"
 import { createMemoryHistory, MemoryHistory } from "history"
 import React from "react"
@@ -80,15 +81,15 @@ describe("resourceNav", () => {
   // Make sure that useResourceNav() doesn't break memoization.
   it("memoizes renders", () => {
     let renderCount = 0
-    let FakeEl = () => {
+    let FakeEl = React.memo(() => {
       useResourceNav()
       renderCount++
       return <div></div>
-    }
+    })
 
     let history = createMemoryHistory()
     let validateResource = () => true
-    let root = mount(
+    let { rerender } = render(
       <Router history={history}>
         <ResourceNavProvider validateResource={validateResource}>
           <FakeEl />
@@ -99,11 +100,17 @@ describe("resourceNav", () => {
     expect(renderCount).toEqual(1)
 
     // Make sure we don't re-render on a no-op history update.
-    root.setProps({ history })
+    rerender(
+      <Router history={history}>
+        <ResourceNavProvider validateResource={validateResource}>
+          <FakeEl />
+        </ResourceNavProvider>
+      </Router>
+    )
     expect(renderCount).toEqual(1)
 
     // Make sure we do re-render on a real location update.
-    history.push("/r/foo")
+    act(() => history.push("/r/foo"))
     expect(renderCount).toEqual(2)
   })
 })
diff --git a/web/src/SidebarItemView.test.tsx b/web/src/SidebarItemView.test.tsx
@@ -1,6 +1,6 @@
 import { mount } from "enzyme"
 import React from "react"
-import Features, { FeaturesProvider, Flag } from "./feature"
+import Features, { FeaturesValueProvider, Flag } from "./feature"
 import { LogAlertIndex } from "./LogStore"
 import PathBuilder from "./PathBuilder"
 import SidebarItem from "./SidebarItem"
@@ -27,15 +27,15 @@ const SidebarItemViewTestWrapper = ({
     [Flag.DisableResources]: disableResourcesEnabled ?? true,
   })
   return (
-    <FeaturesProvider value={features}>
+    <FeaturesValueProvider value={features}>
       <SidebarItemView
         item={item}
         selected={false}
         resourceView={ResourceView.Log}
         pathBuilder={PATH_BUILDER}
         groupView={false}
       />
-    </FeaturesProvider>
+    </FeaturesValueProvider>
   )
 }