feat: setup ff (#6532)

Setup feature flag for the new refactoring of the project overview page

---------

Co-authored-by: sjaanus <sellinjaanus@gmail.com>

frontend/src/component/project/Project/Project.tsx

@@ -43,6 +43,7 @@ import { UiFlags } from 'interfaces/uiConfig';
 import { HiddenProjectIconWithTooltip } from './HiddenProjectIconWithTooltip/HiddenProjectIconWithTooltip';
 import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRequestContext';
 import { ProjectApplications } from '../ProjectApplications/ProjectApplications';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -76,6 +77,8 @@ export const Project = () => {
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
 
+    const projectOverviewRefactor = useUiFlag('projectOverviewRefactor');
+
     const [showDelDialog, setShowDelDialog] = useState(false);
 
     const [
@@ -129,6 +132,14 @@ export const Project = () => {
         },
     ];
 
+    if (projectOverviewRefactor) {
+        tabs.splice(1, 0, {
+            title: 'Insights',
+            path: `${basePath}/insights`,
+            name: 'insights',
+        });
+    }
+
     const filteredTabs = tabs
         .filter((tab) => {
             if (tab.flag) {
@@ -299,6 +310,9 @@ export const Project = () => {
                 />
                 <Route path='environments' element={<ProjectEnvironment />} />
                 <Route path='archive' element={<ProjectFeaturesArchive />} />
+                {Boolean(projectOverviewRefactor) && (
+                    <Route path='insights' element={<div>Hello world</div>} />
+                )}
                 <Route path='logs' element={<ProjectLog />} />
                 <Route
                     path='change-requests'

frontend/src/interfaces/uiConfig.ts

@@ -79,6 +79,7 @@ export type UiFlags = {
     userAccessUIEnabled?: boolean;
     sdkReporting?: boolean;
     outdatedSdksBanner?: boolean;
+    projectOverviewRefactor?: string;
 };
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -132,6 +132,7 @@ exports[`should create default config 1`] = `
       "newStrategyConfigurationFeedback": false,
       "outdatedSdksBanner": false,
       "personalAccessTokensKillSwitch": false,
+      "projectOverviewRefactor": false,
       "queryMissingTokens": false,
       "responseTimeMetricsFix": false,
       "responseTimeWithAppNameKillSwitch": false,

src/lib/types/experimental.ts

@@ -55,7 +55,8 @@ export type IFlagKey =
     | 'scimApi'
     | 'displayEdgeBanner'
     | 'globalFrontendApiCache'
-    | 'returnGlobalFrontendApiCache';
+    | 'returnGlobalFrontendApiCache'
+    | 'projectOverviewRefactor';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -272,6 +273,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_RETURN_GLOBAL_FRONTEND_API_CACHE,
         false,
     ),
+    projectOverviewRefactor: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_PROJECT_OVERVIEW_REFACTOR,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -53,6 +53,7 @@ process.nextTick(async () => {
                         outdatedSdksBanner: true,
                         globalFrontendApiCache: true,
                         returnGlobalFrontendApiCache: false,
+                        projectOverviewRefactor: true,
                     },
                 },
                 authentication: {