-
Notifications
You must be signed in to change notification settings - Fork 427
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): add versions to references and status icons (#7690)
- Loading branch information
1 parent
76894c1
commit ccdb82f
Showing
19 changed files
with
349 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 66 additions & 36 deletions
102
packages/sanity/src/core/components/documentStatusIndicator/DocumentStatusIndicator.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,92 @@ | ||
| import {DotIcon} from '@sanity/icons' | ||
| import {type PreviewValue, type SanityDocument} from '@sanity/types' | ||
| import {Text} from '@sanity/ui' | ||
| import {useMemo} from 'react' | ||
| import {Flex, Text} from '@sanity/ui' | ||
| import {type ComponentType, useMemo} from 'react' | ||
| import {styled} from 'styled-components' | ||
|
|
||
| import {type VersionsRecord} from '../../preview/utils/getPreviewStateObservable' | ||
| import {useReleases} from '../../store/release/useReleases' | ||
|
|
||
| interface DocumentStatusProps { | ||
| draft?: PreviewValue | Partial<SanityDocument> | null | ||
| published?: PreviewValue | Partial<SanityDocument> | null | ||
| version?: PreviewValue | Partial<SanityDocument> | null | ||
| // eslint-disable-next-line | ||
| versions?: VersionsRecord | ||
| versions: VersionsRecord | undefined | ||
| } | ||
|
|
||
| const Root = styled(Text)` | ||
| &[data-status='edited'] { | ||
| --card-icon-color: var(--card-badge-caution-dot-color); | ||
| } | ||
| &[data-status='unpublished'] { | ||
| &[data-status='not-published'] { | ||
| --card-icon-color: var(--card-badge-default-dot-color); | ||
| opacity: 0.5 !important; | ||
| } | ||
| &[data-status='draft'] { | ||
| --card-icon-color: var(--card-badge-caution-dot-color); | ||
| } | ||
| &[data-status='asap'] { | ||
| --card-icon-color: var(--card-badge-critical-dot-color); | ||
| } | ||
| &[data-status='undecided'] { | ||
| --card-icon-color: var(--card-badge-explore-dot-color); | ||
| } | ||
| &[data-status='scheduled'] { | ||
| --card-icon-color: var(--card-badge-primary-dot-color); | ||
| } | ||
| ` | ||
|
|
||
| type Status = 'not-published' | 'draft' | 'asap' | 'scheduled' | 'undecided' | ||
|
|
||
| /** | ||
| * Renders a dot indicating the current document status. | ||
| * | ||
| * - Yellow (caution) for published documents with edits | ||
| * - Gray (default) for unpublished documents (with or without edits) | ||
| * | ||
| * No dot will be displayed for published documents without edits or for version documents. | ||
| * | ||
| * @internal | ||
| */ | ||
| export function DocumentStatusIndicator({draft, published, version}: DocumentStatusProps) { | ||
| const $draft = Boolean(draft) | ||
| const $published = Boolean(published) | ||
| const $version = Boolean(version) | ||
|
|
||
| const status = useMemo(() => { | ||
| if ($version) return undefined | ||
| if ($draft && !$published) return 'unpublished' | ||
| return 'edited' | ||
| }, [$draft, $published, $version]) | ||
|
|
||
| // Return null if the document is: | ||
| // - Published without edits | ||
| // - Neither published or without edits (this shouldn't be possible) | ||
| // - A version | ||
| if ((!$draft && !$published) || (!$draft && $published) || $version) { | ||
| return null | ||
| } | ||
| export function DocumentStatusIndicator({draft, published, versions}: DocumentStatusProps) { | ||
| const {data: releases} = useReleases() | ||
| const versionsList = useMemo( | ||
| () => | ||
| versions | ||
| ? Object.keys(versions).map((versionName) => { | ||
| const release = releases?.find((r) => r.name === versionName) | ||
| return release?.metadata.releaseType | ||
| }) | ||
| : [], | ||
| [releases, versions], | ||
| ) | ||
|
|
||
| const indicators: { | ||
| status: Status | ||
| show: boolean | ||
| }[] = [ | ||
| { | ||
| status: draft && !published ? 'not-published' : 'draft', | ||
| show: Boolean(draft), | ||
| }, | ||
| { | ||
| status: 'asap', | ||
| show: versionsList.includes('asap'), | ||
| }, | ||
| { | ||
| status: 'scheduled', | ||
| show: versionsList.includes('scheduled'), | ||
| }, | ||
| { | ||
| status: 'undecided', | ||
| show: versionsList.includes('undecided'), | ||
| }, | ||
| ] | ||
|
|
||
| // TODO: Remove debug `status[0]` output. | ||
| return ( | ||
| <Root data-status={status} size={1}> | ||
| <DotIcon /> | ||
| </Root> | ||
| <Flex> | ||
| {indicators | ||
| .filter(({show}) => show) | ||
| .map(({status}) => ( | ||
| <Dot key={status} status={status} /> | ||
| ))} | ||
| </Flex> | ||
| ) | ||
| } | ||
|
|
||
| const Dot: ComponentType<{status: Status}> = ({status}) => ( | ||
| <Root data-status={status} size={1}> | ||
| <DotIcon /> | ||
| </Root> | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.