diff --git a/packages/sanity/src/core/releases/i18n/resources.ts b/packages/sanity/src/core/releases/i18n/resources.ts index 91082df8d3e..f0680247452 100644 --- a/packages/sanity/src/core/releases/i18n/resources.ts +++ b/packages/sanity/src/core/releases/i18n/resources.ts @@ -34,6 +34,14 @@ const releasesLocaleStrings = { /** Text for when a release / document was created */ 'created': 'Created ', + /** Text for the releases detail screen when a release was published */ + 'dashboard.details.published-on': 'Published on {{date}}', + + /** Text for the releases detail screen in the pin release button. */ + 'dashboard.details.pin-release': 'Pin release', + + /** Activity inspector button text */ + 'dashboard.details.activity': 'Activity', /** Warning for deleting a release that it will delete one document version */ 'delete.warning_one': 'This will also delete one document version.', /** Warning for deleting a release that it will delete multiple document version */ @@ -60,6 +68,14 @@ const releasesLocaleStrings = { /** Title text when error during release update */ 'failed-edit-title': 'Failed to save changes', + /**The text that will be shown in the footer to indicate the time the release was archived */ + 'footer.status.archived': 'Archived', + /**The text that will be shown in the footer to indicate the time the release was created */ + 'footer.status.created': 'Created', + /**The text that will be shown in the footer to indicate the time the release was created */ + 'footer.status.edited': 'Edited', + /**The text that will be shown in the footer to indicate the time the release was published */ + 'footer.status.published': 'Published', /** Label text for the loading state whilst release is being loaded */ 'loading-release': 'Loading release', @@ -118,10 +134,19 @@ const releasesLocaleStrings = { /** Text for when the release is composed of multiple documents */ 'summary.document-count_other': '{{count}} documents', + /** add action type that will be shown in the table*/ + 'table-body.action.add': 'Add', + /** Change action type that will be shown in the table*/ + 'table-body.action.change': 'Change', + /** Header for the document table in the release tool - contributors */ 'table-header.contributors': 'Contributors', /** Header for the document table in the release tool - created */ 'table-header.created': 'Created', + /** Header for the document table in the release tool - type */ + 'table-header.type': 'Type', + /** Header for the document table in the release tool - action */ + 'table-header.action': 'Action', /** Header for the document table in the release tool - title */ 'table-header.documents': 'Documents', /** Header for the document table in the release tool - edited */ diff --git a/packages/sanity/src/core/releases/tool/components/BadgeIcon.tsx b/packages/sanity/src/core/releases/tool/components/BadgeIcon.tsx new file mode 100644 index 00000000000..7145cca65b9 --- /dev/null +++ b/packages/sanity/src/core/releases/tool/components/BadgeIcon.tsx @@ -0,0 +1,13 @@ +import {type IconComponent} from '@sanity/icons' +import {type BadgeTone} from '@sanity/ui' +import {createElement, type CSSProperties} from 'react' + +export function BadgeIcon(props: {icon: IconComponent; tone: BadgeTone}) { + const {icon, tone} = props + + return createElement(icon, { + style: { + '--card-icon-color': `var(--card-badge-${tone}-icon-color)`, + } as CSSProperties, + }) +} diff --git a/packages/sanity/src/core/releases/tool/components/ReleaseAvatar.tsx b/packages/sanity/src/core/releases/tool/components/ReleaseAvatar.tsx new file mode 100644 index 00000000000..3256b634819 --- /dev/null +++ b/packages/sanity/src/core/releases/tool/components/ReleaseAvatar.tsx @@ -0,0 +1,24 @@ +import {DotIcon} from '@sanity/icons' +import {type BundleDocument} from 'sanity' + +import {getReleaseTone} from '../../util/getReleaseTone' +import {VersionAvatar} from './VersionAvatar' + +export function ReleaseAvatar({ + fontSize, + padding, + release, +}: { + fontSize?: number + padding?: number + release: BundleDocument +}) { + return ( + + ) +} diff --git a/packages/sanity/src/core/releases/tool/components/StatusItem.tsx b/packages/sanity/src/core/releases/tool/components/StatusItem.tsx new file mode 100644 index 00000000000..d715a4a1e53 --- /dev/null +++ b/packages/sanity/src/core/releases/tool/components/StatusItem.tsx @@ -0,0 +1,23 @@ +import {Box, Card, Flex, Text} from '@sanity/ui' +import {type ReactNode} from 'react' + +export function StatusItem(props: {avatar?: ReactNode; text: ReactNode}) { + const {avatar, text} = props + + return ( + + + {avatar && ( + +
{avatar}
+
+ )} + + + {text} + + +
+
+ ) +} diff --git a/packages/sanity/src/core/releases/tool/components/Table/Table.tsx b/packages/sanity/src/core/releases/tool/components/Table/Table.tsx index 0d65198931d..7c70227e6c4 100644 --- a/packages/sanity/src/core/releases/tool/components/Table/Table.tsx +++ b/packages/sanity/src/core/releases/tool/components/Table/Table.tsx @@ -1,4 +1,4 @@ -import {Box, Card, type CardProps, Flex, Stack, Text} from '@sanity/ui' +import {Box, Card, type CardProps, Container, Flex, Stack, Text} from '@sanity/ui' import { defaultRangeExtractor, type Range, @@ -52,19 +52,17 @@ export interface TableProps { scrollContainerRef: MutableRefObject } -const RowStack = styled(Stack)({ - '& > *:not([first-child])': { - borderTopLeftRadius: 0, - borderTopRightRadius: 0, - marginTop: -1, - }, - - '& > *:not([last-child])': { - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, - }, -}) - +const CustomCard = styled(Card)` + display: flex; + max-width: 1200px; + margin: 0 auto; + ::before { + content: ''; + display: block; + border: 1px solid red; + position: absolute; + } +` const ITEM_HEIGHT = 59 /** @@ -112,6 +110,7 @@ const TableInner = ({ if (!sort) return filteredResult return [...filteredResult].sort((a, b) => { + // TODO: Update this tos support sorting not only by date but also by string const parseDate = (dateString: unknown) => typeof dateString === 'string' ? Date.parse(dateString) : 0 @@ -178,12 +177,8 @@ const TableInner = ({ key={String(get(datum, rowId))} data-testid="table-row" as="tr" - border - radius={3} + borderBottom display="flex" - first-child={datum.isFirst ? '' : undefined} - last-child={datum.isLast ? '' : undefined} - margin={-1} style={{ height: `${datum.virtualRow.size}px`, transform: `translateY(${datum.virtualRow.start - datum.index * datum.virtualRow.size}px)`, @@ -251,23 +246,25 @@ const TableInner = ({ position: 'relative', }} > - - - - {filteredData.length === 0 - ? emptyContent - : rowVirtualizer.getVirtualItems().map((virtualRow, index) => { - const datum = filteredData[virtualRow.index] - return renderRow({ - ...datum, - virtualRow, - index, - isFirst: virtualRow.index === 0, - isLast: virtualRow.index === filteredData.length - 1, - }) - })} - - + + + + + {filteredData.length === 0 + ? emptyContent + : rowVirtualizer.getVirtualItems().map((virtualRow, index) => { + const datum = filteredData[virtualRow.index] + return renderRow({ + ...datum, + virtualRow, + index, + isFirst: virtualRow.index === 0, + isLast: virtualRow.index === filteredData.length - 1, + }) + })} + + + ) diff --git a/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx b/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx index ef73a358fec..3a9084d6a34 100644 --- a/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx +++ b/packages/sanity/src/core/releases/tool/components/Table/TableHeader.tsx @@ -57,7 +57,7 @@ const TableHeaderSearch = ({ */ export const TableHeader = ({headers, searchDisabled}: TableHeaderProps) => { return ( - + {headers.map(({header: Header, width, id, sorting}) => (
+ + + + + ) +} diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx new file mode 100644 index 00000000000..846f23bf1d4 --- /dev/null +++ b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardActivityPanel.tsx @@ -0,0 +1,14 @@ +import {Stack, Text} from '@sanity/ui' + +export function ReleaseDashboardActivityPanel() { + return ( + + + {'Activity'} + + + {'🚧 Under construction 🚧'} + + + ) +} diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx new file mode 100644 index 00000000000..52f3b98f49e --- /dev/null +++ b/packages/sanity/src/core/releases/tool/detail/ReleaseDashboardDetails.tsx @@ -0,0 +1,77 @@ +import {PinFilledIcon, PinIcon} from '@sanity/icons' +import { + Box, + // Custom button with full radius used here + // eslint-disable-next-line no-restricted-imports + Button, + Card, + Container, + Flex, + Stack, + Text, +} from '@sanity/ui' +import {format} from 'date-fns' +import {useCallback} from 'react' +import {type BundleDocument, usePerspective, useTranslation} from 'sanity' + +import {releasesLocaleNamespace} from '../../i18n' +import {getReleaseTone} from '../../util/getReleaseTone' +import {ReleaseAvatar} from '../components/ReleaseAvatar' +import {ReleaseDetailsEditor} from './ReleaseDetailsEditor' + +export function ReleaseDashboardDetails({release}: {release: BundleDocument}) { + const {archived, _id, publishedAt} = release + const {t} = useTranslation(releasesLocaleNamespace) + + const {currentGlobalBundle, setPerspective} = usePerspective() + + const handlePinRelease = useCallback(() => { + if (_id === currentGlobalBundle._id) { + setPerspective('drafts') + } else { + setPerspective(_id) + } + }, [_id, currentGlobalBundle._id, setPerspective]) + + return ( + + + +