Gate personal user page behind feature flag

Author: coder13

src/App.tsx

@@ -5,6 +5,7 @@ import client from './apolloClient';
 import { usePageTracking } from './hooks/usePageTracking';
 import { CompetitionLayout } from './layouts/CompetitionLayout';
 import { RootLayout } from './layouts/RootLayout';
+import { FEATURE_FLAGS } from './lib/featureFlags';
 import About from './pages/About';
 import CompetitionAdmin from './pages/Competition/Admin';
 import CompetitionEvents from './pages/Competition/ByGroup/Events';
@@ -169,9 +170,16 @@ const Navigation = () => {
           <Route path="*" element={<p>Path not resolved</p>} />
         </Route>
         <Route path="/users/:userId" element={<UserLogin />} />
-        <Route path="/me" element={<Navigate to="/me/competitions" replace />} />
-        <Route path="/me/results/:resultsMode" element={<Navigate to="/me/results" replace />} />
-        <Route path="/me/:tab" element={<UserPage />} />
+        {FEATURE_FLAGS.personalUserPage && (
+          <>
+            <Route path="/me" element={<Navigate to="/me/competitions" replace />} />
+            <Route
+              path="/me/results/:resultsMode"
+              element={<Navigate to="/me/results" replace />}
+            />
+            <Route path="/me/:tab" element={<UserPage />} />
+          </>
+        )}
         <Route path="about" element={<About />} />
         <Route path="live-activities" element={<LiveActivitiesAbout />} />
         <Route path="settings" element={<Settings />} />

src/layouts/RootLayout/Header.tsx

@@ -5,6 +5,7 @@ import { Link, useParams } from 'react-router-dom';
 import { Popover } from 'react-tiny-popover';
 import { useCompetition } from '@/hooks/queries/useCompetition';
 import { UserCompsResponse } from '@/lib/api';
+import { FEATURE_FLAGS } from '@/lib/featureFlags';
 import { useAuth } from '@/providers/AuthProvider';
 import { useWCIF } from '@/providers/WCIFProvider';
 
@@ -76,9 +77,11 @@ export default function Header() {
             <div
               className="z-50 mt-2 border-2 shadow-xl bg-panel border-tertiary-weak"
               onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
-              <Link to="/me" className="block w-32 px-3 py-2 link-inline hover-bg-tertiary">
-                My profile
-              </Link>
+              {FEATURE_FLAGS.personalUserPage && (
+                <Link to="/me" className="block w-32 px-3 py-2 link-inline hover-bg-tertiary">
+                  My profile
+                </Link>
+              )}
               <Link to="/settings" className="block w-32 px-3 py-2 link-inline hover-bg-tertiary">
                 Settings
               </Link>

src/lib/featureFlags.ts

@@ -0,0 +1,8 @@
+const enabledValues = new Set(['1', 'true', 'yes', 'on']);
+
+const isEnabled = (value: string | undefined) =>
+  value ? enabledValues.has(value.toLowerCase()) : false;
+
+export const FEATURE_FLAGS = {
+  personalUserPage: isEnabled(import.meta.env.VITE_FEATURE_PERSONAL_USER_PAGE),
+};

src/vite-env.d.ts

@@ -8,4 +8,5 @@ interface ImportMetaEnv {
   readonly VITE_NOTIFY_COMP_ORIGIN?: string;
   readonly VITE_NOTIFYCOMP_API_ORIGIN?: string;
   readonly VITE_NOTIFYCOMP_WS_ORIGIN?: string;
+  readonly VITE_FEATURE_PERSONAL_USER_PAGE?: string;
 }