@instructure/outcomes-ui 2.1.2 → 2.1.3

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

@@ -0,0 +1,140 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+import checkA11y from "../../../test/checkA11y.js";
+import OutcomeTray from "../index.js";
+describe('OutcomeTray', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      searchText: '',
+      updateSearchText: sinon.spy(),
+      setSearchLoading: sinon.spy(),
+      setSearchEntries: sinon.spy(),
+      isSearchLoading: false,
+      searchEntries: [],
+      getOutcome: sinon.spy(),
+      getOutcomeSummary: sinon.spy(),
+      setActiveCollection: sinon.spy(),
+      toggleExpandedIds: sinon.spy(),
+      setFocusedOutcome: sinon.spy(),
+      isOutcomeSelected: sinon.spy(),
+      isOutcomeGroup: sinon.spy(),
+      selectOutcomeIds: sinon.spy(),
+      deselectOutcomeIds: sinon.spy(),
+      screenreaderNotification: sinon.spy(),
+      onUpdate: sinon.spy(),
+      searchTotal: 0,
+      searchPage: 0,
+      getOutcomesList: sinon.spy(),
+      outcomes: [],
+      isOpen: true,
+      isFetching: false,
+      scope: 'scopeForTest',
+      listPage: 0,
+      listTotal: 0,
+      resetOutcomePicker: sinon.spy(),
+      closeOutcomePicker: sinon.spy(),
+      setInitialSelectedOutcomes: sinon.spy(),
+      shouldModifyArtifact: false
+    }, props);
+  }
+
+  var wrapper;
+  afterEach(function () {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = null;
+    }
+  });
+  it('renders a tray', function () {
+    wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTray, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tray')).to.have.length(1);
+  });
+  it('renders cancel and alignment button', function () {
+    wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTray, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Button')).to.have.length(2);
+  });
+  it('renders tray closed by when state is closed', function () {
+    var props = makeProps({
+      isOpen: false
+    });
+    wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTray, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tray').prop('open')).to.be.false;
+  });
+  it('renders tray open when state not closed', function () {
+    wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTray, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Tray').prop('open')).to.be.true;
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(OutcomeTray, makeProps()));
+  });
+  it('renders icon and list if no search text', function () {
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, makeProps()));
+    expect(wrapper.find('IconSearchLine')).to.have.length(1);
+    expect(wrapper.find('OutcomeList')).to.have.length(1);
+  });
+  it('closes when close button is clicked', function () {
+    var props = makeProps();
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, props));
+    wrapper.find('CloseButton').prop('onClick')();
+    expect(props.closeOutcomePicker).to.be.calledOnce;
+  });
+  it('shows only search results when searchText is present', function () {
+    var props = makeProps({
+      searchText: 'foo'
+    });
+    wrapper = shallow( /*#__PURE__*/React.createElement(OutcomeTray, props), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('SearchResults')).to.have.length(1);
+    expect(wrapper.find('OutcomeList')).to.have.length(0);
+  });
+  it('updates search text when new search is entered', function () {
+    var props = makeProps({
+      searchText: 'out'
+    });
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, props));
+    wrapper.find('TextInput').prop('onChange')(null, 'text');
+    expect(props.updateSearchText.getCall(0).args).to.deep.equal(['text']);
+  });
+  it('initiates search on open', function () {
+    var props = makeProps({
+      searchText: 'foo',
+      isOpen: false
+    });
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, props));
+    wrapper.setProps({
+      isOpen: true
+    });
+    expect(props.updateSearchText).to.be.called;
+  });
+  it('aligns when confirm alignment button is clicked', function () {
+    var props = makeProps({
+      saveOutcomePickerAlignments: sinon.stub().resolves()
+    });
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, props));
+    wrapper.find('Button').last().prop('onClick')();
+    expect(props.saveOutcomePickerAlignments).to.be.called;
+    expect(props.saveOutcomePickerAlignments).to.be.calledWith(props.onUpdate, false);
+  });
+  it('syncs selected and aligned outcomes on open', function () {
+    var props = makeProps({
+      isOpen: false
+    });
+    wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTray, props));
+    wrapper.setProps({
+      isOpen: true
+    });
+    expect(props.setInitialSelectedOutcomes).to.be.called;
+  });
+});

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

@@ -0,0 +1,272 @@
+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, CloseButton } from '@instructure/ui-buttons';
+import { Heading } from '@instructure/ui-heading';
+import { Flex } from '@instructure/ui-flex';
+import { Modal } from '@instructure/ui-modal';
+import { themeable } from '@instructure/ui-themeable';
+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 SearchInput from "../SearchInput/index.js";
+import SearchResults from "../SearchResults/index.js";
+import theme from "../theme.js";
+var styles = {
+  componentId: 'fPfsV',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomeTray--outcomeTray {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.outcomes-ui__OutcomeTray--trayContainer {\n  padding: 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.outcomes-ui__OutcomeTray--footerContainer {\n  bottom: 0;\n  position: sticky;\n}\n";
+  },
+  'outcomeTray': 'outcomes-ui__OutcomeTray--outcomeTray',
+  'trayContainer': 'outcomes-ui__OutcomeTray--trayContainer',
+  'footerContainer': 'outcomes-ui__OutcomeTray--footerContainer'
+};
+import { outcomeShape } from "../../store/shapes.js";
+var ModalFooter = Modal.Footer;
+var OutcomeTray = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomeTray, _React$Component);
+
+  var _super = _createSuper(OutcomeTray);
+
+  function OutcomeTray() {
+    _classCallCheck(this, OutcomeTray);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomeTray, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+          getOutcomesList = _this$props.getOutcomesList,
+          isOpen = _this$props.isOpen,
+          updateSearchText = _this$props.updateSearchText,
+          setInitialSelectedOutcomes = _this$props.setInitialSelectedOutcomes;
+
+      if (!prevProps.isOpen && isOpen) {
+        getOutcomesList({
+          page: 1
+        });
+        updateSearchText('');
+        setInitialSelectedOutcomes();
+      }
+    }
+  }, {
+    key: "renderList",
+    value: function renderList() {
+      var _this$props2 = this.props,
+          outcomes = _this$props2.outcomes,
+          isOutcomeSelected = _this$props2.isOutcomeSelected,
+          selectOutcomeIds = _this$props2.selectOutcomeIds,
+          deselectOutcomeIds = _this$props2.deselectOutcomeIds,
+          isFetching = _this$props2.isFetching,
+          listPage = _this$props2.listPage,
+          listTotal = _this$props2.listTotal,
+          getOutcomesList = _this$props2.getOutcomesList;
+      return /*#__PURE__*/React.createElement(View, {
+        display: "block",
+        padding: "small none none none"
+      }, /*#__PURE__*/React.createElement(OutcomeList, {
+        outcomes: outcomes,
+        isOutcomeSelected: isOutcomeSelected,
+        selectOutcomeIds: selectOutcomeIds,
+        deselectOutcomeIds: deselectOutcomeIds,
+        isLoading: isFetching,
+        listPage: listPage,
+        listTotal: listTotal,
+        getOutcomesList: getOutcomesList
+      }));
+    }
+  }, {
+    key: "renderSearchMode",
+    value: function renderSearchMode() {
+      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,
+        setSearchEntries: setSearchEntries,
+        searchText: searchText,
+        updateSearchPage: updateSearchPage,
+        isSearchLoading: isSearchLoading,
+        isOutcomeSelected: isOutcomeSelected,
+        searchEntries: searchEntries,
+        searchPage: searchPage,
+        searchTotal: searchTotal,
+        selectOutcomeIds: selectOutcomeIds,
+        deselectOutcomeIds: deselectOutcomeIds
+      });
+    }
+  }, {
+    key: "renderBody",
+    value: function renderBody() {
+      var _this$props4 = this.props,
+          searchText = _this$props4.searchText,
+          isFetching = _this$props4.isFetching;
+
+      if (isFetching) {
+        return /*#__PURE__*/React.createElement(Flex, {
+          justifyItems: "center"
+        }, /*#__PURE__*/React.createElement(Flex.Item, {
+          padding: "small"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          renderTitle: "\u0110ang t\u1EA3i"
+        })));
+      }
+
+      return searchText ? this.renderSearchMode() : this.renderList();
+    }
+  }, {
+    key: "handleSubmit",
+    value: function handleSubmit() {
+      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();
+      });
+    }
+  }, {
+    key: "renderActions",
+    value: function renderActions() {
+      var _this = this;
+
+      var closeOutcomePicker = this.props.closeOutcomePicker;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.footerContainer
+      }, /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        margin: "xxx-small",
+        variant: "default",
+        onClick: closeOutcomePicker
+      }, "H\u1EE7y"), /*#__PURE__*/React.createElement(Button, {
+        margin: "xxx-small",
+        variant: "primary",
+        onClick: function onClick() {
+          return _this.handleSubmit();
+        }
+      }, "X\xE1c Nh\u1EADn C\u0103n Ch\u1EC9nh")));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      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
+      };
+      return /*#__PURE__*/React.createElement(Tray, Object.assign({
+        "data-automation": "outcomeTrayPicker__view",
+        liveRegion: liveRegion,
+        mountNode: mountNode,
+        open: isOpen,
+        onExiting: resetOutcomePicker,
+        label: "C\u0103n Ch\u1EC9nh K\u1EBFt Qu\u1EA3"
+      }, trayProps), /*#__PURE__*/React.createElement("div", {
+        className: styles.outcomeTray
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.trayContainer
+      }, /*#__PURE__*/React.createElement(Flex, {
+        margin: "none none small none"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, /*#__PURE__*/React.createElement(Heading, {
+        level: "h3",
+        margin: "0 0 x-small"
+      }, "C\u0103n Ch\u1EC9nh K\u1EBFt Qu\u1EA3")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+        onClick: closeOutcomePicker
+      }, "H\u1EE7y"))), /*#__PURE__*/React.createElement(SearchInput, {
+        onChange: function onChange(_, value) {
+          return updateSearchText(value);
+        },
+        onClear: function onClear() {
+          return updateSearchText('');
+        },
+        searchText: searchText
+      }), this.renderBody()), this.renderActions()));
+    }
+  }]);
+
+  OutcomeTray.displayName = "OutcomeTray";
+  return OutcomeTray;
+}(React.Component), _class2.propTypes = {
+  searchText: PropTypes.string.isRequired,
+  updateSearchText: PropTypes.func.isRequired,
+  setSearchLoading: PropTypes.func.isRequired,
+  setSearchEntries: PropTypes.func.isRequired,
+  isSearchLoading: PropTypes.bool.isRequired,
+  searchEntries: PropTypes.array.isRequired,
+  setFocusedOutcome: PropTypes.func.isRequired,
+  isOutcomeSelected: PropTypes.func.isRequired,
+  selectOutcomeIds: PropTypes.func.isRequired,
+  deselectOutcomeIds: PropTypes.func.isRequired,
+  saveOutcomePickerAlignments: PropTypes.func.isRequired,
+  screenreaderNotification: PropTypes.func,
+  liveRegion: Tray.propTypes.liveRegion,
+  mountNode: Tray.propTypes.mountNode,
+  size: PropTypes.string,
+  placement: PropTypes.string,
+  searchTotal: PropTypes.number,
+  searchPage: PropTypes.number.isRequired,
+  outcomes: PropTypes.array.isRequired,
+  getOutcomesList: PropTypes.func.isRequired,
+  updateSearchPage: PropTypes.func.isRequired,
+  listPage: PropTypes.number.isRequired,
+  listTotal: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  closeOutcomePicker: PropTypes.func.isRequired,
+  resetOutcomePicker: PropTypes.func.isRequired,
+  setInitialSelectedOutcomes: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func,
+  focusedOutcome: outcomeShape,
+  artifactTypeName: PropTypes.string,
+  displayMasteryDescription: PropTypes.bool,
+  displayMasteryPercentText: PropTypes.bool,
+  shouldModifyArtifact: PropTypes.bool,
+  scope: PropTypes.string.isRequired
+}, _class2.defaultProps = {
+  screenreaderNotification: null,
+  liveRegion: null,
+  mountNode: null,
+  size: 'regular',
+  placement: 'end',
+  onUpdate: null,
+  focusedOutcome: null,
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false,
+  shouldModifyArtifact: false,
+  searchTotal: null,
+  listTotal: null
+}, _temp)) || _class);
+export { OutcomeTray as default };

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { number, boolean, text, object } from '@storybook/addon-knobs';
+import { defaultOutcomes } from "../../../.storybook/constants.js";
+import OutcomeTray from "./index.js";
+export default {
+  title: 'OutcomeTray'
+};
+var defaultProps = {
+  updateSearchText: function updateSearchText() {},
+  setSearchLoading: function setSearchLoading() {},
+  setSearchEntries: function setSearchEntries() {},
+  isOpen: true,
+  isSearchLoading: false,
+  setActiveCollection: function setActiveCollection() {},
+  toggleExpandedIds: function toggleExpandedIds() {},
+  setFocusedOutcome: function setFocusedOutcome() {},
+  isOutcomeSelected: function isOutcomeSelected() {},
+  isOutcomeGroup: function isOutcomeGroup() {},
+  selectOutcomeIds: function selectOutcomeIds() {},
+  deselectOutcomeIds: function deselectOutcomeIds() {},
+  saveOutcomePickerAlignments: function saveOutcomePickerAlignments() {
+    return Promise.resolve();
+  },
+  getOutcomesList: function getOutcomesList() {},
+  updateSearchPage: function updateSearchPage() {},
+  closeOutcomePicker: function closeOutcomePicker() {},
+  resetOutcomePicker: function resetOutcomePicker() {}
+};
+export var paginatedNoSearch = function paginatedNoSearch() {
+  return /*#__PURE__*/React.createElement(OutcomeTray, Object.assign({}, defaultProps, {
+    searchText: "",
+    outcomes: object('Outcomes', defaultOutcomes()),
+    listPage: number('Page Index', 1),
+    listTotal: number('Total Outcomes', 987),
+    isFetching: boolean('Is Loading', false),
+    searchEntries: [],
+    searchTotal: 0,
+    searchPage: 1
+  }));
+};
+export var searchResults = function searchResults() {
+  return /*#__PURE__*/React.createElement(OutcomeTray, Object.assign({}, defaultProps, {
+    searchText: text('Search Text', 'Grade'),
+    outcomes: {},
+    listPage: number('Page Index', 1),
+    listTotal: number('Total Outcomes', 987),
+    isFetching: boolean('Is Loading', false),
+    searchEntries: object('Search Results', defaultOutcomes()),
+    searchTotal: number('Total Search Results', 987),
+    searchPage: number('Search Page Index', 1)
+  }));
+};

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

@@ -0,0 +1,23 @@
+.outcomeTray {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.trayContainer {
+  padding: 1rem;
+  flex-grow: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.footerContainer {
+  bottom: 0;
+  position: sticky;
+}

package/es/translated/vi/components/OutcomeTree/TreeBrowser/__tests__/index.test.js

@@ -0,0 +1,144 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import TreeBrowser from "../index.js";
+import checkA11y from "../../../../test/checkA11y.js";
+describe('TreeBrowser', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      collections: {
+        1: {
+          id: '1',
+          name: 'Collectiony Collectionface',
+          collections: ['3']
+        },
+        2: {
+          id: '2',
+          name: 'Collection 2 Electric Boogaloo'
+        },
+        3: {
+          id: '3',
+          name: 'Collection Trifection'
+        }
+      },
+      expandedIds: [],
+      toggleExpandedIds: sinon.spy(),
+      items: {},
+      rootOutcomeIds: [],
+      setActiveCollection: sinon.spy()
+    }, props);
+  }
+
+  function collectionsWithRoot(rootIds) {
+    var collections = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
+    var cols = collections || rootIds;
+    return Object.assign(makeProps().collections, {
+      root: {
+        id: 'root',
+        name: 'Home',
+        collections: cols,
+        child_ids: rootIds
+      }
+    });
+  }
+
+  it('renders a TreeBrowser component', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps()));
+    expect(wrapper.find('TreeBrowser')).to.have.length(1);
+  });
+  it('does not require a set of rootOutcomeIds', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps()));
+    expect(wrapper.find('TreeButton')).to.have.length(3);
+  });
+  it('does not render a Home directory if only existing root is a collection', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
+      rootOutcomeIds: [1],
+      collections: collectionsWithRoot([1])
+    })));
+    expect(wrapper.find('TreeButton')).to.have.length(2);
+    expect(wrapper.find('TreeButton').at(0).text()).to.include('Collectiony Collectionface');
+  });
+  it('renders a Home directory if only existing root is not a collection', function () {
+    var rootIds = ['4'];
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
+      rootOutcomeIds: rootIds,
+      collections: collectionsWithRoot(rootIds, [])
+    })));
+    expect(wrapper.find('TreeButton')).to.have.length(1);
+    expect(wrapper.find('TreeButton').at(0).text()).to.include('Home');
+  });
+  it('does not render Home level if all roots are collections', function () {
+    var rootIds = ['1', '2'];
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
+      rootOutcomeIds: rootIds,
+      collections: collectionsWithRoot(rootIds)
+    })));
+    expect(wrapper.find('TreeButton')).to.have.length(2);
+  });
+  it('passes children of root collections', function () {
+    var rootIds = ['1', '2'];
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
+      rootOutcomeIds: rootIds,
+      collections: collectionsWithRoot(rootIds),
+      expandedIds: ['1']
+    })));
+    expect(wrapper.find('TreeButton')).to.have.length(3);
+  });
+  it('can expand non-root collections', function () {
+    var collections = {
+      1: {
+        id: '1',
+        name: 'Collectiony Collectionface',
+        collections: ['2']
+      },
+      2: {
+        id: '2',
+        name: 'Collection 2 Electric Boogaloo',
+        collections: ['3']
+      },
+      3: {
+        id: '3',
+        name: 'Collection 2 Electric Boogaloo',
+        collections: ['4']
+      },
+      4: {
+        id: '4',
+        name: 'Collection Trifection'
+      },
+      root: {
+        id: 'root',
+        name: 'Home',
+        collections: ['1'],
+        child_ids: ['1']
+      }
+    };
+    var rootIds = ['1'];
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, makeProps({
+      rootOutcomeIds: rootIds,
+      collections: collections,
+      expandedIds: ['2', '3']
+    })));
+    expect(wrapper.find('TreeButton')).to.have.length(4);
+  });
+  it('does not render if collections are undefined', function () {
+    var props = makeProps({
+      collections: void 0
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, props));
+    expect(wrapper.find('TreeBrowser')).to.have.length(0);
+  });
+  it('sets the active collection and when clicked', function () {
+    var setActiveCollection = sinon.stub();
+    var props = makeProps({
+      setActiveCollection: setActiveCollection
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(TreeBrowser, props));
+    wrapper.find('TreeButton').first().simulate('click');
+    expect(props.setActiveCollection.calledWith()).to.equal(true);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(TreeBrowser, makeProps()));
+  });
+});

package/es/translated/vi/components/OutcomeTree/TreeBrowser/index.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View } from '@instructure/ui-view';
+import { TreeBrowser } from '@instructure/ui-tree-browser';
+
+var OutcomeBrowser = function OutcomeBrowser(props) {
+  if (!props.collections) {
+    return null;
+  }
+
+  var collections = props.collections,
+      setActiveCollection = props.setActiveCollection,
+      rootOutcomeIds = props.rootOutcomeIds,
+      expandedIds = props.expandedIds,
+      toggleExpandedIds = props.toggleExpandedIds;
+
+  var handleSelect = function handleSelect(id) {
+    setActiveCollection(id);
+    toggleExpandedIds({
+      id: id
+    });
+  };
+
+  var defaultExpanded = rootOutcomeIds.length === 1 ? rootOutcomeIds : [];
+
+  var renderRootLevel = function renderRootLevel() {
+    var showRoot = false;
+    rootOutcomeIds.forEach(function (id) {
+      if (!collections[id]) {
+        showRoot = true;
+      }
+    });
+    return showRoot;
+  };
+
+  return /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    margin: "xx-small"
+  }, /*#__PURE__*/React.createElement(TreeBrowser, {
+    collections: collections,
+    rootId: rootOutcomeIds.length > 0 ? 'root' : void 0,
+    showRootCollection: renderRootLevel(),
+    items: {},
+    onCollectionClick: handleSelect,
+    expanded: [].concat(_toConsumableArray(defaultExpanded), _toConsumableArray(expandedIds))
+  }));
+}; // eslint-disable-next-line immutable/no-mutation
+
+
+OutcomeBrowser.propTypes = {
+  collections: PropTypes.object.isRequired,
+  setActiveCollection: PropTypes.func.isRequired,
+  rootOutcomeIds: PropTypes.array.isRequired,
+  expandedIds: PropTypes.array.isRequired,
+  toggleExpandedIds: PropTypes.func.isRequired
+};
+export default OutcomeBrowser;