feat: release analytics v2

feat: analytics v2 onboarding flow
feat: analytics v2 new feature notification

Author: muhammad-ammar

.env.development-stage

@@ -39,8 +39,9 @@ FEATURE_API_CREDENTIALS_TAB='true'
 FEATURE_PENDING_ENROLLMENT_ACTIONS='false'
 ANALYTICS_SUPPORTED='true'
 
-# Admin onboarding flow uuids 
+# Admin onboarding flow uuids
 FLOW_TRACK_LEARNER_PROGRESS_UUID="14339274-93de-4a16-b640-338bda4b70b9"
+FLOW_ANALYTICS_UUID="5b1f3a2c-3f4e-4d1e-8f4b-5e2f9c8b6a1d"
 FLOW_ORGANIZE_LEARNERS_UUID="c1d85a44-7285-415c-872d-9a89cbeaabfb"
 FLOW_ENROLLMENT_INSIGHTS="e75427b5-69b7-4ef7-ad75-38f7f5182a49"
 FLOW_SHOWCASE_COURSES_UUID="e546b3aa-b55c-44e6-8293-4bbb2f7be50a"

src/components/AdvanceAnalyticsV2.0/AnalyticsPage.jsx

@@ -8,6 +8,7 @@ import Hero from '../Hero';
 import Engagements from './tabs/Engagements';
 import Progress from './tabs/Progress';
 import Outcomes from './tabs/Outcomes';
+import { ANALYTICS_V2_TARGETS } from '../ProductTours/AdminOnboardingTours/constants';
 
 const AnalyticsPage = ({ enterpriseId }) => {
   const [activeTab, setActiveTab] = useState('engagements');
@@ -33,6 +34,7 @@ const AnalyticsPage = ({ enterpriseId }) => {
             }}
           >
             <Tab
+              id={ANALYTICS_V2_TARGETS.ENGAGEMENTS_TAB}
               eventKey="engagements"
               title={intl.formatMessage({
                 id: 'analytics.engagement.tab.title.heading',
@@ -45,6 +47,7 @@ const AnalyticsPage = ({ enterpriseId }) => {
               />
             </Tab>
             <Tab
+              id={ANALYTICS_V2_TARGETS.PROGRESS_TAB}
               eventKey="Progress"
               title={intl.formatMessage({
                 id: 'advance.analytics.progress.tab.title.heading',
@@ -57,6 +60,7 @@ const AnalyticsPage = ({ enterpriseId }) => {
               />
             </Tab>
             <Tab
+              id={ANALYTICS_V2_TARGETS.OUTCOMES_TAB}
               eventKey="Outcomes"
               title={intl.formatMessage({
                 id: 'advance.analytics.outcomes.tab.title.heading',

src/components/EnterpriseApp/EnterpriseAppRoutes.jsx

@@ -82,7 +82,7 @@ const EnterpriseAppRoutes = ({
         />
       )}
 
-      {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analytics && (
+      {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analytics_v1 && features.ADMIN_V1 && (
         <Route
           key="analytics"
           path="/"
@@ -92,7 +92,7 @@ const EnterpriseAppRoutes = ({
         />
       )}
 
-      {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analytics_v2 && features.ADMIN_V2 && (
+      {enableAnalyticsPage && enterpriseAppPage === ROUTE_NAMES.analytics && (
       <Route
         key="analytics"
         path="/"

src/components/EnterpriseApp/EnterpriseAppRoutes.test.jsx

@@ -55,8 +55,10 @@ describe('EnterpriseAppRoutes', () => {
     expect(screen.getByText('This feature is currently unavailable in this environment.')).toBeInTheDocument();
   });
 
-  it('renders AnalyticsV2Page when ANALYTICS_SUPPORTED is true', () => {
+  it('renders AnalyticsV2Page when ANALYTICS_SUPPORTED and ADMIN_V1 is true', () => {
+    mockEnterpriseAppPage = 'analytics-v1';
     features.ANALYTICS_SUPPORTED = true;
+    features.ADMIN_V1 = true;
     renderWithProviders(defaultProps);
     expect(screen.getByText('AnalyticsV2Page Mock Component')).toBeInTheDocument();
   });
@@ -67,10 +69,9 @@ describe('EnterpriseAppRoutes', () => {
     renderWithProviders(defaultProps);
     expect(screen.getByText('AdminPage Mock Component')).toBeInTheDocument();
   });
-  it('renders RevisedAnalyticsV2Page when all flags are true', () => {
-    mockEnterpriseAppPage = 'analytics-v2';
+  it('renders RevisedAnalyticsV2Page by default', () => {
+    mockEnterpriseAppPage = 'analytics';
     features.ANALYTICS_SUPPORTED = true;
-    features.ADMIN_V2 = true;
     renderWithProviders(defaultProps);
     expect(screen.getByText('RevisedAnalyticsV2Page Mock Component')).toBeInTheDocument();
   });

src/components/EnterpriseApp/data/constants.js

@@ -2,7 +2,7 @@
 
 export const ROUTE_NAMES = {
   analytics: 'analytics',
-  analytics_v2: 'analytics-v2',
+  analytics_v1: 'analytics-v1',
   appearance: 'appearance',
   bulkEnrollment: 'enrollment',
   bulkEnrollmentResults: 'bulk-enrollment-results',

src/components/ProductTours/AdminOnboardingTours/constants.js

@@ -31,6 +31,13 @@ export const ANALYTICS_INSIGHTS_TARGETS = {
   SKILLS: 'analytics-skills',
 };
 
+export const ANALYTICS_V2_TARGETS = {
+  SIDEBAR: 'analytics-sidebar',
+  ENGAGEMENTS_TAB: 'analytics-v2-engagements-tab',
+  PROGRESS_TAB: 'analytics-v2-progress-tab',
+  OUTCOMES_TAB: 'analytics-v2-outcomes-tab',
+};
+
 export const ADMINISTER_SUBSCRIPTIONS_TARGETS = {
   SIDEBAR: 'subscriptions-sidebar',
   SUBSCRIPTION_PLANS_LIST: 'subscription-plans-list',
@@ -95,6 +102,10 @@ export const ADMIN_TOUR_EVENT_NAMES = {
   ALLOCATE_ASSIGNMENT_DISMISS_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.allocate-assignment.dismiss',
   SET_UP_PREFERENCES_COMPLETED_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.set-up-preferences.completed',
   SET_UP_PREFERENCES_DISMISS_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.set-up-preferences.dismiss',
+  ANALYTICS_ADVANCE_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.analytics.advance',
+  ANALYTICS_BACK_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.analytics.back',
+  ANALYTICS_COMPLETED_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.analytics.completed',
+  ANALYTICS_DISMISS_EVENT_NAME: 'edx.ui.enterprise.admin-portal.admin-onboarding-tours.analytics.dismiss',
 };
 
 export const ONBOARDING_WELCOME_MODAL_COOKIE_NAME = 'seen-onboarding-welcome-modal';

src/components/ProductTours/AdminOnboardingTours/flows/AdminOnboardingTour.tsx

@@ -3,20 +3,20 @@ import { logError } from '@edx/frontend-platform/logging';
 
 import {
   ADMINISTER_SUBSCRIPTIONS_TARGETS,
-  ANALYTICS_INSIGHTS_TARGETS,
   CUSTOMIZE_REPORTS_SIDEBAR,
   ORGANIZE_LEARNER_TARGETS,
   TRACK_LEARNER_PROGRESS_TARGETS,
   ALLOCATE_LEARNING_BUDGETS_TARGETS,
+  ANALYTICS_V2_TARGETS,
 } from '../constants';
 
 import { TourStep } from '../../types';
 import LmsApiService from '../../../../data/services/LmsApiService';
 import AdministerSubscriptionsFlow from './AdministerSubscriptionsFlow';
 import useAllocateLearningBudgetsFlow from './AllocateLearningBudgetsFlow';
-import AnalyticsFlow from './AnalyticsFlow';
 import CustomizeReportsFlow from './CustomizeReportsFlow';
 import LearnerProgressFlow from './LearnerProgressFlow';
+import AnalyticsV2Flow from './AnalyticsV2Flow';
 import OrganizeLearnersFlow from './OrganizeLearnersFlow';
 import SetUpPreferencesFlow from './SetUpPreferencesFlow';
 import { TOUR_TARGETS } from '../../constants';
@@ -76,7 +76,7 @@ const AdminOnboardingTour = (
   const administerSubscriptionsFlow = AdministerSubscriptionsFlow({
     currentStep, enterpriseId, enterpriseSlug, handleEndTour, handleBackTour, setCurrentStep, targetSelector,
   });
-  const analyticsFlow = AnalyticsFlow({
+  const analyticsV2Flow = AnalyticsV2Flow({
     handleAdvanceTour, handleBackTour, handleEndTour,
   });
   const customizeReportsFlow = CustomizeReportsFlow({ handleEndTour });
@@ -103,8 +103,8 @@ const AdminOnboardingTour = (
   const flowMapping = {
     [TRACK_LEARNER_PROGRESS_TARGETS.LEARNER_PROGRESS_SIDEBAR]: learnerProgressFlow,
     ...Object.fromEntries(
-      Object.values(ANALYTICS_INSIGHTS_TARGETS)
-        .map(target => [target, analyticsFlow]),
+      Object.values(ANALYTICS_V2_TARGETS)
+        .map(target => [target, analyticsV2Flow]),
     ),
     ...Object.fromEntries(
       Object.values(ORGANIZE_LEARNER_TARGETS)

src/components/ProductTours/AdminOnboardingTours/flows/AnalyticsFlow.tsx

@@ -0,0 +1,55 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ANALYTICS_V2_TARGETS, ADMIN_TOUR_EVENT_NAMES } from '../constants';
+import messages from '../messages';
+import { TourStep } from '../../types';
+import { configuration } from '../../../../config';
+
+interface CreateTourFlowsProps {
+  handleAdvanceTour: (advanceEventName: string) => void;
+  handleEndTour: (endEventName: string, flowUuid?: string) => void;
+  handleBackTour: (backEventName: string) => void;
+}
+
+const AnalyticsV2Flow = ({
+  handleAdvanceTour,
+  handleEndTour,
+  handleBackTour,
+}: CreateTourFlowsProps): Array<TourStep> => {
+  const intl = useIntl();
+  const onLearnerAdvance = () => handleAdvanceTour(ADMIN_TOUR_EVENT_NAMES.ANALYTICS_ADVANCE_EVENT_NAME);
+  const onLearnerBack = () => handleBackTour(ADMIN_TOUR_EVENT_NAMES.ANALYTICS_BACK_EVENT_NAME);
+
+  const analyticsV2Flow: Array<TourStep> = [{
+    target: `#${ANALYTICS_V2_TARGETS.SIDEBAR}`,
+    placement: 'right',
+    title: intl.formatMessage(messages.analyticsStepOneTitle),
+    body: intl.formatMessage(messages.analyticsStepOneBody),
+    onAdvance: onLearnerAdvance,
+  }, {
+    target: `#${ANALYTICS_V2_TARGETS.ENGAGEMENTS_TAB}`,
+    placement: 'bottom',
+    body: intl.formatMessage(messages.analyticsStepTwoBody),
+    onAdvance: onLearnerAdvance,
+    onBack: onLearnerBack,
+  }, {
+    target: `#${ANALYTICS_V2_TARGETS.PROGRESS_TAB}`,
+    placement: 'bottom',
+    body: intl.formatMessage(messages.analyticsStepThreeBody),
+    onAdvance: onLearnerAdvance,
+    onBack: onLearnerBack,
+  }, {
+    target: `#${ANALYTICS_V2_TARGETS.OUTCOMES_TAB}`,
+    placement: 'bottom',
+    body: intl.formatMessage(messages.analyticsStepFourBody),
+    onAdvance: onLearnerAdvance,
+    onBack: onLearnerBack,
+    onEnd: () => handleEndTour(
+      ADMIN_TOUR_EVENT_NAMES.ANALYTICS_COMPLETED_EVENT_NAME,
+      configuration.ADMIN_ONBOARDING_UUIDS.FLOW_ANALYTICS_UUID,
+    ),
+  }];
+
+  return analyticsV2Flow;
+};
+
+export default AnalyticsV2Flow;

src/components/ProductTours/AdminOnboardingTours/flows/AnalyticsV2Flow.tsx

@@ -2,7 +2,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 
 export const ORGANIZE_LEARNERS_TITLE = 'Organize learners';
 export const TRACK_LEARNER_PROGRESS_TITLE = 'Track learner progress';
-export const VIEW_ENROLLMENTS_INSIGHT_TITLE = 'View enrollment insights';
+export const ANALYTICS_V2_TITLE = 'View enrollment insights';
 export const ADMINISTER_SUBSCRIPTIONS_TITLE = 'Administer subscriptions';
 export const ALLOCATE_LEARNING_BUDGET_TITLE = 'Allocate learning budget';
 export const CUSTOMIZE_REPORTS_TITLE = 'Customize reports';
@@ -97,6 +97,31 @@ const messages = defineMessages({
     defaultMessage: 'Export the report as a CSV to gain insights and organize data efficiently.',
     description: 'Description for the learner progress tracking step seven',
   },
+  analyticsStepOneTitle: {
+    id: 'adminPortal.productTours.adminOnboarding.analytics.title.1',
+    defaultMessage: ANALYTICS_V2_TITLE,
+    description: 'Title for the analytics step one',
+  },
+  analyticsStepOneBody: {
+    id: 'adminPortal.productTours.adminOnboarding.analytics.body.1',
+    defaultMessage: 'Explore insights about your learners and their enrollments. Adjust date ranges, granularity, and analytics type to view data on enrollments, engagement, completions, leaderboards, and skills tracking.',
+    description: 'Description for the analytics tracking step one',
+  },
+  analyticsStepTwoBody: {
+    id: 'adminPortal.productTours.adminOnboarding.analytics.body.2',
+    defaultMessage: 'The Engagement tab will help you understand course enrollment, learning hours, top subjects, and completions by your learners. Filter data by date ranges, group, budget, and course.',
+    description: 'Description for the analytics tracking step two',
+  },
+  analyticsStepThreeBody: {
+    id: 'adminPortal.productTours.adminOnboarding.analytics.body.3',
+    defaultMessage: 'The Progress tab will help you summarize completed courses by your learners. Filter data by date ranges, group, budget, and course.',
+    description: 'Description for the analytics tracking step three',
+  },
+  analyticsStepFourBody: {
+    id: 'adminPortal.productTours.adminOnboarding.analytics.body.4',
+    defaultMessage: 'The Outcomes tab will help you visualize the skills your learner have gained from the courses. Filter data by date ranges, group, budget, and course.',
+    description: 'Description for the analytics tracking step four',
+  },
   organizeLearnersStepOneTitle: {
     id: 'adminPortal.productTours.adminOnboarding.organizeLearners.title.1',
     defaultMessage: ORGANIZE_LEARNERS_TITLE,
@@ -148,47 +173,6 @@ const messages = defineMessages({
     defaultMessage: '"View group" allows you to edit group details, add and remove learners, or track learner\'s progress.',
     description: 'Description for the organize learners flow with groups step six',
   },
-  viewEnrollmentInsights: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.title.1',
-    defaultMessage: VIEW_ENROLLMENTS_INSIGHT_TITLE,
-    description: 'Title for the analytics step',
-  },
-  viewEnrollmentInsightsStepOneBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.1',
-    defaultMessage: 'Explore insights about your learners and their enrollments. '
-    + 'Adjust date ranges, granularity, and analytics type to view data on enrollments, engagement '
-    + 'completions, leaderboards, and skills tracking.',
-    description: 'Description for the analytics tracking step one',
-  },
-  viewEnrollmentInsightsStepTwoBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.2',
-    defaultMessage: 'Adjust the date range and granularity to customize the data displayed below.',
-    description: 'Description for the analytics tracking step two',
-  },
-  viewEnrollmentInsightsStepThreeBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.3',
-    defaultMessage: 'See quick metrics for Enrollments, Distinct Courses, Daily Sessions, Learning Hours, and '
-    + 'completions at a glance.',
-    description: 'Description for the analytics tracking step three',
-  },
-  viewEnrollmentInsightsStepFourBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.4',
-    defaultMessage: 'Use the Enrollments, Engagements, and Completions tabs to view learner activity from different '
-    + 'perspectives. Scroll down for a breakdown of metrics by Course, Subject, and Individual.',
-    description: 'Description for the analytics tracking step four',
-  },
-  viewEnrollmentInsightsStepFiveBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.5',
-    defaultMessage: 'See your top learners ranked by learning hours. Download the CSV for more detailed insights. Only '
-    + 'learners who completed a course and at least one engagement activity are included.',
-    description: 'Description for the analytics tracking step five',
-  },
-  viewEnrollmentInsightsStepSixBody: {
-    id: 'adminPortal.productTours.adminOnboarding.viewEnrollmentInsights.body.6',
-    defaultMessage: 'Discover the most in-demand skills in your organization based on course enrollments and completions. '
-    + 'Use these insights to understand learner interests and skill development trends.',
-    description: 'Description for the analytics tracking step six',
-  },
 
   administerSubscriptionsTitle: {
     id: 'adminPortal.productTours.adminOnboarding.administerSubscriptions.title',