fix: Handle read-only roles better

src/features/auth/store/authStore.ts

@@ -190,7 +190,7 @@ class AuthStore {
 		return value ? JSON.parse(atob(value)) : undefined;
 	}
 
-	public checkForFabricConnect(id: EntityIds): boolean {
+	public checkForFabricConnect(id: EntityIds | undefined): boolean {
 		return localStorage.getItem(this.fabricConnectKeyPrefix + id) === 'true';
 	}
 

src/features/instance/InstanceNavBar.tsx

@@ -34,7 +34,7 @@ export function InstanceNavBar() {
 	const params = useParams({ strict: false });
 
 	const { version }: RegistrationInfoResponse = useLoaderData({ strict: false });
-	const statusAvailable = wasAReleasedBeforeB('4.6.0', version);
+	const statusAvailable = wasAReleasedBeforeB('4.6.0', version) && canManage;
 	const apisAvailable = wasAReleasedBeforeB('4.7.0-beta.7', version);
 
 	const instanceParams = useInstanceClientIdParams();
@@ -43,7 +43,7 @@ export function InstanceNavBar() {
 
 	const links = useMemo(() =>
 		[
-			{
+			canManage && {
 				to: buildAbsoluteLinkToPage(params),
 				activeOptions: { exact: true },
 				name: 'Applications',

src/features/instance/applications/context/EditorViewProvider.tsx

@@ -21,7 +21,7 @@ import {
 } from '@/integrations/api/instance/applications/setComponentFile';
 import { useListener } from '@/lib/events/listener';
 import { setWatchedValue } from '@/lib/events/watcher';
-import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react';
 import { TreeItemIndex } from 'react-complex-tree/src/types';
@@ -43,8 +43,17 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	/*
 	 Create our structured view from the relational API data.
 	 */
-	const { data: apiComponents } = useSuspenseQuery(getComponentsQueryOptions(instanceParams));
-	const mappedData = useMemo(() => calculateRootEntries(apiComponents.entries), [apiComponents]);
+	const { data: apiComponents } = useQuery(getComponentsQueryOptions(instanceParams));
+	const mappedData = useMemo(() => {
+		if (!apiComponents) {
+			return {
+				rootEntries: [],
+				pathsRegistry: new Map(),
+				allEntries: new Map(),
+			};
+		}
+		return calculateRootEntries(apiComponents.entries);
+	}, [apiComponents]);
 
 	const reloadRootEntries = useCallback(async () =>
 		queryClient.fetchQuery<APIDirectoryEntry>({
@@ -63,7 +72,7 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	).map<TreeItemIndex>(rootEntry => rootEntry.name);
 	let defaultFocusedItem = defaultFolderExpansions[0];
 	let defaultSelectedItem = defaultFolderExpansions.slice(0, 1);
-	if (!defaultFocusedItem) {
+	if (!defaultFocusedItem && apiComponents) {
 		defaultFocusedItem = newApplication;
 		defaultSelectedItem = [newApplication];
 	}

src/features/instance/applications/index.tsx

@@ -1,4 +1,7 @@
+import { useInstanceManagePermission } from '@/hooks/usePermissions';
 import { useSessionToggler } from '@/hooks/useSessionToggler';
+import { buildAbsoluteLinkToPage } from '@/lib/urls/buildAbsoluteLinkToPage';
+import { Navigate, useParams } from '@tanstack/react-router';
 import { cx } from 'class-variance-authority';
 import { ApplicationsSidebar } from './components/ApplicationsSidebar';
 import { ContentActions } from './components/ContentActions';
@@ -12,8 +15,14 @@ import { RedeployApplicationModal } from './modals/RedeployApplicationModal';
 import { RenameFileModal } from './modals/RenameFileModal';
 
 export function ApplicationsEditor() {
+	const canManage = useInstanceManagePermission();
+	const params = useParams({ strict: false });
 	const { toggle, toggled } = useSessionToggler('ApplicationsSidebarOpened', true);
 
+	if (!canManage) {
+		return <Navigate to={buildAbsoluteLinkToPage(params, 'databases')} />;
+	}
+
 	return (
 		<EditorViewProvider>
 			<aside

src/features/instance/config/overview/index.tsx

@@ -12,6 +12,7 @@ import { HarperVersion } from '@/features/instance/config/overview/components/Ha
 import { InstanceNodeName } from '@/features/instance/config/overview/components/InstanceNodeName';
 import { InstanceURL } from '@/features/instance/config/overview/components/InstanceURL';
 import { LastDeployedTimestamp } from '@/features/instance/config/overview/components/LastDeployedTimestamp';
+import { useInstanceManagePermission } from '@/hooks/usePermissions';
 import { useRollingConfigUpdate } from '@/hooks/useRollingConfigUpdate';
 import {
 	APIDirectoryEntry,
@@ -63,8 +64,9 @@ export function ConfigOverviewIndex() {
 	const { data: configurationInfo, isLoading: loadingConfig } = useQuery(
 		getConfigurationQueryOptions(instanceParams),
 	);
+	const canManage = useInstanceManagePermission();
 	const { data: components, isLoading: loadingComponents } = useQuery(
-		getComponentsQueryOptions(instanceParams),
+		getComponentsQueryOptions({ ...instanceParams, enabled: canManage }),
 	);
 
 	const lastDeployedTimestamp = useMemo(() => {

src/features/instance/config/users/modals/EditUserModal.tsx

@@ -1,4 +1,5 @@
 import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { authStore } from '@/features/auth/store/authStore';
 import { AlterUserForm } from '@/features/instance/config/users/components/AlterUserForm';
 import { DeleteUserForm } from '@/features/instance/config/users/components/DeleteUserForm';
 import { useInstanceAuth } from '@/hooks/useAuth';
@@ -21,8 +22,9 @@ export function EditUserModal({
 	onUserDeleted: () => void;
 	onUserUpdated: () => void;
 }) {
+	const isFabricConnect = authStore.checkForFabricConnect(instanceId ?? clusterId);
 	const auth = useInstanceAuth(instanceId ?? clusterId);
-	const isSelf = auth.user?.username === data.username;
+	const isSelf = !isFabricConnect && auth.user?.username === data.username;
 	const canDelete = !isSelf;
 
 	return (

src/features/instance/databases/components/DatabasesSidebar.tsx

@@ -97,12 +97,17 @@ export function DatabasesSidebar({ instanceDatabaseMap }: { instanceDatabaseMap?
 								</div>
 							)
 							: tableNames.length === 0 && !params.databaseName?.length
-							? (
-								// If no database is selected, show a message
-								<p className="pt-2 text-sm text-center">
-									Please {databaseNames.length === 0 ? 'create' : 'select'} a table.
-								</p>
-							)
+							? canManageBrowseInstance
+								? (
+									<p className="pt-2 text-sm text-center">
+										Please {databaseNames.length === 0 ? 'create' : 'select'} a table.
+									</p>
+								)
+								: (
+									<p className="pt-2 text-sm text-center">
+										Please {databaseNames.length === 0 ? 'ask your admin to create' : 'select'} a table.
+									</p>
+								)
 							: (
 								''
 							)}

src/integrations/api/instance/applications/getComponents.ts

@@ -18,10 +18,11 @@ export async function getComponents({ instanceClient }: InstanceClientIdConfig)
 	return data;
 }
 
-export function getComponentsQueryOptions(params: InstanceClientIdConfig) {
+export function getComponentsQueryOptions(params: InstanceClientIdConfig & { enabled?: boolean }) {
 	return queryOptions({
 		queryKey: [params.entityId, 'get_components'] as const,
 		queryFn: () => getComponents(params),
 		retry: false,
+		enabled: params.enabled !== false,
 	});
 }