@instructure/outcomes-ui 2.1.2 → 2.1.3

package/es/translated/th/components/OutcomeTray/index.js

@@ -16,7 +16,6 @@ import { View } from '@instructure/ui-view';
 import { Tray } from '@instructure/ui-tray';
 import { Spinner } from '@instructure/ui-spinner';
 import OutcomeList from "./OutcomeList/index.js";
-import OutcomeViewModal from "../OutcomeViewModal/index.js";
 import SearchInput from "../SearchInput/index.js";
 import SearchResults from "../SearchResults/index.js";
 import theme from "../theme.js";
@@ -64,7 +63,6 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     value: function renderList() {
       var _this$props2 = this.props,
           outcomes = _this$props2.outcomes,
-          setFocusedOutcome = _this$props2.setFocusedOutcome,
           isOutcomeSelected = _this$props2.isOutcomeSelected,
           selectOutcomeIds = _this$props2.selectOutcomeIds,
           deselectOutcomeIds = _this$props2.deselectOutcomeIds,
@@ -77,7 +75,6 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         padding: "small none none none"
       }, /*#__PURE__*/React.createElement(OutcomeList, {
         outcomes: outcomes,
-        setFocusedOutcome: setFocusedOutcome,
         isOutcomeSelected: isOutcomeSelected,
         selectOutcomeIds: selectOutcomeIds,
         deselectOutcomeIds: deselectOutcomeIds,
@@ -87,45 +84,22 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         getOutcomesList: getOutcomesList
       }));
     }
-  }, {
-    key: "renderViewModal",
-    value: function renderViewModal() {
-      var _this$props3 = this.props,
-          focusedOutcome = _this$props3.focusedOutcome,
-          setFocusedOutcome = _this$props3.setFocusedOutcome,
-          artifactTypeName = _this$props3.artifactTypeName,
-          displayMasteryDescription = _this$props3.displayMasteryDescription,
-          displayMasteryPercentText = _this$props3.displayMasteryPercentText,
-          scope = _this$props3.scope;
-      return focusedOutcome && /*#__PURE__*/React.createElement(OutcomeViewModal, {
-        artifactTypeName: artifactTypeName,
-        displayMasteryDescription: displayMasteryDescription,
-        displayMasteryPercentText: displayMasteryPercentText,
-        outcome: focusedOutcome,
-        scope: scope,
-        closeAlignment: function closeAlignment() {
-          return setFocusedOutcome(null);
-        },
-        isOpen: true
-      });
-    }
   }, {
     key: "renderSearchMode",
     value: function renderSearchMode() {
-      var _this$props4 = this.props,
-          screenreaderNotification = _this$props4.screenreaderNotification,
-          setSearchLoading = _this$props4.setSearchLoading,
-          setSearchEntries = _this$props4.setSearchEntries,
-          searchText = _this$props4.searchText,
-          updateSearchPage = _this$props4.updateSearchPage,
-          isSearchLoading = _this$props4.isSearchLoading,
-          isOutcomeSelected = _this$props4.isOutcomeSelected,
-          searchEntries = _this$props4.searchEntries,
-          searchPage = _this$props4.searchPage,
-          searchTotal = _this$props4.searchTotal,
-          selectOutcomeIds = _this$props4.selectOutcomeIds,
-          deselectOutcomeIds = _this$props4.deselectOutcomeIds,
-          setFocusedOutcome = _this$props4.setFocusedOutcome;
+      var _this$props3 = this.props,
+          screenreaderNotification = _this$props3.screenreaderNotification,
+          setSearchLoading = _this$props3.setSearchLoading,
+          setSearchEntries = _this$props3.setSearchEntries,
+          searchText = _this$props3.searchText,
+          updateSearchPage = _this$props3.updateSearchPage,
+          isSearchLoading = _this$props3.isSearchLoading,
+          isOutcomeSelected = _this$props3.isOutcomeSelected,
+          searchEntries = _this$props3.searchEntries,
+          searchPage = _this$props3.searchPage,
+          searchTotal = _this$props3.searchTotal,
+          selectOutcomeIds = _this$props3.selectOutcomeIds,
+          deselectOutcomeIds = _this$props3.deselectOutcomeIds;
       return /*#__PURE__*/React.createElement(SearchResults, {
         screenreaderNotification: screenreaderNotification,
         setSearchLoading: setSearchLoading,
@@ -138,16 +112,15 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         searchPage: searchPage,
         searchTotal: searchTotal,
         selectOutcomeIds: selectOutcomeIds,
-        deselectOutcomeIds: deselectOutcomeIds,
-        setFocusedOutcome: setFocusedOutcome
+        deselectOutcomeIds: deselectOutcomeIds
       });
     }
   }, {
     key: "renderBody",
     value: function renderBody() {
-      var _this$props5 = this.props,
-          searchText = _this$props5.searchText,
-          isFetching = _this$props5.isFetching;
+      var _this$props4 = this.props,
+          searchText = _this$props4.searchText,
+          isFetching = _this$props4.isFetching;
 
       if (isFetching) {
         return /*#__PURE__*/React.createElement(Flex, {
@@ -164,11 +137,11 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "handleSubmit",
     value: function handleSubmit() {
-      var _this$props6 = this.props,
-          saveOutcomePickerAlignments = _this$props6.saveOutcomePickerAlignments,
-          onUpdate = _this$props6.onUpdate,
-          closeOutcomePicker = _this$props6.closeOutcomePicker,
-          shouldModifyArtifact = _this$props6.shouldModifyArtifact;
+      var _this$props5 = this.props,
+          saveOutcomePickerAlignments = _this$props5.saveOutcomePickerAlignments,
+          onUpdate = _this$props5.onUpdate,
+          closeOutcomePicker = _this$props5.closeOutcomePicker,
+          shouldModifyArtifact = _this$props5.shouldModifyArtifact;
       return saveOutcomePickerAlignments(onUpdate, shouldModifyArtifact).then(function () {
         return closeOutcomePicker();
       });
@@ -196,16 +169,16 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "render",
     value: function render() {
-      var _this$props7 = this.props,
-          liveRegion = _this$props7.liveRegion,
-          mountNode = _this$props7.mountNode,
-          searchText = _this$props7.searchText,
-          placement = _this$props7.placement,
-          size = _this$props7.size,
-          updateSearchText = _this$props7.updateSearchText,
-          closeOutcomePicker = _this$props7.closeOutcomePicker,
-          isOpen = _this$props7.isOpen,
-          resetOutcomePicker = _this$props7.resetOutcomePicker;
+      var _this$props6 = this.props,
+          liveRegion = _this$props6.liveRegion,
+          mountNode = _this$props6.mountNode,
+          searchText = _this$props6.searchText,
+          placement = _this$props6.placement,
+          size = _this$props6.size,
+          updateSearchText = _this$props6.updateSearchText,
+          closeOutcomePicker = _this$props6.closeOutcomePicker,
+          isOpen = _this$props6.isOpen,
+          resetOutcomePicker = _this$props6.resetOutcomePicker;
       var trayProps = {
         placement: placement,
         size: size
@@ -239,7 +212,7 @@ var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           return updateSearchText('');
         },
         searchText: searchText
-      }), this.renderBody()), this.renderActions(), this.renderViewModal()));
+      }), this.renderBody()), this.renderActions()));
     }
   }]);
 

package/es/translated/th/components/OutcomeView/index.js

@@ -99,7 +99,7 @@ var OutcomeView = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         "data-automation": "outcomeView__friendly_description_header"
       }, /*#__PURE__*/React.createElement(Text, {
         weight: "bold"
-      }, "Friendly Description")), /*#__PURE__*/React.createElement(View, {
+      }, "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E17\u0E35\u0E48\u0E40\u0E1B\u0E47\u0E19\u0E01\u0E31\u0E19\u0E40\u0E2D\u0E07")), /*#__PURE__*/React.createElement(View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 small small small",

package/es/translated/th/components/SearchResults/__tests__/index.test.js

@@ -33,7 +33,7 @@ describe('SearchResults', function () {
     });
     expect(wrapper.find('Spinner')).to.have.length(1);
   });
-  it('passes correct params to OutcomeCheckbox components', function () {
+  it('passes correct params to AlignmentItem components', function () {
     var props = makeProps();
     props.isSearchLoading = false;
     props.searchEntries = [{
@@ -44,7 +44,7 @@ describe('SearchResults', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
       disableLifecycleMethods: true
     });
-    var checkbox = wrapper.find('OutcomeCheckbox');
+    var checkbox = wrapper.find('AlignmentItem');
     expect(checkbox).to.have.length(1);
     expect(checkbox.prop('outcome')).to.eql({
       id: '2',

package/es/translated/th/components/SearchResults/index.js

@@ -11,6 +11,7 @@ import { View } from '@instructure/ui-view';
 import { Spinner } from '@instructure/ui-spinner';
 import isEqual from 'lodash/isEqual';
 import OutcomeCheckbox from "../OutcomeCheckbox/index.js";
+import AlignmentItem from "../AlignmentItem/index.js";
 import Pagination from "../Pagination/index.js";
 export var RESULTS_PER_PAGE = 10;
 
@@ -51,6 +52,7 @@ var SearchResults = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           setFocusedOutcome = _this$props2.setFocusedOutcome,
           isOutcomeSelected = _this$props2.isOutcomeSelected,
+          isPicker = _this$props2.isPicker,
           selectOutcomeIds = _this$props2.selectOutcomeIds,
           deselectOutcomeIds = _this$props2.deselectOutcomeIds,
           searchEntries = _this$props2.searchEntries;
@@ -58,12 +60,18 @@ var SearchResults = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           key: outcome.id,
           "data-automation": "searchResults__outcomeResult"
-        }, /*#__PURE__*/React.createElement(OutcomeCheckbox, {
+        }, isPicker ? /*#__PURE__*/React.createElement(OutcomeCheckbox, {
           outcome: outcome,
           setFocusedOutcome: setFocusedOutcome,
           isOutcomeSelected: isOutcomeSelected,
           selectOutcomeIds: selectOutcomeIds,
           deselectOutcomeIds: deselectOutcomeIds
+        }) : /*#__PURE__*/React.createElement(AlignmentItem, {
+          outcome: outcome,
+          isOutcomeSelected: isOutcomeSelected,
+          selectOutcomeIds: selectOutcomeIds,
+          deselectOutcomeIds: deselectOutcomeIds,
+          isTray: true
         }));
       });
     }
@@ -149,14 +157,17 @@ SearchResults.propTypes = {
   searchPage: PropTypes.number.isRequired,
   searchTotal: PropTypes.number,
   updateSearchPage: PropTypes.func.isRequired,
-  setFocusedOutcome: PropTypes.func.isRequired,
+  setFocusedOutcome: PropTypes.func,
   isOutcomeSelected: PropTypes.func.isRequired,
   selectOutcomeIds: PropTypes.func.isRequired,
   deselectOutcomeIds: PropTypes.func.isRequired,
-  screenreaderNotification: PropTypes.func
+  screenreaderNotification: PropTypes.func,
+  isPicker: PropTypes.bool
 };
 SearchResults.defaultProps = {
+  setFocusedOutcome: function setFocusedOutcome() {},
   screenreaderNotification: null,
-  searchTotal: null
+  searchTotal: null,
+  isPicker: false
 };
 export default SearchResults;

package/es/translated/th/store/OutcomePicker/__tests__/actions.test.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _arguments = arguments;
 
 /* eslint-disable promise/always-return */
 import { expect } from 'chai';
@@ -188,7 +187,7 @@ describe('OutcomePicker/actions', function () {
     });
     it('fires an updateCallback function if provided', function () {
       var store = createMockStore(state);
-      var callback = sinon.stub().returns(_arguments);
+      var callback = sinon.stub();
       return store.dispatch(actions.saveOutcomePickerAlignments(callback)).then(function () {
         expect(callback.calledOnce).to.be.true;
         expect(callback.calledWith({

package/es/translated/th/store/alignments/__tests__/actions.test.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _arguments = arguments;
 import { Map, fromJS } from 'immutable';
 import { expect } from 'chai';
 import sinon from 'sinon';
@@ -114,7 +113,7 @@ describe('alignments/actions', function () {
       }, {
         id: '2'
       }];
-      var callback = sinon.stub().returns(_arguments);
+      var callback = sinon.stub();
       var service = {
         getAlignments: sinon.stub().returns(Promise.resolve(alignments))
       };

package/es/translated/th/store/context/selectors.js

@@ -76,7 +76,7 @@ export var getCollectionData = createSelector(getContextOutcomes, function (outc
   for (var _i = 0, _Object$keys = Object.keys(outcomes); _i < _Object$keys.length; _i++) {
     var id = _Object$keys[_i];
 
-    // eslint-disable-line no-restricted-syntax
+    // eslint-disable-line no-unused-vars
     if (!isCollectionId(outcomes, id)) {
       continue; // eslint-disable-line no-continue
     }

package/es/translated/vi/__tests__/index.test.js

@@ -0,0 +1,6 @@
+import { expect } from 'chai';
+describe('placeholder test', function () {
+  it('passes', function () {
+    expect(true).to.be.true;
+  });
+});

package/es/translated/vi/components/Alignment/__tests__/index.test.js

@@ -0,0 +1,76 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount, shallow } from 'enzyme';
+import { IconOutcomesLine } from '@instructure/ui-icons';
+import Alignment from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+describe('Alignment', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '1',
+        label: 'FOO',
+        title: 'User can foo a bar'
+      },
+      closeAlignment: sinon.spy(),
+      viewAlignment: sinon.spy(),
+      removeAlignment: sinon.spy(),
+      isOpen: false,
+      readOnly: false
+    }, props);
+  }
+
+  it('includes an icon', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find(IconOutcomesLine)).to.have.length(1);
+  });
+  it('includes a delete button', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Button')).to.have.length(1);
+  });
+  it('does not include a delete button if readOnly', function () {
+    var props = makeProps({
+      readOnly: true
+    });
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Button')).to.have.length(0);
+  });
+  it('calls removeAlignment when delete is clicked', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+      disableLifecycleMethods: true
+    });
+    var remove = wrapper.find('Button');
+    remove.simulate('click');
+    expect(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('calls viewAlignment when the title is clicked', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(Alignment, props), {
+      disableLifecycleMethods: true
+    });
+    var link = wrapper.find('Link');
+    link.simulate('click');
+    expect(props.viewAlignment.calledOnce).to.be.true;
+  });
+  it('renders outcome title in link', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(Alignment, props));
+    var link = wrapper.find('Link');
+    expect(link.text()).to.equal('User can foo a bar');
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(Alignment, makeProps()), {
+      ignores: ['listitem']
+    });
+  });
+});

package/es/translated/vi/components/Alignment/index.js

@@ -0,0 +1,129 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@instructure/ui-buttons';
+import { Text } from '@instructure/ui-text';
+import { Link } from '@instructure/ui-link';
+import { IconTrashLine, IconOutcomesLine } from '@instructure/ui-icons';
+import { View } from '@instructure/ui-view';
+import { themeable } from '@instructure/ui-themeable';
+import OutcomeViewModal from "../OutcomeViewModal/index.js";
+import theme from "../theme.js";
+var styles = {
+  componentId: 'famwZ',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Alignment--item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.outcomes-ui__Alignment--outcome {\n  flex: 0 0 0;\n  padding: 0 0.3rem 0 0;\n}\n\n.outcomes-ui__Alignment--link {\n  flex-grow: 1;\n  width: 100%;\n}\n\n.outcomes-ui__Alignment--linkText {\n  display: table;\n  table-layout: fixed;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.outcomes-ui__Alignment--innerLinkText {\n  display: table-cell;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__Alignment--delete {\n  flex: 0 0 1rem;\n}\n";
+  },
+  'item': 'outcomes-ui__Alignment--item',
+  'outcome': 'outcomes-ui__Alignment--outcome',
+  'link': 'outcomes-ui__Alignment--link',
+  'linkText': 'outcomes-ui__Alignment--linkText',
+  'innerLinkText': 'outcomes-ui__Alignment--innerLinkText',
+  'delete': 'outcomes-ui__Alignment--delete'
+};
+var Alignment = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(Alignment, _React$Component);
+
+  var _super = _createSuper(Alignment);
+
+  function Alignment() {
+    _classCallCheck(this, Alignment);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Alignment, [{
+    key: "focus",
+    value: // eslint-disable-next-line no-undef
+    function focus() {
+      this.focusLink.focus();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          outcome = _this$props.outcome,
+          removeAlignment = _this$props.removeAlignment,
+          viewAlignment = _this$props.viewAlignment,
+          closeAlignment = _this$props.closeAlignment,
+          isOpen = _this$props.isOpen,
+          artifactTypeName = _this$props.artifactTypeName,
+          displayMasteryDescription = _this$props.displayMasteryDescription,
+          displayMasteryPercentText = _this$props.displayMasteryPercentText,
+          readOnly = _this$props.readOnly,
+          scope = _this$props.scope;
+      var removeMessage = "G\u1EE1 " + outcome.title;
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.item,
+        "data-automation": "outcomeAlignment__item"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.outcome
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "large"
+      }, /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement("span", {
+        className: styles.link
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.linkText
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.innerLinkText
+      }, /*#__PURE__*/React.createElement(View, {
+        as: "div",
+        margin: "xx-small"
+      }, /*#__PURE__*/React.createElement(Link, {
+        onClick: viewAlignment,
+        ref: function ref(link) {
+          _this.focusLink = link;
+        } // eslint-disable-line immutable/no-mutation
+
+      }, /*#__PURE__*/React.createElement(Text, {
+        weight: "bold"
+      }, outcome.title)))))), !readOnly && /*#__PURE__*/React.createElement("span", {
+        className: styles.delete,
+        "data-automation": "alignment-delete"
+      }, /*#__PURE__*/React.createElement(Button, {
+        variant: "icon",
+        onClick: removeAlignment
+      }, /*#__PURE__*/React.createElement(IconTrashLine, {
+        title: removeMessage
+      }))), /*#__PURE__*/React.createElement(OutcomeViewModal, {
+        outcome: outcome,
+        closeAlignment: closeAlignment,
+        isOpen: isOpen,
+        artifactTypeName: artifactTypeName,
+        displayMasteryDescription: displayMasteryDescription,
+        displayMasteryPercentText: displayMasteryPercentText,
+        scope: scope
+      }));
+    }
+  }]);
+
+  Alignment.displayName = "Alignment";
+  return Alignment;
+}(React.Component), _class2.propTypes = {
+  outcome: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired
+  }).isRequired,
+  removeAlignment: PropTypes.func.isRequired,
+  viewAlignment: PropTypes.func.isRequired,
+  closeAlignment: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  readOnly: PropTypes.bool.isRequired,
+  artifactTypeName: PropTypes.string,
+  displayMasteryDescription: PropTypes.bool,
+  displayMasteryPercentText: PropTypes.bool,
+  scope: PropTypes.string.isRequired
+}, _class2.defaultProps = {
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false
+}, _temp)) || _class);
+export { Alignment as default };

package/es/translated/vi/components/Alignment/index.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { object, boolean } from '@storybook/addon-knobs';
+import { basicOutcome } from "../../../.storybook/constants.js";
+import Alignment from "./index.js";
+export default {
+  title: 'Alignment'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(Alignment, {
+    outcome: object('Outcome', basicOutcome),
+    removeAlignment: function removeAlignment() {},
+    viewAlignment: function viewAlignment() {},
+    closeAlignment: function closeAlignment() {},
+    isOpen: false,
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: true,
+    displayMasteryPercentText: true,
+    readOnly: boolean('Read Only', false)
+  });
+};

package/es/translated/vi/components/Alignment/styles.css

@@ -0,0 +1,32 @@
+.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.outcome {
+  flex: 0 0 0;
+  padding: 0 0.3rem 0 0;
+}
+
+.link {
+  flex-grow: 1;
+  width: 100%;
+}
+
+.linkText {
+  display: table;
+  table-layout: fixed;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.innerLinkText {
+  display: table-cell;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.delete {
+  flex: 0 0 1rem;
+}