@instructure/canvas-rce 5.12.1 → 5.12.2

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

@@ -1,225 +0,0 @@
-/*
- * 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 { openToolDialogFor } from './dialog-helper';
-import { simpleCache } from '../../../util/simpleCache';
-import { instUiIconsArray } from '../../../util/instui-icon-helper'; // @ts-ignore
-
-import { IconLtiSolid } from '@instructure/ui-icons/es/svg';
-
-/**
- * Helper class for the connection between an external tool registration and a particular TinyMCE instance.
- */
-export class RceToolWrapper {
-  static forEditorEnv(env) {
-    let toolConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : env.availableRceLtiTools;
-    let mruIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : loadMruToolIds();
-    return toolConfigs.map(it => new RceToolWrapper(env, it, mruIds));
-  }
-
-  get editor() {
-    return this.env.editor;
-  }
-
-  constructor(env, toolInfo, mruToolIds) {
-    this.env = env;
-    this.toolInfo = toolInfo;
-    this.iconId = void 0;
-    this.isMruTool = void 0;
-    this.iconId = registerToolIcon(env, toolInfo);
-    this.isMruTool = mruToolIds.includes(String(toolInfo.id));
-  }
-
-  get id() {
-    return String(this.toolInfo.id);
-  }
-
-  get title() {
-    var _this$toolInfo$name;
-
-    return (_this$toolInfo$name = this.toolInfo.name) !== null && _this$toolInfo$name !== void 0 ? _this$toolInfo$name : `Unknown tool (${String(this.toolInfo.id)})`;
-  }
-
-  get description() {
-    return this.toolInfo.description;
-  }
-
-  get favorite() {
-    var _this$toolInfo$favori;
-
-    return (_this$toolInfo$favori = this.toolInfo.favorite) !== null && _this$toolInfo$favori !== void 0 ? _this$toolInfo$favori : false;
-  }
-
-  get image() {
-    var _parseIconValueFor;
-
-    return (_parseIconValueFor = parseIconValueFor(this.toolInfo)) === null || _parseIconValueFor === void 0 ? void 0 : _parseIconValueFor.iconUrl;
-  }
-
-  get width() {
-    return this.toolInfo.width;
-  }
-
-  get height() {
-    return this.toolInfo.height;
-  }
-
-  get use_tray() {
-    return this.toolInfo.use_tray;
-  }
-
-  asToolbarButton() {
-    var _this$iconId;
-
-    return {
-      type: 'button',
-      icon: (_this$iconId = this.iconId) !== null && _this$iconId !== void 0 ? _this$iconId : undefined,
-      tooltip: this.title,
-      onAction: () => this.openDialog()
-    };
-  }
-
-  asMenuItem() {
-    var _this$iconId2;
-
-    return {
-      type: 'menuitem',
-      text: this.title,
-      icon: (_this$iconId2 = this.iconId) !== null && _this$iconId2 !== void 0 ? _this$iconId2 : undefined,
-      onAction: () => this.openDialog()
-    };
-  }
-
-  openDialog() {
-    addMruToolId(this.id, this.env);
-    openToolDialogFor(this);
-  }
-
-}
-export function parseIconValueFor(toolInfo) {
-  const result = {};
-  const canvasIconClass = toolInfo.canvas_icon_class; // URL embedded in canvas_icon_class, which happens in some cases (see MAT-1354)
-
-  if (typeof canvasIconClass === 'object') {
-    const iconUrl = canvasIconClass === null || canvasIconClass === void 0 ? void 0 : canvasIconClass.icon_url;
-
-    if (typeof iconUrl === 'string' && iconUrl !== '') {
-      result.iconUrl = iconUrl;
-    }
-  } // URL at the top level takes precedence
-
-
-  if (typeof toolInfo.icon_url === 'string' && toolInfo.icon_url !== '') {
-    result.iconUrl = toolInfo.icon_url;
-  } // Icon class as string
-
-
-  if (typeof canvasIconClass === 'string' && canvasIconClass !== '') {
-    result.canvasIconClass = canvasIconClass;
-  }
-
-  return result;
-}
-
-function registerToolIcon(env, toolInfo) {
-  if (env.editor == null) return undefined;
-  const iconId = 'lti_tool_' + String(toolInfo.id);
-  const {
-    iconUrl,
-    canvasIconClass
-  } = parseIconValueFor(toolInfo); // We need to strip off the icon- or icon_ prefix from the icon class name to match instui icons
-
-  const iconGlyphName = (canvasIconClass !== null && canvasIconClass !== void 0 ? canvasIconClass : '').replace(/^icon[-_]/, '');
-
-  if (iconUrl != null && iconUrl.length > 0) {
-    // Icon image provided
-    env.editor.ui.registry.addIcon(iconId, svgImageCache.get(iconUrl));
-    return iconId;
-  } else if (iconGlyphName != null && iconGlyphName.length > 0) {
-    // InstUI icon used
-    const instUiIcon = instUiIconsArray.find(it => it.variant === 'Line' && it.glyphName === iconGlyphName);
-
-    if (instUiIcon != null) {
-      env.editor.ui.registry.addIcon(iconId, instUiIcon.src);
-      return iconId;
-    }
-  } // Fallback to default icon
-
-
-  env.editor.ui.registry.addIcon(iconId, IconLtiSolid.src);
-  return iconId;
-}
-
-const svgImageCache = simpleCache(imageUrl => {
-  // Sanitize input against XSS
-  const svg = document.createElement('svg');
-  svg.setAttribute('viewBox', '0 0 16 16');
-  svg.setAttribute('version', '1.1');
-  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  const image = document.createElement('image');
-  image.setAttribute('xlink:href', imageUrl);
-  image.style.width = '100%';
-  image.style.height = '100%';
-  svg.appendChild(image);
-  return svg.outerHTML;
-});
-/**
- * Loads the list of most recently used external tool ids.
- */
-
-export function loadMruToolIds() {
-  let list;
-
-  try {
-    var _window$localStorage$, _window$localStorage;
-
-    list = JSON.parse((_window$localStorage$ = (_window$localStorage = window.localStorage) === null || _window$localStorage === void 0 ? void 0 : _window$localStorage.getItem('ltimru')) !== null && _window$localStorage$ !== void 0 ? _window$localStorage$ : '[]');
-  } catch (ex) {
-    // eslint-disable-next-line no-console
-    console.warn('Found bad LTI MRU data', ex.message);
-  }
-
-  return Array.isArray(list) ? list.filter(it => it != null).map(it => String(it)) : [];
-}
-/**
- * Loads the list of most recently used external tool ids.
- */
-
-export function storeMruToolIds(toolIds) {
-  try {
-    var _window$localStorage2;
-
-    (_window$localStorage2 = window.localStorage) === null || _window$localStorage2 === void 0 ? void 0 : _window$localStorage2.setItem('ltimru', JSON.stringify(toolIds));
-  } catch (ex) {
-    // eslint-disable-next-line no-console
-    console.warn('Cannot save LTI MRU list', ex.message);
-  }
-}
-export function addMruToolId(toolId, env) {
-  const initialMruToolIds = loadMruToolIds();
-
-  if (!initialMruToolIds.includes(toolId)) {
-    const newToolIds = [toolId, ...initialMruToolIds.slice(0, env.maxMruTools - 1)];
-    storeMruToolIds(newToolIds);
-    return newToolIds;
-  }
-
-  return initialMruToolIds;
-}
-export function buildToolMenuItems(availableTools, viewAllItem) {
-  return [...availableTools.filter(it => it.isMruTool).map(it => it.asMenuItem()).sort((a, b) => a.text.localeCompare(b.text)), viewAllItem];
-}

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

@@ -1,297 +0,0 @@
-import _pt from "prop-types";
-
-/*
- * Copyright (C) 2019 - 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 { replaceTags } from '../../helpers/tags';
-import React, { createRef } from 'react';
-import { Alert } from '@instructure/ui-alerts';
-import { Spinner } from '@instructure/ui-spinner';
-import { Flex } from '@instructure/ui-flex';
-import ToolLaunchIframe from '../util/ToolLaunchIframe';
-import processEditorContentItems from '../../lti13-content-items/processEditorContentItems';
-import { RceLti11ContentItem } from '../../lti11-content-items/RceLti11ContentItem';
-import formatMessage from '../../../../../format-message';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
-import { ExternalToolDialogTray } from './ExternalToolDialogTray';
-import { ExternalToolDialogModal } from './ExternalToolDialogModal';
-import { showFlashAlert } from '../../../../../common/FlashAlert';
-import { parseUrlOrNull } from '../../../../../util/url-util';
-export default class ExternalToolDialog extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      open: false,
-      button: null,
-      infoAlert: null,
-      form: EMPTY_FORM,
-      iframeLoaded: false
-    };
-    this.formRef = /*#__PURE__*/createRef();
-    this.beforeInfoAlertRef = /*#__PURE__*/createRef();
-    this.afterInfoAlertRef = /*#__PURE__*/createRef();
-    this.iframeRef = /*#__PURE__*/createRef();
-
-    this.handleBeforeUnload = ev => ev.returnValue = formatMessage('Changes you made may not be saved.');
-
-    this.handleExternalContentReady = data => {
-      const env = this.props.env; // a2DataReady listener will insert the data to the editor,
-      // So only close the modal is needed, only if assignments_2_student flag is enabled,
-      // is readable by current user and it is a student assignment view.
-
-      if (env.isA2StudentView) {
-        this.close();
-        return;
-      }
-
-      const contentItems = data.contentItems;
-
-      if (contentItems.length === 1 && contentItems[0]['@type'] === 'lti_replace') {
-        var _env$rceWrapper;
-
-        const code = contentItems[0].text;
-        (_env$rceWrapper = env.rceWrapper) === null || _env$rceWrapper === void 0 ? void 0 : _env$rceWrapper.setCode(code);
-      } else {
-        contentItems.forEach(contentData => {
-          var _env$rceWrapper2;
-
-          const code = RceLti11ContentItem.fromJSON({ ...contentData,
-            class: 'lti-embed'
-          }, env).codePayload;
-          (_env$rceWrapper2 = env.rceWrapper) === null || _env$rceWrapper2 === void 0 ? void 0 : _env$rceWrapper2.insertCode(code);
-        });
-      }
-
-      this.close();
-    };
-
-    this.handlePostedMessage = ev => {
-      if (ev.origin === this.resourceSelectionOrigin) {
-        const data = ev.data;
-
-        if ((data === null || data === void 0 ? void 0 : data.subject) === 'LtiDeepLinkingResponse') {
-          processEditorContentItems(ev, this.props.env, this);
-        } else if ((data === null || data === void 0 ? void 0 : data.subject) === 'externalContentReady') {
-          // 'externalContentReady' is EXTERNAL_CONTENT_READY in
-          // ui/shared/external-tools/externalContentEvents.ts
-          // where events are also described/used
-          this.handleExternalContentReady(ev.data);
-        }
-      }
-    };
-
-    this.handleClose = () => {
-      const msg = formatMessage('Are you sure you want to cancel? Changes you made may not be saved.'); // eslint-disable-next-line no-alert
-
-      if (window.confirm(msg)) {
-        this.close();
-      }
-    };
-
-    this.handleOpen = () => {
-      var _this$formRef$current;
-
-      if (this.state.open) (_this$formRef$current = this.formRef.current) === null || _this$formRef$current === void 0 ? void 0 : _this$formRef$current.submit();
-    };
-
-    this.handleRemove = () => {
-      var _this$props$env$edito;
-
-      this.setState({
-        button: null
-      });
-      (_this$props$env$edito = this.props.env.editor) === null || _this$props$env$edito === void 0 ? void 0 : _this$props$env$edito.focus(); // force tinyMCE to redraw sticky toolbar otherwise it never goes away
-
-      window.dispatchEvent(new Event('resize'));
-    };
-
-    this.handleInfoAlertFocus = ev => this.setState({
-      infoAlert: ev.target
-    });
-
-    this.handleInfoAlertBlur = () => this.setState({
-      infoAlert: null
-    });
-  }
-
-  open(button) {
-    var _env$editorSelection, _env$editorContent;
-
-    const {
-      env,
-      resourceSelectionUrlOverride
-    } = this.props;
-    let urlStr = replaceTags(resourceSelectionUrlOverride, 'id', button.id);
-    const selection = (_env$editorSelection = env === null || env === void 0 ? void 0 : env.editorSelection) !== null && _env$editorSelection !== void 0 ? _env$editorSelection : '';
-    const contents = (_env$editorContent = env === null || env === void 0 ? void 0 : env.editorContent) !== null && _env$editorContent !== void 0 ? _env$editorContent : '';
-
-    if (urlStr == null) {
-      // if we don't have a url on the page, build one using the current context.
-      // url should look like: /courses/2/external_tools/15/resource_selection?editor=1
-      const contextAssetInfo = env.contextAssetInfo;
-
-      if (contextAssetInfo == null) {
-        showFlashAlert({
-          message: formatMessage('Unable to determine resource selection url'),
-          type: 'error',
-          err: undefined
-        });
-        return;
-      }
-
-      const {
-        contextType,
-        contextId
-      } = contextAssetInfo;
-      const canvasOrigin = env.canvasOrigin;
-      urlStr = `${canvasOrigin}/${contextType}s/${contextId}/external_tools/${encodeURIComponent(button.id)}/resource_selection`;
-    }
-
-    this.setState({
-      open: true,
-      button,
-      form: {
-        url: urlStr,
-        selection,
-        contents,
-        parent_frame_context: env.containingCanvasLtiToolId
-      }
-    });
-    window.addEventListener('beforeunload', this.handleBeforeUnload);
-    window.addEventListener('message', this.handlePostedMessage);
-  }
-
-  close() {
-    window.removeEventListener('beforeunload', this.handleBeforeUnload);
-    window.removeEventListener('message', this.handlePostedMessage);
-    this.setState({
-      open: false,
-      form: EMPTY_FORM
-    });
-  }
-
-  get resourceSelectionOrigin() {
-    if (this.props.resourceSelectionUrlOverride) {
-      const resourceSelectionUrl = parseUrlOrNull(this.props.resourceSelectionUrlOverride);
-
-      if (resourceSelectionUrl != null) {
-        return resourceSelectionUrl.origin;
-      }
-    }
-
-    return this.props.env.canvasOrigin;
-  }
-
-  render() {
-    var _state$button, _state$button$title, _state$button2, _state$button3, _state$button$width, _state$button4, _state$button5, _state$button$height, _state$button6;
-
-    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,
-      method: "POST",
-      action: state.form.url,
-      target: "external_tool_launch",
-      style: {
-        margin: 0
-      }
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "hidden",
-      name: "editor",
-      value: "1"
-    }), /*#__PURE__*/React.createElement("input", {
-      type: "hidden",
-      name: "selection",
-      value: state.form.selection
-    }), /*#__PURE__*/React.createElement("input", {
-      type: "hidden",
-      name: "editor_contents",
-      value: state.form.contents
-    }), state.form.parent_frame_context != null && /*#__PURE__*/React.createElement("input", {
-      type: "hidden",
-      name: "parent_frame_context",
-      value: state.form.parent_frame_context
-    })), /*#__PURE__*/React.createElement(Overlay, {
-      open: state.open,
-      mountNode: instuiPopupMountNode,
-      label: label,
-      onOpen: this.handleOpen,
-      onClose: this.handleRemove,
-      onCloseButton: this.handleClose,
-      name: (_state$button$title = (_state$button2 = state.button) === null || _state$button2 === void 0 ? void 0 : _state$button2.title) !== null && _state$button$title !== void 0 ? _state$button$title : ' '
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: this.beforeInfoAlertRef,
-      tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      onFocus: this.handleInfoAlertFocus,
-      onBlur: this.handleInfoAlertBlur,
-      className: this.beforeInfoAlertRef.current != null && state.infoAlert === this.beforeInfoAlertRef.current ? '' : 'screenreader-only'
-    }, /*#__PURE__*/React.createElement(Alert, {
-      margin: "small"
-    }, formatMessage('The following content is partner provided'))), !state.iframeLoaded && /*#__PURE__*/React.createElement(Flex, {
-      alignItems: "center",
-      justifyItems: "center"
-    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
-      renderTitle: formatMessage('Loading External Tool'),
-      size: "large",
-      margin: "0 0 0 medium"
-    }))), /*#__PURE__*/React.createElement(ToolLaunchIframe, {
-      title: label,
-      ref: this.iframeRef,
-      name: "external_tool_launch",
-      src: "",
-      id: "external_tool_button_frame",
-      style: {
-        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'
-      },
-      allow: props.iframeAllowances,
-      onLoad: () => this.setState({
-        iframeLoaded: true
-      })
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: this.afterInfoAlertRef,
-      tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      ,
-      onFocus: this.handleInfoAlertFocus,
-      onBlur: this.handleInfoAlertBlur,
-      className: this.afterInfoAlertRef.current != null && state.infoAlert === this.afterInfoAlertRef.current ? '' : 'screenreader-only'
-    }, /*#__PURE__*/React.createElement(Alert, {
-      margin: "small"
-    }, formatMessage('The preceding content is partner provided')))));
-  }
-
-}
-ExternalToolDialog.propTypes = {
-  iframeAllowances: _pt.string.isRequired,
-  resourceSelectionUrlOverride: _pt.oneOfType([_pt.string, _pt.oneOf([null])])
-};
-ExternalToolDialog.defaultProps = {
-  resourceSelectionUrlOverride: undefined
-};
-const EMPTY_FORM = {
-  url: '',
-  selection: '',
-  contents: '',
-  parent_frame_context: null
-};

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogModal.js

@@ -1,46 +0,0 @@
-// @ts-nocheck
-
-/*
- * Copyright (C) 2019 - 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 from 'react';
-import { Heading } from '@instructure/ui-heading';
-import { CloseButton } from '@instructure/ui-buttons';
-import { View } from '@instructure/ui-view';
-import { Modal } from '@instructure/ui-modal';
-import formatMessage from 'format-message';
-export function ExternalToolDialogModal(props) {
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-mce-component": true,
-    label: props.label,
-    onDismiss: props.onCloseButton,
-    open: props.open,
-    onOpen: props.onOpen,
-    onClose: props.onClose,
-    mountNode: props.mountNode
-  }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(Heading, null, props.name), /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "medium",
-    onClick: props.onCloseButton,
-    screenReaderLabel: formatMessage('Close')
-  })), /*#__PURE__*/React.createElement(Modal.Body, {
-    padding: "0"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    height: "100%"
-  }, props.children)));
-}

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialogTray.js

@@ -1,79 +0,0 @@
-import _pt from "prop-types";
-
-/*
- * Copyright (C) 2019 - 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 from 'react';
-import { Tray } from '@instructure/ui-tray';
-import { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
-import { Heading } from '@instructure/ui-heading';
-import { CloseButton } from '@instructure/ui-buttons';
-import formatMessage from 'format-message';
-export function ExternalToolDialogTray(props) {
-  const {
-    label,
-    onCloseButton,
-    name,
-    children,
-    ...extraProps
-  } = props;
-  const padding = '0';
-  return /*#__PURE__*/React.createElement(Tray, Object.assign({
-    label: label,
-    onDismiss: onCloseButton,
-    placement: "end",
-    size: "regular"
-  }, extraProps), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: padding,
-    position: "absolute",
-    insetBlockStart: "0",
-    insetBlockEnd: "0",
-    insetInlineStart: "0",
-    insetInlineEnd: "0"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      height: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Flex, {
-    as: "div",
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Heading, null, name)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    onClick: onCloseButton,
-    size: "small",
-    screenReaderLabel: formatMessage('Close')
-  }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'relative',
-      flex: 1
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    width: "100%",
-    height: "100%"
-  }, children)))));
-}
-ExternalToolDialogTray.propTypes = {
-  onCloseButton: _pt.func,
-  name: _pt.string.isRequired
-};