Merge branch 'master' of https://github.com/openedx/frontend-app-admi…

…n-portal into bilalqamar95/node-v18-upgrade

.eslintignore

@@ -1,4 +1,5 @@
 coverage/*
 dist/
 node_modules/
+src/i18n/
 src/segment.js

.eslintrc.js

@@ -5,7 +5,26 @@ const config = getBaseConfig('eslint');
 /* Custom config manipulations */
 config.rules = {
   ...config.rules,
-  'default-param-last': 'off',
+  '@typescript-eslint/default-param-last': 'off',
+  'react/require-default-props': 'off',
+  'import/no-named-as-default': 0,
 };
 
+config.ignorePatterns = ["*.json", ".eslintrc.js", "*.config.js", "jsdom-with-global.js"];
+
+config.overrides =  [
+  {
+    files: ['*.test.js', '*.test.jsx'],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+      project: [
+        "./tsconfig.json",
+        "./functions/tsconfig.json",
+      ]
+    }
+  },
+];
+
+
+
 module.exports = config;

.gitignore

@@ -14,3 +14,5 @@ dist/
 
 # edx
 .env.private
+src/i18n/
+temp/

Makefile

@@ -1,3 +1,11 @@
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+intl_imports = ./node_modules/frontend-platform-shim/node_modules/.bin/intl-imports.js
+
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
 shell: ## run a shell on the cookie-cutter container
 	docker exec -it /bin/bash
 
@@ -30,3 +38,26 @@ restart-detached:
 
 validate-no-uncommitted-package-lock-changes:
 	git diff --name-only --exit-code package-lock.json
+
+requirements:
+	npm install
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-admin-portal/src/i18n/messages:frontend-app-admin-portal
+	$(intl_imports) paragon frontend-app-admin-portal

__mocks__/react-instantsearch-dom.jsx

@@ -7,7 +7,7 @@ const MockReactInstantSearch = jest.genMockFromModule(
   'react-instantsearch-dom',
 );
 
-// eslint-disable-next-line camelcase
+// eslint-disable-next-line @typescript-eslint/naming-convention
 const advertised_course_run = {
   start: '2020-09-09T04:00:00Z',
   key: 'course-v1:edX+Bee101+3T2020',

docs/how_tos/i18n.rst

@@ -0,0 +1,5 @@
+####################
+React App i18n HOWTO
+####################
+
+This document has moved to the frontend-platform repo: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst

package.json

@@ -9,8 +9,9 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "build:with-theme": "THEME=npm:@edx/brand-edx.org@latest npm run install-theme && fedx-scripts webpack",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "check-types": "tsc --noemit",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .; npm run check-types",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .tsx --ext .ts .",
     "precommit": "npm run lint",
     "prepublishOnly": "npm run build",
     "install-theme": "npm install \"@edx/brand@${THEME}\" --no-save",
@@ -45,6 +46,7 @@
     "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
+    "frontend-platform-shim": "file:packages/frontend-platform-shim",
     "history": "4.10.1",
     "html-react-parser": "3.0.7",
     "jest-environment-jsdom": "26.6.1",
@@ -109,4 +111,4 @@
     "resize-observer-polyfill": "1.5.1",
     "ts-jest": "^26.5.0"
   }
-}
+}

packages/frontend-platform-shim/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "frontend-platform-shim",
+  "version": "1.0.0",
+  "description": "Shim package to install the `intl-imports.js` script from [email protected]+ until the `frontend-app-admin-portal` upgrades from [email protected] . This package should be removed once the `frontend-app-admin-portal` is upgraded therefore the `peerDependencies` pin to ensure the TODO is coded into the dependency tree.",
+  "dependencies": {
+    "@edx/frontend-platform": "4.5.1"
+  },
+  "peerDependencies": {
+    "@edx/frontend-platform": "<4.1.0"
+  }
+}

src/components/Admin/Admin.test.jsx

@@ -6,6 +6,7 @@ import { MemoryRouter, Link } from 'react-router-dom';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
 import Admin from './index';
@@ -40,26 +41,28 @@ const store = mockStore({
 const AdminWrapper = props => (
   <MemoryRouter>
     <Provider store={store}>
-      <Admin
-        enterpriseId="test-enterprise"
-        enterpriseSlug="test-enterprise"
-        clearDashboardAnalytics={() => {}}
-        fetchDashboardAnalytics={() => {}}
-        fetchPortalConfiguration={() => {}}
-        fetchCsv={() => {}}
-        searchEnrollmentsList={() => {}}
-        tableData={[
-          {
-            course_title: 'Bears 101',
-            course_start: Date.now(),
-          },
-        ]}
-        match={{
-          params: {},
-          url: '/',
-        }}
-        {...props}
-      />
+      <IntlProvider locale="en">
+        <Admin
+          enterpriseId="test-enterprise"
+          enterpriseSlug="test-enterprise"
+          clearDashboardAnalytics={() => {}}
+          fetchDashboardAnalytics={() => {}}
+          fetchPortalConfiguration={() => {}}
+          fetchCsv={() => {}}
+          searchEnrollmentsList={() => {}}
+          tableData={[
+            {
+              course_title: 'Bears 101',
+              course_start: Date.now(),
+            },
+          ]}
+          match={{
+            params: {},
+            url: '/',
+          }}
+          {...props}
+        />
+      </IntlProvider>
     </Provider>
   </MemoryRouter>
 );

src/components/Admin/AdminCards.jsx

@@ -1,46 +1,76 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
 import NumberCard from '../NumberCard';
 
 class AdminCards extends React.Component {
   constructor(props) {
     super(props);
+    const { intl } = this.props;
 
     this.cards = {
       numberOfUsers: {
         ref: React.createRef(),
-        description: 'total number of learners registered',
+        description: intl.formatMessage({
+          id: 'adminPortal.cards.registeredLearners',
+          defaultMessage: 'total number of learners registered',
+        }),
         iconClassName: 'fa fa-users',
         actions: [{
-          label: 'Which learners are registered but not yet enrolled in any courses?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.registeredUnenrolledLearners',
+            defaultMessage: 'Which learners are registered but not yet enrolled in any courses?',
+          }),
           slug: 'registered-unenrolled-learners',
         }],
       },
       enrolledLearners: {
         ref: React.createRef(),
-        description: 'learners enrolled in at least one course',
+        description: intl.formatMessage({
+          id: 'adminPortal.cards.enrolledOneCourse',
+          defaultMessage: 'learners enrolled in at least one course',
+        }),
         iconClassName: 'fa fa-check',
         actions: [{
-          label: 'How many courses are learners enrolled in?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.enrolledLearners',
+            defaultMessage: 'How many courses are learners enrolled in?',
+          }),
           slug: 'enrolled-learners',
         }, {
-          label: 'Who is no longer enrolled in a current course?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.enrolledLearnersInactiveCourses',
+            defaultMessage: 'Who is no longer enrolled in a current course?',
+          }),
           slug: 'enrolled-learners-inactive-courses',
         }],
       },
       activeLearners: {
         ref: React.createRef(),
-        description: 'active learners in the past week',
+        description: intl.formatMessage({
+          id: 'adminPortal.cards.activeLearnersPastWeek',
+          defaultMessage: 'active learners in the past week',
+        }),
         iconClassName: 'fa fa-eye',
         actions: [{
-          label: 'Who are my top active learners?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.learnersActiveWeek',
+            defaultMessage: 'Who are my top active learners?',
+          }),
           slug: 'learners-active-week',
         }, {
-          label: 'Who has not been active for over a week?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.learnersInactiveWeek',
+            defaultMessage: 'Who has not been active for over a week?',
+          }),
           slug: 'learners-inactive-week',
         }, {
-          label: 'Who has not been active for over a month?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.learnersInactiveMonth',
+            defaultMessage: 'Who has not been active for over a month?',
+          }),
           slug: 'learners-inactive-month',
         }],
       },
@@ -49,10 +79,16 @@ class AdminCards extends React.Component {
         description: 'course completions',
         iconClassName: 'fa fa-trophy',
         actions: [{
-          label: 'How many courses have been completed by learners?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.completedLearners',
+            defaultMessage: 'How many courses have been completed by learners?',
+          }),
           slug: 'completed-learners',
         }, {
-          label: 'Who completed a course in the past week?',
+          label: intl.formatMessage({
+            id: 'adminPortal.cards.completedLearnersWeek',
+            defaultMessage: 'Who completed a course in the past week?',
+          }),
           slug: 'completed-learners-week',
         }],
       },
@@ -110,6 +146,8 @@ AdminCards.propTypes = {
   numberOfUsers: PropTypes.number.isRequired,
   courseCompletions: PropTypes.number.isRequired,
   enrolledLearners: PropTypes.number.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
 
-export default AdminCards;
+export default injectIntl(AdminCards);

src/components/Admin/SubscriptionDetailPage.jsx

@@ -10,7 +10,7 @@ import { useSubscriptionFromParams } from '../subscriptions/data/contextHooks';
 import SubscriptionDetailsSkeleton from '../subscriptions/SubscriptionDetailsSkeleton';
 import { LPR_SUBSCRIPTION_PAGE_SIZE } from '../subscriptions/data/constants';
 
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SubscriptionDetailPage = ({ enterpriseSlug, match }) => {
   const [subscription, loadingSubscription] = useSubscriptionFromParams({ match });