@truedat/df 6.14.0 → 6.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "6.14.0",
+  "version": "6.15.0",
   "description": "Truedat Web Data Quality Module",
   "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.15.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.14.0",
-    "@truedat/core": "6.14.0",
+    "@truedat/auth": "6.15.0",
+    "@truedat/core": "6.15.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "c93d6ae539fb9ecb3d43b63db5199726246d2024"
+  "gitHead": "82830ba952924ed48c558abe06b3a01880c3e17e"
 }

package/src/components/hierarchies/HierarchiesView.js

@@ -1,32 +1,41 @@
 import React from "react";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
 import { Link } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { HIERARCHY_CREATE } from "@truedat/core/routes";
 import Hierarchies from "./Hierarchies";
 
-export const HierarchiesView = () => (
-  <Segment>
-    <Header as="h2">
-      <Button
-        floated="right"
-        primary
-        as={Link}
-        to={HIERARCHY_CREATE}
-        content={<FormattedMessage id="hierarchy.create" />}
-      />
-      <Icon circular name="tree" />
-      <Header.Content>
-        <FormattedMessage id="hierarchies.header" />
-        <Header.Subheader>
-          <FormattedMessage id="hierarchies.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <Segment attached="bottom">
-      <Hierarchies />
+export const HierarchiesView = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Button
+          floated="right"
+          primary
+          as={Link}
+          to={HIERARCHY_CREATE}
+          content={<FormattedMessage id="hierarchy.create" />}
+        />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "hierarchies.header.icon",
+            defaultMessage: "tree",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id="hierarchies.header" />
+          <Header.Subheader>
+            <FormattedMessage id="hierarchies.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment attached="bottom">
+        <Hierarchies />
+      </Segment>
     </Segment>
-  </Segment>
-);
+  );
+};
 
 export default HierarchiesView;

package/src/components/hierarchies/HierarchyView.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Button, Header, Icon, Segment, Label } from "semantic-ui-react";
+import { Button, Header, Icon, Segment } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { linkTo } from "@truedat/core/routes";
@@ -229,7 +229,13 @@ export const HierarchyView = ({
               )}
             </div>
           </div>
-          <Icon circular name="tree" />
+          <Icon
+            circular
+            name={formatMessage({
+              id: "hierarchies.header.icon",
+              defaultMessage: "tree",
+            })}
+          />
           <Header.Content>
             {hierarchy.name
               ? hierarchy.name

package/src/templates/components/NewTemplate.js

@@ -16,7 +16,13 @@ export const NewTemplate = ({ createTemplate }) => {
       />
       <Segment>
         <Header as="h2">
-          <Icon name="file code outline" circular />
+          <Icon
+            name={formatMessage({
+              id: "templates.header.icon",
+              defaultMessage: "file code outline",
+            })}
+            circular
+          />
           <Header.Content>
             <FormattedMessage id="templates.actions.create" />
           </Header.Content>

package/src/templates/components/Template.js

@@ -1,7 +1,7 @@
 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 {
   Button,
   Header,
@@ -22,15 +22,22 @@ export const Template = ({
   deleteTemplate,
   templateDeleting,
   templateSaving,
-}) =>
-  _.isUndefined(template.id) ? null : (
+}) => {
+  const { formatMessage } = useIntl();
+  return _.isUndefined(template.id) ? null : (
     <>
       <TemplateCrumbs name={template?.label} />
       <Segment>
         <Grid>
           <Grid.Column width={8}>
             <Header as="h2">
-              <Icon name="file code outline" circular />
+              <Icon
+                name={formatMessage({
+                  id: "templates.header.icon",
+                  defaultMessage: "file code outline",
+                })}
+                circular
+              />
               <Header.Content>
                 {template?.label}
                 <Header.Subheader>{template?.name}</Header.Subheader>
@@ -70,6 +77,7 @@ export const Template = ({
       </Segment>
     </>
   );
+};
 
 Template.propTypes = {
   deleteTemplate: PropTypes.func,

package/src/templates/components/TemplateCard.js

@@ -1,12 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { useHistory } from "react-router-dom";
 import { Icon, Card } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 
 export const TemplateCard = ({ template: { id, name, label } }) => {
   const history = useHistory();
+  const { formatMessage } = useIntl();
   return (
     <Card
       key={id}
@@ -15,7 +16,13 @@ export const TemplateCard = ({ template: { id, name, label } }) => {
     >
       <Card.Content>
         <Card.Header>
-          <Icon name="file code outline" /> {name}
+          <Icon
+            name={formatMessage({
+              id: "templates.header.icon",
+              defaultMessage: "file code outline",
+            })}
+          />{" "}
+          {name}
         </Card.Header>
         <Card.Description>{label}</Card.Description>
       </Card.Content>

package/src/templates/components/Templates.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import {
   Header,
   Icon,
@@ -14,10 +14,17 @@ import TemplateFilters from "./TemplateFilters";
 import TemplatesTable from "./TemplatesTable";
 
 export default function Templates() {
+  const { formatMessage } = useIntl();
   return (
     <Segment>
       <Header as="h2">
-        <Icon name="file code outline" circular />
+        <Icon
+          circular
+          name={formatMessage({
+            id: "templates.header.icon",
+            defaultMessage: "file code outline",
+          })}
+        />
         <Header.Content>
           <FormattedMessage id="templates.header" />
           <Header.Subheader>