feat: set pending state on submit

sanity-io · Sep 30, 2024 · e3f4a0d · e3f4a0d
1 parent eee7cb3
commit e3f4a0d
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/packages/sanity/src/structure/panes/document/documentPanel/banners/PermissionCheckBanner.tsx b/packages/sanity/src/structure/panes/document/documentPanel/banners/PermissionCheckBanner.tsx
@@ -1,6 +1,6 @@
 import {ReadOnlyIcon} from '@sanity/icons'
 import {Text} from '@sanity/ui'
-import {useState} from 'react'
+import {useMemo, useState} from 'react'
 import {Translate, useCurrentUser, useListFormat, useTranslation} from 'sanity'
 
 import {
@@ -23,6 +23,11 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
     loading: requestStatusLoading,
     error: requestStatusError,
   } = useRoleRequestsStatus()
+  const [requestSent, setRequestSent] = useState(false)
+  const requestPending = useMemo(
+    () => roleRequestStatus === 'pending' || requestSent,
+    [roleRequestStatus, requestSent],
+  )
   const currentUserRoles = currentUser?.roles || []
   const isOnlyViewer = currentUserRoles.length === 1 && currentUserRoles[0].name === 'viewer'
   const [showRequestPermissionDialog, setShowRequestPermissionDialog] = useState(false)
@@ -57,17 +62,13 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
         action={
           isOnlyViewer && roleRequestStatus && !requestStatusError && !requestStatusLoading
             ? {
-                onClick:
-                  roleRequestStatus === 'pending'
-                    ? undefined
-                    : () => setShowRequestPermissionDialog(true),
-                text:
-                  roleRequestStatus === 'pending'
-                    ? t('banners.permission-check-banner.request-permission-button.sent')
-                    : t('banners.permission-check-banner.request-permission-button.text'),
-                tone: roleRequestStatus === 'pending' ? 'default' : 'primary',
-                disabled: roleRequestStatus === 'pending',
-                mode: roleRequestStatus === 'pending' ? 'bleed' : undefined,
+                onClick: requestPending ? undefined : () => setShowRequestPermissionDialog(true),
+                text: requestPending
+                  ? t('banners.permission-check-banner.request-permission-button.sent')
+                  : t('banners.permission-check-banner.request-permission-button.text'),
+                tone: requestPending ? 'default' : 'primary',
+                disabled: requestPending,
+                mode: requestPending ? 'bleed' : undefined,
               }
             : undefined
         }
@@ -77,7 +78,10 @@ export function PermissionCheckBanner({granted, requiredPermission}: PermissionC
       {showRequestPermissionDialog && (
         <RequestPermissionDialog
           onClose={() => setShowRequestPermissionDialog(false)}
-          onRequestSubmitted={() => setShowRequestPermissionDialog(false)}
+          onRequestSubmitted={() => {
+            setRequestSent(true)
+            setShowRequestPermissionDialog(false)
+          }}
         />
       )}
     </>