feat(sanity): add release types (#7619)

sanity-io · Oct 17, 2024 · 1fbe95f · 1fbe95f
1 parent ea825b6
commit 1fbe95f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 16 deletions.
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -1165,6 +1165,12 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'release.form.search-icon-tooltip': 'Select release icon',
   /** Label for the title form field when creating releases */
   'release.form.title': 'Title',
+  /** Label for the release type 'as soon as possible' */
+  'release.form.type.asap': 'ASAP',
+  /** Label for the release type 'at time', meaning it's a release with a scheduled date */
+  'release.form.type.scheduled': 'At time',
+  /** Label for the release type 'undecided' */
+  'release.form.type.undecided': 'Undecided',
   /** Tooltip for the dropdown to show all versions of document */
   'release.version-list.tooltip': 'See all document versions',
 

diff --git a/packages/sanity/src/core/index.ts b/packages/sanity/src/core/index.ts
@@ -22,6 +22,7 @@ export * from './i18n'
 export * from './presence'
 export * from './preview'
 export {
+  DEFAULT_RELEASE_TYPE,
   getDocumentIsInPerspective,
   LATEST,
   ReleaseActions,

diff --git a/packages/sanity/src/core/releases/components/dialog/ReleaseDetailsDialog.tsx b/packages/sanity/src/core/releases/components/dialog/ReleaseDetailsDialog.tsx
@@ -2,7 +2,7 @@ import {ArrowRightIcon} from '@sanity/icons'
 import {useTelemetry} from '@sanity/telemetry/react'
 import {Box, Flex, useToast} from '@sanity/ui'
 import {type FormEvent, useCallback, useState} from 'react'
-import {type FormBundleDocument, useTranslation} from 'sanity'
+import {DEFAULT_RELEASE_TYPE, type FormBundleDocument, useTranslation} from 'sanity'
 
 import {Button, Dialog} from '../../../../ui-components'
 import {type BundleDocument} from '../../../store/bundles/types'
@@ -40,6 +40,7 @@ export function ReleaseDetailsDialog(props: ReleaseDetailsDialogProps): JSX.Elem
       hue: bundle?.hue || 'gray',
       icon: bundle?.icon || 'cube',
       publishedAt: bundle?.publishedAt,
+      releaseType: bundle?.releaseType || DEFAULT_RELEASE_TYPE,
     } as const
   })
   const [isSubmitting, setIsSubmitting] = useState(false)

diff --git a/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx b/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx
@@ -10,10 +10,11 @@ import {
   useTranslation,
 } from 'sanity'
 
+import {Button} from '../../../../ui-components'
 import {type CalendarLabels} from '../../../../ui-components/inputs/DateInputs/calendar/types'
 import {DateTimeInput} from '../../../../ui-components/inputs/DateInputs/DateTimeInput'
 import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
-import {type BundleDocument} from '../../../store/bundles/types'
+import {type BundleDocument, type releaseType} from '../../../store/bundles/types'
 import {ReleaseIconEditorPicker, type ReleaseIconEditorPickerValue} from './ReleaseIconEditorPicker'
 
 interface BaseBundleDocument extends Partial<BundleDocument> {
@@ -33,7 +34,7 @@ export function ReleaseForm(props: {
   value: FormBundleDocument
 }): JSX.Element {
   const {onChange, value} = props
-  const {title, description, icon, hue, publishedAt} = value
+  const {title, description, icon, hue, publishedAt, releaseType} = value
   // derive the action from whether the initial value prop has a slug
   // only editing existing bundles will provide a value.slug
   const {t} = useTranslation()
@@ -44,6 +45,8 @@ export function ReleaseForm(props: {
   const [titleErrors, setTitleErrors] = useState<FormNodeValidation[]>([])
   const [dateErrors, setDateErrors] = useState<FormNodeValidation[]>([])
 
+  const [buttonReleaseType, setButtonReleaseType] = useState<releaseType>(releaseType ?? 'asap')
+
   const {t: coreT} = useTranslation()
   const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(coreT), [coreT])
   const [inputValue, setInputValue] = useState<string | undefined>(
@@ -95,11 +98,54 @@ export function ReleaseForm(props: {
     [onChange, value],
   )
 
+  const handleButtonReleaseTypeChange = useCallback(
+    (pickedReleaseType: releaseType) => {
+      setButtonReleaseType(pickedReleaseType)
+      onChange({...value, releaseType: pickedReleaseType})
+    },
+    [onChange, value],
+  )
+
   return (
     <Stack space={5}>
       <Flex>
         <ReleaseIconEditorPicker onChange={handleIconValueChange} value={iconValue} />
       </Flex>
+
+      <Stack space={2} style={{margin: -1}}>
+        <Flex gap={1}>
+          <Button
+            mode="bleed"
+            onClick={() => handleButtonReleaseTypeChange('asap')}
+            selected={buttonReleaseType === 'asap'}
+            text={t('release.form.type.asap')}
+          />
+          <Button
+            mode="bleed"
+            onClick={() => handleButtonReleaseTypeChange('scheduled')}
+            selected={buttonReleaseType === 'scheduled'}
+            text={t('release.form.type.scheduled')}
+          />
+          <Button
+            mode="bleed"
+            onClick={() => handleButtonReleaseTypeChange('undecided')}
+            selected={buttonReleaseType === 'undecided'}
+            text={t('release.form.type.undecided')}
+          />
+        </Flex>
+
+        {buttonReleaseType === 'scheduled' && (
+          <DateTimeInput
+            selectTime
+            onChange={handleBundlePublishAtChange}
+            calendarLabels={calendarLabels}
+            value={value.publishedAt ? new Date(value.publishedAt) : undefined}
+            inputValue={inputValue || ''}
+            constrainSize={false}
+          />
+        )}
+      </Stack>
+
       <Stack space={3}>
         <FormFieldHeaderText title={t('release.form.title')} validation={titleErrors} />
         <TextInput
@@ -120,19 +166,6 @@ export function ReleaseForm(props: {
           data-testid="release-form-description"
         />
       </Stack>
-
-      <Stack space={3}>
-        <FormFieldHeaderText title="Schedule for publishing at" validation={dateErrors} />
-
-        <DateTimeInput
-          selectTime
-          onChange={handleBundlePublishAtChange}
-          calendarLabels={calendarLabels}
-          value={value.publishedAt ? new Date(value.publishedAt) : undefined}
-          inputValue={inputValue || ''}
-          constrainSize={false}
-        />
-      </Stack>
     </Stack>
   )
 }
diff --git a/packages/sanity/src/core/releases/components/dialog/__tests__/ReleaseDetailsDialog.test.tsx b/packages/sanity/src/core/releases/components/dialog/__tests__/ReleaseDetailsDialog.test.tsx
@@ -168,6 +168,8 @@ describe('ReleaseDetailsDialog', () => {
         icon,
         title: 'New title',
         description: 'New description',
+        publishedAt: undefined,
+        releaseType: 'asap',
       })
     })
 

diff --git a/packages/sanity/src/core/releases/util/const.ts b/packages/sanity/src/core/releases/util/const.ts
@@ -10,3 +10,8 @@ export const LATEST = {
   icon: undefined,
   hue: 'gray',
 } as const
+
+/**
+ * @internal
+ */
+export const DEFAULT_RELEASE_TYPE = 'asap'
diff --git a/packages/sanity/src/core/store/bundles/types.ts b/packages/sanity/src/core/store/bundles/types.ts
@@ -8,6 +8,9 @@ import {type PartialExcept} from '../../util'
 import {type MetadataWrapper} from './createBundlesMetadataAggregator'
 import {type bundlesReducerAction, type bundlesReducerState} from './reducer'
 
+/** @internal */
+export type releaseType = 'asap' | 'scheduled' | 'undecided'
+
 /**
  * @internal
  */
@@ -22,6 +25,7 @@ export interface BundleDocument
   publishedAt?: string
   archivedAt?: string
   publishedBy?: string
+  releaseType: releaseType
 }
 
 /**