Add redirects to integrations instead of sources for settings

src/components/Header/Tools.tsx

@@ -27,6 +27,7 @@ import { ReduxState } from '../../redux/store';
 import BellIcon from '@patternfly/react-icons/dist/dynamic/icons/bell-icon';
 import { toggleNotificationsDrawer } from '../../redux/actions';
 import useWindowWidth from '../../hooks/useWindowWidth';
+import { usePreviewFlag } from '../../utils/usePreviewFlag';
 
 const isITLessEnv = ITLess();
 
@@ -80,6 +81,7 @@ const Tools = () => {
     isRhosakEntitled: false,
     isDemoAcc: false,
   });
+  const enableIntegrations = usePreviewFlag('platform.sources.integrations');
   const { xs } = useWindowWidth();
   const user = useSelector(({ chrome: { user } }: ReduxState) => user!);
   const unreadNotifications = useSelector(({ chrome: { notifications } }: ReduxState) => notifications.data.some((item) => !item.read));
@@ -88,7 +90,7 @@ const Tools = () => {
   const libjwt = useContext(LibtJWTContext);
   const intl = useIntl();
   const location = useLocation();
-  const settingsPath = isITLessEnv ? `/settings/my-user-access` : `/settings/sources`;
+  const settingsPath = isITLessEnv ? `/settings/my-user-access` : enableIntegrations ? `/settings/integrations` : '/settings/sources';
   const identityAndAccessManagmentPath = '/iam/user-access/users';
   const betaSwitcherTitle = `${isBeta() ? intl.formatMessage(messages.stopUsing) : intl.formatMessage(messages.use)} ${intl.formatMessage(
     messages.betaRelease

src/components/Routes/Routes.tsx

@@ -1,10 +1,13 @@
-import React, { Suspense, lazy } from 'react';
+import React, { Suspense, lazy, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import ChromeRoute from '../ChromeRoute';
 import NotFoundRoute from '../NotFoundRoute';
 import LoadingFallback from '../../utils/loading-fallback';
 import { ReduxState } from '../../redux/store';
+import { usePreviewFlag } from '../../utils/usePreviewFlag';
+
+const INTEGRATION_SOURCES = 'platform.sources.integrations';
 
 const QuickstartCatalogRoute = lazy(() => import('../QuickstartsCatalogRoute'));
 
@@ -17,9 +20,21 @@ const redirects = [
     path: '/docs',
     to: '/api/docs',
   },
+  {
+    path: '/settings',
+    to: '/settings/integrations',
+    previewFlag: {
+      value: true,
+      name: INTEGRATION_SOURCES,
+    },
+  },
   {
     path: '/settings',
     to: '/settings/sources',
+    previewFlag: {
+      value: false,
+      name: INTEGRATION_SOURCES,
+    },
   },
   {
     path: '/user-preferences',
@@ -52,6 +67,8 @@ export type RoutesProps = {
 };
 
 const ChromeRoutes = ({ routesProps }: RoutesProps) => {
+  const enableIntegrations = usePreviewFlag(INTEGRATION_SOURCES);
+  const previewFlags = useMemo<Record<string, boolean>>(() => ({ INTEGRATION_SOURCES: enableIntegrations }), [enableIntegrations]);
   const moduleRoutes = useSelector(({ chrome: { moduleRoutes } }: ReduxState) => moduleRoutes);
   const showBundleCatalog = localStorage.getItem('chrome:experimental:quickstarts') === 'true';
 
@@ -67,9 +84,15 @@ const ChromeRoutes = ({ routesProps }: RoutesProps) => {
           }
         />
       )}
-      {redirects.map(({ path, to }) => (
-        <Route key={path} path={path} element={<Navigate replace to={to} />} />
-      ))}
+      {redirects.map(({ path, to, previewFlag }) => {
+        if (previewFlag) {
+          const found = Object.keys(previewFlags).find((item) => item === previewFlag.name);
+          if (previewFlags[found as string] !== previewFlag.value) {
+            return null;
+          }
+        }
+        return <Route key={path} path={path} element={<Navigate replace to={to} />} />;
+      })}
       {moduleRoutes.map((app) => (
         <Route key={app.path} path={app.absolute ? app.path : `${app.path}/*`} element={<ChromeRoute {...routesProps} {...app} />} />
       ))}

src/utils/usePreviewFlag.ts

@@ -0,0 +1,12 @@
+import { useFlag } from '@unleash/proxy-client-react';
+import { isBeta, isProd } from './common';
+
+export const usePreviewFlag = (flag: string) => {
+  const notificationsOverhaul = useFlag(flag);
+
+  if (isProd() && !isBeta()) {
+    return false;
+  }
+
+  return notificationsOverhaul;
+};