Merge pull request #1326 from openedx/ammar/disable-lpr-and-analytics…

…-on-stage

feat: disable lpr and analytics on stage

.env.development

@@ -59,3 +59,4 @@ AUTH0_SELF_SERVICE_INTEGRATION='true'
 MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
 DEMO_ENTEPRISE_UUID='set a valid enterprise uuid'
 EDX_ACCESS_URL=''
+ANALYTICS_SUPPORTED='true'

.env.development-stage

@@ -37,6 +37,7 @@ HOTJAR_APP_ID=''
 FEATURE_SSO_SETTINGS_TAB='true'
 FEATURE_API_CREDENTIALS_TAB='true'
 FEATURE_PENDING_ENROLLMENT_ACTIONS='false'
+ANALYTICS_SUPPORTED='true'
 # maintenance alert
 IS_MAINTENANCE_ALERT_ENABLED=''
 MAINTENANCE_ALERT_MESSAGE='edX is currently in a brief maintenance window. Functionality involving course enrollments is unavailable at this time, including enrollment and assignment. Please check back shortly to continue the learning journey.'

.env.test

@@ -17,3 +17,4 @@ ENTERPRISE_SUPPORT_REVOKE_LICENSE_URL = ''
 PLOTLY_SERVER_URL='http://localhost:8050'
 DEMO_ENTEPRISE_UUID='set a valid enterprise uuid'
 EDX_ACCESS_URL='https://2u-guid-staging.us.auth0.com'
+ANALYTICS_SUPPORTED='true'

src/components/EnterpriseApp/EnterpriseAppRoutes.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { Routes, Route, useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import { features } from '../../config';
 
 import AdminPage from '../../containers/AdminPage';
 import CodeManagementPage from '../CodeManagement';
@@ -12,6 +13,7 @@ import SettingsPage from '../settings';
 import { SubscriptionManagementPage } from '../subscriptions';
 import { PlotlyAnalyticsPage } from '../PlotlyAnalytics';
 import AnalyticsV2Page from '../AdvanceAnalyticsV2/AnalyticsV2Page';
+import FeatureNotSupportedPage from '../FeatureNotSupportedPage';
 import { ROUTE_NAMES } from './data/constants';
 import BulkEnrollmentResultsDownloadPage from '../BulkEnrollmentResultsDownloadPage';
 import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
@@ -38,7 +40,7 @@ const EnterpriseAppRoutes = ({
       {enterpriseAppPage === ROUTE_NAMES.learners && (
         <Route
           path="/:actionSlug?"
-          element={<AdminPage />}
+          element={features.ANALYTICS_SUPPORTED ? <AdminPage /> : <FeatureNotSupportedPage />}
         />
       )}
 
@@ -83,15 +85,17 @@ const EnterpriseAppRoutes = ({
         <Route
           key="analytics"
           path="/"
-          element={<PlotlyAnalyticsPage />}
+          element={features.ANALYTICS_SUPPORTED ? <PlotlyAnalyticsPage /> : <FeatureNotSupportedPage />}
         />
       )}
 
       {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analyticsv2 && (
         <Route
           key="analyticsv2"
           path="/"
-          element={<AnalyticsV2Page enterpriseId={enterpriseId} />}
+          element={features.ANALYTICS_SUPPORTED
+            ? <AnalyticsV2Page enterpriseId={enterpriseId} />
+            : <FeatureNotSupportedPage />}
         />
       )}
 

src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { features } from '../../config';
+import EnterpriseAppRoutes from './EnterpriseAppRoutes';
+import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
+
+jest.mock('../AdvanceAnalyticsV2/AnalyticsV2Page', () => function AnalyticsV2PageMock() {
+  return <div>AnalyticsV2Page Mock Component</div>;
+});
+jest.mock('../../containers/AdminPage', () => function AdminPageMock() {
+  return <div>AdminPage Mock Component</div>;
+});
+jest.mock('../PlotlyAnalytics', () => ({
+  PlotlyAnalyticsPage: () => <div>PlotlyAnalyticsPage Mock Component</div>,
+}));
+
+let mockEnterpriseAppPage = 'analyticsv2';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Routes: (props) => <span>{props.children}</span>,
+  Route: ({ element }) => element,
+  useParams: () => ({ enterpriseAppPage: mockEnterpriseAppPage }),
+}));
+
+const mockEnterpriseSubsidiesContextValue = {
+  canManageLearnerCredit: true,
+};
+
+const renderWithProviders = (props) => render(
+  <IntlProvider locale="en">
+    <EnterpriseSubsidiesContext.Provider value={mockEnterpriseSubsidiesContextValue}>
+      <EnterpriseAppRoutes {...props} />
+    </EnterpriseSubsidiesContext.Provider>
+  </IntlProvider>,
+);
+
+describe('EnterpriseAppRoutes', () => {
+  const defaultProps = {
+    email: '[email protected]',
+    enterpriseId: 'test-enterprise-id',
+    enterpriseName: 'Test Enterprise',
+    enableCodeManagementPage: false,
+    enableReportingPage: false,
+    enableSubscriptionManagementPage: false,
+    enableAnalyticsPage: true,
+    enableContentHighlightsPage: false,
+  };
+
+  it('renders FeatureNotSupportedPage when ANALYTICS_SUPPORTED is false', () => {
+    features.ANALYTICS_SUPPORTED = false;
+    renderWithProviders(defaultProps);
+    expect(screen.getByText('This feature is currently unavailable in this environment.')).toBeInTheDocument();
+  });
+
+  it('renders AnalyticsV2Page when ANALYTICS_SUPPORTED is true', () => {
+    features.ANALYTICS_SUPPORTED = true;
+    renderWithProviders(defaultProps);
+    expect(screen.getByText('AnalyticsV2Page Mock Component')).toBeInTheDocument();
+  });
+
+  it('renders AdminPage when ANALYTICS_SUPPORTED is true', () => {
+    mockEnterpriseAppPage = 'learners';
+    features.ANALYTICS_SUPPORTED = true;
+    renderWithProviders(defaultProps);
+    expect(screen.getByText('AdminPage Mock Component')).toBeInTheDocument();
+  });
+
+  it('renders Analytics when ANALYTICS_SUPPORTED is true', () => {
+    mockEnterpriseAppPage = 'analytics';
+    features.ANALYTICS_SUPPORTED = true;
+    renderWithProviders(defaultProps);
+    expect(screen.getByText('PlotlyAnalyticsPage Mock Component')).toBeInTheDocument();
+  });
+});

src/components/FeatureNotSupportedPage/FeatureNotSupportedPage.test.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import FeatureNotSupportedPage from './index';
+
+describe('<FeatureNotSupportedPage />', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create((
+        <IntlProvider locale="en">
+          <FeatureNotSupportedPage />
+        </IntlProvider>
+      ))
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/FeatureNotSupportedPage/__snapshots__/FeatureNotSupportedPage.test.jsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FeatureNotSupportedPage /> renders correctly 1`] = `
+<main
+  role="main"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <div
+    className="container-fluid mt-3"
+  >
+    <div
+      className="text-center py-5"
+    >
+      <div
+        className="fade alert-content alert alert-info show"
+        role="alert"
+      >
+        <span
+          className="pgn__icon alert-icon"
+        >
+          <svg
+            aria-hidden={true}
+            fill="none"
+            focusable={false}
+            height={24}
+            role="img"
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 15h-2v-6h2v6Zm0-8h-2V7h2v2Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+        <div
+          className="pgn__alert-message-wrapper"
+        >
+          <div
+            className="alert-message-content"
+          >
+            This feature is currently unavailable in this environment.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+`;

src/components/FeatureNotSupportedPage/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+} from '@openedx/paragon';
+import {
+  Info,
+} from '@openedx/paragon/icons';
+
+export const FeatureNotSupported = () => (
+  <>
+    <Helmet>
+      <title>Feature not supported</title>
+    </Helmet>
+    <div className="text-center py-5">
+      <Alert variant="info" icon={Info}>
+        <FormattedMessage
+          id="admin.portal.feature.not.supported.page.message"
+          defaultMessage="This feature is currently unavailable in this environment."
+          description="The message displayed on the feature not supported page"
+        />
+      </Alert>
+    </div>
+  </>
+);
+
+const FeatureNotSupportedPage = () => (
+  <main role="main" style={{ flex: 1 }}>
+    <div className="container-fluid mt-3">
+      <FeatureNotSupported />
+    </div>
+  </main>
+);
+
+export default FeatureNotSupportedPage;

src/config/index.js

@@ -45,6 +45,7 @@ const features = {
   REPORTING_CONFIGURATIONS: process.env.FEATURE_REPORTING_CONFIGURATIONS || hasFeatureFlagEnabled('REPORTING_CONFIGURATIONS'),
   ANALYTICS: process.env.FEATURE_ANALYTICS || hasFeatureFlagEnabled('ANALYTICS'),
   ANALYTICS_V2: process.env.FEATURE_ANALYTICS_V2 || hasFeatureFlagEnabled('ANALYTICS_V2'),
+  ANALYTICS_SUPPORTED: process.env.ANALYTICS_SUPPORTED || hasFeatureFlagEnabled('ANALYTICS_SUPPORTED'),
   SAML_CONFIGURATION: process.env.FEATURE_SAML_CONFIGURATION || hasFeatureFlagEnabled('SAML_CONFIGURATION'),
   SUPPORT: process.env.FEATURE_SUPPORT || hasFeatureFlagEnabled('SUPPORT'),
   EXTERNAL_LMS_CONFIGURATION: process.env.FEATURE_EXTERNAL_LMS_CONFIGURATION || hasFeatureFlagEnabled('EXTERNAL_LMS_CONFIGURATION'),