FEATURE: Implement open preview command

Relates: #10

Resources/Private/Translations/de/Main.xlf

@@ -218,6 +218,14 @@
                 <source>{matches} options match your query</source>
                 <target>{matches} Optionen entsprechen Ihrer Abfrage</target>
             </trans-unit>
+            <trans-unit id="CommandBarUiPlugin.command.openPreview">
+                <source>Open preview</source>
+                <target>Vorschau öffnen</target>
+            </trans-unit>
+            <trans-unit id="CommandBarUiPlugin.command.openPreview.description">
+                <source>Open the preview for current document</source>
+                <target>Öffnen Sie die Vorschau für das aktuelle Dokument</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Translations/en/Main.xlf

@@ -171,6 +171,12 @@
             <trans-unit id="CommandBarUiPlugin.command.packages.matches">
                 <source>{matches} options match your query</source>
             </trans-unit>
+            <trans-unit id="CommandBarUiPlugin.command.openPreview">
+                <source>Open preview</source>
+            </trans-unit>
+            <trans-unit id="CommandBarUiPlugin.command.openPreview.description">
+                <source>Open the preview for current document</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

packages/commandbar/src/components/SearchBox/SearchBox.tsx

@@ -56,8 +56,6 @@ const SearchBox: React.FC = () => {
         }
     });
 
-    console.debug('SearchBox.render', state.commands.value[state.resultCommandId.value]);
-
     return (
         <>
             <input

packages/ui-plugin/src/CommandBarUiPlugin.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { connect, DefaultRootState } from 'react-redux';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 // Neos dependencies are provided by the UI
@@ -10,38 +10,40 @@ import { selectors, actions } from '@neos-project/neos-ui-redux-store';
 import { Icon } from '@neos-project/react-ui-components';
 
 import { CommandBar, logger, ToggleButton } from '@neos-commandbar/commandbar';
-import { actions as commandBarActions, selectors as commandBarSelectors } from './actions';
 import { CommandsApi, PreferencesApi, DocumentationApi, NodesApi, PackagesApi } from '@neos-commandbar/neos-api';
 
+import { actions as commandBarActions, NeosRootState, selectors as commandBarSelectors } from './actions';
+
 import * as styles from './CommandBarUiPlugin.module.css';
 
 type CommandBarUiPluginProps = {
-    config: CommandBarConfig;
-    siteNode: CRNode;
-    documentNode: CRNode;
-    focusedNodeContextPath: string;
-    i18nRegistry: I18nRegistry;
-    commandBarOpen: boolean;
-    toggleCommandBar: () => void;
-    hotkeyRegistry: any;
-    handleHotkeyAction: (action: () => any) => void;
     addNode: (
         referenceNodeContextPath: string,
         referenceNodeFusionPath: string | null,
         preferredMode: string,
         nodeType?: string
     ) => void;
+    baseWorkspace: string;
+    commandBarOpen: boolean;
+    config: CommandBarConfig;
+    discardAction: (contextPaths: string[]) => void;
+    documentNode: CRNode;
     editPreviewMode: string;
-    setEditPreviewMode: (mode: string) => void;
     editPreviewModes: EditPreviewModes;
-    publishableNodes: CRNode[];
-    publishableNodesInDocument: CRNode[];
+    focusedNodeContextPath: string;
+    handleHotkeyAction: (action: () => any) => void;
+    hotkeyRegistry: any;
+    i18nRegistry: I18nRegistry;
     isWorkspaceReadOnly: boolean;
+    plugins: Record<string, () => HierarchicalCommandList>;
     publishAction: (contextPaths: string[], baseWorkspace: string) => void;
-    discardAction: (contextPaths: string[]) => void;
-    baseWorkspace: string;
+    publishableNodes: CRNode[];
+    publishableNodesInDocument: CRNode[];
+    previewUrl: string | null;
     setActiveContentCanvasSrc: (uri: string) => void;
-    plugins: Record<string, () => HierarchicalCommandList>;
+    setEditPreviewMode: (mode: string) => void;
+    siteNode: CRNode;
+    toggleCommandBar: () => void;
 };
 
 type CommandBarUiPluginState = {
@@ -58,26 +60,27 @@ const IconComponent: React.FC<IconProps> = ({ icon, spin = false }) => <Icon ico
 
 class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, CommandBarUiPluginState> {
     static propTypes = {
+        addNode: PropTypes.func.isRequired,
+        baseWorkspace: PropTypes.string.isRequired,
+        commandBarOpen: PropTypes.bool,
         config: PropTypes.object.isRequired,
-        i18nRegistry: PropTypes.object.isRequired,
-        siteNode: PropTypes.object,
+        discardAction: PropTypes.func.isRequired,
         documentNode: PropTypes.object,
+        editPreviewMode: PropTypes.string.isRequired,
+        editPreviewModes: PropTypes.object.isRequired,
         focusedNodeContextPath: PropTypes.string,
-        commandBarOpen: PropTypes.bool,
-        toggleCommandBar: PropTypes.func.isRequired,
         handleHotkeyAction: PropTypes.func.isRequired,
         hotkeyRegistry: PropTypes.object.isRequired,
-        addNode: PropTypes.func.isRequired,
-        editPreviewMode: PropTypes.string.isRequired,
-        setEditPreviewMode: PropTypes.func.isRequired,
-        editPreviewModes: PropTypes.object.isRequired,
-        publishableNodes: PropTypes.array,
-        publishableNodesInDocument: PropTypes.array,
+        i18nRegistry: PropTypes.object.isRequired,
         isWorkspaceReadOnly: PropTypes.bool,
         publishAction: PropTypes.func.isRequired,
-        discardAction: PropTypes.func.isRequired,
-        baseWorkspace: PropTypes.string.isRequired,
+        publishableNodes: PropTypes.array,
+        publishableNodesInDocument: PropTypes.array,
+        previewUrl: PropTypes.string,
         setActiveContentCanvasSrc: PropTypes.func.isRequired,
+        setEditPreviewMode: PropTypes.func.isRequired,
+        siteNode: PropTypes.object,
+        toggleCommandBar: PropTypes.func.isRequired,
     };
 
     constructor(props) {
@@ -173,8 +176,25 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
                     ),
                     subCommands: this.buildCommandsFromEditPreviewModes(),
                 },
+                openPreview: {
+                    name: this.translate('CommandBarUiPlugin.command.openPreview', 'Open preview'),
+                    description: this.translate(
+                        'CommandBarUiPlugin.command.openPreview.description',
+                        'Open the preview for current document'
+                    ),
+                    icon: 'external-link-alt',
+                    action: async () => {
+                        if (this.props.previewUrl) {
+                            window.open(this.props.previewUrl, '_blank', 'noopener,noreferrer')?.focus();
+                        } else {
+                            logger.warn('No preview url to open');
+                        }
+                    },
+                    closeOnExecute: true,
+                },
             },
         };
+
         if (props.config.features.searchNeosDocs) {
             this.state.commands.searchNeosDocs = {
                 name: this.translate('CommandBarUiPlugin.command.documentation', 'Documentation'),
@@ -523,12 +543,6 @@ class CommandBarUiPlugin extends React.PureComponent<CommandBarUiPluginProps, Co
     }
 }
 
-interface NeosRootState extends DefaultRootState {
-    user?: {
-        name?: string;
-    };
-}
-
 const mapStateToProps = (state: NeosRootState) => ({
     siteNode: selectors.CR.Nodes.siteNodeSelector(state),
     documentNode: selectors.CR.Nodes.documentNodeSelector(state),
@@ -539,6 +553,7 @@ const mapStateToProps = (state: NeosRootState) => ({
     baseWorkspace: selectors.CR.Workspaces.baseWorkspaceSelector(state),
     commandBarOpen: commandBarSelectors.commandBarOpen(state),
     editPreviewMode: selectors.UI.EditPreviewMode.currentEditPreviewMode(state),
+    previewUrl: commandBarSelectors.previewUrl(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

packages/ui-plugin/src/actions/index.ts

@@ -1,9 +1,24 @@
 import { createAction, handleActions } from 'redux-actions';
+import { DefaultRootState } from 'react-redux';
 
 export const actionTypes = {
     TOGGLE_COMMAND_BAR: 'TOGGLE_COMMAND_BAR',
 };
 
+// Type safety helper as the Neos extensibility doesn't provide a type for the global state
+export interface NeosRootState extends DefaultRootState {
+    ui?: {
+        contentCanvas?: {
+            previewUrl?: string;
+        };
+    };
+    plugins?: {
+        commandBar?: {
+            open?: boolean;
+        };
+    };
+}
+
 const toggleCommandBar = createAction(actionTypes.TOGGLE_COMMAND_BAR);
 
 export const actions = {
@@ -32,5 +47,6 @@ export const reducer = handleActions(
 );
 
 export const selectors = {
-    commandBarOpen: (state) => state.plugins?.commandBar?.open,
+    commandBarOpen: (state: NeosRootState) => state.plugins?.commandBar?.open,
+    previewUrl: (state: NeosRootState) => state.ui?.contentCanvas?.previewUrl,
 };