@truedat/core 6.14.0 → 6.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -36,7 +36,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.8.6",
+    "@truedat/test": "6.14.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "c93d6ae539fb9ecb3d43b63db5199726246d2024"
+  "gitHead": "13f8e92c333acf539f9978ea94db03174130cfb0"
 }

package/src/components/AdminMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   CONFIGURATIONS,
@@ -28,9 +29,14 @@ const items = [
 ];
 
 export const AdminMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconAdmin = formatMessage({
+    id: "sidemenu.admin.icon",
+    defaultMessage: "setting",
+  });
   const authorized = useAuthorized();
   return authorized ? (
-    <Submenu items={items} icon="setting" name="admin" />
+    <Submenu items={items} icon={iconAdmin} name="admin" />
   ) : null;
 };
 

package/src/components/AiMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   ACTIONS,
@@ -18,13 +19,13 @@ export const ITEMS = [
 ];
 
 export default function AiMenu() {
+  const { formatMessage } = useIntl();
+  const iconAi = formatMessage({
+    id: "sidemenu.ai.icon",
+    defaultMessage: "lightbulb outline",
+  });
   const authorized = useAuthorized("manage_ai");
-
   return authorized ? (
-    <Submenu
-      items={ITEMS}
-      icon="lightbulb outline"
-      name="artificial_intelligence"
-    />
+    <Submenu items={ITEMS} icon={iconAi} name="artificial_intelligence" />
   ) : null;
 }

package/src/components/CatalogMenu.js

@@ -53,6 +53,10 @@ export const CatalogMenu = ({ catalogViewConfigs }) => {
     "data_dictionary_structure_notes"
   );
   const { formatMessage } = useIntl();
+  const iconCatalog = formatMessage({
+    id: "sidemenu.catalog.icon",
+    defaultMessage: "block layout",
+  });
   const submenuItems = [
     { name: "structures", routes: [STRUCTURES, SYSTEMS] },
     ...catalogViewConfigItems(formatMessage)(catalogViewConfigs),
@@ -63,7 +67,7 @@ export const CatalogMenu = ({ catalogViewConfigs }) => {
 
   const authorized = useAuthorized("data_dictionary");
   return authorized ? (
-    <Submenu items={submenuItems} icon="block layout" name="catalog" />
+    <Submenu items={submenuItems} icon={iconCatalog} name="catalog" />
   ) : null;
 };
 

package/src/components/DashboardMenu.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { useIntl } from "react-intl";
 import { DASHBOARD } from "@truedat/core/routes";
 import { getDashboardConfig } from "../selectors";
 import { useAuthorized } from "../hooks";
@@ -10,10 +11,15 @@ import Submenu from "./Submenu";
 const items = [{ name: "dashboard", routes: [DASHBOARD] }];
 
 export const DashboardMenu = ({ dashboardConfig }) => {
+  const { formatMessage } = useIntl();
+  const iconDashboards = formatMessage({
+    id: "sidemenu.dashboards.icon",
+    defaultMessage: "chart line",
+  });
   const authorized = useAuthorized("dashboards");
 
   return authorized && !_.isEmpty(dashboardConfig) ? (
-    <Submenu items={items} icon="chart line" name="dashboard" />
+    <Submenu items={items} icon={iconDashboards} name="dashboard" />
   ) : (
     false
   );

package/src/components/GlossaryMenu.js

@@ -5,6 +5,7 @@ import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { makeGetSubscopes } from "@truedat/df/selectors/subscopedTemplates";
 import { linkTo } from "@truedat/core/routes";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   CONCEPTS,
@@ -54,6 +55,11 @@ const subscopeItems = _.flow(
 );
 
 export const GlossaryMenu = ({ bgSubscopes }) => {
+  const { formatMessage } = useIntl();
+  const iconGlossary = formatMessage({
+    id: "sidemenu.glossary.icon",
+    defaultMessage: "tags",
+  });
   const authorized = useAuthorized([
     "business_glossary_view",
     "business_glossary_management",
@@ -68,7 +74,7 @@ export const GlossaryMenu = ({ bgSubscopes }) => {
       <TemplatesLoader />
       <Submenu
         items={items(subscopeItems(bgSubscopes))}
-        icon="tags"
+        icon={iconGlossary}
         name="glossary"
       />
     </>

package/src/components/GrantMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   GRANT_REQUESTS,
@@ -36,12 +37,19 @@ const items = [
 ];
 
 export const GrantMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconGrants = formatMessage({
+    id: "sidemenu.grants.icon",
+    defaultMessage: "key",
+  });
   const authorized = useAuthorized([
     "grants",
     "grants_management",
     "grants_visualization",
   ]);
-  return authorized ? <Submenu items={items} icon="key" name="grants" /> : null;
+  return authorized ? (
+    <Submenu items={items} icon={iconGrants} name="grants" />
+  ) : null;
 };
 
 export default GrantMenu;

package/src/components/IngestMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import { INGESTS } from "../routes";
 import Submenu from "./Submenu";
@@ -6,9 +7,14 @@ import Submenu from "./Submenu";
 const items = [{ name: "ingests", routes: [INGESTS] }];
 
 export const IngestMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconIngest = formatMessage({
+    id: "sidemenu.ingest.icon",
+    defaultMessage: "hdd outline",
+  });
   const authorized = useAuthorized("ingests");
   return authorized ? (
-    <Submenu items={items} icon="hdd outline" name="ingests" />
+    <Submenu items={items} icon={iconIngest} name="ingests" />
   ) : (
     false
   );

package/src/components/LineageMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import { GRAPHS, LINEAGE_EVENTS } from "../routes";
 import Submenu from "./Submenu";
@@ -9,9 +10,14 @@ const items = [
 ];
 
 export const LineageMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconLineage = formatMessage({
+    id: "sidemenu.lineage.icon",
+    defaultMessage: "shuffle",
+  });
   const authorized = useAuthorized("lineage");
   return authorized ? (
-    <Submenu items={items} icon="shuffle" name="lineage" />
+    <Submenu items={items} icon={iconLineage} name="lineage" />
   ) : (
     false
   );

package/src/components/MembersMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import { GROUPS, ROLES, USERS } from "../routes";
 import Submenu from "./Submenu";
@@ -9,9 +10,14 @@ const items = [
 ];
 
 export const MembersMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconMembers = formatMessage({
+    id: "sidemenu.members.icon",
+    defaultMessage: "users",
+  });
   const authorized = useAuthorized();
   return authorized ? (
-    <Submenu items={items} icon="users" name="members" />
+    <Submenu items={items} icon={iconMembers} name="members" />
   ) : null;
 };
 

package/src/components/QualityMenu.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   EXECUTION_GROUPS,
@@ -40,6 +41,11 @@ export const ITEMS = [
 ];
 
 export const QualityMenu = ({ dashboardConfig }) => {
+  const { formatMessage } = useIntl();
+  const iconQuality = formatMessage({
+    id: "sidemenu.quality.icon",
+    defaultMessage: "check square",
+  });
   const authorized = useAuthorized(
     "quality",
     "quality_implementation_workflow_management",
@@ -51,7 +57,7 @@ export const QualityMenu = ({ dashboardConfig }) => {
   )(ITEMS);
 
   return authorized ? (
-    <Submenu items={filteredItems} icon="check square" name="quality" />
+    <Submenu items={filteredItems} icon={iconQuality} name="quality" />
   ) : null;
 };
 

package/src/components/QxMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import {
   DATA_VIEWS,
@@ -26,9 +27,14 @@ export const ITEMS = [
 ];
 
 export default function QxMenu() {
+  const { formatMessage } = useIntl();
+  const iconQx = formatMessage({
+    id: "sidemenu.qx.icon",
+    defaultMessage: "weight",
+  });
   const authorized = useAuthorized("quality_control");
 
   return authorized ? (
-    <Submenu items={ITEMS} icon="weight" name="quality_experience" />
+    <Submenu items={ITEMS} icon={iconQx} name="quality_experience" />
   ) : null;
 }

package/src/components/SearchMenu.js

@@ -1,11 +1,17 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { SEARCH } from "../routes";
 import Submenu from "./Submenu";
 
 const items = [{ name: "search", routes: [SEARCH] }];
 
-export const SearchMenu = () => (
-  <Submenu items={items} icon="search" name="search" />
-);
+export const SearchMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconSearch = formatMessage({
+    id: "sidemenu.search.icon",
+    defaultMessage: "search",
+  });
+  return <Submenu items={items} icon={iconSearch} name="search" />;
+};
 
 export default SearchMenu;

package/src/components/TaxonomyMenu.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { useIntl } from "react-intl";
 import { useAuthorized } from "../hooks";
 import { DOMAINS } from "../routes";
 import Submenu from "./Submenu";
@@ -6,9 +7,14 @@ import Submenu from "./Submenu";
 const items = [{ name: "taxonomy", routes: [DOMAINS] }];
 
 export const TaxonomyMenu = () => {
+  const { formatMessage } = useIntl();
+  const iconTaxonomy = formatMessage({
+    id: "sidemenu.taxonomy.icon",
+    defaultMessage: "sitemap",
+  });
   const authorized = useAuthorized(["taxonomy", "taxonomy_membership"]);
   return authorized ? (
-    <Submenu items={items} icon="sitemap" name="taxonomy" />
+    <Submenu items={items} icon={iconTaxonomy} name="taxonomy" />
   ) : (
     false
   );

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

@@ -1,15 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { GrantMenu } from "../GrantMenu";
+import { render } from "@truedat/test/render";
+import GrantMenu from "../GrantMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
   useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<GrantMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<GrantMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<GrantMenu />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,10 +1,11 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { IngestMenu } from "../IngestMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<IngestMenu />", () => {
@@ -12,7 +13,7 @@ describe("<IngestMenu />", () => {
   const props = { location };
 
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<IngestMenu {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<IngestMenu {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,18 +1,19 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { LineageMenu } from "../LineageMenu";
+import { render } from "@truedat/test/render";
+import LineageMenu from "../LineageMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<LineageMenu />", () => {
   const props = {
-    nested: false
+    nested: false,
   };
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<LineageMenu {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<LineageMenu {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { MembersMenu } from "../MembersMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<MembersMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<MembersMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<MembersMenu />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,16 +1,17 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
 import { SearchMenu } from "../SearchMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<SearchMenu />", () => {
   it("matches the latest snapshot", () => {
     const props = { nested: false };
-    const wrapper = shallow(<SearchMenu {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<SearchMenu {...props} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,15 +1,16 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { TaxonomyMenu } from "../TaxonomyMenu";
+import { render } from "@truedat/test/render";
+import TaxonomyMenu from "../TaxonomyMenu";
 
 jest.mock("../../hooks", () => ({
   useActiveRoutes: jest.fn(() => true),
-  useAuthorized: jest.fn(() => true)
+  useAuthorized: jest.fn(() => true),
+  useAuthorizedItems: jest.fn((items) => items),
 }));
 
 describe("<TaxonomyMenu />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<TaxonomyMenu />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<TaxonomyMenu />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,66 +1,116 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<GrantMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="key"
-  items={
-    [
-      {
-        "groups": [
-          "grants",
-        ],
-        "name": "my_grants",
-        "routes": [
-          "/myGrants",
-        ],
-      },
-      {
-        "groups": [
-          "grants_visualization",
-        ],
-        "name": "grants",
-        "routes": [
-          "/grants",
-        ],
-      },
-      {
-        "groups": [
-          "grants",
-        ],
-        "name": "structures_grant_requests",
-        "routes": [
-          "/structuresGrantRequests",
-        ],
-      },
-      {
-        "groups": [
-          "grants",
-        ],
-        "name": "my_grant_requests",
-        "routes": [
-          "/myGrantRequests",
-        ],
-      },
-      {
-        "groups": [
-          "grants_management",
-        ],
-        "name": "grant_request_approvals",
-        "routes": [
-          "/grantRequests",
-        ],
-      },
-      {
-        "groups": [
-          "grants_management",
-        ],
-        "name": "grant_approval_rules",
-        "routes": [
-          "/grantApprovalRules",
-        ],
-      },
-    ]
-  }
-  name="grants"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/myGrants"
+      >
+        <i
+          aria-hidden="true"
+          class="key large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <div
+          class="header selectable"
+        >
+          Grants
+        </div>
+        <div
+          class="divider"
+        />
+        <a
+          aria-checked="false"
+          class="item"
+          href="/myGrants"
+          name="my_grants"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            My Grants
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/grants"
+          name="grants"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Grants
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/structuresGrantRequests"
+          name="structures_grant_requests"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Structures grant requests
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/myGrantRequests"
+          name="my_grant_requests"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            My Grant Requests
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/grantRequests"
+          name="grant_request_approvals"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Approve Grant Requests
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/grantApprovalRules"
+          name="grant_approval_rules"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Approval Rules
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,18 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IngestMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="hdd outline"
-  items={
-    [
-      {
-        "name": "ingests",
-        "routes": [
-          "/ingests",
-        ],
-      },
-    ]
-  }
-  name="ingests"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/ingests"
+      >
+        <i
+          aria-hidden="true"
+          class="hdd outline large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <a
+          aria-checked="false"
+          class="item"
+          href="/ingests"
+          name="ingests"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Data Requests
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,24 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LineageMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="shuffle"
-  items={
-    [
-      {
-        "name": "lineage",
-        "routes": [
-          "/graphs",
-        ],
-      },
-      {
-        "name": "lineage_events",
-        "routes": [
-          "/lineageEvents",
-        ],
-      },
-    ]
-  }
-  name="lineage"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/graphs"
+      >
+        <i
+          aria-hidden="true"
+          class="shuffle large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <div
+          class="header selectable"
+        >
+          Lineage Analysis
+        </div>
+        <div
+          class="divider"
+        />
+        <a
+          aria-checked="false"
+          class="item"
+          href="/graphs"
+          name="lineage"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Lineage Analysis
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/lineageEvents"
+          name="lineage_events"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            My graphs
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,25 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MembersMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="users"
-  items={
-    [
-      {
-        "name": "users",
-        "routes": [
-          "/users",
-          "/groups",
-        ],
-      },
-      {
-        "name": "roles",
-        "routes": [
-          "/roles",
-        ],
-      },
-    ]
-  }
-  name="members"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/users"
+      >
+        <i
+          aria-hidden="true"
+          class="users large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <div
+          class="header selectable"
+        >
+          Members
+        </div>
+        <div
+          class="divider"
+        />
+        <a
+          aria-checked="false"
+          class="item"
+          href="/users"
+          name="users"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Users
+          </span>
+        </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/roles"
+          name="roles"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Roles
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

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

@@ -1,18 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SearchMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="search"
-  items={
-    [
-      {
-        "name": "search",
-        "routes": [
-          "/search",
-        ],
-      },
-    ]
-  }
-  name="search"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/search"
+      >
+        <i
+          aria-hidden="true"
+          class="search large icon"
+        />
+      </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>
+</div>
 `;

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

@@ -1,18 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TaxonomyMenu /> matches the latest snapshot 1`] = `
-<Connect(Submenu)
-  icon="sitemap"
-  items={
-    [
-      {
-        "name": "taxonomy",
-        "routes": [
-          "/domains",
-        ],
-      },
-    ]
-  }
-  name="taxonomy"
-/>
+<div>
+  <div
+    class="active"
+  >
+    <div
+      aria-expanded="false"
+      class="ui item dropdown active"
+      role="listbox"
+      tabindex="0"
+    >
+      <a
+        class="ui"
+        href="/domains"
+      >
+        <i
+          aria-hidden="true"
+          class="sitemap large icon"
+        />
+      </a>
+      <div
+        class="menu transition"
+      >
+        <a
+          aria-checked="false"
+          class="item"
+          href="/domains"
+          name="taxonomy"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Taxonomy
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
 `;

package/src/i18n/components/Messages.js

@@ -142,7 +142,13 @@ export default function Messages() {
   return (
     <Segment>
       <Header as="h2">
-        <Icon circular name="language" />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "i18n.header.icon",
+            defaultMessage: "language",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id={"i18n.messages.header"} />
           <Header.Subheader>

package/src/i18n/components/NewMessage.js

@@ -31,7 +31,7 @@ const NewMessage = () => {
       <Container text as={Segment}>
         <Header
           as="h2"
-          icon="language"
+          icon={formatMessage({id: "i18n.header.icon",defaultMessage: "language" })}
           content={formatMessage({ id: "i18n.actions.createMessage" })}
         />
         <MessageForm onSubmit={onSubmit} />