Prepare MermaidRulesGraph behind feature flag

Author: benjaminaaron

src/featureFlags.js

@@ -3,7 +3,8 @@ const defaultFlags = {
     newCollaborationSection: true,
     newLanguageToggle: true,
     newActivityLog: true,
-    showNearestCounselingCentre: false
+    showNearestCounselingCentre: false,
+    showMermaidRuleGraph: false,
 };
 
 const getFeatureFlag = (flag) => {
@@ -17,6 +18,7 @@ const featureFlags = {
     newLanguageToggle: getFeatureFlag('newLanguageToggle'),
     newActivityLog: getFeatureFlag('newActivityLog'),
     showNearestCounselingCentre: getFeatureFlag('showNearestCounselingCentre'),
+    showMermaidRuleGraph: getFeatureFlag('showMermaidRuleGraph'),
 };
 
 export const setFeatureFlag = (flag, value) => {

src/ui/screens/benefit-page/BenefitPageScreen.js

@@ -10,6 +10,8 @@ import BenefitPageExampleList from './components/BenefitPageExampleList';
 import BenefitPageHeader from "./components/BenefitPageHeader";
 import AppScreenWrapperContainer from '@/ui/shared-components/app-screen-wrapper/AppScreenWrapperContainer';
 import RecursiveRulesTable from './components/RecursiveRulesTable';
+import featureFlags from "@/featureFlags";
+import MermaidRulesGraph from "@/ui/screens/benefit-page/components/MermaidRulesGraph";
 
 const BenefitPageScreen = ({
     t,
@@ -78,6 +80,9 @@ const BenefitPageScreen = ({
                             )
                         }
                         <RecursiveRulesTable graphRoot={matchingGraph?.root} t={t} />
+                        {featureFlags.showMermaidRuleGraph &&
+                            <MermaidRulesGraph graphRoot={matchingGraph?.root} t={t} />
+                        }
                     </Box>
                 </VBox>
             </AppScreenWrapperContainer>

src/ui/screens/benefit-page/components/MermaidRulesGraph.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import theme from '@/theme';
+import { useMetadataStore } from '@/ui/storage/zustand';
+import { VBox } from '@/ui/shared-components/LayoutBoxes';
+import { Typography } from "@mui/material";
+
+export default function MermaidRulesGraph({ graphRoot, t }) {
+    const metadata = useMetadataStore(state => state.metadata);
+    // if (!graphRoot) return null;
+
+    return (
+        <VBox
+            sx={{
+                gap: 4,
+                backgroundColor: 'white.main',
+                padding: '32px',
+                borderRadius: theme.shape.borderRadius,
+            }}
+        >
+            <VBox sx={{ gap: 2 }}>
+                <Typography variant="h2" sx={{ fontWeight: '400', wordBreak: "break-word" }}>
+                    Rules Graph
+                </Typography>
+                <Typography variant="body1">
+                    TODO
+                </Typography>
+            </VBox>
+        </VBox>
+    );
+}