-
Notifications
You must be signed in to change notification settings - Fork 435
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(structure): live edit on draft documents (#7526)
* !TEMP(dev): add liveEdit to simple block * refactor(sanity): make livedit drafts readOnly * refactor(sanity): add banner explaining what needs to be done to get the live edit to work * refactor(sanity): add publish button to banner * feat(structure): allow discard draft in banner * test(e2e): add e2e test to check banner exists * refactor(e2e): add telemetry * refactor(structure): change names of telemetry events * refactor(structure): update banner text * refactor(structure): send in useDocumentPane info as props vs fetching them again * refactor(structure): update telemetry names and event properties
- Loading branch information
Showing
7 changed files
with
169 additions
and
7 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
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
90 changes: 90 additions & 0 deletions
90
packages/sanity/src/structure/panes/document/documentPanel/banners/DraftLiveEditBanner.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 |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import {type SanityDocument} from '@sanity/client' | ||
| import {ErrorOutlineIcon} from '@sanity/icons' | ||
| import {useTelemetry} from '@sanity/telemetry/react' | ||
| import {Flex, Text} from '@sanity/ui' | ||
| import {useCallback, useEffect, useState} from 'react' | ||
| import { | ||
| isDraftId, | ||
| type ObjectSchemaType, | ||
| Translate, | ||
| useDocumentOperation, | ||
| useTranslation, | ||
| } from 'sanity' | ||
|
|
||
| import {Button} from '../../../../../ui-components' | ||
| import {structureLocaleNamespace} from '../../../../i18n' | ||
| import {ResolvedLiveEdit} from './__telemetry__/DraftLiveEditBanner.telemetry' | ||
| import {Banner} from './Banner' | ||
|
|
||
| interface DraftLiveEditBannerProps { | ||
| displayed: Partial<SanityDocument> | null | ||
| documentId: string | ||
| schemaType: ObjectSchemaType | ||
| } | ||
|
|
||
| export function DraftLiveEditBanner({ | ||
| displayed, | ||
| documentId, | ||
| schemaType, | ||
| }: DraftLiveEditBannerProps): JSX.Element | null { | ||
| const {t} = useTranslation(structureLocaleNamespace) | ||
| const [isPublishing, setPublishing] = useState(false) | ||
| const [isDiscarding, setDiscarding] = useState(false) | ||
| const telemetry = useTelemetry() | ||
|
|
||
| const {publish, discardChanges} = useDocumentOperation(documentId, displayed?._type || '') | ||
|
|
||
| const handlePublish = useCallback(() => { | ||
| publish.execute() | ||
| setPublishing(true) | ||
| telemetry.log(ResolvedLiveEdit, {liveEditResolveType: 'publish'}) | ||
| }, [publish, telemetry]) | ||
|
|
||
| const handleDiscard = useCallback(() => { | ||
| discardChanges.execute() | ||
| setDiscarding(true) | ||
| telemetry.log(ResolvedLiveEdit, {liveEditResolveType: 'discard'}) | ||
| }, [discardChanges, telemetry]) | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| setPublishing(false) | ||
| setDiscarding(false) | ||
| } | ||
| }) | ||
|
|
||
| if (displayed && displayed._id && !isDraftId(displayed._id)) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Banner | ||
| content={ | ||
| <Flex align="center" justify="space-between" gap={1}> | ||
| <Text size={1} weight="medium"> | ||
| <Translate | ||
| t={t} | ||
| i18nKey={'banners.live-edit-draft-banner.text'} | ||
| values={{schemaType: schemaType.title}} | ||
| /> | ||
| </Text> | ||
| <Button | ||
| onClick={handlePublish} | ||
| text={t('action.publish.live-edit.label')} | ||
| tooltipProps={{content: t('banners.live-edit-draft-banner.publish.tooltip')}} | ||
| loading={isPublishing} | ||
| /> | ||
|
|
||
| <Button | ||
| onClick={handleDiscard} | ||
| text={t('banners.live-edit-draft-banner.discard.tooltip')} | ||
| tooltipProps={{content: t('banners.live-edit-draft-banner.discard.tooltip')}} | ||
| loading={isDiscarding} | ||
| /> | ||
| </Flex> | ||
| } | ||
| data-testid="live-edit-type-banner" | ||
| icon={ErrorOutlineIcon} | ||
| /> | ||
| ) | ||
| } |
15 changes: 15 additions & 0 deletions
15
...cture/panes/document/documentPanel/banners/__telemetry__/DraftLiveEditBanner.telemetry.ts
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 |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import {defineEvent} from '@sanity/telemetry' | ||
|
|
||
| interface TypeInfo { | ||
| liveEditResolveType: 'publish' | 'discard' | ||
| } | ||
|
|
||
| /** | ||
| * When a draft in a live edit document is published | ||
| * @internal | ||
| */ | ||
| export const ResolvedLiveEdit = defineEvent<TypeInfo>({ | ||
| name: 'Resolved LiveEdit Draft', | ||
| version: 1, | ||
| description: 'User resolved a draft of a live edit document to continue editing', | ||
| }) |
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 |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /* eslint-disable max-nested-callbacks */ | ||
| import {expect, test} from '@playwright/test' | ||
|
|
||
| import {createUniqueDocument, withDefaultClient} from '../../helpers' | ||
|
|
||
| withDefaultClient((context) => { | ||
| test.describe('sanity/structure: document pane', () => { | ||
| test('on live edit document with a draft, a banner should appear', async ({page}) => { | ||
| // create published document | ||
| const uniqueDoc = await createUniqueDocument(context.client, {_type: 'playlist'}) | ||
| const id = uniqueDoc._id! | ||
|
|
||
| // create draft document | ||
| await createUniqueDocument(context.client, { | ||
| _type: 'playlist', | ||
| _id: `drafts.${id}`, | ||
| name: 'Edited by e2e test runner', | ||
| }) | ||
|
|
||
| await page.goto(`/test/content/playlist;${id}`) | ||
|
|
||
| await expect(page.getByTestId('document-panel-scroller')).toBeAttached() | ||
| await expect(page.getByTestId('string-input')).toBeAttached() | ||
|
|
||
| // checks that inputs are set to read only | ||
| await expect(await page.getByTestId('string-input')).toHaveAttribute('readonly', '') | ||
| // checks that the banner is visible | ||
| await expect(page.getByTestId('live-edit-type-banner')).toBeVisible() | ||
| }) | ||
| }) | ||
| }) |