Use new media attachment route on upload

closes LF-328
flag=media_links_use_attachment_id

Test plan:
1. In the files area in a course (or user)
2. Open the preview for a video file
   (upload one if needed).
3. Try to upload a CC via the CC menu and
   check that the correct media_attachments/
   route was used and not media_objects/

Change-Id: I55e1c2fffe44de089c39b5eb96c4ba634198d242
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/319253
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Mysti Lilla <mysti@instructure.com>
QA-Review: Mysti Lilla <mysti@instructure.com>
Product-Review: Luis Oliveira <luis.oliveira@instructure.com>

app/helpers/attachment_helper.rb

@@ -54,6 +54,7 @@ module AttachmentHelper
   end
 
   def media_preview_attributes(attachment, attrs = {})
+    attrs[:attachment_id] = attachment.id
     attrs[:type] = attachment.content_type&.include?("video") ? "video" : "audio"
     attrs[:download_url] = context_url(attachment.context, :context_file_download_url, attachment.id)
     attrs[:media_entry_id] = attachment.media_entry_id if attachment.media_entry_id

jest.config.js

@@ -37,6 +37,7 @@ module.exports = {
     'decimal.js/decimal.mjs': 'decimal.js/decimal.js',
     // https://github.com/ai/nanoid/issues/363
     '^nanoid(/(.*)|$)': 'nanoid$1',
+    '\\.(css)$': '<rootDir>/jest/styleMock.js',
   },
   roots: ['<rootDir>/ui', 'gems/plugins', 'public/javascripts'],
   moduleDirectories: ['ui/shims', 'public/javascripts', 'node_modules'],

jest/styleMock.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+module.export = {}

ui/features/file_preview/index.js

@@ -23,7 +23,13 @@ import ready from '@instructure/ready'
 ready(() => {
   const $preview = $('#media_preview')
   const data = $preview.data()
-  $preview.mediaComment('show_inline', data.media_entry_id || 'maybe', data.type, data.download_url)
+  $preview.mediaComment(
+    'show_inline',
+    data.media_entry_id || 'maybe',
+    data.type,
+    data.download_url,
+    data.attachment_id
+  )
   if (ENV.NEW_FILES_PREVIEW) {
     $('#media_preview').css({
       margin: '0',

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

@@ -177,7 +177,7 @@ const mediaCommentActions = {
     return $.mediaComment.init(mediaType, initOpts)
   },
 
-  show_inline(id, mediaType = 'video', downloadUrl) {
+  show_inline(id, mediaType = 'video', downloadUrl, attachmentId = null) {
     // todo: replace .andSelf with .addBack when JQuery is upgraded.
     const $holder = $(this).closest('.instructure_file_link_holder').andSelf().first()
     $holder.text(I18n.t('loading', 'Loading media...'))
@@ -190,6 +190,7 @@ const mediaCommentActions = {
           const mediaPlayerOptions = {
             can_add_captions: sourcesAndTracks.can_add_captions,
             mediaCommentId: id,
+            attachmentId,
             menuTimeoutMouseLeave: 50,
             success(media) {
               holder.focus()

ui/shared/mediaelement/UploadMediaTrackForm.js

@@ -30,9 +30,10 @@ const I18n = useI18nScope('UploadMediaTrackForm')
 
 export default class UploadMediaTrackForm {
   // video url needs to be the url to mp4 version of the video.
-  constructor(mediaCommentId, video_url) {
+  constructor(mediaCommentId, video_url, attachmentId = null) {
     this.mediaCommentId = mediaCommentId
     this.video_url = video_url
+    this.attachmentId = attachmentId
     const templateVars = {
       languages: _.map(mejs.language.codes, (name, code) => ({name, code})),
       video_url: this.video_url,
@@ -80,8 +81,12 @@ export default class UploadMediaTrackForm {
 
         if (!params.content || !params.locale) return submitDfd.reject()
 
+        const url =
+          ENV.FEATURES.media_links_use_attachment_id && this.attachmentId
+            ? `/media_attachments/${this.attachmentId}/media_tracks`
+            : `/media_objects/${this.mediaCommentId}/media_tracks`
         return $.ajaxJSON(
-          `/media_objects/${this.mediaCommentId}/media_tracks`,
+          url,
           'POST',
           params,
           () => {

ui/shared/mediaelement/__tests__/UploadMediaTrackForm.test.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2023 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import UploadMediaTrackForm from '../UploadMediaTrackForm'
+import $ from 'jquery'
+
+jest.mock('react-dom', () => ({render: jest.fn()}))
+$.ajaxJSON = jest.fn().mockImplementation(() => ({}))
+
+describe('UploadMediaTrackForm', () => {
+  let form
+
+  beforeAll(() => {
+    form = new UploadMediaTrackForm('media_object_id', '/doesntmatter.mp4', 'attachment_id')
+    form.$dialog = {
+      disableWhileLoading: jest.fn(),
+      find: jest.fn().mockReturnThis(),
+      val: jest.fn(() => 'whatever'),
+    }
+    form.getFileContent = jest.fn(() => new $.Deferred().resolve({}))
+  })
+
+  it('uses the media attachment route if FF ON', () => {
+    window.ENV.FEATURES.media_links_use_attachment_id = true
+    form.onSubmit()
+    expect($.ajaxJSON).toHaveBeenCalledWith(
+      '/media_attachments/attachment_id/media_tracks',
+      'POST',
+      expect.anything(),
+      expect.anything(),
+      expect.anything()
+    )
+  })
+
+  it('uses the media objects route if FF OFF', () => {
+    window.ENV.FEATURES.media_links_use_attachment_id = false
+    form.onSubmit()
+    expect($.ajaxJSON).toHaveBeenCalledWith(
+      '/media_objects/media_object_id/media_tracks',
+      'POST',
+      expect.anything(),
+      expect.anything(),
+      expect.anything()
+    )
+  })
+})

ui/shared/mediaelement/mep-feature-tracks-instructure.js

@@ -507,7 +507,7 @@ const I18n = useI18nScope('mepfeaturetracksinstructure')
         .click(e => {
           e.preventDefault()
           import('./UploadMediaTrackForm').then(({default: UploadMediaTrackForm}) => {
-            new UploadMediaTrackForm(t.options.mediaCommentId, t.media.src)
+            new UploadMediaTrackForm(t.options.mediaCommentId, t.media.src, t.options.attachmentId)
           })
         })
       t.adjustLanguageBox()