Remove frontendNavigationUpdate flag (#4547)

https://linear.app/unleash/issue/1-1275/remove-frontendnavigationupdate-feature-flag

Shipping new navigation by default to everyone

frontend/src/component/admin/adminRoutes.ts

@@ -45,7 +45,6 @@ export const adminRoutes: INavigationMenuItem[] = [
     {
         path: '/admin/api',
         title: 'API access',
-        flag: 'frontendNavigationUpdate',
         menu: { adminSettings: true },
         group: 'access',
     },

frontend/src/component/admin/filterAdminRoutes.ts

@@ -6,8 +6,7 @@ export const filterAdminRoutes = (
         pro,
         enterprise,
         billing,
-    }: { pro?: boolean; enterprise?: boolean; billing?: boolean },
+    }: { pro?: boolean; enterprise?: boolean; billing?: boolean }
-    showEnterpriseOptionsInPro = true
 ): boolean => {
     const mode = menu?.mode;
     if (menu?.billing && !billing) return false;
@@ -21,7 +20,7 @@ export const filterAdminRoutes = (
             return true;
         }
 
-        if (showEnterpriseOptionsInPro && mode.includes('enterprise')) {
+        if (mode.includes('enterprise')) {
             return true;
         }
     }

frontend/src/component/admin/menu/AdminTabsMenu.tsx

@@ -26,9 +26,6 @@ export const AdminTabsMenu: VFC = () => {
 
     const activeTab = pathname.split('/')[2];
 
-    const showEnterpriseFeaturesInPro =
-        uiConfig?.flags?.frontendNavigationUpdate;
-
     const adminRoutes = useAdminRoutes();
     const group = adminRoutes.find(route =>
         pathname.includes(route.path)
@@ -65,8 +62,7 @@ export const AdminTabsMenu: VFC = () => {
                                     condition={Boolean(
                                         tab.menu.mode?.includes('enterprise') &&
                                             !tab.menu.mode?.includes('pro') &&
-                                            isPro() &&
+                                            isPro()
-                                            showEnterpriseFeaturesInPro
                                     )}
                                     show={
                                         <StyledBadgeContainer>

frontend/src/component/admin/useAdminRoutes.ts

@@ -7,9 +7,6 @@ import { filterByConfig, mapRouteLink } from 'component/common/util';
 export const useAdminRoutes = () => {
     const { uiConfig, isPro, isEnterprise } = useUiConfig();
     const { isBilling } = useInstanceStatus();
-    const showEnterpriseOptionsInPro = Boolean(
-        uiConfig?.flags?.frontendNavigationUpdate
-    );
     const routes = [...adminRoutes];
 
     if (uiConfig.flags.UNLEASH_CLOUD) {
@@ -25,15 +22,11 @@ export const useAdminRoutes = () => {
     return routes
         .filter(filterByConfig(uiConfig))
         .filter(route =>
-            filterAdminRoutes(
+            filterAdminRoutes(route?.menu, {
-                route?.menu,
+                enterprise: isEnterprise(),
-                {
+                pro: isPro(),
-                    enterprise: isEnterprise(),
+                billing: isBilling,
-                    pro: isPro(),
+            })
-                    billing: isBilling,
-                },
-                showEnterpriseOptionsInPro
-            )
         )
         .map(mapRouteLink);
 };

frontend/src/component/menu/Header/Header.tsx

@@ -114,8 +114,6 @@ const Header: VFC = () => {
     const { uiConfig, isOss } = useUiConfig();
     const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const [openDrawer, setOpenDrawer] = useState(false);
-    const showApiAccessInConfigure = !uiConfig?.flags?.frontendNavigationUpdate;
-
     const toggleDrawer = () => setOpenDrawer(prev => !prev);
     const onAdminClose = () => setAdminRef(null);
     const onConfigureClose = () => setConfigRef(null);
@@ -125,31 +123,9 @@ const Header: VFC = () => {
 
     const filteredMainRoutes = {
         mainNavRoutes: getCondensedRoutes(routes.mainNavRoutes)
-            .concat(
-                showApiAccessInConfigure
-                    ? [
-                          {
-                              path: '/admin/api',
-                              title: 'API access',
-                              menu: {},
-                          },
-                      ]
-                    : []
-            )
             .filter(filterByConfig(uiConfig))
             .map(mapRouteLink),
         mobileRoutes: getCondensedRoutes(routes.mobileRoutes)
-            .concat(
-                showApiAccessInConfigure
-                    ? [
-                          {
-                              path: '/admin/api',
-                              title: 'API access',
-                              menu: {},
-                          },
-                      ]
-                    : []
-            )
             .filter(filterByConfig(uiConfig))
             .map(mapRouteLink),
         adminRoutes,

frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx

@@ -54,10 +54,10 @@ const NavigationLink = ({
     handleClose,
     ...props
 }: INavigationLinkProps) => {
-    const { uiConfig, isPro } = useUiConfig();
+    const { isPro } = useUiConfig();
     const showEnterpriseBadgeToPro = Boolean(
-        uiConfig?.flags?.frontendNavigationUpdate &&
+        isPro() &&
-            isPro() &&
+            !props.mode?.includes('pro') &&
             props.mode?.includes('enterprise')
     );
 

frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx

@@ -50,23 +50,21 @@ export const NavigationMenu = ({
     anchorEl,
     style,
 }: INavigationMenuProps) => {
-    const { uiConfig, isPro, isOss } = useUiConfig();
+    const { isPro, isOss } = useUiConfig();
-    const showUpdatedMenu = uiConfig?.flags?.frontendNavigationUpdate;
 
     const showBadge = useCallback(
         (mode?: INavigationMenuItem['menu']['mode']) => {
             if (
                 isPro() &&
                 !mode?.includes('pro') &&
-                mode?.includes('enterprise') &&
+                mode?.includes('enterprise')
-                showUpdatedMenu
             ) {
                 return true;
             }
 
             return false;
         },
-        [isPro, showUpdatedMenu]
+        [isPro]
     );
 
     return (
@@ -81,7 +79,6 @@ export const NavigationMenu = ({
                 .map((option, i) => {
                     const previousGroup = options[i - 1]?.group;
                     const addDivider =
-                        showUpdatedMenu &&
                         previousGroup &&
                         previousGroup !== option.group &&
                         (!isOss() || option.group === 'log');

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

@@ -42,8 +42,6 @@ import { ImportModal } from './Import/ImportModal';
 import { IMPORT_BUTTON } from 'utils/testIds';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 
-const NAVIGATE_TO_EDIT_PROJECT = 'NAVIGATE_TO_EDIT_PROJECT';
-
 export const Project = () => {
     const projectId = useRequiredPathParam('projectId');
     const params = useQueryParams();
@@ -60,8 +58,6 @@ export const Project = () => {
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
-    const updatedNavigation = uiConfig?.flags?.frontendNavigationUpdate;
-
     const tabs = [
         {
             title: 'Overview',
@@ -84,32 +80,17 @@ export const Project = () => {
             name: 'change-request',
             isEnterprise: true,
         },
-        ...(updatedNavigation
+        {
-            ? [
+            title: 'Event log',
-                  {
+            path: `${basePath}/logs`,
-                      title: 'Event log',
+            name: 'logs',
-                      path: `${basePath}/logs`,
+        },
-                      name: 'logs',
+        {
-                  },
+            title: 'Project settings',
-                  {
+            path: `${basePath}/settings`,
-                      title: 'Project settings',
+            name: 'settings',
-                      path: `${basePath}/settings`,
+        },
-                      name: 'settings',
+    ].filter(tab => !(isOss() && tab.isEnterprise));
-                  },
-              ]
-            : [
-                  {
-                      title: 'Project settings',
-                      path: `${basePath}/settings`,
-                      name: 'settings',
-                  },
-                  {
-                      title: 'Event log',
-                      path: `${basePath}/logs`,
-                      name: 'logs',
-                  },
-              ]),
-    ].filter(tab => !updatedNavigation || !(isOss() && tab.isEnterprise));
 
     const activeTab = [...tabs]
         .reverse()
@@ -218,11 +199,10 @@ export const Project = () => {
                                     tab.isEnterprise ? 'end' : undefined
                                 }
                                 icon={
-                                    tab.isEnterprise &&
+                                    (tab.isEnterprise &&
-                                    isPro() &&
+                                        isPro() &&
-                                    updatedNavigation
+                                        enterpriseIcon) ||
-                                        ? enterpriseIcon
+                                    undefined
-                                        : undefined
                                 }
                             />
                         ))}

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

@@ -19,11 +19,9 @@ import { Box } from '@mui/material';
 
 export const ProjectSettings = () => {
     const location = useLocation();
-    const { uiConfig, isPro, isEnterprise } = useUiConfig();
+    const { isPro, isEnterprise } = useUiConfig();
     const navigate = useNavigate();
 
-    const updatedNavigation = uiConfig.flags?.frontendNavigationUpdate;
-
     const tabs: ITab[] = [
         {
             id: '',
@@ -33,7 +31,7 @@ export const ProjectSettings = () => {
             id: 'environments',
             label: 'Environments',
         },
-        ...(!updatedNavigation || isPro() || isEnterprise()
+        ...(isPro() || isEnterprise()
             ? [
                   {
                       id: 'access',
@@ -46,12 +44,11 @@ export const ProjectSettings = () => {
                   {
                       id: 'change-requests',
                       label: 'Change request configuration',
-                      icon:
+                      icon: isPro() ? (
-                          isPro() && updatedNavigation ? (
+                          <Box sx={{ marginLeft: 'auto' }}>
-                              <Box sx={{ marginLeft: 'auto' }}>
+                              <EnterpriseBadge />
-                                  <EnterpriseBadge />
+                          </Box>
-                              </Box>
+                      ) : undefined,
-                          ) : undefined,
                   },
               ]
             : []),

frontend/src/interfaces/uiConfig.ts

@@ -53,7 +53,6 @@ export interface IFlags {
     customRootRolesKillSwitch?: boolean;
     strategyVariant?: boolean;
     configurableFeatureTypeLifetimes?: boolean;
-    frontendNavigationUpdate?: boolean;
     segmentChangeRequests?: boolean;
     changeRequestReject?: boolean;
     lastSeenByEnvironment?: boolean;

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

@@ -80,7 +80,6 @@ exports[`should create default config 1`] = `
       "embedProxyFrontend": true,
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
-      "frontendNavigationUpdate": false,
       "googleAuthEnabled": false,
       "integrationsRework": false,
       "lastSeenByEnvironment": false,
@@ -117,7 +116,6 @@ exports[`should create default config 1`] = `
       "embedProxyFrontend": true,
       "featuresExportImport": true,
       "filterInvalidClientMetrics": false,
-      "frontendNavigationUpdate": false,
       "googleAuthEnabled": false,
       "integrationsRework": false,
       "lastSeenByEnvironment": false,

src/lib/types/experimental.ts

@@ -24,7 +24,6 @@ export type IFlagKey =
     | 'slackAppAddon'
     | 'configurableFeatureTypeLifetimes'
     | 'filterInvalidClientMetrics'
-    | 'frontendNavigationUpdate'
     | 'lastSeenByEnvironment'
     | 'segmentChangeRequests'
     | 'changeRequestReject'
@@ -114,10 +113,6 @@ const flags: IFlags = {
         process.env.FILTER_INVALID_CLIENT_METRICS,
         false,
     ),
-    frontendNavigationUpdate: parseEnvVarBoolean(
-        process.env.UNLEASH_NAVIGATION_UPDATE,
-        false,
-    ),
     lastSeenByEnvironment: parseEnvVarBoolean(
         process.env.LAST_SEEN_BY_ENVIRONMENT,
         false,

src/server-dev.ts

@@ -40,7 +40,6 @@ process.nextTick(async () => {
                         strategyVariant: true,
                         slackAppAddon: true,
                         configurableFeatureTypeLifetimes: true,
-                        frontendNavigationUpdate: true,
                         lastSeenByEnvironment: true,
                         segmentChangeRequests: true,
                         newApplicationList: true,