Hide system/silo picker and 404 on system pages if `/system/policy` 403s by david-crespo · Pull Request #1232 · oxidecomputer/console

david-crespo · 2022-10-14T21:47:57Z

Whether the user is shown /system/* routes is governed by whether they have viewer perms (or better) on the fleet. The natural place to look for that is the fleet policy, but if the user doesn't have fleet read, they will get a 403 from that endpoint. So we simply check whether that endpoint 200s or not to determine whether the user is a fleet viewer.

The real trick here is doing the check for this in the loader, which means

It happens in parallel with requests that are already happening, so it doesn't slow anything down
The request is complete before we render anything, which means we don't have UI popping in, and in the case of the 404, we can go straight to 404 without flashing anything else

Silo/system picker is only shown if user has fleet viewer perms
System routes 404 if user only has fleet viewer perms
Finally figured out how to handle the top bar pickers in the layouts
Tests

Writing tests for both sides of this is hard because we don't have a way of logging as a less-privileged user in the mock server yet.

vercel · 2022-10-14T21:48:00Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
console-ui-storybook	✅ Ready (Inspect)	Visit Preview	Oct 16, 2022 at 4:28AM (UTC)

david-crespo · 2022-10-14T21:50:45Z

+  // TODO: make sure 404 is the desired behavior. This situation should be
+  // pretty unlikely.
+  if (!isFleetViewer) throw trigger404
+}


doing this here is awesome because it means we don't have to do any janky "is this a system route?" detection. This layout wraps all the system routes in the route config. If we ever want to change the scope of this check to include some other routes, all we have to do is add another <Route> that wraps this one and the other one and move this loader to there.

david-crespo · 2022-10-14T21:51:51Z

-  const { data: user, error } = useApiQuery(
-    'sessionMe',
-    {},
-    { cacheTime: 0, refetchOnWindowFocus: false }


Moved refetchOnWindowFocus: false to the global config. I am less nervous about making a move on #1178 now that the big demo is done.

Which is a reminder @benjaminleonard that we should think more holistically about this from a design perspective. Having things pop out from under you is a bad experience but having to refresh over and over to see changes is also not great. I think the key here is giving explicit control in a way that's intuitive.

I think it'll be a big enough part of the experience that we need to communicate how to tweak this to users during on boarding.

Sign in to view

+  const isFleetViewer = !!systemPolicy

-  const loggedIn = user && !error
+  const isSystem = pb.isSystemPath(useLocation().pathname)


…ing at strings

just-be-dev · 2022-10-15T22:56:13Z

+  // toArray filters out nulls, which is essential because the silo/system
+  // picker is going to come in null when the user isn't supposed to see it
+  const [cornerPicker, ...otherPickers] = React.Children.toArray(children)


Love to see this cleaned up!

just-be-dev · 2022-10-15T22:59:24Z

    <PageContainer>
-      <TopBar />
+      <TopBar>
+        {useSiloSystemPicker('silo')}


A nit but it seems strange to me to see a hook inlined in the JSX.

Yeah, I had it pulled out initially but I moved it inline because I could. I do like that it feels like calling a component, which is what I wish it was.

just-be-dev · 2022-10-15T23:00:31Z

+ * error. We're being a little cavalier here with the error. If it's something
+ * other than a 403, that would be strange and we would want to know.


Perhaps add a TODO?

Problem is I have no idea how we’d track it, but we could totally have an API endpoint for analytics.

just-be-dev · 2022-10-15T23:08:54Z

+    // Need to prefetch this because every layout hits it when deciding whether
+    // to show the silo/system picker. It's also fetched by the SystemLayout
+    // loader to figure out whether to 404, but RQ dedupes the request.
+    apiQueryClient.prefetchQuery('systemPolicyView', {}),


Thanks for the comments. The query being spread across multiple loaders and a hook doesn't feel great to me, but I get why it's needed and the benefit of this approach. Prefetched here, fetched in the system loader (which could be from cache), and queried via useSystemSiloPicker which should also be from cache. From my understanding if we had it on /session/me all that would do is remove it from the SystemLayout loader. I still suspect that may be the better way to approach it long term, but this seems good enough for where we're at.

Right, it feels like a lot but also necessary. I’m thinking about how to test that these things are hooked up correctly, but it’s pretty tough to be thorough. Like we can obviously assert that the silo/system picker is there or not depending on the current user (at least, we can when we add some form of authz to the mock server) but testing whether there’s pop-in is pretty hard because the timings are tight. Working on it.

just-be-dev · 2022-10-15T23:09:20Z

        icon: <Success16Icon />,
      })
-      navigate(searchParams.get('state') || '/')
+      navigate(searchParams.get('state') || pb.orgs())


Good catch. Need a lint rule for this.

david-crespo · 2022-10-16T03:34:39Z

+//   }
+//   // if any of them showed up, we want to see that all of them did
+//   expect(handles.every((h) => h != null)).toBe(true)
+// }


left in the first version to show how appalling it is

david-crespo · 2022-10-16T03:35:02Z

+export async function expectSimultaneous(page: Page, sel1: string, sel2: string) {
+  const [t1, t2] = await Promise.all([timeToAppear(page, sel1), timeToAppear(page, sel2)])
+  expect(Math.abs(t1 - t2)).toBeLessThan(20)
+}


this is my greatest creation

david-crespo · 2022-10-16T04:39:54Z

+    'role=button[name="Switch between system and silo"]',
+    'role=button[name="Switch organization"]',
+  ])
+})


It works surprisingly well. First 3 times are with the prefetch commented out, second 3 are with it in (the expect is commented out so it wouldn't print 100 lines of failure stuff).

david-crespo added 2 commits October 14, 2022 15:51

show/hide silo picker in top bar based on fleet policy

d856e30

404 if user tries to hit system routes without fleet viewer perm

c3d5694

fix SystemLayout name

f0cdf82

vercel Bot deployed to Preview October 14, 2022 21:49 View deployment

david-crespo commented Oct 14, 2022

View reviewed changes

Comment thread app/components/TopBar.tsx Outdated

const isFleetViewer = !!systemPolicy

const loggedIn = user && !error

const isSystem = pb.isSystemPath(useLocation().pathname)

This comment was marked as resolved.

Sign in to view

vercel Bot deployed to Preview October 15, 2022 00:10 View deployment

david-crespo force-pushed the check-fleet-policy branch from 8f8c327 to 8f85fde Compare October 15, 2022 00:10

today is the day to be less stupid. don't detect system route by look…

d48b356

…ing at strings

david-crespo force-pushed the check-fleet-policy branch from 8f85fde to d48b356 Compare October 15, 2022 00:11

vercel Bot deployed to Preview October 15, 2022 00:11 View deployment

david-crespo marked this pull request as ready for review October 15, 2022 00:12

FINALLY figured out how to handle the top bar pickers in the layouts

02eac6f

vercel Bot deployed to Preview October 15, 2022 02:50 View deployment

comments and naming tweaks

1fae0a0

vercel Bot deployed to Preview October 15, 2022 03:09 View deployment

just-be-dev reviewed Oct 15, 2022

View reviewed changes

vercel Bot deployed to Preview October 16, 2022 03:34 View deployment

david-crespo commented Oct 16, 2022

View reviewed changes

let's be extra. test whether silo/system picker pops in

35e35a9

david-crespo force-pushed the check-fleet-policy branch from e6345e0 to 35e35a9 Compare October 16, 2022 03:37

vercel Bot deployed to Preview October 16, 2022 03:38 View deployment

delete the bad one

ec5bfc8

vercel Bot deployed to Preview October 16, 2022 04:28 View deployment

david-crespo commented Oct 16, 2022

View reviewed changes

david-crespo merged commit 142033b into main Oct 16, 2022

david-crespo deleted the check-fleet-policy branch October 16, 2022 04:42

This was referenced Oct 18, 2022

Sort IAM role assignments with groups first, then by name #1237

Merged

Notes on using React Router loaders and React Query together #1245

Closed

david-crespo mentioned this pull request Nov 12, 2025

Instance creation page doesn't allow attaching floating IPs if none existed when opened #2970

Open

		* error. We're being a little cavalier here with the error. If it's something
		* other than a 403, that would be strange and we would want to know.

Conversation

david-crespo commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Oct 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

david-crespo Oct 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

david-crespo commented Oct 14, 2022 •

edited

Loading

vercel Bot commented Oct 14, 2022 •

edited

Loading

david-crespo Oct 16, 2022 •

edited

Loading