Feature Flags Basic Implementation

src/components/App.tsx

@@ -28,6 +28,8 @@ import { WSOToken } from "../lib/types";
 // More component imports
 const Scheduler = lazy(() => import("./views/CourseScheduler/Scheduler"));
 const About = lazy(() => import("./views/Misc/About"));
+const Dashboard = lazy(() => import("./views/AdminTools/dashboard"));
+
 const FAQ = lazy(() => import("./views/Misc/FAQ"));
 const Team = lazy(() => import("./views/Misc/Team"));
 const MobilePrivacyPolicy = lazy(
@@ -194,15 +196,27 @@ const App = () => {
               </RequireScope>
             }
           />
+
           <Route path="schedulecourses" element={<Scheduler />} />
           {/* Static Content Pages */}
+
           <Route path="about" element={<About />} />
           <Route path="faq" element={<FAQ />} />
           <Route path="team" element={<Team />} />
+          <Route
+            path="admin"
+            element={
+              <RequireScope token={apiToken} name="admin.dashboard">
+                <Dashboard />
+              </RequireScope>
+            }
+          />
+
           <Route
             path="mobile-privacy-policy"
             element={<MobilePrivacyPolicy />}
           />
+
           <Route path="login" element={<Login />} />
           {/* Error-handling Pages */}
           <Route path="403" element={<Error403 />} />

src/components/Nav.tsx

@@ -1,6 +1,8 @@
 // React Imports
 import React, { useEffect, useState } from "react";
 
+import "./stylesheets/Nav.css";
+
 // Redux imports
 import { getWSO, getCurrUser } from "../lib/authSlice";
 import { removeCredentials } from "../lib/authSlice";
@@ -11,6 +13,32 @@ import { Link } from "react-router-dom";
 import history from "../lib/history";
 import { userTypeStudent } from "../constants/general";
 
+// Feature flag imports
+import { RootState } from "../lib/store";
+
+interface FeatureFlagElementProps {
+  element: React.ReactElement;
+  flag: keyof RootState["featureFlagState"];
+}
+
+const FeatureFlagElement: React.FC<FeatureFlagElementProps> = ({
+  element,
+  flag,
+}) => {
+  const enabled = useAppSelector(
+    (state: RootState) => state.featureFlagState[flag]
+  );
+
+  return (
+    <div className="nav_feature_div">
+      {console.log(enabled)}
+      {enabled === "Enabled" ? (
+        <li className="nav_feature_item">{element}</li>
+      ) : null}
+    </div>
+  );
+};
+
 const Nav = () => {
   const dispatch = useAppDispatch();
   const currUser = useAppSelector(getCurrUser);
@@ -111,18 +139,42 @@ const Nav = () => {
               </>
             )}
 
-            <li>
-              <Link to="faq">FAQ</Link>
-            </li>
-            <li>
-              <a href="/wiki/">Wiki</a>
-            </li>
-            <li>
-              <Link to="about">About</Link>
-            </li>
+            <FeatureFlagElement
+              element={<Link to="faq">FAQ</Link>}
+              flag="enableFAQ"
+            />
+            <FeatureFlagElement
+              element={<a href="/wiki/">Wiki</a>}
+              flag="enableWiki"
+            />
+            <FeatureFlagElement
+              element={<Link to="about">About</Link>}
+              flag="enableAbout"
+            />
+
+            {/* {featureFlagElement(
+              <a href="/wiki/">Wiki</a>,
+              "enableWiki",
+
+
+              // getFeatureFlag(currentState, "enableWiki")
+            )}
+
+            {featureFlagElement(
+              <Link to="about">About</Link>,
+              "enableAbout",
+
+
+              // getFeatureFlag(currentState, "enableAbout")
+            )} */}
             <li>
               <Link to="schedulecourses">Course Scheduler</Link>
             </li>
+            {currUser?.admin && (
+              <li>
+                <Link to="admin">Admin Dashboard</Link>
+              </li>
+            )}
             {ephmatchVisibility > 0 && (
               <li>
                 <Link

src/components/stylesheets/Nav.css

@@ -0,0 +1,7 @@
+.nav_feature_div {
+  display: inline-block;
+}
+
+.nav_feature_div:not(:empty) {
+  padding-right: 2em;
+}

src/components/views/AdminTools/dashboard.tsx

@@ -0,0 +1,41 @@
+// React imports
+import React from "react";
+// import { useDispatch, useSelector } from "react-redux";
+import { FFState, toggleFeatureFlag } from "../../../lib/featureFlagSlice";
+import { RootState } from "../../../lib/store";
+import { useAppDispatch, useAppSelector } from "../../../lib/store";
+
+const Dashboard = () => {
+  const dispatch = useAppDispatch();
+  const featureFlagState = useAppSelector(
+    (state: RootState) => state.featureFlagState
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleToggle = (myflag: any, newState: FFState) => {
+    dispatch(toggleFeatureFlag({ flag: myflag, value: newState }));
+  };
+
+  return (
+    <div>
+      <p>Dashboard</p>
+      {Object.entries(featureFlagState).map(
+        ([key, value]) =>
+          !(key[0] === "_") && (
+            <div key={key}>
+              {Object.entries(FFState).map(([stateKey, stateValue]) => (
+                <button
+                  key={key + stateKey}
+                  onClick={() => handleToggle(key, stateKey as FFState)}
+                >
+                  {"Set " + key.slice(6, key.length) + " to " + stateKey}
+                </button>
+              ))}
+            </div>
+          )
+      )}
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/views/Misc/About.jsx

@@ -2,8 +2,9 @@
 import React from "react";
 import DoughtyBanner from "../../../assets/images/banners/Doughty.jpg";
 import { Link } from "react-router-dom";
+import { useAppSelector } from "../../../lib/store";
 
-const About = () => {
+const AboutPreRelease = () => {
   return (
     <div className="article">
       <div className="about-banner">
@@ -118,4 +119,19 @@ const About = () => {
   );
 };
 
+const About = () => {
+  const enableAbout = useAppSelector(
+    (state) => state.featureFlagState["enableAbout"]
+  );
+
+  return (
+    <div>
+      {enableAbout === "Enabled" ? (
+        <AboutPreRelease />
+      ) : (
+        <p>Feature {enableAbout}</p>
+      )}
+    </div>
+  );
+};
 export default About;

src/components/views/Misc/FAQ.jsx

@@ -1,7 +1,8 @@
 // React imports
 import React from "react";
+import { useAppSelector } from "../../../lib/store";
 
-const FAQ = () => {
+const FAQPreRelease = () => {
   return (
     <div className="article">
       <section>
@@ -127,4 +128,16 @@ const FAQ = () => {
   );
 };
 
+const FAQ = () => {
+  const enableFAQ = useAppSelector(
+    (state) => state.featureFlagState["enableFAQ"]
+  );
+
+  return (
+    <div>
+      {enableFAQ === "Enabled" ? <FAQPreRelease /> : <p>Feature {enableFAQ}</p>}
+    </div>
+  );
+};
+
 export default FAQ;

src/lib/featureFlagSlice.ts

@@ -0,0 +1,45 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+// const API_ADDRESS = "http://localhost:8080";
+
+export enum FFState {
+  Enabled = "Enabled",
+  Disabled = "Disabled",
+  Pending = "Pending",
+}
+
+interface FeatureFlagsState {
+  enableAbout: FFState;
+  enableWiki: FFState;
+  enableFAQ: FFState;
+
+  // Add more feature flags as needed
+}
+
+export const initialState: FeatureFlagsState = {
+  enableAbout: FFState.Enabled,
+  enableWiki: FFState.Enabled,
+  enableFAQ: FFState.Enabled,
+};
+
+const featureFlagSlice = createSlice({
+  name: "featureFlags",
+  initialState,
+  reducers: {
+    toggleFeatureFlag: (
+      state,
+      action: PayloadAction<{ flag: keyof FeatureFlagsState; value: FFState }>
+    ) => {
+      const { flag, value } = action.payload;
+      if (flag in state) {
+        state[flag] = value;
+      }
+    },
+  },
+});
+
+export const { toggleFeatureFlag } = featureFlagSlice.actions;
+
+// export const getFeatureFlag = (state: FeatureFlagsState, flag: keyof FeatureFlagsState) => featureFlagsState[flag];
+
+export default featureFlagSlice.reducer;

src/lib/store.ts

@@ -12,7 +12,12 @@ import {
 } from "redux-persist";
 import storage from "redux-persist/lib/storage";
 
-import { courseReducer, schedulerUtilReducer, authReducer } from "../reducers";
+import {
+  courseReducer,
+  schedulerUtilReducer,
+  authReducer,
+  featureFlagReducer,
+} from "../reducers";
 
 const persistedAuthReducer = persistReducer(
   { key: "auth", storage, whitelist: ["identityToken"] },
@@ -24,11 +29,17 @@ const persistedCourseSchedulerReducer = persistReducer(
   schedulerUtilReducer
 );
 
+const persistedFeatureFlagReducer = persistReducer(
+  { key: "featureFlags", storage },
+  featureFlagReducer
+);
+
 const store = configureStore({
   reducer: {
     courseState: courseReducer,
     schedulerUtilState: persistedCourseSchedulerReducer,
     authState: persistedAuthReducer,
+    featureFlagState: persistedFeatureFlagReducer,
   },
   // this is to disable React Toolkit's error message "A non-serializable value was detected in the state"
   // TODO: stop using non-serializable object `authState.wso` and `schedulerUtilState.gapi`

src/reducers/index.ts

@@ -1,14 +1,23 @@
 import courseReducer from "./course";
 import schedulerUtilReducer from "./schedulerUtils";
 import authReducer from "../lib/authSlice";
+import featureFlagReducer from "../lib/featureFlagSlice";
+
 import goodrichReducer from "./goodrich";
 
 const rootReducer = {
   courseState: courseReducer,
   schedulerUtilState: schedulerUtilReducer,
   authState: authReducer,
   goodrichState: goodrichReducer,
+  featureFlagState: featureFlagReducer,
 };
 
 export default rootReducer;
-export { courseReducer, schedulerUtilReducer, authReducer, goodrichReducer };
+export {
+  courseReducer,
+  schedulerUtilReducer,
+  authReducer,
+  goodrichReducer,
+  featureFlagReducer,
+};

src/router-permissions.js

@@ -35,6 +35,10 @@ const routePermissions = {
     tokenLevel: 3,
     scopes: [scopes.ScopeGoodrich, scopes.ScopeGoodrichManager],
   },
+  "admin.dashboard": {
+    tokenLevel: 3,
+    scopes: [scopes.ScopeAdminAll],
+  },
 };
 
 /**