TASK: Create ProcessIndicator component for Syncing workflow

Resources/Private/Translations/en/SyncWorkspaceDialog.xlf

@@ -14,6 +14,12 @@
       <trans-unit id="confirmation.confirm" xml:space="preserve">
         <source>Yes, synchronize now</source>
       </trans-unit>
+      <trans-unit id="process.title" xml:space="preserve">
+        <source>Synchronizing workspace "{workspaceName}"...</source>
+      </trans-unit>
+      <trans-unit id="process.message" xml:space="preserve">
+        <source>Please wait, while workspace "{workspaceName}" is being synchronized with recent changes in workspace "{baseWorkspaceName}". This may take a while.</source>
+      </trans-unit>
       <trans-unit id="resolutionStrategy.selection.title" xml:space="preserve">
         <source>Conflicts between workspace "{workspaceName}" and "{baseWorkspaceName}"</source>
       </trans-unit>

packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/ProcessIndicator.tsx

@@ -0,0 +1,57 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+import React from 'react';
+
+import {Dialog, Icon} from '@neos-project/react-ui-components';
+import I18n from '@neos-project/neos-ui-i18n';
+import {SyncingPhase} from '@neos-project/neos-ui-redux-store/src/CR/Syncing';
+
+import {Diagram} from './Diagram';
+import style from './style.module.css';
+
+export const ProcessIndicator: React.FC<{
+    workspaceName: string;
+    baseWorkspaceName: string;
+}> = (props) => {
+    return (
+        <Dialog
+            actions={[]}
+            title={
+                <div className={style.modalTitle}>
+                    <Icon icon="refresh" spin />
+                    <I18n
+                        id="Neos.Neos.Ui:SyncWorkspaceDialog:process.title"
+                        params={props}
+                        fallback={`Synchronizing workspace "${props.workspaceName}"...`}
+                        />
+                </div>
+            }
+            type={undefined as any}
+            isOpen
+            autoFocus
+            preventClosing
+            theme={undefined as any}
+            style={undefined as any}
+        >
+            <div className={style.modalContents}>
+                <Diagram
+                    phase={SyncingPhase.ONGOING}
+                    workspaceName={props.workspaceName}
+                    baseWorkspaceName={props.baseWorkspaceName}
+                    />
+                <I18n
+                    id="Neos.Neos.Ui:SyncWorkspaceDialog:process.message"
+                    params={props}
+                    fallback={`Please wait, while workspace "${props.workspaceName}" is being synchronized with recent changes in workspace "${props.baseWorkspaceName}". This may take a while.`}
+                    />
+            </div>
+        </Dialog>
+    );
+};

packages/neos-ui/src/Containers/Modals/SyncWorkspaceDialog/SyncWorkspaceDialog.tsx

@@ -18,6 +18,7 @@ import {I18nRegistry, WorkspaceName} from '@neos-project/neos-ts-interfaces';
 import {ResolutionStrategy, SyncingPhase, State as SyncingState} from '@neos-project/neos-ui-redux-store/src/CR/Syncing';
 
 import {ConfirmationDialog} from './ConfirmationDialog';
+import {ProcessIndicator} from './ProcessIndicator';
 import {ResolutionStrategySelectionDialog} from './ResolutionStrategySelectionDialog';
 import {ResolutionStrategyConfirmationDialog} from './ResolutionStrategyConfirmationDialog';
 import {ResultDialog} from './ResultDialog';
@@ -32,8 +33,7 @@ type SyncWorkspaceDialogPropsFromReduxState = {
 const withReduxState = connect((state: GlobalState): SyncWorkspaceDialogPropsFromReduxState => ({
     syncingState: {
         process: {
-            phase: SyncingPhase.ERROR,
-            error: new Error('Something bad happened')
+            phase: SyncingPhase.ONGOING
         }
     },
     personalWorkspaceName: selectors.CR.Workspaces
@@ -98,6 +98,13 @@ const SyncWorkspaceDialog: React.FC<SyncWorkspaceDialogProps> = (props) => {
                     onConfirm={handleConfirm}
                     />
             );
+        case SyncingPhase.ONGOING:
+            return (
+                <ProcessIndicator
+                    workspaceName={props.personalWorkspaceName}
+                    baseWorkspaceName={props.baseWorkspaceName}
+                    />
+            );
         case SyncingPhase.CONFLICT:
             return (
                 <ResolutionStrategySelectionDialog