add jquery ui dialog options to each instance

Each instance of the jQuery UI dialog will now incorporate
specific options that were previously implemented through
custom modifications to the source code. This update aims
to streamline our codebase by directly applying critical
customizations, such as z-index and modal type, to the
instantiation calls themselves. By doing so, we eliminate
the need to maintain separate versions of the library
source code with one-off modifications.

This commit adds z-index and modal type that were missed
in a previous commit 240e7d7314

refs FOO-4258
flag=none

test plan: tests pass

[skip-crystalball]

Change-Id: I6bfc4db349ee21874db86c69064c5fc4862338fa
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/340547
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Michael Hulse <michael.hulse@instructure.com>
Product-Review: Michael Hulse <michael.hulse@instructure.com>
Reviewed-by: Angela Gomba <angela.gomba@instructure.com>

spec/coffeescripts/CollaborationsSpec.js

@@ -33,6 +33,8 @@ QUnit.module('Collaborations', {
       width: 550,
       height: 500,
       resizable: false,
+      modal: true,
+      zIndex: 1000,
     })
     const dom = $('<div></div>')
     dom.append(dialog)

spec/coffeescripts/jquery/fixDialogButtonsSpec.js

@@ -48,7 +48,10 @@ test('handles buttons', function () {
 </form>
 `)
     .appendTo('#fixtures')
-    .dialog()
+    .dialog({
+      modal: true,
+      zIndex: 1000,
+    })
     .fixDialogButtons()
   ok($dialog.is(':ui-dialog:visible'), 'pops up dialog')
   equal($dialog.dialog('option', 'buttons').length, 2, 'converts both buttons in .button-pane only')

spec/coffeescripts/jquery/jqueryUiUnpatchedDialogSpec.js

@@ -43,7 +43,10 @@ QUnit.module('Dialog Widget', {
 QUnit.test('Dialog widget is initialized', function (assert) {
   // Arrange
   const $dialog = $('#test-dialog')
-  $dialog.dialog()
+  $dialog.dialog({
+    modal: true,
+    zIndex: 1000,
+  })
 
   // Act
   $dialog.dialog('open') // Open the dialog
@@ -67,6 +70,8 @@ QUnit.test('Open and Close events are triggered', async function (assert) {
       ok(openTriggered, 'dialog on open was not called')
       done()
     },
+    modal: true,
+    zIndex: 1000,
   })
 
   $dialog.dialog('open') // Open the dialog

spec/selenium/miscellaneous/jquery_ui_spec.rb

@@ -35,7 +35,10 @@ describe "jquery ui" do
   def create_simple_modal
     driver.execute_script(<<~JS)
       $('<div><select /><input /></div>')
-        .dialog()
+        .dialog({
+          modal: true,
+          zIndex: 1000
+        })
         .find('select')
         .focus()
     JS
@@ -48,14 +51,20 @@ describe "jquery ui" do
 
   it "makes dialogs modal by default" do
     expect(driver.execute_script(<<~JS)).to be true
-      return $('<div />').dialog().dialog('option', 'modal');
+      return $('<div />').dialog({
+        modal: true,
+        zIndex: 1000
+      }).dialog('option', 'modal');
     JS
     expect(f(".ui-widget-overlay")).to be_displayed
 
     # make sure that hiding then showing the same dialog again, it still looks modal
     expect(driver.execute_script(<<~JS)).to be true
       return $('<div />')
-        .dialog()
+        .dialog({
+          modal: true,
+          zIndex: 1000
+        })
         .dialog('close')
         .dialog('open')
         .dialog('option', 'modal');
@@ -122,7 +131,10 @@ describe "jquery ui" do
       title = "<b>this</b> is the title"
       expect(driver.execute_script(<<~JS)).to eq title
         return $('<div id="jqueryui_test" title="#{title}">hello</div>')
-          .dialog()
+          .dialog({
+            modal: true,
+            zIndex: 1000
+          })
           .parent('.ui-dialog')
           .find('.ui-dialog-title')
           .text();
@@ -132,7 +144,10 @@ describe "jquery ui" do
     it "uses a non-breaking space for empty titles" do
       expect(driver.execute_script(<<~JS)).to eq "\302\240"
         return $('<div id="jqueryui_test">hello</div>')
-          .dialog()
+          .dialog({
+            modal: true,
+            zIndex: 1000
+          })
           .parent('.ui-dialog')
           .find('.ui-dialog-title')
           .text();
@@ -140,7 +155,10 @@ describe "jquery ui" do
 
       expect(driver.execute_script(<<~JS)).to eq "\302\240"
         return $('#jqueryui_test')
-          .dialog()
+          .dialog({
+            modal: true,
+            zIndex: 1000
+          })
           .dialog('option', 'title', 'foo')
           .dialog('option', 'title', '')
           .parent('.ui-dialog')
@@ -153,7 +171,11 @@ describe "jquery ui" do
       title = "<b>this</b> is the title"
       expect(driver.execute_script(<<~JS)).to eq title
         return $('<div id="jqueryui_test">hello again</div>')
-          .dialog({title: #{title.inspect}})
+          .dialog({
+            title: #{title.inspect},
+            modal: true,
+            zIndex: 1000
+          })
           .parent('.ui-dialog')
           .find('.ui-dialog-title')
           .text();
@@ -162,7 +184,10 @@ describe "jquery ui" do
       new_title = "and now <i>this</i> is the title"
       expect(driver.execute_script(<<~JS)).to eq new_title
         return $('#jqueryui_test')
-          .dialog()
+          .dialog({
+            modal: true,
+            zIndex: 1000
+          })
           .dialog('option', 'title', #{new_title.inspect})
           .parent('.ui-dialog')
           .find('.ui-dialog-title')
@@ -174,7 +199,11 @@ describe "jquery ui" do
       title = "<i>i want formatting <b>for realz</b></i>"
       expect(driver.execute_script(<<~JS)).to eq title
         return $('<div id="jqueryui_test">here we go</div>')
-          .dialog({title: $(#{title.inspect})})
+          .dialog({
+            title: $(#{title.inspect}),
+            modal: true,
+            zIndex: 1000
+          })
           .parent('.ui-dialog')
           .find('.ui-dialog-title')
           .html();
@@ -183,7 +212,10 @@ describe "jquery ui" do
       new_title = "<i>i <b>still</b> want formatting</i>"
       expect(driver.execute_script(<<~JS)).to eq new_title
         return $('#jqueryui_test')
-          .dialog()
+          .dialog({
+            modal: true,
+            zIndex: 1000
+          })
           .dialog('option', 'title', $(#{new_title.inspect}))
           .parent('.ui-dialog')
           .find('.ui-dialog-title')

ui/boot/initializers/activateElementToggler.js

@@ -97,6 +97,8 @@ function toggleRegion($region, showRegion, $trigger) {
           close() {
             toggleRegion($region, false)
           },
+          modal: true,
+          zIndex: 1000,
         },
         dialogOpts
       )

ui/boot/initializers/warnOnIncompleteRegistration.js

@@ -37,5 +37,7 @@ if (ENV.INCOMPLETE_REGISTRATION) {
           class: 'btn-primary',
         },
       ],
+      modal: true,
+      zIndex: 1000,
     })
 }

ui/features/assignment_edit/backbone/views/TurnitinSettingsDialog.js

@@ -95,6 +95,7 @@ TurnitinSettingsDialog.prototype.renderEl = function () {
     .dialog({
       width: 'auto',
       modal: true,
+      zIndex: 1000,
     })
     .fixDialogButtons()
 }

ui/features/calendar/jquery/EditAppointmentGroupDetails.js

@@ -257,6 +257,8 @@ export default class EditAppointmentGroupDetails {
     return $('#options_help_dialog').dialog({
       title: I18n.t('affect_reservations', 'How will this affect reservations?'),
       width: 400,
+      modal: true,
+      zIndex: 1000,
     })
   }
 

ui/features/calendar/jquery/EditApptCalendarEventDialog.js

@@ -50,6 +50,8 @@ export default class EditApptCalendarEventDialog {
           click: this.save,
         },
       ],
+      modal: true,
+      zIndex: 1000,
     })
     this.dialog.submit(event => {
       event.preventDefault()

ui/features/calendar/jquery/ShowEventDetailsDialog.jsx

@@ -122,6 +122,8 @@ export default class ShowEventDetailsDialog {
         const $dialog = $(reservationOverLimitDialog(error)).dialog({
           resizable: false,
           width: 450,
+          modal: true,
+          zIndex: 1000,
           buttons: error.reschedulable
             ? [
                 {

ui/features/calendar/jquery/sidebar.jsx

@@ -182,6 +182,7 @@ function setupCalendarFeedsWithSpecialAccessibilityConsiderationsForNVDA() {
       {
         autoOpen: false,
         modal: true,
+        zIndex: 1000,
         create: (e, _ui) => {
           e.target.parentElement.setAttribute(
             'aria-labelledby',

ui/features/collaborations/backbone/views/CollaborationView.js

@@ -124,8 +124,8 @@ CollaborationView.prototype.confirmGoogleDocsDelete = function () {
   return $dialog.dialog({
     title: I18n.t('titles.delete', 'Delete collaboration?'),
     width: 350,
-    zIndex: 1000,
     modal: true,
+    zIndex: 1000,
   })
 }
 

ui/features/conferences/backbone/views/ConferenceView.jsx

@@ -267,6 +267,8 @@ ConferenceView.prototype.external = function (e) {
         resizable: true,
         height: 'auto',
         title: $self.text(),
+        modal: true,
+        zIndex: 1000,
       })
     } else {
       return window.open(data[0].url)

ui/features/conversations/backbone/views/MessageFormDialog.js

@@ -109,6 +109,8 @@ export default class MessageFormDialog extends DialogBaseView {
           click: e => this.sendMessage(e),
         },
       ],
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/conversations/backbone/views/SubmissionCommentFormDialog.js

@@ -75,6 +75,8 @@ export default class SubmissionCommentFormDialog extends DialogBaseView {
           click: e => this.sendMessage(e),
         },
       ],
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/files/react/components/Toolbar.jsx

@@ -94,13 +94,14 @@ export default class Toolbar extends React.Component {
           itemName: this.props.selectedItems[0].displayName(),
         }
       ),
-
       width: 800,
       minHeight: 400,
       close() {
         ReactDOM.unmountComponentAtNode(this)
         $(this).remove()
       },
+      modal: true,
+      zIndex: 1000,
     })
 
     ReactDOM.render(

ui/features/grade_summary/backbone/views/OutcomeDetailView.js

@@ -30,6 +30,8 @@ class OutcomeDetailView extends DialogBaseView {
       close: this.onClose,
       buttons: [],
       width: 640,
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/grade_summary/backbone/views/OutcomeDialogView.js

@@ -45,6 +45,8 @@ class OutcomeResultsDialogView extends DialogBaseView {
       close: this.onClose,
       buttons: [],
       width: 460,
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/gradebook/react/SISGradePassback/PostGradesApp.tsx

@@ -63,6 +63,8 @@ class PostGradesApp extends React.Component<Props> {
           returnFocusTo.focus()
         }
       },
+      modal: true,
+      zIndex: 1000,
     })
 
     function closeDialog(e) {

ui/features/gradebook/react/shared/ReuploadSubmissionsDialogManager.ts

@@ -76,6 +76,7 @@ class ReuploadSubmissionsDialogManager {
           cb()
         }
       },
+      zIndex: 1000,
     })
 
     setupSubmitHandler(this.userAssetString)

ui/features/quizzes/jquery/quizzes.js

@@ -4335,6 +4335,7 @@ ready(function () {
           height: displayGroupSelector ? 345 : 265,
           close: this.removeEventListeners.bind(this),
           open: this.focusDialog.bind(this),
+          zIndex: 1000,
         })
         .dialog('open')
 
@@ -5125,6 +5126,8 @@ $.fn.formulaQuestion = function () {
     $('#help_with_equations_dialog').dialog({
       title: I18n.t('titles.help_with_formulas', 'Help with Quiz Question Formulas'),
       width: 500,
+      modal: true,
+      zIndex: 1000,
     })
   })
   $question.find('.combinations_option').attr('disabled', true)

ui/features/registration/jquery/index.js

@@ -58,6 +58,7 @@ $('#registration_video a').click(
       close() {
         return $(this).remove()
       },
+      zIndex: 1000,
     })
   })
 )

ui/features/roster/backbone/views/EditRolesView.js

@@ -36,6 +36,8 @@ export default class EditRolesView extends DialogBaseView {
       width: '300px',
       id: 'edit_roles',
       title: I18n.t('Edit Course Role'),
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/roster/backbone/views/EditSectionsView.js

@@ -38,6 +38,8 @@ export default class EditSectionsView extends DialogBaseView {
     this.prototype.dialogOptions = {
       id: 'edit_sections',
       title: I18n.t('titles.section_enrollments', 'Section Enrollments'),
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/roster/backbone/views/InvitationsView.js

@@ -41,6 +41,8 @@ export default class InvitationsView extends DialogBaseView {
           click: this.resend.bind(this),
         },
       ],
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/roster/backbone/views/LinkToStudentsView.js

@@ -32,6 +32,8 @@ export default class LinkToStudentsView extends DialogBaseView {
     this.prototype.dialogOptions = {
       id: 'link_students',
       title: I18n.t('titles.link_to_students', 'Link to Students'),
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/features/screenreader_gradebook/ember/components/ic_submission_download_dialog_component.js

@@ -143,7 +143,10 @@ export default register(
         if (this.$dialog == null) {
           this.$dialog = $('#submissions_download_dialog form').dialog(this.dialogOptions)
         }
-        this.$dialog.dialog()
+        this.$dialog.dialog({
+          modal: true,
+          zIndex: 1000,
+        })
         return this.checkForChange()
       },
 

ui/features/screenreader_gradebook/jquery/AssignmentMuter.js

@@ -149,6 +149,8 @@ export default class AssignmentMuter {
         resizable: false,
         title: I18n.t('unmute_assignment', 'Unmute Assignment'),
         width: 400,
+        modal: true,
+        zIndex: 1000,
       })
   }
 }

ui/shared/assignments/backbone/views/AssignmentGroupCreateDialog.js

@@ -53,6 +53,7 @@ AssignmentGroupCreateDialog.prototype.render = function () {
       title: I18n.t('titles.add_assignment_group', 'Add Assignment Group'),
       width: 'auto',
       modal: true,
+      zIndex: 1000,
     })
     .fixDialogButtons()
   this.$el

ui/shared/assignments/backbone/views/GradingTypeSelector.jsx

@@ -104,6 +104,8 @@ GradingTypeSelector.prototype.showGpaDialog = function (ev) {
     close() {
       return $(ev.target).focus()
     },
+    modal: true,
+    zIndex: 1000,
   })
 }
 
@@ -120,6 +122,8 @@ GradingTypeSelector.prototype.showGradingSchemeDialog = function (ev) {
       close() {
         return $(ev.target).focus()
       },
+      modal: true,
+      zIndex: 1000,
     })
     .fixDialogButtons()
 }

ui/shared/calendar/jquery/MessageParticipantsDialog.js

@@ -78,6 +78,8 @@ export default class MessageParticipantsDialog {
       close() {
         $(this).remove()
       },
+      modal: true,
+      zIndex: 1000,
     })
     return this.loadParticipants()
   }

ui/shared/context-modules/jquery/index.jsx

@@ -1464,6 +1464,7 @@ modules.initModuleManagement = function (duplicate) {
         },
         minWidth: 320,
         modal: true,
+        zIndex: 1000,
       })
       .fixDialogButtons()
   })
@@ -1922,6 +1923,8 @@ modules.initModuleManagement = function (duplicate) {
         module: module.name,
       }),
       width: 400,
+      modal: true,
+      zIndex: 1000,
     })
   })
   $('#add_context_module_form .cancel_button').click(_event => {

ui/shared/external-tools/backbone/views/ExternalContentReturnView.js

@@ -107,6 +107,8 @@ ExternalContentReturnView.prototype.afterRender = function () {
       resizable: true,
       close: this.removeDialog,
       open: focusOnOpen,
+      modal: true,
+      zIndex: 1000,
     })
   }
 }

ui/shared/media-comments/jquery/index.js

@@ -618,6 +618,7 @@ $.mediaComment.init = function (mediaType, opts) {
           width: 470,
           height: 300,
           modal: true,
+          zIndex: 1000,
         })
 
         // **********************************************************************

ui/shared/media-comments/jquery/mediaComment.js

@@ -316,6 +316,7 @@ const mediaCommentActions = {
             .attr('aria-label', I18n.t('Play Media Comment'))
           $(event.currentTarget).parent().find('.ui-dialog-titlebar-close').focus()
         },
+        zIndex: 1000,
       })
 
       // Populate dialog box with a video

ui/shared/mediaelement/UploadMediaTrackForm.jsx

@@ -59,6 +59,8 @@ export default class UploadMediaTrackForm {
             click: this.onSubmit,
           },
         ],
+        modal: true,
+        zIndex: 1000,
       })
 
     ReactDOM.render(

ui/shared/outcomes/backbone/views/FindDialog.js

@@ -52,6 +52,8 @@ export default class FindDialog extends DialogBaseView {
           click: e => this.import(e),
         },
       ],
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/shared/outcomes/content-view/backbone/views/index.js

@@ -176,6 +176,8 @@ export default class ContentView extends Backbone.View {
       close(_e) {
         $(this).remove()
       },
+      modal: true,
+      zIndex: 1000,
     })
     return dialog
   }

ui/shared/relock-modules-dialog/RelockModulesDialog.js

@@ -45,6 +45,8 @@ export default class RelockModulesDialog extends DialogBaseView {
           click: e => this.cancel(e),
         },
       ],
+      modal: true,
+      zIndex: 1000,
     }
   }
 

ui/shared/signup-dialog/jquery/index.js

@@ -183,6 +183,8 @@ const signupDialog = function (id, title, path) {
       }
       return $('.error_box').filter(':visible').remove()
     },
+    modal: true,
+    zIndex: 1000,
   })
   $node.fixDialogButtons()
   // re-disable after fixing