Merge branch 'master' into yuanyuan/ent-7335

docs/decisions/0005-moment-to-dayjs.rst

@@ -0,0 +1,46 @@
+5. Replacing Moment.js library with Day.js
+============================================================
+
+Status
+******
+
+In progress
+
+Context
+*******
+
+Moment.js is a widely used time and date library, but the creators have decided to make it a legacy project that no 
+longer fixes bugs or adds new features. Because of this, and because of the large size that the Moment.js package takes up 
+(4.23 MB according to npm and the minified size is 6.3KB), we are choosing to replace all instances of Moment.js 
+in our enterprise repositories. 
+
+Decisions
+*********
+
+In its stead, we are choosing to replace this library with the Day.js project. This is one of the projects that were
+explicitly recommended from the Moment.js team as a recommended alternative. Out of the box, it supports basic usage,
+and additional plugins have been identified based on a look through our current usages of Moment.js in our codebase. 
+The plugins that we will need to add are Duration, UTC, and Timezone, with more possibilities available for future use. 
+
+Day.js also has almost identical functions to Moment, and was definitely created with this in mind. So most files will
+just need to replace the package name and nothing else 
+
+``moment(date).format('MMMM D, YYYY') -> dayjs(date).format('MMMM D, YYYY')``
+
+Consequences
+************
+
+By choosing Day.js over another, larger library like date-fns, we sacrifice more of the out of the box functionality
+that comes from having a bigger library. Also, day.js does not support tree-shaking like the date-fns library does.
+However, by only installing needed plugins and starting from a much smaller package size, Day.js will considerably 
+decrease the JS bundle size while still maintaining the core functionality.
+
+Alternatives Considered
+***********************
+
+date-fns
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Date-fns has a 162.1 kB bundle size compared to 6.4 kB of day.js bundle. Since the majority of the functionality
+we are using with these libraries is basic, and the intended goal is to ultimately decrease the bundle size, 
+opting for the more lightweight library was the preferred path forward. 

package.json

@@ -33,18 +33,14 @@
     "@edx/frontend-enterprise-utils": "3.2.0",
     "@edx/frontend-platform": "4.0.1",
     "@edx/paragon": "20.39.2",
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14",
     "algoliasearch": "4.8.3",
     "axios-mock-adapter": "1.19.0",
     "classnames": "2.2.6",
     "color": "3.1.3",
     "color-contrast-checker": "^2.1.0",
     "core-js": "3.7.0",
     "dash-embedded-component": "file:packages/dash-embedded-component-2.0.2.tgz",
+    "dayjs": "^1.11.9",
     "file-saver": "1.3.8",
     "font-awesome": "4.7.0",
     "frontend-platform-shim": "file:packages/frontend-platform-shim",
@@ -53,7 +49,6 @@
     "jest-environment-jsdom": "26.6.1",
     "lodash": "4.17.21",
     "lodash.debounce": "4.0.8",
-    "moment": "2.27.0",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.13.1",

src/components/Admin/AdminCards.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Award, Check, Groups, RemoveRedEye,
+} from '@edx/paragon/icons';
 
 import NumberCard from '../NumberCard';
 
@@ -17,7 +20,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.registeredLearners',
           defaultMessage: 'total number of learners registered',
         }),
-        iconClassName: 'fa fa-users',
+        icon: Groups,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.registeredUnenrolledLearners',
@@ -32,7 +35,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.enrolledOneCourse',
           defaultMessage: 'learners enrolled in at least one course',
         }),
-        iconClassName: 'fa fa-check',
+        icon: Check,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.enrolledLearners',
@@ -53,7 +56,7 @@ class AdminCards extends React.Component {
           id: 'adminPortal.cards.activeLearnersPastWeek',
           defaultMessage: 'active learners in the past week',
         }),
-        iconClassName: 'fa fa-eye',
+        icon: RemoveRedEye,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.learnersActiveWeek',
@@ -77,7 +80,7 @@ class AdminCards extends React.Component {
       courseCompletions: {
         ref: React.createRef(),
         description: 'course completions',
-        iconClassName: 'fa fa-trophy',
+        icon: Award,
         actions: [{
           label: intl.formatMessage({
             id: 'adminPortal.cards.completedLearners',
@@ -107,7 +110,7 @@ class AdminCards extends React.Component {
           id={cardKey}
           title={title}
           description={card.description}
-          iconClassName={card.iconClassName}
+          icon={card.icon}
           detailActions={card.actions}
         />
       </div>

src/components/Admin/AdminSearchForm.jsx

@@ -1,10 +1,10 @@
 /* eslint-disable camelcase */
 import React from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 import { Form } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';
 
 import SearchBar from '../SearchBar';
 import { updateUrl } from '../../utils';
@@ -80,7 +80,7 @@ class AdminSearchForm extends React.Component {
                 <Form.Label className="search-label mb-2">
                   Filter by start date
                   <IconWithTooltip
-                    icon={faInfoCircle}
+                    icon={Info}
                     altText="More information"
                     tooltipText="A start date can be selected after the course name is selected."
                   />
@@ -101,7 +101,7 @@ class AdminSearchForm extends React.Component {
                       value={date}
                       key={date}
                     >
-                      {moment(date).format('MMMM D, YYYY')}
+                      {dayjs(date).format('MMMM D, YYYY')}
                     </option>
                   ))}
                 </Form.Control>

src/components/Admin/EmbeddedSubscription.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
+import dayjs from 'dayjs';
 import { useParams, Link } from 'react-router-dom';
 import { Form, Icon } from '@edx/paragon';
-import moment from 'moment';
 import { Lightbulb, ArrowOutward } from '@edx/paragon/icons';
 import ConnectedSubscriptionDetailPage from './SubscriptionDetailPage';
 import { SubscriptionContext } from '../subscriptions/SubscriptionData';
@@ -15,7 +15,7 @@ const EmbeddedSubscription = () => {
   const [subscriptionUUID, setSubscriptionUUID] = useState(null);
   const [firstLoad, setFirstLoad] = useState(true);
   const sortedSubscriptions = sortSubscriptionsByStatus(subscriptions);
-  const activeSubscriptions = sortedSubscriptions.filter(c => !moment().isAfter(c.expirationDate));
+  const activeSubscriptions = sortedSubscriptions.filter(c => !dayjs().isAfter(c.expirationDate));
   const match = { params: { subscriptionUUID } };
   if (!loading && activeSubscriptions.length > 0 && firstLoad) {
     match.params.subscriptionUUID = activeSubscriptions[0].uuid;

src/components/Admin/SubscriptionDetails.jsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   Row, Col, Toast, Button,
 } from '@edx/paragon';
@@ -37,7 +37,7 @@ const SubscriptionDetails = ({ enterpriseSlug }) => {
           <div className="mt-3 d-flex align-items-center">
             <div className="mr-5">
               <span>
-                {moment(subscription.startDate).format('MMMM D, YYYY')} - {moment(subscription.expirationDate).format('MMMM D, YYYY')}
+                {dayjs(subscription.startDate).format('MMMM D, YYYY')} - {dayjs(subscription.expirationDate).format('MMMM D, YYYY')}
               </span>
             </div>
           </div>