feat: avoid pulling entire lodash library into build (#515)

Importing from lodash was causing the entire library to be pulled. This
change reduces the compressed production build size of
frontend-app-profile by 6kB.

.gitignore

@@ -10,4 +10,4 @@ src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
 module.config.js
-src/i18n/messages
+src/i18n/messages

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-footer"
+  description: "A generic footer for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
 
 @import "@edx/frontend-component-footer/footer";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -13,7 +13,8 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "test:watch": "npm run test -- --watch"
   },
   "files": [
     "/dist"
@@ -36,20 +37,22 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.3",
+    "@edx/frontend-platform": "^8.2.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.2.2",
-    "@openedx/frontend-plugin-framework": "^1.1.2",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-build": "^14.3.1",
+    "@openedx/frontend-plugin-framework": "^1.5.0",
+    "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.1",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.6.1",
     "husky": "8.0.3",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.28.1",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "8.1.3",
+    "react-router-dom": "6.30.0",
+    "react-test-renderer": "18.3.1",
     "redux": "4.2.1",
     "semantic-release": "21.1.2"
   },
@@ -66,9 +69,9 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.11.3 < 23.0.0",
+    "@openedx/paragon": ">= 21.11.3 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   }
 }

src/_footer.scss

@@ -1,5 +1,5 @@
 $gray-footer: #fcfcfc !default;
 
 .footer {
-  background-color: $gray-footer;
+  background-color: var(--pgn-color-light-100, $gray-footer);
 }

src/components/Footer.test.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
@@ -76,19 +77,13 @@ describe('<Footer />', () => {
   });
 
   describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', () => {
+    it('calls onLanguageSelected prop when a language is changed', async () => {
+      const user = userEvent.setup();
       const mockHandleLanguageSelected = jest.fn();
       render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
 
-      fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
-        target: {
-          elements: {
-            'site-footer-language-select': {
-              value: 'es',
-            },
-          },
-        },
-      });
+      await user.selectOptions(screen.getByRole('combobox'), 'es');
+      await user.click(screen.getByTestId('site-footer-submit-btn'));
 
       expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
     });

src/components/studio-footer/StudioFooter.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -88,7 +88,7 @@ const StudioFooter = ({
               >
                 <FormattedMessage {...messages.studioXButtonLabel} />
               </Button>
-              {!_.isEmpty(config.SUPPORT_EMAIL) && (
+              {!isEmpty(config.SUPPORT_EMAIL) && (
                 <Button
                   as="a"
                   href={`mailto:${config.SUPPORT_EMAIL}`}
@@ -105,11 +105,11 @@ const StudioFooter = ({
         <ActionRow className="pt-3 m-0 x-small">
           © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
           <ActionRow.Spacer />
-          {!_.isEmpty(config.TERMS_OF_SERVICE_URL) && (
+          {!isEmpty(config.TERMS_OF_SERVICE_URL) && (
             <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
               {intl.formatMessage(messages.termsOfServiceLinkLabel)}
             </Hyperlink>
-          )}{!_.isEmpty(config.PRIVACY_POLICY_URL) && (
+          )}{!isEmpty(config.PRIVACY_POLICY_URL) && (
             <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
               {intl.formatMessage(messages.privacyPolicyLinkLabel)}
             </Hyperlink>

src/components/studio-footer/StudioFooter.test.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -56,35 +57,40 @@ describe('Footer', () => {
     });
   });
   describe('help section expanded view', () => {
-    it('help button should read Hide Studio help', () => {
+    it('help button should read Hide Studio help', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
         .toBeVisible();
     });
-    it('help button link row should be visible', () => {
+    it('help button link row should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('helpButtonRow')).toBeVisible();
     });
-    it('Open edX portal button should be visible', () => {
+    it('Open edX portal button should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
     });
-    it('should not show contact us button', () => {
+    it('should not show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.queryByTestId('contactUsButton')).toBeNull();
     });
-    it('should show contact us button', () => {
+    it('should show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('contactUsButton')).toBeVisible();
     });
   });

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',