Complete Studio support for handling group configuration changes

STUD-1658

cms/static/js/views/container.js

@@ -1,4 +1,5 @@
-define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "js/views/feedback_notification"],
+define(["jquery", "underscore", "js/views/xblock", "js/utils/module", "gettext", "js/views/feedback_notification",
+    "jquery.ui"], // The container view uses sortable, which is provided by jquery.ui.
     function ($, _, XBlockView, ModuleUtils, gettext, NotificationView) {
         var reorderableClass = '.reorderable-container',
             sortableInitializedClass = '.ui-sortable',

cms/static/js/views/modals/edit_xblock.js

@@ -168,10 +168,6 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal",
                 if (this.runtime) {
                     this.runtime.notify('modal-hidden');
                 }
-
-                // Completely clear the contents of the modal
-                this.undelegateEvents();
-                this.$el.html("");
             },
 
             findXBlockInfo: function(xblockWrapperElement, defaultXBlockInfo) {

cms/static/js/views/pages/container.js

@@ -28,8 +28,11 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/contai
                 // Hide both blocks until we know which one to show
                 xblockView.$el.addClass('is-hidden');
 
-                // Add actions to any top level buttons, e.g. "Edit" of the container itself
-                self.addButtonActions(this.$el);
+                if (!options || !options.refresh) {
+                    // Add actions to any top level buttons, e.g. "Edit" of the container itself.
+                    // Do not add the actions on "refresh" though, as the handlers are already registered.
+                    self.addButtonActions(this.$el);
+                }
 
                 // Render the xblock
                 xblockView.render({
@@ -192,7 +195,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview", "js/views/contai
                     parentElement = xblockElement.parent(),
                     rootLocator = this.xblockView.model.id;
                 if (xblockElement.length === 0 || xblockElement.data('locator') === rootLocator) {
-                    this.render({ });
+                    this.render({refresh: true});
                 } else if (parentElement.hasClass('reorderable-container')) {
                     this.refreshChildXBlock(xblockElement);
                 } else {

cms/static/sass/elements/_xblocks.scss

@@ -152,47 +152,51 @@
     padding: ($baseline/2) ($baseline*.75);
     color: $white;
 
-    .message-text {
-      display: inline-block;
-      width: 93%;
-      vertical-align: top;
-    }
-
     [class^="icon-"] {
       font-style: normal;
     }
 
     &.information {
+      @extend %t-copy-sub1;
       background-color: $gray-l5;
       color: $gray-d2;
     }
 
-    &.warning {
+    &.validation {
       background-color: $gray-d2;
-      padding: ($baseline/2) $baseline;
       color: $white;
 
-      .icon-warning-sign {
-        margin-right: ($baseline/2);
-        color: $orange;
+      a {
+        color: $blue-l2;
       }
 
-      .message-text {
-        display: inline-block;
-        width: 93%;
-        vertical-align: top;
+      &.has-warnings {
+        border-bottom: 3px solid $orange;
+
+        .icon-warning-sign {
+          margin-right: ($baseline/2);
+          color: $orange;
+        }
       }
-    }
 
-    &.error {
-      background-color: $gray-d2;
-      padding: ($baseline/2) $baseline;
-      color: $white;
+      &.has-errors {
+        border-bottom: 3px solid $red-l2;
 
-      .icon-exclamation-sign {
-        margin-right: ($baseline/2);
-        color: $red-l2;
+        .icon-exclamation-sign {
+          margin-right: ($baseline/2);
+          color: $red-l2;
+        }
       }
     }
   }
+
+  .xblock-message-list {
+    margin-bottom: 0;
+  }
+
+  .xblock-message-actions {
+    @extend %actions-header;
+    padding: ($baseline/2) $baseline;
+    background-color: $gray-d1;
+  }
 }

cms/static/sass/views/_container.scss

@@ -64,7 +64,7 @@
 
     .no-container-content {
       @extend %ui-well;
-      padding: ($baseline*2);
+      padding: $baseline;
       background-color: $gray-l4;
       text-align: center;
       color: $gray;
@@ -78,7 +78,7 @@
         @extend %t-action4;
         padding: 8px 20px 10px;
         text-align: center;
-        margin-left: $baseline;
+        margin: ($baseline/2) 0 ($baseline/2) $baseline;
 
         [class^="icon-"] {
           margin-right: ($baseline/2);
@@ -158,6 +158,8 @@ body.view-container .content-primary {
     // CASE: page level xblock rendering
     &.level-page {
       margin: 0;
+      box-shadow: none;
+      border: 0;
 
       .xblock-header {
         display: none;
@@ -166,15 +168,36 @@ body.view-container .content-primary {
       .xblock-message {
         border-radius: 3px 3px 0 0;
 
+        &.validation {
+          padding-top: ($baseline*.75);
+        }
+
+        .xblock-message-list {
+          margin: ($baseline/5) ($baseline*2.5);
+          list-style-type: disc;
+          color: $gray-l3;
+        }
+
+        .xblock-message-item {
+          padding-bottom: ($baseline/4);
+        }
+
         &.information {
-          @extend %t-copy-base;
-          margin-bottom: $baseline;
-          border-bottom: 1px solid $gray-l4;
-          padding: ($baseline/2) ($baseline*.75);
+          padding: 0 0 ($baseline/2) 0;
           background-color: $gray-l5;
           color: $gray-d1;
         }
       }
+
+      .no-container-content {
+
+        .xblock-message-list {
+          margin: 0;
+          list-style-type: none;
+          color: $gray-d2;
+        }
+      }
+
     }
 
     // CASE: nesting level xblock rendering
@@ -250,6 +273,34 @@ body.view-container .content-primary {
           display: none;
         }
       }
+
+      .wrapper-xblock-message {
+
+        .xblock-message {
+          border-radius: 0 0 3px 3px;
+
+          .xblock-message-list {
+            margin: 0;
+            list-style-type: none;
+          }
+
+          &.information {
+            @extend %t-copy-sub2;
+            padding: 0 0 ($baseline/2) $baseline;
+            color: $gray-l1;
+          }
+
+          &.validation.has-warnings {
+            border: 0;
+            border-top: 3px solid $orange;
+          }
+
+          &.validation.has-errors {
+            border: 0;
+            border-top: 3px solid $red-l2;
+          }
+        }
+      }
     }
   }
 
@@ -273,9 +324,9 @@ body.view-container .content-primary {
     }
 
     &.is-inactive {
-      margin: $baseline 0 0 0;
+      margin: ($baseline*1.5) 0 0 0;
       border-top: 2px dotted $gray-l2;
-      padding: ($baseline/2) 0;
+      padding: ($baseline*.75) 0;
       background-color: $gray-l4;
 
       .wrapper-xblock.level-nesting {

cms/static/sass/views/_unit.scss

@@ -203,6 +203,16 @@ body.course.unit,
           padding-top: 0;
           color: $gray-l1;
         }
+
+        &.has-warnings {
+          border: 0;
+          border-top: 3px solid $orange;
+        }
+
+        &.has-errors {
+          border: 0;
+          border-top: 3px solid $red-l2;
+        }
       }
     }