feat: Request Edit Access flow

packages/sanity/src/core/studio/screens/RequestAccessScreen.tsx

@@ -13,7 +13,7 @@ import {
 import {Button, Dialog} from '../../../ui-components'
 import {NotAuthenticatedScreen} from './NotAuthenticatedScreen'
 
-interface AccessRequest {
+export interface AccessRequest {
   id: string
   status: 'pending' | 'accepted' | 'declined'
   resourceId: string
@@ -22,6 +22,8 @@ interface AccessRequest {
   updatedAt: string
   updatedByUserId: string
   requestedByUserId: string
+  requestedRole: string
+  type: 'access' | 'role'
   note: string
 }
 
@@ -82,7 +84,10 @@ export function RequestAccessScreen() {
         if (requests && requests?.length) {
           const projectRequests = requests.filter((request) => request.resourceId === projectId)
           const declinedRequest = projectRequests.find((request) => request.status === 'declined')
-          if (declinedRequest) {
+          if (
+            declinedRequest &&
+            isAfter(addWeeks(new Date(declinedRequest.createdAt), 2), new Date())
+          ) {
             setHasBeenDenied(true)
             return
           }
@@ -127,7 +132,7 @@ export function RequestAccessScreen() {
       .request<AccessRequest | null>({
         url: `/access/project/${projectId}/requests`,
         method: 'post',
-        body: {note, requestUrl: window?.location.href},
+        body: {note, requestUrl: window?.location.href, type: 'access'},
       })
       .then((request) => {
         if (request) setHasPendingRequest(true)
@@ -148,7 +153,7 @@ export function RequestAccessScreen() {
         } else {
           toast.push({
             title: 'There was a problem submitting your request.',
-            status: errMessage,
+            status: 'error',
           })
         }
       })

packages/sanity/src/structure/components/requestPermissionDialog/RequestPermissionDialog.tsx

@@ -0,0 +1,184 @@
+import {useTelemetry} from '@sanity/telemetry/react'
+import {Box, Card, DialogProvider, Flex, Stack, Text, TextInput, useToast} from '@sanity/ui'
+import {useId, useMemo, useState} from 'react'
+import {useObservable} from 'react-rx'
+import {catchError, map, type Observable, of, startWith} from 'rxjs'
+import {type Role, useClient, useProjectId, useTranslation, useZIndex} from 'sanity'
+import {styled} from 'styled-components'
+
+import {type AccessRequest} from '../../../core/studio/screens'
+import {Dialog} from '../../../ui-components'
+import {structureLocaleNamespace} from '../../i18n'
+import {AskToEditRequestSent} from './__telemetry__/RequestPermissionDialog.telemetry'
+
+const MAX_NOTE_LENGTH = 150
+
+/** @internal */
+export const DialogBody = styled(Box)`
+  box-sizing: border-box;
+`
+
+/** @internal */
+export const LoadingContainer = styled(Flex).attrs({
+  align: 'center',
+  direction: 'column',
+  justify: 'center',
+})`
+  height: 110px;
+`
+
+/** @internal */
+export interface RequestPermissionDialogProps {
+  onClose?: () => void
+  onRequestSubmitted?: () => void
+}
+
+/**
+ * A confirmation dialog used to prevent unwanted document deletes. Loads all
+ * the referencing internal and cross-data references prior to showing the
+ * delete button.
+ *
+ * @internal
+ */
+export function RequestPermissionDialog({
+  onClose,
+  onRequestSubmitted,
+}: RequestPermissionDialogProps) {
+  const {t} = useTranslation(structureLocaleNamespace)
+  const telemtry = useTelemetry()
+  const dialogId = `request-permissions-${useId()}`
+  const projectId = useProjectId()
+  const client = useClient({apiVersion: '2024-09-26'})
+  const toast = useToast()
+  const zOffset = useZIndex()
+
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const [note, setNote] = useState('')
+  const [noteLength, setNoteLength] = useState<number>(0)
+
+  const [msgError, setMsgError] = useState<string | undefined>()
+  const [hasTooManyRequests, setHasTooManyRequests] = useState<boolean>(false)
+  const [hasBeenDenied, setHasBeenDenied] = useState<boolean>(false)
+
+  const requestedRole$: Observable<'administrator' | 'editor'> = useMemo(() => {
+    const adminRole = 'administrator' as const
+    if (!projectId || !client) return of(adminRole)
+    return client.observable
+      .request<(Role & {appliesToUsers?: boolean})[]>({url: `/projects/${projectId}/roles`})
+      .pipe(
+        map((roles) => {
+          const hasEditor = roles
+            .filter((role) => role?.appliesToUsers)
+            .find((role) => role.name === 'editor')
+          return hasEditor ? 'editor' : adminRole
+        }),
+        startWith(adminRole),
+        catchError(() => of(adminRole)),
+      )
+  }, [projectId, client])
+
+  const requestedRole = useObservable(requestedRole$)
+
+  const onSubmit = () => {
+    setIsSubmitting(true)
+    client
+      .request<AccessRequest | null>({
+        url: `/access/project/${projectId}/requests`,
+        method: 'post',
+        body: {note, requestUrl: window?.location.href, requestedRole, type: 'role'},
+      })
+      .then((request) => {
+        if (request) {
+          if (onRequestSubmitted) onRequestSubmitted()
+          telemtry.log(AskToEditRequestSent)
+          toast.push({title: 'Edit access requested'})
+        }
+      })
+      .catch((err) => {
+        const statusCode = err?.response?.statusCode
+        const errMessage = err?.response?.body?.message
+        if (statusCode === 429) {
+          // User is over their cross-project request limit
+          setHasTooManyRequests(true)
+          setMsgError(errMessage)
+        }
+        if (statusCode === 409) {
+          // If we get a 409, user has been denied on this project or has a valid pending request
+          // valid pending request should be handled by GET request above
+          setHasBeenDenied(true)
+          setMsgError(errMessage)
+        } else {
+          toast.push({
+            title: 'There was a problem submitting your request.',
+            status: 'error',
+          })
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false)
+      })
+  }
+
+  return (
+    <DialogProvider position={'fixed'} zOffset={zOffset.fullscreen}>
+      <Dialog
+        width={1}
+        id={dialogId}
+        header={t('request-permission-dialog.header.text')}
+        footer={{
+          cancelButton: {
+            onClick: onClose,
+            text: t('confirm-dialog.cancel-button.fallback-text'),
+          },
+          confirmButton: {
+            onClick: onSubmit,
+            loading: isSubmitting,
+            disabled: hasTooManyRequests || hasBeenDenied,
+            text: t('request-permission-dialog.confirm-button.text'),
+            tone: 'primary',
+            type: 'submit',
+          },
+        }}
+        onClose={onClose}
+        onClickOutside={onClose}
+      >
+        <DialogBody>
+          <Stack space={4}>
+            <Text>{t('request-permission-dialog.description.text')}</Text>
+            {hasTooManyRequests || hasBeenDenied ? (
+              <Card tone={'caution'} padding={3} radius={2} shadow={1}>
+                <Text size={1}>
+                  {hasTooManyRequests && (
+                    <>{msgError ?? t('request-permission-dialog.warning.limit-reached.text')}</>
+                  )}
+                  {hasBeenDenied && (
+                    <>{msgError ?? t('request-permission-dialog.warning.denied.text')}</>
+                  )}
+                </Text>
+              </Card>
+            ) : (
+              <Stack space={3} paddingBottom={0}>
+                <TextInput
+                  placeholder={t('request-permission-dialog.note-input.placeholder.text')}
+                  disabled={isSubmitting}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') onSubmit()
+                  }}
+                  maxLength={MAX_NOTE_LENGTH}
+                  value={note}
+                  onChange={(e) => {
+                    setNote(e.currentTarget.value)
+                    setNoteLength(e.currentTarget.value.length)
+                  }}
+                />
+
+                <Text align="right" muted size={1}>{`${noteLength}/${MAX_NOTE_LENGTH}`}</Text>
+              </Stack>
+            )}
+          </Stack>
+        </DialogBody>
+      </Dialog>
+    </DialogProvider>
+  )
+}

packages/sanity/src/structure/components/requestPermissionDialog/__telemetry__/RequestPermissionDialog.telemetry.ts

@@ -0,0 +1,17 @@
+import {defineEvent} from '@sanity/telemetry'
+
+/**
+ * When a draft in a live edit document is published
+ * @internal
+ */
+export const AskToEditDialogOpened = defineEvent({
+  name: 'Ask To Edit Dialog Opened',
+  version: 1,
+  description: 'User clicked the "Ask to edit" button in the document permissions banner',
+})
+
+export const AskToEditRequestSent = defineEvent({
+  name: 'Ask To Edit Request Sent',
+  version: 1,
+  description: 'User sent a role change request from the dialog',
+})

packages/sanity/src/structure/components/requestPermissionDialog/index.ts

@@ -0,0 +1,2 @@
+export * from './RequestPermissionDialog'
+export * from './useRoleRequestsStatus'

packages/sanity/src/structure/components/requestPermissionDialog/useRoleRequestsStatus.tsx

@@ -0,0 +1,75 @@
+import {addWeeks, isAfter, isBefore} from 'date-fns'
+import {useMemo} from 'react'
+import {useObservable} from 'react-rx'
+import {from, of} from 'rxjs'
+import {catchError, map, startWith} from 'rxjs/operators'
+import {useClient, useProjectId} from 'sanity'
+
+import {type AccessRequest} from '../../../core/studio/screens'
+
+export const useRoleRequestsStatus = () => {
+  const client = useClient({apiVersion: '2024-07-01'})
+  const projectId = useProjectId()
+
+  const checkRoleRequests = useMemo(() => {
+    if (!client || !projectId) {
+      return of({loading: false, error: false, status: 'none'})
+    }
+
+    return from(
+      client.request<AccessRequest[] | null>({
+        url: `/access/requests/me`,
+      }),
+    ).pipe(
+      map((requests) => {
+        if (requests && requests.length) {
+          // Filter requests for the specific project and where type is 'role'
+          const projectRequests = requests.filter(
+            (request) => request.resourceId === projectId && request.type === 'role',
+          )
+
+          const declinedRequest = projectRequests.find((request) => request.status === 'declined')
+          if (
+            declinedRequest &&
+            isAfter(addWeeks(new Date(declinedRequest.createdAt), 2), new Date())
+          ) {
+            return {loading: false, error: false, status: 'declined'}
+          }
+
+          const pendingRequest = projectRequests.find(
+            (request) =>
+              request.status === 'pending' &&
+              isAfter(addWeeks(new Date(request.createdAt), 2), new Date()),
+          )
+          if (pendingRequest) {
+            return {loading: false, error: false, status: 'pending'}
+          }
+
+          const oldPendingRequest = projectRequests.find(
+            (request) =>
+              request.status === 'pending' &&
+              isBefore(addWeeks(new Date(request.createdAt), 2), new Date()),
+          )
+          if (oldPendingRequest) {
+            return {loading: false, error: false, status: 'expired'}
+          }
+        }
+        return {loading: false, error: false, status: 'none'}
+      }),
+      catchError((err) => {
+        console.error(err)
+        return of({loading: false, error: true, status: undefined})
+      }),
+      startWith({loading: true, error: false, status: undefined}), // Start with loading state
+    )
+  }, [client, projectId])
+
+  // Use useObservable to subscribe to the checkRoleRequests observable
+  const {loading, error, status} = useObservable(checkRoleRequests, {
+    loading: true,
+    error: false,
+    status: undefined,
+  })
+
+  return {data: status, loading, error}
+}

packages/sanity/src/structure/i18n/resources.ts

@@ -104,16 +104,20 @@ const structureLocaleStrings = defineLocalesResources('structure', {
     'The type <strong>{{schemaType}}</strong> has <code>liveEdit</code> enabled, but a draft version of this document exists. Publish or discard the draft in order to continue live editing it.',
   /** The text for the permission check banner if the user only has one role, and it does not allow updating this document */
   'banners.permission-check-banner.missing-permission_create_one':
-    'Your role <Roles/> does not have permissions to create this document.',
+    'Your role <Roles/> does not have permissions to publish this document.',
   /** The text for the permission check banner if the user only has multiple roles, but they do not allow updating this document */
   'banners.permission-check-banner.missing-permission_create_other':
-    'Your roles <Roles/> do not have permissions to create this document.',
+    'Your roles <Roles/> do not have permissions to publish this document.',
   /** The text for the permission check banner if the user only has one role, and it does not allow updating this document */
   'banners.permission-check-banner.missing-permission_update_one':
-    'Your role <Roles/> does not have permissions to update this document.',
+    'Your role <Roles/> does not have permissions to edit this document.',
   /** The text for the permission check banner if the user only has multiple roles, but they do not allow updating this document */
   'banners.permission-check-banner.missing-permission_update_other':
-    'Your roles <Roles/> do not have permissions to update this document.',
+    'Your roles <Roles/> do not have permissions to edit this document.',
+  /** The pending text for the request permission button that appears for viewer roles */
+  'banners.permission-check-banner.request-permission-button.sent': 'Editor request sent',
+  /** The text for the request permission button that appears for viewer roles */
+  'banners.permission-check-banner.request-permission-button.text': 'Ask to edit',
   /** The text for the reload button */
   'banners.reference-changed-banner.reason-changed.reload-button.text': 'Reload reference',
   /** The text for the reference change banner if the reason is that the reference has been changed */
@@ -411,6 +415,24 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The text for the "Open preview" action for a document */
   'production-preview.menu-item.title': 'Open preview',
 
+  /** The text for the confirm button in the request permission dialog used in the permissions banner */
+  'request-permission-dialog.confirm-button.text': 'Send request',
+  /** The description text for the request permission dialog used in the permissions banner */
+  'request-permission-dialog.description.text':
+    "Your request will be sent to the project administrator(s). If you'd like, you can also include a note",
+  /** The header/title for the request permission dialog used in the permissions banner */
+  'request-permission-dialog.header.text': 'Ask for edit access',
+  /** The text describing the note input for the request permission dialog used in the permissions banner */
+  'request-permission-dialog.note-input.description.text': "If you'd like, you can add a note",
+  /** The placeholder for the note input in the request permission dialog used in the permissions banner */
+  'request-permission-dialog.note-input.placeholder.text': 'Add note...',
+  /** The error/warning text in the request permission dialog when the user's request has been declined */
+  'request-permission-dialog.warning.denied.text':
+    'Your request to access this project has been declined.',
+  /** The error/warning text in the request permission dialog when the user's request has been denied due to too many outstanding requests */
+  'request-permission-dialog.warning.limit-reached.text':
+    "You've reached the limit for role requests across all projects. Please wait before submitting more requests or contact an admin for assistance.",
+
   /** Label for button when status is saved */
   'status-bar.document-status-pulse.status.saved.text': 'Saved',
   /** Label for button when status is syncing */