@contember/react-client-tenant 2.2.0-alpha.3 → 2.2.0-alpha.5

package/src/hooks/queries/useProjectApiKeysQuery.ts

@@ -0,0 +1,43 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, ParameterRef } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi.js'
+import { useCallback } from 'react'
+
+const apiKeyFragment = TenantApi
+	.apiKey$$
+	.identity(
+		TenantApi.identity$$
+			.projects(
+				TenantApi
+					.identityProjectRelation$
+					.project(TenantApi.project$$)
+					.memberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$)),
+			),
+	)
+
+export type ProjectApiKeysQueryResult = readonly ModelType<typeof apiKeyFragment>[]
+
+export type ProjectApiKeysQueryVariables = {
+	projectSlug: string
+}
+
+export const useProjectApiKeysQuery = (options: TenantApiOptions = {}) => {
+	const executor = useTenantApi(options)
+	return useCallback(async ({ projectSlug }: ProjectApiKeysQueryVariables): Promise<ProjectApiKeysQueryResult> => {
+		const result = await executor(
+			TenantApi.query$.projectBySlug(
+				{
+					slug: ParameterRef.of('projectSlug'),
+				},
+				TenantApi.project$.apiKeys(apiKeyFragment),
+			),
+			{
+				variables: {
+					projectSlug,
+				},
+			},
+		)
+
+		return result.projectBySlug?.apiKeys ?? []
+	}, [executor])
+}

package/src/hooks/queries/useProjectMembersQuery.ts

@@ -7,7 +7,7 @@ const projectIdentityRelationFragment = TenantApi
 	.projectIdentityRelation$
 	.identity(
 		TenantApi.identity$$
-			.person(TenantApi.person$.id.email.name.otpEnabled)
+			.person(TenantApi.person$.id.email.name.otpEnabled.emailOtpEnabled.disabledAt)
 			.apiKey(TenantApi.apiKey$$),
 	)
 	.memberships(TenantApi.membership$$.variables(TenantApi.variableEntry$$))

package/src/hooks/queries/useProjectSecretsQuery.ts

@@ -0,0 +1,33 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType, ParameterRef } from 'graphql-ts-client-api'
+import { TenantApiOptions, useTenantApi } from '../useTenantApi.js'
+import { useCallback } from 'react'
+
+const projectSecretFragment = TenantApi.projectSecretInfo$$
+
+export type ProjectSecretsQueryResult = readonly ModelType<typeof projectSecretFragment>[]
+
+export type ProjectSecretsQueryVariables = {
+	projectSlug: string
+}
+
+export const useProjectSecretsQuery = (options: TenantApiOptions = {}) => {
+	const executor = useTenantApi(options)
+	return useCallback(async ({ projectSlug }: ProjectSecretsQueryVariables): Promise<ProjectSecretsQueryResult> => {
+		const result = await executor(
+			TenantApi.query$.projectBySlug(
+				{
+					slug: ParameterRef.of('projectSlug'),
+				},
+				TenantApi.project$.secrets(projectSecretFragment),
+			),
+			{
+				variables: {
+					projectSlug,
+				},
+			},
+		)
+
+		return result.projectBySlug?.secrets ?? []
+	}, [executor])
+}

package/src/hooks/useFetchIdentity.ts

@@ -1,9 +1,22 @@
 import { useCallback, useMemo, useState } from 'react'
-import { Identity, IdentityMethods, IdentityStateValue } from '../types/index.js'
+import { Identity, IdentityGlobalPermissions, IdentityMethods, IdentityStateValue } from '../types/index.js'
 import { GraphQlClientError, useSessionToken } from '@contember/react-client'
 import { useLogoutInternal } from '../internal/hooks/useLogoutInternal.js'
 import { useMeQuery } from './queries/index.js'
 
+const deniedGlobalPermissions: IdentityGlobalPermissions = {
+	canCreateProject: false,
+	canDeployEntrypoint: false,
+	canViewConfiguration: false,
+	canListIdentityProviders: false,
+	canListMailTemplates: false,
+	canManageConfiguration: false,
+	canViewAuthLog: false,
+	canListPersons: false,
+	canListGlobalApiKeys: false,
+	canCreateGlobalApiKey: false,
+}
+
 export const useFetchIdentity = (): [{ state: IdentityStateValue; identity: Identity | undefined }, IdentityMethods] => {
 	const sessionToken = useSessionToken()
 	const fetchMe = useMeQuery()
@@ -22,7 +35,6 @@ export const useFetchIdentity = (): [{ state: IdentityStateValue; identity: Iden
 			const response = await fetchMe({})
 			const person = response.person
 			const projects = response.projects
-			const permissions = response.permissions ?? { canCreateProject: false }
 
 			setIdentityState({
 				state: 'success',
@@ -34,8 +46,11 @@ export const useFetchIdentity = (): [{ state: IdentityStateValue; identity: Iden
 						name: it.project.name,
 						slug: it.project.slug,
 						roles: it.memberships.map(it => it.role),
+						permissions: it.project.permissions,
 					})),
-					permissions,
+					// `permissions` is nullable on an identity the caller may not inspect; that never
+					// applies to `me`, but denying everything is the safe reading if it ever does.
+					permissions: response.permissions ?? deniedGlobalPermissions,
 				},
 			})
 		} catch (e) {

package/src/tsconfig.json

@@ -7,6 +7,7 @@
 		{ "path": "../../react-client/src" },
 		{ "path": "../../react-utils/src" },
 		{ "path": "../../graphql-client-tenant/src" },
+		{ "path": "../../graphql-client/src" },
 
 	]
 }

package/src/types/Identity.ts

@@ -1,21 +1,62 @@
+/**
+ * What the identity may do, as the tenant API reports it (`me { permissions }`).
+ *
+ * Advisory: it mirrors the ACL the resolvers enforce so a UI can stop offering what it cannot
+ * deliver. Never treat a `true` here as authorization — the operation is checked again when called.
+ */
+export interface IdentityGlobalPermissions {
+	readonly canCreateProject: boolean
+	readonly canDeployEntrypoint: boolean
+	/** Read `configuration`, which throws rather than answering an empty value. */
+	readonly canViewConfiguration: boolean
+	readonly canListIdentityProviders: boolean
+	readonly canListMailTemplates: boolean
+	readonly canManageConfiguration: boolean
+	readonly canViewAuthLog: boolean
+	/** List every person. Without it `persons` still answers, narrowed to the projects the caller administers. */
+	readonly canListPersons: boolean
+	readonly canListGlobalApiKeys: boolean
+	readonly canCreateGlobalApiKey: boolean
+}
+
+/** Same contract as {@link IdentityGlobalPermissions}, scoped to one project. */
+export interface ProjectPermissions {
+	readonly canViewMembers: boolean
+	readonly canAddMember: boolean
+	readonly canUpdateMember: boolean
+	readonly canRemoveMember: boolean
+	readonly canViewSecrets: boolean
+	/** Distinct from viewing: a project admin commonly has one and not the other. */
+	readonly canSetSecret: boolean
+	readonly canCreateApiKey: boolean
+	readonly canUpdate: boolean
+}
+
 export interface Identity {
 	readonly id: string
 	readonly roles: readonly string[]
 	readonly person?: Person
 	readonly projects: IdentityProject[]
-	readonly permissions: {
-		readonly canCreateProject: boolean
-	}
+	readonly permissions: IdentityGlobalPermissions
 }
 
 export interface Person {
 	readonly id: string
 	readonly email?: string
+	readonly name?: string
 	readonly otpEnabled: boolean
+	readonly emailOtpEnabled: boolean
+	/** The person's own opt-in; `undefined` means "follow the tenant policy". Says nothing on its own — see `passwordlessAvailable`. */
+	readonly passwordlessEnabled?: boolean
+	/** Whether passwordless sign-in actually works right now: the tenant policy resolved against `passwordlessEnabled`, as `signIn` resolves it. */
+	readonly passwordlessAvailable: boolean
+	/** Whether `passwordlessEnabled` is what decides `passwordlessAvailable`. False under an `always`/`never` policy, where a toggle would change nothing. */
+	readonly passwordlessSelfManaged: boolean
 }
 
 export interface IdentityProject {
 	readonly slug: string
 	readonly name: string
 	readonly roles: readonly string[]
+	readonly permissions: ProjectPermissions
 }

package/src/types/forbidden.ts

@@ -0,0 +1,31 @@
+import { GraphQlClientError } from '@contember/graphql-client'
+import { FormErrorCode } from './forms.js'
+
+/**
+ * Tells a permission rejection apart from a genuine failure.
+ *
+ * The listing queries return an empty result when the caller may not see
+ * anything, but the configuration queries (`configuration`, `authPolicies`,
+ * `identityProviders`, `mailTemplates`) throw instead. Their resolvers call
+ * `requireAccess`, which raises a `ForbiddenError` carrying
+ * `extensions.code = 'ForbiddenError'` — that is what this matches.
+ *
+ * A view can then say "you do not have access to this" instead of showing a
+ * failure the user cannot act on.
+ */
+export const isForbiddenError = (error: unknown): boolean => {
+	if (!(error instanceof GraphQlClientError)) {
+		return false
+	}
+	if (error.type === 'forbidden') {
+		return true
+	}
+	return error.errors?.some(it => it?.extensions?.code === 'ForbiddenError') ?? false
+}
+
+/**
+ * Classifies an error thrown by a mutation. Unlike the queries above, a denied mutation always
+ * throws — it never answers `ok: false` — so without this split every denial would reach the user
+ * as "something went wrong, please try again later", which is advice they cannot act on.
+ */
+export const toFormErrorCode = (error: unknown): FormErrorCode => isForbiddenError(error) ? 'FORBIDDEN' : 'UNKNOWN_ERROR'

package/src/types/forms.ts

@@ -9,7 +9,12 @@ export type FormState =
 
 type FormValueType = Record<string, unknown>
 
-export type FormErrorCode = 'UNKNOWN_ERROR'
+/**
+ * Codes any form can raise, whatever it submits. `FORBIDDEN` is separate from `UNKNOWN_ERROR`
+ * because a permission rejection is an answer, not a failure — the user cannot retry their way out
+ * of it, so telling them to try again later is wrong.
+ */
+export type FormErrorCode = 'UNKNOWN_ERROR' | 'FORBIDDEN'
 
 export type FormError<V extends FormValueType, E extends string> = {
 	field?: keyof V

package/src/types/index.ts

@@ -1,3 +1,4 @@
+export * from './forbidden.js'
 export * from './forms.js'
 export * from './IdentityMethods.js'
 export * from './IdentityStateValue.js'

package/tests/TenantForm.test.tsx

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from 'bun:test'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { GraphQlClientError } from '@contember/graphql-client'
+import { TenantForm } from '../src/components/forms/TenantForm.js'
+import { useForm } from '../src/contexts.js'
+import { FormContextValue } from '../src/types/forms.js'
+
+type ProbeFormContextValue = FormContextValue<{ value: string }, 'SOME_ERROR'>
+
+const request = { url: '/tenant', query: '', variables: {} }
+
+const forbiddenError = new GraphQlClientError('Forbidden', 'response errors', request, undefined, [
+	{ message: 'You are not allowed to set project secrets', extensions: { code: 'ForbiddenError' } },
+])
+
+const ErrorProbe = () => {
+	const form = useForm()
+	return <span>{form.errors.map(it => it.code).join(',')}</span>
+}
+
+const renderProbe = (execute: () => Promise<never>) => {
+	const result = render(
+		<TenantForm<ProbeFormContextValue> initialValues={{ value: '' }} execute={execute}>
+			<form>
+				<ErrorProbe />
+				<button type="submit">submit</button>
+			</form>
+		</TenantForm>,
+	)
+	return result
+}
+
+// Unmount between the cases: without it the second render leaves two forms in the document and
+// getByText('submit') fails on the duplicate. Auto-cleanup only kicks in when the testing library
+// sees a global afterEach, which it doesn't reliably do here.
+afterEach(cleanup)
+
+describe('TenantForm error codes', () => {
+	it('reports a denied mutation as FORBIDDEN', async () => {
+		const { getByText, findByText } = renderProbe(async () => {
+			throw forbiddenError
+		})
+		fireEvent.click(getByText('submit'))
+		expect(await findByText('FORBIDDEN')).toBeTruthy()
+	})
+
+	it('reports a genuine failure as UNKNOWN_ERROR', async () => {
+		const { getByText, findByText } = renderProbe(async () => {
+			throw new GraphQlClientError('Boom', 'server error', request)
+		})
+		fireEvent.click(getByText('submit'))
+		expect(await findByText('UNKNOWN_ERROR')).toBeTruthy()
+	})
+})