From 0a369ee2a2fd148982febe945e06b7459673a560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= Date: Fri, 7 Jun 2024 12:35:45 +0200 Subject: [PATCH] chore: add proposal discussion forum feature flag --- .github/workflows/build-and-deploy-dev.yml | 10 +++++ govtool/frontend/src/App.tsx | 10 ++--- .../organisms/DashboardDrawerMobile.tsx | 41 ++++++++++------- .../src/components/organisms/Drawer.tsx | 35 ++++++++++----- govtool/frontend/src/consts/navItems.tsx | 8 +--- .../frontend/src/context/contextProviders.tsx | 17 ++++--- govtool/frontend/src/context/featureFlag.tsx | 44 +++++++++++++++++++ govtool/frontend/src/context/index.ts | 1 + govtool/frontend/src/utils/index.ts | 1 - govtool/frontend/src/utils/isDevEnv.ts | 3 -- 10 files changed, 120 insertions(+), 50 deletions(-) create mode 100644 govtool/frontend/src/context/featureFlag.tsx delete mode 100644 govtool/frontend/src/utils/isDevEnv.ts diff --git a/.github/workflows/build-and-deploy-dev.yml b/.github/workflows/build-and-deploy-dev.yml index f279eff79..559d4073c 100644 --- a/.github/workflows/build-and-deploy-dev.yml +++ b/.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: diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx index 3729f96f1..c1756cdae 100644 --- a/govtool/frontend/src/App.tsx +++ b/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 () => { } /> } /> - {isDevEnv && !isEnabled && ( + {isProposalDiscussionForumEnabled && !isEnabled && ( } /> )} { /> }> } /> - {isDevEnv && ( + {isProposalDiscussionForumEnabled && ( } diff --git a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx b/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx index ee75b1df1..fa7200ac6 100644 --- a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx +++ b/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 = ({ - {CONNECTED_NAV_ITEMS.map((navItem) => ( - - { - // 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 - /> - - ))} + {CONNECTED_NAV_ITEMS.map((navItem) => { + if ( + !isProposalDiscussionForumEnabled && + navItem.dataTestId === "proposal-discussion-link" + ) { + return null; + } + + return ( + + { + // 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 + /> + + ); + })} {(voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && ( diff --git a/govtool/frontend/src/components/organisms/Drawer.tsx b/govtool/frontend/src/components/organisms/Drawer.tsx index 638f52886..7873b6a8f 100644 --- a/govtool/frontend/src/components/organisms/Drawer.tsx +++ b/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) => ( - - openInNewTab(navItem.newTabLink) - : undefined - } - /> - - ))} + {CONNECTED_NAV_ITEMS.map((navItem) => { + if ( + !isProposalDiscussionForumEnabled && + navItem.dataTestId === "proposal-discussion-link" + ) { + return null; + } + + return ( + + openInNewTab(navItem.newTabLink) + : undefined + } + /> + + ); + })} {voter?.isRegisteredAsDRep && } diff --git a/govtool/frontend/src/consts/navItems.tsx b/govtool/frontend/src/consts/navItems.tsx index 74b5af1a9..5b6ec10f0 100644 --- a/govtool/frontend/src/consts/navItems.tsx +++ b/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; -}); +]; diff --git a/govtool/frontend/src/context/contextProviders.tsx b/govtool/frontend/src/context/contextProviders.tsx index 451beb2f0..d7b4e937a 100644 --- a/govtool/frontend/src/context/contextProviders.tsx +++ b/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) => ( - - - - {children} - - - + + + + + {children} + + + + ); export { ContextProviders, useCardano, useModal, useSnackbar }; diff --git a/govtool/frontend/src/context/featureFlag.tsx b/govtool/frontend/src/context/featureFlag.tsx new file mode 100644 index 000000000..bc8f9863f --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +/** + * 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 }; diff --git a/govtool/frontend/src/context/index.ts b/govtool/frontend/src/context/index.ts index 3a67109b3..5f0051892 100644 --- a/govtool/frontend/src/context/index.ts +++ b/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"; diff --git a/govtool/frontend/src/utils/index.ts b/govtool/frontend/src/utils/index.ts index 847158b9e..2bdde2997 100644 --- a/govtool/frontend/src/utils/index.ts +++ b/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"; diff --git a/govtool/frontend/src/utils/isDevEnv.ts b/govtool/frontend/src/utils/isDevEnv.ts deleted file mode 100644 index 2e703d200..000000000 --- a/govtool/frontend/src/utils/isDevEnv.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const isDevEnv = import.meta?.env?.VITE_BASE_URL?.includes( - "dev-sanchonet", -);