feat(ui): Switch to new authorization model

Use the previously introduced endpoint to get information about the
user's superuser status and permissions. The superuser status is made
available globally via the `useUser` hook while hierarchy related
permissions are made available via the router context.

As before, if the user has the superuser status, checking the specific
permissions is skipped. Also, the results of all queries are cached for
60s to reduce the amount of backend calls. This means that it can take
up to 60s for some permission changes to be reflected by the UI.

Signed-off-by: Martin Nonnenmacher <[email protected]>

Author: mnonnenmacher

ui/src/app.tsx

@@ -28,6 +28,11 @@ import { Button } from '@/components/ui/button.tsx';
 import { Textarea } from '@/components/ui/textarea.tsx';
 import { config } from '@/config';
 import { authRef, useUser } from '@/hooks/use-user.ts';
+import {
+  OrganizationPermissions,
+  ProductPermissions,
+  RepositoryPermissions,
+} from '@/lib/permissions.ts';
 import { queryClient } from '@/lib/query-client.ts';
 import { routeTree } from '@/routeTree.gen';
 
@@ -45,6 +50,11 @@ export interface RouterContext {
     repo: string | undefined;
     run: string | undefined;
   };
+  permissions: {
+    organization: OrganizationPermissions | undefined;
+    product: ProductPermissions | undefined;
+    repository: RepositoryPermissions | undefined;
+  };
   auth: ReturnType<typeof useUser>;
 }
 
@@ -60,6 +70,11 @@ const router = createRouter({
       repo: undefined,
       run: undefined,
     },
+    permissions: {
+      organization: undefined,
+      product: undefined,
+      repository: undefined,
+    },
     auth: undefined!,
   },
   defaultPreload: 'intent',

ui/src/components/header.tsx

@@ -388,7 +388,7 @@ export const Header = () => {
                 <span>{user.username}</span>
               </div>
             </DropdownMenuItem>
-            {user.hasRole(['superuser']) && (
+            {user.isSuperuser && (
               <>
                 <DropdownMenuSeparator />
                 <Link to='/admin'>

ui/src/config.ts

@@ -48,7 +48,7 @@ const oidcConfig = {
   redirect_uri: UI_URL,
   client_id: CLIENT_ID,
   automaticSilentRenew: true,
-  loadUserInfo: true,
+  loadUserInfo: false,
   onSigninCallback: () => {
     // This removes the Keycloak related query parameters from the URL after a successful login.
     const url = new URL(window.location.href);

ui/src/hooks/use-infrastructure-services.ts

@@ -26,6 +26,11 @@ import {
   getRepositoryInfrastructureServicesOptions,
 } from '@/api/@tanstack/react-query.gen';
 import { ALL_ITEMS } from '@/lib/constants';
+import {
+  OrganizationPermissions,
+  ProductPermissions,
+  RepositoryPermissions,
+} from '@/lib/permissions.ts';
 
 export type InfrastructureServiceWithHierarchy = InfrastructureService & {
   hierarchy: 'organization' | 'product' | 'repository';
@@ -35,16 +40,18 @@ type UseInfrastructureServicesParams = {
   orgId?: string;
   productId?: string;
   repoId?: string;
-  user: {
-    hasRole: (roles: string[]) => boolean;
+  permissions: {
+    organization: OrganizationPermissions | undefined;
+    product: ProductPermissions | undefined;
+    repository: RepositoryPermissions | undefined;
   };
 };
 
 export const useInfrastructureServices = ({
   orgId,
   productId,
   repoId,
-  user,
+  permissions,
 }: UseInfrastructureServicesParams) => {
   // Only fetch infrastructure services the user has access to.
   const infrastructureServices = useQueries({
@@ -58,10 +65,7 @@ export const useInfrastructureServices = ({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_organization_${orgId}_read`,
-        ]),
+        enabled: permissions.organization?.includes('READ'),
       },
       {
         ...getProductInfrastructureServicesOptions({
@@ -72,10 +76,7 @@ export const useInfrastructureServices = ({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_product_${productId}_read`,
-        ]),
+        enabled: permissions.product?.includes('READ'),
       },
       {
         ...getRepositoryInfrastructureServicesOptions({
@@ -86,10 +87,7 @@ export const useInfrastructureServices = ({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_repository_${repoId}_read`,
-        ]),
+        enabled: permissions.repository?.includes('READ'),
       },
     ],
     combine: (results) => {

ui/src/hooks/use-secrets.ts

@@ -26,6 +26,11 @@ import {
   getRepositorySecretsOptions,
 } from '@/api/@tanstack/react-query.gen';
 import { ALL_ITEMS } from '@/lib/constants';
+import {
+  OrganizationPermissions,
+  ProductPermissions,
+  RepositoryPermissions,
+} from '@/lib/permissions.ts';
 
 export type SecretWithHierarchy = Secret & {
   hierarchy: 'organization' | 'product' | 'repository';
@@ -35,16 +40,18 @@ type UseSecretsParams = {
   orgId?: string;
   productId?: string;
   repositoryId?: string;
-  user: {
-    hasRole: (roles: string[]) => boolean;
+  permissions: {
+    organization: OrganizationPermissions | undefined;
+    product: ProductPermissions | undefined;
+    repository: RepositoryPermissions | undefined;
   };
 };
 
 export function useSecrets({
   orgId,
   productId,
   repositoryId,
-  user,
+  permissions,
 }: UseSecretsParams) {
   const secrets = useQueries({
     queries: [
@@ -57,10 +64,7 @@ export function useSecrets({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_organization_${orgId}_read`,
-        ]),
+        enabled: permissions.organization?.includes('READ'),
       },
       {
         ...getProductSecretsOptions({
@@ -71,10 +75,7 @@ export function useSecrets({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_product_${productId}_read`,
-        ]),
+        enabled: permissions.product?.includes('READ'),
       },
       {
         ...getRepositorySecretsOptions({
@@ -85,10 +86,7 @@ export function useSecrets({
             limit: ALL_ITEMS,
           },
         }),
-        enabled: user.hasRole([
-          'superuser',
-          `permission_repository_${repositoryId}_read`,
-        ]),
+        enabled: permissions.repository?.includes('READ'),
       },
     ],
     combine: (results) => {

ui/src/hooks/use-user.ts

@@ -17,9 +17,11 @@
  * License-Filename: LICENSE
  */
 
+import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { AuthContextProps, useAuth } from 'react-oidc-context';
 
+import { getSuperuserOptions } from '@/api/@tanstack/react-query.gen.ts';
 import { config } from '@/config';
 
 export const authRef: { current: AuthContextProps | null } = {
@@ -62,6 +64,12 @@ export const useUser = () => {
   // Return end-user's full name, including all name parts.
   const fullName = auth?.user?.profile?.name;
 
+  // TODO: Handle errors for the superuser query.
+  const { data: isSuperuser } = useQuery({
+    ...getSuperuserOptions(),
+    staleTime: 60000,
+  });
+
   useEffect(() => {
     // Store the auth context in a ref for use outside of components.
     authRef.current = auth;
@@ -72,6 +80,7 @@ export const useUser = () => {
     username,
     fullName,
     refreshUser,
+    isSuperuser,
     ...auth,
   };
 };

ui/src/lib/permissions.ts

@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2025 The ORT Server Authors (See <https://github.com/eclipse-apoapsis/ort-server/blob/main/NOTICE>)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * License-Filename: LICENSE
+ */
+
+import { QueryClient } from '@tanstack/react-query';
+
+import {
+  getSuperuserOptions,
+  getUserInfoOptions,
+} from '@/api/@tanstack/react-query.gen.ts';
+
+class BasePermissions {
+  constructor(
+    public readonly isSuperuser: boolean,
+    public readonly permissions: string[]
+  ) {}
+
+  includes(requiredPermission: string): boolean {
+    return this.isSuperuser || this.permissions.includes(requiredPermission);
+  }
+}
+
+export class OrganizationPermissions extends BasePermissions {
+  constructor(
+    public readonly organizationId: number,
+    isSuperuser: boolean,
+    permissions: string[]
+  ) {
+    super(isSuperuser, permissions);
+  }
+}
+
+export class ProductPermissions extends BasePermissions {
+  constructor(
+    public readonly productId: number,
+    isSuperuser: boolean,
+    permissions: string[]
+  ) {
+    super(isSuperuser, permissions);
+  }
+}
+
+export class RepositoryPermissions extends BasePermissions {
+  constructor(
+    public readonly repositoryId: number,
+    isSuperuser: boolean,
+    permissions: string[]
+  ) {
+    super(isSuperuser, permissions);
+  }
+}
+
+type PermissionEntity = 'organizationId' | 'productId' | 'repositoryId';
+
+async function fetchPermissions<T extends BasePermissions>(
+  queryClient: QueryClient,
+  entityId: number,
+  entityType: PermissionEntity,
+  PermissionsClass: new (
+    entityId: number,
+    isSuperuser: boolean,
+    permissions: string[]
+  ) => T
+): Promise<T> {
+  const isSuperuser = await queryClient.fetchQuery({
+    ...getSuperuserOptions(),
+    staleTime: 60000,
+  });
+
+  if (isSuperuser) {
+    return new PermissionsClass(entityId, true, []);
+  }
+
+  const userInfo = await queryClient.fetchQuery({
+    ...getUserInfoOptions({
+      query: {
+        [entityType]: entityId,
+      },
+    }),
+    staleTime: 60000,
+  });
+
+  return new PermissionsClass(entityId, false, userInfo.permissions);
+}
+
+export const fetchOrganizationPermissions = (
+  queryClient: QueryClient,
+  organizationId: number
+) =>
+  fetchPermissions(
+    queryClient,
+    organizationId,
+    'organizationId',
+    OrganizationPermissions
+  );
+
+export const fetchProductPermissions = (
+  queryClient: QueryClient,
+  productId: number
+) => fetchPermissions(queryClient, productId, 'productId', ProductPermissions);
+
+export const fetchRepositoryPermissions = (
+  queryClient: QueryClient,
+  repositoryId: number
+) =>
+  fetchPermissions(
+    queryClient,
+    repositoryId,
+    'repositoryId',
+    RepositoryPermissions
+  );

ui/src/routes/admin/route.tsx

@@ -106,7 +106,7 @@ const Layout = () => {
 export const Route = createFileRoute('/admin')({
   component: Layout,
   beforeLoad: ({ context }) => {
-    if (!context.auth.hasRole(['superuser'])) {
+    if (!context.auth.isSuperuser) {
       throw redirect({
         to: '/403',
       });

ui/src/routes/organizations/$orgId/infrastructure-services/create/index.tsx

@@ -55,7 +55,6 @@ import {
 } from '@/components/ui/select';
 import { capitalize } from '@/helpers/capitalize';
 import { useSecrets } from '@/hooks/use-secrets';
-import { useUser } from '@/hooks/use-user';
 import { ApiError } from '@/lib/api-error';
 import { toast } from '@/lib/toast';
 
@@ -73,11 +72,11 @@ type FormSchema = z.infer<typeof formSchema>;
 const CreateInfrastructureServicePage = () => {
   const navigate = useNavigate();
   const params = Route.useParams();
-  const user = useUser();
+  const permissions = Route.useRouteContext().permissions;
 
   const secrets = useSecrets({
     orgId: params.orgId,
-    user,
+    permissions,
   });
 
   const { mutateAsync, isPending } = useMutation({