feat(core): releases history

packages/sanity/src/core/components/userAvatar/UserAvatar.tsx

@@ -5,14 +5,36 @@ import {
   type AvatarProps,
   type AvatarSize,
   type AvatarStatus,
+  Skeleton,
 } from '@sanity/ui'
+// eslint-disable-next-line camelcase
+import {getTheme_v2} from '@sanity/ui/theme'
 import {type ForwardedRef, forwardRef, useState} from 'react'
+import {css, styled} from 'styled-components'
 
 import {Tooltip} from '../../../ui-components'
 import {useUser} from '../../store'
 import {useUserColor} from '../../user-color'
 import {isRecord} from '../../util'
 
+interface AvatarSkeletonProps {
+  size?: AvatarSize
+}
+
+/**
+ * A loading skeleton element representing a user avatar
+ * @beta
+ */
+export const AvatarSkeleton = styled(Skeleton)<AvatarSkeletonProps>((props) => {
+  const theme = getTheme_v2(props.theme)
+  const size = props.size ?? 1
+  return css`
+    border-radius: 50%;
+    width: ${theme.avatar.sizes[size].size}px;
+    height: ${theme.avatar.sizes[size].size}px;
+  `
+})
+
 /**
  * @hidden
  * @beta */

packages/sanity/src/core/form/studio/tree-editing/components/layout/resizer/Resizable.tsx

@@ -8,6 +8,7 @@ export interface ResizableProps {
   minWidth: number
   maxWidth: number
   initialWidth: number
+  resizerPosition?: 'left' | 'right'
 }
 
 const Root = styled(Box)`
@@ -19,7 +20,15 @@ const Root = styled(Box)`
 export function Resizable(
   props: ResizableProps & BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as'>,
 ) {
-  const {as: forwardedAs, children, minWidth, maxWidth, initialWidth, ...restProps} = props
+  const {
+    as: forwardedAs,
+    children,
+    minWidth,
+    maxWidth,
+    initialWidth,
+    resizerPosition = 'right',
+    ...restProps
+  } = props
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementWidthRef = useRef<number>()
   const [targetWidth, setTargetWidth] = useState<number>(initialWidth)
@@ -31,12 +40,14 @@ export function Resizable(
   const handleResize = useCallback(
     (deltaX: number) => {
       const w = elementWidthRef.current
-
       if (!w) return
-
-      setTargetWidth(Math.min(Math.max(w - deltaX, minWidth), maxWidth))
+      if (resizerPosition === 'right') {
+        setTargetWidth(Math.min(Math.max(w - deltaX, minWidth), maxWidth))
+      } else {
+        setTargetWidth(Math.min(Math.max(w + deltaX, minWidth), maxWidth))
+      }
     },
-    [minWidth, maxWidth],
+    [minWidth, maxWidth, resizerPosition],
   )
 
   const style = useMemo(
@@ -46,8 +57,13 @@ export function Resizable(
 
   return (
     <Root as={forwardedAs} {...restProps} ref={setElement} style={style}>
+      {resizerPosition === 'left' && (
+        <Resizer onResize={handleResize} onResizeStart={handleResizeStart} position="left" />
+      )}
       {children}
-      <Resizer onResize={handleResize} onResizeStart={handleResizeStart} position="right" />
+      {resizerPosition === 'right' && (
+        <Resizer onResize={handleResize} onResizeStart={handleResizeStart} position="right" />
+      )}
     </Root>
   )
 }

packages/sanity/src/core/preview/utils/applyMendozaPatch.ts

@@ -9,10 +9,10 @@ function omitRev(document: SanityDocument | undefined) {
   return doc
 }
 
-export function applyMendozaPatch(
-  document: SanityDocument | undefined,
+export function applyMendozaPatch<T extends SanityDocument | undefined>(
+  document: T,
   patch: RawPatch,
-): SanityDocument | undefined {
+): T {
   const next = applyPatch(omitRev(document), patch)
   return next === null ? undefined : next
 }

packages/sanity/src/core/releases/__fixtures__/release.fixture.ts

@@ -1,6 +1,7 @@
 import {type ReleaseDocument} from '../store/types'
 
 export const activeScheduledRelease: ReleaseDocument = {
+  _rev: 'activeRev',
   _id: '_.releases.activeRelease',
   _type: 'system.release',
   createdBy: '',
@@ -17,6 +18,7 @@ export const activeScheduledRelease: ReleaseDocument = {
 }
 
 export const scheduledRelease: ReleaseDocument = {
+  _rev: 'scheduledRev',
   _id: '_.releases.scheduledRelease',
   _type: 'system.release',
   createdBy: '',
@@ -34,6 +36,7 @@ export const scheduledRelease: ReleaseDocument = {
 }
 
 export const activeASAPRelease: ReleaseDocument = {
+  _rev: 'activeASAPRev',
   _id: '_.releases.activeASAPRelease',
   _type: 'system.release',
   createdBy: '',
@@ -49,6 +52,7 @@ export const activeASAPRelease: ReleaseDocument = {
 }
 
 export const archivedScheduledRelease: ReleaseDocument = {
+  _rev: 'archivedRev',
   _id: '_.releases.archivedRelease',
   _type: 'system.release',
   createdBy: '',
@@ -65,6 +69,7 @@ export const archivedScheduledRelease: ReleaseDocument = {
 }
 
 export const publishedASAPRelease: ReleaseDocument = {
+  _rev: 'publishedRev',
   _id: '_.releases.publishedRelease',
   _type: 'system.release',
   createdBy: '',
@@ -82,6 +87,7 @@ export const publishedASAPRelease: ReleaseDocument = {
 }
 
 export const activeUndecidedRelease: ReleaseDocument = {
+  _rev: 'undecidedRev',
   _id: '_.releases.undecidedRelease',
   _type: 'system.release',
   createdBy: '',

packages/sanity/src/core/releases/hooks/__tests__/utils.test.ts

@@ -17,6 +17,7 @@ function createReleaseMock(
   const name = getReleaseIdFromReleaseDocumentId(id)
   return {
     _id: id,
+    _rev: 'rev',
     _type: RELEASE_DOCUMENT_TYPE,
     _createdAt: new Date().toISOString(),
     _updatedAt: new Date().toISOString(),

packages/sanity/src/core/releases/i18n/resources.ts

@@ -39,6 +39,37 @@ const releasesLocaleStrings = {
   /** Header for the dialog confirming the archive of a release */
   'archive-dialog.confirm-archive-header':
     "Are you sure you want to archive the '{{title}}' release?",
+
+  /* The text for the activity event when a document is added to a release */
+  'activity.event.add-document': 'added a document version',
+  /* The text for the activity event when the release is archived */
+  'activity.event.archive': 'archived the <strong>{{releaseTitle}}</strong> release',
+  /* The text for the activity event when the release is created */
+  'activity.event.create':
+    'created the <strong>{{releaseTitle}}</strong> release <ScheduleTarget>targeting </ScheduleTarget>',
+  /* The text for the activity event when a document is removed from a release */
+  'activity.event.discard-document': 'discarded a document version',
+  'activity.event.edit': 'set release time to <ScheduleTarget></ScheduleTarget>',
+  /**The text to display in the changes when the release type changes to asap */
+  'activity.event.edit-time-asap': 'immediately',
+  /**The text to display in the changes when the release type changes to undecided */
+  'activity.event.edit-time-undecided': 'never',
+  /* The text for the activity event when the release is published */
+  'activity.event.publish': 'published the <strong>{{releaseTitle}}</strong> release',
+  /* The text for the activity event when the release is scheduled */
+  'activity.event.schedule': 'marked as scheduled',
+  /** The text for the activity event when the release is unarchived */
+  'activity.event.unarchive': 'unarchived the <strong>{{releaseTitle}}</strong> release',
+  /** The text for the activity event when the release is unscheduled */
+  'activity.event.unschedule': 'marked as unscheduled',
+  /** The loading text for when releases are loading */
+  'activity.panel.loading': 'Loading release activity',
+  /** The title for the activity panel shown in the releases detail screen */
+  'activity.panel.title': 'Activity',
+
+  /** Title for the dialog confirming the archive of a release */
+  'archive-dialog.confirm-archive-title':
+    "Are you sure you want to archive the <strong>'{{title}}'</strong> release?",
   /** Description for the dialog confirming the archive of a release with one document */
   'archive-dialog.confirm-archive-description_one': 'This will archive 1 document version.',
   /** Description for the dialog confirming the archive of a release with more than one document */
@@ -111,7 +142,8 @@ const releasesLocaleStrings = {
   'footer.status.edited': 'Edited',
   /**The text that will be shown in the footer to indicate the time the release was published */
   'footer.status.published': 'Published',
-
+  /**The text that will be shown in the footer to indicate the time the release was unarchived */
+  'footer.status.unarchived': 'Unarchived',
   /** Label text for the loading state whilst release is being loaded */
   'loading-release': 'Loading release',
 

packages/sanity/src/core/releases/store/types.ts

@@ -1,3 +1,4 @@
+import {type SanityDocument} from '@sanity/types'
 import {type Dispatch} from 'react'
 import {type Observable} from 'rxjs'
 
@@ -26,7 +27,7 @@ export type ReleaseFinalDocumentState = {
  * TODO: When made `beta`, update the PublishDocumentVersionEvent to use this type
  * @internal
  */
-export interface ReleaseDocument {
+export interface ReleaseDocument extends SanityDocument {
   /**
    * typically
    * _.releases.<name>
@@ -35,10 +36,13 @@ export interface ReleaseDocument {
   _type: typeof RELEASE_DOCUMENT_TYPE
   _createdAt: string
   _updatedAt: string
+  _rev: string
   /**
    * The same as the last path segment of the _id, added by the backend.
    */
+  // TODO: Remove this, we want to force the use of `getReleaseIdFromReleaseDocumentId`
   name: string
+  // TODO: Remove this is not part of the API response
   createdBy: string
   state: ReleaseState
   finalDocumentStates?: ReleaseFinalDocumentState[]
@@ -63,6 +67,7 @@ export type EditableReleaseDocument = Omit<
   PartialExcept<ReleaseDocument, '_id'>,
   'metadata' | '_type'
 > & {
+  _id: string
   metadata: Partial<ReleaseDocument['metadata']>
 }
 

packages/sanity/src/core/releases/tool/components/ReleaseDocumentPreview.tsx

@@ -3,6 +3,7 @@ import {Card} from '@sanity/ui'
 import {type ForwardedRef, forwardRef, useMemo} from 'react'
 import {IntentLink} from 'sanity/router'
 
+import {type PreviewLayoutKey} from '../../../components/previews/types'
 import {DocumentPreviewPresence} from '../../../presence'
 import {SanityDefaultPreview} from '../../../preview/components/SanityDefaultPreview'
 import {getPublishedId} from '../../../util/draftUtils'
@@ -17,6 +18,8 @@ interface ReleaseDocumentPreviewProps {
   isLoading: boolean
   releaseState?: ReleaseState
   documentRevision?: string
+  hasValidationError?: boolean
+  layout?: PreviewLayoutKey
 }
 
 export function ReleaseDocumentPreview({
@@ -27,6 +30,8 @@ export function ReleaseDocumentPreview({
   isLoading,
   releaseState,
   documentRevision,
+  layout,
+  hasValidationError,
 }: ReleaseDocumentPreviewProps) {
   const documentPresence = useDocumentPresence(documentId)
 
@@ -78,7 +83,12 @@ export function ReleaseDocumentPreview({
 
   return (
     <Card tone="inherit" as={LinkComponent} radius={2} data-as="a">
-      <SanityDefaultPreview {...previewValues} status={previewPresence} isPlaceholder={isLoading} />
+      <SanityDefaultPreview
+        {...previewValues}
+        status={previewPresence}
+        isPlaceholder={isLoading}
+        layout={layout}
+      />
     </Card>
   )
 }

packages/sanity/src/core/releases/tool/components/StatusItem.tsx

@@ -1,11 +1,11 @@
 import {Box, Card, Flex, Text} from '@sanity/ui'
 import {type ReactNode} from 'react'
 
-export function StatusItem(props: {avatar?: ReactNode; text: ReactNode}) {
-  const {avatar, text} = props
+export function StatusItem(props: {avatar?: ReactNode; text: ReactNode; testId?: string}) {
+  const {avatar, text, testId} = props
 
   return (
-    <Card>
+    <Card data-testid={testId}>
       <Flex>
         {avatar && (
           <Box padding={1}>

packages/sanity/src/core/releases/tool/components/Table/Table.tsx

@@ -195,7 +195,7 @@ const TableInner = <TableData, AdditionalRowTableData>({
               height: `${datum.virtualRow.size}px`,
               transform: `translateY(${datum.virtualRow.start - datum.index * datum.virtualRow.size}px)`,
               paddingInline: `max(
-                calc((100vw - var(--maxInlineSize)) / 2),
+                calc((100% - var(--maxInlineSize)) / 2),
                 var(--paddingInline)
               )`,
             }}

packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx

@@ -83,7 +83,7 @@ export const TableHeader = ({headers, searchDisabled}: TableHeaderProps) => {
         as="tr"
         style={{
           paddingInline: `max(
-          calc((100vw - var(--maxInlineSize)) / 2),
+          calc((100% - var(--maxInlineSize)) / 2),
           var(--paddingInline)
         )`,
         }}