@truedat/bg 7.2.1 → 7.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.2.1",
+  "version": "7.2.2",
   "description": "Truedat Web Business Glossary",
   "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": "7.2.1",
+    "@truedat/test": "7.2.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.2.1",
-    "@truedat/df": "7.2.1",
-    "@truedat/lm": "7.2.1",
+    "@truedat/core": "7.2.2",
+    "@truedat/df": "7.2.2",
+    "@truedat/lm": "7.2.2",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "10ba779646ef549e6db1235b3acd6d430526f487"
+  "gitHead": "9033c57eccb9e6785c0a0c5aa6078c34788d6e7d"
 }

package/src/concepts/components/ConceptsUploadButton.js

@@ -33,7 +33,7 @@ export const ConceptsUploadButton = ({
   };
   return (
     <UploadModal
-      extraAction={canAutoPublish && extraAction}
+      extraAction={canAutoPublish ? extraAction : null}
       icon="upload"
       trigger={
         <Button

package/src/concepts/components/__tests__/ConceptManageDomain.spec.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
 import { ConceptManageDomain } from "../ConceptManageDomain";
 
 describe("<ConceptManageDomain />", () => {
@@ -11,16 +12,33 @@ describe("<ConceptManageDomain />", () => {
     { id: 3, name: "baz", level: 0 },
   ];
   const conceptAction = jest.fn();
-  // const saving = false;
   const setToDomain = [{ id: 2, name: "bar" }];
   const props = {
     domainOptions,
-    // id,
     conceptAction,
-    // saving,
     setToDomain,
   };
+
+  const domains = [
+    {
+      id: 1,
+      name: "foo",
+      parentId: 6,
+      actions: [],
+      externalId: "external_foo",
+    },
+  ];
+  const variables = {
+    action: "manageConcept",
+  };
+
+  const domainsMock = {
+    request: { query: DOMAINS_QUERY, variables },
+    result: { data: { domains: domains } },
+  };
+
   const renderOpts = {
+    mocks: [domainsMock],
     messages: {
       en: {
         "concept.changeDomain.header": "edit domain",
@@ -30,13 +48,19 @@ describe("<ConceptManageDomain />", () => {
         "domain.selector.placeholder": "select a domain...",
       },
     },
+    fallback: "lazy",
   };
 
   it("matches the latest snapshot", async () => {
-    const { container } = render(
+    const { container, queryByText } = render(
       <ConceptManageDomain {...props} />,
       renderOpts
     );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+
     await waitFor(() => {
       expect(container).toMatchSnapshot();
     });

package/src/concepts/components/__tests__/__snapshots__/ConceptForm.spec.js.snap

@@ -53,14 +53,16 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
               role="option"
             >
               <div
-                style="margin-left: 0px;"
+                class="item-content"
+                style="margin-left: 0px; padding-left: 5px;"
               >
                 <i
                   aria-hidden="true"
-                  class="chevron circle down icon"
+                  class="chevron right icon"
                 />
                 <span
                   style="opacity: 1;"
+                  title="barDomain"
                 >
                   barDomain
                 </span>
@@ -72,14 +74,12 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
               role="option"
             >
               <div
-                style="margin-left: 0px;"
+                class="item-content"
+                style="margin-left: 0px; padding-left: 25px;"
               >
-                <i
-                  aria-hidden="true"
-                  class="circle icon"
-                />
                 <span
                   style="opacity: 1;"
+                  title="bazDomain"
                 >
                   bazDomain
                 </span>
@@ -91,14 +91,12 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
               role="option"
             >
               <div
-                style="margin-left: 0px;"
+                class="item-content"
+                style="margin-left: 0px; padding-left: 25px;"
               >
-                <i
-                  aria-hidden="true"
-                  class="circle icon"
-                />
                 <span
                   style="opacity: 1;"
+                  title="fooDomain"
                 >
                   fooDomain
                 </span>

package/src/concepts/components/__tests__/__snapshots__/ConceptManageDomain.spec.js.snap

@@ -12,8 +12,65 @@ exports[`<ConceptManageDomain /> matches the latest snapshot 1`] = `
       edit domain
     </h2>
     <form
-      class="ui loading form"
+      class="ui form"
     >
+      <div
+        class="required field fix-dropdown-selector "
+      >
+        <div
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-multiselectable="false"
+          class="ui floating dropdown"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <label>
+            select a domain...
+          </label>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              class="ui fluid left icon input search "
+            >
+              <input
+                type="text"
+              />
+              <i
+                aria-hidden="true"
+                class="search icon"
+              />
+            </div>
+            <div
+              class="scrolling menu transition"
+            >
+              <div
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 25px;"
+                >
+                  <span
+                    style="opacity: 1;"
+                    title="foo"
+                  >
+                    foo
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div
         class="actions"
       >

package/src/concepts/components/__tests__/__snapshots__/ConceptsBulkUpdate.spec.js.snap

@@ -81,14 +81,16 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 5px;"
                 >
                   <i
                     aria-hidden="true"
-                    class="chevron circle down icon"
+                    class="chevron right icon"
                   />
                   <span
                     style="opacity: 1;"
+                    title="barDomain"
                   >
                     barDomain
                   </span>
@@ -100,14 +102,12 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 25px;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="circle icon"
-                  />
                   <span
                     style="opacity: 1;"
+                    title="bazDomain"
                   >
                     bazDomain
                   </span>
@@ -119,14 +119,12 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 25px;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="circle icon"
-                  />
                   <span
                     style="opacity: 1;"
+                    title="fooDomain"
                   >
                     fooDomain
                   </span>

package/src/concepts/components/__tests__/__snapshots__/SharedToForm.spec.js.snap

@@ -61,14 +61,16 @@ exports[`<SharedToForm /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 5px;"
                 >
                   <i
                     aria-hidden="true"
-                    class="chevron circle down icon"
+                    class="chevron right icon"
                   />
                   <span
                     style="opacity: 1;"
+                    title="barDomain"
                   >
                     barDomain
                   </span>
@@ -80,14 +82,12 @@ exports[`<SharedToForm /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 25px;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="circle icon"
-                  />
                   <span
                     style="opacity: 1;"
+                    title="bazDomain"
                   >
                     bazDomain
                   </span>
@@ -99,14 +99,12 @@ exports[`<SharedToForm /> matches the latest snapshot 1`] = `
                 role="option"
               >
                 <div
-                  style="margin-left: 0px;"
+                  class="item-content"
+                  style="margin-left: 0px; padding-left: 25px;"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="circle icon"
-                  />
                   <span
                     style="opacity: 1;"
+                    title="fooDomain"
                   >
                     fooDomain
                   </span>

package/src/messages/en.js

@@ -290,6 +290,8 @@ export default {
   "domain.selector.label": "Domain",
   "domain.selector.placeholder": "Select a domain...",
   "domains.actions.create": "New Domain",
+  "domains.list.hide": "Hide Domains List",
+  "domains.list.show": "Show Domains List",
   "domains.search.placeholder": "Search domains...",
   "domains.search.error.fields": "Search fields not valid",
   "domains.search.results.count": "{count} domains found:",

package/src/messages/es.js

@@ -292,6 +292,8 @@ export default {
   "domain.selector.label": "Dominio",
   "domain.selector.placeholder": "Selecciona un dominio...",
   "domains.actions.create": "Nuevo dominio",
+  "domains.list.hide": "Ocultar lista de dominios",
+  "domains.list.show": "Mostrar lista de dominios",
   "domains.search.placeholder": "Buscar dominios...",
   "domains.search.error.fields": "Campos de búsqueda no válidos",
   "domains.search.results.count": "{count} dominios encontrados:",

package/src/taxonomy/components/Domain.js

@@ -2,37 +2,16 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Route, Switch } from "react-router-dom";
 import { Segment } from "semantic-ui-react";
-import { Unauthorized } from "@truedat/core/components";
-import { useAuthorized } from "@truedat/core/hooks";
-import {
-  DOMAIN_CONCEPTS,
-  DOMAIN_IMPLEMENTATIONS,
-  DOMAIN_MEMBERS,
-  DOMAIN_MEMBERS_NEW,
-  DOMAIN_STRUCTURES,
-  DOMAIN_NEW,
-  DOMAIN_EDIT,
-} from "@truedat/core/routes";
-import UserSearchFiltersLoader from "@truedat/dd/components/UserSearchFiltersLoader";
-import DomainConcepts from "../../concepts/components/DomainConcepts";
+import { DOMAIN_NEW, DOMAIN_EDIT } from "@truedat/core/routes";
 import { useDomain } from "../../hooks/useDomains";
 import DomainDetail from "./DomainDetail";
-import DomainImplementations from "./DomainImplementations";
-import DomainMembers from "./DomainMembers";
-import DomainStructures from "./DomainStructures";
 import DomainTabs from "./DomainTabs";
 import EditDomain from "./EditDomain";
 import NewDomain from "./NewDomain";
-import AddDomainMember from "./AddDomainMember";
+import DomainContent from "./DomainContent";
 
-const RolesLoader = React.lazy(() =>
-  import("@truedat/auth/roles/components/RolesLoader")
-);
-
-export const Domain = ({ domainId }) => {
+export const Domain = ({ domainId, domains, taxonomyConfig }) => {
   const { data: domain } = useDomain(domainId);
-  const ddAuthorized = useAuthorized("data_dictionary");
-  const dqAuthorized = useAuthorized("quality");
 
   return domain ? (
     <Segment>
@@ -49,54 +28,13 @@ export const Domain = ({ domainId }) => {
         />
         <>
           <DomainDetail id={domain.id} />
-          <DomainTabs domain={domain} />
+          <DomainTabs domain={domain} taxonomyConfig={taxonomyConfig} />
           <Segment attached="bottom">
-            <Switch>
-              <Route
-                exact
-                path={DOMAIN_CONCEPTS}
-                render={() => <DomainConcepts domain={domain} />}
-              />
-              <Route
-                exact
-                path={DOMAIN_STRUCTURES}
-                render={() =>
-                  ddAuthorized ? (
-                    <DomainStructures domain={domain} />
-                  ) : (
-                    <Unauthorized />
-                  )
-                }
-              />
-              <Route
-                exact
-                path={DOMAIN_IMPLEMENTATIONS}
-                render={() =>
-                  dqAuthorized ? (
-                    <>
-                      <UserSearchFiltersLoader scope="rule_implementation" />
-                      <DomainImplementations domain={domain} />
-                    </>
-                  ) : (
-                    <Unauthorized />
-                  )
-                }
-              />
-              <Route
-                exact
-                path={DOMAIN_MEMBERS}
-                render={() => <DomainMembers domainId={domain.id} />}
-              />
-              <Route
-                path={DOMAIN_MEMBERS_NEW}
-                render={({ match }) => (
-                  <>
-                    <RolesLoader />
-                    <AddDomainMember id={parseInt(match?.params?.id)} />
-                  </>
-                )}
-              />
-            </Switch>
+            <DomainContent
+              domain={domain}
+              domains={domains}
+              taxonomyConfig={taxonomyConfig}
+            />
           </Segment>
         </>
       </Switch>
@@ -106,6 +44,8 @@ export const Domain = ({ domainId }) => {
 
 Domain.propTypes = {
   domainId: PropTypes.number,
+  domains: PropTypes.array,
+  taxonomyConfig: PropTypes.object,
 };
 
 export default Domain;

package/src/taxonomy/components/DomainCards.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { Card, Header, Icon, Message, Input } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { linkTo } from "@truedat/core/routes";
+import DomainsActions from "./DomainsActions";
+
+export const DomainCard = ({
+  id,
+  name,
+  type,
+  description,
+  childCount,
+  domain_group,
+}) => (
+  <Card key={id} link as={Link} to={linkTo.DOMAIN({ id })}>
+    <Card.Content>
+      <Card.Header>
+        <Icon name="cube" />
+        {name}
+      </Card.Header>
+      <Card.Meta>
+        {_.get("name")(domain_group) && (
+          <>
+            <Icon name="object group" /> {_.get("name")(domain_group)}
+            <br />
+          </>
+        )}
+        <span>{type || <FormattedMessage id="domain" />}</span>
+      </Card.Meta>
+    </Card.Content>
+    <Card.Content description={description} />
+    <Card.Content extra>
+      <Icon name="cubes" />
+      <FormattedMessage
+        id="domain.props.children"
+        values={{ count: childCount }}
+      />
+    </Card.Content>
+  </Card>
+);
+
+DomainCard.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+  type: PropTypes.string,
+  childCount: PropTypes.number,
+  description: PropTypes.string,
+  domain_group: PropTypes.object,
+};
+
+export const DomainCards = ({ actions, domain, domains }) => {
+  const [domainsFilter, setDomainFilter] = useState("");
+  const { formatMessage } = useIntl();
+
+  const domainChildren = _.filter(["parent_id", domain?.id || null])(domains);
+  const visibleDomains = _.flow(
+    _.map((domain) => {
+      const children = _.filter(({ parent_id }) => parent_id == domain.id)(
+        domains
+      );
+      return { childCount: children.length, ...domain };
+    }),
+    _.filter((domain) =>
+      domain.name.toLowerCase().includes(domainsFilter.toLowerCase())
+    ),
+    _.orderBy("name", "asc")
+  )(domainChildren);
+  return (
+    <>
+      <Header as="h4">
+        <Header.Content className="taxonomy-domains-domaincards-header-content">
+          <div>
+            <Input
+              icon="search"
+              value={domainsFilter}
+              placeholder={formatMessage({
+                id: "domains.search.placeholder",
+              })}
+              onChange={(_e, { value }) => setDomainFilter(value)}
+            />
+          </div>
+          {_.isEmpty(domain) ? <DomainsActions actions={actions} /> : null}
+        </Header.Content>
+      </Header>
+
+      {_.isEmpty(visibleDomains) && !_.isEmpty(domainChildren) ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="domains.search.results.empty" />
+          </Header.Content>
+        </Header>
+      ) : null}
+
+      {_.isEmpty(domainChildren) && domain && domain.id ? (
+        <Message header={formatMessage({ id: "domain.children.empty" })} />
+      ) : null}
+
+      <Card.Group>{visibleDomains.map(DomainCard)}</Card.Group>
+    </>
+  );
+};
+
+DomainCards.propTypes = {
+  actions: PropTypes.object,
+  domains: PropTypes.array,
+  domain: PropTypes.object,
+};
+
+export default DomainCards;