Merge pull request #1358 from openedx/eahmadjaved/ENT-9782

feat: added dismissable warning banner on analytics v2

src/components/AdvanceAnalyticsV2/AnalyticsV2Page.jsx

@@ -6,6 +6,7 @@ import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import Cookies from 'universal-cookie';
 import Hero from '../Hero';
 import Stats from './Stats';
 import Enrollments from './tabs/Enrollments';
@@ -14,7 +15,8 @@ import Completions from './tabs/Completions';
 import Leaderboard from './tabs/Leaderboard';
 import Skills from './tabs/Skills';
 import { useEnterpriseAnalyticsAggregatesData } from './data/hooks';
-import { GRANULARITY, CALCULATION } from './data/constants';
+import { GRANULARITY, CALCULATION, ANALYTICS_WARNING_BANNER_COOKIE } from './data/constants';
+import WarningBanner from './WarningBanner';
 
 const PAGE_TITLE = 'AnalyticsV2';
 
@@ -24,12 +26,14 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
   const [calculation, setCalculation] = useState('Total');
   const [startDate, setStartDate] = useState();
   const [endDate, setEndDate] = useState();
+  const cookies = new Cookies();
   const intl = useIntl();
   const { isFetching, isError, data } = useEnterpriseAnalyticsAggregatesData({
     enterpriseCustomerUUID: enterpriseId,
     startDate,
     endDate,
   });
+  const showWarningBanner = cookies.get(ANALYTICS_WARNING_BANNER_COOKIE);
   const currentDate = new Date().toISOString().split('T')[0];
   const formatDate = (dateString) => {
     const options = { year: 'numeric', month: 'long', day: 'numeric' };
@@ -39,6 +43,7 @@ const AnalyticsV2Page = ({ enterpriseId }) => {
     <>
       <Helmet title={PAGE_TITLE} />
       <Hero title={PAGE_TITLE} />
+      {!showWarningBanner && <WarningBanner />}
       <Stack className="container-fluid w-100" gap={4}>
         <div className="row data-refresh-msg-container">
           <div className="col">

src/components/AdvanceAnalyticsV2/WarningBanner.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import Cookies from 'universal-cookie';
+import {
+  PageBanner,
+} from '@openedx/paragon';
+import { ANALYTICS_WARNING_BANNER_COOKIE } from './data/constants';
+
+const WarningBanner = () => {
+  const [showBanner, setShowBanner] = useState(true);
+  const cookies = new Cookies();
+
+  const onDismiss = () => {
+    setShowBanner(false);
+    cookies.set(ANALYTICS_WARNING_BANNER_COOKIE, true, { sameSite: 'strict' });
+  };
+  return (
+    <PageBanner
+      variant="warning"
+      dismissible
+      show={showBanner}
+      onDismiss={onDismiss}
+    >
+      🚀 Analytics Just Got Better! We&apos;ve updated charts, improved performance,
+      and now include audit enrollments for a more complete view of your data.
+    </PageBanner>
+  );
+};
+
+export default WarningBanner;

src/components/AdvanceAnalyticsV2/data/constants.js

@@ -114,3 +114,5 @@ export const CALCULATION = {
   MOVING_AVERAGE_3_PERIODS: 'moving-average-3-period',
   MOVING_AVERAGE_7_PERIODS: 'moving-average-7-period',
 };
+
+export const ANALYTICS_WARNING_BANNER_COOKIE = 'hide-warning-banner-on-analytics';

src/components/AdvanceAnalyticsV2/tests/WarningBanner.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Cookies from 'universal-cookie';
+import WarningBanner from '../WarningBanner';
+import '@testing-library/jest-dom';
+
+// jest.mock('universal-cookie');
+jest.mock('universal-cookie', () => jest.fn().mockImplementation(() => ({
+  set: jest.fn(),
+})));
+
+describe('WarningBanner', () => {
+  let cookies;
+
+  beforeEach(() => {
+    cookies = new Cookies();
+    cookies.set = jest.fn();
+  });
+
+  test('should trigger onDismiss and set cookie in warning banner', () => {
+    render(<WarningBanner />);
+
+    // Check that the banner is initially shown
+    expect(screen.getByText(/Analytics Just Got Better!/i)).toBeInTheDocument();
+
+    // Trigger the onDismiss function
+    fireEvent.click(screen.getByRole('button', { name: /Dismiss/i }));
+
+    // Check that the banner is no longer shown
+    expect(screen.queryByText(/Analytics Just Got Better!/i)).not.toBeInTheDocument();
+  });
+});