@instructure/canvas-rce 5.13.2 → 5.13.5

package/es/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -160,7 +160,9 @@ export function IconMakerTray(_ref) {
 
   const onClose = event => {
     if (shouldIgnoreClose(event === null || event === void 0 ? void 0 : event.target, editor === null || editor === void 0 ? void 0 : editor.id)) return;
-    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // RCE already uses browser's confirm dialog for unsaved changes
+    if ((statusRef === null || statusRef === void 0 ? void 0 : statusRef.current) === statuses.LOADING) return; // Uploading an image creates a modal on the page. If that modal is open, we don't want to close the tray
+
+    if (!!hasOpenModal()) return; // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
     // eslint-disable-next-line no-restricted-globals, no-alert
 
@@ -171,6 +173,8 @@ export function IconMakerTray(_ref) {
     setIsOpen(false);
   };
 
+  const hasOpenModal = () => document.querySelector('[data-cid="Modal"]');
+
   const isLoading = () => status === statuses.LOADING;
 
   const onKeyDown = event => {
@@ -304,6 +308,7 @@ export function IconMakerTray(_ref) {
     onDismiss: onClose,
     onUnmount: onUnmount,
     mountNode: mountNode,
+    shouldCloseOnDocumentClick: false,
     renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
     renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, canvasOrigin, isLoading),
     renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef, isModified.current),

package/es/rce/plugins/instructure_rce_external_tools/RceToolWrapper.js

@@ -21,20 +21,20 @@ import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-igno
 
 import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
 export function externalToolsForToolbar(tools) {
-  const favorited = tools.filter(it => it.favorite).slice(0, 2) || []; // There's no limit to always on apps, but in practice there shouldn't be more than 2 as well.
-
-  const alwaysOn = tools.filter(it => it.always_on) || [];
-  const set = new Map(); // Remove possible overlaps between favorited and alwaysOn, otherwise
+  // Limit of not on_by_default but favorited tools is 2
+  const favorited = tools.filter(it => it.favorite && !it.on_by_default).slice(0, 2) || [];
+  const onByDefault = tools.filter(it => it.on_by_default && it.favorite) || [];
+  const set = new Map(); // Remove possible overlaps between favorited and onByDefault, otherwise
   // we'd have duplicate buttons in the toolbar.
 
-  for (const toolInfo of favorited.concat(alwaysOn)) {
+  for (const toolInfo of favorited.concat(onByDefault)) {
     set.set(toolInfo.id, toolInfo);
   }
 
   return Array.from(set.values()).sort((a, b) => {
-    if (a.always_on && !b.always_on) {
+    if (a.on_by_default && !b.on_by_default) {
       return -1;
-    } else if (!a.always_on && b.always_on) {
+    } else if (!a.on_by_default && b.on_by_default) {
       return 1;
     } else {
       // This *should* always be a string, but there might be cases where it isn't,
@@ -107,8 +107,8 @@ export class RceToolWrapper {
     return this.toolInfo.use_tray;
   }
 
-  get always_on() {
-    return this.toolInfo.always_on;
+  get on_by_default() {
+    return this.toolInfo.on_by_default;
   }
 
   asToolbarButton() {

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -131,6 +131,26 @@ export default class ExternalToolDialog extends React.Component {
     this.handleInfoAlertBlur = () => this.setState({
       infoAlert: null
     });
+
+    this.calcIFrameHeight = () => {
+      var _this$state$button, _this$state$button2;
+
+      if ((_this$state$button = this.state.button) !== null && _this$state$button !== void 0 && _this$state$button.use_tray) {
+        return '100%';
+      }
+
+      const toolDefinedHeight = (_this$state$button2 = this.state.button) === null || _this$state$button2 === void 0 ? void 0 : _this$state$button2.height;
+      const iFrameHeight = toolDefinedHeight !== null && toolDefinedHeight !== void 0 ? toolDefinedHeight : Math.max(Math.min(window.innerHeight - 100, 550), 100);
+      const modalMaxHeight = '95';
+      const modalHeaderHeightWithPadding = '5.5rem';
+      const complexHeightWithDVH = `min(${iFrameHeight}px, calc(${modalMaxHeight}dvh - ${modalHeaderHeightWithPadding}))`;
+
+      if (CSS.supports('height', complexHeightWithDVH)) {
+        return complexHeightWithDVH;
+      } else {
+        return `${iFrameHeight}px`;
+      }
+    };
   }
 
   open(button) {
@@ -202,12 +222,11 @@ export default class ExternalToolDialog extends React.Component {
   }
 
   render() {
-    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4, _state$button5, _state$button$height, _state$button6;
+    var _state$button, _props$env$rceWrapper, _props$env$rceWrapper2, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4;
 
     const state = this.state;
     const props = this.props;
     const label = formatMessage('Embed content from External Tool');
-    const frameHeight = Math.max(Math.min(window.innerHeight - 100, 550), 100);
     const Overlay = (_state$button = state.button) !== null && _state$button !== void 0 && _state$button.use_tray ? ExternalToolDialogTray : ExternalToolDialogModal;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
       ref: this.formRef,
@@ -272,8 +291,8 @@ export default class ExternalToolDialog extends React.Component {
       src: "",
       id: "external_tool_button_frame",
       style: {
+        height: this.calcIFrameHeight(),
         width: (_state$button3 = state.button) !== null && _state$button3 !== void 0 && _state$button3.use_tray ? '100%' : (_state$button$width = (_state$button4 = state.button) === null || _state$button4 === void 0 ? void 0 : _state$button4.width) !== null && _state$button$width !== void 0 ? _state$button$width : 800,
-        height: (_state$button5 = state.button) !== null && _state$button5 !== void 0 && _state$button5.use_tray ? '100%' : (_state$button$height = (_state$button6 = state.button) === null || _state$button6 === void 0 ? void 0 : _state$button6.height) !== null && _state$button$height !== void 0 ? _state$button$height : frameHeight,
         border: '0',
         display: 'block',
         visibility: state.iframeLoaded ? 'visible' : 'hidden'
@@ -288,6 +307,9 @@ export default class ExternalToolDialog extends React.Component {
       ,
       onFocus: this.handleInfoAlertFocus,
       onBlur: this.handleInfoAlertBlur,
+      style: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? {} : {
+        bottom: '0'
+      },
       className: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? '' : 'screenreader-only'
     }, /*#__PURE__*/React.createElement(Alert, {
       margin: "small"

package/es/rce/plugins/instructure_rce_external_tools/plugin.js

@@ -68,7 +68,7 @@ function registerFavoriteAppsToolbarButtons(editor) {
 }
 
 function registerAppsToolbarButton(editor) {
-  const tooltip = formatMessage('Apps');
+  const tooltip = 'apps-temp';
   editor.ui.registry.addMenuButton('lti_mru_button', {
     tooltip,
     icon: 'lti',
@@ -79,6 +79,9 @@ function registerAppsToolbarButton(editor) {
     },
 
     onSetup(_api) {
+      const e = document.querySelector("button[title='apps-temp']");
+      e === null || e === void 0 ? void 0 : e.setAttribute('title', formatMessage('Apps'));
+      e === null || e === void 0 ? void 0 : e.setAttribute('id', 'plug-apps-button');
       return () => undefined;
     }
 

package/es/rce/plugins/shared/CanvasContentTray.js

@@ -15,23 +15,24 @@
  * 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 React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bool, element, func, instanceOf, oneOfType, shape, string } from 'prop-types';
 import { Tray } from '@instructure/ui-tray';
 import { CloseButton, Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
-import { Spinner } from '@instructure/ui-spinner';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import ErrorBoundary from './ErrorBoundary';
 import Bridge from '../../../bridge/Bridge';
 import formatMessage from '../../../format-message';
-import Filter, { useFilterSettings } from './Filter';
+import Filter from './Filter';
+import { useFilterSettings } from './useFilterSettings';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
 import { LinkDisplay } from './LinkDisplay';
 import { showFlashAlert } from '../../../common/FlashAlert';
+import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel, isLoading } from './canvasContentUtils';
 /**
  * Returns the translated tray label
  * @param {string} contentType - The type of content showing on tray
@@ -71,160 +72,6 @@ function getTrayLabel(contentType, contentSubtype, contextType) {
     // Shouldn't ever get here
   }
 }
-
-const thePanels = {
-  icon_maker_icons: /*#__PURE__*/React.lazy(() => import('../instructure_icon_maker/components/SavedIconMakerList')),
-  links: /*#__PURE__*/React.lazy(() => import('../instructure_links/components/LinksPanel')),
-  images: /*#__PURE__*/React.lazy(() => import('../instructure_image/Images')),
-  documents: /*#__PURE__*/React.lazy(() => import('../instructure_documents/components/DocumentsPanel')),
-  media: /*#__PURE__*/React.lazy(() => import('../instructure_record/MediaPanel')),
-  all: /*#__PURE__*/React.lazy(() => import('./RceFileBrowser')),
-  unknown: /*#__PURE__*/React.lazy(() => import('./UnknownFileTypePanel'))
-}; // Returns a Suspense wrapped lazy loaded component
-// pulled from useLazy's cache
-
-function DynamicPanel(props) {
-  let key = '';
-
-  if (props.contentType === 'links') {
-    key = 'links';
-  } else {
-    key = props.contentSubtype in thePanels ? props.contentSubtype : 'unknown';
-  }
-
-  const Component = thePanels[key];
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement(Spinner, {
-      renderTitle: renderLoading,
-      size: "large"
-    })
-  }, /*#__PURE__*/React.createElement(Component, props));
-}
-
-function renderLoading() {
-  return formatMessage('Loading');
-}
-
-const FILTER_SETTINGS_BY_PLUGIN = {
-  user_documents: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_documents: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_documents: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'documents',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_images: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_images: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_images: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'images',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  user_media: {
-    contextType: 'user',
-    contentType: 'user_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_media: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_media: {
-    contextType: 'group',
-    contentType: 'group_files',
-    contentSubtype: 'media',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_links: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  course_link_edit: {
-    contextType: 'course',
-    contentType: 'links',
-    contentSubtype: 'edit',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  group_links: {
-    contextType: 'group',
-    contentType: 'links',
-    contentSubtype: 'all',
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  list_icon_maker_icons: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: ICON_MAKER_ICONS,
-    sortValue: 'date_added',
-    sortDir: 'desc',
-    searchString: ''
-  },
-  all: {
-    contextType: 'course',
-    contentType: 'course_files',
-    contentSubtype: 'all',
-    sortValue: 'alphabetical',
-    sortDir: 'asc',
-    searchString: ''
-  }
-};
-
-function isLoading(sprops) {
-  var _sprops$collections$a, _sprops$collections$a2, _sprops$collections$d, _sprops$collections$m, _sprops$collections$q, _sprops$collections$w, _sprops$documents$cou, _sprops$documents$use, _sprops$documents$gro, _sprops$media$course, _sprops$media$user, _sprops$media$group, _sprops$all_files;
-
-  return ((_sprops$collections$a = sprops.collections.announcements) === null || _sprops$collections$a === void 0 ? void 0 : _sprops$collections$a.isLoading) || ((_sprops$collections$a2 = sprops.collections.assignments) === null || _sprops$collections$a2 === void 0 ? void 0 : _sprops$collections$a2.isLoading) || ((_sprops$collections$d = sprops.collections.discussions) === null || _sprops$collections$d === void 0 ? void 0 : _sprops$collections$d.isLoading) || ((_sprops$collections$m = sprops.collections.modules) === null || _sprops$collections$m === void 0 ? void 0 : _sprops$collections$m.isLoading) || ((_sprops$collections$q = sprops.collections.quizzes) === null || _sprops$collections$q === void 0 ? void 0 : _sprops$collections$q.isLoading) || ((_sprops$collections$w = sprops.collections.wikiPages) === null || _sprops$collections$w === void 0 ? void 0 : _sprops$collections$w.isLoading) || ((_sprops$documents$cou = sprops.documents.course) === null || _sprops$documents$cou === void 0 ? void 0 : _sprops$documents$cou.isLoading) || ((_sprops$documents$use = sprops.documents.user) === null || _sprops$documents$use === void 0 ? void 0 : _sprops$documents$use.isLoading) || ((_sprops$documents$gro = sprops.documents.group) === null || _sprops$documents$gro === void 0 ? void 0 : _sprops$documents$gro.isLoading) || ((_sprops$media$course = sprops.media.course) === null || _sprops$media$course === void 0 ? void 0 : _sprops$media$course.isLoading) || ((_sprops$media$user = sprops.media.user) === null || _sprops$media$user === void 0 ? void 0 : _sprops$media$user.isLoading) || ((_sprops$media$group = sprops.media.group) === null || _sprops$media$group === void 0 ? void 0 : _sprops$media$group.isLoading) || ((_sprops$all_files = sprops.all_files) === null || _sprops$all_files === void 0 ? void 0 : _sprops$all_files.isLoading);
-}
 /**
  * This component is used within various plugins to handle loading in content
  * from Canvas.  It is essentially the main component.
@@ -533,7 +380,8 @@ function requiredWithoutSource(props, propName, componentName) {
   if (props.source == null && props[propName] == null) {
     throw new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${props[propName]}\`.`);
   }
-}
+} // Changes made here may need to be reflected in the trayProps type in CanvasContentPanel
+
 
 const trayPropsMap = {
   canUploadFiles: bool.isRequired,

package/es/rce/plugins/shared/Filter.js

@@ -26,23 +26,6 @@ import { IconButton } from '@instructure/ui-buttons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { IconLinkLine, IconFolderLine, IconImageLine, IconDocumentLine, IconAttachMediaLine, IconSearchLine, IconXLine } from '@instructure/ui-icons';
-const DEFAULT_FILTER_SETTINGS = {
-  contentSubtype: 'all',
-  contentType: 'links',
-  sortValue: 'date_added',
-  searchString: ''
-};
-export function useFilterSettings(default_settings) {
-  const [filterSettings, setFilterSettings] = useState(default_settings || DEFAULT_FILTER_SETTINGS);
-
-  function updateFilterSettings(nextSettings) {
-    setFilterSettings({ ...filterSettings,
-      ...nextSettings
-    });
-  }
-
-  return [filterSettings, updateFilterSettings];
-}
 
 function fileLabelFromContext(contextType) {
   switch (contextType) {

package/es/rce/plugins/shared/FixedContentTray.js

@@ -59,7 +59,8 @@ export const FixedContentTray = _ref => {
     renderBody,
     renderFooter,
     bodyAs,
-    shouldJoinBodyAndFooter
+    shouldJoinBodyAndFooter,
+    shouldCloseOnDocumentClick
   } = _ref;
   return /*#__PURE__*/React.createElement(Tray, {
     "data-mce-component": true,
@@ -69,7 +70,7 @@ export const FixedContentTray = _ref => {
     onExited: onUnmount,
     open: isOpen,
     placement: "end",
-    shouldCloseOnDocumentClick: true,
+    shouldCloseOnDocumentClick: shouldCloseOnDocumentClick,
     shouldContainFocus: true,
     shouldReturnFocus: true,
     size: "regular"
@@ -103,7 +104,8 @@ FixedContentTray.propTypes = {
   onUnmount: PropTypes.func,
   mountNode: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   bodyAs: PropTypes.string,
-  shouldJoinBodyAndFooter: PropTypes.bool
+  shouldJoinBodyAndFooter: PropTypes.bool,
+  shouldCloseOnDocumentClick: PropTypes.bool
 };
 FixedContentTray.defaultProps = {
   title: null,
@@ -111,5 +113,6 @@ FixedContentTray.defaultProps = {
   onDismiss: () => {},
   onUnmount: () => {},
   bodyAs: 'div',
-  shouldJoinBodyAndFooter: false
+  shouldJoinBodyAndFooter: false,
+  shouldCloseOnDocumentClick: true
 };

package/es/rce/plugins/shared/ImageOptionsForm.js

@@ -44,7 +44,8 @@ const ImageOptionsForm = _ref => {
     messagesForSize,
     hideDimensions,
     id = 'image-options-form',
-    isIconMaker = false
+    isIconMaker = false,
+    forBlockEditorUse = false
   } = _ref;
   const TYPE = isIconMaker ? formatMessage('icon') : formatMessage('image');
   const tooltipText = formatMessage('Used by screen readers to describe the content of an {TYPE}', {
@@ -95,7 +96,7 @@ const ImageOptionsForm = _ref => {
       TYPE_UPPER
     }),
     onChange: handleIsDecorativeChange
-  })), !isIconMaker && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  })), !isIconMaker && /*#__PURE__*/React.createElement(React.Fragment, null, !forBlockEditorUse && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(RadioInputGroup, {
     description: formatMessage('Display Options'),

package/es/rce/plugins/shared/Upload/CanvasContentPanel.js

@@ -0,0 +1,160 @@
+import _pt from "prop-types";
+
+/*
+ * Copyright (C) 2024 - 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 React, { useState } from 'react';
+import { Flex } from '@instructure/ui-flex';
+import ErrorBoundary from '../ErrorBoundary';
+import { useFilterSettings } from '../useFilterSettings';
+import PanelFilter from './PanelFilter';
+import { FILTER_SETTINGS_BY_PLUGIN, DynamicPanel } from '../canvasContentUtils';
+import { useStoreProps } from '../StoreContext';
+// TODO: Component is only validated for images, need to validate for other content types
+export default function CanvasContentPanel(_ref) {
+  let {
+    trayProps,
+    canvasOrigin,
+    plugin,
+    setFileUrl
+  } = _ref;
+  const [filterSettings, setFilterSettings] = useFilterSettings(FILTER_SETTINGS_BY_PLUGIN[plugin]);
+  const [link, setLink] = useState(null);
+  const [hasLoaded, setHasLoaded] = useState(false); // storeProps has functions that collide with what we want to do in a block editor setting
+
+  const baseStoreProps = useStoreProps();
+  const {
+    onImageEmbed: _,
+    ...storeProps
+  } = baseStoreProps;
+
+  function handleFilterChange(newFilter, onChangeContext, onChangeSearchString, onChangeSortBy) {
+    const newFilterSettings = { ...newFilter
+    };
+
+    if (newFilterSettings.sortValue) {
+      newFilterSettings.sortDir = newFilterSettings.sortValue === 'alphabetical' ? 'asc' : 'desc';
+      onChangeSortBy({
+        sort: newFilterSettings.sortValue,
+        dir: newFilterSettings.sortDir
+      });
+    }
+
+    if ('searchString' in newFilterSettings && filterSettings.searchString !== newFilterSettings.searchString) {
+      onChangeSearchString(newFilterSettings.searchString);
+    }
+
+    setFilterSettings(newFilterSettings);
+
+    if (newFilterSettings.contentType) {
+      let contextType, contextId;
+
+      switch (newFilterSettings.contentType) {
+        case 'user_files':
+          contextType = 'user';
+          contextId = trayProps.containingContext.userId;
+          break;
+
+        case 'group_files':
+          contextType = 'group';
+          contextId = trayProps.containingContext.contextId;
+          break;
+
+        case 'course_files':
+          contextType = trayProps.contextType;
+          contextId = trayProps.containingContext.contextId;
+          break;
+
+        case 'links':
+          contextType = trayProps.containingContext.contextType;
+          contextId = trayProps.containingContext.contextId;
+      }
+
+      onChangeContext({
+        contextType,
+        contextId
+      }); // context is only changed on load
+
+      setHasLoaded(true);
+    }
+  }
+
+  const handleImageClick = image => {
+    setFileUrl(image.href);
+  };
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    direction: "column",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "medium"
+  }, /*#__PURE__*/React.createElement(PanelFilter, Object.assign({}, filterSettings, {
+    onChange: newFilter => {
+      handleFilterChange(newFilter, storeProps.onChangeContext, storeProps.onChangeSearchString, storeProps.onChangeSortBy);
+    }
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true,
+    margin: "xx-small xxx-small 0"
+  }, hasLoaded && /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "space-between",
+    direction: "column",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true,
+    shouldShrink: true
+  }, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(DynamicPanel, Object.assign({
+    contentType: filterSettings.contentType,
+    contentSubtype: filterSettings.contentSubtype,
+    sortBy: {
+      sort: filterSettings.sortValue,
+      order: filterSettings.sortDir
+    },
+    searchString: filterSettings.searchString,
+    canvasOrigin: canvasOrigin,
+    context: {
+      type: trayProps.contextType,
+      id: trayProps.contextId
+    },
+    editing: false,
+    onEditClick: setLink,
+    selectedLink: link,
+    onImageEmbed: handleImageClick
+  }, storeProps)))))));
+}
+CanvasContentPanel.propTypes = {
+  trayProps: _pt.shape({
+    canUploadFiles: _pt.bool.isRequired,
+    contextId: _pt.string.isRequired,
+    contextType: _pt.string.isRequired,
+    containingContext: _pt.shape({
+      contextType: _pt.string.isRequired,
+      contextId: _pt.string.isRequired,
+      userId: _pt.string.isRequired
+    }).isRequired,
+    filesTabDisabled: _pt.bool.isRequired,
+    host: _pt.string.isRequired,
+    jwt: _pt.string.isRequired,
+    source: _pt.shape({}).isRequired,
+    themeUrl: _pt.string.isRequired,
+    storeProps: _pt.any.isRequired
+  }).isRequired,
+  canvasOrigin: _pt.string.isRequired,
+  plugin: _pt.any.isRequired,
+  setFileUrl: _pt.func.isRequired
+};

package/es/rce/plugins/shared/Upload/ComputerPanel.js

@@ -273,6 +273,7 @@ export default function ComputerPanel(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     ref: panelRef
   }, /*#__PURE__*/React.createElement(FileDrop, {
+    "data-testid": "filedrop",
     accept: accept,
     onDropAccepted: _ref2 => {
       let [file] = _ref2;