feat(sanity): add release error details to ReleaseDashboardDetails

sanity-io · Feb 5, 2025 · 3635eae · 3635eae
1 parent 1961e16
commit 3635eae
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/sanity/src/core/releases/i18n/resources.ts b/packages/sanity/src/core/releases/i18n/resources.ts
@@ -141,6 +141,8 @@ const releasesLocaleStrings = {
   /** Label when a release has been deleted by a different user */
   'deleted-release': "The '<strong>{{title}}</strong>' release has been deleted",
 
+  /** Title text displayed for technical error details */
+  'error-details-title': 'Error details',
   /** Title text when error during release update */
   'failed-edit-title': 'Failed to save changes',
   /** Title text displayed for releases that failed to publish  */

diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx
@@ -1,15 +1,20 @@
-import {PinFilledIcon, PinIcon} from '@sanity/icons'
+import {ErrorOutlineIcon, PinFilledIcon, PinIcon} from '@sanity/icons'
 import {
   Box,
   // Custom button with full radius used here
   // eslint-disable-next-line no-restricted-imports
   Button,
+  Card,
   Container,
   Flex,
   Stack,
+  Text,
 } from '@sanity/ui'
 import {useCallback} from 'react'
 
+import {ToneIcon} from '../../../../ui-components/toneIcon/ToneIcon'
+import {TextWithTone} from '../../../components/textWithTone/TextWithTone'
+import {Details} from '../../../form/components/Details'
 import {useTranslation} from '../../../i18n'
 import {usePerspective} from '../../../perspective/usePerspective'
 import {useSetPerspective} from '../../../perspective/useSetPerspective'
@@ -28,6 +33,7 @@ export function ReleaseDashboardDetails({release}: {release: ReleaseDocument}) {
   const {selectedReleaseId} = usePerspective()
   const setPerspective = useSetPerspective()
   const isSelected = releaseId === selectedReleaseId
+  const shouldDisplayError = release.state === 'active' && typeof release.error !== 'undefined'
 
   const handlePinRelease = useCallback(() => {
     if (isSelected) {
@@ -40,7 +46,7 @@ export function ReleaseDashboardDetails({release}: {release: ReleaseDocument}) {
   return (
     <Container width={3}>
       <Stack padding={3} paddingY={[4, 4, 5, 6]} space={[3, 3, 4, 5]}>
-        <Flex gap={1}>
+        <Flex gap={1} align="center">
           <Button
             disabled={state === 'archived' || state === 'published'}
             icon={isSelected ? PinFilledIcon : PinIcon}
@@ -54,11 +60,37 @@ export function ReleaseDashboardDetails({release}: {release: ReleaseDocument}) {
             tone={getReleaseTone(release)}
           />
           <ReleaseTypePicker release={release} />
+          {shouldDisplayError && (
+            <Flex gap={2} padding={2}>
+              <Text size={1}>
+                <ToneIcon icon={ErrorOutlineIcon} tone="critical" />
+              </Text>
+              <TextWithTone size={1} tone="critical">
+                {tRelease('failed-publish-title')}
+              </TextWithTone>
+            </Flex>
+          )}
         </Flex>
-
         <Box padding={2}>
           <ReleaseDetailsEditor release={release} />
         </Box>
+        {shouldDisplayError && (
+          <Card padding={4} radius={4} tone="critical">
+            <Flex gap={3}>
+              <Text size={1}>
+                <ErrorOutlineIcon />
+              </Text>
+              <Stack space={4}>
+                <Text>{tRelease('failed-publish-title')}</Text>
+                <Details title={tRelease('error-details-title')}>
+                  <Text>
+                    <code>{release.error?.message}</code>
+                  </Text>
+                </Details>
+              </Stack>
+            </Flex>
+          </Card>
+        )}
       </Stack>
     </Container>
   )