@truedat/dd 4.48.12 → 4.49.1

package/src/components/TagStructureButton.js

@@ -0,0 +1,58 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { Button, Popup } from "semantic-ui-react";
+import StructureTagForm from "./StructureTagForm";
+
+export const TagStructureButton = ({ savingId, structureId, tags }) => {
+  const { formatMessage } = useIntl();
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    setOpen(savingId === structureId);
+  }, [savingId, structureId]);
+  const structureTag = { dataStructureId: structureId };
+  return _.isEmpty(tags) ? null : (
+    <Popup
+      on="click"
+      basic
+      flowing
+      onOpen={() => setOpen(true)}
+      onClose={() => setOpen(false)}
+      open={open}
+      content={
+        <StructureTagForm
+          saving={!!savingId}
+          structureTag={structureTag}
+          tags={tags}
+        />
+      }
+      position="bottom center"
+      size="large"
+      positionFixed
+      trigger={
+        <Button
+          style={{ marginLeft: "0.5em" }}
+          icon="plus"
+          size="tiny"
+          circular
+          basic
+          content={formatMessage({ id: "structure.add.tag" })}
+        />
+      }
+    />
+  );
+};
+
+TagStructureButton.propTypes = {
+  savingId: PropTypes.string,
+  structureId: PropTypes.string,
+  tags: PropTypes.array,
+};
+
+export const mapStateToProps = ({ structureTagSaving }) => ({
+  savingId: structureTagSaving,
+});
+
+export default connect(mapStateToProps)(TagStructureButton);

package/src/components/Tags.js

@@ -0,0 +1,33 @@
+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 { STRUCTURE_TAGS_NEW } from "@truedat/core/routes";
+import TagCards from "./TagCards";
+
+export const Tags = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Segment>
+      <Header as="h2">
+        <Button
+          floated="right"
+          primary
+          as={Link}
+          to={STRUCTURE_TAGS_NEW}
+          content={formatMessage({ id: "tags.actions.create" })}
+        />
+        <Icon name="tags" circular />
+        <Header.Content>
+          <FormattedMessage id="tags.header" />
+          <Header.Subheader>
+            <FormattedMessage id="tags.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <TagCards />
+    </Segment>
+  );
+};
+
+export default Tags;

package/src/components/TagsRoutes.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Route, Switch, useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { STRUCTURE_TAGS, STRUCTURE_TAG_EDIT, STRUCTURE_TAGS_NEW } from "@truedat/core/routes";
+import { TAG_QUERY } from "../api/queries";
+import Tag from "./Tag";
+import Tags from "./Tags";
+
+export const TagLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(TAG_QUERY, {
+    variables: { id },
+  });
+  if (error) return null;
+  const tag = data?.tag;
+  return <Tag id={id} tag={tag} loading={loading} />;
+};
+
+export const AuthorizedTagsRoutes = () => (
+  <Switch>
+    <Route exact path={STRUCTURE_TAGS_NEW} render={() => <Tag />} />
+    <Route exact path={STRUCTURE_TAGS} render={() => <Tags />} />
+    <Route path={STRUCTURE_TAG_EDIT} render={() => <TagLoader />} />
+  </Switch>
+);
+
+export const TagsRoutes = () => {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={STRUCTURE_TAGS}
+      render={() => (authorized ? <AuthorizedTagsRoutes /> : <Unauthorized />)}
+    />
+  );
+};
+
+export default TagsRoutes;

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

@@ -24,7 +24,6 @@ describe("<StructureSummary />", () => {
       profile_permission: true,
       confidential: true,
     },
-    linkedStructureTagsLoading: false,
     structureVersions: [{ updated_at: "2019-01-02T03:04:05Z" }],
     structure,
     authentication: { role: "admin" },
@@ -41,12 +40,6 @@ describe("<StructureSummary />", () => {
     expect(container).toMatchSnapshot();
   });
 
-  it("renders loading when linkedStructureTagsLoading is true", () => {
-    const customState = _.set("linkedStructureTagsLoading", true)(state);
-    const { findByText } = render(<StructureSummary />, { state: customState });
-    expect(findByText("Loading")).toBeTruthy();
-  });
-
   it("renders label when grant provided", async () => {
     const customState = _.set("structure.grant", { detail: { foo: "bar" } })(
       state

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

@@ -1,13 +1,87 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
 import { StructureTag } from "../StructureTag";
 
 describe("<StructureTag />", () => {
+  const tagName = "Tag 42";
+  const structureTag = {
+    id: "1",
+    dataStructureId: "1",
+    inherit: false,
+    tag: { id: "1", name: tagName },
+  };
+  const props = {
+    structureTag,
+    editable: true,
+    savingId: null,
+  };
+
   it("matches the latest snapshot", () => {
-    const createStructureTag = jest.fn();
-    const wrapper = shallow(
-      <StructureTag createStructureTag={createStructureTag} />
+    const { container } = render(<StructureTag {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Show update modal when click in tag edit icon", async () => {
+    const { getByLabelText, container } = render(<StructureTag {...props} />);
+    fireEvent.click(container.getElementsByClassName("edit")[0]);
+    await waitFor(() => expect(getByLabelText("Comments")).toBeInTheDocument());
+  });
+
+  it("Show tooltip with description and comment", async () => {
+    const comment = "foo comment";
+    const description = "foo description";
+    const tagWithDescriptionProps = {
+      ...props,
+      structureTag: {
+        ...structureTag,
+        tag: { id: 2, name: tagName, description },
+        comment,
+      },
+    };
+
+    const { getByText } = render(<StructureTag {...tagWithDescriptionProps} />);
+
+    fireEvent.mouseEnter(getByText(tagName));
+
+    await waitFor(() => expect(getByText("Comments")).toBeTruthy());
+    await waitFor(() => expect(getByText(comment)).toBeTruthy());
+    await waitFor(() => expect(getByText(description)).toBeTruthy());
+  });
+
+  it("Show tooltip with description", async () => {
+    const description = "foo description";
+    const tagWithDescriptionWithoutCommentProps = {
+      ...props,
+      structureTag: {
+        ...structureTag,
+        tag: { id: 2, name: tagName, description },
+      },
+    };
+
+    const { getByText, queryByText } = render(
+      <StructureTag {...tagWithDescriptionWithoutCommentProps} />
     );
-    expect(wrapper).toMatchSnapshot();
+
+    fireEvent.mouseEnter(getByText(tagName));
+
+    await waitFor(() => expect(queryByText("Comment")).not.toBeInTheDocument());
+    await waitFor(() => expect(getByText(description)).toBeInTheDocument());
+  });
+
+  it("Show tooltip with comment", async () => {
+    const comment = "foo comment";
+    const tagWithCommentProps = {
+      ...props,
+      structureTag: {
+        ...structureTag,
+        comment,
+      },
+    };
+    const { getByText } = render(<StructureTag {...tagWithCommentProps} />);
+    fireEvent.mouseEnter(getByText(tagName));
+
+    await waitFor(() => expect(getByText("Comments")).toBeTruthy());
+    await waitFor(() => expect(getByText(comment)).toBeTruthy());
   });
 });

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

@@ -1,72 +1,121 @@
 import React from "react";
-import { waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { waitFor, within } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import { DOMAINS_QUERY } from "@truedat/core/api/queries";
-import StructureTagForm from "../StructureTagForm";
-
-const domainsMock = {
-  request: { query: DOMAINS_QUERY },
-  result: { data: { domains: [{ id: "123", name: "foo" }] } },
-};
-
-const renderOpts = {
-  mocks: [domainsMock],
-};
+import userEvent from "@testing-library/user-event";
+import { StructureTagForm } from "../StructureTagForm";
 
 describe("<StructureTagForm />", () => {
-  const onSubmit = jest.fn();
+  const tags = [
+    { id: "1", name: "Tag1", description: "desc1" },
+    { id: "2", name: "Tag2", description: "desc2" },
+    { id: "3", name: "LongTag", description: "verylong".repeat(5) },
+  ];
   const structureTag = {
-    id: 1,
-    name: "foo",
-    description: "bar",
-    domainIds: [],
-  };
-  const saving = false;
-  const props = {
-    onSubmit,
-    structureTag,
-    saving,
+    id: "55",
+    comment: "foo",
+    insertedAt: "foo",
+    inherited: false,
+    tag: {
+      id: "123",
+    },
+    dataStructureId: "56",
+    tagId: "57",
   };
 
-  it("matches the latest snapshot", async () => {
-    const { container, findByRole } = render(
-      <StructureTagForm {...props} />,
-      renderOpts
+  it("matches the latest snapshot create", async () => {
+    const structureTag = { structureId: "123" };
+    const props = { structureTag, tags };
+    const { container, findByRole, queryByRole } = render(
+      <StructureTagForm {...props} />
     );
-    await findByRole("button", { name: /save/i });
+    expect(await findByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(
+      await queryByRole("button", { name: "Delete" })
+    ).not.toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 
-  it("calls onSubmit with data on submit", async () => {
-    const { getByRole } = render(<StructureTagForm {...props} />, renderOpts);
+  it("matches the latest snapshot edit", async () => {
+    const props = { structureTag };
+    const { container, findByRole } = render(<StructureTagForm {...props} />);
+    expect(await findByRole("button", { name: "Save" })).toBeInTheDocument();
+    expect(await findByRole("button", { name: "Delete" })).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
 
-    // Submit button should initially be disabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).toBeDisabled()
-    );
+  it("save button enabled if there is only one tag available", async () => {
+    const structureTag = { structureId: "123" };
+    const props = { structureTag, tags: [tags[0]] };
+    const { getByRole } = render(<StructureTagForm {...props} />);
+    await waitFor(() => {
+      expect(getByRole("button", { name: "Save" })).toBeEnabled();
+    });
+  });
 
-    // Name
-    userEvent.type(getByRole("textbox", { name: /name/i }), "foo");
+  it("save button disabled if there are multiple tags", async () => {
+    const structureTag = { structureId: "123" };
+    const props = { structureTag, tags };
+    const { getByRole } = render(<StructureTagForm {...props} />);
+    await waitFor(() => {
+      expect(getByRole("button", { name: "Save" })).toBeDisabled();
+    });
+  });
 
-    // Submit button should now be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /save/i })).not.toBeDisabled()
-    );
+  it("Tag dropdown options contain name and description", async () => {
+    const structureTag = { structureId: "123" };
+    const props = { structureTag, tags };
+    const { findByRole } = render(<StructureTagForm {...props} />);
+    expect(await findByRole("option", { name: /Tag2/ })).toBeInTheDocument();
+    expect(await findByRole("option", { name: /desc1/ })).toBeInTheDocument();
+  });
 
-    // Name
-    userEvent.type(getByRole("textbox", { name: /description/i }), "bar");
+  it("Tag dropdown items have 'description' class", async () => {
+    const longText = tags[2].description;
+    const structureTag = { structureId: "123" };
+    const props = { structureTag, tags };
+    const { findByRole } = render(<StructureTagForm {...props} />);
+    const option = await findByRole("option", { name: /verylong/ });
+    expect(within(option).getByText(longText)).toHaveClass("description");
+  });
 
-    // Submit
-    userEvent.click(getByRole("button", { name: /save/i }));
+  it("calls tagStructure on save", async () => {
+    const tagStructure = jest.fn();
+    const props = { structureTag, tagStructure };
+    const { findByLabelText, findByRole, queryByRole } = render(
+      <StructureTagForm {...props} />
+    );
+    userEvent.type(await findByLabelText("Comments"), "bar");
+    userEvent.click(await findByLabelText(/Inherited/));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Save" })).toBeEnabled();
+    });
+    userEvent.click(await findByRole("button", { name: "Save" }));
+    await waitFor(() => {
+      expect(tagStructure.mock.calls.length).toBe(1);
+    });
+    expect(tagStructure.mock.calls[0][0]).toEqual({
+      comment: "foobar",
+      dataStructureId: structureTag.dataStructureId,
+      id: structureTag.id,
+      inherit: true,
+      tagId: structureTag.tagId,
+    });
+  });
 
+  it("calls deleteStructureTag on delete", async () => {
+    const deleteStructureTag = jest.fn();
+    const props = { structureTag, deleteStructureTag };
+    const { findByLabelText, findByRole, queryByRole } = render(
+      <StructureTagForm {...props} />
+    );
     await waitFor(() => {
-      expect(onSubmit.mock.calls.length).toBe(1);
+      expect(queryByRole("button", { name: "Delete" })).toBeEnabled();
     });
-    expect(onSubmit.mock.calls[0][0]).toMatchObject({
-      name: "foofoo",
-      description: "barbar",
-      domainIds: [],
+    userEvent.type(await findByLabelText("Comments"), "bar");
+    userEvent.click(await findByRole("button", { name: "Delete" }));
+    await waitFor(() => {
+      expect(deleteStructureTag.mock.calls.length).toBe(1);
     });
+    expect(deleteStructureTag).toHaveBeenCalledWith(structureTag.id);
   });
 });

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

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

package/src/components/__tests__/{StructureTagsCards.spec.js → TagCards.spec.js}

@@ -1,17 +1,17 @@
 import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import { STRUCTURE_TAGS_QUERY } from "../../api/queries";
-import StructureTagsCards from "../StructureTagsCards";
+import { TAGS_QUERY } from "../../api/queries";
+import TagCards from "../TagCards";
 import en from "../../messages/en";
 
-const structureTagsMock = {
-  request: { query: STRUCTURE_TAGS_QUERY },
+const tagsMock = {
+  request: { query: TAGS_QUERY },
   result: {
     data: {
-      structureTags: [
+      tags: [
         {
-          __typename: "StructureTag",
+          __typename: "Tag",
           id: "1",
           name: "tag1",
           description: "tag_desc_1",
@@ -19,7 +19,7 @@ const structureTagsMock = {
           structureCount: 1,
         },
         {
-          __typename: "StructureTag",
+          __typename: "Tag",
           id: "2",
           name: "tag2",
           description: "tag_desc_2",
@@ -32,11 +32,11 @@ const structureTagsMock = {
 };
 const messages = { en };
 
-const renderOpts = { mocks: [structureTagsMock], messages };
+const renderOpts = { mocks: [tagsMock], messages };
 
-describe("<StructureTagsCards />", () => {
+describe("<TagCards />", () => {
   it("matches the latest snapshot, renders a link for each tag", async () => {
-    const { container, getByRole } = render(<StructureTagsCards />, renderOpts);
+    const { container, getByRole } = render(<TagCards />, renderOpts);
     await waitFor(() => {
       expect(getByRole("link", { name: /tag1/i })).toBeInTheDocument();
       expect(getByRole("link", { name: /tag2/i })).toBeInTheDocument();

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import TagCrumbs from "../TagCrumbs";
+
+describe("<TagCrumbs />", () => {
+  it("matches the latest snapshot", () => {
+    const container = render(<TagCrumbs action="tags.actions.edit" />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { DOMAINS_QUERY } from "@truedat/core/api/queries";
+import TagForm from "../TagForm";
+
+const domainsMock = {
+  request: { query: DOMAINS_QUERY },
+  result: { data: { domains: [{ id: "123", name: "foo" }] } },
+};
+
+const renderOpts = {
+  mocks: [domainsMock],
+};
+
+describe("<TagForm />", () => {
+  const onSubmit = jest.fn();
+  const tag = {
+    id: 1,
+    name: "foo",
+    description: "bar",
+    domainIds: [],
+  };
+  const saving = false;
+  const props = {
+    onSubmit,
+    tag,
+    saving,
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, findByRole } = render(
+      <TagForm {...props} />,
+      renderOpts
+    );
+    await findByRole("button", { name: /save/i });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("calls onSubmit with data on submit", async () => {
+    const { getByRole } = render(<TagForm {...props} />, renderOpts);
+
+    // Submit button should initially be disabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeDisabled()
+    );
+
+    // Name
+    userEvent.type(getByRole("textbox", { name: /name/i }), "foo");
+
+    // Submit button should now be enabled
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).not.toBeDisabled()
+    );
+
+    // Name
+    userEvent.type(getByRole("textbox", { name: /description/i }), "bar");
+
+    // Submit
+    userEvent.click(getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(onSubmit.mock.calls.length).toBe(1);
+    });
+    expect(onSubmit.mock.calls[0][0]).toMatchObject({
+      name: "foofoo",
+      description: "barbar",
+      domainIds: [],
+    });
+  });
+});

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Tags from "../Tags";
+
+describe("<Tags />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<Tags />);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -11,30 +11,15 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
       <div
         class="ten wide column"
       >
-        <div
-          class="dimmable"
+        <h2
+          class="ui header"
         >
-          <h2
-            class="ui header"
-          >
-            <div
-              class="content"
-            >
-              s1
-            </div>
-          </h2>
           <div
-            class="ui inverted dimmer"
+            class="content"
           >
-            <div
-              class="content"
-            >
-              <div
-                class="ui loader"
-              />
-            </div>
+            s1
           </div>
-        </div>
+        </h2>
       </div>
       <div
         class="right aligned six wide column"
@@ -74,6 +59,9 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ui active loader"
+  />
   <p
     class="item-description"
   >
@@ -167,35 +155,20 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
       <div
         class="ten wide column"
       >
-        <div
-          class="dimmable"
+        <h2
+          class="ui header"
         >
-          <h2
-            class="ui header"
-          >
-            <div
-              class="content"
-            >
-              some alias
-              <div
-                class="sub header"
-              >
-                s1
-              </div>
-            </div>
-          </h2>
           <div
-            class="ui inverted dimmer"
+            class="content"
           >
+            some alias
             <div
-              class="content"
+              class="sub header"
             >
-              <div
-                class="ui loader"
-              />
+              s1
             </div>
           </div>
-        </div>
+        </h2>
       </div>
       <div
         class="right aligned six wide column"
@@ -235,6 +208,9 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="ui active loader"
+  />
   <p
     class="item-description"
   >