test: insights filtering (#7612)

frontend/src/component/insights/Insights.test.tsx

@@ -0,0 +1,55 @@
+import { render } from '../../utils/testRenderer';
+import { fireEvent, screen } from '@testing-library/react';
+import { NewInsights } from './Insights';
+import { testServerRoute, testServerSetup } from '../../utils/testServer';
+import { vi } from 'vitest';
+
+const server = testServerSetup();
+
+const setupApi = () => {
+    testServerRoute(server, '/api/admin/insights', {
+        users: { total: 0, active: 0, inactive: 0 },
+        userTrends: [],
+        projectFlagTrends: [],
+        metricsSummaryTrends: [],
+        flags: { total: 0 },
+        flagTrends: [],
+        environmentTypeTrends: [],
+    });
+
+    testServerRoute(server, '/api/admin/projects', {
+        projects: [
+            { name: 'Project A Name', id: 'projectA' },
+            { name: 'Project B Name', id: 'projectB' },
+        ],
+    });
+};
+
+const currentTime = '2024-04-25T08:05:00.000Z';
+
+test('Filter insights by project and date', async () => {
+    vi.setSystemTime(currentTime);
+    setupApi();
+    render(<NewInsights ChartComponent={undefined} />);
+    const addFilter = await screen.findByText('Add Filter');
+    fireEvent.click(addFilter);
+
+    const dateFromFilter = await screen.findByText('Date From');
+    await screen.findByText('Date To');
+    const projectFilter = await screen.findByText('Project');
+
+    // filter by project
+    fireEvent.click(projectFilter);
+    await screen.findByText('Project A Name');
+    const projectName = await screen.findByText('Project B Name');
+    await fireEvent.click(projectName);
+    expect(window.location.href).toContain('project=IS%3AprojectB');
+
+    // filter by from date
+    fireEvent.click(dateFromFilter);
+    const day = await screen.findByText('25');
+    fireEvent.click(day);
+    expect(window.location.href).toContain(
+        'project=IS%3AprojectB&from=IS%3A2024-04-25',
+    );
+});

frontend/src/component/insights/Insights.tsx

@@ -9,7 +9,7 @@ import {
 import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
 import { InsightsHeader } from './components/InsightsHeader/InsightsHeader';
 import { useInsightsData } from './hooks/useInsightsData';
-import { InsightsCharts } from './InsightsCharts';
+import { type IChartsProps, InsightsCharts } from './InsightsCharts';
 import { LegacyInsightsCharts } from './LegacyInsightsCharts';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { Sticky } from 'component/common/Sticky/Sticky';
@@ -105,11 +105,15 @@ const LegacyInsights: FC = () => {
     );
 };
 
-const NewInsights = () => {
+interface InsightsProps {
+    ChartComponent?: FC<IChartsProps>;
+}
+
+export const NewInsights: FC<InsightsProps> = ({ ChartComponent }) => {
     const [scrolled, setScrolled] = useState(false);
 
     const stateConfig = {
-        projects: FilterItemParam,
+        project: FilterItemParam,
         from: FilterItemParam,
         to: FilterItemParam,
     };
@@ -119,7 +123,7 @@ const NewInsights = () => {
         state.to?.values[0],
     );
 
-    const projects = state.projects?.values ?? [allOption.id];
+    const projects = state.project?.values ?? [allOption.id];
 
     const insightsData = useInsightsData(insights, projects);
 
@@ -137,26 +141,29 @@ const NewInsights = () => {
 
     return (
         <StyledWrapper>
-            <StickyWrapper>
+            <StickyContainer>
                 <InsightsHeader
                     actions={
                         <InsightsFilters state={state} onChange={setState} />
                     }
                 />
-            </StickyWrapper>
-            <InsightsCharts
-                loading={loading}
-                projects={projects}
-                {...insightsData}
-            />
+            </StickyContainer>
+            {ChartComponent && (
+                <ChartComponent
+                    loading={loading}
+                    projects={projects}
+                    {...insightsData}
+                />
+            )}
         </StyledWrapper>
     );
 };
 
 export const Insights: FC = () => {
     const isInsightsV2Enabled = useUiFlag('insightsV2');
 
-    if (isInsightsV2Enabled) return <NewInsights />;
+    if (isInsightsV2Enabled)
+        return <NewInsights ChartComponent={InsightsCharts} />;
 
     return <LegacyInsights />;
 };

frontend/src/component/insights/InsightsCharts.tsx

@@ -24,7 +24,7 @@ import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
 import { chartInfo } from './chart-info';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
-interface IChartsProps {
+export interface IChartsProps {
     flags: InstanceInsightsSchema['flags'];
     flagTrends: InstanceInsightsSchema['flagTrends'];
     projectsData: InstanceInsightsSchema['projectFlagTrends'];

frontend/src/component/insights/InsightsFilters.tsx

@@ -48,7 +48,7 @@ export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
                           label: 'Project',
                           icon: 'topic',
                           options: projectsOptions,
-                          filterKey: 'projects',
+                          filterKey: 'project',
                           singularOperators: ['IS'],
                           pluralOperators: ['IS_ANY_OF'],
                       },

frontend/src/utils/testRenderer.tsx

@@ -13,6 +13,7 @@ import { UIProviderContainer } from '../component/providers/UIProvider/UIProvide
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 import { QueryParamProvider } from 'use-query-params';
 import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider';
+import { StickyProvider } from 'component/common/Sticky/StickyProvider';
 
 export const render = (
     ui: JSX.Element,
@@ -48,7 +49,9 @@ export const render = (
                             <QueryParamProvider adapter={ReactRouter6Adapter}>
                                 <ThemeProvider>
                                     <AnnouncerProvider>
-                                        {children}
+                                        <StickyProvider>
+                                            {children}
+                                        </StickyProvider>
                                     </AnnouncerProvider>
                                 </ThemeProvider>
                             </QueryParamProvider>