feat: add preview access sharing

sanity-io · Oct 18, 2024 · 021ff10 · 021ff10
1 parent e169186
commit 021ff10
Show file tree

Hide file tree

Showing 15 changed files with 445 additions and 191 deletions.
diff --git a/packages/presentation/package.json b/packages/presentation/package.json
@@ -49,6 +49,7 @@
   "dependencies": {
     "@sanity/comlink": "workspace:*",
     "@sanity/icons": "^3.4.0",
+    "@sanity/logos": "^2.1.13",
     "@sanity/preview-url-secret": "workspace:*",
     "@sanity/ui": "^2.8.9",
     "@sanity/uuid": "3.0.2",

diff --git a/packages/presentation/src/PresentationTool.tsx b/packages/presentation/src/PresentationTool.tsx
@@ -83,8 +83,11 @@ const Container = styled(Flex)`
 export default function PresentationTool(props: {
   tool: Tool<PresentationPluginOptions>
   canCreateUrlPreviewSecrets: boolean
+  canToggleSharePreviewAccess: boolean
+  canUseSharedPreviewAccess: boolean
 }): ReactElement {
-  const {canCreateUrlPreviewSecrets, tool} = props
+  const {canCreateUrlPreviewSecrets, canToggleSharePreviewAccess, canUseSharedPreviewAccess, tool} =
+    props
   const components = tool.options?.components
   const _previewUrl = tool.options?.previewUrl
   const name = tool.name || DEFAULT_TOOL_NAME
@@ -536,6 +539,8 @@ export default function PresentationTool(props: {
                     <BoundaryElementProvider element={boundaryElement}>
                       <PreviewFrame
                         canSharePreviewAccess={canSharePreviewAccess}
+                        canToggleSharePreviewAccess={canToggleSharePreviewAccess}
+                        canUseSharedPreviewAccess={canUseSharedPreviewAccess}
                         dispatch={dispatch}
                         iframe={state.iframe}
                         initialUrl={initialPreviewUrl}

diff --git a/packages/presentation/src/PresentationToolGrantsCheck.tsx b/packages/presentation/src/PresentationToolGrantsCheck.tsx
@@ -1,4 +1,9 @@
-import {schemaIdPrefix, schemaIdSingleton, schemaType} from '@sanity/preview-url-secret/constants'
+import {
+  schemaIdPrefix,
+  schemaIdSingleton,
+  schemaType,
+  schemaTypeSingleton,
+} from '@sanity/preview-url-secret/constants'
 import {useToast} from '@sanity/ui'
 import {uuid} from '@sanity/uuid'
 import {useEffect, useState, type ReactElement} from 'react'
@@ -17,27 +22,40 @@ export default function PresentationToolGrantsCheck(props: {
   const willGeneratePreviewUrlSecret =
     typeof previewUrl === 'object' || typeof previewUrl === 'function'
   const grantsStore = useGrantsStore()
-  const [draftPermission, setDraftPermission] = useState<PermissionCheckResult | null>(null)
+  const [previewAccessSharingCreatePermission, setCreateAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
+  const [previewAccessSharingUpdatePermission, setUpdateAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
+  const [previewAccessSharingReadPermission, setReadAccessSharingPermission] =
+    useState<PermissionCheckResult | null>(null)
   const [previewUrlSecretPermission, setPreviewUrlSecretPermission] =
     useState<PermissionCheckResult | null>(null)
 
   useEffect(() => {
     if (!willGeneratePreviewUrlSecret) return undefined
 
-    const draftPermissionSubscription = grantsStore
-      .checkDocumentPermission('create', {_id: schemaIdSingleton, _type: schemaType})
-      .subscribe(setDraftPermission)
+    const previewCreateAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('create', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setCreateAccessSharingPermission)
+    const previewUpdateAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('update', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setUpdateAccessSharingPermission)
+    const previewReadAccessSharingPermissionSubscription = grantsStore
+      .checkDocumentPermission('read', {_id: schemaIdSingleton, _type: schemaTypeSingleton})
+      .subscribe(setReadAccessSharingPermission)
     const previewUrlSecretPermissionSubscription = grantsStore
       .checkDocumentPermission('create', {_id: `${schemaIdPrefix}.${uuid()}`, _type: schemaType})
       .subscribe(setPreviewUrlSecretPermission)
 
     return () => {
-      draftPermissionSubscription.unsubscribe()
+      previewCreateAccessSharingPermissionSubscription.unsubscribe()
+      previewUpdateAccessSharingPermissionSubscription.unsubscribe()
+      previewReadAccessSharingPermissionSubscription.unsubscribe()
       previewUrlSecretPermissionSubscription.unsubscribe()
     }
   }, [grantsStore, willGeneratePreviewUrlSecret])
 
-  const canCreateUrlPreviewSecrets = draftPermission?.granted && previewUrlSecretPermission?.granted
+  const canCreateUrlPreviewSecrets = previewUrlSecretPermission?.granted
 
   useEffect(() => {
     if (!willGeneratePreviewUrlSecret || canCreateUrlPreviewSecrets !== false) return undefined
@@ -54,13 +72,27 @@ export default function PresentationToolGrantsCheck(props: {
 
   if (
     willGeneratePreviewUrlSecret &&
-    (!draftPermission ||
-      typeof draftPermission.granted === 'undefined' ||
+    (!previewAccessSharingCreatePermission ||
+      typeof previewAccessSharingCreatePermission.granted === 'undefined' ||
+      !previewAccessSharingUpdatePermission ||
+      typeof previewAccessSharingUpdatePermission.granted === 'undefined' ||
       !previewUrlSecretPermission ||
+      !previewAccessSharingReadPermission ||
+      typeof previewAccessSharingReadPermission.granted === 'undefined' ||
       typeof previewUrlSecretPermission.granted === 'undefined')
   ) {
     return <PresentationSpinner />
   }
 
-  return <PresentationTool {...props} canCreateUrlPreviewSecrets={canCreateUrlPreviewSecrets!} />
+  return (
+    <PresentationTool
+      {...props}
+      canCreateUrlPreviewSecrets={canCreateUrlPreviewSecrets === true}
+      canToggleSharePreviewAccess={
+        previewAccessSharingCreatePermission?.granted === true &&
+        previewAccessSharingUpdatePermission?.granted === true
+      }
+      canUseSharedPreviewAccess={previewAccessSharingReadPermission?.granted === true}
+    />
+  )
 }
diff --git a/packages/presentation/src/preview/PreviewFrame.tsx b/packages/presentation/src/preview/PreviewFrame.tsx
@@ -79,7 +79,10 @@ const PERSPECTIVE_ICONS: Record<PresentationPerspective, ComponentType> = {
 }
 
 export interface PreviewFrameProps extends Pick<PresentationState, 'iframe' | 'visualEditing'> {
+  // @TODO rename to share preview access is enabled in the config
   canSharePreviewAccess: boolean
+  canToggleSharePreviewAccess: boolean
+  canUseSharedPreviewAccess: boolean
   dispatch: DispatchPresentationAction
   initialUrl: URL
   loadersConnection: Status
@@ -103,6 +106,8 @@ export const PreviewFrame = memo(
     function PreviewFrameComponent(props, forwardedRef) {
       const {
         canSharePreviewAccess,
+        canToggleSharePreviewAccess,
+        canUseSharedPreviewAccess,
         dispatch,
         iframe,
         initialUrl,
@@ -562,6 +567,8 @@ export const PreviewFrame = memo(
                 {canSharePreviewAccess && (
                   <Flex align="center" flex="none" gap={1} paddingX={1}>
                     <SharePreviewMenu
+                      canToggleSharePreviewAccess={canToggleSharePreviewAccess}
+                      canUseSharedPreviewAccess={canUseSharedPreviewAccess}
                       previewLocationRoute={previewLocationRoute}
                       initialUrl={initialUrl}
                       perspective={perspective}