@truedat/core 4.44.2 → 4.44.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.44.2",
+  "version": "4.44.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -32,7 +32,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@truedat/test": "4.44.2",
+    "@truedat/test": "4.44.3",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -106,5 +106,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
+  "gitHead": "d5e72d523389c6e66d6f7168d7e3546b5d2ffdda"
 }

package/src/api/queries.js

@@ -9,3 +9,15 @@ export const DOMAINS_QUERY = gql`
     }
   }
 `;
+
+export const TEMPLATES_QUERY = gql`
+  query Templates($scope: String!) {
+    templates(scope: $scope) {
+      id
+      name
+      label
+      scope
+      content
+    }
+  }
+`;

package/src/components/DashboardMenu.js

@@ -1,6 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { DASHBOARD } from "@truedat/core/routes";
 import { getDashboardConfig } from "../selectors";
 import { useAuthorized } from "../hooks";
@@ -8,9 +9,8 @@ import Submenu from "./Submenu";
 
 const items = [{ name: "dashboard", routes: [DASHBOARD] }];
 
-export const DashboardMenu = () => {
+export const DashboardMenu = ({ dashboardConfig }) => {
   const authorized = useAuthorized("dashboards");
-  const dashboardConfig = useSelector(getDashboardConfig);
 
   return authorized && !_.isEmpty(dashboardConfig) ? (
     <Submenu items={items} icon="chart line" name="dashboard" />
@@ -19,4 +19,12 @@ export const DashboardMenu = () => {
   );
 };
 
-export default DashboardMenu;
+DashboardMenu.propTypes = {
+  dashboardConfig: PropTypes.object,
+};
+
+export const mapStateToProps = (state) => ({
+  dashboardConfig: getDashboardConfig(state),
+});
+
+export default connect(mapStateToProps)(DashboardMenu);

package/src/components/QualityMenu.js

@@ -1,28 +1,36 @@
 import _ from "lodash/fp";
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
 import { useAuthorized } from "../hooks";
 import { RULES, QUALITY_DASHBOARD, IMPLEMENTATIONS } from "../routes";
 import { getQualityDashboardConfig } from "../selectors";
 import Submenu from "./Submenu";
 
-const items = [
+export const ITEMS = [
   { name: "rules", routes: [RULES] },
   { name: "implementations", routes: [IMPLEMENTATIONS] },
-  { name: "quality_dashboard", routes: [QUALITY_DASHBOARD] }
+  { name: "quality_dashboard", routes: [QUALITY_DASHBOARD] },
 ];
 
-export const QualityMenu = () => {
+export const QualityMenu = ({ dashboardConfig }) => {
   const authorized = useAuthorized("data_quality");
-  const dashboardConfig = useSelector(getQualityDashboardConfig);
 
   const filteredItems = _.filter(
     ({ name }) => name != "quality_dashboard" || !_.isEmpty(dashboardConfig)
-  )(items);
+  )(ITEMS);
 
   return authorized ? (
     <Submenu items={filteredItems} icon="check square" name="quality" />
   ) : null;
 };
 
-export default QualityMenu;
+QualityMenu.propTypes = {
+  dashboardConfig: PropTypes.object,
+};
+
+export const mapStateToProps = (state) => ({
+  dashboardConfig: getQualityDashboardConfig(state),
+});
+
+export default connect(mapStateToProps)(QualityMenu);

package/src/components/SideMenu.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { Menu, Sidebar } from "semantic-ui-react";
 import AdminMenu from "./AdminMenu";
 import CatalogMenu from "./CatalogMenu";
@@ -15,9 +15,12 @@ import TaxonomyMenu from "./TaxonomyMenu";
 import GrantMenu from "./GrantMenu";
 import MembersMenu from "./MembersMenu";
 
-export const SideMenu = ({ children, animation = "push", inverted }) => {
-  const sidebarVisible = useSelector((state) => state.sidebarVisible);
-
+export const SideMenu = ({
+  animation = "push",
+  children,
+  inverted,
+  sidebarVisible,
+}) => {
   const width = sidebarVisible ? null : "very thin";
 
   return (
@@ -53,6 +56,9 @@ SideMenu.propTypes = {
   animation: PropTypes.string,
   children: PropTypes.node,
   inverted: PropTypes.bool,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default SideMenu;
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps)(SideMenu);

package/src/components/SidebarToggle.js

@@ -1,18 +1,18 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { connect, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { Icon, Menu } from "semantic-ui-react";
 import { hideSidebar, toggleSidebar } from "@truedat/core/routines";
 
 export const SidebarToggle = ({
+  animation = "push",
   hideSidebar,
+  sidebarVisible,
   toggleSidebar,
-  animation = "push",
 }) => {
   const location = useLocation();
-  const sidebarVisible = useSelector((state) => state.sidebarVisible);
   useEffect(() => {
     if (animation == "overlay") {
       hideSidebar();
@@ -45,6 +45,11 @@ SidebarToggle.propTypes = {
   animation: PropTypes.string,
   hideSidebar: PropTypes.func,
   toggleSidebar: PropTypes.func,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default connect(null, { hideSidebar, toggleSidebar })(SidebarToggle);
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps, { hideSidebar, toggleSidebar })(
+  SidebarToggle
+);

package/src/components/Submenu.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
-import { useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { useLocation, useHistory, Link } from "react-router-dom";
 import { Dropdown, Icon, Menu } from "semantic-ui-react";
 import { useAuthorizedItems, useActiveRoutes } from "@truedat/core/hooks";
@@ -19,14 +19,14 @@ export const MenuItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
     />
   );
 };
 
 MenuItem.propTypes = {
   name: PropTypes.string,
-  routes: PropTypes.array
+  routes: PropTypes.array,
 };
 
 export const DropdownItem = ({ name, routes }) => {
@@ -40,19 +40,18 @@ export const DropdownItem = ({ name, routes }) => {
       to={primaryRoute}
       active={active}
       content={formatMessage({ id: `sidemenu.${name}`, defaultMessage: name })}
-      onClick={e => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
     />
   );
 };
 
 DropdownItem.propTypes = {
   name: PropTypes.string,
-  routes: PropTypes.array
+  routes: PropTypes.array,
 };
 
-export const Submenu = ({ items, icon, name }) => {
+export const Submenu = ({ items, icon, name, sidebarVisible }) => {
   const [open, setOpen] = useState(false);
-  const sidebarVisible = useSelector(state => state.sidebarVisible);
   const active = useActiveRoutes(_.flatMap("routes")(items));
   const filteredItems = useAuthorizedItems(items);
   const location = useLocation();
@@ -107,7 +106,7 @@ export const Submenu = ({ items, icon, name }) => {
           trigger={trigger}
           onClick={() => history.push(primaryRoute)}
         >
-          <Dropdown.Menu onClick={e => e.stopPropagation()}>
+          <Dropdown.Menu onClick={(e) => e.stopPropagation()}>
             {_.size(filteredItems) > 1 && (
               <>
                 <Dropdown.Header
@@ -132,7 +131,10 @@ export const Submenu = ({ items, icon, name }) => {
 
 Submenu.propTypes = {
   items: PropTypes.array,
-  icon: PropTypes.string
+  icon: PropTypes.string,
+  sidebarVisible: PropTypes.bool,
 };
 
-export default Submenu;
+export const mapStateToProps = ({ sidebarVisible }) => ({ sidebarVisible });
+
+export default connect(mapStateToProps)(Submenu);

package/src/components/TemplateSelector.js

@@ -0,0 +1,89 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Form, Label } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { accentInsensitivePathOrder } from "../services/sort";
+import { TEMPLATES_QUERY } from "../api/queries";
+
+const makeOptions = _.flow(
+  _.map(({ label: text, id: value }) => ({
+    key: value,
+    value,
+    text,
+  })),
+  _.sortBy(accentInsensitivePathOrder("text"))
+);
+
+export const TemplateSelector = ({
+  clearable,
+  loading,
+  name = "template",
+  onChange,
+  required,
+  selectedValue,
+  templates,
+}) => {
+  const { formatMessage } = useIntl();
+  const options = makeOptions(templates);
+  const hidden = _.size(templates) <= 1;
+
+  const handleChange = (e, { value, ...data }) => {
+    const template = _.find({ id: value })(templates);
+    onChange(e, { ...data, value, template });
+  };
+
+  return hidden ? null : (
+    <Form.Field required={required}>
+      <label>
+        <FormattedMessage id="template.selector.label" />
+        {!selectedValue && required ? (
+          <Label pointing="left">
+            <FormattedMessage id="template.form.validation.empty_required" />
+          </Label>
+        ) : null}
+      </label>
+      <Form.Dropdown
+        clearable={clearable}
+        loading={loading}
+        name={name}
+        onChange={handleChange}
+        options={options}
+        placeholder={formatMessage({ id: "template.selector.placeholder" })}
+        search
+        selection
+        value={_.toString(selectedValue)}
+      />
+    </Form.Field>
+  );
+};
+
+TemplateSelector.propTypes = {
+  clearable: PropTypes.bool,
+  loading: PropTypes.bool,
+  onChange: PropTypes.func,
+  name: PropTypes.string,
+  required: PropTypes.bool,
+  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  templates: PropTypes.array,
+};
+
+export const TemplateSelectorLoader = ({ scope, onLoad, ...props }) => {
+  const { loading, error, data } = useQuery(TEMPLATES_QUERY, {
+    variables: { scope },
+    onCompleted: onLoad,
+  });
+  if (error) return null;
+  const templates = data?.templates || [];
+  return (
+    <TemplateSelector loading={loading} templates={templates} {...props} />
+  );
+};
+
+TemplateSelectorLoader.propTypes = {
+  scope: PropTypes.string.isRequired,
+  onLoad: PropTypes.func,
+};
+
+export default TemplateSelectorLoader;

package/src/components/__tests__/DashboardMenu.spec.js

@@ -1,15 +1,14 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { DashboardMenu } from "..";
+import { render } from "@truedat/test/render";
+import DashboardMenu from "../DashboardMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
 }));
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     systemConfiguration: [
       {
         external_id: "config_metabase",
@@ -18,16 +17,16 @@ jest.mock("react-redux", () => ({
           dashboard_id: 2,
           quality_dashboard_id: 8,
           metabase_url: "http://metabase.com",
-          secret_key: "###"
-        }
-      }
-    ]
-  }))
-}));
+          secret_key: "###",
+        },
+      },
+    ],
+  },
+};
 
 describe("<DashboardMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<DashboardMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DashboardMenu />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/QualityMenu.spec.js

@@ -1,15 +1,15 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { QualityMenu } from "../QualityMenu";
+import { render } from "@truedat/test/render";
+import QualityMenu from "../QualityMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({
+const renderOpts = {
+  state: {
     systemConfiguration: [
       {
         external_id: "config_metabase",
@@ -18,16 +18,16 @@ jest.mock("react-redux", () => ({
           dashboard_id: 2,
           quality_dashboard_id: 8,
           metabase_url: "http://metabase.com",
-          secret_key: "###"
-        }
-      }
-    ]
-  }))
-}));
+          secret_key: "###",
+        },
+      },
+    ],
+  },
+};
 
 describe("<QualityMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<QualityMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<QualityMenu />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/SideMenu.spec.js

@@ -1,24 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { SideMenu } from "../SideMenu";
+import { render } from "@truedat/test/render";
+import SideMenu from "../SideMenu";
 
-jest.mock("@fluentui/react-component-event-listener", () => ({
-  documentRef: null,
-  windowRef: null
-}));
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({ sidebarVisible: true }))
-}));
+const renderOpts = { state: { sidebarVisible: true } };
 
 describe("<SideMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(
+    const { container } = render(
       <SideMenu>
         <p>Hello</p>
-      </SideMenu>
+      </SideMenu>,
+      renderOpts
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/Submenu.spec.js

@@ -1,29 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Submenu } from "..";
+import { render } from "@truedat/test/render";
+import Submenu from "../Submenu";
 
-const mockHistory = {
-  push: jest.fn()
-};
-
-jest.mock("react-redux", () => ({
-  ...jest.requireActual("react-redux"),
-  useSelector: jest.fn(() => ({ sidebarVisible: true }))
-}));
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useLocation: () => ({ pathname: "/bar" }),
-  useHistory: () => mockHistory
-}));
+const renderOpts = { state: { sidebarVisible: true }, routes: ["/bar"] };
 
 describe("<Submenu />", () => {
   it("matches the latest snapshot", () => {
     const items = [
       { name: "foo", routes: ["/foo", "/bar"] },
-      { name: "baz", routes: ["/baz"] }
+      { name: "baz", routes: ["/baz"] },
     ];
-    const wrapper = shallow(<Submenu items={items} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = { name: "foo", items };
+    const { container } = render(<Submenu {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/TemplateSelector.spec.js

@@ -0,0 +1,51 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import TemplateSelector from "../TemplateSelector";
+
+const scope = "foo";
+const templates = [
+  {
+    id: "1",
+    name: "template1",
+    label: "template1",
+    content: [{ name: "g1", fields: [{ name: "field1", label: "field1" }] }],
+    scope,
+  },
+  {
+    id: "2",
+    name: "template2",
+    label: "template2",
+    content: {},
+    scope,
+  },
+];
+const templatesMock = {
+  request: { query: TEMPLATES_QUERY, variables: { scope } },
+  result: { data: { templates } },
+};
+
+const renderOpts = {
+  mocks: [templatesMock],
+};
+
+describe("<TemplateSelector />", () => {
+  const onChange = jest.fn();
+  const onLoad = jest.fn();
+  const props = { onChange, onLoad, scope: "foo" };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <Suspense fallback="loading...">
+        <TemplateSelector {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    await waitFor(() => {
+      expect(queryByText(/template1/i)).toBeInTheDocument();
+    });
+    expect(container).toMatchSnapshot();
+    expect(onLoad.mock.calls.length).toBe(1);
+  });
+});

package/src/components/__tests__/__snapshots__/AdminMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AdminMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="setting"
   items={
     Array [

package/src/components/__tests__/__snapshots__/DashboardMenu.spec.js.snap

@@ -1,18 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DashboardMenu /> matches the latest snapshot 1`] = `
-<Submenu
-  icon="chart line"
-  items={
-    Array [
-      Object {
-        "name": "dashboard",
-        "routes": Array [
-          "/dashboard",
-        ],
-      },
-    ]
-  }
-  name="dashboard"
-/>
-`;
+exports[`<DashboardMenu /> matches the latest snapshot 1`] = `<div />`;

package/src/components/__tests__/__snapshots__/GlossaryMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GlossaryMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="tags"
   items={
     Array [

package/src/components/__tests__/__snapshots__/GrantMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GrantMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="key"
   items={
     Array [

package/src/components/__tests__/__snapshots__/IngestMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IngestMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="hdd outline"
   items={
     Array [

package/src/components/__tests__/__snapshots__/LineageMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LineageMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="shuffle"
   items={
     Array [

package/src/components/__tests__/__snapshots__/MembersMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MembersMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="users"
   items={
     Array [

package/src/components/__tests__/__snapshots__/QualityMenu.spec.js.snap

@@ -1,30 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<QualityMenu /> matches the latest snapshot 1`] = `
-<Submenu
-  icon="check square"
-  items={
-    Array [
-      Object {
-        "name": "rules",
-        "routes": Array [
-          "/rules",
-        ],
-      },
-      Object {
-        "name": "implementations",
-        "routes": Array [
-          "/implementations",
-        ],
-      },
-      Object {
-        "name": "quality_dashboard",
-        "routes": Array [
-          "/quality_dashboard",
-        ],
-      },
-    ]
-  }
-  name="quality"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/rules"
+      >
+        <i
+          aria-hidden="true"
+          class="check square large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <div
+          class="header selectable"
+        >
+          Data Quality
+        </div>
+        <div
+          class="divider"
+        />
+        <a
+          aria-checked="true"
+          class="active item"
+          href="/rules"
+          name="rules"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Quality Rules
+          </span>
+        </a>
+        <a
+          aria-checked="true"
+          class="active item"
+          href="/implementations"
+          name="implementations"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Implementations
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/SearchMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SearchMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="search"
   items={
     Array [

package/src/components/__tests__/__snapshots__/SideMenu.spec.js.snap

@@ -1,38 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SideMenu /> matches the latest snapshot 1`] = `
-<SidebarPushable>
-  <Sidebar
-    animation="push"
-    as={[Function]}
-    direction="left"
-    icon={false}
-    target={null}
-    vertical={true}
-    visible={true}
-    width={null}
+<div>
+  <div
+    class="pushable"
   >
-    <SearchMenu />
-    <GlossaryMenu />
-    <CatalogMenu />
-    <GrantMenu />
-    <QualityMenu />
-    <LineageMenu />
-    <IngestMenu />
-    <DashboardMenu />
-    <TaxonomyMenu />
-    <MembersMenu />
-    <AdminMenu />
-    <Connect(SidebarToggle)
-      animation="push"
-    />
-  </Sidebar>
-  <SidebarPusher
-    content={
+    <div
+      class="ui vertical ui push left visible sidebar menu"
+    >
+      <div>
+        <div
+          aria-expanded="false"
+          class="ui item dropdown"
+          role="listbox"
+          tabindex="0"
+        >
+          <a
+            class="ui"
+            href="/search"
+          >
+            <i
+              aria-hidden="true"
+              class="search large icon"
+            />
+            Search
+          </a>
+          <div
+            class="menu transition"
+          >
+            <a
+              aria-checked="false"
+              class="item"
+              href="/search"
+              name="search"
+              role="option"
+            >
+              <span
+                class="text"
+              >
+                Search
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <a
+        class="item bottom"
+      >
+        <i
+          aria-hidden="true"
+          class="angle double left large icon"
+        />
+        Collapse sidebar
+      </a>
+    </div>
+    <div
+      class="pusher"
+    >
       <p>
         Hello
       </p>
-    }
-  />
-</SidebarPushable>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/Submenu.spec.js.snap

@@ -1,43 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Submenu /> matches the latest snapshot 1`] = `
-<MenuItem
-  active={true}
-  as="div"
-  className="selectable"
-  onClick={[Function]}
->
-  <Link
-    to="/foo"
+<div>
+  <div
+    class="active item selectable"
   >
-    <Icon
-      as="i"
-      size="large"
-    />
-    <MemoizedFormattedMessage
-      id="sidemenu.undefined"
-    />
-  </Link>
-  <MenuMenu>
-    <MenuItem
-      key="0"
-      name="foo"
-      routes={
-        Array [
-          "/foo",
-          "/bar",
-        ]
-      }
-    />
-    <MenuItem
-      key="1"
-      name="baz"
-      routes={
-        Array [
-          "/baz",
-        ]
-      }
-    />
-  </MenuMenu>
-</MenuItem>
+    <a
+      href="/foo"
+    >
+      <i
+        aria-hidden="true"
+        class="large icon"
+      />
+      foo
+    </a>
+    <div
+      class="menu"
+    >
+      <a
+        class="active link item"
+        href="/foo"
+      >
+        foo
+      </a>
+      <a
+        class="link item"
+        href="/baz"
+      >
+        baz
+      </a>
+    </div>
+  </div>
+</div>
 `;

package/src/components/__tests__/__snapshots__/TaxonomyMenu.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TaxonomyMenu /> matches the latest snapshot 1`] = `
-<Submenu
+<Connect(Submenu)
   icon="sitemap"
   items={
     Array [

package/src/components/__tests__/__snapshots__/TemplateSelector.spec.js.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TemplateSelector /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="field"
+  >
+    <label>
+      Template
+    </label>
+    <div
+      class="field"
+    >
+      <div
+        aria-busy="false"
+        aria-expanded="false"
+        class="ui search selection dropdown"
+        name="template"
+        role="combobox"
+      >
+        <input
+          aria-autocomplete="list"
+          autocomplete="off"
+          class="search"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+        <div
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider default text"
+          role="alert"
+        >
+          Select a template...
+        </div>
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+          role="listbox"
+        >
+          <div
+            aria-checked="false"
+            aria-selected="true"
+            class="selected item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              template1
+            </span>
+          </div>
+          <div
+            aria-checked="false"
+            aria-selected="false"
+            class="item"
+            role="option"
+            style="pointer-events: all;"
+          >
+            <span
+              class="text"
+            >
+              template2
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -37,6 +37,7 @@ import SidebarToggle from "./SidebarToggle";
 import SideMenu from "./SideMenu";
 import Submenu from "./Submenu";
 import TaxonomyMenu from "./TaxonomyMenu";
+import TemplateSelector from "./TemplateSelector";
 import TreeSelector from "./TreeSelector";
 import Unauthorized from "./Unauthorized";
 import UploadModal from "./UploadModal";
@@ -81,6 +82,7 @@ export {
   SideMenu,
   Submenu,
   TaxonomyMenu,
+  TemplateSelector,
   TreeSelector,
   Unauthorized,
   UploadModal,

package/src/messages/en.js

@@ -5,7 +5,10 @@ export default {
   "actions.create": "Create",
   "actions.delete": "Delete",
   "actions.edit": "Edit",
+  "actions.next": "Next",
+  "actions.prev": "Previous",
   "actions.save": "Save",
+  "actions.share": "Share",
   "actions.update": "Update",
   "alert.createComment.failed.header": "Error creating comment",
   "alert.fetchComments.failed.header": "Error fetching comments list",

package/src/messages/es.js

@@ -5,7 +5,10 @@ export default {
   "actions.create": "Crear",
   "actions.delete": "Eliminar",
   "actions.edit": "Editar",
+  "actions.next": "Siguiente",
+  "actions.prev": "Anterior",
   "actions.save": "Guardar",
+  "actions.share": "Compartir",
   "actions.update": "Actualizar",
   "alert.createComment.failed.header": "Error creando comentario",
   "alert.fetchComments.failed.header": "Error cargando la lista de comentarios",