refactor(sanity, release): rename interface focused components from b…

…undle to release (#7469)

* refactor(sanity): update bundles metada to releases metadata

* refactor(sanity): rename bundlebadge to releasebadge

* refactor(sanity): rename bundlesMenu to ReleasesMenu

* refactor(sanity): rename BundleDetailsDialog to ReleaseDetailDialog

* refactor(sanity): rename bundleForm to ReleaseForm

* refactor(sanity): rename ReleaseDetailsDialog test

* refactor(sanity): rename BundleIconEditorPicker to ReleaseIconEditorPicker

* fix(sanity): fix issues with renaming within ReleaseDetailsDialog

* refactor(sanity): rename BundleActions to ReleaseActions

* refactor(sanity): fix translation

* refactor(sanity): remove workshop story

* refactor(sanity): rename bundlePerspective to perspective on getPReviewStateObservable

* refactor(sanity): rename BundleMenuButton to perspective on ReleaseMenuButton

* test(sanity): fix test for ReleaseMenuButton

* test(sanity): clean up (remove duplicates and clean up button)

* chore(sanity): remove unused bundle translations

packages/sanity/src/_singletons/context/ReleasesMetadataContext.ts

@@ -0,0 +1,12 @@
+import {createContext} from 'sanity/_createContext'
+
+import type {ReleasesMetadataContextValue} from '../../core/releases/contexts/ReleasesMetadataProvider'
+
+/**
+ * @internal
+ * @hidden
+ */
+export const ReleasesMetadataContext = createContext<ReleasesMetadataContextValue | null>(
+  'sanity/_singletons/context/releases-metadata',
+  null,
+)

packages/sanity/src/_singletons/index.ts

@@ -1,6 +1,5 @@
 export * from './context/ActiveWorkspaceMatcherContext'
 export * from './context/AddonDatasetContext'
-export * from './context/BundlesMetadataContext'
 export * from './context/CalendarContext'
 export * from './context/ChangeIndicatorTrackerContexts'
 export * from './context/ColorSchemeSetValueContext'
@@ -44,6 +43,7 @@ export * from './context/PresenceTrackerContexts'
 export * from './context/PreviewCardContext'
 export * from './context/ReferenceInputOptionsContext'
 export * from './context/ReferenceItemRefContext'
+export * from './context/ReleasesMetadataContext'
 export * from './context/ReleasesTableContext'
 export * from './context/ResourceCacheContext'
 export * from './context/ReviewChangesContext'

packages/sanity/src/core/bundles/components/BundleBadge.tsx → packages/sanity/src/core/bundles/components/ReleaseBadge.tsx

@@ -27,7 +27,7 @@ const BadgeRoot = styled(Flex)<{
 /**
  * @internal
  */
-export function BundleBadge(
+export function ReleaseBadge(
   props: Partial<
     BundleDocument & {
       icon: IconSymbol
@@ -45,14 +45,14 @@ export function BundleBadge(
     <BadgeRoot
       gap={padding}
       padding={padding}
-      data-testid={`bundle-badge-color-${hue}`}
+      data-testid={`release-badge-color-${hue}`}
       $hue={hue}
       $isDisabled={isDisabled}
     >
       {icon && (
         <Box flex="none">
           <Text size={1}>
-            <Icon data-testid={`bundle-badge-icon-${icon.toString()}`} symbol={icon} />
+            <Icon data-testid={`release-badge-icon-${icon.toString()}`} symbol={icon} />
           </Text>
         </Box>
       )}

packages/sanity/src/core/bundles/components/BundlesMenu.tsx → packages/sanity/src/core/bundles/components/ReleasesMenu.tsx

@@ -11,7 +11,7 @@ import {useBundles} from '../../store/bundles/useBundles'
 import {usePerspective} from '../hooks'
 import {LATEST} from '../util/const'
 import {isDraftOrPublished} from '../util/util'
-import {BundleBadge} from './BundleBadge'
+import {ReleaseBadge} from './ReleaseBadge'
 
 const StyledMenu = styled(Menu)`
   min-width: 200px;
@@ -33,7 +33,7 @@ interface BundleListProps {
 /**
  * @internal
  */
-export const BundlesMenu = memo(function BundlesMenu(props: BundleListProps): ReactElement {
+export const ReleasesMenu = memo(function ReleasesMenu(props: BundleListProps): ReactElement {
   const {bundles, loading, actions, button, perspective} = props
   const {deletedBundles} = useBundles()
   const {currentGlobalBundle, setPerspective} = usePerspective(perspective)
@@ -64,9 +64,9 @@ export const BundlesMenu = memo(function BundlesMenu(props: BundleListProps): Re
     <>
       <MenuButton
         button={button}
-        id="bundle-menu"
+        id="release-menu"
         menu={
-          <StyledMenu data-testid="bundle-menu">
+          <StyledMenu data-testid="release-menu">
             {loading ? (
               <Flex padding={4} justify="center" data-testid="spinner">
                 <Spinner muted />
@@ -99,11 +99,11 @@ export const BundlesMenu = memo(function BundlesMenu(props: BundleListProps): Re
                         >
                           <Tooltip
                             disabled={!isBundleDeleted(bundle._id)}
-                            content={t('bundle.deleted-tooltip')}
+                            content={t('release.deleted-tooltip')}
                             placement="bottom-start"
                           >
                             <Flex>
-                              <BundleBadge
+                              <ReleaseBadge
                                 hue={bundle.hue}
                                 icon={bundle.icon}
                                 padding={2}

packages/sanity/src/core/bundles/components/__tests__/BundlesMenu.test.tsx → packages/sanity/src/core/bundles/components/__tests__/ReleasesMenu.test.tsx

@@ -8,7 +8,7 @@ import {createTestProvider} from '../../../../../test/testUtils/TestProvider'
 import {Button} from '../../../../ui-components'
 import {usePerspective} from '../../hooks/usePerspective'
 import {LATEST} from '../../util/const'
-import {BundlesMenu} from '../BundlesMenu'
+import {ReleasesMenu} from '../ReleasesMenu'
 
 jest.mock('../../hooks/usePerspective', () => ({
   usePerspective: jest.fn().mockReturnValue({
@@ -27,7 +27,7 @@ jest.mock('../../../store/bundles/useBundles', () => ({
 
 const mockUseBundles = useBundles as jest.Mock<typeof useBundles>
 
-describe('BundlesMenu', () => {
+describe('ReleasesMenu', () => {
   const mockUsePerspective = usePerspective as jest.Mock
   const ButtonTest = <Button text="Button Test" />
   const mockBundles: BundleDocument[] = [
@@ -64,7 +64,6 @@ describe('BundlesMenu', () => {
       _type: 'release',
       hue: 'red',
       _id: 'f6b2c2cc-1732-4465-bfb3-dd205b5d78e9',
-      _id: 'summer-drop',
       authorId: '',
     },
   ]
@@ -75,7 +74,7 @@ describe('BundlesMenu', () => {
 
   it('should render loading spinner when loading is true', async () => {
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={[]} loading />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={[]} loading />, {
       wrapper,
     })
 
@@ -84,14 +83,14 @@ describe('BundlesMenu', () => {
     fireEvent.click(screen.getByRole('button', {name: 'Button Test'}))
 
     act(() => {
-      expect(screen.getByTestId('bundle-menu')).toBeInTheDocument()
+      expect(screen.getByTestId('release-menu')).toBeInTheDocument()
       expect(screen.getByTestId('spinner')).toBeInTheDocument()
     })
   })
 
   it('should render latest bundle menu item when bundles are null', async () => {
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={null} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={null} loading={false} />, {
       wrapper,
     })
 
@@ -109,7 +108,7 @@ describe('BundlesMenu', () => {
       ...bundle,
       archivedAt: '2024-07-29T01:49:56.066Z',
     }))
-    render(<BundlesMenu button={ButtonTest} bundles={archivedBundles} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={archivedBundles} loading={false} />, {
       wrapper,
     })
 
@@ -128,7 +127,7 @@ describe('BundlesMenu', () => {
     })
 
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={[]} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={[]} loading={false} />, {
       wrapper,
     })
 
@@ -147,7 +146,7 @@ describe('BundlesMenu', () => {
     })
 
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
       wrapper,
     })
 
@@ -161,7 +160,7 @@ describe('BundlesMenu', () => {
 
   it('should render bundle menu items when bundles are provided', async () => {
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
       wrapper,
     })
 
@@ -182,7 +181,7 @@ describe('BundlesMenu', () => {
     })
 
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
       wrapper,
     })
 
@@ -195,11 +194,11 @@ describe('BundlesMenu', () => {
   })
 
   it('should render actions when actions prop is provided', async () => {
-    const actions = <Button>Actions</Button>
+    const actions = <Button text="Actions" />
 
     const wrapper = await createTestProvider()
     render(
-      <BundlesMenu button={ButtonTest} bundles={mockBundles} loading={false} actions={actions} />,
+      <ReleasesMenu button={ButtonTest} bundles={mockBundles} loading={false} actions={actions} />,
       {
         wrapper,
       },
@@ -221,13 +220,12 @@ describe('BundlesMenu', () => {
         'mock-deleted-bundle': {
           _id: 'mock-deleted-bundle',
           _type: 'release',
-          _id: 'mock-deleted-bundle',
           title: 'Mock Deleted Bundle',
         } as BundleDocument,
       },
     })
     const wrapper = await createTestProvider()
-    render(<BundlesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
+    render(<ReleasesMenu button={ButtonTest} bundles={mockBundles} loading={false} />, {
       wrapper,
     })
 
@@ -247,21 +245,19 @@ describe('BundlesMenu', () => {
         'mock-deleted-bundle': {
           _id: 'mock-deleted-bundle',
           _type: 'release',
-          _id: 'mock-deleted-bundle',
           title: 'Mock Deleted Bundle',
         } as BundleDocument,
       },
     })
     const wrapper = await createTestProvider()
     render(
-      <BundlesMenu
+      <ReleasesMenu
         button={ButtonTest}
         bundles={[
           ...mockBundles,
           {
             _id: 'mock-deleted-bundle',
             _type: 'release',
-            _id: 'mock-deleted-bundle',
             title: 'Mock Deleted Bundle',
           } as BundleDocument,
         ]}

packages/sanity/src/core/bundles/components/dialog/BundleDetailsDialog.tsx → packages/sanity/src/core/bundles/components/dialog/ReleaseDetailsDialog.tsx

@@ -14,16 +14,16 @@ import {
 } from '../../__telemetry__/releases.telemetry'
 import {usePerspective} from '../../hooks/usePerspective'
 import {createReleaseId} from '../../util/createReleaseId'
-import {BundleForm} from './BundleForm'
+import {ReleaseForm} from './ReleaseForm'
 
-interface BundleDetailsDialogProps {
+interface ReleaseDetailsDialogProps {
   onCancel: () => void
   onSubmit: () => void
   bundle?: BundleDocument
   origin?: OriginInfo['origin']
 }
 
-export function BundleDetailsDialog(props: BundleDetailsDialogProps): JSX.Element {
+export function ReleaseDetailsDialog(props: ReleaseDetailsDialogProps): JSX.Element {
   const {onCancel, onSubmit, bundle, origin} = props
   const toast = useToast()
   const {createBundle, updateBundle} = useBundleOperations()
@@ -88,13 +88,13 @@ export function BundleDetailsDialog(props: BundleDetailsDialogProps): JSX.Elemen
   }, [])
 
   const dialogTitle =
-    formAction === 'edit' ? t('bundle.dialog.edit.title') : t('bundle.dialog.create.title')
+    formAction === 'edit' ? t('release.dialog.edit.title') : t('release.dialog.create.title')
 
   return (
     <Dialog header={dialogTitle} id="create-bundle-dialog" onClose={onCancel} width={1}>
       <form onSubmit={handleOnSubmit}>
         <Box padding={4}>
-          <BundleForm onChange={handleOnChange} value={value} />
+          <ReleaseForm onChange={handleOnChange} value={value} />
         </Box>
         <Flex justify="flex-end" paddingTop={5}>
           <Button

packages/sanity/src/core/bundles/components/dialog/BundleForm.tsx → packages/sanity/src/core/bundles/components/dialog/ReleaseForm.tsx

@@ -14,7 +14,7 @@ import {type CalendarLabels} from '../../../../ui-components/inputs/DateInputs/c
 import {DateTimeInput} from '../../../../ui-components/inputs/DateInputs/DateTimeInput'
 import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
 import {type BundleDocument} from '../../../store/bundles/types'
-import {BundleIconEditorPicker, type BundleIconEditorPickerValue} from './BundleIconEditorPicker'
+import {ReleaseIconEditorPicker, type ReleaseIconEditorPickerValue} from './ReleaseIconEditorPicker'
 
 interface BaseBundleDocument extends Partial<BundleDocument> {
   hue: ColorHueKey
@@ -28,7 +28,7 @@ export const DEFAULT_BUNDLE: BaseBundleDocument = {
   icon: 'cube',
 }
 
-export function BundleForm(props: {
+export function ReleaseForm(props: {
   onChange: (params: FormBundleDocument) => void
   value: FormBundleDocument
 }): JSX.Element {
@@ -50,7 +50,7 @@ export function BundleForm(props: {
     publishedAt ? dateFormatter.format(new Date(publishedAt)) : undefined,
   )
 
-  const iconValue: BundleIconEditorPickerValue = useMemo(
+  const iconValue: ReleaseIconEditorPickerValue = useMemo(
     () => ({
       icon: icon ?? DEFAULT_BUNDLE.icon,
       hue: hue ?? DEFAULT_BUNDLE.hue,
@@ -89,7 +89,7 @@ export function BundleForm(props: {
   )
 
   const handleIconValueChange = useCallback(
-    (pickedIcon: BundleIconEditorPickerValue) => {
+    (pickedIcon: ReleaseIconEditorPickerValue) => {
       onChange({...value, icon: pickedIcon.icon, hue: pickedIcon.hue})
     },
     [onChange, value],
@@ -98,12 +98,12 @@ export function BundleForm(props: {
   return (
     <Stack space={5}>
       <Flex>
-        <BundleIconEditorPicker onChange={handleIconValueChange} value={iconValue} />
+        <ReleaseIconEditorPicker onChange={handleIconValueChange} value={iconValue} />
       </Flex>
       <Stack space={3}>
-        <FormFieldHeaderText title={t('bundle.form.title')} validation={titleErrors} />
+        <FormFieldHeaderText title={t('release.form.title')} validation={titleErrors} />
         <TextInput
-          data-testid="bundle-form-title"
+          data-testid="release-form-title"
           onChange={handleBundleTitleChange}
           customValidity={titleErrors.length > 0 ? 'error' : undefined}
           value={title}
@@ -112,12 +112,12 @@ export function BundleForm(props: {
 
       <Stack space={3}>
         <Text size={1} weight="medium">
-          {t('bundle.form.description')}
+          {t('release.form.description')}
         </Text>
         <TextArea
           onChange={handleBundleDescriptionChange}
           value={description}
-          data-testid="bundle-form-description"
+          data-testid="release-form-description"
         />
       </Stack>