MAGETWO-91367: Tab's drag handle should be disabled when there is only one tab

 - disable drag handle when there is only one tab

Author: Cari Spruiell

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_default.less

@@ -60,6 +60,15 @@
                     visibility: hidden;
                     width: 14px;
 
+                    &.disabled:before {
+                        color: @color-light-gray;
+                        cursor: not-allowed;
+                    }
+
+                    &.disabled:active:before {
+                        cursor: not-allowed;
+                    }
+
                     &:before {
                         .abs-icon;
                         color: @color-dark-gray0;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/tabs/preview.js

@@ -13,7 +13,7 @@
                 <li role="tab" class="tab-header" css="{focused: parent.parent.preview.focusedTab() === $index()}" click="function (context, event) { parent.parent.preview.onTabClick($index(), event); }" ko-style="parent.parent.preview.getTabHeaderStyles()">
                     <a href="#no-tab" class="tab-title focus-options" attr="{ href: '#' + parent.id }">
                         <render args="getOptions().template" />
-                    <span class="tab-drag-handle"></span>
+                    <span class="tab-drag-handle" css="{disabled: parent.parent.children().length <= 1}"></span>
                         <span class="tab-title tab-name" data-tab-title="true" data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...') }, hasFocusNoScroll: parent.parent.preview.focusedTab() === $index()" event="{ focusin: function () { parent.parent.preview.setFocusedTab($index(), true) }, focusout: function () { window.getSelection().removeAllRanges(); parent.parent.preview.setFocusedTab(null); } }"></span>
                     </a>
                 </li>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tabs/default/preview.html

@@ -121,6 +121,15 @@ export default class Preview extends PreviewCollection {
             } else if (activeIndex) {
                 this.setActiveTab(activeIndex);
             }
+            // update sortability of tabs
+            const sortableElement = $(this.element).find(".tabs-navigation");
+            if (sortableElement.hasClass("ui-sortable")) {
+                if (this.parent.children().length <= 1) {
+                    sortableElement.sortable("disable");
+                } else {
+                    sortableElement.sortable("enable");
+                }
+            }
         }
     }