Read-only users get "Details" instead of "Edit" button, remove "Save" option

cms/djangoapps/contentstore/views/item.py

@@ -234,6 +234,7 @@ def xblock_view_handler(request, usage_key_string, view_name):
 
         elif view_name in (PREVIEW_VIEWS + container_views):
             is_pages_view = view_name == STUDENT_VIEW   # Only the "Pages" view uses student view in Studio
+            can_edit = has_studio_write_access(request.user, usage_key.course_key)
 
             # Determine the items to be shown as reorderable. Note that the view
             # 'reorderable_container_child_preview' is only rendered for xblocks that
@@ -266,6 +267,7 @@ def xblock_view_handler(request, usage_key_string, view_name):
             context = {
                 'is_pages_view': is_pages_view,     # This setting disables the recursive wrapping of xblocks
                 'is_unit_page': is_unit(xblock),
+                'can_edit': can_edit,
                 'root_xblock': xblock if (view_name == 'container_preview') else None,
                 'reorderable_items': reorderable_items,
                 'paging': paging,

cms/djangoapps/contentstore/views/preview.py

@@ -226,6 +226,7 @@ def _studio_wrap_xblock(xblock, view, frag, context, display_name_only=False):
             'content': frag.content,
             'is_root': is_root,
             'is_reorderable': is_reorderable,
+            'can_edit': context.get('can_edit', True),
         }
         html = render_to_string('studio_xblock_wrapper.html', template_context)
         frag = wrap_fragment(frag, html)

cms/static/js/spec/views/modals/edit_xblock_spec.js

@@ -49,7 +49,7 @@ define(["jquery", "underscore", "js/common_helpers/ajax_helpers", "js/spec_helpe
                     var requests = AjaxHelpers.requests(this);
                     modal = showModal(requests, mockXBlockEditorHtml);
                     expect(modal.$('.action-save')).not.toBeVisible();
-                    expect(modal.$('.action-cancel').text()).toBe('OK');
+                    expect(modal.$('.action-cancel').text()).toBe('Close');
                 });
 
                 it('shows the correct title', function() {

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

@@ -65,7 +65,8 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", "js/vie
 
             onDisplayXBlock: function() {
                 var editorView = this.editorView,
-                    title = this.getTitle();
+                    title = this.getTitle(),
+                    readOnlyView = (this.editOptions && this.editOptions.readOnlyView) || !editorView.xblock.save;
 
                 // Notify the runtime that the modal has been shown
                 editorView.notifyRuntime('modal-shown', this);
@@ -88,7 +89,7 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", "js/vie
                 // If the xblock is not using custom buttons then choose which buttons to show
                 if (!editorView.hasCustomButtons()) {
                     // If the xblock does not support save then disable the save button
-                    if (!editorView.xblock.save) {
+                    if (readOnlyView) {
                         this.disableSave();
                     }
                     this.getActionBar().show();
@@ -101,8 +102,8 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal", "js/vie
             disableSave: function() {
                 var saveButton = this.getActionButton('save'),
                     cancelButton = this.getActionButton('cancel');
-                saveButton.hide();
-                cancelButton.text(gettext('OK'));
+                saveButton.parent().hide();
+                cancelButton.text(gettext('Close'));
                 cancelButton.addClass('action-primary');
             },
 

cms/static/js/views/paged_container.js

@@ -53,7 +53,6 @@ define(["jquery", "underscore", "js/views/container", "js/utils/module", "gettex
                         self.handleXBlockFragment(fragment, options);
                         self.processPaging({ requested_page: options.page_number });
                         self.page.renderAddXBlockComponents();
-                        self.page.updateBlockActions();
                     }
                 });
             },

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

@@ -140,7 +140,6 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
 
             onXBlockRefresh: function(xblockView, block_added) {
                 this.xblockView.refresh(block_added);
-                this.updateBlockActions();
                 // Update publish and last modified information from the server.
                 this.model.fetch();
             },
@@ -161,12 +160,6 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 }
             },
 
-            updateBlockActions: function() {
-                if (!this.options.canEdit) {
-                    this.xblockView.$el.find('.action-duplicate, .action-delete, .action-drag').remove();
-                }
-            },
-
             editXBlock: function(event) {
                 var xblockElement = this.findXBlockElement(event.target),
                     self = this,
@@ -174,6 +167,7 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                 event.preventDefault();
 
                 modal.edit(xblockElement, this.model, {
+                    readOnlyView: !this.options.canEdit,
                     refresh: function() {
                         self.refreshXBlock(xblockElement, false);
                     }

cms/templates/studio_xblock_wrapper.html

@@ -55,31 +55,39 @@ messages = json.dumps(xblock.validate().to_json())
         <div class="header-actions">
             <ul class="actions-list">
                 % if not is_root:
-                    % if not show_inline:
-                        <li class="action-item action-edit">
-                            <a href="#" class="edit-button action-button">
-                                <i class="icon fa fa-pencil"></i>
-                                <span class="action-button-text">${_("Edit")}</span>
+                    % if can_edit:
+                        % if not show_inline:
+                            <li class="action-item action-edit">
+                                <a href="#" class="edit-button action-button">
+                                    <i class="icon fa fa-pencil"></i>
+                                    <span class="action-button-text">${_("Edit")}</span>
+                                </a>
+                            </li>
+                            <li class="action-item action-duplicate">
+                                <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
+                                <i class="icon fa fa-copy"></i>
+                                <span class="sr">${_("Duplicate")}</span>
+                                </a>
+                            </li>
+                        % endif
+                        <li class="action-item action-delete">
+                            <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
+                            <i class="icon fa fa-trash-o"></i>
+                            <span class="sr">${_("Delete")}</span>
                             </a>
                         </li>
-                        <li class="action-item action-duplicate">
-                            <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
-                            <i class="icon fa fa-copy"></i>
-                            <span class="sr">${_("Duplicate")}</span>
+                        % if is_reorderable:
+                            <li class="action-item action-drag">
+                                <span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>
+                            </li>
+                        % endif
+                    % elif not show_inline:
+                        <li class="action-item action-edit action-edit-view-only">
+                            <a href="#" class="edit-button action-button">
+                                <span class="action-button-text">${_("Details")}</span>
                             </a>
                         </li>
                     % endif
-                    <li class="action-item action-delete">
-                        <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
-                        <i class="icon fa fa-trash-o"></i>
-                        <span class="sr">${_("Delete")}</span>
-                        </a>
-                    </li>
-                    % if is_reorderable:
-                        <li class="action-item action-drag">
-                            <span data-tooltip="${_('Drag to reorder')}" class="drag-handle action"></span>
-                        </li>
-                    % endif
                 % endif
             </ul>
         </div>