feat(sanity): add release error details to ReleaseDashboardDetails

Author: juice49

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  */

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} data-testid="release-error-details">
+              <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>
   )

packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseDetail.test.tsx

@@ -4,7 +4,11 @@ import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {mockUseRouterReturn} from '../../../../../../test/mocks/useRouter.mock'
 import {createTestProvider} from '../../../../../../test/testUtils/TestProvider'
-import {activeASAPRelease, publishedASAPRelease} from '../../../__fixtures__/release.fixture'
+import {
+  activeASAPRelease,
+  activeUndecidedErrorRelease,
+  publishedASAPRelease,
+} from '../../../__fixtures__/release.fixture'
 import {releasesUsEnglishLocaleBundle} from '../../../i18n'
 import {
   mockUseActiveReleases,
@@ -326,4 +330,25 @@ describe('after releases have loaded', () => {
       screen.getByText(activeASAPRelease.metadata.title)
     })
   })
+
+  describe('with release in error state', () => {
+    beforeEach(async () => {
+      mockUseActiveReleases.mockReset()
+
+      mockUseActiveReleases.mockReturnValue({
+        ...useActiveReleasesMockReturn,
+        data: [activeUndecidedErrorRelease],
+      })
+
+      mockUseRouterReturn.state = {
+        releaseId: getReleaseIdFromReleaseDocumentId(activeUndecidedErrorRelease._id),
+      }
+
+      await renderTest()
+    })
+
+    it('should show error message', () => {
+      screen.getByTestId('release-error-details')
+    })
+  })
 })