From ef9f09b58ceecb4a1eb8c6423c7e215100436eec Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 29 May 2024 11:55:01 +0300
Subject: [PATCH] feat: insights out of beta and expose 2 widgets to pro
 (#7177)

1. Remove beta badge
2. Remove exposure from oss
3. Expose 2 widgets to pro and rest to enterprise
---
 .../src/component/insights/InsightsCharts.tsx | 184 ++++++++++--------
 .../InsightsHeader/InsightsHeader.tsx         |   2 -
 .../src/component/menu/Header/OldHeader.tsx   |   7 +-
 .../__snapshots__/routes.test.tsx.snap        |   2 +-
 frontend/src/component/menu/routes.ts         |   2 +-
 src/test/e2e/api/admin/playground.e2e.test.ts |   2 +-
 6 files changed, 110 insertions(+), 89 deletions(-)

diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index 637bde06d4..8bcea8cc40 100644
--- a/frontend/src/component/insights/InsightsCharts.tsx
+++ b/frontend/src/component/insights/InsightsCharts.tsx
@@ -22,6 +22,7 @@ import type {
 import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends';
 import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
 import { chartInfo } from './chart-info';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IChartsProps {
     flags: InstanceInsightsSchema['flags'];
@@ -83,6 +84,7 @@ export const InsightsCharts: VFC<IChartsProps> = ({
     allMetricsDatapoints,
     loading,
 }) => {
+    const { isEnterprise } = useUiConfig();
     const showAllProjects = projects[0] === allOption.id;
     const isOneProjectSelected = projects.length === 1;
 
@@ -143,91 +145,115 @@ export const InsightsCharts: VFC<IChartsProps> = ({
                         </ChartWidget>
                     }
                 />
-                <Widget {...chartInfo.totalFlags}>
-                    <FlagStats
-                        count={showAllProjects ? flags.total : summary.total}
-                        flagsPerUser={
-                            showAllProjects ? getFlagsPerUser(flags, users) : ''
-                        }
-                        isLoading={loading}
-                    />
-                </Widget>
                 <ConditionallyRender
-                    condition={showAllProjects}
+                    condition={isEnterprise()}
                     show={
-                        <ChartWidget {...chartInfo.flags}>
-                            <FlagsChart
-                                flagTrends={flagTrends}
-                                isLoading={loading}
+                        <>
+                            <Widget {...chartInfo.totalFlags}>
+                                <FlagStats
+                                    count={
+                                        showAllProjects
+                                            ? flags.total
+                                            : summary.total
+                                    }
+                                    flagsPerUser={
+                                        showAllProjects
+                                            ? getFlagsPerUser(flags, users)
+                                            : ''
+                                    }
+                                    isLoading={loading}
+                                />
+                            </Widget>
+                            <ConditionallyRender
+                                condition={showAllProjects}
+                                show={
+                                    <ChartWidget {...chartInfo.flags}>
+                                        <FlagsChart
+                                            flagTrends={flagTrends}
+                                            isLoading={loading}
+                                        />
+                                    </ChartWidget>
+                                }
+                                elseShow={
+                                    <ChartWidget {...chartInfo.flagsPerProject}>
+                                        <FlagsProjectChart
+                                            projectFlagTrends={
+                                                groupedProjectsData
+                                            }
+                                            isLoading={loading}
+                                        />
+                                    </ChartWidget>
+                                }
                             />
-                        </ChartWidget>
-                    }
-                    elseShow={
-                        <ChartWidget {...chartInfo.flagsPerProject}>
-                            <FlagsProjectChart
-                                projectFlagTrends={groupedProjectsData}
-                                isLoading={loading}
-                            />
-                        </ChartWidget>
+                            <Widget {...chartInfo.averageHealth}>
+                                <HealthStats
+                                    value={summary.averageHealth}
+                                    healthy={summary.active}
+                                    stale={summary.stale}
+                                    potentiallyStale={summary.potentiallyStale}
+                                />
+                            </Widget>
+                            <ChartWidget
+                                {...(showAllProjects
+                                    ? chartInfo.overallHealth
+                                    : chartInfo.healthPerProject)}
+                            >
+                                <ProjectHealthChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isAggregate={showAllProjects}
+                                    isLoading={loading}
+                                />
+                            </ChartWidget>
+                            <Widget {...chartInfo.medianTimeToProduction}>
+                                <TimeToProduction
+                                    daysToProduction={
+                                        summary.medianTimeToProduction
+                                    }
+                                />
+                            </Widget>
+                            <ChartWidget
+                                {...(showAllProjects
+                                    ? chartInfo.timeToProduction
+                                    : chartInfo.timeToProductionPerProject)}
+                            >
+                                <TimeToProductionChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isAggregate={showAllProjects}
+                                    isLoading={loading}
+                                />
+                            </ChartWidget>
+                        </>
                     }
                 />
-                <Widget {...chartInfo.averageHealth}>
-                    <HealthStats
-                        value={summary.averageHealth}
-                        healthy={summary.active}
-                        stale={summary.stale}
-                        potentiallyStale={summary.potentiallyStale}
-                    />
-                </Widget>
-                <ChartWidget
-                    {...(showAllProjects
-                        ? chartInfo.overallHealth
-                        : chartInfo.healthPerProject)}
-                >
-                    <ProjectHealthChart
-                        projectFlagTrends={groupedProjectsData}
-                        isAggregate={showAllProjects}
-                        isLoading={loading}
-                    />
-                </ChartWidget>
-                <Widget {...chartInfo.medianTimeToProduction}>
-                    <TimeToProduction
-                        daysToProduction={summary.medianTimeToProduction}
-                    />
-                </Widget>
-                <ChartWidget
-                    {...(showAllProjects
-                        ? chartInfo.timeToProduction
-                        : chartInfo.timeToProductionPerProject)}
-                >
-                    <TimeToProductionChart
-                        projectFlagTrends={groupedProjectsData}
-                        isAggregate={showAllProjects}
-                        isLoading={loading}
-                    />
-                </ChartWidget>
             </StyledGrid>
-            <Widget
-                {...(showAllProjects
-                    ? chartInfo.metrics
-                    : chartInfo.metricsPerProject)}
-            >
-                <MetricsSummaryChart
-                    metricsSummaryTrends={groupedMetricsData}
-                    allDatapointsSorted={allMetricsDatapoints}
-                    isAggregate={showAllProjects}
-                    isLoading={loading}
-                />
-            </Widget>
-            <Widget
-                {...chartInfo.updates}
-                sx={{ mt: (theme) => theme.spacing(2) }}
-            >
-                <UpdatesPerEnvironmentTypeChart
-                    environmentTypeTrends={environmentTypeTrends}
-                    isLoading={loading}
-                />
-            </Widget>
+            <ConditionallyRender
+                condition={isEnterprise()}
+                show={
+                    <>
+                        <Widget
+                            {...(showAllProjects
+                                ? chartInfo.metrics
+                                : chartInfo.metricsPerProject)}
+                        >
+                            <MetricsSummaryChart
+                                metricsSummaryTrends={groupedMetricsData}
+                                allDatapointsSorted={allMetricsDatapoints}
+                                isAggregate={showAllProjects}
+                                isLoading={loading}
+                            />
+                        </Widget>
+                        <Widget
+                            {...chartInfo.updates}
+                            sx={{ mt: (theme) => theme.spacing(2) }}
+                        >
+                            <UpdatesPerEnvironmentTypeChart
+                                environmentTypeTrends={environmentTypeTrends}
+                                isLoading={loading}
+                            />
+                        </Widget>
+                    </>
+                }
+            />
         </>
     );
 };
diff --git a/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx b/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx
index 75fc56a9c3..cfb1210556 100644
--- a/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx
+++ b/frontend/src/component/insights/components/InsightsHeader/InsightsHeader.tsx
@@ -10,7 +10,6 @@ import {
     useTheme,
 } from '@mui/material';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Badge } from 'component/common/Badge/Badge';
 import { ShareLink } from './ShareLink/ShareLink';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
@@ -82,7 +81,6 @@ export const InsightsHeader: VFC<DashboardHeaderProps> = ({ actions }) => {
                         })}
                     >
                         <span>Insights</span>{' '}
-                        <Badge color='success'>Beta</Badge>
                     </Typography>
                 }
                 actions={
diff --git a/frontend/src/component/menu/Header/OldHeader.tsx b/frontend/src/component/menu/Header/OldHeader.tsx
index f85b0b010e..f8dd1d57ed 100644
--- a/frontend/src/component/menu/Header/OldHeader.tsx
+++ b/frontend/src/component/menu/Header/OldHeader.tsx
@@ -242,12 +242,9 @@ const OldHeader: VFC = () => {
                         <StyledLink to={'/search'}>Search</StyledLink>
                         <StyledLink to='/playground'>Playground</StyledLink>
                         <ConditionallyRender
-                            condition={!killInsightsDashboard}
+                            condition={!killInsightsDashboard && !isOss()}
                             show={
-                                <StyledLinkWithBetaBadge
-                                    to={'/insights'}
-                                    title={'Insights'}
-                                />
+                                <StyledLink to='/insights'>Insights</StyledLink>
                             }
                         />
                         <StyledAdvancedNavButton
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
index d2e3795c88..cf23befa0e 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
+++ b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
@@ -126,7 +126,7 @@ exports[`returns all baseRoutes 1`] = `
   },
   {
     "component": [Function],
-    "enterprise": false,
+    "enterprise": true,
     "menu": {
       "mobile": true,
     },
diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts
index 563814d43a..d023d3b3cb 100644
--- a/frontend/src/component/menu/routes.ts
+++ b/frontend/src/component/menu/routes.ts
@@ -153,7 +153,7 @@ export const routes: IRoute[] = [
         type: 'protected',
         menu: { mobile: true },
         notFlag: 'killInsightsUI',
-        enterprise: false,
+        enterprise: true,
     },
 
     // Applications
diff --git a/src/test/e2e/api/admin/playground.e2e.test.ts b/src/test/e2e/api/admin/playground.e2e.test.ts
index ded37f063b..f7c7b1c369 100644
--- a/src/test/e2e/api/admin/playground.e2e.test.ts
+++ b/src/test/e2e/api/admin/playground.e2e.test.ts
@@ -257,7 +257,7 @@ describe('Playground API E2E', () => {
 
                         if (features.length !== body.features.length) {
                             ctx.log(
-                                `I expected the number of mapped toggles (${body.features.length}) to be the same as the number of created toggles (${features.length}), but that was not the case.`,
+                                `I expected the number of mapped flags (${body.features.length}) to be the same as the number of created toggles (${features.length}), but that was not the case.`,
                             );
                             return false;
                         }