Improve side panels

[rgoj]

Now that we've improved the outliner experience and put in the building blocks necessary for better state management in the workspace, the next big improvement should probably be replacing the side panels. There are many aspects to this task, here are some:

• [X] Initial planning and design work
  • Completed Mon 13 Nov 2023
  • Done mostly in spare time - over many months - and catchups, this was never estimated, only the final couple of tasks were ever written out
  • [X] Collating design ideas so far
    • Collated on paper in my notes, can scan and post somewhere if need be!
  • [X] Doing a collaborative design session to explore all the different options we've got
    • By the time we got to discussing this, I was pretty clear on the direction I'd like to take here, so we ended up going through all the ideas so far and agreeing that might be the best best - see paper notes

The below plan is crossed out as it went out the window as I started working on this! No plan survives contact with the codebase, as they say, ahem.

• [ ] ~#847~
  • ~Time box: 2 days, Actual time taken so far: 0.9 day (Thu 16 Nov - Mon 20 Nov inclusive)~
  • ~Let's start the wider work on the side panels with a 2 day time box - to clean up the outliner code, clean up the side panel code, see what is and isn't possible~
• ~[ ] Planning and estimation for the entire epic~
  • ~Estimate: 1-2 days, Actual time taken so far: 0.5 (Mon 20 Nov)~
  • ~Let's spend 1-2 days on planning the next steps - how do we approach this work?~
  • ~Let's try to plan it in such a way as to avoid disappearing into a very long coding time box before shipping something visible to the users, perhaps it might be possible to ship smaller improvements gradually as we go along?~
• ~[ ] Create a very basic read-only preview of the new side panels at /preview~
  • ~Estimate: 6-8 days~
• ~[ ] Taking stock and planning and estimation for next steps to use the new preview code in the workspace and make it fully functional~
  • ~Estimate: 2-3 days~

[rgoj]

Here's what the initial plan looked like after catchup on Monday 20 November - archiving before making edits:

• [ ] #847
• [ ] ...the above task ☝🏻 includes planning the next tasks, below are just some initial thoughts
• [ ] Collating design ideas so far
• [ ] Doing a collaborative design session to explore all the different options we've got

[rgoj]

Rough estimates to get to a shippable to production workspace: 32 days - a rough estimate during catchup and doesn't include changing the navigation panel thoroughly.

[rgoj]

The bulk of the work is done for this, but there's still the usual hundreds of tasks I think it'd be best to do before shipping fully... so here's a list for prioritisation.

Remaining (?) decisions

• [X] Should we ship to production at /preview/ first for a while? How do we approach not suddenly forcing a massive change on everyone?
  • What we discussed so far was, roughly: first ship to /preview/, let some people know, gather feedback, see what to do next. With a view to perhaps then ship to /map/ for everyone while also sending out a message / video explaining the change.
  • Let's ship to production, straight to /map/: https://maptio.slack.com/archives/C01QCQJMS23/p1715165476759519
• [X] Should we update the text of the onboarding messages?
• [X] Should we ship the panels before we remove the header?
  • Yeah, probably yes, let's do that. It's suboptimal, but it works, especially after some small layout amendments have been implemented. The full reworking of the header will take a while as it's design-heavy.

Remaining work

Blockers for shipping to staging

• [X] None remaining 🎉
• [X] And it's live on staging at /preview/: http://localhost:4200/preview/60fac83fafcc83001657adcd/map-for-icon/circles

Blockers for shipping to /map/ in production

• [X] Review all of my notes on this story to make sure I haven't missed anything crucial that also needs to go here.
• [x] Move all of the functionality from the preview component to the workspace component.
• [x] Fixing up translations after Angular upgrade (I need to at least check that the app isn't broken because of some translated string changes due to technical details of the upgrade)
• [x] When you click edit tags from the right-side panel it needs to open the left panel if it's currently closed otherwise it looks like nothing happened.
• [x] Change the text in the tabs pane: https://github.com/Maptio/maptio/issues/848#issuecomment-2100649928
• [x] Confirmation popovers as well as "insufficient permission" popovers in the circle details side panel are configured to show up in such a way that they now stick outside of the browser window, we need to move them
• [x] The side panels need to be hidden in the network view and the directory view
• [x] When the initiative details panel is closed and a new initiative is clicked, highlight the button, maybe use the material ripple? (time box to an hour, if it's fiddlier than that, drop it)
• [x] When you first open a new map / open a map you've never visited / when a new user enters the Maptio workspace after signing up / ..., i.e. when there is no pre-selected circle, the details panel is open, but isn't showing any circle, only empty fields, which might be confusing! It'd be nice to address this somehow, here are a few options:
  • [x] (DO THIS) Show information about the root circle - i.e. when no circle is selected, we show information about the root circle because that's what is seen by the user anyway. This - accidentally, it seems, because of slightly broken state management, though the effect is good - is what currently happens in production, i.e. when you "click out" of any circles, the root circle's details are still shown. (My preferred option.)
  • [-] Hide the circle details and show just a message like "click on a circle to show detailed information here"
  • [-] Leave as is (for now), as new users will see the onboarding message there anyway, we might want to update the text of the onboarding message.
  • [-] We could start with the details panel closed and open it only when something is selected... but that leads to discoverability issues and the problem still remains for the times when you select something and then go back to a "deselected" state or when you click the details panel toggle before selecting anything, i.e. this isn't a real solution.
• [x] Centre the toolbar (time box to 1h)
• [x] Centre the main panel onboarding message horizontally and make sure the onboarding banner is there!
• [x] Testing, testing, testing (State management changes, Angular update being my main concerns here. Without a super-thorough automated testbed I won't be comfortable just shipping these kinds of changes.)

Fast follow-on

• [x] Hide toggles (and side panels!) on mobile
• [x] Display mobile notice on mobile again (it's been hidden to keep it out of the way while I worked)
• [x] Reduce the spacing in the outliner by maybe a half (time box to 1h)

Candidates

All the potential work I feel might be good to treat as blockers before shipping, in order of priority: :)

Leave it in the backlog

• [ ] Allow the panels to be resized
• [ ] Redesign the toolbar in a new style to match the new buttons

[tomnixon]

One small but essential item: When you click edit tags from the right-side panel it needs to open the left panel if it's currently closed otherwise it looks like nothing happened.

And a 'could do' - allow the panels to be resized.

[tomnixon]

Now that we've improved the layout, the tags tab is really standing out to me as confusing. Until we get to the next iteration of the design with circles, tags, roles, people all nicely laid out, let's change the text on the tags tab in the left panel to something shorter and more descriptive: "Customise a set of tags here then add them to your circles to map themes, status and more." Then a link to the tags help video: https://learning.maptio.com/using-tags The link could say "Learn more", or be an (i) icon or whatever you think works best Romek.

[rgoj]

Thanks, Tom, the text changes make perfect sense! Yeah, I agree the tags tab feels even more confusing now! I've added the tasks you mentioned to the list above.