Feature: Add buttons for additional preview URLs

src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js

@@ -5,7 +5,7 @@
         appState, contentResource, entityResource, navigationService, notificationsService, contentAppHelper,
         serverValidationManager, contentEditingHelper, localizationService, formHelper, umbRequestHelper,
         editorState, $http, eventsService, overlayService, $location, localStorageService, treeService,
-        $exceptionHandler, uploadTracker) {
+        $exceptionHandler, uploadTracker) {        
 
         var evts = [];
         var infiniteMode = $scope.infiniteModel && $scope.infiniteModel.infiniteMode;
@@ -37,6 +37,11 @@
         //initializes any watches
         function startWatches(content) {
 
+            $scope.$watchGroup(['culture', 'segment'],
+            function (value, oldValue) {
+                createPreviewButton($scope.content, value[0], value[1]);
+            });
+
             //watch for changes to isNew, set the page.isNew accordingly and load the breadcrumb if we can
             $scope.$watch('isNew', function (newVal, oldVal) {
 
@@ -322,6 +327,36 @@
 
             $scope.defaultButton = buttons.defaultButton;
             $scope.subButtons = buttons.subButtons;
+        }
+
+        /**
+         * Create the preview buttons for the active variant
+         * @param {any} content the content node
+         * @param {string} culture the active culture
+         * @param {string} segment the active segment
+         */
+        function createPreviewButton (content, culture, segment) {
+
+            const compositeId = culture + '_' + segment;
+            const defaultPreviewUrl = `preview/?id=${content.id}${culture ? `&culture=${culture}` : ''}`;
+
+            $scope.previewDefaultButton = {
+                alias: 'preview',
+                handler: () => $scope.preview($scope.content, defaultPreviewUrl, 'umbpreview'),
+                labelKey: "buttons_saveAndPreview"
+            };
+
+            const activeVariant = content.variants?.find((variant) => variant.compositeId === compositeId);
+
+            $scope.previewSubButtons = activeVariant?.additionalPreviewUrls?.map((additionalPreviewUrl) => {
+                return {
+                    alias: 'preview_' + additionalPreviewUrl.name,
+                    label: additionalPreviewUrl.name,
+                    // We use target _blank here. If we open the window in the same tab with a 'umb_preview_name' target, we get a cors js error.
+                    handler: () => $scope.preview(content, additionalPreviewUrl.url, '_blank')
+                }
+            });
+
             $scope.page.showPreviewButton = true;
         }
 
@@ -952,13 +987,13 @@
             }
         };
 
-        $scope.preview = function (content) {
+        $scope.preview = function (content, url, urlTarget) {
 
-            const openPreviewWindow = () => {
+            const openPreviewWindow = (url, target) => {
                 // Chromes popup blocker will kick in if a window is opened
                 // without the initial scoped request. This trick will fix that.
 
-              const previewWindow = $window.open(`preview/?id=${content.id}${$scope.culture ? `&culture=${$scope.culture}` : ''}`, 'umbpreview');
+              const previewWindow = $window.open(url, target);
 
               previewWindow.addEventListener('load', () => {
                 previewWindow.location.href = previewWindow.document.URL;
@@ -969,7 +1004,7 @@
             //The user cannot save if they don't have access to do that, in which case we just want to preview
             //and that's it otherwise they'll get an unauthorized access message
             if (!_.contains(content.allowedActions, "A")) {
-                openPreviewWindow();
+                openPreviewWindow(url, urlTarget);
             }
             else {
                 var selectedVariant = $scope.content.variants[0];
@@ -988,7 +1023,7 @@
                 //ensure the save flag is set for the active variant
                 selectedVariant.save = true;
                 performSave({ saveMethod: $scope.saveMethod(), action: "save" }).then(function (data) {
-                    openPreviewWindow()
+                    openPreviewWindow(url, urlTarget);
                 }, function (err) {
                     //validation issues ....
                 });

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html

@@ -48,7 +48,8 @@
             hotkey="{{subButton.hotKey}}"
             hotkey-when-hidden="{{subButton.hotKeyWhenHidden}}"
             ng-disabled="disabled">
-               <localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
+               <localize ng-if="subButton.labelKey" key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
+               <span ng-if="subButton.label">{{subButton.label}}</span>
                <span ng-if="subButton.addEllipsis === 'true'">...</span>
          </button>
       </umb-dropdown-item>

src/Umbraco.Web.UI.Client/src/views/components/content/edit.html

@@ -43,15 +43,16 @@
                         disabled="page.uploadsInProgress">
                     </umb-button>
 
-                    <umb-button
-                        alias="preview"
+                    <umb-button-group
                         ng-if="!page.isNew && content.allowPreview && page.showPreviewButton"
-                        type="button"
-                        button-style="link"
-                        action="preview(content)"
-                        label-key="buttons_saveAndPreview"
+                        button-style="info"
+                        default-button="previewDefaultButton"
+                        sub-buttons="previewSubButtons"
+                        state="page.previewButtonState"
+                        direction="up"
+                        float="right"
                         disabled="page.uploadsInProgress">
-                    </umb-button>
+                    </umb-button-group>
 
                     <umb-button
                         ng-if="page.showSaveButton"