EZP-28314: As a v2 Editor, I want to select a SiteAccess in the Preview mode

src/bundle/Controller/ContentController.php

@@ -12,6 +12,7 @@
 use eZ\Publish\API\Repository\LocationService;
 use eZ\Publish\API\Repository\Values\Content\Content;
 use eZ\Publish\API\Repository\Values\Content\Location;
+use eZ\Publish\Core\Base\Exceptions\BadStateException;
 use EzSystems\EzPlatformAdminUi\Exception\InvalidArgumentException as AdminInvalidArgumentException;
 use EzSystems\EzPlatformAdminUi\Form\Data\Content\Draft\ContentCreateData;
 use EzSystems\EzPlatformAdminUi\Form\Data\Content\Draft\ContentEditData;
@@ -20,6 +21,7 @@
 use EzSystems\EzPlatformAdminUi\Form\Factory\FormFactory;
 use EzSystems\EzPlatformAdminUi\Form\SubmitHandler;
 use EzSystems\EzPlatformAdminUi\Notification\NotificationHandlerInterface;
+use EzSystems\EzPlatformAdminUi\Siteaccess\SiteaccessResolverInterface;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -37,9 +39,6 @@ class ContentController extends Controller
     /** @var ContentService */
     private $contentService;
 
-    /** @var LocationService */
-    private $locationService;
-
     /** @var FormFactory */
     private $formFactory;
 
@@ -52,8 +51,11 @@ class ContentController extends Controller
     /** @var ContentMainLocationUpdateMapper */
     private $contentMainLocationUpdateMapper;
 
-    /** @var string */
-    private $defaultSiteaccess;
+    /** @var SiteaccessResolverInterface */
+    private $siteaccessResolver;
+
+    /** @var LocationService */
+    private $locationService;
 
     /**
      * @param NotificationHandlerInterface $notificationHandler
@@ -62,7 +64,7 @@ class ContentController extends Controller
      * @param SubmitHandler $submitHandler
      * @param TranslatorInterface $translator
      * @param ContentMainLocationUpdateMapper $contentMetadataUpdateMapper
-     * @param string $defaultSiteaccess
+     * @param SiteaccessResolverInterface $siteaccessResolver
      * @param LocationService $locationService
      */
     public function __construct(
@@ -72,7 +74,7 @@ public function __construct(
         SubmitHandler $submitHandler,
         TranslatorInterface $translator,
         ContentMainLocationUpdateMapper $contentMetadataUpdateMapper,
-        string $defaultSiteaccess,
+        SiteaccessResolverInterface $siteaccessResolver,
         LocationService $locationService
     ) {
         $this->notificationHandler = $notificationHandler;
@@ -81,7 +83,7 @@ public function __construct(
         $this->submitHandler = $submitHandler;
         $this->translator = $translator;
         $this->contentMainLocationUpdateMapper = $contentMetadataUpdateMapper;
-        $this->defaultSiteaccess = $defaultSiteaccess;
+        $this->siteaccessResolver = $siteaccessResolver;
         $this->locationService = $locationService;
     }
 
@@ -272,12 +274,21 @@ public function previewAction(
             $location = $this->locationService->loadLocation($content->contentInfo->mainLocationId);
         }
 
+        $siteaccesses = $this->siteaccessResolver->getSiteaccessesForLocation($location, $versionNo, $languageCode);
+
+        if (empty($siteaccesses)) {
+            throw new BadStateException(
+                'siteaccess',
+                'There is no siteaccesses available for particular content'
+            );
+        }
+
         return $this->render('@EzPlatformAdminUi/content/content_preview.html.twig', [
+            'location' => $location,
             'content' => $content,
             'language_code' => $languageCode,
-            'siteaccess' => $this->defaultSiteaccess,
+            'siteaccesses' => $siteaccesses,
             'versionNo' => $versionNo ?? $content->getVersionInfo()->versionNo,
-            'location' => $location,
         ]);
     }
 }

src/bundle/Resources/config/services.yml

@@ -10,6 +10,7 @@ imports:
     - { resource: services/modules/subitems.yml }
     - { resource: services/form_processors.yml }
     - { resource: services/validators.yml }
+    - { resource: services/siteaccess.yml }
 
 parameters:
 

src/bundle/Resources/config/services/components.yml

@@ -1,3 +1,6 @@
+imports:
+    - { resource: services/components/content/edit.yml }
+
 services:
     _defaults:
         autowire: true

src/bundle/Resources/config/services/components/content/edit.yml

@@ -0,0 +1,9 @@
+services:
+    _defaults:
+        public: false
+        autowire: true
+        autoconfigure: true
+
+    EzSystems\EzPlatformAdminUi\Component\Content\PreviewUnavailableTwigComponent:
+        tags:
+            - { name: ezplatform.admin_ui.component, group: 'content-edit-form-before' }

src/bundle/Resources/config/services/controllers.yml

@@ -4,6 +4,11 @@ services:
         exclude: "../../Controller/{Controller}"
         parent: EzSystems\EzPlatformAdminUiBundle\Controller\Controller
 
+    EzSystems\EzPlatformAdminUiBundle\Controller\ContentController:
+        parent: EzSystems\EzPlatformAdminUiBundle\Controller\Controller
+        arguments:
+            $siteaccessResolver: '@EzSystems\EzPlatformAdminUi\Siteaccess\NonAdminSiteaccessResolver'
+
     EzSystems\EzPlatformAdminUiBundle\Controller\ContentTypeController:
         parent: EzSystems\EzPlatformAdminUiBundle\Controller\Controller
         arguments:
@@ -22,11 +27,6 @@ services:
         arguments:
             $defaultPaginationLimit: '$pagination.search_limit$'
 
-    EzSystems\EzPlatformAdminUiBundle\Controller\ContentController:
-        parent: EzSystems\EzPlatformAdminUiBundle\Controller\Controller
-        arguments:
-            $defaultSiteaccess: '%ezpublish.siteaccess.default%'
-
     EzSystems\EzPlatformAdminUiBundle\Controller\User\UserDeleteController:
         parent: EzSystems\EzPlatformAdminUiBundle\Controller\Controller
 

src/bundle/Resources/config/services/siteaccess.yml

@@ -0,0 +1,9 @@
+services:
+    _defaults:
+        autowire: true
+        autoconfigure: true
+        public: false
+
+    EzSystems\EzPlatformAdminUi\Siteaccess\SiteaccessResolverInterface: '@EzSystems\EzPlatformAdminUi\Siteaccess\SiteaccessResolver'
+    EzSystems\EzPlatformAdminUi\Siteaccess\SiteaccessResolver: ~
+    EzSystems\EzPlatformAdminUi\Siteaccess\NonAdminSiteaccessResolver: ~

src/bundle/Resources/public/js/scripts/admin.preview.js

@@ -1,8 +1,9 @@
 (function (global, doc) {
     const CLASS_BTN_SELECTED = 'ez-preview__action--selected';
     const SELECTOR_BTN_ACTION = '.ez-preview__action';
+    const SELECTOR_PREVIEW_SITEACCESS_SELECT = '.ez-preview__item--siteaccess select';
     const removeSelectedState = () => [...doc.querySelectorAll(SELECTOR_BTN_ACTION)].forEach(btn => btn.classList.remove(CLASS_BTN_SELECTED));
-    const changePreviewMode = event => {
+    const changePreviewMode = (event) => {
         const btn = event.target.closest(SELECTOR_BTN_ACTION);
         const iframeWrapper = doc.querySelector('.ez-preview__iframe');
 
@@ -13,6 +14,12 @@
         iframeWrapper.classList.remove('ez-preview__iframe--desktop', 'ez-preview__iframe--tablet', 'ez-preview__iframe--mobile');
         iframeWrapper.classList.add(`ez-preview__iframe--${btn.dataset.previewMode}`)
     };
+    const changePreviewSiteaccess = (event) => {
+        const iframeWrapper = doc.querySelector('.ez-preview__iframe iframe');
+        const siteaccessPreviewUrl = event.target.value;
 
+        iframeWrapper.setAttribute('src', siteaccessPreviewUrl);
+    };
     [...doc.querySelectorAll(SELECTOR_BTN_ACTION)].forEach(btn => btn.addEventListener('click', changePreviewMode, false));
+    [...doc.querySelectorAll(SELECTOR_PREVIEW_SITEACCESS_SELECT)].forEach(select => select.addEventListener('change', changePreviewSiteaccess, false));
 })(window, document);

src/bundle/Resources/public/scss/_alerts.scss

@@ -0,0 +1,9 @@
+.ez-alert {
+    &--info {
+        background: $ez-secondary-ground-pale;
+        color: $ez-secondary-ground-medium;
+        padding: 0.35rem 1rem;
+        border: 0;
+        font-style: italic;
+    }
+}

src/bundle/Resources/public/scss/_icons.scss

@@ -197,3 +197,9 @@
         margin-right: .5rem;
     }
 }
+
+.ez-alert--info {
+    .ez-icon-warning {
+        fill: $ez-secondary-ground-medium;
+    }
+}

src/bundle/Resources/public/scss/_preview.scss

@@ -14,24 +14,43 @@
                 align-items: center;
                 justify-content: space-between;
                 line-height: 0;
+                flex-basis: 10%;
             }
 
             &--actions {
-                flex-basis: auto;
                 display: flex;
                 justify-content: center;
                 border: 1px solid $ez-color-base-medium;
                 border-radius: 5px;
                 padding: .1rem;
                 background: $ez-white;
+                flex-basis: 5%;
+                margin-right: 2rem;
+            }
+
+            &--description {
+                flex-basis: 75%;
+                display: flex;
+                align-items: center;
+            }
+
+            &--siteaccess {
+                flex-basis: 10%;
+            }
+
+            &-label {
+                display: inline-block;
+                margin-right: .5rem;
+                font-size: .8rem;
             }
 
             &-text {
                 text-overflow: ellipsis;
                 width: 80%;
-                display: block;
                 overflow: hidden;
+                display: inline-block;
                 white-space: nowrap;
+                font-weight: 700;
             }
 
             .ez-preview__action {

src/bundle/Resources/public/scss/ezplatform.scss

@@ -21,6 +21,7 @@
 @import 'typography';
 @import 'content-edit';
 @import 'card';
+@import 'alerts';
 @import 'pagination';
 @import 'error-page';
 @import 'alloyeditor-link-edit';

src/bundle/Resources/translations/content_edit_component_preview_unavailable.en.xliff

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
+  <file source-language="en" target-language="en" datatype="plaintext" original="not.available">
+    <header>
+      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
+      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
+    </header>
+    <body>
+      <trans-unit id="50833698162171103793dc9cb6367839a8e063a4" resname="preview_unavailable">
+        <source>You cannot preview this translation: there is no site available for this language. Please contact the website administrator.</source>
+        <target state="new">You cannot preview this translation: there is no site available for this language. Please contact the website administrator.</target>
+        <note>key: preview_unavailable</note>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

src/bundle/Resources/translations/content_preview.en.xliff

@@ -16,6 +16,11 @@
         <target state="new">Preview</target>
         <note>key: preview</note>
       </trans-unit>
+      <trans-unit id="4f8fad3c2cfe284942ebc83149ede92126ba2dc7" resname="previewing">
+        <source>Previewing</source>
+        <target state="new">Previewing</target>
+        <note>key: previewing</note>
+      </trans-unit>
     </body>
   </file>
 </xliff>

src/bundle/Resources/views/content/content_edit/component/preview_unavailable.html.twig

@@ -0,0 +1,10 @@
+{% trans_default_domain 'content_edit_component_preview_unavailable' %}
+
+<div class="alert alert-info mt-3 ez-alert ez-alert--info" role="alert">
+    <svg class="ez-icon ez-icon--small ez-icon-warning">
+        <use xmlns:xlink="http://www.w3.org/1999/xlink"
+             xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#warning"></use>
+    </svg>
+
+    {{ 'preview_unavailable'|trans|desc('You cannot preview this translation: there is no site available for this language. Please contact the website administrator.') }}
+</div>

src/bundle/Resources/views/content/content_edit/content_edit.html.twig

@@ -38,7 +38,12 @@
 {% endblock %}
 
 {% block right_sidebar %}
-    {% set content_edit_sidebar_right = knp_menu_get('ezplatform_admin_ui.menu.content_edit.sidebar_right', [], {'content': content, 'content_type': contentType}) %}
+    {% set content_edit_sidebar_right = knp_menu_get('ezplatform_admin_ui.menu.content_edit.sidebar_right', [], {
+        'content': content,
+        'content_type': contentType,
+        'location': location,
+        'language': language
+    }) %}
     {{ knp_menu_render(content_edit_sidebar_right, {'template': '@EzPlatformAdminUi/parts/menu/sidebar_right.html.twig'}) }}
 {% endblock %}
 
@@ -49,13 +54,17 @@
 {% block form_before %}
     {{ ezplatform_admin_ui_component_group('content-edit-form-before', {
         'content': content,
-        'contentType': contentType
+        'contentType': contentType,
+        'location': location,
+        'language': language
     }) }}
 {% endblock %}
 
 {% block form_after %}
     {{ ezplatform_admin_ui_component_group('content-edit-form-after', {
         'content': content,
-        'contentType': contentType
+        'contentType': contentType,
+        'location': location,
+        'language': language
     }) }}
 {% endblock %}

src/bundle/Resources/views/content/content_preview.html.twig

@@ -15,7 +15,10 @@
                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/bundles/ezplatformadminui/img/ez-icons.svg#caret-back"></use>
                 </svg>
             </a>
-            <span>{{ 'preview'|trans|desc('Preview') }}</span>
+        </div>
+        <div class="ez-preview__item ez-preview__item--description">
+            <span class="ez-preview__item-label">{{ 'previewing'|trans|desc('Previewing') }}:</span>
+            <span class="ez-preview__item-text">{{ content.name }}</span>
         </div>
         <div class="ez-preview__item ez-preview__item--actions">
             <button data-preview-mode="desktop" class="ez-preview__action ez-preview__action--selected">
@@ -34,12 +37,18 @@
                 </svg>
             </button>
         </div>
-        <div class="ez-preview__item ez-preview__item--description">
-            <span class="ez-preview__item-text">{{ content.name }}</span>
-        </div>
+        {% if siteaccesses|length > 1 %}
+            <div class="ez-preview__item ez-preview__item--siteaccess">
+                <select class="form-control">
+                    {% for previewSiteaccess in siteaccesses %}
+                        <option value="{{ path('_ezpublishPreviewContent', {'contentId': content.id, 'versionNo': versionNo, 'language': language_code, 'siteAccessName': previewSiteaccess}) }}">{{ previewSiteaccess }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+        {% endif %}
     </div>
     <div class="ez-preview__iframe ez-preview__iframe--desktop">
-        <iframe src="{{ url('_ezpublishPreviewContent', {'contentId': content.id, 'versionNo': versionNo, 'language': language_code, 'siteAccessName': siteaccess}) }}" frameborder="0"></iframe>
+        <iframe src="{{ url('_ezpublishPreviewContent', {'contentId': content.id, 'versionNo': versionNo, 'language': language_code, 'siteAccessName': siteaccesses|first}) }}" frameborder="0"></iframe>
     </div>
 </div>
 {% endblock %}

src/bundle/Resources/views/dashboard/tab/my_drafts.html.twig

@@ -26,7 +26,8 @@
                             data-content-draft-edit-url="{{ path('ez_content_draft_edit', {
                                 'contentId': row.contentId,
                                 'versionNo': row.version,
-                                'language': row.language
+                                'language': row.language,
+                                'locationId': location.id
                             }) }}"
                             data-version-has-conflict-url="{{ path('ezplatform.version.has_no_conflict', {
                                 'contentId': row.contentId,