@elementor/editor-app-bar 0.1.0

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Divider, styled } from '@elementor/ui';
+import { documentOptionsMenu } from '../../../locations';
+import PopoverMenu, { PopoverMenuProps } from '../../../components/ui/popover-menu';
+
+const { useMenuItems } = documentOptionsMenu;
+
+// CSS hack to hide dividers when a group is rendered empty (due to a limitation in our locations' mechanism).
+// It doesn't cover all the cases (i.e. when there are multiple dividers at the end), but it's good enough for our use-case.
+const StyledPopoverMenu = styled( PopoverMenu )`
+	& > .MuiPopover-paper > .MuiList-root > .MuiDivider-root {
+		&:only-child, /* A divider is being rendered lonely */
+		&:last-child, /* The last group renders empty but renders a divider */
+		& + .MuiDivider-root /* Multiple dividers due to multiple empty groups */ {
+			display: none;
+		}
+	}
+`;
+
+export default function PrimaryActionMenu( props: PopoverMenuProps ) {
+	const { save: saveActions, default: defaultActions } = useMenuItems();
+
+	return (
+		<StyledPopoverMenu
+			{ ...props }
+			anchorOrigin={ {
+				vertical: 'bottom',
+				horizontal: 'right',
+			} }
+			transformOrigin={ {
+				vertical: 'top',
+				horizontal: 'right',
+			} }
+			PaperProps={ {
+				sx: { mt: 2, ml: 3 },
+			} }
+		>
+			{ saveActions.map( ( { MenuItem, id }, index ) => ( [
+				( index > 0 ) && <Divider key={ `${ id }-divider` } />,
+				<MenuItem key={ id } />,
+			] ) ) }
+
+			{ defaultActions.length > 0 && <Divider /> }
+
+			{ defaultActions.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+		</StyledPopoverMenu>
+	);
+}

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import PrimaryActionMenu from './primary-action-menu';
+import {
+	bindMenu,
+	bindTrigger,
+	Button,
+	ButtonGroup,
+	CircularProgress,
+	Tooltip,
+	usePopupState,
+} from '@elementor/ui';
+import { Document, useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { ChevronDownIcon } from '@elementor/icons';
+
+export default function PrimaryAction() {
+	const document = useActiveDocument();
+	const { save } = useActiveDocumentActions();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'document-save-options',
+	} );
+
+	if ( ! document ) {
+		return null;
+	}
+
+	const isDisabled = ! isEnabled( document );
+
+	// When the document is being saved, the spinner should not appear.
+	// Usually happens when the Kit is being saved.
+	const shouldShowSpinner = document.isSaving && ! isDisabled;
+
+	return (
+		<>
+			<ButtonGroup size="large" variant="contained">
+				<Button
+					onClick={ () => ! document.isSaving && save() }
+					sx={ { width: '120px' } }
+					disabled={ isDisabled }
+				>
+					{ shouldShowSpinner ? <CircularProgress /> : getLabel( document ) }
+				</Button>
+
+				<Tooltip
+					title={ __( 'Save Options', 'elementor' ) }
+					PopperProps={ {
+						sx: {
+							'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+								mt: 3,
+								mr: 1,
+							},
+						},
+					} }
+				>
+					<Button sx={ { px: 0 } } { ...bindTrigger( popupState ) }>
+						<ChevronDownIcon />
+					</Button>
+				</Tooltip>
+			</ButtonGroup>
+			<PrimaryActionMenu { ...bindMenu( popupState ) } onClick={ popupState.close } />
+		</>
+	);
+}
+
+function getLabel( document: Document ) {
+	return document.userCan.publish
+		? __( 'Publish', 'elementor' )
+		: __( 'Submit', 'elementor' );
+}
+
+function isEnabled( document: Document ) {
+	if ( document.type.value === 'kit' ) {
+		return false;
+	}
+
+	return document.isDirty || document.status.value === 'draft';
+}

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

@@ -0,0 +1,64 @@
+import { createMockDocument } from 'test-utils';
+import { renderHook } from '@testing-library/react-hooks';
+import useDocumentSaveDraftProps from '../use-document-save-draft-props';
+import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useActiveDocumentActions: jest.fn(),
+} ) );
+
+const documentActions = {
+	save: jest.fn(),
+	saveDraft: jest.fn(),
+	saveTemplate: jest.fn(),
+};
+
+describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
+	it( 'should save a draft of the current document', () => {
+		// Arrange.
+		jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
+		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
+
+		// Act.
+		const { result } = renderHook( () => useDocumentSaveDraftProps() );
+		result.current.onClick?.();
+
+		// Assert.
+		expect( documentActions.saveDraft ).toBeCalledTimes( 1 );
+	} );
+
+	it.each( [
+		{
+			condition: 'there is no document',
+			document: null,
+		},
+		{
+			condition: 'a draft is being saved',
+			document: createMockDocument( {
+				isSavingDraft: true,
+			} ),
+		},
+		{
+			condition: 'the document is being saved',
+			document: createMockDocument( {
+				isSaving: true,
+			} ),
+		},
+		{
+			condition: 'the document is pristine',
+			document: createMockDocument( {
+				isDirty: false,
+			} ),
+		},
+	] )( 'should be disabled when $condition', ( { document } ) => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockReturnValue( document );
+
+		// Act.
+		const { result } = renderHook( () => useDocumentSaveDraftProps() );
+
+		// Assert.
+		expect( result.current.disabled ).toBe( true );
+	} );
+} );

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

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useActiveDocumentActions } from '@elementor/editor-documents';
+import useDocumentSaveTemplateProps from '../use-document-save-template-props';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocumentActions: jest.fn(),
+} ) );
+
+const documentActions = {
+	save: jest.fn(),
+	saveDraft: jest.fn(),
+	saveTemplate: jest.fn(),
+};
+
+describe( '@elementor/editor-app-bar - useDocumentSaveTemplateProps', () => {
+	it( 'should open the "save as template" modal', () => {
+		// Arrange.
+		jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
+
+		// Act.
+		const { result } = renderHook( () => useDocumentSaveTemplateProps() );
+		result.current.onClick?.();
+
+		// Assert.
+		expect( documentActions.saveTemplate ).toBeCalledTimes( 1 );
+	} );
+} );

package/src/extensions/documents-save/hooks/use-document-save-draft-props.ts

@@ -0,0 +1,16 @@
+import { __ } from '@wordpress/i18n';
+import { ActionProps } from '../../../types';
+import { FileReportIcon } from '@elementor/icons';
+import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+
+export default function useDocumentSaveDraftProps(): ActionProps {
+	const document = useActiveDocument();
+	const { saveDraft } = useActiveDocumentActions();
+
+	return {
+		icon: FileReportIcon,
+		title: __( 'Save Draft', 'elementor' ),
+		onClick: saveDraft,
+		disabled: ! document || document.isSaving || document.isSavingDraft || ! document.isDirty,
+	};
+}

package/src/extensions/documents-save/hooks/use-document-save-template-props.ts

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+import { ActionProps } from '../../../types';
+import { FolderIcon } from '@elementor/icons';
+import { useActiveDocumentActions } from '@elementor/editor-documents';
+
+export default function useDocumentSaveTemplateProps(): ActionProps {
+	const { saveTemplate } = useActiveDocumentActions();
+
+	return {
+		icon: FolderIcon,
+		title: __( 'Save as Template', 'elementor' ),
+		onClick: saveTemplate,
+	};
+}

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

@@ -0,0 +1,26 @@
+import { documentOptionsMenu, injectIntoPrimaryAction } from '../../locations';
+import useDocumentSaveDraftProps from './hooks/use-document-save-draft-props';
+import useDocumentSaveTemplateProps from './hooks/use-document-save-template-props';
+import PrimaryAction from './components/primary-action';
+
+export function init() {
+	injectIntoPrimaryAction( {
+		name: 'document-primary-action',
+		filler: PrimaryAction,
+	} );
+
+	// Documents options menu.
+	documentOptionsMenu.registerAction( {
+		group: 'save',
+		name: 'document-save-draft',
+		priority: 10, // Before save as template.
+		useProps: useDocumentSaveDraftProps,
+	} );
+
+	documentOptionsMenu.registerAction( {
+		group: 'save',
+		name: 'document-save-as-template',
+		priority: 20, // After save draft.
+		useProps: useDocumentSaveTemplateProps,
+	} );
+}

package/src/extensions/elements/hooks/__tests__/use-action-props.test.ts

@@ -0,0 +1,33 @@
+import useActionProps from '../use-action-props';
+import { renderHook } from '@testing-library/react-hooks';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	openRoute: jest.fn(),
+	useRouteStatus: jest.fn( () => ( { isActive: true, isBlocked: true } ) ),
+} ) );
+
+describe( '@elementor/editor-app-bar - useElementsPanelActionProps', () => {
+	it( 'should open the elements panel on click', () => {
+		// Arrange.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Act.
+		result.current.onClick();
+
+		// Assert.
+		expect( openRoute ).toHaveBeenCalledTimes( 1 );
+		expect( openRoute ).toHaveBeenCalledWith( 'panel/elements/categories' );
+	} );
+
+	it( 'should have the correct props for disabled and selected', () => {
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Assert.
+		expect( result.current.selected ).toBe( true );
+		expect( result.current.disabled ).toBe( true );
+		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
+		expect( useRouteStatus ).toHaveBeenCalledWith( 'panel/elements' );
+	} );
+} );

package/src/extensions/elements/hooks/use-action-props.ts

@@ -0,0 +1,15 @@
+import { PlusIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+export default function useActionProps() {
+	const { isActive, isBlocked } = useRouteStatus( 'panel/elements' );
+
+	return {
+		title: __( 'Add Element', 'elementor' ),
+		icon: PlusIcon,
+		onClick: () => openRoute( 'panel/elements/categories' ),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/elements/index.ts

@@ -0,0 +1,13 @@
+import syncPanelTitle from './sync/sync-panel-title';
+import { toolsMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	syncPanelTitle();
+
+	toolsMenu.registerToggleAction( {
+		name: 'open-elements-panel',
+		priority: 1,
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/elements/sync/__tests__/sync-panel-title.test.ts

@@ -0,0 +1,92 @@
+import syncPanelTitle from '../sync-panel-title';
+import { isRouteActive } from '@elementor/editor-v1-adapters';
+
+type ExtendedWindow = Window & {
+	elementor?: {
+		getPanelView: () => {
+			getHeaderView: () => {
+				setTitle: jest.Mock;
+			}
+		}
+	}
+}
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	isRouteActive: jest.fn().mockReturnValue( false ),
+} ) );
+
+const mockIsRouteActive = jest.mocked( isRouteActive );
+
+describe( '@elementor/editor-app-bar - syncPanelTitle', () => {
+	let mockSetTitle: jest.Mock;
+
+	beforeEach( () => {
+		mockSetTitle = jest.fn();
+
+		( window as unknown as ExtendedWindow ).elementor = {
+			getPanelView: () => ( {
+				getHeaderView: () => ( {
+					setTitle: mockSetTitle,
+				} ),
+			} ),
+		};
+	} );
+
+	it( 'should change the panel title when opening the elements panel', () => {
+		// Arrange.
+		syncPanelTitle();
+
+		// Act.
+		window.dispatchEvent( new CustomEvent( 'elementor/routes/open', {
+			detail: {
+				route: 'panel/elements/categories',
+			},
+		} ) );
+
+		// Assert.
+		expect( mockSetTitle ).toHaveBeenCalledWith( 'Elements' );
+	} );
+
+	it( 'should change the panel title when V1 is ready and the elements panel is open', () => {
+		// Arrange.
+		mockIsRouteActive.mockImplementation( ( route ) => route === 'panel/elements' );
+		syncPanelTitle();
+
+		// Act.
+		window.dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+
+		// Assert.
+		expect( mockSetTitle ).toHaveBeenCalledWith( 'Elements' );
+		expect( mockIsRouteActive ).toHaveBeenCalledWith( 'panel/elements' );
+	} );
+
+	it( 'should not change the panel title when V1 is ready and the elements panel is not open', () => {
+		// Arrange.
+		mockIsRouteActive.mockImplementation( ( route ) => route === 'not/the/panel' );
+		syncPanelTitle();
+
+		// Act.
+		window.dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
+
+		// Assert.
+		expect( mockSetTitle ).not.toHaveBeenCalled();
+		expect( mockIsRouteActive ).toHaveBeenCalledWith( 'panel/elements' );
+	} );
+
+	it( 'should not change the panel title when opening the site settings', () => {
+		// Arrange.
+		mockIsRouteActive.mockImplementation( ( route ) => route === 'panel/global/menu' );
+		syncPanelTitle();
+
+		// Act.
+		window.dispatchEvent( new CustomEvent( 'elementor/routes/open', {
+			detail: {
+				route: 'panel/global/menu',
+			},
+		} ) );
+
+		// Assert.
+		expect( mockSetTitle ).not.toHaveBeenCalled();
+	} );
+} );

package/src/extensions/elements/sync/sync-panel-title.ts

@@ -0,0 +1,47 @@
+import { __ } from '@wordpress/i18n';
+import { isRouteActive, listenTo, routeOpenEvent, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+
+type ExtendedWindow = Window & {
+	elementor: {
+		getPanelView: () => {
+			getHeaderView: () => {
+				setTitle: ( title: string ) => void;
+			}
+		}
+	}
+}
+
+export default function syncPanelTitle() {
+	const panelTitle = __( 'Elements', 'elementor' );
+	const tabTitle = __( 'Widgets', 'elementor' );
+
+	listenTo(
+		routeOpenEvent( 'panel/elements' ),
+		() => {
+			setPanelTitle( panelTitle );
+			setTabTitle( tabTitle );
+		}
+	);
+
+	listenTo(
+		v1ReadyEvent(),
+		() => {
+			if ( isRouteActive( 'panel/elements' ) ) {
+				setPanelTitle( panelTitle );
+				setTabTitle( tabTitle );
+			}
+		}
+	);
+}
+
+function setPanelTitle( title: string ) {
+	( window as unknown as ExtendedWindow ).elementor?.getPanelView?.()?.getHeaderView?.()?.setTitle?.( title );
+}
+
+function setTabTitle( title: string ) {
+	const tab = document.querySelector( '.elementor-component-tab[data-tab="categories"]' );
+
+	if ( tab ) {
+		tab.textContent = title;
+	}
+}

package/src/extensions/finder/hooks/__tests__/use-action-props.test.ts

@@ -0,0 +1,36 @@
+import useActionProps from '../use-action-props';
+import { renderHook } from '@testing-library/react-hooks';
+import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+	useRouteStatus: jest.fn( () => ( { isActive: true, isBlocked: true } ) ),
+} ) );
+
+describe( '@elementor/editor-app-bar - useFinderActionProps', () => {
+	it( 'should toggle the finder state on click', () => {
+		// Arrange.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Act.
+		result.current.onClick();
+
+		// Assert.
+		expect( runCommand ).toHaveBeenCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( 'finder/toggle' );
+	} );
+
+	it( 'should have the correct props for disabled and selected', () => {
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Assert.
+		expect( result.current.selected ).toBe( true );
+		expect( result.current.disabled ).toBe( true );
+		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
+		expect( useRouteStatus ).toHaveBeenCalledWith( 'finder', {
+			blockOnKitRoutes: false,
+			blockOnPreviewMode: false,
+		} );
+	} );
+} );

package/src/extensions/finder/hooks/use-action-props.ts

@@ -0,0 +1,18 @@
+import { __ } from '@wordpress/i18n';
+import { SearchIcon } from '@elementor/icons';
+import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+export default function useActionProps() {
+	const { isActive, isBlocked } = useRouteStatus( 'finder', {
+		blockOnKitRoutes: false,
+		blockOnPreviewMode: false,
+	} );
+
+	return {
+		title: __( 'Finder', 'elementor' ),
+		icon: SearchIcon,
+		onClick: () => runCommand( 'finder/toggle' ),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/finder/index.ts

@@ -0,0 +1,10 @@
+import { utilitiesMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	utilitiesMenu.registerToggleAction( {
+		name: 'toggle-finder',
+		priority: 10, // Before help.
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/help/index.ts

@@ -0,0 +1,18 @@
+import { utilitiesMenu } from '../../locations';
+import { __ } from '@wordpress/i18n';
+import { HelpIcon } from '@elementor/icons';
+
+export function init() {
+	utilitiesMenu.registerLink( {
+		name: 'open-help-center',
+		priority: 20, // After Finder.
+		useProps: () => {
+			return {
+				title: __( 'Help', 'elementor' ),
+				href: 'https://go.elementor.com/editor-top-bar-learn/',
+				icon: HelpIcon,
+				target: '_blank',
+			};
+		},
+	} );
+}

package/src/extensions/history/hooks/__tests__/use-action-props.test.ts

@@ -0,0 +1,33 @@
+import useActionProps from '../use-action-props';
+import { renderHook } from '@testing-library/react-hooks';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	openRoute: jest.fn(),
+	useRouteStatus: jest.fn( () => ( { isActive: true, isBlocked: true } ) ),
+} ) );
+
+describe( '@elementor/editor-app-bar - useHistoryActionProps', () => {
+	it( 'should open the history panel when clicked', () => {
+		// Arrange.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Act.
+		result.current.onClick();
+
+		// Assert.
+		expect( openRoute ).toHaveBeenCalledTimes( 1 );
+		expect( openRoute ).toHaveBeenCalledWith( 'panel/history/actions' );
+	} );
+
+	it( 'should have the correct props for disabled and selected', () => {
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Assert.
+		expect( result.current.selected ).toBe( true );
+		expect( result.current.disabled ).toBe( true );
+		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
+		expect( useRouteStatus ).toHaveBeenCalledWith( 'panel/history' );
+	} );
+} );

package/src/extensions/history/hooks/use-action-props.ts

@@ -0,0 +1,15 @@
+import { HistoryIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+export default function useActionProps() {
+	const { isActive, isBlocked } = useRouteStatus( 'panel/history' );
+
+	return {
+		title: __( 'History', 'elementor' ),
+		icon: HistoryIcon,
+		onClick: () => openRoute( 'panel/history/actions' ),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/history/index.ts

@@ -0,0 +1,10 @@
+import { mainMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	mainMenu.registerToggleAction( {
+		name: 'open-history',
+		priority: 20,
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/index.ts

@@ -0,0 +1,34 @@
+/**
+ * All the code in this directory is a temporary solution.
+ * The code should be moved to the appropriate packages.
+ */
+
+import { init as initDocumentsIndicator } from './documents-indicator';
+import { init as initDocumentsPreview } from './documents-preview';
+import { init as initDocumentsSave } from './documents-save';
+import { init as initElements } from './elements';
+import { init as initFinder } from './finder';
+import { init as initHelp } from './help';
+import { init as initHistory } from './history';
+import { init as initKeyboardShortcuts } from './keyboard-shortcuts';
+import { init as initSiteSettings } from './site-settings';
+import { init as initStructure } from './structure';
+import { init as initThemeBuilder } from './theme-builder';
+import { init as initUserPreferences } from './user-preferences';
+import { init as initWordpress } from './wordpress';
+
+export function init() {
+	initDocumentsIndicator();
+	initDocumentsPreview();
+	initDocumentsSave();
+	initElements();
+	initFinder();
+	initHelp();
+	initHistory();
+	initKeyboardShortcuts();
+	initSiteSettings();
+	initStructure();
+	initThemeBuilder();
+	initUserPreferences();
+	initWordpress();
+}