feat: ✨ added feature toggle support (#99)

* feat: ✨ added feature toggle support * fix: 🐛 fixed issue with client component use * fix: 🐛 added missing env to workflow * fix: 🐛 fixed failing test workflow
WasiqB · Nov 30, 2024 · 555a05d · 555a05d
1 parent 8c8e20e
commit 555a05d
Show file tree

Hide file tree

Showing 17 changed files with 403 additions and 263 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -37,6 +37,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     needs: lint
+    environment: Preview
+    env:
+      NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_ID: ${{ secrets.NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_ID }}
 
     steps:
       - name: Check out Git repository

diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@ Ultra-Reporter leverages cutting-edge technologies to provide fast, efficient, a
 - **[Turborepo](https://turborepo.org/)**: Fast, efficient monorepo management.
 - **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)**: Enforce consistent code style and automate code formatting.
 - **[Prettier](https://prettier.io/)**: Code formatter.
+- **[Flagsmith](https://www.flagsmith.com/)**: Feature flag management.
 - **[Vercel](https://vercel.com/)**: Next.js is deployed on Vercel, a platform for static websites and serverless functions.
 
 ## ⏱️ What's Next?

diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_ID=
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,5 +1,7 @@
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { Provider as AnalyticsProvider } from '@ultra-reporter/analytics/client';
+import { getFeatureState } from '@ultra-reporter/feature-toggle/client';
+import { FeatureProvider } from '@ultra-reporter/feature-toggle/provider';
 import '@ultra-reporter/ui/global.css';
 import { Footer } from '@ultra-reporter/ui/home/footer';
 import { ScrollToTop } from '@ultra-reporter/ui/home/scroll-to-top';
@@ -63,33 +65,37 @@ export const metadata: Metadata = {
   },
 };
 
-const RootLayout = ({
+const RootLayout = async ({
   children,
 }: Readonly<{
   children: React.ReactNode;
-}>): DetailedHTMLProps<
-  HtmlHTMLAttributes<HTMLHtmlElement>,
-  HTMLHtmlElement
+}>): Promise<
+  DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement>
 > => {
+  const featureState = await getFeatureState();
   return (
     <html lang='en' suppressHydrationWarning>
       <head>
         <link rel='icon' href='/favicon.png' sizes='any' type='image/png' />
       </head>
-      <body className={'antialiased'}>
-        <ThemeProvider
-          attribute='class'
-          defaultTheme='light'
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-          <ScrollToTop />
-          <Footer />
-          <AnalyticsProvider />
-        </ThemeProvider>
-      </body>
-      {isProd && <GoogleAnalytics gaId='G-CNW9F6PH7P' />}
+      <FeatureProvider serverState={featureState}>
+        <>
+          <body className={'antialiased'}>
+            <ThemeProvider
+              attribute='class'
+              defaultTheme='light'
+              enableSystem
+              disableTransitionOnChange
+            >
+              {children}
+              <ScrollToTop />
+              <Footer />
+              <AnalyticsProvider />
+            </ThemeProvider>
+          </body>
+          {isProd && <GoogleAnalytics gaId='G-CNW9F6PH7P' />}
+        </>
+      </FeatureProvider>
     </html>
   );
 };

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -17,9 +17,10 @@
     "@next/third-parties": "^15.0.3",
     "@tanstack/react-table": "^8.20.5",
     "@ultra-reporter/analytics": "workspace:*",
+    "@ultra-reporter/feature-toggle": "workspace:*",
     "@ultra-reporter/ui": "workspace:*",
     "@ultra-reporter/utils": "workspace:*",
-    "lucide-react": "^0.461.0",
+    "lucide-react": "^0.462.0",
     "next": "15.0.3"
   },
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -29,14 +29,14 @@
     "@release-it-plugins/lerna-changelog": "^7.0.0",
     "@stylistic/eslint-plugin-js": "^2.11.0",
     "@stylistic/eslint-plugin-ts": "^2.11.0",
-    "@types/node": "^22.10.0",
+    "@types/node": "^22.10.1",
     "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
     "@vercel/style-guide": "^6.0.0",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "2.3.2",
+    "eslint-config-turbo": "2.3.3",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "globals": "^15.12.0",
@@ -48,7 +48,7 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "release-it": "^17.10.0",
     "release-it-pnpm": "^4.6.3",
-    "turbo": "^2.3.2",
+    "turbo": "^2.3.3",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.16.0"
   },

diff --git a/packages/analytics/package.json b/packages/analytics/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@openpanel/nextjs": "^1.0.6",
     "@ultra-reporter/utils": "workspace:*",
-    "@vercel/functions": "^1.5.0"
+    "@vercel/functions": "^1.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

diff --git a/packages/feature-toggle/package.json b/packages/feature-toggle/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@ultra-reporter/feature-toggle",
+  "description": "Ultra Reporter feature toggles",
+  "version": "0.5.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "exports": {
+    "./client": "./src/client.ts",
+    "./provider": "./src/provider.tsx"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18",
+    "@ultra-reporter/typescript-config": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0",
+    "react-dom": "^18.0"
+  },
+  "dependencies": {
+    "flagsmith": "^7.0.2"
+  }
+}
diff --git a/packages/feature-toggle/src/client.ts b/packages/feature-toggle/src/client.ts
@@ -0,0 +1,14 @@
+import { createFlagsmithInstance } from 'flagsmith/isomorphic';
+import { IState } from 'flagsmith/types';
+
+export const getFeatureState = async (): Promise<IState<string>> => {
+  const flagsmith = createFlagsmithInstance();
+  await flagsmith.init({
+    evaluationContext: {
+      environment: {
+        apiKey: process.env.NEXT_PUBLIC_FLAGSMITH_ENVIRONMENT_ID,
+      },
+    },
+  });
+  return flagsmith.getState();
+};
diff --git a/packages/feature-toggle/src/flag-list.ts b/packages/feature-toggle/src/flag-list.ts
@@ -0,0 +1 @@
+export const Flags = ['sign_in_support', 'faq'];
diff --git a/packages/feature-toggle/src/provider.tsx b/packages/feature-toggle/src/provider.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/react-in-jsx-scope */
+'use client';
+
+import { createFlagsmithInstance } from 'flagsmith/isomorphic';
+import { FlagsmithProvider, useFlags } from 'flagsmith/react';
+import { IFlagsmithFeature, IFlagsmithTrait, IState } from 'flagsmith/types';
+import { useRef } from 'react';
+import { Flags } from './flag-list';
+
+interface FeatureProviderProps {
+  serverState: IState<string>;
+  children: JSX.Element;
+}
+
+export const FeatureProvider = ({
+  serverState,
+  children,
+}: FeatureProviderProps): JSX.Element => {
+  const flagsmith = useRef(createFlagsmithInstance());
+  return (
+    <FlagsmithProvider flagsmith={flagsmith.current} serverState={serverState}>
+      {children}
+    </FlagsmithProvider>
+  );
+};
+
+export function getFlag(
+  flagId: string
+): (IFlagsmithFeature & IFlagsmithTrait) | undefined {
+  const flags = useFlags(Flags);
+  return flags[flagId];
+}
diff --git a/packages/feature-toggle/tsconfig.json b/packages/feature-toggle/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@ultra-reporter/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -47,7 +47,7 @@
     "class-variance-authority": "^0.7.1",
     "cmdk": "1.0.4",
     "embla-carousel-react": "^8.5.1",
-    "lucide-react": "^0.461.0",
+    "lucide-react": "^0.462.0",
     "next": "15.0.3",
     "next-themes": "^0.4.3",
     "react-code-blocks": "^0.1.6",
@@ -59,6 +59,7 @@
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18",
+    "@ultra-reporter/feature-toggle": "workspace:*",
     "@ultra-reporter/typescript-config": "workspace:*",
     "@ultra-reporter/utils": "workspace:*",
     "autoprefixer": "^10.4.20",

diff --git a/packages/ui/src/home/faq.tsx b/packages/ui/src/home/faq.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { getFlag } from '@ultra-reporter/feature-toggle/provider';
 import { Description } from '../common/description';
 import { Title } from '../common/title';
 import {
@@ -7,25 +10,11 @@ import {
   AccordionTrigger,
 } from '../components/accordion';
 
-const faqItems = [
-  {
-    question: 'What file formats does Ultra Reporter support?',
-    answer:
-      "Ultra Reporter currently supports only TestNG XML file formats for test results. We're working on expanding support for other formats in the future.",
-  },
-  {
-    question: 'How long does it take to generate a report?',
-    answer:
-      'Report generation is nearly instantaneous. Most reports are generated within seconds, depending on the size and complexity of your test results.',
-  },
-  {
-    question: 'Do you save the results which gets uploaded?',
-    answer:
-      'Not yet. Currently we do not save your results file which you upload to the app. It gets parsed and generates the report on runtime. We are working on adding support to save your records to a secure database in near future.',
-  },
-];
-
-export const FAQ = (): JSX.Element => {
+export const FAQ = (): JSX.Element | null => {
+  const faq = getFlag('faq');
+  if (faq && !faq.enabled) {
+    return null;
+  }
   return (
     <section
       id='faq'
@@ -37,12 +26,14 @@ export const FAQ = (): JSX.Element => {
       </div>
       <div className='mx-auto w-full max-w-[700px]'>
         <Accordion type='single' collapsible className='w-full'>
-          {faqItems.map((item, index) => (
-            <AccordionItem key={index} value={`item-${index}`}>
-              <AccordionTrigger>{item.question}</AccordionTrigger>
-              <AccordionContent>{item.answer}</AccordionContent>
-            </AccordionItem>
-          ))}
+          {JSON.parse(faq?.value).map(
+            (item: { question: string; answer: string }, index: number) => (
+              <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger>{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            )
+          )}
         </Accordion>
       </div>
     </section>

diff --git a/packages/ui/src/home/hero.tsx b/packages/ui/src/home/hero.tsx
@@ -1,7 +1,11 @@
+'use client';
+
+import { getFlag } from '@ultra-reporter/feature-toggle/provider';
 import Image from 'next/image';
 import { FileUpload } from '../utils/file-upload';
 
 export const Hero = (): JSX.Element => {
+  const signInSupport = getFlag('sign_in_support');
   return (
     <section className='flex flex-col items-center gap-4 p-16'>
       <div className='flex flex-col-reverse items-center justify-between gap-8 md:flex-row md:gap-12'>
@@ -13,9 +17,11 @@ export const Hero = (): JSX.Element => {
             <br />
             in one click
           </h1>
-          <div className='w-full max-w-sm pt-8'>
-            <FileUpload />
-          </div>
+          {!signInSupport?.enabled && (
+            <div className='w-full max-w-sm pt-8'>
+              <FileUpload />
+            </div>
+          )}
         </div>
         <div className='w-full max-w-lg items-end'>
           <Image

diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@ultra-reporter/typescript-config/react-library.json",
+  "extends": "@ultra-reporter/typescript-config/base.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["node_modules"]
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const Flags = ['sign_in_support', 'faq'];