Skip to content

feat: add navigation links to make footer consistent #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ahmed-arb merged 17 commits into from
Aug 29, 2025
Merged

feat: add navigation links to make footer consistent #13

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4e083fd
fix: made footer consistent where using custom footer
May 27, 2025
84988dc
fix: added LMS footer navlinks
May 29, 2025
8393f68
fix: linting error fixed and removed unecessary vars
Jun 6, 2025
eb2cf3d
fix: code refactoring
Jun 6, 2025
0ce52e3
fix: code refactoring
Jun 6, 2025
d6f6833
fix: code clean
Jun 6, 2025
b764c82
fix: snapshot updated
Jun 10, 2025
40fb466
Merge branch 'teak/indigo' into zubair/TIA-137-61
zubairshakoorarbisoft Jun 10, 2025
973e1b8
fix: redundant images removed after conflict resolution
Jun 10, 2025
e3ed25f
fix: conflict resolved and snapshot updated
Jun 10, 2025
a8ee834
fix: updated footer links according legacy pages
Jun 18, 2025
fe2cf7a
fix: code ckean
Jun 18, 2025
a339ec0
fix: code clean
Jun 18, 2025
c14be31
fix: code clean
Jun 18, 2025
c5d04cb
fix: lint errors fixed
Jun 18, 2025
4f6b37d
fix: fixed typo
Jun 19, 2025
4e78bcc
test: update the test coverage for the footer nav
arbirali Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
} = this.props;
const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
const config = getConfig();
const indigoFooterNavLinks = config.INDIGO_FOOTER_NAV_LINK || [];
Copy link
Copy Markdown

@DawoudSheraz DawoudSheraz Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should there be default links in case the config is not present? Otherwise, it would look like an empty footer.

Copy link
Copy Markdown
Author

@zubairshakoorarbisoft zubairshakoorarbisoft Jun 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DawoudSheraz We are getting INDIGO_FOOTER_NAV_LINKS variable from indigo side, if there is any default one, will reflect here otherwise it should be same as legacy pages.

Copy link
Copy Markdown

@DawoudSheraz DawoudSheraz Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will it be same as legacy pages?

Copy link
Copy Markdown
Author

@zubairshakoorarbisoft zubairshakoorarbisoft Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because INDIGO_FOOTER_NAV_LINKS is setting from indigo with following command:
tutor config save --set "INDIGO_FOOTER_NAV_LINKS=[{"title": "About", "url": "/about"}, {"title": "Contact", "url": "/contact"}]"
And we are using that same value here in footer component so that the navlinks on both sides will same.

Copy link
Copy Markdown
Author

@zubairshakoorarbisoft zubairshakoorarbisoft Jun 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say you unset the INDIGO_FOOTER_NAV_LINKS variable using the following command:

tutor config save --unset "INDIGO_FOOTER_NAV_LINKS"

When this is done, Tutor automatically sets a default set of 7 footer navigation links for all MFEs. So, if INDIGO_FOOTER_NAV_LINKS is not explicitly set, Tutor Indigo provides default navlinks across every MFE.

The following line sets the default value for INDIGO_FOOTER_NAV_LINKS in the Tutor config at this path:
env/apps/openedx/settings/lms/production.py

MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = [
    {'title': 'About Us', 'url': '/about'},
    {'title': 'Blog', 'url': '/blog'},
    {'title': 'Donate', 'url': '/donate'},
    {'title': 'Terms of Service', 'url': '/tos'},
    {'title': 'Privacy Policy', 'url': '/privacy'},
    {'title': 'Help', 'url': '/help'},
    {'title': 'Contact Us', 'url': '/contact'}
]

To open this file, first run the following command to locate the Tutor environment root:

tutor config printroot

This will output the path to your Tutor project. Navigate to that directory and open the file at:

env/apps/openedx/settings/lms/production.py

Here, you’ll find where Tutor sets the default footer nav links.

However, if we’re not using Indigo (e.g., using this footer component in another theme or in a standalone setup), we default to an empty array, since the default edx-platform configuration does not include any footer navlinks. You can confirm this in the Footer.jsx source code.


return (
<div className="wrapper wrapper-footer">
Expand Down Expand Up @@ -70,6 +71,15 @@
</li>
</ul>
</div>
<nav className="nav-colophon">
<ol>
{indigoFooterNavLinks.map((link) => (
<li key={link.url}>

Check warning on line 77 in src/components/Footer.jsx

View check run for this annotation

Codecov / codecov/patch

src/components/Footer.jsx#L77 

Added line #L77 was not covered by tests
<a href={`${config.LMS_BASE_URL}${link.url}`}>{link.title}</a>
</li>
))}
</ol>
</nav>
</div>
<span className="copyright-site">{intl.formatMessage(messages['footer.copyright.text'])}</span>
{showLanguageSelector && (
Expand Down
15 changes: 15 additions & 0 deletions src/components/__snapshots__/Footer.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
</li>
</ul>
</div>
<nav
className="nav-colophon"
>
<ol />
</nav>
</div>
<span
className="copyright-site"
Expand Down Expand Up @@ -145,6 +150,11 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
</li>
</ul>
</div>
<nav
className="nav-colophon"
>
<ol />
</nav>
</div>
<span
className="copyright-site"
Expand Down Expand Up @@ -203,6 +213,11 @@ exports[`<Footer /> renders correctly renders without a language selector in es
</li>
</ul>
</div>
<nav
className="nav-colophon"
>
<ol />
</nav>
</div>
<span
className="copyright-site"
Expand Down