Flaky ManageHosts page for observers (#2116)

* fixed blank hosts screen; 403 for enroll secret

* lint fix

* added changes log

changes/2112-flaky-observer-hosts

@@ -0,0 +1 @@
+- Fixed intermittent blank screen for observers on manage hosts page

frontend/components/App/App.tsx

@@ -26,9 +26,15 @@ interface IRootState {
 
 const App = ({ children }: IAppProps) => {
   const dispatch = useDispatch();
-  const { setCurrentUser, setConfig } = useContext(AppContext);
   const user = useSelector((state: IRootState) => state.auth.user);
   const queryClient = new QueryClient();
+  const {
+    setCurrentUser,
+    setConfig,
+    currentUser,
+    isGlobalObserver,
+    isOnlyObserver,
+  } = useContext(AppContext);
 
   useDeepEffect(() => {
     // on page refresh
@@ -41,10 +47,22 @@ const App = ({ children }: IAppProps) => {
       dispatch(getConfig())
         .then((config: IConfig) => setConfig(config))
         .catch(() => false);
-      dispatch(getEnrollSecret()).catch(() => false);
     }
   }, [user]);
 
+  useDeepEffect(() => {
+    const canGetEnrollSecret =
+      currentUser &&
+      typeof isGlobalObserver !== "undefined" &&
+      !isGlobalObserver &&
+      typeof isOnlyObserver !== "undefined" &&
+      !isOnlyObserver;
+
+    if (canGetEnrollSecret) {
+      dispatch(getEnrollSecret()).catch(() => false);
+    }
+  }, [currentUser, isGlobalObserver, isOnlyObserver]);
+
   const wrapperStyles = classnames("wrapper");
   return (
     <QueryClientProvider client={queryClient}>

frontend/context/app.tsx

@@ -11,14 +11,14 @@ type Props = {
 type InitialStateType = {
   currentUser: IUser | null;
   config: IConfig | null;
-  isFreeTier: boolean;
-  isPremiumTier: boolean;
-  isGlobalAdmin: boolean;
-  isGlobalMaintainer: boolean;
-  isGlobalObserver: boolean;
-  isOnGlobalTeam: boolean;
-  isAnyTeamMaintainer: boolean;
-  isOnlyObserver: boolean;
+  isFreeTier: boolean | undefined;
+  isPremiumTier: boolean | undefined;
+  isGlobalAdmin: boolean | undefined;
+  isGlobalMaintainer: boolean | undefined;
+  isGlobalObserver: boolean | undefined;
+  isOnGlobalTeam: boolean | undefined;
+  isAnyTeamMaintainer: boolean | undefined;
+  isOnlyObserver: boolean | undefined;
   setCurrentUser: (user: IUser) => void;
   setConfig: (config: IConfig) => void;
 };
@@ -26,14 +26,14 @@ type InitialStateType = {
 const initialState = {
   currentUser: null,
   config: null,
-  isFreeTier: false,
-  isPremiumTier: false,
-  isGlobalAdmin: false,
-  isGlobalMaintainer: false,
-  isGlobalObserver: false,
-  isOnGlobalTeam: false,
-  isAnyTeamMaintainer: false,
-  isOnlyObserver: false,
+  isFreeTier: undefined,
+  isPremiumTier: undefined,
+  isGlobalAdmin: undefined,
+  isGlobalMaintainer: undefined,
+  isGlobalObserver: undefined,
+  isOnGlobalTeam: undefined,
+  isAnyTeamMaintainer: undefined,
+  isOnlyObserver: undefined,
   setCurrentUser: () => null,
   setConfig: () => null,
 };

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -223,12 +223,29 @@ export class ManageHostsPage extends PureComponent {
     /* eslint-enable no-alert, react/no-did-mount-set-state */
   }
 
-  componentWillReceiveProps() {
+  /* eslint-disable react/no-did-update-set-state */
+  componentDidUpdate() {
+    // TODO: Very temporary until this component becomes functional
+    // this was so we could remove redux for selectedOsqueryTable - 8/31/21 - MP
+    if (
+      !isEqual(
+        this.context.selectedOsqueryTable,
+        this.state.selectedOsqueryTable
+      )
+    ) {
+      const { selectedOsqueryTable } = this.context;
+      this.setState({ selectedOsqueryTable });
+    }
+
+    // end TODO
+
     const { config, dispatch, isPremiumTier } = this.props;
     const { isConfigLoaded, isTeamsLoaded, isTeamsLoading } = this.state;
+
     if (!isConfigLoaded && !isEmpty(config)) {
       this.setState({ isConfigLoaded: true });
     }
+
     if (isConfigLoaded && isPremiumTier && !isTeamsLoaded && !isTeamsLoading) {
       this.setState({ isTeamsLoading: true });
       dispatch(teamActions.loadAll({}))
@@ -254,21 +271,6 @@ export class ManageHostsPage extends PureComponent {
         });
     }
   }
-
-  // TODO: Very temporary until this component becomes functional
-  // this was so we could remove redux for selectedOsqueryTable - 8/31/21 - MP
-  /* eslint-disable react/no-did-update-set-state */
-  componentDidUpdate() {
-    if (
-      !isEqual(
-        this.context.selectedOsqueryTable,
-        this.state.selectedOsqueryTable
-      )
-    ) {
-      const { selectedOsqueryTable } = this.context;
-      this.setState({ selectedOsqueryTable });
-    }
-  }
   /* eslint-enable react/no-did-update-set-state */
 
   componentWillUnmount() {