Implements all orgs page

[echappen]

Changes proposed in this pull request:

• Implements UI design for "all orgs" page
• Adds a cookie to save last visited org id; sets link to that org on "all orgs" page

Notes

• @beepdotgov I assumed we'd want commas for large memory usage numbers, but it does make them a bit wider.

Pending

• Tests for LastViewedOrgLink are failing because cookies can't be mocked there for some reason?? Weird.

Questions

• Should we set an expiration for the lastViewedOrgId cookie?

Related issues

Closes #539

How to test

1. Log into CF via the command line, then run npm run dev-cf
2. Visit /orgs

Screenshots

Desktop:

Mobile:

Submitter checklist

• Added logging is not capturing sensitive data and is set to an appropriate level (DEBUG vs INFO etc)
• Updated relevant documentation (README, ADRs, explainers, diagrams)

Security considerations

Pulls various data from CAPI to show page

[echappen]

@beepdotgov @cannandev I still need to collect the real org roles, but there's enough here for a first round of review.

[beepdotgov]

Eleni, this looks stellar. I left a few non-blocking notes, and made a couple design requests. But seriously, this looks really, really great.

[echappen]

@beepdotgov @hursey013 Real org roles are now in! To see them locally, you'll need to add a CF_USER_ID environment variable to .env.local and set it to a real user guid. You can get your own user ID by logging into CF through the command line, then running cf curl /v3/users and looking at the guid for your username. (When deployed, the user ID will come from UAA/authentication.)

[echappen]

@beepdotgov @hursey013 For the "at a glance" section: currently, we have a page for users (/orgs/:id) and a functional page for applications (/orgs/:id/apps). We don't have a page for spaces yet—the closest page we have for that is the users one. For now, should I:

1. link to /orgs/:id for spaces,
2. link to a placeholder page for spaces, or
3. remove the link entirely?

[beepdotgov]

We don't have a page for spaces yet—the closest page we have for that is the users one. For now, should I:

1. link to /orgs/:id for spaces,
2. link to a placeholder page for spaces, or
3. remove the link entirely?

I’d vote 3: remove the link for now. @hursey013?

[beepdotgov]

Real org roles are now in! To see them locally, you'll need to add a CF_USER_ID environment variable to .env.local and set it to a real user guid.

Exciting, thanks @echappen! I haven’t logged in via the command line yet, but I’ll sort that out tomorrow.

I am seeing a runtime error when I try to view /orgs locally; is that because I haven’t set the user id yet?

(Other pages load just fine.)

[echappen]

is that because I haven’t set the user id yet?

@beepdotgov I think so—try setting it and if the issue persists, lmk! (I can DM you my ID if that's easier)

[beepdotgov]

@echappen I’m in, thanks for the help!

[echappen]

@beepdotgov I put a last updated timestamp on the bottom of the page, welcome any design thoughts you may have:

[beepdotgov]

@echappen That looks fantastic! I’d suggest two changes, let me know what you think:

• I’d recommend we pull it up into the page intro, so the information’s more readily available. (See attached very quick mockup.)
• I’d also suggest adding a bit more detail to the timestamp? Maybe add in year and timezone to be super explicit?

What do you think, though?

[echappen]

@beepdotgov Sounds good, will do!

[echappen]

@beepdotgov Here's a screen of the infinity design in action (the dev data doesn't return an org with unlimited memory allocation). I'm having screen readers ignore the infinity symbol entirely since it's only decorative, given the text below.

[beepdotgov]

@echappen This looks AMAZING, fantastic work! 🎉♾️🎉

[beepdotgov]

This really looks remarkable, @echappen. Left two non-blocking comments, but those could absolutely be tackled in later issues.

Seriously, this is wonderful work. Thanks for lighting this up so beautifully.

[hursey013]

[question] Regex intimidates me - does this match a GUID?

[echappen]

It does! (Thanks, Stack Overflow). I need this GUID regex in a few places, so I tried to make it a variable, but I was having trouble inserting the variable into the larger regex pattern here. If you have any ideas there on how to make that more DRY, would love to hear them.

[beepdotgov]

Looks great, works great, let’s ship it! 🚀

(As discussed in Slack, the “last accessed” organization isn’t getting displayed correctly, but that’s not a blocker for merge. We’ll tackle that in a separate issue: #565 )