@elementor/editor-app-bar 0.1.0

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

@@ -0,0 +1,20 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useActionProps from '../use-action-props';
+import { runCommand } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - useKeyboardShortcutsActionProps', () => {
+	it( 'should open the keyboard shortcuts modal on click', () => {
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+
+		result.current.onClick?.();
+
+		// Assert.
+		expect( runCommand ).toHaveBeenCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( 'shortcuts/open' );
+	} );
+} );

package/src/extensions/keyboard-shortcuts/hooks/use-action-props.ts

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import { ActionProps } from '../../../types';
+import { KeyboardIcon } from '@elementor/icons';
+import { runCommand } from '@elementor/editor-v1-adapters';
+
+export default function useActionProps(): ActionProps {
+	return {
+		icon: KeyboardIcon,
+		title: __( 'Keyboard Shortcuts', 'elementor' ),
+		onClick: () => runCommand( 'shortcuts/open' ),
+	};
+}

package/src/extensions/keyboard-shortcuts/index.ts

@@ -0,0 +1,11 @@
+import { mainMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	mainMenu.registerAction( {
+		name: 'open-keyboard-shortcuts',
+		group: 'default',
+		priority: 40, // After user preferences.
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/site-settings/components/__tests__/portalled-primary-action.test.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { isRouteActive } from '@elementor/editor-v1-adapters';
+import { useActiveDocument } from '@elementor/editor-documents';
+import PortalledPrimaryAction from '../portalled-primary-action';
+import { createMockDocument } from 'test-utils';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	isRouteActive: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useActiveDocumentActions: jest.fn( () => ( {
+		save: jest.fn(),
+	} ) ),
+} ) );
+
+describe( '@elementor/editor-app-bar - Portalled primary action', () => {
+	beforeEach( () => {
+		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
+	} );
+
+	afterEach( () => {
+		document.body.innerHTML = '';
+	} );
+
+	it( 'should render the button when opening the site-settings panel', () => {
+		// Arrange.
+		createRootElement();
+
+		render( <PortalledPrimaryAction /> );
+
+		// Assert.
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+
+		// Act.
+		jest.mocked( isRouteActive ).mockImplementation( () => true );
+
+		navigateTo( 'panel/global/menu' );
+
+		// Assert.
+		expect( screen.queryByRole( 'button' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not render the button when opening another panel', () => {
+		// Arrange.
+		createRootElement();
+
+		jest.mocked( isRouteActive ).mockImplementation( () => false );
+
+		render( <PortalledPrimaryAction /> );
+
+		// Assert.
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+
+		// Act.
+		jest.mocked( isRouteActive ).mockImplementation( () => true );
+
+		navigateTo( 'panel/history' );
+
+		// Assert.
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render the button when the root element does not exist', () => {
+		// Arrange.
+		createRootElement( 'some-fake-id' );
+
+		jest.mocked( isRouteActive ).mockImplementation( () => true );
+
+		render( <PortalledPrimaryAction /> );
+
+		// Assert.
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+} );
+
+function createRootElement( id = 'elementor-panel-inner' ) {
+	const el = document.createElement( 'div' );
+
+	el.setAttribute( 'id', id );
+
+	document.body.appendChild( el );
+}
+
+function navigateTo( route: string ) {
+	act( () => {
+		window.dispatchEvent( new CustomEvent( 'elementor/routes/open', {
+			detail: { route },
+		} ) );
+	} );
+}

package/src/extensions/site-settings/components/__tests__/primary-action.test.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import PrimaryAction from '../primary-action';
+import { createMockDocument } from 'test-utils';
+import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+
+jest.mock( '@elementor/editor-documents', () => ( {
+	useActiveDocument: jest.fn(),
+	useActiveDocumentActions: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - Primary action', () => {
+	let saveFn: () => Promise<void>;
+
+	beforeEach( () => {
+		saveFn = jest.fn( () => Promise.resolve() );
+
+		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
+		jest.mocked( useActiveDocumentActions ).mockImplementation( () => ( {
+			save: saveFn,
+			saveTemplate: jest.fn(),
+			saveDraft: jest.fn(),
+		} ) );
+	} );
+
+	it( 'should save site settings on click', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( { isDirty: true } ) );
+
+		render( <PrimaryAction /> );
+
+		// Act.
+		screen.getByRole( 'button' ).click();
+
+		// Assert.
+		expect( saveFn ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it.each( [
+		{
+			title: "it's pristine",
+			document: createMockDocument( { isDirty: false } ),
+		},
+		{
+			title: "it's in saving mode",
+			document: createMockDocument( { isDirty: true, isSaving: true } ),
+		},
+		{
+			title: "it doesn't exist",
+			document: null,
+		},
+	] )( 'should not save site settings when $title', ( { document } ) => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => document );
+
+		render( <PrimaryAction /> );
+
+		// Act.
+		screen.getByRole( 'button' ).click();
+
+		// Assert.
+		expect( saveFn ).not.toHaveBeenCalled();
+	} );
+
+	it.each( [
+		{
+			title: 'site settings is pristine',
+			document: createMockDocument( { isDirty: false } ),
+		},
+		{
+			title: "site settings doesn't exist",
+			document: null,
+		},
+	] )( 'should be disabled when $title', ( { document } ) => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => document );
+
+		// Act.
+		render( <PrimaryAction /> );
+
+		// Assert.
+		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+	} );
+
+	it( 'should show a loader when saving site settings', () => {
+		// Arrange.
+		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( {
+			isDirty: true,
+			isSaving: true,
+		} ) );
+
+		// Act.
+		const { getByRole } = render( <PrimaryAction /> );
+
+		const loader = getByRole( 'progressbar' );
+
+		// Assert.
+		expect( loader ).toBeInTheDocument();
+	} );
+} );

package/src/extensions/site-settings/components/portal.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Portal as BasePortal, PortalProps } from '@elementor/ui';
+import { isRouteActive, routeCloseEvent, routeOpenEvent, useListenTo } from '@elementor/editor-v1-adapters';
+
+export default function Portal( props: Omit<PortalProps, 'container'> ) {
+	const containerRef = useListenTo(
+		[
+			routeOpenEvent( 'panel/global' ),
+			routeCloseEvent( 'panel/global' ),
+		],
+		getContainerRef
+	);
+
+	if ( ! containerRef.current ) {
+		return null;
+	}
+
+	return (
+		<BasePortal container={ containerRef.current } { ...props } />
+	);
+}
+
+function getContainerRef() {
+	return isRouteActive( 'panel/global' )
+		? { current: document.querySelector( '#elementor-panel-inner' ) }
+		: { current: null };
+}

package/src/extensions/site-settings/components/portalled-primary-action.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Portal from './portal';
+import PrimaryAction from './primary-action';
+
+export default function PortalledPrimaryAction() {
+	return (
+		<Portal>
+			<PrimaryAction />
+		</Portal>
+	);
+}

package/src/extensions/site-settings/components/primary-action.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { Button, CircularProgress, Paper } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export default function PrimaryAction() {
+	const document = useActiveDocument();
+	const { save } = useActiveDocumentActions();
+
+	return (
+		<Paper sx={ {
+			px: 5,
+			py: 4,
+			borderTop: 1,
+			borderColor: 'divider',
+		} }>
+			<Button
+				variant="contained"
+				disabled={ ! document || ! document.isDirty }
+				size="medium"
+				sx={ { width: '100%' } }
+				onClick={ () => document && ! document.isSaving ? save() : null }
+			>
+				{
+					document?.isSaving
+						? <CircularProgress />
+						: __( 'Save Changes', 'elementor' )
+				}
+			</Button>
+		</Paper>
+	);
+}

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

@@ -0,0 +1,49 @@
+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(),
+} ) );
+
+describe( '@elementor/editor-app-bar - site-settings - useActionProps', () => {
+	it.each( [
+		{
+			action: 'open',
+			input: { isActive: false, isBlocked: false },
+			expectedCommand: 'panel/global/open',
+		},
+		{
+			action: 'close',
+			input: { isActive: true, isBlocked: false },
+			expectedCommand: 'panel/global/close',
+		},
+	] )( 'should $action the site-settings panel on click', ( { input, expectedCommand } ) => {
+		// Arrange.
+		jest.mocked( useRouteStatus ).mockImplementation( () => input );
+
+		const { result } = renderHook( () => useActionProps() );
+
+		// Act.
+		result.current.onClick?.();
+
+		// Assert.
+		expect( runCommand ).toHaveBeenCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( expectedCommand );
+	} );
+
+	it( 'should have the correct props for disabled and selected', () => {
+		// Arrange.
+		jest.mocked( useRouteStatus ).mockImplementation( () => ( { isActive: true, isBlocked: true } ) );
+
+		// 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/global', { blockOnKitRoutes: false } );
+	} );
+} );

package/src/extensions/site-settings/hooks/use-action-props.ts

@@ -0,0 +1,22 @@
+import { __ } from '@wordpress/i18n';
+import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
+import { ToggleActionProps } from '../../../types';
+import { AdjustmentsHorizontalIcon } from '@elementor/icons';
+
+export default function useActionProps(): ToggleActionProps {
+	const { isActive, isBlocked } = useRouteStatus( 'panel/global', {
+		blockOnKitRoutes: false,
+	} );
+
+	return {
+		title: __( 'Site Settings', 'elementor' ),
+		icon: AdjustmentsHorizontalIcon,
+		onClick: () => (
+			isActive
+				? runCommand( 'panel/global/close' )
+				: runCommand( 'panel/global/open' )
+		),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/site-settings/index.ts

@@ -0,0 +1,18 @@
+import { injectIntoTop } from '@elementor/editor';
+import PortalledPrimaryAction from './components/portalled-primary-action';
+import { toolsMenu } from '../../locations/index';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	// This is portal, so it injected into the top of the editor, but renders inside the site-settings panel.
+	injectIntoTop( {
+		name: 'site-settings-primary-action-portal',
+		filler: PortalledPrimaryAction,
+	} );
+
+	toolsMenu.registerToggleAction( {
+		name: 'toggle-site-settings',
+		priority: 2,
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/structure/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 { 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 - useStructureActionProps', () => {
+	it( 'should toggle the navigator state when clicked', () => {
+		// Arrange.
+		const { result } = renderHook( () => useActionProps() );
+
+		// Act.
+		result.current.onClick?.();
+
+		// Assert.
+		expect( runCommand ).toHaveBeenCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( 'navigator/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( 'navigator' );
+	} );
+} );

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

@@ -0,0 +1,16 @@
+import { __ } from '@wordpress/i18n';
+import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
+import { StructureIcon } from '@elementor/icons';
+import { ToggleActionProps } from '../../../types';
+
+export default function useActionProps(): ToggleActionProps {
+	const { isActive, isBlocked } = useRouteStatus( 'navigator' );
+
+	return {
+		title: __( 'Structure', 'elementor' ),
+		icon: StructureIcon,
+		onClick: () => runCommand( 'navigator/toggle' ),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/structure/index.ts

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

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

@@ -0,0 +1,22 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useThemeBuilderActionProps from '../use-action-props';
+import { runCommand } from '@elementor/editor-v1-adapters';
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	runCommand: jest.fn(),
+} ) );
+
+describe( '@elementor/editor-app-bar - useThemeBuilderActionProps', () => {
+	it( 'should open the theme builder', () => {
+		// Arrange.
+		const command = 'app/open';
+
+		// Act.
+		const { result } = renderHook( () => useThemeBuilderActionProps() );
+		result.current.onClick?.();
+
+		// Assert.
+		expect( runCommand ).toBeCalledTimes( 1 );
+		expect( runCommand ).toHaveBeenCalledWith( command );
+	} );
+} );

package/src/extensions/theme-builder/hooks/use-action-props.ts

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import { ThemeBuilderIcon } from '@elementor/icons';
+import { runCommand } from '@elementor/editor-v1-adapters';
+import { ActionProps } from '../../../types';
+
+export default function useActionProps(): ActionProps {
+	return {
+		icon: ThemeBuilderIcon,
+		title: __( 'Theme Builder', 'elementor' ),
+		onClick: () => runCommand( 'app/open' ),
+	};
+}

package/src/extensions/theme-builder/index.ts

@@ -0,0 +1,9 @@
+import { mainMenu } from '../../locations';
+import useThemeBuilderActionProps from './hooks/use-action-props';
+
+export function init() {
+	mainMenu.registerAction( {
+		name: 'open-theme-builder',
+		useProps: useThemeBuilderActionProps,
+	} );
+}

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

@@ -0,0 +1,34 @@
+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 - useUserPreferencesActionProps', () => {
+	it( 'should open the user preferences', () => {
+		// Arrange.
+		const route = 'panel/editor-preferences';
+
+		// Act.
+		const { result } = renderHook( () => useActionProps() );
+		result.current.onClick?.();
+
+		// Assert.
+		expect( openRoute ).toHaveBeenCalledTimes( 1 );
+		expect( openRoute ).toHaveBeenCalledWith( route );
+	} );
+
+	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/editor-preferences' );
+	} );
+} );

package/src/extensions/user-preferences/hooks/use-action-props.ts

@@ -0,0 +1,16 @@
+import { __ } from '@wordpress/i18n';
+import { ToggleActionProps } from '../../../types';
+import { ToggleRightIcon } from '@elementor/icons';
+import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
+
+export default function useActionProps(): ToggleActionProps {
+	const { isActive, isBlocked } = useRouteStatus( 'panel/editor-preferences' );
+
+	return {
+		icon: ToggleRightIcon,
+		title: __( 'User Preferences', 'elementor' ),
+		onClick: () => openRoute( 'panel/editor-preferences' ),
+		selected: isActive,
+		disabled: isBlocked,
+	};
+}

package/src/extensions/user-preferences/index.ts

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

package/src/extensions/wordpress/index.ts

@@ -0,0 +1,21 @@
+import { mainMenu } from '../../locations';
+import { useSettings } from '@elementor/editor';
+import { __ } from '@wordpress/i18n';
+import { WordpressIcon } from '@elementor/icons';
+
+export function init() {
+	mainMenu.registerLink( {
+		name: 'manage-website',
+		group: 'exits',
+		useProps: () => {
+			const { urls } = useSettings();
+
+			return {
+				title: __( 'Manage Website', 'elementor' ),
+				href: urls.admin,
+				icon: WordpressIcon,
+				target: '_blank',
+			};
+		},
+	} );
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+export {
+	mainMenu,
+	toolsMenu,
+	utilitiesMenu,
+	documentOptionsMenu,
+	injectIntoPageIndication,
+	injectIntoResponsive,
+	injectIntoPrimaryAction,
+} from './locations/index';
+
+import init from './init';
+
+init();

package/src/init.ts

@@ -0,0 +1,15 @@
+import AppBar from './components/app-bar';
+import { injectIntoTop } from '@elementor/editor';
+import redirectOldMenus from './sync/redirect-old-menus';
+import { init as initExtensions } from './extensions';
+
+export default function init() {
+	redirectOldMenus();
+
+	initExtensions();
+
+	injectIntoTop( {
+		name: 'app-bar',
+		filler: AppBar,
+	} );
+}