Merge branch master into bilalqamar95/jest-v29-upgrade

2024-05-20 16:07:50 +05:00
parent 0fcaa64a6e 0fbac0715d
commit 28da100ca2
13 changed files with 88 additions and 39 deletions
--- a/.env.development
+++ b/.env.development
@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
--- a/.env.test
+++ b/.env.test
@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
--- a/README.rst
+++ b/README.rst
@@ -30,6 +30,12 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.

+Plugins
+-------
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Contributing
 ------------

--- a/example.env.config.js
+++ b/example.env.config.js
@@ -29,7 +29,6 @@ module.exports = {
  LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
  LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
  LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
-  LOGO_POWERED_BY_OPEN_EDX_URL_SVG: 'https://edx-cdn.org/v3/stage/open-edx-tag.svg',
  FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
--- a/package-lock.json
+++ b/package-lock.json
@@ -2123,9 +2123,10 @@
      }
    },
    "node_modules/@edx/frontend-component-footer": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-13.1.0.tgz",
-      "integrity": "sha512-Rtv8dfQmL75El8kF8dG9nYF1Cqj2AbWPLVLE4b0XTvipfx2RMeDKpgAO5XLAzTt0h+5fmiMCGhVEv3Y70Xu5pQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.0.0.tgz",
+      "integrity": "sha512-3Riz6ippBnPz1oq6gZgFBx27bJkNL+rwwKrv0uCuHV/5MscS1aYeKx1ZAMuUsxkKcGX6uhyU6PwM6agvnhKfNQ==",
+      "peer": true,
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "6.5.2",
        "@fortawesome/free-brands-svg-icons": "6.5.2",
@@ -2149,6 +2150,7 @@
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
      "hasInstallScript": true,
+      "peer": true,
      "engines": {
        "node": ">=6"
      }
@@ -2158,6 +2160,7 @@
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
      "hasInstallScript": true,
+      "peer": true,
      "dependencies": {
        "@fortawesome/fontawesome-common-types": "6.5.2"
      },
@@ -2170,6 +2173,7 @@
      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
      "hasInstallScript": true,
+      "peer": true,
      "dependencies": {
        "@fortawesome/fontawesome-common-types": "6.5.2"
      },
@@ -2182,6 +2186,7 @@
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
      "hasInstallScript": true,
+      "peer": true,
      "dependencies": {
        "@fortawesome/fontawesome-common-types": "6.5.2"
      },
@@ -5795,6 +5800,7 @@
      "version": "20.0.1",
      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
      "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
+      "peer": true,
      "dependencies": {
        "@types/node": "*",
        "@types/tough-cookie": "*",
@@ -5982,7 +5988,8 @@
    "node_modules/@types/tough-cookie": {
      "version": "4.0.5",
      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
-      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA=="
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "peer": true
    },
    "node_modules/@types/warning": {
      "version": "3.0.3",
@@ -7611,6 +7618,7 @@
      "version": "0.2.6",
      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "peer": true,
      "dependencies": {
        "fast-json-stable-stringify": "2.x"
      },
@@ -15563,7 +15571,8 @@
    "node_modules/make-error": {
      "version": "1.3.6",
      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "peer": true
    },
    "node_modules/make-event-props": {
      "version": "1.6.2",
--- a/package.json
+++ b/package.json
@@ -28,8 +28,7 @@
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-component-footer": "13.1.0",
-    "@edx/frontend-enterprise-hotjar": "7.1.0",
+    "@edx/frontend-enterprise-hotjar": "3.0.0",
    "@edx/frontend-platform": "8.0.0",
    "@edx/openedx-atlas": "^0.6.0",
    "@edx/react-unit-test-utils": "3.0.0",
@@ -38,6 +37,7 @@
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@openedx/frontend-plugin-framework": "^1.2.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
    "@openedx/paragon": "^22.2.2",
    "@optimizely/react-sdk": "^2.9.2",
    "@redux-beacon/segment": "^1.1.0",
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';

 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { Alert } from '@openedx/paragon';

 import { RequestKeys } from 'data/constants/requests';
@@ -109,7 +109,7 @@ export const App = () => {
              )}
          </main>
        </AppWrapper>
-        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <FooterSlot />
        <ZendeskFab />
      </div>
    </>
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { shallow } from '@edx/react-unit-test-utils';

-import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';

@@ -15,7 +14,7 @@ import { ExperimentProvider } from 'ExperimentContext';
 import { App } from './App';
 import messages from './messages';

-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));

 jest.mock('containers/Dashboard', () => 'Dashboard');
 jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
@@ -38,8 +37,6 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');

-const logo = 'fakeLogo.png';
-
 jest.mock('@edx/frontend-platform', () => ({
  getConfig: jest.fn(() => ({})),
 }));
@@ -66,9 +63,6 @@ describe('App router component', () => {
      it('displays learner dashboard header', () => {
        expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
      });
-      test('Footer logo drawn from env variable', () => {
-        expect(el.instance.findByType(Footer)[0].props.logo).toEqual(logo);
-      });
      it('wraps the header and main components in an AppWrapper widget container', () => {
        const container = el.instance.findByType(AppWrapper)[0];
        expect(container.children[0].type).toEqual('LearnerDashboardHeader');
@@ -78,7 +72,7 @@ describe('App router component', () => {
    describe('no network failure', () => {
      beforeAll(() => {
        reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
        el = shallow(<App />);
      });
      runBasicTests();
@@ -96,7 +90,7 @@ describe('App router component', () => {
    describe('no network failure with optimizely url', () => {
      beforeAll(() => {
        reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
+        getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
        el = shallow(<App />);
      });
      runBasicTests();
@@ -114,7 +108,7 @@ describe('App router component', () => {
    describe('no network failure with optimizely project id', () => {
      beforeAll(() => {
        reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
        el = shallow(<App />);
      });
      runBasicTests();
@@ -132,7 +126,7 @@ describe('App router component', () => {
    describe('initialize failure', () => {
      beforeAll(() => {
        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
        el = shallow(<App />);
      });
      runBasicTests();
@@ -150,7 +144,7 @@ describe('App router component', () => {
    describe('refresh failure', () => {
      beforeAll(() => {
        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
        el = shallow(<App />);
      });
      runBasicTests();
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -27,9 +27,7 @@ exports[`App router component component initialize failure snapshot 1`] = `
        </Alert>
      </main>
    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
    <ZendeskFab />
  </div>
 </Fragment>
@@ -58,9 +56,7 @@ exports[`App router component component no network failure snapshot 1`] = `
        </ExperimentProvider>
      </main>
    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
    <ZendeskFab />
  </div>
 </Fragment>
@@ -92,9 +88,7 @@ exports[`App router component component no network failure with optimizely proje
        </ExperimentProvider>
      </main>
    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
    <ZendeskFab />
  </div>
 </Fragment>
@@ -126,9 +120,7 @@ exports[`App router component component no network failure with optimizely url s
        </ExperimentProvider>
      </main>
    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
    <ZendeskFab />
  </div>
 </Fragment>
@@ -161,9 +153,7 @@ exports[`App router component component refresh failure snapshot 1`] = `
        </Alert>
      </main>
    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
+    <FooterSlot />
    <ZendeskFab />
  </div>
 </Fragment>
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/FooterSlot/images/custom_footer.png
+++ b/src/plugin-slots/FooterSlot/images/custom_footer.png
--- a/src/plugin-slots/FooterSlot/images/default_footer.png
+++ b/src/plugin-slots/FooterSlot/images/default_footer.png
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -0,0 +1,3 @@
+# `frontend-app-learner-dashboard` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)