add message in empty outcomes dialog

fixes CNVS-7709

test plan:
  - in a course with no outcomes or outcome groups
  - go to the rubrics page
    - add a rubric and hit find outcome
    - you should see a message with a link to
      the outcomes page
  - go to the outcomes page
    - the message from above isnt displayed
  - add an outcomes
    - the rubrics find-outcome dialog no longer
      displays the message to the user
  - check anywhere else where you can add an outcome
    - things work as expected here
    - account level outcomes would be one such instance

Change-Id: Ied67a84513a9d7b1b497450caa8f341f95f87c65
Reviewed-on: https://gerrit.instructure.com/46358
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Adam Stone <astone@instructure.com>
Reviewed-by: Matt Berns <mberns@instructure.com>
Product-Review: Hilary Scharton <hilary@instructure.com>

app/coffeescripts/bundles/edit_rubric.coffee

@@ -53,6 +53,7 @@ require [
     onFindOutcome: (e) =>
       e.preventDefault()
       @$els.dialog.show()
+      @$els.dialog.$el.find('.alert').focus()
 
     onOutcomeImport: (model) ->
       rubricEditing.onFindOutcome(model)

app/coffeescripts/views/outcomes/ContentView.coffee

@@ -28,14 +28,20 @@ define [
   'compiled/views/TreeBrowserView'
   'compiled/views/RootOutcomesFinder'
   'jst/MoveOutcomeDialog'
-], ($, _, I18n, Backbone, Outcome, OutcomeGroup, OutcomeView, OutcomeGroupView, TreeBrowserView, RootOutcomesFinder, dialogTemplate) ->
+  'jst/outcomes/noOutcomesWarning'
+  'compiled/backbone-ext/DefaultUrlMixin'
+  'str/htmlEscape'
+], ($, _, I18n, Backbone, Outcome, OutcomeGroup, OutcomeView, OutcomeGroupView, TreeBrowserView, RootOutcomesFinder, dialogTemplate, noOutcomesWarning, DefaultUrlMixin, htmlEscape) ->
 
   # This view is a wrapper for showing details for outcomes and groups.
   # It uses OutcomeView and OutcomeGroupView to render
   class ContentView extends Backbone.View
+    @mixin DefaultUrlMixin
 
     initialize: ({@readOnly, @setQuizMastery, @useForScoring, @instructionsTemplate, @renderInstructions}) ->
       super
+      $.subscribe "renderNoOutcomeWarning", @renderNoOutcomeWarning
+      $.subscribe "clearNoOutcomeWarning", @clearNoOutcomeWarning
       @render()
 
     # accepts: Outcome and OutcomeGroup
@@ -130,3 +136,12 @@ define [
 
     remove: ->
       @innerView?.off 'addSuccess'
+
+    renderNoOutcomeWarning: =>
+      @$el?.empty()
+      contextPath = htmlEscape(@_contextPath())
+      noOutcomesLinkLabel = I18n.t("You have no outcomes. Click here to go to the outcomes page.")
+      @$el?.append($.raw(noOutcomesWarning(addOutcomesUrl: "/#{contextPath}/outcomes", noOutcomesLinkLabel: noOutcomesLinkLabel)))
+
+    clearNoOutcomeWarning: =>
+      @$el?.empty()

app/coffeescripts/views/outcomes/FindDialog.coffee

@@ -67,6 +67,7 @@ define [
         directoryView: opts.directoryView
         rootOutcomeGroup: opts.rootOutcomeGroup
         readOnly: true
+        inFindDialog: true
       @content = new ContentView
         el: @$el.find('.outcomes-content')
         instructionsTemplate: instructionsTemplate

app/coffeescripts/views/outcomes/OutcomesDirectoryView.coffee

@@ -34,13 +34,13 @@ define [
 
   # The outcome group "directory" browser.
   class OutcomesDirectoryView extends PaginatedView
-
     tagName: 'ul'
     className: 'outcome-level'
 
     # if opts includes 'outcomeGroup', an instance of OutcomeGroup,
     # then the groups and the outcomes for the outcomeGroup will be fetched.
     initialize: (opts) ->
+      @inFindDialog = opts.inFindDialog
       @readOnly = opts.readOnly
       @parent = opts.parent
       # the way the event listeners work between OutcomeIconView, OutcomesDirectoryView
@@ -227,12 +227,19 @@ define [
       @$el.empty()
       return @reset() if @needsReset
       _.each @views(), (v) => @$el.append v.render().el
+      @handleWarning() if @inFindDialog
       @initDroppable() unless @readOnly
       # Make the first <li /> tabbable for accessibility purposes.
       @$('li:first').attr('tabindex', 0)
       @$el.data 'view', this
       this
 
+    handleWarning: =>
+      if !@parent && _.isEmpty(@groups.models) && _.isEmpty(@outcomes.models) && _.isEmpty(@views())
+        $.publish("renderNoOutcomeWarning")
+      else
+        $.publish("clearNoOutcomeWarning")
+
     # private
     _viewsFor: (models, viewClass) ->
       _.map models, (model) => new viewClass {model: model, readOnly: @readOnly, dir: this}

app/coffeescripts/views/outcomes/SidebarView.coffee

@@ -41,6 +41,7 @@ define [
     # options must include rootOutcomeGroup or directoryView
     initialize: (opts) ->
       super
+      @inFindDialog = opts.inFindDialog
       @readOnly = opts.readOnly
       @selectFirstItem = opts.selectFirstItem
       @directories = []
@@ -67,7 +68,7 @@ define [
       else
         parent = _.last @directories
         directoryClass = outcomeGroup.get('directoryClass') || OutcomesDirectoryView
-        dir = new directoryClass {outcomeGroup, parent, @readOnly, selectFirstItem: @selectFirstItem}
+        dir = new directoryClass {outcomeGroup, parent, @readOnly, selectFirstItem: @selectFirstItem, inFindDialog: @inFindDialog}
         @firstDir = false
       @addDir dir
 

app/stylesheets/pages/learning_outcomes.sass

@@ -207,3 +207,6 @@ table.criterion .insert
   
 .outcomes-edit-row
   text-align: left
+
+.no-outcomes-warning
+  margin: 10px 40px 10px 40px

app/views/jst/outcomes/noOutcomesWarning.handlebars

@@ -0,0 +1,5 @@
+<div class="no-outcomes-warning">
+  <div class="alert" aria-live="true" aria-alert="true">
+    {{#t}}You have no outcomes. <a href="{{addOutcomesUrl}}" aria-label="{{noOutcomesLinkLabel}}">Click here</a> to create one.{{/t}}
+  </div>
+</div>

spec/coffeescripts/views/outcomes/ContentViewSpec.coffee

@@ -0,0 +1,28 @@
+define [
+  'jquery'
+  'Backbone'
+  'compiled/views/outcomes/ContentView'
+  'helpers/fakeENV'
+  'jst/outcomes/mainInstructions'
+], ($, Backbone, ContentView, fakeENV, instructionsTemplate) ->
+
+  module 'CollectionView',
+    setup: ->
+      fakeENV.setup()
+      viewEl = $('<div id="content-view-el">original_text</div>')
+      viewEl.appendTo fixtures
+      @contentView = new ContentView
+        el: viewEl
+        instructionsTemplate: instructionsTemplate
+        renderengInstructions: false
+      @contentView.$el.appendTo $('#fixtures')
+      @contentView.render()
+    teardown: ->
+      fakeENV.teardown()
+      @contentView.remove()
+
+  test 'collectionView replaces text with warning on renderNoOutcomeWarning event', ->
+    ok @contentView.$el?.text().match(/original_text/)
+    $.publish "renderNoOutcomeWarning"
+    ok @contentView.$el?.text().match(/You have no outcomes/)
+    ok not @contentView.$el?.text().match(/original_text/)