Skip to content

Commit

Permalink
feat: use frontend-plugin-framework to provide a FooterSlot
Browse files Browse the repository at this point in the history
  • Loading branch information
brian-smith-tcril authored and arbrandes committed Jun 6, 2024
1 parent 75725c1 commit f86467d
Show file tree
Hide file tree
Showing 11 changed files with 8,822 additions and 5,809 deletions.
1 change: 0 additions & 1 deletion .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/login'
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'
Expand Down
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,11 @@ check the ``enabled`` and ``enabled for all courses`` boxes.
numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane,
recalculated grade values, verify you've set all flags correctly.

## 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).

## Running tests

1. Assuming that you're operating in the context of the edX devstack,
Expand Down
14,554 changes: 8,758 additions & 5,796 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,12 @@
],
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-component-footer": "^13.0.2",
"@edx/frontend-component-header": "^5.0.2",
"@edx/frontend-platform": "^7.1.0",
"@edx/openedx-atlas": "^0.6.0",
"@edx/react-unit-test-utils": "^2.0.0",
"@openedx/frontend-plugin-framework": "^1.1.2",
"@openedx/frontend-slot-footer": "^1.0.2",
"@openedx/paragon": "^22.1.1",
"@edx/reactifex": "^2.1.1",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
Expand Down
4 changes: 2 additions & 2 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';

import { AppProvider } from '@edx/frontend-platform/react';

import Footer from '@edx/frontend-component-footer';
import FooterSlot from '@openedx/frontend-slot-footer';
import Header from '@edx/frontend-component-header';

import store from 'data/store';
Expand All @@ -24,7 +24,7 @@ const App = () => (
/>
</Routes>
</main>
<Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
<FooterSlot />
</div>
</AppProvider>
);
Expand Down
9 changes: 1 addition & 8 deletions src/App.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils';

import { Route } from 'react-router-dom';

import Footer from '@edx/frontend-component-footer';

import store from 'data/store';
import GradebookPage from 'containers/GradebookPage';

Expand All @@ -18,13 +16,12 @@ jest.mock('react-router-dom', () => ({
jest.mock('@edx/frontend-platform/react', () => ({
AppProvider: () => 'AppProvider',
}));
jest.mock('@edx/frontend-component-footer', () => 'Footer');
jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
jest.mock('data/store', () => 'testStore');
jest.mock('containers/GradebookPage', () => 'GradebookPage');
jest.mock('@edx/frontend-component-header', () => 'Header');
jest.mock('./head/Head', () => 'Head');

const logo = 'fakeLogo.png';
let el;
let secondChild;

Expand All @@ -34,7 +31,6 @@ describe('App router component', () => {
});
describe('component', () => {
beforeEach(() => {
process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
el = shallow(<App />);
secondChild = el.instance.children;
});
Expand Down Expand Up @@ -63,8 +59,5 @@ describe('App router component', () => {
expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
});
});
test('Footer logo drawn from env variable', () => {
expect(secondChild[1].findByType(Footer)[0].props.logo).toEqual(logo);
});
});
});
2 changes: 1 addition & 1 deletion src/__snapshots__/App.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`App router component snapshot 1`] = `
/>
</Routes>
</main>
<Footer />
<FooterSlot />
</div>
</AppProvider>
`;
50 changes: 50 additions & 0 deletions src/plugin-slots/FooterSlot/README.md
Original file line number Diff line number Diff line change
@@ -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;
```
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/plugin-slots/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# `frontend-app-gradebook` Plugin Slots

* [`footer_slot`](./FooterSlot/)

0 comments on commit f86467d

Please sign in to comment.