Merge pull request #1200 from IntersectMBO/chore/add-proposal-discuss…

…ion-forum-enable-feature-flag

chore: add proposal discussion forum feature flag

.github/workflows/build-and-deploy-dev.yml

@@ -3,11 +3,21 @@ run-name: Deploy by @${{ github.actor }}
 
 on:
   workflow_dispatch:
+    inputs:
+      isProposalDiscussionForumEnabled:
+        description: "Enable proposal discussion forum"
+        required: true
+        type: choice
+        default: "disabled"
+        options:
+          - "enabled"
+          - "disabled"
 
 env:
   ENVIRONMENT: "dev"
   CARDANO_NETWORK: "sanchonet"
   DOMAIN: "dev-sanchonet.govtool.byron.network"
+  IS_PROPOSAL_DISCUSSION_FORUM_ENABLED: ${{ inputs.isProposalDiscussionForumEnabled == 'enabled' }}
 
 jobs:
   deploy:

govtool/frontend/src/App.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { Modal, ScrollToTop } from "@atoms";
 import { PATHS, PDF_PATHS } from "@consts";
-import { useCardano, useModal } from "@context";
+import { useCardano, useFeatureFlag, useModal } from "@context";
 import { useWalletConnectionListener } from "@hooks";
 import {
   DashboardCards,
@@ -34,12 +34,12 @@ import {
   getItemFromLocalStorage,
   WALLET_LS_KEY,
   removeItemFromLocalStorage,
-  isDevEnv,
 } from "@utils";
 
 import { PDFWrapper } from "./components/organisms/PDFWrapper";
 
 export default () => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const { enable, isEnabled } = useCardano();
   const navigate = useNavigate();
   const { modal, openModal, modals } = useModal();
@@ -81,7 +81,7 @@ export default () => {
   }, [checkTheWalletIsActive]);
 
   useEffect(() => {
-    if (!isDevEnv) return;
+    if (!isProposalDiscussionForumEnabled) return;
     if (
       window.location.pathname.includes(PDF_PATHS.proposalDiscussion) &&
       !window.location.pathname.includes(PATHS.proposalPillar.replace("/*", ""))
@@ -101,7 +101,7 @@ export default () => {
       <Routes>
         <Route path={PATHS.home} element={<Home />} />
         <Route path={PATHS.governanceActions} element={<GovernanceActions />} />
-        {isDevEnv && !isEnabled && (
+        {isProposalDiscussionForumEnabled && !isEnabled && (
           <Route path={PATHS.proposalPillar} element={<PDFWrapper />} />
         )}
         <Route
@@ -114,7 +114,7 @@ export default () => {
         />
         <Route element={<Dashboard />}>
           <Route path={PATHS.dashboard} element={<DashboardCards />} />
-          {isDevEnv && (
+          {isProposalDiscussionForumEnabled && (
             <Route
               path={PATHS.connectedProposalPillar}
               element={<PDFWrapper />}

govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx

@@ -5,6 +5,7 @@ import { CONNECTED_NAV_ITEMS, ICONS } from "@consts";
 import { DRepInfoCard, WalletInfoCard } from "@molecules";
 import { useGetVoterInfo, useScreenDimension } from "@hooks";
 import { openInNewTab } from "@utils";
+import { useFeatureFlag } from "@context";
 
 import { DashboardDrawerMobileProps } from "./types";
 
@@ -16,6 +17,7 @@ export const DashboardDrawerMobile = ({
   isDrawerOpen,
   setIsDrawerOpen,
 }: DashboardDrawerMobileProps) => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();
   const { voter } = useGetVoterInfo();
 
@@ -65,21 +67,30 @@ export const DashboardDrawerMobile = ({
               </IconButton>
             </Box>
             <Grid container direction="column" rowGap={4} mt={6}>
-              {CONNECTED_NAV_ITEMS.map((navItem) => (
-                <Grid item>
-                  <Link
-                    {...navItem}
-                    size="big"
-                    onClick={() => {
-                      // TODO: Refine if it is needed to remove this eslint-disable
-                      // eslint-disable-next-line no-unused-expressions
-                      navItem.newTabLink && openInNewTab(navItem.newTabLink);
-                      setIsDrawerOpen(false);
-                    }}
-                    isConnectWallet
-                  />
-                </Grid>
-              ))}
+              {CONNECTED_NAV_ITEMS.map((navItem) => {
+                if (
+                  !isProposalDiscussionForumEnabled &&
+                  navItem.dataTestId === "proposal-discussion-link"
+                ) {
+                  return null;
+                }
+
+                return (
+                  <Grid item>
+                    <Link
+                      {...navItem}
+                      size="big"
+                      onClick={() => {
+                        // TODO: Refine if it is needed to remove this eslint-disable
+                        // eslint-disable-next-line no-unused-expressions
+                        navItem.newTabLink && openInNewTab(navItem.newTabLink);
+                        setIsDrawerOpen(false);
+                      }}
+                      isConnectWallet
+                    />
+                  </Grid>
+                );
+              })}
             </Grid>
           </Box>
           {(voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && (

govtool/frontend/src/components/organisms/Drawer.tsx

@@ -3,11 +3,13 @@ import { NavLink } from "react-router-dom";
 
 import { DrawerLink, Spacer } from "@atoms";
 import { CONNECTED_NAV_ITEMS, IMAGES, PATHS } from "@consts";
+import { useFeatureFlag } from "@context";
 import { useGetVoterInfo } from "@hooks";
 import { WalletInfoCard, DRepInfoCard } from "@molecules";
 import { openInNewTab } from "@utils";
 
 export const Drawer = () => {
+  const { isProposalDiscussionForumEnabled } = useFeatureFlag();
   const { voter } = useGetVoterInfo();
 
   return (
@@ -44,18 +46,27 @@ export const Drawer = () => {
         px={3}
         rowGap={2}
       >
-        {CONNECTED_NAV_ITEMS.map((navItem) => (
-          <Grid item key={navItem.label}>
-            <DrawerLink
-              {...navItem}
-              onClick={
-                navItem.newTabLink
-                  ? () => openInNewTab(navItem.newTabLink)
-                  : undefined
-              }
-            />
-          </Grid>
-        ))}
+        {CONNECTED_NAV_ITEMS.map((navItem) => {
+          if (
+            !isProposalDiscussionForumEnabled &&
+            navItem.dataTestId === "proposal-discussion-link"
+          ) {
+            return null;
+          }
+
+          return (
+            <Grid item key={navItem.label}>
+              <DrawerLink
+                {...navItem}
+                onClick={
+                  navItem.newTabLink
+                    ? () => openInNewTab(navItem.newTabLink)
+                    : undefined
+                }
+              />
+            </Grid>
+          );
+        })}
       </Grid>
       <Box p={2}>
         {voter?.isRegisteredAsDRep && <DRepInfoCard />}

govtool/frontend/src/consts/navItems.tsx

@@ -1,5 +1,4 @@
 import { IconAcademicCap } from "@intersect.mbo/intersectmbo.org-icons-set";
-import { isDevEnv } from "@utils";
 import i18n from "@/i18n";
 import { theme } from "@/theme";
 
@@ -102,9 +101,4 @@ export const CONNECTED_NAV_ITEMS = [
     icon: ICONS.faqsIcon,
     newTabLink: "https://docs.sanchogov.tools/faqs",
   },
-].filter((item) => {
-  if (!isDevEnv && item.dataTestId === "proposal-discussion-link") {
-    return false;
-  }
-  return true;
-});
+];

govtool/frontend/src/context/contextProviders.tsx

@@ -2,19 +2,22 @@ import { CardanoProvider, useCardano } from "./wallet";
 import { ModalProvider, useModal } from "./modal";
 import { SnackbarProvider, useSnackbar } from "./snackbar";
 import { DataActionsBarProvider } from "./dataActionsBar";
+import { FeatureFlagProvider } from "./featureFlag";
 
 interface Props {
   children: React.ReactNode;
 }
 
 const ContextProviders = ({ children }: Props) => (
-  <ModalProvider>
-    <SnackbarProvider>
-      <DataActionsBarProvider>
-        <CardanoProvider>{children}</CardanoProvider>
-      </DataActionsBarProvider>
-    </SnackbarProvider>
-  </ModalProvider>
+  <FeatureFlagProvider>
+    <ModalProvider>
+      <SnackbarProvider>
+        <DataActionsBarProvider>
+          <CardanoProvider>{children}</CardanoProvider>
+        </DataActionsBarProvider>
+      </SnackbarProvider>
+    </ModalProvider>
+  </FeatureFlagProvider>
 );
 
 export { ContextProviders, useCardano, useModal, useSnackbar };

govtool/frontend/src/context/featureFlag.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren, useMemo, createContext, useContext } from "react";
+
+const FeatureFlagContext = createContext({
+  isProposalDiscussionForumEnabled: false,
+});
+
+/**
+ * Provides feature flag context to its children components.
+ *
+ * @param children - The child components to render.
+ */
+const FeatureFlagProvider = ({ children }: PropsWithChildren) => {
+  const value = useMemo(
+    () => ({
+      isProposalDiscussionForumEnabled:
+        import.meta.env.VITE_IS_PROPOSAL_DISCUSSION_FORUM_ENABLED === "true" ||
+        false,
+    }),
+    [],
+  );
+
+  return (
+    <FeatureFlagContext.Provider value={value}>
+      {children}
+    </FeatureFlagContext.Provider>
+  );
+};
+
+/**
+ * Custom hook that provides access to the feature flag context.
+ * Throws an error if used outside of a FeatureFlagProvider.
+ * @returns The feature flag context.
+ */
+const useFeatureFlag = () => {
+  const context = useContext(FeatureFlagContext);
+
+  if (!context) {
+    throw new Error("useFeatureFlag must be used within a FeatureFlagProvider");
+  }
+
+  return context;
+};
+
+export { FeatureFlagProvider, useFeatureFlag };

govtool/frontend/src/context/index.ts

@@ -5,3 +5,4 @@ export * from "./pendingTransaction";
 export * from "./snackbar";
 export * from "./usersnapContext";
 export * from "./wallet";
+export * from "./featureFlag";

govtool/frontend/src/utils/index.ts

@@ -25,4 +25,3 @@ export * from "./openInNewTab";
 export * from "./removeDuplicatedProposals";
 export * from "./testIdFromLabel";
 export * from "./wait";
-export * from "./isDevEnv";