Code review comments - convert satellite token to module

config/webpack.plugins.js

@@ -37,6 +37,7 @@ const plugins = (dev = false, beta = false, restricted = false) => {
         './DownloadButton': resolve(__dirname, '../src/pdf/DownloadButton.tsx'),
         './LandingNavFavorites': resolve(__dirname, '../src/components/FavoriteServices/LandingNavFavorites.tsx'),
         './DashboardFavorites': resolve(__dirname, '../src/components/FavoriteServices/DashboardFavorites.tsx'),
+        './SatelliteToken': resolve(__dirname, '../src/layouts/SatelliteToken.tsx'),
       },
       shared: [
         { react: { singleton: true, eager: true, requiredVersion: deps.react } },

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment, Suspense, useContext, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { useFlag } from '@unleash/proxy-client-react';
 import Tools from './Tools';
 import UnAuthtedHeader from './UnAuthtedHeader';
 import { MastheadBrand, MastheadContent, MastheadMain } from '@patternfly/react-core/dist/dynamic/components/Masthead';
@@ -15,7 +16,6 @@ import { DeepRequired } from 'utility-types';
 
 import './Header.scss';
 import { activationRequestURLs } from '../../utils/consts';
-import { ITLess } from '../../utils/common';
 import SearchInput from '../Search/SearchInput';
 import AllServicesDropdown from '../AllServicesDropdown/AllServicesDropdown';
 import Breadcrumbs, { Breadcrumbsprops } from '../Breadcrumbs/Breadcrumbs';
@@ -40,14 +40,14 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
   const { user } = useContext(ChromeAuthContext) as DeepRequired<ChromeAuthContextValue>;
   const search = new URLSearchParams(window.location.search).keys().next().value;
   const isActivationPath = activationRequestURLs.includes(search);
-  const isITLessEnv = ITLess();
   const { pathname } = useLocation();
   const noBreadcrumb = !['/', '/allservices', '/favoritedservices'].includes(pathname);
   const { md, lg } = useWindowWidth();
   const [searchOpen, setSearchOpen] = useState(false);
   const hideAllServices = (isOpen: boolean) => {
     setSearchOpen(isOpen);
   };
+  const isITLess = useFlag('platform.chrome.itless');
 
   return (
     <Fragment>
@@ -64,18 +64,18 @@ export const Header = ({ breadcrumbsProps }: { breadcrumbsProps?: Breadcrumbspro
         </Toolbar>
       </MastheadMain>
       <MastheadContent className="pf-v5-u-mx-md pf-v5-u-mx-0-on-2xl">
-        {user?.identity?.org_id && !isITLessEnv && ReactDOM.createPortal(<FeedbackRoute />, document.body)}
+        {user?.identity?.org_id && !isITLess && ReactDOM.createPortal(<FeedbackRoute />, document.body)}
         {user && isActivationPath && <Activation user={user} request={search} />}
         <Toolbar isFullHeight>
           <ToolbarContent>
             <ToolbarGroup variant="filter-group">
               {user && (
                 <ToolbarItem>
                   {!(!md && searchOpen) && <AllServicesDropdown />}
-                  {isITLessEnv && user?.identity?.user?.is_org_admin && <SatelliteLink />}
+                  {isITLess && user?.identity?.user?.is_org_admin && <SatelliteLink />}
                 </ToolbarItem>
               )}
-              {user && !isITLessEnv && (
+              {user && !isITLess && (
                 <ToolbarItem className="pf-v5-m-hidden pf-v5-m-visible-on-xl">
                   <ContextSwitcher user={user} className="data-hj-suppress sentry-mask" />
                 </ToolbarItem>

src/components/RootApp/ScalprumRoot.tsx

@@ -14,7 +14,6 @@ import chromeHistory from '../../utils/chromeHistory';
 import DefaultLayout from '../../layouts/DefaultLayout';
 import AllServices from '../../layouts/AllServices';
 import FavoritedServices from '../../layouts/FavoritedServices';
-import SatelliteToken from '../../layouts/SatelliteToken';
 import historyListener from '../../utils/historyListener';
 import SegmentContext from '../../analytics/SegmentContext';
 import LoadingFallback from '../../utils/loading-fallback';
@@ -259,7 +258,6 @@ const ScalprumRoot = memo(
                   }
                 />
               )}
-              {ITLess() && <Route path="/insights/satellite" element={<SatelliteToken />} />}
               <Route path="/security" element={<DefaultLayout {...props} />} />
               <Route path="*" element={<DefaultLayout Sidebar={Navigation} {...props} />} />
             </Routes>

src/components/Satellite/IPWhitelistTable.tsx

@@ -42,21 +42,19 @@ const IPWhitelistTable: React.FC = () => {
   const [isIPRemoveModalOpen, setIsIPRemoveModalOpen] = useState(false);
 
   const getIPAddresses = () => {
-    return axios.get('/api/v1/allowlist');
+    return axios.get('/api/mbop/v1/allowlist');
   };
 
   const removeIPAddresses = (ipBlock: string) => {
-    return axios.delete(`/api/v1/allowlist?block=${ipBlock}`);
+    return axios.delete(`/api/mbop/v1/allowlist?block=${ipBlock}`);
   };
 
   const addIPAddresses = (ipBlock: string) => {
-    return axios.post('/api/v1/allowlist', { ip_block: ipBlock });
+    return axios.post('/api/mbop/v1/allowlist', { ip_block: ipBlock });
   };
 
   useEffect(() => {
     if (!loaded && !actionPending) {
-      // If we fail to load the IP blocks, show the empty state by default after 10 seconds
-      setTimeout(() => setLoaded(true), 10000);
       getIPAddresses()
         .then((res) => {
           setAllAddresses(res.data);
@@ -172,7 +170,7 @@ const IPWhitelistTable: React.FC = () => {
           <TextInput isDisabled value={removeAddresses}></TextInput>
         </FormGroup>
         <ActionGroup>
-          <Button onClick={onRemoveAddresses} isDisabled={actionPending}>
+          <Button onClick={onRemoveAddresses} isDisabled={actionPending} variant="danger">
             Remove
           </Button>
         </ActionGroup>

src/layouts/SatelliteToken.tsx

@@ -1,21 +1,26 @@
 import React, { useContext, useEffect, useState } from 'react';
 import axios from 'axios';
-import { Header } from '../components/Header/Header';
+import { useFlag } from '@unleash/proxy-client-react';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Card, CardBody, CardTitle } from '@patternfly/react-core/dist/dynamic/components/Card';
 import { ClipboardCopy } from '@patternfly/react-core/dist/dynamic/components/ClipboardCopy';
 import { List, ListComponent, ListItem, OrderType } from '@patternfly/react-core/dist/dynamic/components/List';
-import { Masthead } from '@patternfly/react-core/dist/dynamic/components/Masthead';
 import { Page, PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
 import SatelliteTable from '../components/Satellite/SatelliteTable';
 import IPWhitelistTable from '../components/Satellite/IPWhitelistTable';
 import { getEnv } from '../utils/common';
 import ChromeAuthContext from '../auth/ChromeAuthContext';
+import NotFoundRoute from '../components/NotFoundRoute';
 
 const SatelliteToken: React.FC = () => {
   const [token, setToken] = useState('');
   const [error, setError] = useState(null);
   const { user } = useContext(ChromeAuthContext);
+  const isITLess = useFlag('platform.chrome.itless');
+
+  if (!isITLess) {
+    return <NotFoundRoute />;
+  }
 
   const generateToken = () => {
     axios
@@ -41,11 +46,6 @@ const SatelliteToken: React.FC = () => {
       <Page
         className="chr-c-all-services"
         onPageResize={null} // required to disable PF resize observer that causes re-rendring issue
-        header={
-          <Masthead className="chr-c-masthead">
-            <Header />
-          </Masthead>
-        }
       >
         <PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>
           <Card>