html previews in new files

test plan:
 - the new files preview should show HTML files
   uploaded to course/user files
   (note that relative links in downloaded HTML will break;
    this is an expected consequence of previewing a bare
    HTML file)

fixes CNVS-20110

Change-Id: I77725865668284f02cf72fa8e7ea12e9b69c7954
Reviewed-on: https://gerrit.instructure.com/53264
Reviewed-by: James Williams  <jamesw@instructure.com>
Tested-by: Jenkins
QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com>
Product-Review: Jeremy Stanley <jeremy@instructure.com>

Author: jstanley0

app/coffeescripts/react_files/components/FilePreview.coffee

@@ -203,7 +203,7 @@ define [
                 allowFullScreen: true
                 title: I18n.t('File Preview')
                 src: @state.displayedItem.get 'preview_url'
-                className: 'ef-file-preview-frame'
+                className: 'ef-file-preview-frame' + if @state.displayedItem.get('content-type') is 'text/html' then ' ef-file-preview-frame-html' else ''
               }
             else # file was not found
               div className: 'ef-file-not-found ef-file-preview-frame',

app/controllers/file_previews_controller.rb

@@ -80,6 +80,9 @@ def show
       # media files
       elsif @file.content_type =~ %r{\A(audio|video)/}
         return render template: 'file_previews/media_preview', layout: false
+      # html files
+      elsif @file.content_type == 'text/html'
+        return redirect_to context_url(@context, :context_file_preview_url, @file.id)
       # no preview available
       else
         @accessed_asset = nil # otherwise it will double-log when they download the file

app/stylesheets/pages/react_files/_FilePreview.scss

@@ -8,6 +8,7 @@ $preview-font-color: $ic-color-light;
 $spacing-width: 0;
 $preview-footer-height: 140px;
 $preview-header-height: 9vh;
+$preview-html-background: whitesmoke;
 
 .ReactModal__Overlay.ReactModal__Overlay--ef-file-preview {
   background: rgba(black, 0.9);
@@ -248,3 +249,8 @@ a.ef-file-preview-button, button.ef-file-preview-button div {
 .FilePreviewInfoPanel__usageRights {
   vertical-align: top;
 }
+
+// so previews of unstyled HTML will not feature black-on-black text
+.ef-file-preview-frame-html {
+  background-color: $preview-html-background;
+}

spec/controllers/file_previews_controller_spec.rb

@@ -77,6 +77,15 @@
     expect(response.location).to match %r{\A//docs.google.com/viewer}
   end
 
+  it "should redirect to file if it's html" do
+    Attachment.any_instance.stubs(:crocodoc_url).returns(nil)
+    Attachment.any_instance.stubs(:canvadoc_url).returns(nil)
+    attachment_model content_type: 'text/html'
+    get :show, course_id: @course.id, file_id: @attachment.id
+    expect(response).to be_redirect
+    expect(response.location).to match %r{/courses/#{@course.id}/files/#{@attachment.id}/preview}
+  end
+
   it "should render a download link if no previews are available" do
     Attachment.any_instance.stubs(:crocodoc_url).returns(nil)
     Attachment.any_instance.stubs(:canvadoc_url).returns(nil)