feat(sanity): update inputs 2

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -1184,20 +1184,14 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'release.deleted-tooltip': 'This release has been deleted',
   /** Title for creating releases dialog */
   'release.dialog.create.title': 'Create release',
-  /** Title for editing releases dialog */
-  'release.dialog.edit.title': 'Edit release',
-  /** Label for the description form field when creating releases */
-  'release.form.description': 'Description',
-  /** Placeholder for the icon and colour picker */
-  'release.form.search-icon': 'Search icons',
-  /** Tooltip label for the icon display */
-  'release.form.search-icon-tooltip': 'Select release icon',
-  /** Label for the title form field when creating releases */
-  'release.form.title': 'Title',
+  /** The placeholder text when the release doesn't have a description */
+  'release.form.placeholer-describe-release': 'Describe the release…',
   /** Tooltip for button to hide release visibility */
   'release.layer.hide': 'Hide release',
   /** Tooltip for releases navigation in navbar */
   'release.navbar.tooltip': 'Releases',
+  /** The placeholder text when the release doesn't have a title */
+  'release.placeholder-untitled-release': 'Untitled release',
   /** Label for the release type 'as soon as possible' */
   'release.type.asap': 'ASAP',
   /** Label for the release type 'at time', meaning it's a release with a scheduled date */

packages/sanity/src/core/releases/components/dialog/ReleaseDetailsDialog.tsx

@@ -96,8 +96,7 @@ export function ReleaseDetailsDialog(props: ReleaseDetailsDialogProps): JSX.Elem
     setValue(changedValue)
   }, [])
 
-  const dialogTitle =
-    formAction === 'edit' ? t('release.dialog.edit.title') : t('release.dialog.create.title')
+  const dialogTitle = t('release.dialog.create.title')
 
   const isReleaseScheduled =
     release && (release.state === 'scheduled' || release.state === 'scheduling')
@@ -115,7 +114,7 @@ export function ReleaseDetailsDialog(props: ReleaseDetailsDialogProps): JSX.Elem
         <Flex justify="flex-end" paddingTop={5}>
           <Button
             size="large"
-            disabled={!value.metadata?.title?.trim() || isSubmitting}
+            disabled={isSubmitting}
             iconRight={ArrowRightIcon}
             type="submit"
             text={dialogTitle}

packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx

@@ -1,26 +1,16 @@
 import {type FormNodeValidation} from '@sanity/types'
-import {Flex, Stack, Text, TextArea, TextInput} from '@sanity/ui'
+import {Flex, Stack} from '@sanity/ui'
 import {useCallback, useMemo, useState} from 'react'
 
 import {Button} from '../../../../ui-components'
 import {MONTH_PICKER_VARIANT} from '../../../../ui-components/inputs/DateInputs/calendar/Calendar'
 import {type CalendarLabels} from '../../../../ui-components/inputs/DateInputs/calendar/types'
 import {DateTimeInput} from '../../../../ui-components/inputs/DateInputs/DateTimeInput'
-import {FormFieldHeaderText} from '../../../form'
 import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
 import {useDateTimeFormat} from '../../../hooks'
 import {useTranslation} from '../../../i18n'
-import {
-  type EditableReleaseDocument,
-  type ReleaseDocument,
-  type ReleaseType,
-} from '../../../store/release/types'
-
-const DEFAULT_METADATA: ReleaseDocument['metadata'] = {
-  title: '',
-  description: '',
-  releaseType: 'asap',
-}
+import {type EditableReleaseDocument, type ReleaseType} from '../../../store/release/types'
+import {ReleaseInputsForm} from './ReleaseInputsForm'
 
 /** @internal */
 export function ReleaseForm(props: {
@@ -29,16 +19,15 @@ export function ReleaseForm(props: {
   isReleaseScheduled?: boolean
 }): JSX.Element {
   const {onChange, value, isReleaseScheduled = false} = props
-  const {title, description, releaseType} = value.metadata || {}
+  const {releaseType} = value.metadata || {}
   const publishAt = value.publishAt
   // derive the action from whether the initial value prop has a slug
   // only editing existing releases will provide a value.slug
   const {t} = useTranslation()
 
   const dateFormatter = useDateTimeFormat()
 
-  // todo: figure out if these are needed
-  const [titleErrors, setTitleErrors] = useState<FormNodeValidation[]>([])
+  // todo: you can create a release without a title, but not without a date if the type is scheduled
   const [dateErrors, setDateErrors] = useState<FormNodeValidation[]>([])
 
   const [buttonReleaseType, setButtonReleaseType] = useState<ReleaseType>(releaseType ?? 'asap')
@@ -49,28 +38,6 @@ export function ReleaseForm(props: {
     publishAt ? dateFormatter.format(new Date(publishAt)) : undefined,
   )
 
-  const handleReleaseTitleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const pickedTitle = event.target.value
-      onChange({
-        ...value,
-        metadata: {...value.metadata, title: pickedTitle},
-      })
-    },
-    [onChange, value],
-  )
-
-  const handleBundleDescriptionChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const {value: descriptionValue} = event.target
-
-      if (typeof descriptionValue !== 'undefined') {
-        onChange({...value, metadata: {...value.metadata, description: descriptionValue}})
-      }
-    },
-    [onChange, value],
-  )
-
   const handleBundlePublishAtChange = useCallback(
     (date: Date | null) => {
       setInputValue(date ? dateFormatter.format(date) : undefined)
@@ -90,6 +57,20 @@ export function ReleaseForm(props: {
     [onChange, value],
   )
 
+  const handleTitleDescriotionChange = useCallback(
+    (upDatedRlease: EditableReleaseDocument) => {
+      onChange({
+        ...value,
+        metadata: {
+          ...value.metadata,
+          title: upDatedRlease.metadata.title,
+          description: upDatedRlease.metadata.description,
+        },
+      })
+    },
+    [onChange, value],
+  )
+
   return (
     <Stack space={5}>
       <Stack space={2} style={{margin: -1}}>
@@ -130,27 +111,7 @@ export function ReleaseForm(props: {
           />
         )}
       </Stack>
-
-      <Stack space={3}>
-        <FormFieldHeaderText title={t('release.form.title')} validation={titleErrors} />
-        <TextInput
-          data-testid="release-form-title"
-          onChange={handleReleaseTitleChange}
-          customValidity={titleErrors.length > 0 ? 'error' : undefined}
-          value={title || ''}
-        />
-      </Stack>
-
-      <Stack space={3}>
-        <Text size={1} weight="medium">
-          {t('release.form.description')}
-        </Text>
-        <TextArea
-          onChange={handleBundleDescriptionChange}
-          value={description || ''}
-          data-testid="release-form-description"
-        />
-      </Stack>
+      <ReleaseInputsForm release={value} onChange={handleTitleDescriotionChange} />
     </Stack>
   )
 }