refactor(COREL): refactor version context & renaming (#7071)

* feat(sanity): update types, add icon and hue picker to bundles, update uis

* feat(sanity): add date picker to bundleform

* refactor(sanity): update publishAt fields in menus

* chore(sanity): update LATEST type to Partial

* refactor(sanity): make single bundle menu + clean up

* chore(sanity): remove warnings comments

* refactor(sanity): move version provider to its own file + organise + add useVersion

* refactor(sanity): remove provider + context, move logic to hook

* chore(sanity): remove comments + change name from setCurrentVersion to setGlobalBundle

* chore(sanity): rename useVersion to useBundle

* chore(sanity): update comments

* chore(sanity): Rename currentVersion

* refactor(sanity): rename currentBudnle and setGlobalBundle

* chore(sanity): rename versions to bundles in core directory

* chore(sanity): rename to GlobalPerspectiveMenu and move to navbar directory

* chore(sanity): rename to DocumentPerspectiveMenu and move to navbar directory

* chore(sanity): remove isDraft from usePerspective, add new util

* refactor(sanity): remove isDraft

* refactor(sanity): use current global in the bundle badge

.eslintrc.cjs

@@ -164,7 +164,7 @@ const config = {
 
     // Ignore i18n in releases files. TODO: Remove this before moving releases to GA.
     {
-      files: ['**/*/core/releases/**/*', '**/*/core/versions/**/*'],
+      files: ['**/*/core/releases/**/*', '**/*/core/bundles/**/*'],
       rules: {
         'i18next/no-literal-string': 'off',
         '@sanity/i18n/no-attribute-string-literals': 'off',

packages/sanity/src/core/versions/components/BundleMenu.tsx → packages/sanity/src/core/bundles/components/BundleMenu.tsx

@@ -1,14 +1,11 @@
 import {CheckmarkIcon} from '@sanity/icons'
 import {Box, Flex, Menu, MenuButton, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
-import {type ReactElement, useCallback, useContext} from 'react'
+import {type ReactElement, useCallback} from 'react'
 import {RelativeTime} from 'sanity'
 import {styled} from 'styled-components'
 
-import {
-  VersionContext,
-  type VersionContextValue,
-} from '../../../_singletons/core/form/VersionContext'
 import {type BundleDocument} from '../../store/bundles/types'
+import {usePerspective} from '../hooks/usePerspective'
 import {LATEST} from '../util/const'
 import {isDraftOrPublished} from '../util/dummyGetters'
 import {BundleBadge} from './BundleBadge'
@@ -33,16 +30,15 @@ export function BundleMenu(props: BundleListProps): JSX.Element {
   const {bundles, loading, actions, button} = props
   const hasBundles = bundles && bundles.filter((b) => !isDraftOrPublished(b.name)).length > 0
 
-  // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
-  const {currentVersion, setCurrentVersion, isDraft} =
-    useContext<VersionContextValue>(VersionContext)
+  const {currentGlobalBundle, setPerspective} = usePerspective()
 
-  // FIXME REPLACE WHEN WE HAVE REAL DATA
   const handleBundleChange = useCallback(
     (bundle: Partial<BundleDocument>) => () => {
-      setCurrentVersion(bundle)
+      if (bundle.name) {
+        setPerspective(bundle.name)
+      }
     },
-    [setCurrentVersion],
+    [setPerspective],
   )
 
   return (
@@ -59,7 +55,9 @@ export function BundleMenu(props: BundleListProps): JSX.Element {
             ) : (
               <>
                 <MenuItem
-                  iconRight={isDraft ? <CheckmarkIcon /> : undefined}
+                  iconRight={
+                    currentGlobalBundle.name === LATEST.name ? <CheckmarkIcon /> : undefined
+                  }
                   onClick={handleBundleChange(LATEST)}
                   pressed={false}
                   text={LATEST.title}
@@ -100,7 +98,7 @@ export function BundleMenu(props: BundleListProps): JSX.Element {
                               <Box padding={2}>
                                 <Text size={1}>
                                   <CheckmarkIcon
-                                    style={{opacity: currentVersion.name === b.name ? 1 : 0}}
+                                    style={{opacity: currentGlobalBundle.name === b.name ? 1 : 0}}
                                   />
                                 </Text>
                               </Box>

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

@@ -118,6 +118,8 @@ export function BundleForm(props: {
             </Text>
           </Card>
         )}
+
+        {/* TODO ADD CHECK FOR EXISTING NAMES AND AVOID DUPLICATES */}
         <Text size={1} weight="medium">
           {/* localize text */}
           Title

packages/sanity/src/core/versions/components/dialog/CreateBundleDialog.tsx → packages/sanity/src/core/bundles/components/dialog/CreateBundleDialog.tsx

@@ -1,13 +1,10 @@
 import {ArrowRightIcon} from '@sanity/icons'
 import {Box, Button, Dialog, Flex} from '@sanity/ui'
-import {type FormEvent, useCallback, useContext, useState} from 'react'
+import {type FormEvent, useCallback, useState} from 'react'
 
-import {
-  VersionContext,
-  type VersionContextValue,
-} from '../../../../_singletons/core/form/VersionContext'
 import {type BundleDocument} from '../../../store/bundles/types'
 import {useBundleOperations} from '../../../store/bundles/useBundleOperations'
+import {usePerspective} from '../../hooks/usePerspective'
 import {isDraftOrPublished} from '../../util/dummyGetters'
 import {BundleForm} from './BundleForm'
 
@@ -30,24 +27,26 @@ export function CreateBundleDialog(props: CreateBundleDialogProps): JSX.Element
   const [isCreating, setIsCreating] = useState(false)
 
   // TODO MAKE SURE THIS IS HOW WE WANT TO DO THIS
-  const {setCurrentVersion} = useContext<VersionContextValue>(VersionContext)
+  const {setPerspective} = usePerspective()
 
   const handleOnSubmit = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
-      try {
-        event.preventDefault()
-        setIsCreating(true)
-        await createBundle(value)
-        setValue(value)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setIsCreating(false)
-        setCurrentVersion(value)
-        onCreate()
+      if (value.name) {
+        try {
+          event.preventDefault()
+          setIsCreating(true)
+          await createBundle(value)
+          setValue(value)
+        } catch (err) {
+          console.error(err)
+        } finally {
+          setIsCreating(false)
+          setPerspective(value.name)
+          onCreate()
+        }
       }
     },
-    [createBundle, value, setCurrentVersion, onCreate],
+    [createBundle, value, setPerspective, onCreate],
   )
 
   const handleOnChange = useCallback((changedValue: Partial<BundleDocument>) => {

packages/sanity/src/core/versions/components/panes/BundleActions.tsx → packages/sanity/src/core/bundles/components/panes/BundleActions.tsx

@@ -15,14 +15,14 @@ import {type BundleDocument} from '../../../store/bundles/types'
 import {getAllVersionsOfDocument, versionDocumentExists} from '../../util/dummyGetters'
 
 interface BundleActionsProps {
-  currentVersion: BundleDocument
+  currentGlobalBundle: Partial<BundleDocument>
   documentId: string
   documentType: string
 }
 
 export function BundleActions(props: BundleActionsProps): JSX.Element {
-  const {currentVersion, documentId, documentType} = props
-  const {name, title} = currentVersion
+  const {currentGlobalBundle, documentId, documentType} = props
+  const {name, title} = currentGlobalBundle
   const {data: bundles, loading} = useBundles()
   const documentStore = useDocumentStore()
 

packages/sanity/src/core/bundles/hooks/usePerspective.tsx

@@ -0,0 +1,44 @@
+import {useRouter} from 'sanity/router'
+
+import {useBundlesStore} from '../../store/bundles'
+import {type BundleDocument} from '../../store/bundles/types'
+import {LATEST} from '../util/const'
+
+/**
+ * @internal
+ */
+export interface VersionContextValue {
+  /* Return the current global bundle */
+  currentGlobalBundle: Partial<BundleDocument>
+  /* Change the perspective in the studio based on the perspective name */
+  setPerspective: (name: string) => void
+}
+
+export function usePerspective(): VersionContextValue {
+  const router = useRouter()
+  const {data: bundles} = useBundlesStore()
+
+  const setPerspective = (name: string | undefined) => {
+    if (name === 'drafts') {
+      router.navigateStickyParam('perspective', '')
+    } else {
+      router.navigateStickyParam('perspective', `bundle.${name}`)
+    }
+  }
+  const selectedBundle =
+    router.stickyParams?.perspective && bundles
+      ? bundles.find((bundle: Partial<BundleDocument>) => {
+          return (
+            `bundle.${bundle.name}`.toLocaleLowerCase() ===
+            router.stickyParams.perspective?.toLocaleLowerCase()
+          )
+        })
+      : LATEST
+
+  const currentGlobalBundle = selectedBundle || LATEST
+
+  return {
+    setPerspective,
+    currentGlobalBundle,
+  }
+}

packages/sanity/src/core/releases/components/BundlesTable/BundleRow.tsx

@@ -2,8 +2,8 @@ import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 import {RelativeTime} from 'sanity'
 import {useRouter} from 'sanity/router'
 
+import {BundleBadge} from '../../../bundles/components/BundleBadge'
 import {type BundleDocument} from '../../../store/bundles/types'
-import {BundleBadge} from '../../../versions/components/BundleBadge'
 import {BundleMenuButton} from '../BundleMenuButton/BundleMenuButton'
 
 type Props = {

packages/sanity/src/core/releases/tool/BundlesOverview.tsx

@@ -4,10 +4,10 @@ import {isBefore} from 'date-fns'
 import {type MouseEventHandler, useCallback, useMemo, useState} from 'react'
 
 import {Button as StudioButton} from '../../../ui-components'
+import {CreateBundleDialog} from '../../bundles/components/dialog/CreateBundleDialog'
 import {LoadingBlock} from '../../components/loadingBlock/LoadingBlock'
 import {useBundles} from '../../store/bundles/BundlesProvider'
 import {type BundleDocument} from '../../store/bundles/types'
-import {CreateBundleDialog} from '../../versions/components/dialog/CreateBundleDialog'
 import {BundlesTable} from '../components/BundlesTable/BundlesTable'
 import {containsBundles} from '../types/bundle'
 

packages/sanity/src/core/store/bundles/__workshop__/BundlesStoreStory.tsx

@@ -2,9 +2,9 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {type ComponentType, type FormEvent, useCallback, useState} from 'react'
 
 import {Button} from '../../../../ui-components'
+import {BundleForm} from '../../../bundles/components/dialog/BundleForm'
 import {LoadingBlock} from '../../../components/loadingBlock/LoadingBlock'
 import {AddonDatasetProvider} from '../../../studio/addonDataset/AddonDatasetProvider'
-import {BundleForm} from '../../../versions/components/dialog/BundleForm'
 import {BundlesProvider, useBundles} from '../BundlesProvider'
 import {type BundleDocument} from '../types'
 import {useBundleOperations} from '../useBundleOperations'

packages/sanity/src/core/studio/StudioProvider.tsx

@@ -6,9 +6,7 @@ import javascript from 'refractor/lang/javascript.js'
 import json from 'refractor/lang/json.js'
 import jsx from 'refractor/lang/jsx.js'
 import typescript from 'refractor/lang/typescript.js'
-import {AddonDatasetProvider} from 'sanity'
 
-import {VersionProvider} from '../../_singletons/core/form/VersionContext'
 import {LoadingBlock} from '../components/loadingBlock'
 import {ErrorLogger} from '../error/ErrorLogger'
 import {errorReporter} from '../error/errorReporter'
@@ -72,14 +70,10 @@ export function StudioProvider({
       <WorkspaceLoader LoadingComponent={LoadingBlock} ConfigErrorsComponent={ConfigErrorsScreen}>
         <StudioTelemetryProvider config={config}>
           <LocaleProvider>
-            <AddonDatasetProvider>
-              <VersionProvider>
-                <PackageVersionStatusProvider>
-                  <MaybeEnableErrorReporting errorReporter={errorReporter} />
-                  <ResourceCacheProvider>{children}</ResourceCacheProvider>
-                </PackageVersionStatusProvider>
-              </VersionProvider>
-            </AddonDatasetProvider>
+            <PackageVersionStatusProvider>
+              <MaybeEnableErrorReporting errorReporter={errorReporter} />
+              <ResourceCacheProvider>{children}</ResourceCacheProvider>
+            </PackageVersionStatusProvider>
           </LocaleProvider>
         </StudioTelemetryProvider>
       </WorkspaceLoader>

packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx

@@ -19,7 +19,6 @@ import {Button, TooltipDelayGroupProvider} from '../../../../ui-components'
 import {type NavbarProps} from '../../../config/studio/types'
 import {isDev} from '../../../environment'
 import {useTranslation} from '../../../i18n'
-import {GlobalBundleMenu} from '../../../versions/components/GlobalBundleMenu'
 import {useToolMenuComponent} from '../../studio-components-hooks'
 import {useWorkspace} from '../../workspace'
 import {ConfigIssuesButton} from './configIssues/ConfigIssuesButton'
@@ -28,6 +27,7 @@ import {FreeTrialProvider} from './free-trial/FreeTrialProvider'
 import {HomeButton} from './home/HomeButton'
 import {NavDrawer} from './navDrawer'
 import {NewDocumentButton, useNewDocumentOptions} from './new-document'
+import {GlobalPerspectiveMenu} from './perspective/GlobalPerspectiveMenu'
 import {PresenceMenu} from './presence'
 import {ResourcesButton} from './resources/ResourcesButton'
 import {SearchButton, SearchDialog} from './search'
@@ -215,7 +215,7 @@ export function StudioNavbar(props: Omit<NavbarProps, 'renderDefault'>) {
                 </Flex>
                 {/* Versions button */}
                 <Flex gap={2}>
-                  <GlobalBundleMenu />
+                  <GlobalPerspectiveMenu />
                   {/* New document button */}
                   <NewDocumentButton
                     {...newDocumentOptions}