@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,294 +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') {
-          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
-};

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

@@ -1,153 +0,0 @@
-import _pt from "prop-types";
-// @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, { useState } from 'react';
-import { Modal } from '@instructure/ui-modal';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-import { Heading } from '@instructure/ui-heading';
-import { View } from '@instructure/ui-view';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { List } from '@instructure/ui-list';
-import { Flex } from '@instructure/ui-flex';
-import { TextInput } from '@instructure/ui-text-input';
-import { IconSearchLine } from '@instructure/ui-icons';
-import { Alert } from '@instructure/ui-alerts';
-import formatMessage from '../../../../../format-message';
-import ExternalToolSelectionItem from './ExternalToolSelectionItem';
-import { instuiPopupMountNode } from '../../../../../util/fullscreenHelpers';
-
-// TODO: we really need a way for the client to pass this to the RCE
-const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-/**
- * Returns a filtered list of items based on the term.
- *
- * This was copied from legacy code, and feels like it should be replaced by a string matching library.
- *
- * @param searchString search term
- * @param items objects to filter
- * @return matching items if a non-blank search term is provided, otherwise a copy of the original list
- */
-
-
-export function filterItemsByTitleSubstring(searchString, items) {
-  if (searchString == null || searchString.length === 0) {
-    return items;
-  }
-
-  const lowerTerm = searchString.toLocaleLowerCase();
-  return items.filter(item => item.title.toLocaleLowerCase().includes(lowerTerm));
-}
-export function ExternalToolSelectionDialog(props) {
-  const [filterTerm, setFilterTerm] = useState('');
-  const [filteredResults, setFilteredResults] = useState(props.ltiButtons);
-
-  const handleFilterChange = e => {
-    var _e$target;
-
-    setFilterTerm((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
-    setFilteredResults(filterItemsByTitleSubstring(e.target.value, props.ltiButtons));
-  };
-
-  const filterEmpty = filteredResults.length <= 0;
-  return /*#__PURE__*/React.createElement(Modal, {
-    "data-mce-component": true,
-    liveRegion: getLiveRegion,
-    size: "medium",
-    themeOverride: {
-      mediumMaxWidth: '42rem'
-    },
-    label: formatMessage('Apps'),
-    mountNode: instuiPopupMountNode,
-    onDismiss: props.onDismiss,
-    open: true,
-    shouldCloseOnDocumentClick: false
-  }, /*#__PURE__*/React.createElement(Modal.Header, {
-    themeOverride: {
-      padding: '0.5rem'
-    }
-  }, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "end",
-    offset: "medium",
-    onClick: props.onDismiss,
-    screenReaderLabel: formatMessage('Close')
-  }), /*#__PURE__*/React.createElement(Heading, {
-    margin: "small"
-  }, formatMessage('All Apps')), /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "x-small none x-small medium"
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    type: "search",
-    renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, formatMessage('Search')),
-    placeholder: formatMessage('Search'),
-    renderAfterInput: /*#__PURE__*/React.createElement(IconSearchLine, {
-      inline: false
-    }),
-    onChange: handleFilterChange
-  }))), /*#__PURE__*/React.createElement(Modal.Body, {
-    overflow: "fit"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    as: "div",
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div",
-    shouldShrink: true,
-    shouldGrow: true
-  }, /*#__PURE__*/React.createElement(Alert, {
-    liveRegion: getLiveRegion,
-    variant: "info",
-    screenReaderOnly: !filterEmpty
-  }, filterEmpty && formatMessage('No results found for {filterTerm}', {
-    filterTerm
-  }), !filterEmpty && formatMessage(`Found { count, plural,
-              =0 {# results}
-              one {# result}
-              other {# results}
-            }`, {
-    count: filteredResults.length
-  })), renderTools(filteredResults)))), /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: props.onDismiss,
-    color: "primary"
-  }, formatMessage('Done'))));
-
-  function renderTools(ltiButtons) {
-    return /*#__PURE__*/React.createElement(List, {
-      isUnstyled: true
-    }, ltiButtons.sort((a, b) => a.title.localeCompare(b.title)).map(b => {
-      return /*#__PURE__*/React.createElement(List.Item, {
-        key: b.id
-      }, /*#__PURE__*/React.createElement(View, {
-        as: "div",
-        padding: "medium medium small none"
-      }, /*#__PURE__*/React.createElement(ExternalToolSelectionItem, {
-        title: b.title,
-        image: b.image,
-        onAction: () => {
-          props.onDismiss();
-          b.openDialog();
-        },
-        description: b.description
-      })));
-    }));
-  }
-}
-ExternalToolSelectionDialog.propTypes = {
-  ltiButtons: _pt.array.isRequired,
-  onDismiss: _pt.func.isRequired
-};

package/lib/rce/plugins/instructure_rce_external_tools/components/ExternalToolSelectionDialog/ExternalToolSelectionItem.js

@@ -1,94 +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, { useState } from 'react';
-import { Text } from '@instructure/ui-text';
-import { View } from '@instructure/ui-view';
-import ExpandoText from '../util/ExpandoText';
-import formatMessage from '../../../../../format-message';
-import { css, StyleSheet } from 'aphrodite';
-export default function ExternalToolSelectionItem(props) {
-  const [focused, setFocused] = useState(false);
-  const {
-    title,
-    image,
-    description,
-    onAction
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    withFocusOutline: focused,
-    className: css(styles.appButton),
-    padding: "xxx-small xxx-small xx-small",
-    borderRadius: "medium",
-    role: "button",
-    position: "relative",
-    onClick: () => {
-      onAction();
-    },
-    onKeyDown: e => {
-      if (e.keyCode === 13 || e.keyCode === 32) {
-        onAction();
-      }
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement("span", null, image != null && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    width: "28",
-    height: "28",
-    alt: ""
-  })), /*#__PURE__*/React.createElement(View, {
-    as: "span",
-    className: css(styles.appTitle),
-    margin: "none none none small"
-  }, /*#__PURE__*/React.createElement(Text, {
-    "aria-label": formatMessage('Open {title} application', {
-      title
-    }),
-    weight: "bold"
-  }, title))), renderDescription(description));
-
-  function renderDescription(desc) {
-    if (desc == null || desc === '') return null;
-    return /*#__PURE__*/React.createElement(View, {
-      as: "span",
-      margin: "none none none large",
-      display: "block"
-    }, /*#__PURE__*/React.createElement(ExpandoText, {
-      text: desc,
-      title: title
-    }));
-  }
-}
-ExternalToolSelectionItem.propTypes = {
-  title: _pt.string.isRequired,
-  image: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
-  onAction: _pt.func.isRequired,
-  description: _pt.oneOfType([_pt.string, _pt.oneOf([null])])
-};
-export const styles = StyleSheet.create({
-  appTitle: {
-    verticalAlign: 'middle'
-  },
-  appButton: {
-    cursor: 'pointer'
-  }
-});