From 4671c2995bc10037d0bec68760641dc383083dd7 Mon Sep 17 00:00:00 2001
From: Quentin Leonetti <q.leonetti@gmail.com>
Date: Mon, 18 Mar 2024 14:31:56 +0100
Subject: [PATCH] Asap 358 b (#4207)

* make analytics accessible to staff only

* linting

* linting
---
 apps/crn-frontend/src/AuthenticatedApp.tsx       |  5 +++--
 packages/flags/src/index.ts                      |  2 --
 .../src/organisms/MainNavigation.tsx             |  9 ++++++---
 .../organisms/__tests__/MainNavigation.test.tsx  | 16 +++++++---------
 .../react-components/src/templates/Layout.tsx    |  6 +++++-
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/apps/crn-frontend/src/AuthenticatedApp.tsx b/apps/crn-frontend/src/AuthenticatedApp.tsx
index 2f988a734e..215c1a26be 100644
--- a/apps/crn-frontend/src/AuthenticatedApp.tsx
+++ b/apps/crn-frontend/src/AuthenticatedApp.tsx
@@ -1,4 +1,3 @@
-import { isEnabled } from '@asap-hub/flags';
 import { SkeletonHeaderFrame as Frame } from '@asap-hub/frontend-utils';
 import { Layout, Loading, NotFoundPage } from '@asap-hub/react-components';
 import { useAuth0CRN, useCurrentUserCRN } from '@asap-hub/react-context';
@@ -76,6 +75,7 @@ const AuthenticatedApp: FC<Record<string, never>> = () => {
 
   const user = useCurrentUserCRN();
   const tabRoute = useCurrentUserProfileTabRoute();
+  const canViewAnalytics = user?.role === 'Staff';
   if (!user || !recoilAuth0) {
     return <Loading />;
   }
@@ -86,6 +86,7 @@ const AuthenticatedApp: FC<Record<string, never>> = () => {
         <Layout
           userOnboarded={user.onboarded}
           onboardable={onboardable}
+          canViewAnalytics={canViewAnalytics}
           onboardModalHref={
             tabRoute ? tabRoute({}).editOnboarded({}).$ : undefined
           }
@@ -141,7 +142,7 @@ const AuthenticatedApp: FC<Record<string, never>> = () => {
                   <About />
                 </Frame>
               </Route>
-              {isEnabled('ANALYTICS') && (
+              {canViewAnalytics && (
                 <Route path={analytics.template}>
                   <Frame title="Analytics">
                     <Analytics />
diff --git a/packages/flags/src/index.ts b/packages/flags/src/index.ts
index fee0419eac..47982a9e09 100644
--- a/packages/flags/src/index.ts
+++ b/packages/flags/src/index.ts
@@ -1,14 +1,12 @@
 export type Flag =
   | 'PERSISTENT_EXAMPLE'
   | 'VERSION_RESEARCH_OUTPUT'
-  | 'ANALYTICS'
   | 'DISPLAY_EVENTS';
 
 export type Flags = Partial<Record<Flag, boolean | undefined>>;
 let overrides: Flags = {
   // flags already live in prod:
   // can also be used to manually disable a flag in development:
-  ANALYTICS: false,
   DISPLAY_EVENTS: false,
 };
 
diff --git a/packages/react-components/src/organisms/MainNavigation.tsx b/packages/react-components/src/organisms/MainNavigation.tsx
index afeb7b1d7d..3f741f6891 100644
--- a/packages/react-components/src/organisms/MainNavigation.tsx
+++ b/packages/react-components/src/organisms/MainNavigation.tsx
@@ -8,7 +8,6 @@ import {
   events,
   analytics,
 } from '@asap-hub/routing';
-import { isEnabled } from '@asap-hub/flags';
 
 import {
   perRem,
@@ -46,9 +45,13 @@ const listStyles = css({
 
 export interface MainNavigationProps {
   readonly userOnboarded: boolean;
+  readonly canViewAnalytics?: boolean;
 }
 
-const MainNavigation: React.FC<MainNavigationProps> = ({ userOnboarded }) => (
+const MainNavigation: React.FC<MainNavigationProps> = ({
+  userOnboarded,
+  canViewAnalytics = false,
+}) => (
   <nav>
     <ul css={listStyles}>
       <li>
@@ -105,7 +108,7 @@ const MainNavigation: React.FC<MainNavigationProps> = ({ userOnboarded }) => (
           About ASAP
         </NavigationLink>
       </li>
-      {isEnabled('ANALYTICS') && (
+      {canViewAnalytics && (
         <li>
           <NavigationLink
             href={analytics({}).$}
diff --git a/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx b/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
index f563d46c6d..2b3ab56075 100644
--- a/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
+++ b/packages/react-components/src/organisms/__tests__/MainNavigation.test.tsx
@@ -2,18 +2,10 @@ import { StaticRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { network } from '@asap-hub/routing';
 import { findParentWithStyle } from '@asap-hub/dom-test-utils';
-import { renderHook } from '@testing-library/react-hooks';
-import { useFlags } from '@asap-hub/react-context';
 
 import MainNavigation from '../MainNavigation';
 
 it('renders the navigation items', () => {
-  const {
-    result: { current },
-  } = renderHook(useFlags);
-
-  current.enable('ANALYTICS');
-
   const { getAllByRole } = render(<MainNavigation userOnboarded={true} />);
 
   expect(
@@ -28,10 +20,16 @@ it('renders the navigation items', () => {
     expect.stringMatching(/news/i),
     expect.stringMatching(/guides/i),
     expect.stringMatching(/about/i),
-    expect.stringMatching(/analytics/i),
   ]);
 });
 
+it('renders the analytics menu item when allowed', () => {
+  const { getByTitle } = render(
+    <MainNavigation userOnboarded={true} canViewAnalytics={true} />,
+  );
+  expect(getByTitle(/analytics/i)).toBeInTheDocument();
+});
+
 describe('a navigation item', () => {
   it('is highlighted when it links to the current page', () => {
     const { getByTitle, rerender } = render(
diff --git a/packages/react-components/src/templates/Layout.tsx b/packages/react-components/src/templates/Layout.tsx
index 55099af162..6fbfc7e085 100644
--- a/packages/react-components/src/templates/Layout.tsx
+++ b/packages/react-components/src/templates/Layout.tsx
@@ -218,6 +218,7 @@ const Layout: FC<LayoutProps> = ({
   children,
   onboardable,
   onboardModalHref,
+  canViewAnalytics,
   ...userNavProps
 }) => {
   const [menuShown, setMenuShown] = useState(false);
@@ -278,7 +279,10 @@ const Layout: FC<LayoutProps> = ({
         <div css={[menuStyles, menuShown && menuMenuShownStyles]}>
           <div css={[mainMenuStyles]}>
             <Suspense fallback={<LoadingMenu />}>
-              <MainNavigation userOnboarded={userNavProps.userOnboarded} />
+              <MainNavigation
+                userOnboarded={userNavProps.userOnboarded}
+                canViewAnalytics={canViewAnalytics}
+              />
             </Suspense>
           </div>
           <div css={[userMenuStyles, menuShown && userMenuShownStyles]}>