@truedat/dd 6.13.7 → 6.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.13.7",
+  "version": "6.14.1",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@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",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.13.7",
-    "@truedat/core": "6.13.7",
-    "@truedat/df": "6.13.7",
+    "@truedat/auth": "6.14.1",
+    "@truedat/core": "6.14.1",
+    "@truedat/df": "6.14.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "9137d2a416d46886163ac2de4875761d52e6a2e8"
+  "gitHead": "13f8e92c333acf539f9978ea94db03174130cfb0"
 }

package/src/components/Grant.js

@@ -60,7 +60,13 @@ export const GrantHeader = ({ grant, title, actions, onStatusChange }) => {
       <Grid.Row>
         <Grid.Column width={12}>
           <Header as="h2">
-            <Icon circular name="key" />
+            <Icon
+              circular
+              name={formatMessage({
+                id: "grant.header.icon",
+                defaultMessage: "key",
+              })}
+            />
             <Header.Content>
               {`${formatMessage({
                 id: "grant.header",

package/src/components/GrantApprovalRule.js

@@ -1,6 +1,6 @@
 import _ from "lodash/fp";
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";
 import {
@@ -20,6 +20,7 @@ import GrantApprovalRuleDeleteButton from "./GrantApprovalRuleDeleteButton";
 
 export const GrantApprovalRule = () => {
   const { id } = useParams();
+  const { formatMessage } = useIntl();
 
   const { data } = useQuery(GRANT_APPROVAL_RULE_QUERY, {
     variables: { id },
@@ -37,7 +38,13 @@ export const GrantApprovalRule = () => {
         <Grid>
           <Grid.Column width={8}>
             <Header as="h2">
-              <Icon circular name="key" />
+              <Icon
+                circular
+                name={formatMessage({
+                  id: "grant.header.icon",
+                  defaultMessage: "key",
+                })}
+              />
               <Header.Content>
                 <FormattedMessage id="grantApprovalRule.subheader" />
               </Header.Content>

package/src/components/GrantApprovalRules.js

@@ -37,7 +37,13 @@ export default function GrantApprovalRules() {
   return (
     <Segment>
       <Header as="h2">
-        <Icon circular name="key" />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "grant.header.icon",
+            defaultMessage: "key",
+          })}
+        />
         <Header.Content>
           {formatMessage({ id: "grantApprovalRules.header" })}
           <Header.Subheader>

package/src/components/GrantRequestHeader.js

@@ -27,7 +27,13 @@ export const GrantRequestHeader = ({ grantRequest }) => {
     <Grid>
       <Grid.Column width={12}>
         <Header as="h2">
-          <Icon circular name="key" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "grant.header.icon",
+              defaultMessage: "key",
+            })}
+          />
           <Header.Content>
             {formatMessage({
               id: grantTypeTranslationId,

package/src/components/GrantRequestsSearchResults.js

@@ -10,7 +10,7 @@ import {
   GridColumn,
   GridRow,
 } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import SearchWidget from "@truedat/core/search/SearchWidget";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
 import Pagination from "@truedat/core/search/Pagination";
@@ -22,6 +22,7 @@ export const GrantRequestsSearchResults = () => {
   const { searchData, loading, setOnSearchChange, setHiddenFilters } =
     useSearchContext();
 
+  const { formatMessage } = useIntl();
   const rolesPermission = _.propOr([], "_permissions")(searchData);
   const grantRequests = _.propOr([], "data")(searchData);
   const hasApproveRoles = !_.isEmpty(rolesPermission);
@@ -92,7 +93,13 @@ export const GrantRequestsSearchResults = () => {
   return (
     <Segment>
       <Header as="h2">
-        <Icon circular name="key" />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "grant.header.icon",
+            defaultMessage: "key",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id={"grantRequests.header.approve"} />
           <Header.Subheader>

package/src/components/Grants.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import GrantDateFilter from "./GrantDateFilter";
 import GrantsSearch from "./GrantsSearch";
@@ -13,38 +13,47 @@ import GrantsDownloadButton from "./GrantsDownloadButton";
 import GrantSelectedFilters from "./GrantSelectedFilters";
 import GrantsPagination from "./GrantsPagination";
 
-export const Grants = ({ grantsLoading, onlyMyGrants }) => (
-  <Segment>
-    <Header as="h2">
-      <Icon circular name="key" />
-      <Header.Content>
-        <FormattedMessage
-          id={onlyMyGrants ? "grants.mine.header" : "grants.header"}
+export const Grants = ({ grantsLoading, onlyMyGrants }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "grant.header.icon",
+            defaultMessage: "key",
+          })}
         />
-        <Header.Subheader>
+        <Header.Content>
           <FormattedMessage
-            id={onlyMyGrants ? "grants.mine.subheader" : "grants.subheader"}
+            id={onlyMyGrants ? "grants.mine.header" : "grants.header"}
           />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
+          <Header.Subheader>
+            <FormattedMessage
+              id={onlyMyGrants ? "grants.mine.subheader" : "grants.subheader"}
+            />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
 
-    <Segment attached="bottom">
-      <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
-      <GrantsSearch />
-      <GrantSelectedFilters />
-      <GrantDateFilter />
-      <Dimmer.Dimmable dimmed={grantsLoading}>
-        <Dimmer active={grantsLoading} inverted>
-          <Loader />
-        </Dimmer>
-      </Dimmer.Dimmable>
-      <GrantsLabelResults />
-      <GrantsTable onlyMyGrants={onlyMyGrants} />
-      <GrantsPagination />
+      <Segment attached="bottom">
+        <GrantsDownloadButton onlyMyGrants={onlyMyGrants} hasFilterApplied />
+        <GrantsSearch />
+        <GrantSelectedFilters />
+        <GrantDateFilter />
+        <Dimmer.Dimmable dimmed={grantsLoading}>
+          <Dimmer active={grantsLoading} inverted>
+            <Loader />
+          </Dimmer>
+        </Dimmer.Dimmable>
+        <GrantsLabelResults />
+        <GrantsTable onlyMyGrants={onlyMyGrants} />
+        <GrantsPagination />
+      </Segment>
     </Segment>
-  </Segment>
-);
+  );
+};
 
 Grants.propTypes = {
   grantsLoading: PropTypes.bool,

package/src/components/LineageEvents.js

@@ -1,23 +1,31 @@
 import React from "react";
-import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
 import LineageEventsTable from "./LineageEventsTable";
 
-export const LineageEvents = () => (
-  <Segment>
-    <Header as="h2">
-      <Icon circular name="cogs" />
-      <Header.Content>
-        <FormattedMessage id="lineage.events.header" />
-        <Header.Subheader>
-          <FormattedMessage id="lineage.events.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <Segment attached="bottom">
-      <LineageEventsTable />
+export const LineageEvents = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "lineage.events.header.icon",
+            defaultMessage: "cogs",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="lineage.events.header" />
+          <Header.Subheader>
+            <FormattedMessage id="lineage.events.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment attached="bottom">
+        <LineageEventsTable />
+      </Segment>
     </Segment>
-  </Segment>
-);
-
+  );
+};
 export default LineageEvents;

package/src/components/MyGrantRequests.js

@@ -35,7 +35,13 @@ export const MyGrantRequests = ({
   return (
     <Segment>
       <Header as="h2">
-        <Icon circular name="key" />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "grant.header.icon",
+            defaultMessage: "key",
+          })}
+        />
         <Header.Content>
           {formatMessage({ id: "grantRequests.header.me" })}
           <Header.Subheader>

package/src/components/PendingStructureNotes.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Dimmer, Loader, Header, Icon, Segment } from "semantic-ui-react";
 import {
   SearchContextProvider,
@@ -19,12 +19,19 @@ import PendingStructureNotesLabelResults from "./PendingStructureNotesLabelResul
 import PendingStructureNotesTable from "./PendingStructureNotesTable";
 
 export const PendingStructureNotesContent = () => {
+  const { formatMessage } = useIntl();
   const { loading } = useSearchContext();
 
   return (
     <Segment>
       <Header as="h2">
-        <Icon name="sticky note outline" circular />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "pendingStructureNotes.header.icon",
+            defaultMessage: "sticky note outline",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id="pendingStructureNotes.header" />
           <Header.Subheader>

package/src/components/ReferenceDatasetCreate.js

@@ -16,7 +16,13 @@ export const ReferenceDatasetCreate = ({ createReferenceDataset }) => {
       />
       <Container as={Segment} text>
         <Header as="h2">
-          <Icon name="list ol" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "referenceDatasets.header.icon",
+              defaultMessage: "list ol",
+            })}
+          />
           <Header.Content>
             <FormattedMessage id="referenceDatasets.actions.create" />
           </Header.Content>

package/src/components/ReferenceDatasetHeader.js

@@ -1,17 +1,24 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Header, Icon, Grid, Label } from "semantic-ui-react";
 import ReferenceDatasetActions from "./ReferenceDatasetActions";
 
-export const ReferenceDatasetHeader = ({ dataset }) =>
-  _.isEmpty(dataset) ? null : (
+export const ReferenceDatasetHeader = ({ dataset }) => {
+  const { formatMessage } = useIntl();
+  return _.isEmpty(dataset) ? null : (
     <Grid>
       <Grid.Row>
         <Grid.Column width={8}>
           <Header as="h2">
-            <Icon circular name="list ol" />
+            <Icon
+              circular
+              name={formatMessage({
+                id: "referenceDatasets.header.icon",
+                defaultMessage: "list ol",
+              })}
+            />
             <Header.Content>
               {dataset.name}
               <Header.Subheader>
@@ -33,6 +40,7 @@ export const ReferenceDatasetHeader = ({ dataset }) =>
       </Grid.Row>
     </Grid>
   );
+};
 
 ReferenceDatasetHeader.propTypes = {
   dataset: PropTypes.object.isRequired,

package/src/components/ReferenceDatasets.js

@@ -41,7 +41,13 @@ export const ReferenceDatasets = () => {
             content={formatMessage({ id: "referenceDatasets.actions.create" })}
           />
         ) : null}
-        <Icon name="list ol" circular />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "referenceDatasets.header.icon",
+            defaultMessage: "list ol",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id="referenceDatasets.header" />
           <Header.Subheader>

package/src/components/StructureItem.js

@@ -7,11 +7,16 @@ import { List } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { STRUCTURES, linkTo } from "@truedat/core/routes";
 
-const getIcon = (formatMessage, type) =>
-  formatMessage({
-    id: `structure.type.${type}.icon`,
+const getIcon = (formatMessage, type, field_type) => {
+  const id = field_type
+    ? `structure.type.${field_type}.icon`
+    : `structure.type.${type}.icon`;
+
+  return formatMessage({
+    id,
     defaultMessage: "question circle outline",
   });
+};
 
 const filterQueryParams = _.flow(
   Object.entries,
@@ -40,10 +45,7 @@ export const StructureItem = ({
   navFilter,
   original_name,
   type,
-  /* hasCatalogViewProp can be:
-   *   - true/false in bucket view (catalog view)
-   *   - undefined in regular structure view
-   */
+  field_type,
   hasCatalogViewProp,
 }) => {
   const { formatMessage } = useIntl();
@@ -96,7 +98,10 @@ export const StructureItem = ({
       className={toClassNames({ deleted_at, hasCatalogViewProp })}
       active={active}
     >
-      <List.Icon name={getIcon(formatMessage, type)} verticalAlign="middle" />
+      <List.Icon
+        name={getIcon(formatMessage, type, field_type)}
+        verticalAlign="middle"
+      />
       <List.Content>
         <List.Description>
           {type == "bucket"
@@ -117,6 +122,7 @@ StructureItem.propTypes = {
   original_name: PropTypes.string,
   structuresAliasNameMode: PropTypes.bool,
   type: PropTypes.string,
+  field_type: PropTypes.string,
   hasCatalogViewProp: PropTypes.bool,
 };
 

package/src/components/StructureType.js

@@ -1,27 +1,36 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
 import StructureTypeForm from "./StructureTypeForm";
 
-export const StructureType = ({ name }) => (
-  <Container text as={Segment}>
-    <Header as="h2">
-      <Icon name="object group" />
-      <Header.Content>
-        {name}
-        <Header.Subheader>
-          <FormattedMessage
-            id="structureType"
-            defaultMessage="Structure Type"
-          />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <StructureTypeForm />
-  </Container>
-);
+export const StructureType = ({ name }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Container text as={Segment}>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "structureType.header.icon",
+            defaultMessage: "object group",
+          })}
+        />
+        <Header.Content>
+          {name}
+          <Header.Subheader>
+            <FormattedMessage
+              id="structureType"
+              defaultMessage="Structure Type"
+            />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <StructureTypeForm />
+    </Container>
+  );
+};
 
 StructureType.propTypes = {
   name: PropTypes.string,

package/src/components/StructureTypes.js

@@ -1,21 +1,30 @@
 import React from "react";
 import { Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import StructureTypesTable from "./StructureTypesTable";
 
-export const StructureTypes = () => (
-  <Segment>
-    <Header as="h2">
-      <Icon name="object group" circular />
-      <Header.Content>
-        <FormattedMessage id="structureTypes.header" />
-        <Header.Subheader>
-          <FormattedMessage id="structureTypes.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <StructureTypesTable />
-  </Segment>
-);
+export const StructureTypes = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "structureTypes.header.icon",
+            defaultMessage: "object group",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="structureTypes.header" />
+          <Header.Subheader>
+            <FormattedMessage id="structureTypes.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <StructureTypesTable />
+    </Segment>
+  );
+};
 
 export default StructureTypes;

package/src/components/StructuresGrantRequestView.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { Header, Icon, Divider } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import {
   SearchContextProvider,
@@ -22,6 +22,7 @@ import StructuresSearchResults from "./StructuresSearchResults";
 import StructureGrantCart from "./StructureGrantCart";
 
 export function StructuresGrantRequestViewContent() {
+  const { formatMessage } = useIntl();
   const history = useHistory();
   const segment = useRef(null);
   const [isOverflown, setIsOverflown] = useState(null);
@@ -75,7 +76,13 @@ export function StructuresGrantRequestViewContent() {
         ref={segment}
       >
         <Header as="h2">
-          <Icon circular name="block layout" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "structuresGrant.header.icon",
+              defaultMessage: "block layout",
+            })}
+          />
           <Header.Content>
             <FormattedMessage id="structuresGrantRequest.header" />
             <Header.Subheader>

package/src/components/StructuresUploadEvents.js

@@ -2,30 +2,39 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Icon, Segment, Dimmer, Loader } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import StructuresUploadEventsTable from "./StructuresUploadEventsTable";
 
-export const StructuresUploadEvents = ({ structuresUploadEventsLoading }) => (
-  <Segment>
-    <Header as="h2">
-      <Icon circular name="cogs" />
-      <Header.Content>
-        <FormattedMessage id="structures.bulkUploadEvents.header" />
-        <Header.Subheader>
-          <FormattedMessage id="structures.bulkUploadEvents.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <Dimmer.Dimmable dimmed={structuresUploadEventsLoading}>
-      <Segment attached="bottom">
-        <StructuresUploadEventsTable />
-        <Dimmer inverted active={structuresUploadEventsLoading}>
-          <Loader />
-        </Dimmer>
-      </Segment>
-    </Dimmer.Dimmable>
-  </Segment>
-);
+export const StructuresUploadEvents = ({ structuresUploadEventsLoading }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "bulkUploadEvents.header.icon",
+            defaultMessage: "cogs",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="structures.bulkUploadEvents.header" />
+          <Header.Subheader>
+            <FormattedMessage id="structures.bulkUploadEvents.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Dimmer.Dimmable dimmed={structuresUploadEventsLoading}>
+        <Segment attached="bottom">
+          <StructuresUploadEventsTable />
+          <Dimmer inverted active={structuresUploadEventsLoading}>
+            <Loader />
+          </Dimmer>
+        </Segment>
+      </Dimmer.Dimmable>
+    </Segment>
+  );
+};
 
 StructuresUploadEvents.propTypes = {
   structuresUploadEventsLoading: PropTypes.bool,

package/src/components/StructuresView.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import { Header, Icon, Segment, Divider } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { BUCKETS_VIEW } from "@truedat/core/routes";
 import SearchWidget from "@truedat/core/search/SearchWidget";
@@ -23,6 +23,7 @@ import SystemCards from "./SystemCards";
 import CatalogCustomViewCards from "./CatalogCustomViewCards";
 
 const StructuresHeader = () => {
+  const { formatMessage } = useIntl();
   const match = useRouteMatch(BUCKETS_VIEW);
   const propertyPathMessage = !match?.params?.propertyPath
     ? "structures.subheader"
@@ -30,7 +31,13 @@ const StructuresHeader = () => {
 
   return (
     <Header as="h2">
-      <Icon circular name="block layout" />
+      <Icon
+        circular
+        name={formatMessage({
+          id: "structuresGrant.header.icon",
+          defaultMessage: "block layout",
+        })}
+      />
       <Header.Content>
         <FormattedMessage
           id={

package/src/components/Tag.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Container, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { connect } from "react-redux";
 import { Loading } from "@truedat/core/components";
 import { createTag, updateTag } from "../routines";
@@ -21,6 +21,7 @@ export const Tag = ({
   saving,
   id,
 }) => {
+  const { formatMessage } = useIntl();
   const action = id ? "tags.actions.edit" : "tags.actions.create";
   const onSubmit = id ? (data) => updateTag({ ...data, id }) : createTag;
   return (
@@ -28,7 +29,12 @@ export const Tag = ({
       <TagCrumbs action={action} />
       <Container text as={Segment}>
         <Header as="h2">
-          <Icon name="tag" />
+          <Icon
+            name={formatMessage({
+              id: "tag.header.icon",
+              defaultMessage: "tag",
+            })}
+          />
           <Header.Content>
             <FormattedMessage id={action} />
           </Header.Content>

package/src/components/Tags.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
-import { useIntl, FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { STRUCTURE_TAGS_NEW } from "@truedat/core/routes";
 import TagCards from "./TagCards";
 
@@ -17,7 +17,13 @@ export const Tags = () => {
           to={STRUCTURE_TAGS_NEW}
           content={formatMessage({ id: "tags.actions.create" })}
         />
-        <Icon name="tags" circular />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "tags.header.icon",
+            defaultMessage: "tags",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id="tags.header" />
           <Header.Subheader>

package/src/components/Task.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import { useParams, Link } from "react-router-dom";
 import { useQuery } from "@apollo/client";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import {
   Breadcrumb,
   Button,
@@ -57,7 +57,7 @@ function Task() {
     },
     { name: "task.elapsed", content: `${task?.elapsed / 1000}s` },
   ];
-
+  const { formatMessage } = useIntl();
   const propertyElement = (name, content) => (
     <Grid.Column key={name} width={3}>
       <Item>
@@ -84,7 +84,13 @@ function Task() {
       </Breadcrumb>
       <Segment>
         <Header as="h2">
-          <Icon circular name="check" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "task.header.icon",
+              defaultMessage: "check",
+            })}
+          />
           <Header.Content>
             <FormattedMessage id="task.header" />
             <Header.Subheader>

package/src/components/Tasks.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { useHistory } from "react-router-dom";
 import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Button, Header, Icon, Table, Segment } from "semantic-ui-react";
 import { Dimmer, Loader } from "semantic-ui-react";
 import Moment from "react-moment";
@@ -17,7 +17,7 @@ export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
     fetchPolicy: "cache-and-network",
   });
   const history = useHistory();
-
+  const { formatMessage } = useIntl();
   const tasks = _.flow(
     _.get("tasks"),
     _.orderBy(["started_at"], ["desc"])
@@ -26,7 +26,13 @@ export const Tasks = ({ reindexAllGrants, reindexAllStructures }) => {
   return (
     <Segment>
       <Header as="h2">
-        <Icon circular name="check" />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "task.header.icon",
+            defaultMessage: "check",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id="tasks.header" />
           <Header.Subheader>

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

@@ -1,10 +1,25 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { StructureType } from "../StructureType";
+import { render } from "@truedat/test/render";
+import StructureType from "../StructureType";
+
+const renderOpts = {
+  state: { structureType: { name: "foo" } },
+  messages: {
+    en: {
+      "structure.type.foo.text": "foo",
+      "structureType.template": "template",
+      "structureType.translation": " translation",
+      "actions.cancel": "Cancel",
+      "actions.create": "Create",
+      "actions.update": "Update",
+      "actions.save": "Save",
+    },
+  },
+};
 
 describe("<StructureType />", () => {
   it("matches the latest snapshot", () => {
-    const wrapper = shallow(<StructureType />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<StructureType />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { Tag } from "../Tag";
+import { render } from "@truedat/test/render";
+import Tag from "../Tag";
 
 describe("<Tag />", () => {
   it("matches the latest snapshot", () => {
     const createTag = jest.fn();
-    const wrapper = shallow(<Tag createTag={createTag} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<Tag createTag={createTag} />);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -29,7 +29,7 @@ exports[`<ReferenceDatasetCreate /> matches the latest snapshot 1`] = `
     >
       <i
         aria-hidden="true"
-        class="list ol icon"
+        class="list ol circular icon"
       />
       <div
         class="content"

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

@@ -29,7 +29,7 @@ exports[`<ReferenceDatasetRoutes /> matches the latest snapshot (create route) 1
     >
       <i
         aria-hidden="true"
-        class="list ol icon"
+        class="list ol circular icon"
       />
       <div
         class="content"

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

@@ -1,26 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureType /> matches the latest snapshot 1`] = `
-<Container
-  as={[Function]}
-  text={true}
->
-  <Header
-    as="h2"
+<div>
+  <div
+    class="ui segment ui text container"
   >
-    <Icon
-      as="i"
-      name="object group"
-    />
-    <HeaderContent>
-      <HeaderSubheader>
-        <MemoizedFormattedMessage
-          defaultMessage="Structure Type"
-          id="structureType"
-        />
-      </HeaderSubheader>
-    </HeaderContent>
-  </Header>
-  <Connect(StructureTypeForm) />
-</Container>
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="object group circular icon"
+      />
+      <div
+        class="content"
+      >
+        foo
+        <div
+          class="sub header"
+        >
+          Structure Type
+        </div>
+      </div>
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="field"
+      >
+        <label>
+           translation
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            placeholder="foo"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          template
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui selection dropdown"
+          name="template_id"
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          />
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          Save
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
 `;

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

@@ -1,36 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Tag /> matches the latest snapshot 1`] = `
-<Fragment>
-  <TagCrumbs
-    action="tags.actions.create"
-  />
-  <Container
-    as={[Function]}
-    text={true}
+<div>
+  <div
+    class="ui breadcrumb"
   >
-    <Header
-      as="h2"
+    <a
+      class="section"
+      href="/structureTags"
     >
-      <Icon
-        as="i"
-        name="tag"
-      />
-      <HeaderContent>
-        <MemoizedFormattedMessage
-          id="tags.actions.create"
-        />
-      </HeaderContent>
-    </Header>
-    <TagForm
-      onSubmit={[MockFunction]}
-      tag={
-        {
-          "domainIds": [],
-          "name": "",
-        }
-      }
+      Structure Tags
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
     />
-  </Container>
-</Fragment>
+    <div
+      class="active section"
+    >
+      Create Structure Tag
+    </div>
+  </div>
+  <div
+    class="ui segment ui text container"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="tag icon"
+      />
+      <div
+        class="content"
+      >
+        Create Structure Tag
+      </div>
+    </h2>
+    <form
+      class="ui loading form"
+    >
+      <div
+        class="required field"
+      >
+        <label
+          for="name"
+        >
+          Name
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            id="name"
+            placeholder="Name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label
+          for="description"
+        >
+          Description
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            id="description"
+            placeholder="Description"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled right floated button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          Save
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
 `;

package/src/selectors/utils/decorators.js

@@ -34,7 +34,12 @@ export const GrantRequestStructureDecorator = (grantRequest) => {
           content={formatMessage({ id: "grantRequest.isModification" })}
           trigger={
             <Link to={linkTo.GRANT({ id: grantRequest?.grant?.id || 0 })}>
-              <Icon name="key" />
+              <Icon
+                name={formatMessage({
+                  id: "grant.header.icon",
+                  defaultMessage: "key",
+                })}
+              />
             </Link>
           }
         />