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 } },

frontend.yml

@@ -19,6 +19,11 @@ objects:
         manifestLocation: "/apps/chrome/js/fed-mods.json"
         config:
           ssoUrl: ${SSO_URL}
+        modules:
+          - id: 'satellite-token'
+            module: './SatelliteToken'
+            routes:
+              - pathname: /insights/satellite
       frontend:
         paths:
           - /

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/layouts/SatelliteToken.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import axios from 'axios';
+import { useFlag } from '@unleash/proxy-client-react';
 import { Header } from '../components/Header/Header';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Card, CardBody, CardTitle } from '@patternfly/react-core/dist/dynamic/components/Card';
@@ -11,11 +12,17 @@ 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