@instructure/canvas-rce 5.6.16 → 5.7.0

package/lib/translated/uk_UA/modules/rce/plugins/instructure_rce_external_tools/__tests__/ExternalToolsEnv.test.js

@@ -106,17 +106,4 @@ describe('ExternalToolsEnv', () => {
     rceWrapper.props.externalToolsConfig.ltiIframeAllowances = ['c', 'd'];
     expect(editorEnv().ltiIframeAllowPolicy).toEqual('c; d');
   });
-  test('studioMediaOptionsEnabled', () => {
-    expect(nullEnv().studioMediaOptionsEnabled).toEqual(false); // feature off
-
-    rceWrapper.props.features = {
-      rce_show_studio_media_options: false
-    };
-    expect(editorEnv().studioMediaOptionsEnabled).toEqual(false); // feature on
-
-    rceWrapper.props.features = {
-      rce_show_studio_media_options: true
-    };
-    expect(editorEnv().studioMediaOptionsEnabled).toEqual(true);
-  });
 });

package/lib/translated/uk_UA/modules/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -31,6 +31,7 @@ import { ExternalToolDialogTray } from './ExternalToolDialogTray';
 import { ExternalToolDialogModal } from './ExternalToolDialogModal';
 import { showFlashAlert } from '../../../../../common/FlashAlert';
 import { parseUrlOrNull } from '../../../../../util/url-util';
+const FlexItem = Flex.Item;
 export default class ExternalToolDialog extends React.Component {
   constructor() {
     super(...arguments);
@@ -245,7 +246,7 @@ export default class ExternalToolDialog extends React.Component {
     }, "\u041D\u0430\u0441\u0442\u0443\u043F\u043D\u0438\u0439 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u043D\u0430\u0434\u0430\u043D\u0438\u0439 \u043F\u0430\u0440\u0442\u043D\u0435\u0440\u043E\u043C")), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
       alignItems: "center",
       justifyItems: "center"
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+    }, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Spinner, {
       renderTitle: "Loading External Tool",
       size: "large",
       margin: "0 0 0 medium"

package/lib/translated/uk_UA/modules/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogTray.js

@@ -22,6 +22,7 @@ import { View } from '@instructure/ui-view';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
 import { CloseButton } from '@instructure/ui-buttons';
+const FlexItem = Flex.Item;
 export function ExternalToolDialogTray(props) {
   const {
     label,
@@ -54,9 +55,9 @@ export function ExternalToolDialogTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     padding: "small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, /*#__PURE__*/React.createElement(FlexItem, {
     shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onCloseButton,
     size: "small",
     screenReaderLabel: "\u0417\u0430\u043A\u0440\u0438\u0442\u0438"

package/lib/translated/uk_UA/modules/rce/plugins/instructure_rce_external_tools/lti11-content-items/RceLti11ContentItem.js

@@ -104,16 +104,16 @@ export class RceLti11ContentItem {
   }
 
   generateCodePayloadIframe() {
-    var _this$env, _this$env2, _this$contentItem$cla, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7, _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
+    var _this$env, _this$contentItem$cla, _this$contentItem$pla4, _this$contentItem$pla5, _this$contentItem$pla6, _this$contentItem$pla7, _this$contentItem$pla8, _this$contentItem$pla9, _this$contentItem$pla10, _this$contentItem$pla11;
 
-    const studioAttributes = (_this$env = this.env) !== null && _this$env !== void 0 && _this$env.studioMediaOptionsEnabled && isStudioContentItemCustomJson(this.contentItem.custom) ? studioAttributesFrom(this.contentItem.custom) : null;
+    const studioAttributes = isStudioContentItemCustomJson(this.contentItem.custom) ? studioAttributesFrom(this.contentItem.custom) : null;
     return $('<div/>').append($('<iframe/>', {
       src: addParentFrameContextToUrl(this.url, this.containingCanvasLtiToolId),
       title: this.contentItem.title,
       allowfullscreen: 'true',
       webkitallowfullscreen: 'true',
       mozallowfullscreen: 'true',
-      allow: (_this$env2 = this.env) === null || _this$env2 === void 0 ? void 0 : _this$env2.ltiIframeAllowPolicy,
+      allow: (_this$env = this.env) === null || _this$env === void 0 ? void 0 : _this$env.ltiIframeAllowPolicy,
       ...studioAttributes
     }).addClass((_this$contentItem$cla = this.contentItem.class) !== null && _this$contentItem$cla !== void 0 ? _this$contentItem$cla : '').css({
       width: (_this$contentItem$pla4 = (_this$contentItem$pla5 = this.contentItem.placementAdvice) === null || _this$contentItem$pla5 === void 0 ? void 0 : _this$contentItem$pla5.displayWidth) !== null && _this$contentItem$pla4 !== void 0 ? _this$contentItem$pla4 : '',

package/lib/translated/uk_UA/modules/rce/plugins/instructure_rce_external_tools/lti11-content-items/__tests__/RceLti11ContentItem.test.js

@@ -162,54 +162,31 @@ describe('RceLti11ContentItem File Item', () => {
   });
 });
 describe('Studio LTI content items', () => {
-  describe('when the rce_show_studio_media_options flag is off', () => {
-    it('does not decorate studio iframes with studio attributes', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: true,
-            enableMediaOptions: true
-          }
+  it('with custom params set to false', () => {
+    const itemData = { ...exampleLti11ContentItems.lti_iframe,
+      ...{
+        custom: {
+          source: 'studio',
+          resizable: false,
+          enableMediaOptions: false
         }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: false
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
-    });
-  });
-  describe('when the rce_show_studio_media_options flag is on', () => {
-    it('with custom params set to false', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: false,
-            enableMediaOptions: false
-          }
+      }
+    };
+    const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy());
+    equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="false" data-studio-tray-enabled="false" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
+  });
+  it('with custom params set to true', () => {
+    const itemData = { ...exampleLti11ContentItems.lti_iframe,
+      ...{
+        custom: {
+          source: 'studio',
+          resizable: true,
+          enableMediaOptions: true
         }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: true
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="false" data-studio-tray-enabled="false" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px;" width="800" height="600"></iframe>`);
-    });
-    it('with custom params set to true', () => {
-      const itemData = { ...exampleLti11ContentItems.lti_iframe,
-        ...{
-          custom: {
-            source: 'studio',
-            resizable: true,
-            enableMediaOptions: true
-          }
-        }
-      };
-      const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy({}, {
-        studioMediaOptionsEnabled: true
-      }));
-      equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="true" data-studio-tray-enabled="true" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px; display: inline-block;" width="800" height="600"></iframe>`);
-    });
+      }
+    };
+    const contentItem = RceLti11ContentItem.fromJSON(itemData, createDeepMockProxy());
+    equalHtmlIgnoringAttributeOrder(contentItem.codePayload, `<iframe data-studio-convertible-to-link="true" data-studio-resizable="true" data-studio-tray-enabled="true" src="/courses/1/external_tools/retrieve?display=borderless&amp;url=http%3A%2F%2Flti-tool-provider-example.dev%2Fmessages%2Fblti" title="Its like for your computer" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="undefined" style="width: 800px; height: 600px; display: inline-block;" width="800" height="600"></iframe>`);
   });
 });
 

package/lib/translated/uk_UA/modules/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -21,6 +21,7 @@ import bridge from '../../../../bridge';
 import { asVideoElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
 import VideoOptionsTray from '.';
 import { isStudioEmbeddedMedia, parseStudioOptions } from '../../shared/StudioLtiSupportUtils';
+import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-video-options-tray-container';
 export const VIDEO_SIZE_DEFAULT = {
   height: '225px',
@@ -130,17 +131,23 @@ export default class TrayController {
         this._editor.selection.select(link);
 
         this.$videoContainer = null;
+      }
+
+      const data = {
+        media_object_id: videoOptions.media_object_id,
+        title: videoOptions.titleText,
+        subtitles: videoOptions.subtitles
+      };
+
+      if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
+        data.attachment_id = videoOptions.attachment_id;
       } // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
-        videoOptions.updateMediaObject({
-          media_object_id: videoOptions.media_object_id,
-          title: videoOptions.titleText,
-          subtitles: videoOptions.subtitles
-        }).then(_r => {
+      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.isLocked) {
+        videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
               subject: 'reload_media',
@@ -174,15 +181,10 @@ export default class TrayController {
     let vo = {};
 
     if (this._shouldOpen) {
-      /*
-       * When the tray is being opened again, it should be rendered fresh
-       * (clearing the internal state) so that the currently-selected video can
-       * be used for initial video options.
-       */
       this._renderId++;
-      vo = asVideoElement(this.$videoContainer) || {};
     }
 
+    vo = asVideoElement(this.$videoContainer) || {};
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,

package/lib/translated/uk_UA/modules/rce/plugins/instructure_record/VideoOptionsTray/__tests__/TrayController.test.js

@@ -20,6 +20,7 @@ import TrayController, { CONTAINER_ID } from '../TrayController';
 import FakeEditor from '../../../../__tests__/FakeEditor';
 import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
 import * as contentSelection from '../../../shared/ContentSelection';
+import RCEGlobals from '../../../../RCEGlobals';
 const mockVideoPlayers = [{
   titleText: 'video title 0',
   appliedWidth: 400,
@@ -158,6 +159,14 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
     });
   });
   describe('#_applyVideoOptions', () => {
+    beforeEach(() => {
+      RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+        media_links_use_attachment_id: false
+      });
+    });
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
     it('updates the video', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       trayController.showTrayForEditor(editors[0]);
@@ -181,6 +190,49 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
       expect(videoContainer.style.width).toBe('321px');
       expect(updateMediaObject).toHaveBeenCalled();
     });
+    it('calls updateMediaObject with correct params', () => {
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        displayAs: 'embed',
+        appliedHeight: '101',
+        appliedWidth: '321',
+        titleText: 'new title',
+        media_object_id: 'm_somevideo',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).toHaveBeenCalledWith({
+        media_object_id: 'm_somevideo',
+        subtitles: undefined,
+        title: 'new title'
+      });
+    });
+    it('calls updateMediaObject with correct params with media_links_use_attachment_id', () => {
+      RCEGlobals.getFeatures = jest.fn().mockReturnValue({
+        media_links_use_attachment_id: true
+      });
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        displayAs: 'embed',
+        appliedHeight: '101',
+        appliedWidth: '321',
+        titleText: 'new title',
+        media_object_id: 'm_somevideo',
+        attachment_id: '123',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).toHaveBeenCalledWith({
+        attachment_id: '123',
+        media_object_id: 'm_somevideo',
+        subtitles: undefined,
+        title: 'new title'
+      });
+    });
     it('does not updates the video w/o a media_object_id', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       trayController.showTrayForEditor(editors[0]);
@@ -204,6 +256,18 @@ describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
       expect(videoContainer.style.width).toBe('321px');
       expect(updateMediaObject).not.toHaveBeenCalled();
     });
+    it('does not try to save data to the db on a locked media attachment', () => {
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyVideoOptions({
+        isLocked: true,
+        media_object_id: 'm_somevideo',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).not.toHaveBeenCalled();
+    });
     it('replaces the video with a link', () => {
       const updateMediaObject = jest.fn().mockResolvedValue();
       const ed = editors[0];

package/lib/translated/uk_UA/modules/rce/plugins/instructure_record/VideoOptionsTray/__tests__/VideoOptionsTray.test.js

@@ -19,6 +19,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import VideoOptionsTray from '..';
 import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
+import RCEGlobals from '../../../../RCEGlobals';
 jest.useFakeTimers();
 describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
   let props;
@@ -216,6 +217,40 @@ describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
       });
     });
   });
+  describe('Attachment Media Options Tray', () => {
+    it('does not have closed caption controls or title input for locked attachments', () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          10: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      const {
+        queryByText
+      } = render( /*#__PURE__*/React.createElement(VideoOptionsTray, props));
+      expect(queryByText('Closed Captions/Subtitles')).not.toBeInTheDocument();
+      expect(queryByText('Title')).not.toBeInTheDocument();
+    });
+    it('shows closed caption controls and title input for unlocked attachments', async () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          9: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      renderComponent();
+      await waitFor(() => {
+        expect(tray.$closedCaptionPanel).toBeInTheDocument();
+      });
+      await waitFor(() => {
+        expect(tray.$titleTextField).toBeInTheDocument();
+      });
+    });
+  });
   describe('Studio Media Options Tray', () => {
     beforeEach(() => {
       props.studioOptions = {

package/lib/translated/uk_UA/modules/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -38,10 +38,13 @@ import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInpu
 import { getTrayHeight } from '../../shared/trayUtils';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
+import RCEGlobals from '../../../RCEGlobals';
 
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 export default function VideoOptionsTray(_ref) {
+  var _RCEGlobals$getConfig;
+
   let {
     videoOptions,
     onRequestClose,
@@ -68,7 +71,9 @@ export default function VideoOptionsTray(_ref) {
   const [minWidth] = useState(MIN_WIDTH_VIDEO);
   const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
   const [minPercentage] = useState(MIN_PERCENTAGE);
+  const lock_statuses = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.lockedAttachments;
   const isStudio = !!studioOptions;
+  const isLocked = !!lock_statuses && !!lock_statuses[videoOptions.attachmentId];
   const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
   const showSizeControls = !isStudio || studioOptions.resizable;
   const dimensionsState = useDimensionsState(videoOptions, {
@@ -118,12 +123,14 @@ export default function VideoOptionsTray(_ref) {
 
     onSave({
       media_object_id: videoOptions.id,
+      attachment_id: videoOptions.attachmentId,
       titleText,
       appliedHeight,
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject
+      updateMediaObject,
+      isLocked
     });
   }
 
@@ -203,7 +210,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -260,8 +267,9 @@ export default function VideoOptionsTray(_ref) {
     disabled: displayAs !== 'embed',
     minHeight: minHeight,
     minWidth: minWidth,
-    minPercentage: minPercentage
-  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
+    minPercentage: minPercentage,
+    hidePercentage: true
+  }))), !isStudio && !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: "Closed Captions/Subtitles"
@@ -291,7 +299,7 @@ export default function VideoOptionsTray(_ref) {
 }
 VideoOptionsTray.propTypes = {
   videoOptions: shape({
-    titleText: string.isRequired,
+    titleText: string,
     appliedHeight: number,
     appliedWidth: number,
     naturalHeight: number.isRequired,

package/lib/translated/uk_UA/modules/rce/plugins/instructure_record/clickCallback.js

@@ -22,6 +22,7 @@ import { StoreProvider } from '../shared/StoreContext';
 import formatMessage from '../../../format-message';
 import { headerFor, originFromHost } from '../../../rcs/api';
 import { instuiPopupMountNode } from '../../../util/fullscreenHelpers';
+import RCEGlobals from '../../RCEGlobals';
 export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
   let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
 
@@ -95,7 +96,8 @@ export default function (ed, document) {
         record: true,
         upload: true
       },
-      uploadMediaTranslations: Bridge.uploadMediaTranslations
+      uploadMediaTranslations: Bridge.uploadMediaTranslations,
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
     })), container);
   });
 }

package/lib/translated/uk_UA/modules/rce/plugins/instructure_wordcount/components/WordCountModal.js

@@ -40,12 +40,12 @@ const renderBody = (headers, rows) => {
   }, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(Row, null, headers.map(_ref => {
     let {
       id,
-      label
+      getLabel
     } = _ref;
     return /*#__PURE__*/React.createElement(ColHeader, {
       key: id,
       id: id
-    }, label);
+    }, getLabel());
   }))), /*#__PURE__*/React.createElement(Body, null, rows.map(_ref2 => {
     let {
       label,

package/lib/translated/uk_UA/modules/rce/plugins/instructure_wordcount/components/__tests__/WordCountModal.test.js

@@ -66,7 +66,7 @@ describe('WordCountModal', () => {
       } = renderModal();
       defaultProps.headers.forEach(header => {
         expect(getByRole('columnheader', {
-          name: header.label
+          name: header.getLabel()
         })).toBeInTheDocument();
       });
     });

package/lib/translated/uk_UA/modules/rce/plugins/instructure_wordcount/utils/tableContent.js

@@ -19,20 +19,20 @@ import { countContent } from './countContent';
 import formatMessage from '../../../../format-message';
 export const HEADERS = [{
   id: 'count',
-  label: "Count"
+  getLabel: () => "Count"
 }, {
   id: 'document',
-  label: "Document"
+  getLabel: () => "Document"
 }, {
   id: 'selection',
-  label: "Selection"
+  getLabel: () => "Selection"
 }];
-const ROW_LABELS = [['words', "Words"], ['chars-no-spaces', "Characters (no spaces)"], ['chars', "\u0421\u0438\u043C\u0432\u043E\u043B\u0438"]];
+const ROW_LABELS = [['words', () => "Words"], ['chars-no-spaces', () => "Characters (no spaces)"], ['chars', () => "\u0421\u0438\u043C\u0432\u043E\u043B\u0438"]];
 export const generateRows = ed => {
   return ROW_LABELS.map(_ref => {
-    let [category, label] = _ref;
+    let [category, getLabel] = _ref;
     return {
-      label,
+      label: getLabel(),
       documentCount: countContent(ed, 'body', category),
       selectionCount: countContent(ed, 'selection', category)
     };

package/lib/translated/uk_UA/modules/rce/plugins/shared/CanvasContentTray.js

@@ -29,8 +29,8 @@ import Filter, { useFilterSettings } from './Filter';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
-import { getIcon } from './linkUtils';
 import { LinkDisplay } from './LinkDisplay';
+import { showFlashAlert } from '../../../common/FlashAlert';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -245,7 +245,6 @@ export default function CanvasContentTray(props) {
   const [link, setLink] = useState(null);
   const [linkText, setLinkText] = useState(null);
   const [placeholderText, setPlaceholderText] = useState(null);
-  const Icon = getIcon(link === null || link === void 0 ? void 0 : link.type);
   const {
     bridge,
     editor,
@@ -290,7 +289,7 @@ export default function CanvasContentTray(props) {
             published
           });
           setLinkText(text);
-          setPlaceholderText(text);
+          setPlaceholderText(fileName);
         } else {
           setIsEditTray(false);
         }
@@ -347,6 +346,9 @@ export default function CanvasContentTray(props) {
   }
 
   function handleCloseTray() {
+    // clear the store's saved search string so the tray doesn't
+    // reopen with a previous tray instance's search results
+    storeProps.onChangeSearchString('');
     setHasOpened(false);
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
@@ -355,9 +357,14 @@ export default function CanvasContentTray(props) {
     handleDismissTray();
     const newLink = { ...link,
       forceRename: true,
-      text: linkText || placeholderText
+      text: linkText
     };
     bridge.insertLink(newLink);
+    showFlashAlert({
+      message: "Updated link",
+      type: 'success',
+      srOnly: true
+    });
   }
 
   function renderFooter() {
@@ -367,6 +374,7 @@ export default function CanvasContentTray(props) {
       padding: "small medium",
       textAlign: "end"
     }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "cancel-replace-button",
       onClick: handleDismissTray
     }, "\u0421\u043A\u0430\u0441\u0443\u0432\u0430\u0442\u0438"), /*#__PURE__*/React.createElement(Button, {
       margin: "0 0 0 x-small",
@@ -470,11 +478,11 @@ export default function CanvasContentTray(props) {
     screenReaderLabel: "\u0417\u0430\u043A\u0440\u0438\u0442\u0438"
   }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
-    Icon: Icon,
-    placeholderText: placeholderText,
+    placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
     linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
     published: (link === null || link === void 0 ? void 0 : link.published) || false,
-    handleTextChange: setLinkText
+    handleTextChange: setLinkText,
+    linkType: link === null || link === void 0 ? void 0 : link.type
   }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
     mountNode: props.mountNode,
     userContextType: props.contextType,
@@ -510,7 +518,8 @@ export default function CanvasContentTray(props) {
       id: props.contextId
     },
     editing: isEditTray,
-    onEditClick: setLink
+    onEditClick: setLink,
+    selectedLink: link
   }, storeProps)))), isEditTray && renderFooter()))) : null);
 }
 CanvasContentTray.globalOpenCount = 0;

package/lib/translated/uk_UA/modules/rce/plugins/shared/DimensionsInput/__tests__/DimensionsInput.test.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import DimensionsInput, { useDimensionsState } from '..';
 import DimensionsInputDriver from './DimensionsInputDriver';
 const W_AND_H_NAN_ERROR = 'Width and height must be numbers';
@@ -43,7 +43,8 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
     props = {
       minWidth: 30,
       minHeight: 60,
-      minPercentage: 10
+      minPercentage: 10,
+      hidePercentage: false
     };
   });
   afterEach(() => {
@@ -1149,4 +1150,49 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
       });
     });
   });
+  describe('When hidePercentage is false', () => {
+    let percentageRadio;
+    let pixelsRadio;
+    beforeEach(() => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+      const container = screen.getByTestId('dimension-type');
+      percentageRadio = within(container).getByLabelText('Percentage');
+      pixelsRadio = within(container).getByLabelText('Pixels');
+    });
+    it('The radio input group for Percentage and Pixels is displayed', () => {
+      const radioInputGroup = screen.getByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeVisible();
+    });
+    it('The "Percentage" radio input is checked', () => {
+      expect(percentageRadio).toBeChecked();
+      expect(pixelsRadio).not.toBeChecked();
+    });
+    it('The dimension input for width is not rendered', () => {
+      const widthInput = screen.queryByLabelText('Width');
+      expect(widthInput).not.toBeInTheDocument();
+    });
+    it('The dimension input for height is not rendered', () => {
+      const heightInput = screen.queryByLabelText('Height');
+      expect(heightInput).not.toBeInTheDocument();
+    });
+  });
+  describe('When hidePercentage is true', () => {
+    beforeEach(() => {
+      props.hidePercentage = true;
+      renderComponent();
+    });
+    it('The radio input group for Percentage and Pixels is not displayed', () => {
+      const radioInputGroup = screen.queryByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeNull();
+    });
+    it('The custom text description is displayed', () => {
+      const label = screen.getByText('Custom width and height (Pixels)');
+      expect(label).toBeVisible();
+    });
+  });
 });