Corel UI tests

.eslintrc.cjs

@@ -162,6 +162,16 @@ const config = {
       },
     },
 
+    // Ignore i18n in releases files. TODO: Remove this before moving releases to GA.
+    {
+      files: ['**/*/core/releases/**/*', '**/*/core/bundles/**/*'],
+      rules: {
+        'i18next/no-literal-string': 'off',
+        '@sanity/i18n/no-attribute-string-literals': 'off',
+        '@sanity/i18n/no-attribute-template-literals': 'off',
+      },
+    },
+
     // Files to disable i18n literals,
     {
       files: ['./**/*/__workshop__/**/*', './dev/**/*', './examples/**/*', '**/*/debug/**/*'],

packages/@sanity/types/src/documents/types.ts

@@ -5,6 +5,7 @@ export interface SanityDocument {
   _createdAt: string
   _updatedAt: string
   _rev: string
+  _version?: Record<string, never>
   [key: string]: unknown
 }
 
@@ -21,6 +22,7 @@ export interface SanityDocumentLike {
   _createdAt?: string
   _updatedAt?: string
   _rev?: string
+  _version?: Record<string, never>
   [key: string]: unknown
 }
 

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

@@ -0,0 +1,53 @@
+import {hues} from '@sanity/color'
+import {ChevronDownIcon, Icon} from '@sanity/icons'
+// eslint-disable-next-line camelcase
+import {Box, Flex, rgba, Text, useTheme_v2} from '@sanity/ui'
+import {type CSSProperties} from 'react'
+
+import {type BundleDocument} from '../../store/bundles/types'
+
+/**
+ * @internal
+ */
+export function BundleBadge(
+  props: Partial<BundleDocument> & {openButton?: boolean; padding?: number; title?: string},
+): JSX.Element {
+  const {hue = 'gray', icon, openButton, padding = 3, title} = props
+  const {color} = useTheme_v2()
+
+  return (
+    <Flex
+      gap={padding}
+      padding={padding}
+      style={
+        {
+          '--card-bg-color': rgba(hues[hue][color._dark ? 700 : 300].hex, 0.2),
+          '--card-fg-color': hues[hue][color._dark ? 400 : 600].hex,
+          '--card-icon-color': hues[hue][color._dark ? 400 : 600].hex,
+          'backgroundColor': 'var(--card-bg-color)',
+          'borderRadius': '9999px',
+        } as CSSProperties
+      }
+    >
+      {icon && (
+        <Box flex="none">
+          <Text size={1}>
+            <Icon symbol={icon} />
+          </Text>
+        </Box>
+      )}
+      {title && (
+        <Box flex="none">
+          <Text size={1}>{title}</Text>
+        </Box>
+      )}
+      {openButton && (
+        <Box flex="none">
+          <Text size={1}>
+            <ChevronDownIcon />
+          </Text>
+        </Box>
+      )}
+    </Flex>
+  )
+}

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

@@ -0,0 +1,138 @@
+import {CheckmarkIcon} from '@sanity/icons'
+import {Box, Flex, Menu, MenuButton, MenuDivider, MenuItem, Spinner, Text} from '@sanity/ui'
+import {type ReactElement, useCallback} from 'react'
+import {RelativeTime} from 'sanity'
+import {styled} from 'styled-components'
+
+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'
+
+const StyledMenu = styled(Menu)`
+  min-width: 200px;
+`
+
+const StyledBox = styled(Box)`
+  overflow: auto;
+  max-height: 200px;
+`
+
+interface BundleListProps {
+  button: ReactElement
+  bundles: BundleDocument[] | null
+  loading: boolean
+  actions?: ReactElement
+}
+
+/**
+ * @internal
+ */
+export function BundleMenu(props: BundleListProps): JSX.Element {
+  const {bundles, loading, actions, button} = props
+  const hasBundles = bundles && bundles.filter((b) => !isDraftOrPublished(b.name)).length > 0
+
+  const {currentGlobalBundle, setPerspective} = usePerspective()
+
+  const handleBundleChange = useCallback(
+    (bundle: Partial<BundleDocument>) => () => {
+      if (bundle.name) {
+        setPerspective(bundle.name)
+      }
+    },
+    [setPerspective],
+  )
+
+  return (
+    <>
+      <MenuButton
+        button={button}
+        id="bundle-menu"
+        menu={
+          <StyledMenu data-testid="bundle-menu">
+            {loading ? (
+              <Flex padding={4} justify="center" data-testid="spinner">
+                <Spinner muted />
+              </Flex>
+            ) : (
+              <>
+                <MenuItem
+                  iconRight={
+                    currentGlobalBundle.name === LATEST.name ? (
+                      <CheckmarkIcon data-testid="latest-checkmark-icon" />
+                    ) : undefined
+                  }
+                  onClick={handleBundleChange(LATEST)}
+                  pressed={false}
+                  text={LATEST.title}
+                  data-testid="latest-menu-item"
+                />
+                {hasBundles && (
+                  <>
+                    <MenuDivider />
+                    <StyledBox data-testid="bundles-list">
+                      {bundles
+                        .filter((b) => !isDraftOrPublished(b.name) && !b.archivedAt)
+                        .map((b) => (
+                          <MenuItem
+                            key={b.name}
+                            onClick={handleBundleChange(b)}
+                            padding={1}
+                            pressed={false}
+                            data-testid={`bundle-${b.name}`}
+                          >
+                            <Flex>
+                              <BundleBadge hue={b.hue} icon={b.icon} padding={2} />
+
+                              <Box flex={1} padding={2} style={{minWidth: 100}}>
+                                <Text size={1} weight="medium">
+                                  {b.title}
+                                </Text>
+                              </Box>
+
+                              <Box padding={2}>
+                                <Text muted size={1}>
+                                  {b.publishAt ? (
+                                    <RelativeTime time={b.publishAt as Date} useTemporalPhrase />
+                                  ) : (
+                                    /* localize text */
+                                    'No target date'
+                                  )}
+                                </Text>
+                              </Box>
+
+                              <Box padding={2}>
+                                <Text size={1}>
+                                  <CheckmarkIcon
+                                    style={{opacity: currentGlobalBundle.name === b.name ? 1 : 0}}
+                                    data-testid={`${b.name}-checkmark-icon`}
+                                  />
+                                </Text>
+                              </Box>
+                            </Flex>
+                          </MenuItem>
+                        ))}
+                    </StyledBox>
+                  </>
+                )}
+
+                {actions && (
+                  <>
+                    <MenuDivider />
+                    {actions}
+                  </>
+                )}
+              </>
+            )}
+          </StyledMenu>
+        }
+        popover={{
+          placement: 'bottom-start',
+          portal: true,
+          zOffset: 3000,
+        }}
+      />
+    </>
+  )
+}