Tenant custom navigation minds#4739 (!2595) · Merge requests · Minds / Minds Frontend

Olivia Madrid requested to merge feat/custom-nav-m4739 into master Apr 04, 2024

⚠️ Note to reviewers: I pulled in master to access @benhayward.ben's e2e fix and then reran prettier over all the code due to @markharding's changes to .prettierrc but it looks like subsequent merges that did not include the prettier changes are cluttering up the diffs. To isolate my changes, compare master with version 7 on the Changes tab

Ticket(s) / Related Merge Requests

minds#4739 (closed)

Summary of Changes

Introduces customizable navigation for tenant sites. The changes do not affect minds.com. The sidebar nav link for the new chat function is not included on tenant sites yet.

Custom sidebar navigation - presentation

The navigation items for minds.com and tenant sites are fairly isolated from one another with regard to the html (with the exception of the id: channel item, so we can re-use the dynamic logic for rendering the logged in user's avatar and username)
The tenant site nav list comes from configs.custom.navigation, in display order
Once we get the list, we have to make some adjustments to handle particularly finicky links based on user state & site configs:
- id: channel item display name and route are dynamically added
- Only logged in users should see the following core links: id: newsfeed, id: channel
- Only users who are admins and users with canModerateContent permission can see the admin link
- When a user logs in/out, the visibility of the id: newsfeed, id: channel and id: admin items is updated accordingly
- The id: explore item points to different routes for logged out users (/) vs. logged in users (/explore)
- The id: memberships item only shows on sites that have at least one membership configured. It will appear automatically after the first new membership is added to a site that previously didn't have any.
- Certain links require this binding - [routerLinkActiveOptions]="{exact: true}" - to be added to their link element in the html in order to be highlighted when the user is at the page associated with that link. They are: id: memberships, id: groups, and (only if logged out) id: explore

Custom sidebar navigation - admin console

A new "Navigation" tab is added to the network admin console. Only admins are allowed to go to it.
It contains a single subtab, "Navigation menu". At any given time, this subtab will either display a list of links (default, /network/admin/navigation/menu/list) or the form to edit/create (/network/admin/navigation/menu/edit) a single link.

List of navigation items

We have two types of links: CORE (which we provide by default and cannot be deleted from the list) and CUSTOM (which are created by the tenant admin)
From the list view, a user may edit an existing link OR create a new link. Both of these intentions bring them to the link form
Each item (except for the id: channel item) has an edit button. The id: channel link cannot be edited (b/c both of the editable properties of core links - icon and name - will be overridden with information about the currently logged in user, so we don't want admins to think they can make changes)
Each CUSTOM item has a delete button. We present a confirmation modal before letting a user delete an item
Users can use the visibility toggle to determine whether a link will appear on the sidebar. Changes are automatically pushed to the server
Users can drag and drop to reorder list items. Changes are automatically pushed to the server

Link form

The link form displays with slightly different copy and form fields depending on whether we're creating a new CUSTOM link, editing a CORE link, or editing a CUSTOM link
A back button at the top of the form takes the user back to the list view
When a user tries to navigate away from an unsaved form that has been altered in any way, we will ask for confirmation first
CORE links have an editable icon and name. They also display relative paths that cannot be edited
CUSTOM links have editable icon, name AND absolute urls that can be edited
Users click on either the "Select icon" button or the existing icon (if applicable) to open the icon selector modal
Users may reach the edit form of an existing link either by clicking on its edit button in the list view OR by directly navigating to the /network/admin/navigation/menu/edit?id={MY_ITEM_ID} url
If a user goes to /network/admin/navigation/menu/edit (i.e. without an id query param), we display the form for creating a new link
The save button will not enable unless all fields are filled out and url inputs are valid urls (if editing a custom link)
After saving, the user is automatically navigated back to the list view

Icon selector modal

Displays a scrollable list of a subset of material icons. A user may select up to one icon at a time
As the user types in the search bar, the list is filtered to display only items whose names or ids contain the query string
The "Confirm" button only enables when an icon is selected

Other changes

Network admin auth guard was adjusted to circumvent having to set its path dynamically inside the sidebar component (previously we pointed to different routes for admins vs. those with only canModerateContent permissions). Now, users with canModerateContent permissions can go to any /network/admin route, even those that they are not allowed to visit, without immediately being kicked back to the newsfeed. Instead, the auth guard will just automatically navigate them to the one page they are allowed to visit, /network/admin/moderation/reports.
The "hashtag" and "footer" pages in user settings > pro have been removed as instructed by @markeharding, as changes made to the the m-draggableList component will break them and they were scheduled for removal anyway.

Testing Considerations

Tenant sandbox site

Areas to focus on

Sidebar navigation on tenants
Sidebar navigation on minds
Tenant admin console > navigation tab

Changes from original designs:

Edit functionality removed from the id: channel navigation item because its name/icon are being set dynamically based on the username & avatar
Slightly tweaked copy so anything referring to custom markdown pages has been removed (b/c we're pushing that to a later phase)
Removed description from the "Customize Icon" form field (i.e. "Uses names from the material icon library at https://fonts.google.com/icons (eg: play_arrow)") because it is not accurate.
I used the actual material-icon for hashtags (id: 'tag') instead of the hardcoded text '#' we are currently using on minds.com
Removed edit capability for id: channel item
Removed more item from list. It will just always appear at the bottom of the sidebar
Changed edit/delete button text to icons to save space
Memberships nav item was not included in designs but I've added it to the list of default core items. It displays only if the tenant site has memberships configured.
As per discussion with @markeharding: the "Save Changes" button has been removed; all changes made on the list view are saved immediately; added copy in the subtab description explaining the user needs to refresh to see changes
Added delete confirmation modal
Added confirmation dialog when navigating away from dirty link form