Disable user content enhancement in ePortfolios

flag = none
fixes TALLY-468

Test plan:
- Create a new ePortfolio
  - Take note of its ID
- Add a new section (call it, e.g., "MySection")
- Add a page with an HTML component (call it, e.g., "MyPage")
- Add HTML content like so:
  <div class="user_content unenhanced">
    <div class="tabs enhanceable_content">
      <ul>
        <li><a href="https://somesite.com">some site</a></li>
      </ul>
    </div>
  </div>

(The destination and inner text of the link may be whatever you like,
but the rest of the content needs to have the structure shown above.)

- Save the page

- Examine your new page from the following vantage points:
  - The "preview" view of the main ePortfolio
    - http://<host>/eportfolios/<id>?view=preview
  - The view of the section
    - http://<host>/eportfolios/<id>/MySection
  - The view of the specific page you added
    - http://<host>/eportfolios/<id>/MySection/MyPage

- In all cases, the content you entered above should continue to appear
  as a list containing links, and *not* be automagically transformed
  into jQuery tabs that then attempt to load said links

Change-Id: I98cab671bfb37f8be2a92ba6caa5a7e58ec8047f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/224877
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
Reviewed-by: Jeremy Neander <jneander@instructure.com>
QA-Review: Robin Kuss <rkuss@instructure.com>
Product-Review: Spencer Olson <solson@instructure.com>

lib/eportfolio_page.rb

@@ -51,6 +51,8 @@ module EportfolioPage
       js_env :folder_id => Folder.unfiled_folder(@current_user).id,
              :context_code => @current_user.asset_string
     end
+
+    js_env({ SKIP_ENHANCING_USER_CONTENT: true })
     js_bundle :eportfolio, 'legacy/eportfolios_wizard_box'
     css_bundle :tinymce
     @no_left_side_list_view = true

public/javascripts/instructure.js

@@ -103,6 +103,10 @@ function handleYoutubeLink() {
 trackEvent('Route', window.location.pathname.replace(/\/$/, '').replace(/\d+/g, '--') || '/')
 const JQUERY_UI_WIDGETS_WE_TRY_TO_ENHANCE = '.dialog, .draggable, .resizable, .sortable, .tabs'
 export function enhanceUserContent() {
+  if (ENV.SKIP_ENHANCING_USER_CONTENT) {
+    return
+  }
+
   const $content = $('#content')
   $('.user_content:not(.enhanced):visible').addClass('unenhanced')
   $('.user_content.unenhanced:visible')

spec/controllers/eportfolio_categories_controller_spec.rb

@@ -62,6 +62,14 @@ describe EportfolioCategoriesController do
       expect(assigns[:category]).to eql(@category)
     end
 
+    describe "js_env" do
+      it "sets SKIP_ENHANCING_USER_CONTENT to true" do
+        user_session(@user)
+        get 'show', params: {eportfolio_id: @portfolio.id, category_name: @category.slug}
+        expect(assigns.dig(:js_env, :SKIP_ENHANCING_USER_CONTENT)).to be true
+      end
+    end
+
     context "spam eportfolios" do
       before(:once) do
         @portfolio.user.account.enable_feature!(:eportfolio_moderation)

spec/controllers/eportfolio_entries_controller_spec.rb

@@ -73,6 +73,18 @@ describe EportfolioEntriesController do
       expect(assigns[:entries]).not_to be_empty
     end
 
+    describe "js_env" do
+      it "sets SKIP_ENHANCING_USER_CONTENT to true" do
+        user_session(@user)
+        @category.name = "some category"
+        @category.save!
+        @entry.name = "some entry"
+        @entry.save!
+        get 'show', params: {eportfolio_id: @portfolio.id, category_name: @category.slug, entry_name: @entry.slug}
+        expect(assigns.dig(:js_env, :SKIP_ENHANCING_USER_CONTENT)).to be true
+      end
+    end
+
     context "spam eportfolios" do
       before(:once) do
         @portfolio.user.account.enable_feature!(:eportfolio_moderation)

spec/controllers/eportfolios_controller_spec.rb

@@ -148,6 +148,14 @@ describe EportfoliosController do
         expect(response).to be_successful
         expect(assigns[:page]).not_to be_nil
       end
+
+      describe "js_env" do
+        it "sets SKIP_ENHANCING_USER_CONTENT to true" do
+          @portfolio.eportfolio_categories.create!(name: "Home")
+          get 'show', params: {id: @portfolio.id, view: "preview"}
+          expect(assigns.dig(:js_env, :SKIP_ENHANCING_USER_CONTENT)).to be true
+        end
+      end
     end
 
     describe "assigns[:owner_url]" do

spec/javascripts/jsx/instructureSpec.js

@@ -18,58 +18,78 @@
 
 import $ from 'jquery'
 import {enhanceUserContent} from 'instructure'
+import fakeENV from 'helpers/fakeENV'
 
-let elem
-QUnit.module('Enhance User Content', {
-  setup() {
+QUnit.module('Enhance User Content', hooks => {
+  let elem
+
+  hooks.beforeEach(() => {
     elem = document.createElement('div')
     document.body.appendChild(elem)
-  },
+  })
 
-  teardown() {
+  hooks.afterEach(() => {
     document.body.removeChild(elem)
-  }
-})
+  })
 
-test('youtube preview gets alt text from link data-preview-alt', () => {
-  const alt = 'test alt string'
-  elem.innerHTML = `
-    <div class="user_content">
-      <a href="#" class="instructure_video_link" data-preview-alt="${alt}">
-        Link
-      </a>
-    </div>
-  `
-  sandbox.stub($, 'youTubeID').returns(47)
-  enhanceUserContent()
-  equal(elem.querySelector('.media_comment_thumbnail').alt, alt)
-})
+  test('youtube preview gets alt text from link data-preview-alt', () => {
+    const alt = 'test alt string'
+    elem.innerHTML = `
+      <div class="user_content">
+        <a href="#" class="instructure_video_link" data-preview-alt="${alt}">
+          Link
+        </a>
+      </div>
+    `
+    sandbox.stub($, 'youTubeID').returns(47)
+    enhanceUserContent()
+    equal(elem.querySelector('.media_comment_thumbnail').alt, alt)
+  })
 
-test('youtube preview ignores missing alt', () => {
-  elem.innerHTML = `
-    <div class="user_content">
-      <a href="#" class="instructure_video_link">
-        Link
-      </a>
-    </div>
-  `
-  sandbox.stub($, 'youTubeID').returns(47)
-  enhanceUserContent()
-  ok(elem.querySelector('.media_comment_thumbnail').outerHTML.match('alt=""'))
-})
+  test('youtube preview ignores missing alt', () => {
+    elem.innerHTML = `
+      <div class="user_content">
+        <a href="#" class="instructure_video_link">
+          Link
+        </a>
+      </div>
+    `
+    sandbox.stub($, 'youTubeID').returns(47)
+    enhanceUserContent()
+    ok(elem.querySelector('.media_comment_thumbnail').outerHTML.match('alt=""'))
+  })
 
-test("enhance '.instructure_inline_media_comment' in questions", () => {
-  const mediaCommentThumbnailSpy = sandbox.spy($.fn, 'mediaCommentThumbnail')
-  elem.innerHTML = `
-    <div class="user_content"></div>
-    <div class="answers">
-      <a href="#" class="instructure_inline_media_comment instructure_video_link">
-        link
-      </a>
-    </div>
-  `
-  enhanceUserContent()
-  equal(mediaCommentThumbnailSpy.thisValues[0].length, 1) // for .instructure_inline_media_comment
-  equal(mediaCommentThumbnailSpy.thisValues[1].length, 1) // for .instructure_video_link
-  $.fn.mediaCommentThumbnail.restore()
+  test("enhance '.instructure_inline_media_comment' in questions", () => {
+    const mediaCommentThumbnailSpy = sandbox.spy($.fn, 'mediaCommentThumbnail')
+    elem.innerHTML = `
+      <div class="user_content"></div>
+      <div class="answers">
+        <a href="#" class="instructure_inline_media_comment instructure_video_link">
+          link
+        </a>
+      </div>
+    `
+    enhanceUserContent()
+    equal(mediaCommentThumbnailSpy.thisValues[0].length, 1) // for .instructure_inline_media_comment
+    equal(mediaCommentThumbnailSpy.thisValues[1].length, 1) // for .instructure_video_link
+    $.fn.mediaCommentThumbnail.restore()
+  })
+
+  test('does not enhance content if ENV.SKIP_ENHANCING_USER_CONTENT is set to true', () => {
+    fakeENV.setup({SKIP_ENHANCING_USER_CONTENT: true})
+
+    const mediaCommentThumbnailSpy = sandbox.spy($.fn, 'mediaCommentThumbnail')
+    elem.innerHTML = `
+      <div class="user_content"></div>
+      <div class="answers">
+        <a href="#" class="instructure_inline_media_comment instructure_video_link">
+          link
+        </a>
+      </div>
+    `
+    enhanceUserContent()
+    strictEqual(mediaCommentThumbnailSpy.callCount, 0)
+
+    fakeENV.teardown()
+  })
 })