Skip to content

Commit

Permalink
Editor: Add link to revisions (#12197)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jonny Harris <spacedmonkey@users.noreply.github.com>
Co-authored-by: Pascal Birchler <pascalb@google.com>
  • Loading branch information
@timarney @spacedmonkey @swissspidy
3 people authored Sep 13, 2022
1 parent 8ecbbe6 commit 09325a7
Show file tree
Hide file tree
Showing 12 changed files with 122 additions and 26 deletions.
3 changes: 3 additions & 0 deletions includes/Admin/Editor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,8 @@ public function get_editor_settings(): array {
admin_url( 'edit.php' )
);

$revision_url = admin_url( 'revision.php' );

$dashboard_settings_url = add_query_arg(
[
'post_type' => $this->story_post_type->get_slug(),
Expand Down Expand Up @@ -394,6 +396,7 @@ public function get_editor_settings(): array {
'postType' => $this->story_post_type->get_slug(),
'storyId' => $story_id,
'dashboardLink' => $dashboard_url,
'revisionLink' => $revision_url,
'dashboardSettingsLink' => $dashboard_settings_url,
'generalSettingsLink' => $general_settings_url,
'cdnURL' => trailingslashit( WEBSTORIES_CDN_URL ),
Expand Down
5 changes: 0 additions & 5 deletions includes/REST_API/Stories_Controller.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,12 +515,7 @@ protected function add_response_headers( WP_REST_Response $response, WP_REST_Req
* @phpstan-return Links
*/
protected function prepare_links( $post ): array {
// Workaround so that WP_REST_Posts_Controller::prepare_links() does not call wp_get_post_revisions(),
// avoiding a currently unneeded database query.
// TODO(#85): Remove if proper revisions support is ever needed.
remove_post_type_support( $this->post_type, 'revisions' );
$links = parent::prepare_links( $post );
add_post_type_support( $this->post_type, 'revisions' );

$links = $this->add_post_locking_link( $links, $post );
$links = $this->add_publisher_logo_link( $links, $post );
Expand Down
1 change: 1 addition & 0 deletions includes/templates/admin/edit-story.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@
'permalink_template',
'style_presets',
'password',
'_links',
]
)
),
Expand Down
3 changes: 3 additions & 0 deletions packages/design-system/src/icons/history.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/design-system/src/icons/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,3 +144,4 @@ export { default as TurningLine } from './turning_line.svg';
export { default as Union } from './union.svg';
export { default as Video } from './video.svg';
export { default as RemoveMask } from './remove_mask.svg';
export { default as History } from './history.svg';
2 changes: 2 additions & 0 deletions packages/story-editor/src/app/story/actions/useSaveStory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ function useSaveStory({ storyId, pages, story, updateStory }) {
slug,
link,
previewLink,
revisions,
editLink: newEditLink,
embedPostLink,
featuredMedia,
Expand All @@ -109,6 +110,7 @@ function useSaveStory({ storyId, pages, story, updateStory }) {
editLink: newEditLink,
embedPostLink,
featuredMedia,
revisions,
};
updateStory({ properties });

Expand Down
2 changes: 2 additions & 0 deletions packages/story-editor/src/app/story/effects/useLoadStory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ function loadStory(storyId, post, restore, clearHistory) {
publisherLogo,
taxonomies,
terms,
revisions,
} = post;

const date =
Expand Down Expand Up @@ -112,6 +113,7 @@ function loadStory(storyId, post, restore, clearHistory) {
previewLink,
editLink,
embedPostLink,
revisions,
currentStoryStyles: {
colors: storyData?.currentStoryStyles?.colors
? getUniquePresets(storyData.currentStoryStyles.colors)
Expand Down
1 change: 1 addition & 0 deletions packages/wp-story-editor/src/api/constants/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const STORY_FIELDS = [
'permalink_template',
'style_presets',
'password',
'_links',
].join(',');

export const STORY_EMBED = 'wp:lockuser,author,wp:publisherlogo,wp:term';
Expand Down
9 changes: 8 additions & 1 deletion packages/wp-story-editor/src/api/story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export function saveStoryById(config, story) {
'link',
'preview_link',
'edit_link',
'_links',
'embed_post_link',
'story_poster',
].join(','),
Expand All @@ -119,7 +120,12 @@ export function saveStoryById(config, story) {
data: storySaveData,
method: 'POST',
}).then((data) => {
const { story_poster: storyPoster, ...rest } = data;
const { story_poster: storyPoster, _links: links = {}, ...rest } = data;

const revisions = {
count: links?.['version-history']?.[0]?.count,
id: links?.['predecessor-version']?.[0]?.id,
};

const featuredMedia = storyPoster
? {
Expand All @@ -138,6 +144,7 @@ export function saveStoryById(config, story) {
return {
...snakeToCamelCaseObjectKeys(rest),
featuredMedia,
revisions,
};
});
}
Expand Down
4 changes: 4 additions & 0 deletions packages/wp-story-editor/src/api/utils/transformStoryResponse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ function transformStoryResponse(post) {
url: embedded?.['wp:publisherlogo']?.[0]?.source_url || '',
},
taxonomies: links?.['wp:term']?.map(({ taxonomy }) => taxonomy) || [],
revisions: {
count: links?.['version-history']?.[0]?.count,
id: links?.['predecessor-version']?.[0]?.id,
},
terms: embedded?.['wp:term'] || [],
};

Expand Down
103 changes: 84 additions & 19 deletions packages/wp-story-editor/src/components/documentPane/publish/publish.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@ import {
} from '@googleforcreators/react';
import styled from 'styled-components';
import { getExtensionsFromMimeType } from '@googleforcreators/media';
import { __, sprintf, translateToExclusiveList } from '@googleforcreators/i18n';
import {
__,
_n,
sprintf,
translateToExclusiveList,
} from '@googleforcreators/i18n';
import {
Link,
Text,
Expand All @@ -49,6 +54,8 @@ import {
useHighlights,
useSidebar,
} from '@googleforcreators/story-editor';
import { useFeature } from 'flagged';
import { addQueryArgs } from '@googleforcreators/url';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -116,6 +123,24 @@ const LogoImg = styled.img`
max-height: 96px;
`;

const RevisionsWrapper = styled.div`
width: 100%;
margin-bottom: 16px;
margin-top: 20px;
`;

const RevisionsLabel = styled.div`
display: inline-block;
margin-left: 20px;
margin-right: 20px;
`;

const LabelIconWrapper = styled.div`
position: absolute;
display: inline-block;
margin-left: -5px;
`;

function PublishPanel({ nameOverride }) {
const {
state: { users },
Expand All @@ -131,8 +156,11 @@ function PublishPanel({ nameOverride }) {
dashboardSettingsLink,
capabilities: { hasUploadMediaAction, canManageSettings },
MediaUpload,
revisionLink,
} = useConfig();

const improvedAutosaves = useFeature('improvedAutosaves');

const allowedImageFileTypes = useMemo(
() =>
allowedImageMimeTypes
Expand All @@ -156,25 +184,31 @@ function PublishPanel({ nameOverride }) {
})
);

const { featuredMedia, publisherLogo, updateStory, capabilities } = useStory(
({
state: {
story: {
featuredMedia = { id: 0, url: '', height: 0, width: 0 },
publisherLogo = { id: 0, url: '', height: 0, width: 0 },
const { featuredMedia, publisherLogo, updateStory, capabilities, revisions } =
useStory(
({
state: {
story: {
featuredMedia = { id: 0, url: '', height: 0, width: 0 },
publisherLogo = { id: 0, url: '', height: 0, width: 0 },
revisions,
},
capabilities,
},
capabilities,
},
actions: { updateStory },
}) => {
return {
featuredMedia,
publisherLogo,
updateStory,
capabilities,
};
}
);
actions: { updateStory },
}) => {
return {
featuredMedia,
publisherLogo,
updateStory,
capabilities,
revisions,
};
}
);

const revisionCount = revisions?.count ? revisions?.count : 0;
const revisionId = revisions?.id ? revisions?.id : 0;

const handleChangePoster = useCallback(
/**
Expand Down Expand Up @@ -414,6 +448,37 @@ function PublishPanel({ nameOverride }) {
</LabelWrapper>
</DropdownWrapper>
</HighlightRow>
{improvedAutosaves && revisionCount >= 1 ? (
<RevisionsWrapper>
<Label>
<LabelIconWrapper>
<Icons.History width={24} height={24} aria-hidden />
</LabelIconWrapper>
<RevisionsLabel>
{sprintf(
/* translators: %d: number of revisions. */
_n(
'%d Revision',
'%d Revisions',
revisionCount,
'web-stories'
),
revisionCount
)}
</RevisionsLabel>
{revisionLink && revisionId ? (
<Link
rel="noopener noreferrer"
target="_blank"
href={addQueryArgs(revisionLink, { revision: revisionId })}
size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.X_SMALL}
>
{__('Browse', 'web-stories')}
</Link>
) : null}
</Label>
</RevisionsWrapper>
) : null}
</PanelContent>
</Panel>
);
Expand Down
14 changes: 13 additions & 1 deletion packages/wp-story-editor/src/components/documentPane/publish/test/publish.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
SidebarContext,
} from '@googleforcreators/story-editor';
import { renderWithTheme } from '@googleforcreators/test-utils';
import { useFeature } from 'flagged';

/**
* Internal dependencies
Expand All @@ -37,6 +38,8 @@ jest.mock('./../../../../api/publisherLogos', () => ({
addPublisherLogo: jest.fn().mockResolvedValue([]),
}));

jest.mock('flagged');

function MediaUpload({ render }) {
const open = jest.fn();
return render(open);
Expand All @@ -59,6 +62,7 @@ function arrange(
date: '2020-01-01T20:20:20',
modified: '2020-01-01T20:20:19',
featuredMedia: { id: 0, url: '', height: 0, width: 0 },
revisions: { count: 8, id: 189 },
publisherLogo: { id: 0, url: '', height: 0, width: 0 },
status: 'draft',
},
Expand All @@ -71,6 +75,7 @@ function arrange(
allowedMimeTypes: {
image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
},
revisionLink: 'http://example.com',
apiCallbacks: {
getAuthors: jest.fn().mockResolvedValue({}),
},
Expand Down Expand Up @@ -114,6 +119,7 @@ describe('PublishPanel', () => {
JSON.stringify({ isCollapsed: false })
);
MockDate.set('2020-07-15T12:00:00+00:00');
useFeature.mockImplementation(() => true);
});

afterAll(() => {
Expand All @@ -125,9 +131,15 @@ describe('PublishPanel', () => {
arrange();
const publishPanel = screen.getByText('Publishing');
const publisherLogo = screen.getByText('Publisher Logo');

const revisionsText = screen.getByText('8 Revisions');
const revisionsLink = screen.getByRole('link', { name: 'Browse' });
await waitFor(() => expect(publishPanel).toBeDefined());
await waitFor(() => expect(publisherLogo).toBeDefined());
await waitFor(() => expect(revisionsText).toBeDefined());
expect(revisionsLink).toHaveAttribute(
'href',
'http://example.com/?revision=189'
);
});

it('should display Author field if authors available', async () => {
Expand Down

0 comments on commit 09325a7

Please sign in to comment.