@instructure/canvas-rce 5.6.16 → 5.7.0

package/lib/translated/tr/modules/rce/plugins/shared/DimensionsInput/index.js

@@ -21,6 +21,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import formatMessage from '../../../../format-message';
 import DimensionInput from './DimensionInput';
@@ -64,7 +65,8 @@ export default function DimensionsInput(props) {
     dimensionsState,
     minHeight,
     minWidth,
-    minPercentage
+    minPercentage,
+    hidePercentage
   } = props;
 
   const handleDimensionTypeChange = e => {
@@ -76,7 +78,9 @@ export default function DimensionsInput(props) {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
+  }, hidePercentage ? /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Custom width and height (Pixels)") : /*#__PURE__*/React.createElement(RadioInputGroup, {
     "data-testid": "dimension-type",
     name: "dimension-type",
     description: "Dimension Type",
@@ -144,5 +148,9 @@ DimensionsInput.propTypes = {
   }),
   minHeight: number.isRequired,
   minWidth: number.isRequired,
-  minPercentage: number.isRequired
+  minPercentage: number.isRequired,
+  hidePercentage: bool
+};
+DimensionsInput.defaultProps = {
+  hidePercentage: false
 };

package/lib/translated/tr/modules/rce/plugins/shared/LinkDisplay.js

@@ -22,15 +22,19 @@ import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from '../../../format-message';
 import { showFlashAlert } from '../../../common/FlashAlert';
-const EDIT_MESSAGE = "If left empty link, text will display as course link name";
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { getIcon, getFriendlyLinkType } from './linkUtils';
+
+const getEditMessage = () => "If left empty, link text will display as course link name";
+
 export const LinkDisplay = _ref => {
   let {
     linkText,
-    Icon,
     placeholderText,
     linkFileName,
     published,
-    handleTextChange
+    handleTextChange,
+    linkType
   } = _ref;
   useEffect(() => {
     showFlashAlert({
@@ -39,19 +43,23 @@ export const LinkDisplay = _ref => {
       srOnly: true
     });
   }, [linkFileName]);
+  const Icon = getIcon(linkType);
+  const linkTypeMessage = getFriendlyLinkType(linkType);
+  const publishedMessage = published ? "yay\u0131nland\u0131" : "yay\u0131nlanmad\u0131";
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "LinkDisplay"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
+    "data-testId": "link-text-input",
     renderLabel: () => "Text (optional)",
-    onChange: (e, value) => handleTextChange(value),
+    onChange: (_e, value) => handleTextChange(value),
     value: linkText,
     placeholder: placeholderText,
     messages: [{
       type: 'hint',
-      text: EDIT_MESSAGE
+      text: getEditMessage()
     }]
   })))), /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -78,5 +86,7 @@ export const LinkDisplay = _ref => {
     as: "div"
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "selected-link-name"
-  }, linkFileName))))));
+  }, linkFileName), linkType && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+    "data-testid": "screenreader_content"
+  }, "link type: " + linkTypeMessage, linkType !== 'navigation' && publishedMessage))))));
 };

package/lib/translated/tr/modules/rce/plugins/shared/RceFileBrowser.js

@@ -69,7 +69,7 @@ export default function RceFileBrowser(props) {
       title: fileInfo.name,
       href: url,
       embedded_iframe_url,
-      media_id: (_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id,
+      media_id: ((_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id) || fileInfo.api.mediaEntryId,
       target: '_blank',
       content_type
     };

package/lib/translated/tr/modules/rce/plugins/shared/__tests__/CanvasContentTray.test.js

@@ -22,6 +22,8 @@ import * as fakeSource from '../../../../rcs/fake';
 import initialState from '../../../../sidebar/store/initialState';
 import sidebarHandlers from '../../../../sidebar/containers/sidebarHandlers';
 import CanvasContentTray from '../CanvasContentTray';
+import { LinkDisplay } from '../LinkDisplay';
+import { destroyContainer } from '../../../../common/FlashAlert';
 jest.useFakeTimers();
 jest.mock('../../../../canvasFileBrowser/FileBrowser', () => {
   return jest.fn(() => 'Files Browser');
@@ -40,6 +42,11 @@ jest.mock('../../../../bridge', () => {
   original.default.insertLink = jest.fn();
   return original;
 });
+jest.mock('../LinkDisplay', () => ({
+  LinkDisplay: jest.fn(() => /*#__PURE__*/React.createElement("div", {
+    "data-testid": "LinkDisplay"
+  }))
+}));
 const storeInitialState = { ...initialState({
     contextId: '1201',
     contextType: 'course',
@@ -107,11 +114,28 @@ describe('RCE Plugins > CanvasContentTray', () => {
     return getTray().getAttribute('aria-label');
   }
 
+  it('clears search string on tray close', async () => {
+    const mockOnChangeSearchString = jest.fn();
+    renderComponent(getProps({
+      storeProps: { ...storeInitialState,
+        onChangeSearchString: mockOnChangeSearchString
+      }
+    }));
+    await showTrayForPlugin('links');
+    const closeButton = component.getByTestId('CloseButton_ContentTray').querySelector('button');
+    closeButton.focus();
+    closeButton.click();
+    await waitForElementToBeRemoved(() => component.queryByTestId('CanvasContentTray'));
+    expect(mockOnChangeSearchString).toHaveBeenLastCalledWith('');
+  });
   describe('Edit Course Links Tray', () => {
     beforeEach(async () => {
       renderComponent();
       await showTrayForPlugin('course_link_edit');
     });
+    afterEach(() => {
+      destroyContainer();
+    });
     it('is labeled with "Edit Course Link"', async () => {
       await waitFor(() => {
         const header = getTray().querySelector('[data-cid="Heading"]').textContent;
@@ -137,6 +161,20 @@ describe('RCE Plugins > CanvasContentTray', () => {
         });
       });
     });
+    it('sets placeholder to the current link title', async () => {
+      renderComponent();
+      await showTrayForPlugin('course_link_edit');
+      await waitFor(() => {
+        expect(LinkDisplay).toHaveBeenCalledWith(expect.objectContaining({
+          placeholderText: 'some filename'
+        }), {});
+      });
+    });
+    it('creates a SR alert when the link is updated', async () => {
+      const button = await component.findByTestId('replace-link-button');
+      fireEvent.click(button);
+      expect(component.getByText('Updated link')).toBeInTheDocument();
+    });
   });
   describe('Tray Label in course context', () => {
     beforeEach(() => {

package/lib/translated/tr/modules/rce/plugins/shared/__tests__/LinkDisplay.test.js

@@ -18,7 +18,6 @@
 import React from 'react';
 import { LinkDisplay } from '../LinkDisplay';
 import { render, fireEvent } from '@testing-library/react';
-import { IconBlank } from '../linkUtils';
 import { showFlashAlert } from '../../../../common/FlashAlert';
 jest.mock('../../../../common/FlashAlert');
 describe('LinkDisplay', () => {
@@ -27,10 +26,10 @@ describe('LinkDisplay', () => {
     props = {
       linkText: 'default text',
       linkFileName: 'default link filename',
-      Icon: IconBlank,
       placeholderText: 'default placeholder',
       published: true,
-      handleTextChange: jest.fn()
+      handleTextChange: jest.fn(),
+      linkType: 'wikiPages'
     };
   });
   afterEach(() => {
@@ -51,13 +50,6 @@ describe('LinkDisplay', () => {
     const textInput = getByLabelText(/text \(optional\)/i);
     expect(textInput.value).toEqual('default text');
   });
-  it('component displays the icon passed in as a prop', () => {
-    const {
-      container
-    } = renderComponent();
-    const icon = container.querySelector('svg[name="IconBlank"]');
-    expect(icon).toBeInTheDocument();
-  });
   it('placeholder text matches the prop', () => {
     const {
       getByLabelText
@@ -116,4 +108,52 @@ describe('LinkDisplay', () => {
       type: 'info'
     });
   });
+  it('renders the appropriate icon based on linkType', () => {
+    const {
+      rerender,
+      getByTestId
+    } = renderComponent();
+    let iconContainer = getByTestId('icon-wrapper');
+    expect(iconContainer.querySelector('svg')).toHaveAttribute('name', 'IconDocument');
+    rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+      linkType: "assignments"
+    })));
+    iconContainer = getByTestId('icon-wrapper');
+    expect(iconContainer.querySelector('svg')).toHaveAttribute('name', 'IconAssignment');
+  });
+  describe('screenreader content', () => {
+    it('describes the linkType and publish status', () => {
+      const {
+        rerender,
+        getByTestId
+      } = renderComponent();
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Pagepublished');
+      rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+        linkType: "quizzes",
+        published: false
+      })));
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Quizunpublished');
+    });
+    it('is not present if linkType is falsy', () => {
+      const {
+        rerender,
+        queryByTestId
+      } = renderComponent({
+        linkType: undefined
+      });
+      expect(queryByTestId('screenreader_content')).not.toBeInTheDocument();
+      rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+        linkType: null
+      })));
+      expect(queryByTestId('screenreader_content')).not.toBeInTheDocument();
+    });
+    it('does not describe publish status if linkType is navigation', () => {
+      const {
+        getByTestId
+      } = renderComponent({
+        linkType: 'navigation'
+      });
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Navigation');
+    });
+  });
 });

package/lib/translated/tr/modules/rce/plugins/shared/__tests__/compressionUtils.test.js

@@ -108,7 +108,11 @@ describe('compressImage()', () => {
     };
   });
   it('returns compressed blob image', async () => {
-    const result = await compressImage('data:image/jpeg;base64,abcdefhijk==');
+    const result = await compressImage({
+      encodedImage: 'data:image/jpeg;base64,abcdefhijk==',
+      previewWidth: 200,
+      previewHeight: 400
+    });
     expect(result).toEqual('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
   });
 });

package/lib/translated/tr/modules/rce/plugins/shared/__tests__/fileTypeUtils.test.js

@@ -135,7 +135,7 @@ describe('fileTypeUtils', () => {
       afterAll(() => {
         RCEGlobals.getFeatures.mockRestore();
       });
-      it('uses attachment route if feature flag on', () => {
+      it('uses attachment route if id is present', () => {
         const file = {
           id: '123',
           type: 'video/mov'
@@ -143,6 +143,15 @@ describe('fileTypeUtils', () => {
         const url = mediaPlayerURLFromFile(file);
         expect(url).toBe('/media_attachments_iframe/123?type=video&embedded=true');
       });
+      it('uses the file verifier if present', () => {
+        const file = {
+          id: '123',
+          type: 'video/mov',
+          url: 'host?verifier=something'
+        };
+        const url = mediaPlayerURLFromFile(file);
+        expect(url).toBe('/media_attachments_iframe/123?type=video&verifier=something&embedded=true');
+      });
       it('uses media_object route if no attachmentId exists', () => {
         const file = {
           media_entry_id: 'm-media_id',

package/lib/translated/tr/modules/rce/plugins/shared/compressionUtils.js

@@ -74,7 +74,12 @@ export function shouldCompressImage(_ref2) {
   } = _ref2;
   return ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff'].includes(type) && size > MAX_IMAGE_SIZE_BYTES;
 }
-export function compressImage(encodedImage, previewWidth, previewHeight) {
+export function compressImage(_ref3) {
+  let {
+    encodedImage,
+    previewWidth,
+    previewHeight
+  } = _ref3;
   return new Promise((resolve, reject) => {
     const image = new Image();
     image.src = encodedImage;

package/lib/translated/tr/modules/rce/plugins/shared/fileTypeUtils.js

@@ -93,12 +93,14 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const content_type = file['content-type'] || file.content_type || file.type;
   const type = content_type.replace(/\/.*$/, '');
 
-  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type)) {
-    const attachmentId = file.id;
-
-    if (attachmentId) {
-      return `/media_attachments_iframe/${attachmentId}?type=${type}&embedded=true`;
+  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+    if (!file.url && !file.href) {
+      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
     }
+
+    const parsed_url = parse(file.url || file.href, true);
+    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
+    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
   }
 
   if (file.embedded_iframe_url) {
@@ -108,7 +110,7 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   if (isAudioOrVideo(content_type)) {
     var _file$embed;
 
-    const mediaEntryId = file.media_entry_id || ((_file$embed = file.embed) === null || _file$embed === void 0 ? void 0 : _file$embed.id);
+    const mediaEntryId = file.media_entry_id || ((_file$embed = file.embed) === null || _file$embed === void 0 ? void 0 : _file$embed.id) || file.mediaEntryId;
 
     if (mediaEntryId && mediaEntryId !== 'maybe') {
       return `/media_objects_iframe/${mediaEntryId}?type=${type}`;

package/lib/translated/tr/modules/rce/plugins/shared/linkUtils.js

@@ -55,4 +55,34 @@ export const getIcon = type => {
     default:
       return IconDocumentLine;
   }
+};
+export const getFriendlyLinkType = type => {
+  switch (type) {
+    case 'assignments':
+      return "\xD6dev";
+
+    case 'discussions':
+      return "Tart\u0131\u015Fma";
+
+    case 'modules':
+      return "Mod\xFCl";
+
+    case 'quizzes':
+      return "K\u0131sa S\u0131nav";
+
+    case 'quizzes.next':
+      return "Yeni K\u0131sa S\u0131nav";
+
+    case 'announcements':
+      return "Duyuru";
+
+    case 'wikiPages':
+      return "Sayfa";
+
+    case 'navigation':
+      return "Gezinme";
+
+    default:
+      return '';
+  }
 };

package/lib/translated/tr/modules/rce/plugins/tinymce-a11y-checker/components/__tests__/checker.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, waitFor } from '@testing-library/react';
 import Checker from '../checker';
 import util from 'util';
 const promisify = util.promisify;
@@ -59,7 +59,8 @@ describe('checker', () => {
     renderResult = render( /*#__PURE__*/React.createElement(Checker, {
       ref: instanceRef,
       getBody: () => node,
-      editor: fakeEditor
+      editor: fakeEditor,
+      onFixError: jest.fn()
     }));
     instance = instanceRef.current;
   });
@@ -386,6 +387,13 @@ describe('checker', () => {
       instance.fixIssue(ev);
       expect(instance._closeButtonRef.focus).toHaveBeenCalled();
     });
+    test('updates the number of errors', async () => {
+      instance.fixIssue(ev);
+      expect(instance.state.errors).toEqual([]);
+      await waitFor(() => {
+        expect(instance.props.onFixError).toHaveBeenCalled();
+      });
+    });
   });
   describe('render', () => {
     test('matches snapshot without errors', () => {

package/lib/translated/tr/modules/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -36,7 +36,7 @@ import { TextInput } from '@instructure/ui-text-input';
 import { TextArea } from '@instructure/ui-text-area';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import { IconQuestionLine } from '@instructure/ui-icons';
-import { ApplyTheme } from '@instructure/ui-themeable';
+import { InstUISettingsProvider } from '@instructure/emotion';
 import { Alert } from '@instructure/ui-alerts';
 import ColorField from './color-field';
 import PlaceholderSVG from './placeholder-svg';
@@ -282,7 +282,10 @@ export default class Checker extends React.Component {
       }
 
       const errorIndex = this.state.errorIndex;
-      this.check(() => this.setErrorIndex(errorIndex));
+      this.check(() => {
+        this.setErrorIndex(errorIndex);
+        this.props.onFixError(this.state.errors);
+      });
     }
   }
 
@@ -427,10 +430,12 @@ export default class Checker extends React.Component {
       onClick: () => this.setState({
         showWhyPopover: false
       })
-    }, "Kapat"), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(ApplyTheme, {
+    }, "Kapat"), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, rule.why()), /*#__PURE__*/React.createElement("p", null, rule.link && rule.link.length && /*#__PURE__*/React.createElement(InstUISettingsProvider, {
       theme: {
-        [Link.theme]: {
-          textDecoration: 'underline'
+        componentOverrides: {
+          Link: {
+            textDecoration: 'underline'
+          }
         }
       }
     }, /*#__PURE__*/React.createElement(Link, {
@@ -544,5 +549,6 @@ export default class Checker extends React.Component {
 
 }
 Checker.defaultProps = {
-  additionalRules: []
+  additionalRules: [],
+  onFixError: noop
 };

package/lib/translated/tr/modules/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -33,7 +33,8 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
         done,
         config,
         additionalRules,
-        mountNode
+        mountNode,
+        onFixError
       } = _ref;
 
       if (!isCheckerOpen) {
@@ -42,7 +43,8 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
           editor: ed,
           additionalRules: additionalRules,
           mountNode: mountNode,
-          onClose: () => isCheckerOpen = false
+          onClose: () => isCheckerOpen = false,
+          onFixError: onFixError
         }), container, function () {
           // this is a workaround for react 16 since ReactDOM.render is not
           // guaranteed to return the instance synchronously (especially if called