From a2a9e43f850a5b57948a736c1128b9b122bdb881 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 9 Feb 2021 15:32:11 +0100
Subject: [PATCH 1/8] sort variants based on mandatory language, publish state
 and variant name

---
 .../components/content/edit.controller.js     |  1 -
 .../umbeditorcontentheader.directive.js       | 16 ++++++++++++--
 .../services/contenteditinghelper.service.js  | 21 ++++++++++++++++++
 .../editor/umb-editor-content-header.html     |  9 +++++---
 .../content/overlays/publish.controller.js    | 22 ++-----------------
 .../views/content/overlays/save.controller.js | 20 +----------------
 6 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index 5a9f30fe24e6..0892a892d264 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -223,7 +223,6 @@
             //we are editing so get the content item from the server
             return $scope.getMethod()($scope.contentId)
                 .then(function (data) {
-
                     $scope.content = data;
 
                     appendRuntimeData();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 846d5c85fe53..4626043c2aab 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function EditorContentHeader(serverValidationManager, localizationService, editorState) {
+    function EditorContentHeader(serverValidationManager, localizationService, editorState, contentEditingHelper) {
         function link(scope) {
 
             var unsubscribe = [];
@@ -92,7 +92,6 @@
             }
 
             function onInit() {
-
                 // find default + check if we have variants.
                 scope.content.variants.forEach(function (variant) {
                     if (variant.language !== null && variant.language.isDefault) {
@@ -147,7 +146,12 @@
                     }
                     unsubscribe.push(serverValidationManager.subscribe(null, variant.language !== null ? variant.language.culture : null, null, onVariantValidation, variant.segment));
                 });
+                
+                scope.vm.variantMenu.sort(sortVariantsMenu);
+            }
 
+            function sortVariantsMenu (a, b) {
+                return contentEditingHelper.sortVariants(a.variant, b.variant);
             }
 
             scope.goBack = function () {
@@ -200,6 +204,14 @@
                 return false;
             }
 
+            scope.toggleDropdown = function () {
+                scope.vm.dropdownOpen = !scope.vm.dropdownOpen;
+                
+                if (scope.vm.dropdownOpen) {
+                    scope.vm.variantMenu.sort(sortVariantsMenu);
+                }
+            };
+
             onInit();
 
             scope.$on('$destroy', function () {
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index 46bbe2de2331..c57c07244435 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -759,6 +759,27 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
             //don't add a browser history for this
             $location.replace();
             return true;
+        },
+
+        /**
+         * @ngdoc function
+         * @name umbraco.services.contentEditingHelper#sortVariants
+         * @methodOf umbraco.services.contentEditingHelper
+         * @function
+         *
+         * @description
+         * Sorts the variants so mandatory languages are shown first and all other underneath. Both Mandatory and non mandatory languages are then
+         * sorted in the following groups 'Published', 'Draft', 'Not Created'. Within each of those groups the variants are
+         * sorted by the language display name.
+         * 
+         */
+        sortVariants: function (a, b) {
+            const statesOrder = ['Published', 'Draft', 'NotCreated'];
+            const compareMandatory = (a,b) => (!a.language.isMandatory ? 1 : 0) - (!b.language.isMandatory ? 1 : 0);
+            const compareState = (a, b) => statesOrder.indexOf(a.state) - statesOrder.indexOf(b.state);
+            const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
+    
+            return compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
         }
     };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 687c8ef24ebd..7f75c2665a6c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -40,7 +40,7 @@
                                maxlength="255" />
                     </ng-form>
 
-                    <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}" aria-haspopup="true" aria-expanded="{{vm.dropdownOpen}}">
+                    <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="toggleDropdown()" ng-class="{'--error': vm.errorsOnOtherVariants}" aria-haspopup="true" aria-expanded="{{vm.dropdownOpen}}">
                         <span ng-bind="editor.content.displayName"></span>
                         <umb-icon icon="{{vm.dropdownOpen ? 'icon-navigation-up' : 'icon-navigation-down'}}" class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</umb-icon>
                     </button>
@@ -51,7 +51,7 @@
 
                     <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSubVariants === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item
-                            ng-repeat-start="entry in vm.variantMenu | orderBy:'variant.displayName' track by entry.key"
+                            ng-repeat-start="entry in vm.variantMenu track by entry.key"
                             class="umb-variant-switcher__item"
                             ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': entry.variant.active !== true && entry.variant.hasError, '--state-notCreated':entry.variant.state==='NotCreated' && entry.variant.name == null, '--state-draft':entry.variant.state==='Draft' || (entry.variant.state==='NotCreated' && entry.variant.name != null)}"
                         >
@@ -60,7 +60,10 @@
                             </button>
                             <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, entry.variant)">
                                 <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
-                                <umb-variant-state variant="entry.variant" class="umb-variant-switcher__state"></umb-variant-state>
+                                <span class="umb-variant-switcher__state">
+                                    <umb-variant-state variant="entry.variant"></umb-variant-state>
+                                    <span ng-if="entry.variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                                </span>
                             </button>
                             <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>
                         </umb-dropdown-item>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
index b924793fcd61..4b38598e87f1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function PublishController($scope, localizationService) {
+    function PublishController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         vm.loading = true;
@@ -143,25 +143,7 @@
             });
 
             if (vm.availableVariants.length !== 0) {
-                vm.availableVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.availableVariants.sort(contentEditingHelper.sortVariants);
             }
 
             $scope.model.disableSubmitButton = !canPublish();
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
index aa0d3797d4a4..6a0d5e78efe7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
@@ -85,25 +85,7 @@
                     active.save = true;
                 }
 
-                vm.availableVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.availableVariants.sort(contentEditingHelper.sortVariants);
 
             } else {
                 //disable save button if we have nothing to save

From a02f2de517a6b903432f3b77620c574c9dbf1fbb Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 9 Feb 2021 19:40:51 +0100
Subject: [PATCH 2/8] move default language to the top of the variant pickers +
 add "default" label

---
 .../src/common/services/contenteditinghelper.service.js      | 5 +++--
 .../views/components/editor/umb-editor-content-header.html   | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index c57c07244435..7d8433f08283 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -768,18 +768,19 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
          * @function
          *
          * @description
-         * Sorts the variants so mandatory languages are shown first and all other underneath. Both Mandatory and non mandatory languages are then
+         * Sorts the variants so default language is shown first. Mandatory languages are shown next and all other underneath. Both Mandatory and non mandatory languages are
          * sorted in the following groups 'Published', 'Draft', 'Not Created'. Within each of those groups the variants are
          * sorted by the language display name.
          * 
          */
         sortVariants: function (a, b) {
             const statesOrder = ['Published', 'Draft', 'NotCreated'];
+            const compareDefault = (a,b) => (!a.language.isDefault ? 1 : 0) - (!b.language.isDefault ? 1 : 0);
             const compareMandatory = (a,b) => (!a.language.isMandatory ? 1 : 0) - (!b.language.isMandatory ? 1 : 0);
             const compareState = (a, b) => statesOrder.indexOf(a.state) - statesOrder.indexOf(b.state);
             const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
     
-            return compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
+            return compareDefault(a, b) || compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
         }
     };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 7f75c2665a6c..6978672e9984 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -62,7 +62,8 @@
                                 <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
                                 <span class="umb-variant-switcher__state">
                                     <umb-variant-state variant="entry.variant"></umb-variant-state>
-                                    <span ng-if="entry.variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                                    <span ng-if="entry.variant.language.isMandatory"> - <localize key="general_mandatory"></localize></span>
+                                    <span ng-if="entry.variant.language.isDefault"> - <localize key="general_default"></localize></span>
                                 </span>
                             </button>
                             <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>

From ffb5e12c4ac3afd0668fb53acb77a8d1fc0f0d3b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 10 Feb 2021 11:43:44 +0100
Subject: [PATCH 3/8] sort segments in variant picker

---
 .../components/editor/umbeditorcontentheader.directive.js     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 4626043c2aab..31e51fe1150d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -114,11 +114,13 @@
                 if (scope.vm.hasCulture) {
                     scope.content.variants.forEach((v) => {
                         if (v.language !== null && v.segment === null) {
+                            const subVariants = scope.content.variants.filter((subVariant) => subVariant.language.culture === v.language.culture && subVariant.segment !== null).sort(contentEditingHelper.sortVariants);
+
                             var variantMenuEntry = {
                                 key: String.CreateGuid(),
                                 open: v.language && v.language.culture === scope.editor.culture,
                                 variant: v,
-                                subVariants: scope.content.variants.filter((subVariant) => subVariant.language.culture === v.language.culture && subVariant.segment !== null)
+                                subVariants
                             };
                             scope.vm.variantMenu.push(variantMenuEntry);
                         }

From 5898e430568f17388f73145b61644c4baa5f4998 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 10 Feb 2021 12:53:14 +0100
Subject: [PATCH 4/8] sort variants and segments in all overlays related to
 saving and publishing

---
 .../services/contenteditinghelper.service.js  | 29 +++++++++++++++++++
 .../content/overlays/publish.controller.js    |  2 +-
 .../overlays/publishdescendants.controller.js | 22 ++------------
 .../views/content/overlays/save.controller.js |  2 +-
 .../content/overlays/schedule.controller.js   | 23 ++-------------
 .../overlays/sendtopublish.controller.js      | 22 ++------------
 .../content/overlays/unpublish.controller.js  | 22 ++------------
 7 files changed, 39 insertions(+), 83 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index 7d8433f08283..34cf72e5cf0b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -781,6 +781,35 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
             const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
     
             return compareDefault(a, b) || compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
+        },
+
+        /**
+         * @ngdoc function
+         * @name umbraco.services.contentEditingHelper#getSortedVariantsAndSegments
+         * @methodOf umbraco.services.contentEditingHelper
+         * @function
+         *
+         * @description
+         * Returns an array of variants and segments sorted by the rules in the sortVariants method. 
+         * A variant language is followed by its segments in the array. If a segment doesn't have a parent variant it is 
+         * added to the end of the array.
+         * 
+         */
+        getSortedVariantsAndSegments: function (variantsAndSegments) {
+            const sortedVariants = variantsAndSegments.filter(variant => !variant.segment).sort(this.sortVariants);
+            let segments = variantsAndSegments.filter(variant => variant.segment);
+            let sortedAvailableVariants = [];
+
+            sortedVariants.forEach((variant) => {
+                const sortedMatchedSegments = segments.filter(segment => segment.language.culture === variant.language.culture).sort(this.sortVariants);
+                segments = segments.filter(segment => segment.language.culture !== variant.language.culture);
+                sortedAvailableVariants = [...sortedAvailableVariants, ...[variant], ...sortedMatchedSegments];
+            })
+            
+            // if we have segments without a parent language variant we need to add the remaining segments to the array
+            sortedAvailableVariants = [...sortedAvailableVariants, ...segments.sort(this.sortVariants)];
+
+            return sortedAvailableVariants;
         }
     };
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
index 4b38598e87f1..4e3496cde135 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
@@ -143,7 +143,7 @@
             });
 
             if (vm.availableVariants.length !== 0) {
-                vm.availableVariants.sort(contentEditingHelper.sortVariants);
+                vm.availableVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.availableVariants);
             }
 
             $scope.model.disableSubmitButton = !canPublish();
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
index f6fd6cb3cb0a..f9ad2eade85e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function PublishDescendantsController($scope, localizationService) {
+    function PublishDescendantsController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         vm.includeUnpublished = $scope.model.includeUnpublished || false;
@@ -38,25 +38,7 @@
 
             if (vm.variants.length > 1) {
 
-                vm.displayVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.displayVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.displayVariants);
 
                 var active = vm.variants.find(v => v.active);
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
index 6a0d5e78efe7..bfde6afbe3f6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.controller.js
@@ -85,7 +85,7 @@
                     active.save = true;
                 }
 
-                vm.availableVariants.sort(contentEditingHelper.sortVariants);
+                vm.availableVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.availableVariants);
 
             } else {
                 //disable save button if we have nothing to save
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
index 8bf23ae6d5b4..2de526b503de 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
     
-    function ScheduleContentController($scope, $timeout, localizationService, dateHelper, userService) {
+    function ScheduleContentController($scope, $timeout, localizationService, dateHelper, userService, contentEditingHelper) {
 
         var vm = this;
 
@@ -43,26 +43,7 @@
             // Check for variants: if a node is invariant it will still have the default language in variants
             // so we have to check for length > 1
             if (vm.variants.length > 1) {
-
-                vm.displayVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.displayVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.displayVariants);
 
                 vm.variants.forEach(v => {
                     if (v.active) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
index d91d8148863f..dd9960d352d6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function SendToPublishController($scope, localizationService) {
+    function SendToPublishController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         vm.loading = true;
@@ -27,25 +27,7 @@
             
             if (vm.availableVariants.length !== 0) {
 
-                vm.availableVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.availableVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.availableVariants);
 
                 vm.availableVariants.forEach(v => {
                     if(v.active) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
index 63c5b2da263a..936ab3b1049e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UnpublishController($scope, localizationService) {
+    function UnpublishController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         var autoSelectedVariants = [];
@@ -27,25 +27,7 @@
             // node has variants
             if (vm.variants.length !== 1) {
                 
-                vm.unpublishableVariants.sort((a, b) => {
-                    if (a.language && b.language) {
-                        if (a.language.name < b.language.name) {
-                            return -1;
-                        }
-                        if (a.language.name > b.language.name) {
-                            return 1;
-                        }
-                    }
-                    if (a.segment && b.segment) {
-                        if (a.segment < b.segment) {
-                            return -1;
-                        }
-                        if (a.segment > b.segment) {
-                            return 1;
-                        }
-                    }
-                    return 0;
-                });
+                vm.unpublishableVariants = contentEditingHelper.getSortedVariantsAndSegments(vm.unpublishableVariants);
 
                 var active = vm.variants.find(v => v.active);
 

From 6be4f93687c1ec6b0f94b46318b9239083d0b518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Fri, 12 Feb 2021 10:53:26 +0100
Subject: [PATCH 5/8] remove double styling

---
 .../src/less/components/editor/umb-variant-switcher.less      | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
index 95625d9e73bd..9d2782f184c8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
@@ -196,10 +196,6 @@ button.umb-variant-switcher__toggle {
 
 .umb-variant-switcher__item.--current {
     color: @ui-light-active-type;
-    //background-color: @pinkExtraLight;
-    .umb-variant-switcher__name-wrapper {
-        border-left: 4px solid @ui-active;
-    }
     .umb-variant-switcher__name {
         //color: @ui-light-active-type;
         font-weight: 700;

From 6d6d2064896f4b5f9afefd1d2d7a12918cb8b0d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Fri, 12 Feb 2021 10:55:24 +0100
Subject: [PATCH 6/8] corrected sorting to make Publish and
 PublishedWithPendingChanges sort alphabetically together with Mandatory. If
 not Publish or PublishedWithPendingChanges we will make sure mandatory goes
 to the top to ensure Writters are aware about these.

---
 .../src/common/services/contenteditinghelper.service.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index 34cf72e5cf0b..6807743d0fe0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -774,10 +774,10 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
          * 
          */
         sortVariants: function (a, b) {
-            const statesOrder = ['Published', 'Draft', 'NotCreated'];
-            const compareDefault = (a,b) => (!a.language.isDefault ? 1 : 0) - (!b.language.isDefault ? 1 : 0);
-            const compareMandatory = (a,b) => (!a.language.isMandatory ? 1 : 0) - (!b.language.isMandatory ? 1 : 0);
-            const compareState = (a, b) => statesOrder.indexOf(a.state) - statesOrder.indexOf(b.state);
+            const statesOrder = {'PublishedPendingChanges':1, 'Published': 1, 'Draft': 2, 'NotCreated': 3};
+            const compareDefault = (a,b) => (!a.language.isDefault ? 1 : -1) - (!b.language.isDefault ? 1 : -1);
+            const compareMandatory = (a,b) => (a.state === 'PublishedPendingChanges' || a.state === 'Published') ? 0 : (!a.language.isMandatory ? 1 : -1) - (!b.language.isMandatory ? 1 : -1);
+            const compareState = (a, b) => (statesOrder[a.state] || 99) - (statesOrder[b.state] || 99);
             const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
     
             return compareDefault(a, b) || compareMandatory(a, b) || compareState(a, b) || compareName(a, b);

From eba8a9edf347a6179298bdbfb42e86e809f3fc51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.com>
Date: Fri, 12 Feb 2021 10:57:12 +0100
Subject: [PATCH 7/8] Comment

---
 .../services/contenteditinghelper.service.js       | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index 6807743d0fe0..f19ba5424489 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -771,15 +771,17 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
          * Sorts the variants so default language is shown first. Mandatory languages are shown next and all other underneath. Both Mandatory and non mandatory languages are
          * sorted in the following groups 'Published', 'Draft', 'Not Created'. Within each of those groups the variants are
          * sorted by the language display name.
-         * 
+         *
          */
         sortVariants: function (a, b) {
             const statesOrder = {'PublishedPendingChanges':1, 'Published': 1, 'Draft': 2, 'NotCreated': 3};
             const compareDefault = (a,b) => (!a.language.isDefault ? 1 : -1) - (!b.language.isDefault ? 1 : -1);
+
+            // Make sure mandatory variants goes on top, unless they are published, cause then they already goes to the top and then we want to mix them with other published variants.
             const compareMandatory = (a,b) => (a.state === 'PublishedPendingChanges' || a.state === 'Published') ? 0 : (!a.language.isMandatory ? 1 : -1) - (!b.language.isMandatory ? 1 : -1);
             const compareState = (a, b) => (statesOrder[a.state] || 99) - (statesOrder[b.state] || 99);
             const compareName = (a, b) => a.displayName.localeCompare(b.displayName);
-    
+
             return compareDefault(a, b) || compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
         },
 
@@ -790,10 +792,10 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
          * @function
          *
          * @description
-         * Returns an array of variants and segments sorted by the rules in the sortVariants method. 
-         * A variant language is followed by its segments in the array. If a segment doesn't have a parent variant it is 
+         * Returns an array of variants and segments sorted by the rules in the sortVariants method.
+         * A variant language is followed by its segments in the array. If a segment doesn't have a parent variant it is
          * added to the end of the array.
-         * 
+         *
          */
         getSortedVariantsAndSegments: function (variantsAndSegments) {
             const sortedVariants = variantsAndSegments.filter(variant => !variant.segment).sort(this.sortVariants);
@@ -805,7 +807,7 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
                 segments = segments.filter(segment => segment.language.culture !== variant.language.culture);
                 sortedAvailableVariants = [...sortedAvailableVariants, ...[variant], ...sortedMatchedSegments];
             })
-            
+
             // if we have segments without a parent language variant we need to add the remaining segments to the array
             sortedAvailableVariants = [...sortedAvailableVariants, ...segments.sort(this.sortVariants)];
 

From a89515ca570bc9203f03fabc3b7ee4ad930fd5e3 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 15 Feb 2021 08:13:18 +0100
Subject: [PATCH 8/8] in publishing dialogs change "mandatory language"-label
 to "mandatory"-label

---
 .../src/views/content/overlays/publish.html                     | 2 +-
 .../src/views/content/overlays/publishdescendants.html          | 2 +-
 src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html  | 2 +-
 .../src/views/content/overlays/schedule.html                    | 2 +-
 .../src/views/content/overlays/sendtopublish.html               | 2 +-
 .../src/views/content/overlays/unpublish.html                   | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
index c3e0b90f5f09..888b6ab0f2ee 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
@@ -30,7 +30,7 @@
                         <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                             <umb-variant-state variant="variant"></umb-variant-state>
                             <span ng-if="variant.isMandatory"> - </span>
-                            <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.state !== 'Published' && variant.state !== 'PublishedPendingChanges' && variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                            <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.state !== 'Published' && variant.state !== 'PublishedPendingChanges' && variant.publish === false) }"><localize key="general_mandatory"></localize></span>
                         </span>
                         <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                             <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
index 61fd78a0357e..bb1d20c32123 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publishdescendants.html
@@ -60,7 +60,7 @@
                             <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.isMandatory"> - </span>
-                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="general_mandatory"></localize></span>
                             </span>
                             <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                                 <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
index 661dd4162edc..fa9ab8c43777 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/save.html
@@ -36,7 +36,7 @@
                             <span class="umb-variant-selector-entry__description" ng-if="!saveVariantSelectorForm.saveVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.isMandatory"> - </span>
-                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="general_mandatory"></localize></span>
                             </span>
                             <span class="umb-variant-selector-entry__description" ng-messages="saveVariantSelectorForm.saveVariantSelector.$error" show-validation-on-submit>
                                 <span class="text-error" ng-message="valServerField">{{saveVariantSelectorForm.saveVariantSelector.errorMsg}}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
index e854f727173b..563793862d79 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/schedule.html
@@ -107,7 +107,7 @@
                             <span class="umb-variant-selector-entry__description"
                                   ng-if="!scheduleSelectorForm.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
-                                <span ng-show="variant.language.isMandatory"> - <localize key="languages_mandatoryLanguage"></localize></span>
+                                <span ng-show="variant.language.isMandatory"> - <localize key="general_mandatory"></localize></span>
                             </span>
 
                         </umb-checkbox>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
index abf39c654253..8217da5752f0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/sendtopublish.html
@@ -32,7 +32,7 @@
                         <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                             <umb-variant-state variant="variant"></umb-variant-state>
                             <span ng-if="variant.isMandatory"> - </span>
-                            <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                            <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="general_mandatory"></localize></span>
                         </span>
                         <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                             <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
index 5ab32abf001f..dc3862879a51 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/unpublish.html
@@ -36,7 +36,7 @@
                             <span class="umb-variant-selector-entry__description" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
                                 <umb-variant-state variant="variant"></umb-variant-state>
                                 <span ng-if="variant.isMandatory"> - </span>
-                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="languages_mandatoryLanguage"></localize></span>
+                                <span ng-if="variant.isMandatory" ng-class="{'text-error': (variant.publish === false) }"><localize key="general_mandatory"></localize></span>
                             </span>
                             <span class="umb-variant-selector-entry__description" ng-messages="publishVariantSelectorForm.publishVariantSelector.$error" show-validation-on-submit>
                                 <span class="text-error" ng-message="valServerField">{{publishVariantSelectorForm.publishVariantSelector.errorMsg}}</span>