@elementor/editor-app-bar 0.1.0

package/src/components/locations/utilities-menu-location.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Fragment } from 'react';
+import ToolbarMenu from '../ui/toolbar-menu';
+import { utilitiesMenu } from '../../locations';
+import { Divider } from '@elementor/ui';
+import ToolbarMenuMore from '../ui/toolbar-menu-more';
+
+const MAX_TOOLBAR_ACTIONS = 3;
+
+const { useMenuItems } = utilitiesMenu;
+
+export default function UtilitiesMenuLocation() {
+	const menuItems = useMenuItems();
+
+	const toolbarMenuItems = menuItems.default.slice( 0, MAX_TOOLBAR_ACTIONS );
+	const popoverMenuItems = menuItems.default.slice( MAX_TOOLBAR_ACTIONS );
+
+	return (
+		<ToolbarMenu>
+			{ toolbarMenuItems.map(
+				( { MenuItem, id }, index ) => (
+					<Fragment key={ id }>
+						{ index === 0 && <Divider orientation="vertical" /> }
+						<MenuItem />
+					</Fragment>
+				)
+			) }
+			{ popoverMenuItems.length > 0 && (
+				<ToolbarMenuMore id="elementor-editor-app-bar-utilities-more">
+					{ popoverMenuItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+				</ToolbarMenuMore>
+			) }
+		</ToolbarMenu>
+	);
+}

package/src/components/ui/popover-menu-item.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {
+	MenuItem,
+	MenuItemProps,
+	ListItemText,
+	ListItemIcon,
+	withDirection,
+} from '@elementor/ui';
+import { ArrowUpRightIcon } from '@elementor/icons';
+
+type ExtraProps = {
+	href?: string;
+	target?: string;
+	text?: string;
+	icon?: JSX.Element;
+}
+
+export type PopoverMenuItemProps = MenuItemProps & ExtraProps;
+
+const DirectionalArrowIcon = withDirection( ArrowUpRightIcon );
+
+export default function PopoverMenuItem( { text, icon, onClick, href, target, disabled, ...props }: PopoverMenuItemProps ) {
+	const isExternalLink = href && target === '_blank';
+
+	return (
+		<MenuItem
+			{ ...props }
+			disabled={ disabled }
+			onClick={ onClick }
+			component={ href ? 'a' : 'div' }
+			href={ href }
+			target={ target }
+		>
+			<ListItemIcon>{ icon }</ListItemIcon>
+			<ListItemText primary={ text } />
+			{ isExternalLink && <DirectionalArrowIcon /> }
+		</MenuItem>
+	);
+}

package/src/components/ui/popover-menu.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Menu, MenuProps } from '@elementor/ui';
+import { MenuContextProvider } from '../../contexts/menu-context';
+
+export type PopoverMenuProps = MenuProps;
+
+export default function PopoverMenu( { children, ...props }: PopoverMenuProps ) {
+	return (
+		<MenuContextProvider type={ 'popover' }>
+			<Menu
+				PaperProps={ {
+					sx: { mt: 4 },
+				} }
+				{ ...props }
+				MenuListProps={ {
+					component: 'div',
+				} }
+			>
+				{ children }
+			</Menu>
+		</MenuContextProvider>
+	);
+}

package/src/components/ui/toolbar-logo.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { ToggleButton, ToggleButtonProps, SvgIconProps, SvgIcon, styled } from '@elementor/ui';
+
+interface StyledElementorLogoProps extends SvgIconProps {
+	showMenuIcon?: boolean;
+}
+
+type ToolbarLogoProps = Omit<ToggleButtonProps, 'value'>;
+
+const ElementorLogo = ( props: SvgIconProps ) => {
+	return (
+		<SvgIcon viewBox="0 0 32 32" { ...props }>
+			<g>
+				<circle cx="16" cy="16" r="16" />
+				<path d="M11.7 9H9V22.3H11.7V9Z" />
+				<path d="M22.4 9H9V11.7H22.4V9Z" />
+				<path d="M22.4 14.4004H9V17.1004H22.4V14.4004Z" />
+				<path d="M22.4 19.6992H9V22.3992H22.4V19.6992Z" />
+			</g>
+		</SvgIcon>
+	);
+};
+
+const StyledToggleButton = styled( ToggleButton )( () => ( {
+	padding: 0,
+	'&.MuiToggleButton-root:hover': {
+		backgroundColor: 'initial',
+	},
+	'&.MuiToggleButton-root.Mui-selected': {
+		backgroundColor: 'initial',
+	},
+} ) );
+
+const StyledElementorLogo = styled( ElementorLogo, {
+	shouldForwardProp: ( prop ) => prop !== 'showMenuIcon',
+} )<StyledElementorLogoProps>( ( { theme, showMenuIcon } ) => ( {
+	width: 'auto',
+	height: '100%',
+	'& path': {
+		fill: 'initial',
+		transition: 'all 0.2s linear',
+		transformOrigin: 'bottom left',
+		'&:first-of-type': {
+			transitionDelay: ! showMenuIcon && '0.2s',
+			transform: showMenuIcon && 'translateY(-9px) scaleY(0)',
+		},
+		'&:not(:first-of-type)': {
+			// Emotion automatically change 4 to -4 in RTL moode.
+			transform: ! showMenuIcon && `translateX(${ theme.direction === 'rtl' ? '4' : '9' }px) scaleX(0.6)`,
+		},
+		'&:nth-of-type(2)': {
+			transitionDelay: showMenuIcon ? '0' : '0.2s',
+		},
+		'&:nth-of-type(3)': {
+			transitionDelay: '0.1s',
+		},
+		'&:nth-of-type(4)': {
+			transitionDelay: showMenuIcon ? '0.2s' : '0',
+		},
+	},
+} ) );
+
+export default function ToolbarLogo( props: ToolbarLogoProps ) {
+	const [ isHoverState, setIsHoverState ] = useState( false );
+	const showMenuIcon = props.selected || isHoverState;
+
+	return (
+		<StyledToggleButton
+			{ ...props }
+			value="selected"
+			size="small"
+			onMouseEnter={ () => setIsHoverState( true ) }
+			onMouseLeave={ () => setIsHoverState( false ) }
+		>
+			<StyledElementorLogo titleAccess={ __( 'Elementor Logo', 'elementor' ) } showMenuIcon={ showMenuIcon } />
+		</StyledToggleButton>
+	);
+}

package/src/components/ui/toolbar-menu-item.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Box, IconButton, IconButtonProps, Tooltip } from '@elementor/ui';
+
+export type ToolbarMenuItemProps = IconButtonProps & {
+	title?: string;
+	selected?: boolean;
+}
+
+export default function ToolbarMenuItem( { title, ...props }: ToolbarMenuItemProps ) {
+	return (
+		<Tooltip title={ title }>
+			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+			<Box component="span" aria-label={ undefined }>
+				<IconButton { ...props } aria-label={ title } size="small" />
+			</Box>
+		</Tooltip>
+	);
+}

package/src/components/ui/toolbar-menu-more.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui';
+import ToolbarMenuItem from './toolbar-menu-item';
+import { __ } from '@wordpress/i18n';
+import { DotsVerticalIcon } from '@elementor/icons';
+import PopoverMenu from './popover-menu';
+
+export type ToolbarMenuMoreProps = PropsWithChildren<{
+	id: string;
+}>
+
+export default function ToolbarMenuMore( { children, id }: ToolbarMenuMoreProps ) {
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: id,
+	} );
+
+	return (
+		<>
+			<ToolbarMenuItem { ...bindTrigger( popupState ) } title={ __( 'More', 'elementor' ) }>
+				<DotsVerticalIcon />
+			</ToolbarMenuItem>
+			<PopoverMenu onClick={ popupState.close } { ...bindMenu( popupState ) }>
+				{ children }
+			</PopoverMenu>
+		</>
+	);
+}

package/src/components/ui/toolbar-menu-toggle-item.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Box, ToggleButton, ToggleButtonProps, Tooltip } from '@elementor/ui';
+
+export type ToolbarMenuToggleItemProps = Omit<ToggleButtonProps, 'onChange'> & {
+	title?: string;
+	onClick?: () => void;
+}
+
+export default function ToolbarMenuToggleItem( { title, onClick, ...props }: ToolbarMenuToggleItemProps ) {
+	return (
+		<Tooltip title={ title }>
+			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+			<Box component="span" aria-label={ undefined }>
+				<ToggleButton { ...props } onChange={ onClick } aria-label={ title } size="small" />
+			</Box>
+		</Tooltip>
+	);
+}

package/src/components/ui/toolbar-menu.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Stack, StackProps } from '@elementor/ui';
+import { MenuContextProvider } from '../../contexts/menu-context';
+
+export type ToolbarMenuProps = StackProps;
+
+export default function ToolbarMenu( { children, ...props }: ToolbarMenuProps ) {
+	return (
+		<MenuContextProvider type={ 'toolbar' }>
+			<Stack sx={ { px: 4 } } spacing={ 4 } direction="row" alignItems="center" { ...props }>
+				{ children }
+			</Stack>
+		</MenuContextProvider>
+	);
+}

package/src/contexts/menu-context.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+type MenuContextValue = {
+	type: 'toolbar' | 'popover';
+}
+
+const MenuContext = createContext<MenuContextValue>( { type: 'toolbar' } );
+
+export function MenuContextProvider( { type, children }: PropsWithChildren<MenuContextValue> ) {
+	return (
+		<MenuContext.Provider value={ { type } }>
+			{ children }
+		</MenuContext.Provider>
+	);
+}
+
+export function useMenuContext() {
+	return useContext( MenuContext );
+}

package/src/extensions/documents-indicator/components/__tests__/settings-button.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import SettingsButton from '../settings-button';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+import { render } from '@testing-library/react';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	openRoute: jest.fn(),
+	useRouteStatus: jest.fn( () => ( { isActive: false, isBlocked: false } ) ),
+} ) );
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn( () => ( {
+		type: { value: 'wp-page', label: 'Page' },
+	} ) ),
+	useHostDocument: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - App bar document settings button', () => {
+	it( 'should open the document settings panel on click', () => {
+		// Arrange.
+		const { getByRole } = render( <SettingsButton /> );
+
+		// Act.
+		getByRole( 'button' ).click();
+
+		// Assert.
+		expect( openRoute ).toHaveBeenCalledTimes( 1 );
+		expect( openRoute ).toHaveBeenCalledWith( 'panel/page-settings/settings' );
+	} );
+
+	it( 'should have the correct props for disabled and selected', () => {
+		// Arrange.
+		jest.mocked( useRouteStatus ).mockReturnValue( { isActive: true, isBlocked: true } );
+
+		// Act.
+		const { getByRole } = render( <SettingsButton /> );
+
+		// Assert.
+		const button = getByRole( 'button' );
+
+		expect( button ).toHaveAttribute( 'disabled' );
+		expect( button ).toHaveAttribute( 'aria-pressed', 'true' );
+		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
+		expect( useRouteStatus ).toHaveBeenCalledWith( 'panel/page-settings' );
+	} );
+} );

package/src/extensions/documents-indicator/components/settings-button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Box, ToggleButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+import { SettingsIcon } from '@elementor/icons';
+import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+
+export default function SettingsButton() {
+	const activeDocument = useActiveDocument();
+	const hostDocument = useHostDocument();
+
+	const document = activeDocument && activeDocument.type.value !== 'kit'
+		? activeDocument
+		: hostDocument;
+
+	const { isActive, isBlocked } = useRouteStatus( 'panel/page-settings' );
+
+	if ( ! document ) {
+		return null;
+	}
+
+	/* translators: %s: Post type label. */
+	const title = __( '%s Settings', 'elementor' )
+		.replace( '%s', document.type.label );
+
+	return (
+		<Tooltip title={ title }>
+			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+			<Box component="span" aria-label={ undefined }>
+				<ToggleButton
+					value="document-settings"
+					selected={ isActive }
+					disabled={ isBlocked }
+					onChange={ () => openRoute( 'panel/page-settings/settings' ) }
+					aria-label={ title }
+					size="small"
+				>
+					<SettingsIcon />
+				</ToggleButton>
+			</Box>
+		</Tooltip>
+	);
+}

package/src/extensions/documents-indicator/index.ts

@@ -0,0 +1,12 @@
+import { injectIntoPageIndication } from '../../locations';
+import SettingsButton from './components/settings-button';
+
+export function init() {
+	injectIntoPageIndication( {
+		name: 'document-settings-button',
+		filler: SettingsButton,
+		options: {
+			priority: 20, // After document indicator.
+		},
+	} );
+}

package/src/extensions/documents-preview/hooks/__tests__/use-document-preview-props.test.ts

@@ -0,0 +1,43 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useActionProps from '../use-action-props';
+import { runCommand } from '@elementor/editor-v1-adapters';
+import { createMockDocument } from 'test-utils';
+import { useActiveDocument } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
+	it( 'should open the document preview', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
+
+		const command = 'editor/documents/preview';
+		const args = { id: 1, force: true };
+
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+		result.current.onClick();
+
+		// Assert.
+		expect( runCommand ).toBeCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( command, args );
+	} );
+
+	it( 'should not run the command when there is no document', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( null );
+
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+		result.current.onClick();
+
+		// Assert.
+		expect( runCommand ).toBeCalledTimes( 0 );
+	} );
+} );

package/src/extensions/documents-preview/hooks/use-action-props.ts

@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+import { EyeIcon } from '@elementor/icons';
+import { runCommand } from '@elementor/editor-v1-adapters';
+import { useActiveDocument } from '@elementor/editor-documents';
+
+export default function useActionProps() {
+	const document = useActiveDocument();
+
+	return {
+		icon: EyeIcon,
+		title: __( 'Preview Changes', 'elementor' ),
+		onClick: () => document && runCommand( 'editor/documents/preview', {
+			id: document.id,
+			force: true,
+		} ),
+	};
+}

package/src/extensions/documents-preview/index.ts

@@ -0,0 +1,10 @@
+import { utilitiesMenu } from '../../locations';
+import useDocumentPreviewProps from './hooks/use-action-props';
+
+export function init() {
+	utilitiesMenu.registerAction( {
+		name: 'document-preview-button',
+		priority: 30, // After help.
+		useProps: useDocumentPreviewProps,
+	} );
+}

package/src/extensions/documents-save/components/__tests__/primary-action-menu.test.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import PrimaryActionMenu from '../primary-action-menu';
+import { documentOptionsMenu } from '../../../../locations';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - Primary action menu', () => {
+	it( 'should render the actions ordered properly (save, default)', () => {
+		// Arrange.
+		documentOptionsMenu.registerAction( {
+			name: 'test--first-action',
+			group: 'save',
+			props: {
+				title: 'First action',
+				icon: () => <span>a</span>,
+			},
+		} );
+
+		documentOptionsMenu.registerAction( {
+			name: 'test--second-action',
+			group: 'default',
+			props: {
+				title: 'Second action',
+				icon: () => <span>a</span>,
+			},
+		} );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryActionMenu open={ true } anchorEl={ document.body } /> );
+
+		// Assert.
+		const menuItems = getAllByRole( 'menuitem' );
+
+		expect( menuItems ).toHaveLength( 2 );
+		expect( menuItems[ 0 ] ).toHaveTextContent( 'First action' );
+		expect( menuItems[ 1 ] ).toHaveTextContent( 'Second action' );
+	} );
+} );

package/src/extensions/documents-save/components/__tests__/primary-action.test.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import PrimaryAction from '../primary-action';
+import { render } from '@testing-library/react';
+import { createMockDocument } from 'test-utils';
+import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useActiveDocumentActions: jest.fn(),
+} ) );
+
+const actionsMock = {
+	save: jest.fn(),
+	saveDraft: jest.fn(),
+	saveTemplate: jest.fn(),
+};
+
+jest.mocked( useActiveDocumentActions ).mockReturnValue( actionsMock );
+
+describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
+	it( 'should not render when there is no active document', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( null );
+
+		// Act.
+		const { container } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'should have "Submit" text when the user cannot publish the document', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			userCan: {
+				publish: false,
+			},
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Submit' );
+	} );
+
+	it( 'should have "Publish" text when the user can publish the document', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			userCan: {
+				publish: true,
+			},
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Publish' );
+	} );
+
+	it( 'should be disabled when the document is a Kit', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			isDirty: true,
+			type: {
+				value: 'kit',
+				label: 'Kit',
+			},
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( getAllByRole( 'button' )[ 0 ] ).toBeDisabled();
+	} );
+
+	it( 'should be disabled when the document is pristine', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( { isDirty: false } );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( getAllByRole( 'button' )[ 0 ] ).toBeDisabled();
+	} );
+
+	it( 'should always be enabled when the document status is draft', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			isDirty: false,
+			status: {
+				value: 'draft',
+				label: 'Draft',
+			},
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		// Assert.
+		expect( getAllByRole( 'button' )[ 0 ] ).toBeEnabled();
+	} );
+
+	it( 'should save the active document on click', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( { isDirty: true } );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		getAllByRole( 'button' )[ 0 ]?.click();
+
+		// Assert.
+		expect( actionsMock.save ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should show a loader & not save when there is save in progress', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			isDirty: true,
+			isSaving: true,
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole } = render( <PrimaryAction /> );
+
+		const button = getAllByRole( 'button' )[ 0 ];
+		const loader = getAllByRole( 'progressbar' )[ 0 ];
+
+		button?.click();
+
+		// Assert.
+		expect( actionsMock.save ).not.toHaveBeenCalled();
+		expect( loader ).toBeInTheDocument();
+		expect( button.textContent ).toBe( '' );
+	} );
+
+	it( 'should not show a loader when the button is disabled', () => {
+		// Arrange.
+		const mockDocument = createMockDocument( {
+			type: {
+				value: 'kit',
+				label: 'Kit',
+			}, // Disables the button.
+			isSaving: true,
+		} );
+
+		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+
+		// Act.
+		const { getAllByRole, queryByRole } = render( <PrimaryAction /> );
+		const button = getAllByRole( 'button' )[ 0 ];
+		const loader = queryByRole( 'progressbar' );
+
+		// Assert.
+		expect( loader ).not.toBeInTheDocument();
+		expect( button.textContent ).not.toBe( '' );
+	} );
+} );