Main Menu #41

sanjeevz3009 · 2024-11-26T12:12:23Z

What is the context of this PR?

Add a navigation app in Wagtail to manage the main menu, allowing for structured, customisable navigation.

How to review

Spin up the ONS BETA Web App Locally as normal.
Snippets -> Main Menu -> Add main menu.
Fill in the menu content -> After saving every time you should see the preview on the preview panel.
Go to Settings -> Navigation Settings -> Choose main menu -> Choose the menu shown so it can be displayed on the website.

Loom walkthrough of the main menu: ATTACH LINK HERE

Follow-up Actions

List any follow-up actions (if applicable), like needed documentation updates or additional testing.

…arately

zerolab

I know this is a draft. Thought I'd leave a few notes to boot

zerolab · 2024-11-26T13:36:21Z

cms/navigation/models.py

+
+
+# Custom LinkBlock to support both pages and URLs
+class LinkBlock(StructBlock):


suggestion: extract https://github.com/ONSdigital/dis-wagtail/blob/main/cms/core/blocks/related.py#L22-L89 to core/blocks/base.py and re-use

zerolab · 2024-11-26T14:43:50Z

cms/navigation/models.py

+
+# Section StructBlock for columns
+class SectionBlock(StructBlock):
+    section_link = LinkBlock(help_text="Main link for this section (Theme pages or external URLs).")


this may need a separate block definition as the requirement says the PageChooserBlock should be limited to Theme page (Wagtail docs)

zerolab · 2024-11-26T14:48:49Z

cms/navigation/models.py

+    class Meta:
+        verbose_name = "Main Menu"
+        verbose_name_plural = "Main Menus"


These should not be needed. See https://docs.djangoproject.com/en/5.1/ref/models/options/#verbose-name

Howeve, if you want to make it translateable, then please follow https://docs.djangoproject.com/en/5.1/topics/i18n/translation/#model-verbose-names-values

Removed and gettext_lazy added.

…ed, section restricted to 3, URL label added, icon for navigation settings added and restricting it to so only 1 main menu can be created

helenb

Thanks @sanjeevz3009 I have tested locally and it all functions well. A couple of small comments on the validation and example help text.

cms/navigation/models.py

sanjeevz3009 · 2024-12-02T11:49:05Z

Thanks @sanjeevz3009 I have tested locally and it all functions well. A couple of small comments on the validation and example help text.

@helenb Will push my latest code up as I haven't done that. It should be way better =) Might resolve some of the issues raised by you. Thanks Helen, will sort out any issues not addressed already locally and then push it up.

…ate one main menu instance in the wagtail admin. Migration file added.

…ks.base to be reusable across the project. LinkBlock from core.blocks.base is being used instead of the abstract class originally defined in models.py.

…enuViewSet added to restrict creating more than one main menu instance

helenb · 2024-12-09T15:27:45Z

I don't think the menu is using the styling quite as expected - compare my test with the menu settings (first screenshot) with what is in the prototype (second screenshot). I'm happy to pick that up as a follow-up task.

sanjeevz3009 · 2024-12-09T18:31:26Z

@helenb

Thanks for testing this. I fixed the link issues.

As previously for highlights when a user selects a Wagtail page it didn't turn it into a link. Now it does. Same for the topic page.

Also fixed some other edge cases I missed out on previously, so now all should be good on that side.

Let me know if there are any further issues.

Now adding main menu content and it being usable on the website menu should be all good.

So now we are just left with front-end alignment issues.

Where if you have only 2 columns the alignment looks weird and goes out of place slightly compared to 3 columns.
If you have 3 sections and the 1st one has 5 topics and then the rest of the sections have 3 topics then the the section alignment for that column goes off as well.
So there are similar issues like the above.

Would be amazing if you could follow that up on a task. Happy to demo the front-end styling/ alignment issues to you.

Thanks =)

zerolab

A few more notes

cms/navigation/models.py

zerolab · 2024-12-09T11:11:40Z

cms/jinja2/templates/base.html

+
+{% set keyLinksList = [] %}
+
+{% if navigation_settings.main_menu and navigation_settings.main_menu.highlights %}


these would be better off as properties on NavigationSettings, then

% set navigation_settings = settings.navigation.NavigationSettings %} {% set pageConfig = { ... "keyLinksList": navigation_settings.main_menu_highlights, "itemsList": navigation_settings.main_menu_items } %}

reads so much better in the template

zerolab · 2024-12-09T15:26:57Z

cms/navigation/wagtail_hooks.py

+    def user_has_permission(self, user: Optional["User"] = None, action: str | None = None) -> bool:
+        if action == "add" and MainMenu.objects.exists():
+            return False
+        return user is not None and user.has_perm(self._get_permission_name(action))


Suggested change

return user is not None and user.has_perm(self._get_permission_name(action))

return super().user_has_permission(user)

cms/navigation/models.py

zerolab · 2024-12-10T09:21:18Z

cms/navigation/models.py

+    page = PageChooserBlock(required=False, page_type="themes.ThemePage")
+
+    class Meta:
+        label = "Theme Link"


as discussed, for consistency, we need to mark for translation any strings that will be displayed to the user

helenb · 2024-12-16T09:07:55Z

@helenb

Thanks for testing this. I fixed the link issues.

As previously for highlights when a user selects a Wagtail page it didn't turn it into a link. Now it does. Same for the topic page.

Also fixed some other edge cases I missed out on previously, so now all should be good on that side.

Let me know if there are any further issues.

Now adding main menu content and it being usable on the website menu should be all good.

So now we are just left with front-end alignment issues.

Where if you have only 2 columns the alignment looks weird and goes out of place slightly compared to 3 columns.

If you have 3 sections and the 1st one has 5 topics and then the rest of the sections have 3 topics then the the section alignment for that column goes off as well.

So there are similar issues like the above.

Would be amazing if you could follow that up on a task. Happy to demo the front-end styling/ alignment issues to you.

Thanks =)

Thanks @sanjeevz3009 - once you've merged this PR, you could re-assign the ticket to me to do the front-end tweaks.

sanjeevz3009 added 6 commits November 23, 2024 16:33

Front-end hacked together to complete the back-end

099f814

Navigation app added, models created for navigation settings

8df17b5

Navigation bar on the front-end test

ffcd5b4

Front-end code reverted due to the front-end main menu being done sep…

8d5188c

…arately

Merge branch 'main' into main-menu-CMS-169

d955f36

New line

42341b6

sanjeevz3009 changed the title ~~Main Menu~~ Main Menu - Back-end Nov 26, 2024

Code formatted

f89c20d

zerolab reviewed Nov 26, 2024

View reviewed changes

sanjeevz3009 added 3 commits December 1, 2024 16:50

Type hinted and code formatted

3cfef6d

Code refactored, abstract link class created, validation messages add…

7cee546

…ed, section restricted to 3, URL label added, icon for navigation settings added and restricting it to so only 1 main menu can be created

Migration file

ea8359e

helenb reviewed Dec 2, 2024

View reviewed changes

cms/navigation/models.py Outdated Show resolved Hide resolved

cms/navigation/models.py Outdated Show resolved Hide resolved

cms/navigation/models.py Outdated Show resolved Hide resolved

sanjeevz3009 added 5 commits December 2, 2024 16:22

Main menu modelling complete, restricting user to be able to only cre…

d3c3157

…ate one main menu instance in the wagtail admin. Migration file added.

LinkBlock extracted out of core.blocks.related and moved to core.bloc…

bf1542f

…ks.base to be reusable across the project. LinkBlock from core.blocks.base is being used instead of the abstract class originally defined in models.py.

Code formatted, zombie code removed, unused imports removed and MainM…

f5c0144

…enuViewSet added to restrict creating more than one main menu instance

Merge branch 'main' into main-menu-CMS-169

cd99772

Front-end integrated

31ea34e

sanjeevz3009 changed the title ~~Main Menu - Back-end~~ Main Menu Dec 9, 2024

Type hints added

6b79ace

zerolab mentioned this pull request Dec 9, 2024

Django Migration Linter Integration #43

Open

Nav template issues fixed

56d0fd7

sanjeevz3009 added 5 commits December 9, 2024 18:40

gettext_lazy added

45838ea

Preview added

f3c43ce

Use the title provided by the user over the default title from the page

30a9a39

help text update

f38f975

Type hints added

f12078a

sanjeevz3009 added 2 commits December 9, 2024 22:46

Migration file regenerated

3aa2f70

Tests added

4a941f1

zerolab reviewed Dec 10, 2024

View reviewed changes

sanjeevz3009 and others added 4 commits December 10, 2024 09:27

TODO removed and translatable added

5652121

Description help text updated

3a25142

Tests setup

40c28c1

Example StreamField value setting in test_highlights_streamfield_limit

5345a9b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Main Menu #41

Main Menu #41

sanjeevz3009 commented Nov 26, 2024 •

edited

Loading

zerolab left a comment

zerolab Nov 26, 2024

sanjeevz3009 Dec 9, 2024

zerolab Nov 26, 2024

sanjeevz3009 Dec 9, 2024

zerolab Nov 26, 2024

sanjeevz3009 Dec 9, 2024

helenb left a comment

sanjeevz3009 commented Dec 2, 2024

helenb commented Dec 9, 2024

sanjeevz3009 commented Dec 9, 2024 •

edited

Loading

zerolab left a comment

zerolab Dec 9, 2024

zerolab Dec 9, 2024

zerolab Dec 10, 2024

sanjeevz3009 Dec 10, 2024

helenb commented Dec 16, 2024



		# Custom LinkBlock to support both pages and URLs
		class LinkBlock(StructBlock):


		{% set keyLinksList = [] %}

		{% if navigation_settings.main_menu and navigation_settings.main_menu.highlights %}

	return user is not None and user.has_perm(self._get_permission_name(action))
	return super().user_has_permission(user)

Main Menu #41

Are you sure you want to change the base?

Main Menu #41

Conversation

sanjeevz3009 commented Nov 26, 2024 • edited Loading

What is the context of this PR?

How to review

Follow-up Actions

zerolab left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

helenb left a comment

Choose a reason for hiding this comment

sanjeevz3009 commented Dec 2, 2024

helenb commented Dec 9, 2024

sanjeevz3009 commented Dec 9, 2024 • edited Loading

zerolab left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

helenb commented Dec 16, 2024

sanjeevz3009 commented Nov 26, 2024 •

edited

Loading

sanjeevz3009 commented Dec 9, 2024 •

edited

Loading