@truedat/dd 4.48.11 → 4.49.0

package/src/components/LinkedStructureTag.js

@@ -1,124 +0,0 @@
-import _ from "lodash/fp";
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import { Icon, Label, Popup, Header } from "semantic-ui-react";
-import { connect } from "react-redux";
-import LinkStructureTagForm from "./LinkStructureTagForm";
-
-export const LinkedStructureTag = ({
-  id,
-  _embedded,
-  editable,
-  comment,
-  loading,
-  structureTags,
-}) => {
-  const { formatMessage } = useIntl();
-  const name = _embedded.data_structure_tag.name;
-  const description = _embedded.data_structure_tag.description;
-  const tagId = _embedded.data_structure_tag.id;
-  const [openDescription, setOpenDescription] = useState(false);
-  const [openForm, setOpenForm] = useState(false);
-
-  useEffect(() => {
-    if (loading) setOpenForm(false);
-  }, [loading, setOpenForm]);
-
-  const trigger = editable ? <Icon link name="edit" /> : null;
-
-  const renderTooltip = () => {
-    const descriptionTooltip = _.isEmpty(description) ? null : (
-      <Header as="h2" subheader={description} />
-    );
-
-    const commentTooltip = _.isEmpty(comment) ? null : (
-      <>
-        <Header
-          as="h5"
-          content={formatMessage({ id: "structure.tag.tooltip.commentTitle" })}
-        />
-        <p>{comment}</p>
-      </>
-    );
-
-    return (
-      <>
-        {descriptionTooltip}
-        {commentTooltip}
-      </>
-    );
-  };
-
-  return (
-    <Popup
-      basic
-      open={openDescription}
-      onOpen={() => {
-        const commentCondition = !_.isEmpty(comment);
-        const descriptionCondition = !_.isEmpty(description);
-        const openFormCondition = !openForm;
-
-        const openTooltipCondition =
-          (commentCondition || descriptionCondition) && openFormCondition;
-
-        if (openTooltipCondition) setOpenDescription(true);
-      }}
-      onClose={() => setOpenDescription(false)}
-      positionFixed
-      className="popup-tag"
-      trigger={
-        <Label tag style={{ marginLeft: "1.5em" }}>
-          {_.isEmpty(structureTags) ? null : (
-            <Popup
-              on="click"
-              basic
-              onOpen={() => {
-                setOpenForm(true);
-                setOpenDescription(false);
-              }}
-              onClose={() => setOpenForm(false)}
-              open={openForm}
-              flowing
-              content={
-                <LinkStructureTagForm
-                  comment={comment}
-                  linkId={id}
-                  tagId={tagId}
-                />
-              }
-              position="bottom center"
-              size="large"
-              positionFixed
-              trigger={trigger}
-            />
-          )}
-
-          {name}
-        </Label>
-      }
-    >
-      {renderTooltip()}
-    </Popup>
-  );
-};
-
-LinkedStructureTag.propTypes = {
-  _embedded: PropTypes.object,
-  comment: PropTypes.string,
-  editable: PropTypes.bool,
-  id: PropTypes.number,
-  loading: PropTypes.bool,
-  structureTags: PropTypes.array,
-};
-
-const mapStateToProps = ({
-  editableStructureTags,
-  linkingStructureTags,
-  deletingStructureTags,
-}) => ({
-  loading: linkingStructureTags || deletingStructureTags,
-  structureTags: editableStructureTags,
-});
-
-export default connect(mapStateToProps)(LinkedStructureTag);

package/src/components/StructureLinkTagButton.js

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

package/src/components/StructureTagsCards.js

@@ -1,92 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Link } from "react-router-dom";
-import { Button, Card, Message, Icon } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import { useQuery } from "@apollo/client";
-import { ConfirmModal, Loading } from "@truedat/core/components";
-import { linkTo } from "@truedat/core/routes";
-import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
-import { STRUCTURE_TAGS_QUERY } from "../api/queries";
-import { deleteStructureTag } from "../routines";
-
-const EmptyMessage = () => (
-  <Message icon info>
-    <Icon name="folder open outline" />
-    <Message.Content>
-      <Message.Header>
-        <FormattedMessage id="structureTags.empty" />
-      </Message.Header>
-    </Message.Content>
-  </Message>
-);
-
-export const StructureTagsCards = ({ deleteStructureTag, structureTags }) => {
-  if (_.isEmpty(structureTags)) return <EmptyMessage />;
-  return (
-    <Card.Group>
-      {structureTags.map((structureTag) => (
-        <Card key={structureTag?.id}>
-          <Card.Content>
-            <Card.Header
-              as={Link}
-              to={linkTo.STRUCTURE_TAGS_EDIT({ id: structureTag.id })}
-            >
-              {_.prop("name")(structureTag)}
-            </Card.Header>
-            <Card.Description>
-              {_.prop("description")(structureTag)}
-            </Card.Description>
-          </Card.Content>
-          <Card.Content extra>
-            <div className="ui actions">
-              <ConfirmModal
-                icon="trash"
-                trigger={<Button icon="trash" basic color="red" />}
-                header={
-                  <FormattedMessage id="structureTags.actions.delete.confirmation.header" />
-                }
-                content={
-                  structureTag.structureCount > 0 ? (
-                    <FormattedMessage
-                      id="structureTags.actions.delete.confirmation.content"
-                      values={{
-                        name: <i>{`'${structureTag.name}'`}</i>,
-                        count: structureTag.structureCount,
-                      }}
-                    />
-                  ) : (
-                    <FormattedMessage
-                      id="structureTags.actions.delete.noStructures.confirmation.content"
-                      values={{ name: <i>{`'${structureTag.name}'`}</i> }}
-                    />
-                  )
-                }
-                onConfirm={() => deleteStructureTag({ id: structureTag.id })}
-              />
-            </div>
-          </Card.Content>
-        </Card>
-      ))}
-    </Card.Group>
-  );
-};
-
-StructureTagsCards.propTypes = {
-  structureTags: PropTypes.array,
-  deleteStructureTag: PropTypes.func,
-};
-
-export const StructureTagsCardsLoader = (props) => {
-  const { loading, error, data } = useQuery(STRUCTURE_TAGS_QUERY);
-  if (error) return null;
-  if (loading) return <Loading />;
-  const structureTags = _.sortBy(accentInsensitivePathOrder("name"))(
-    data?.structureTags || []
-  );
-  return <StructureTagsCards structureTags={structureTags} {...props} />;
-};
-
-export default connect(null, { deleteStructureTag })(StructureTagsCardsLoader);

package/src/components/StructureTagsCrumbs.js

@@ -1,44 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
-import { STRUCTURE_TAGS, linkTo } from "@truedat/core/routes";
-
-export const StructureTagsCrumbs = ({ structureTag, action }) => {
-  const rootBreadcrumb =
-    !_.isEmpty(structureTag) && action
-      ? { as: Link, to: linkTo.STRUCTURE_TAG(structureTag), active: false }
-      : { active: true };
-  return (
-    <Breadcrumb>
-      <Breadcrumb.Section as={Link} to={STRUCTURE_TAGS} active={false}>
-        <FormattedMessage id="structureTags.crumbs.root" />
-      </Breadcrumb.Section>
-      {_.isEmpty(structureTag) ? null : (
-        <>
-          <Breadcrumb.Divider icon="right angle" />
-          <Breadcrumb.Section {...rootBreadcrumb}>
-            {structureTag.name}
-          </Breadcrumb.Section>
-        </>
-      )}
-      {action ? (
-        <>
-          <Breadcrumb.Divider icon="right angle" />
-          <Breadcrumb.Section active>
-            <FormattedMessage id={action} />
-          </Breadcrumb.Section>
-        </>
-      ) : null}
-    </Breadcrumb>
-  );
-};
-
-StructureTagsCrumbs.propTypes = {
-  structureTag: PropTypes.object,
-  action: PropTypes.string,
-};
-
-export default StructureTagsCrumbs;

package/src/components/StructureTagsRoutes.js

@@ -1,45 +0,0 @@
-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_TAGS_EDIT,
-  STRUCTURE_TAGS_NEW,
-} from "@truedat/core/routes";
-import { STRUCTURE_TAG_QUERY } from "../api/queries";
-import StructureTag from "./StructureTag";
-import StructureTags from "./StructureTags";
-
-export const StructureTagLoader = () => {
-  const { id } = useParams();
-  const { loading, error, data } = useQuery(STRUCTURE_TAG_QUERY, {
-    variables: { id },
-  });
-  if (error) return null;
-  const structureTag = data?.structureTag;
-  return <StructureTag id={id} structureTag={structureTag} loading={loading} />;
-};
-
-export const AuthorizedStructureTagsRoutes = () => (
-  <Switch>
-    <Route exact path={STRUCTURE_TAGS_NEW} render={() => <StructureTag />} />
-    <Route exact path={STRUCTURE_TAGS} render={() => <StructureTags />} />
-    <Route path={STRUCTURE_TAGS_EDIT} render={() => <StructureTagLoader />} />
-  </Switch>
-);
-
-export const StructureTagsRoutes = () => {
-  const authorized = useAuthorized();
-  return (
-    <Route
-      path={STRUCTURE_TAGS}
-      render={() =>
-        authorized ? <AuthorizedStructureTagsRoutes /> : <Unauthorized />
-      }
-    />
-  );
-};
-
-export default StructureTagsRoutes;

package/src/components/TagsHeader.js

@@ -1,32 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { connect } from "react-redux";
-import PropTypes from "prop-types";
-import LinkedStructureTag from "./LinkedStructureTag";
-import StructureLinkTagButton from "./StructureLinkTagButton";
-
-export const TagsHeader = ({ linkedStructureTags, editable }) => (
-  <>
-    {_.isEmpty(linkedStructureTags)
-      ? null
-      : _.flow(
-          _.sortBy("inserted_at"),
-          _.map.convert({ cap: false })((link, i) => (
-            <LinkedStructureTag key={i} editable={editable} {...link} />
-          ))
-        )(linkedStructureTags)}
-    <StructureLinkTagButton />
-  </>
-);
-
-TagsHeader.propTypes = {
-  editable: PropTypes.bool,
-  linkedStructureTags: PropTypes.array,
-};
-
-const mapStateToProps = ({ linkedStructureTags, editableStructureTags }) => ({
-  linkedStructureTags,
-  editable: !!editableStructureTags,
-});
-
-export default connect(mapStateToProps)(TagsHeader);

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

@@ -1,184 +0,0 @@
-import React from "react";
-import { intl } from "@truedat/test/intl-stub";
-import { render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { LinkStructureTagForm } from "../LinkStructureTagForm";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<LinkStructureTagForm />", () => {
-  const deleteLinkStructureTag = jest.fn();
-  const linkStructureTag = jest.fn();
-  const structureTags = [
-    { id: 1, name: "Tag1", description: "description test" },
-    { id: 2, name: "Tag2", description: "large desc".repeat(5) },
-    { id: 3, name: "Tag without description" },
-  ];
-  const linkedStructureTags = [
-    {
-      id: 1,
-      comment: "foo",
-      inserted_at: "foo",
-      updated_at: "foo",
-      _embedded: {
-        data_structure: { id: 1, external_id: "baz" },
-        data_structure_tag: { ...structureTags[2] },
-      },
-    },
-  ];
-
-  const comment = "foo";
-  const structureId = 1;
-  const tagId = 3;
-  const linkId = 1;
-
-  const propsCreate = {
-    deleteLinkStructureTag,
-    linkedStructureTags,
-    linkStructureTag,
-    structureId,
-    structureTags,
-  };
-
-  const propsUpdate = {
-    deleteLinkStructureTag,
-    comment,
-    linkedStructureTags,
-    linkId,
-    linkStructureTag,
-    structureId,
-    structureTags,
-    tagId,
-  };
-
-  it("matches the latest snapshot create", async () => {
-    const { container, findByRole } = render(
-      <LinkStructureTagForm {...propsCreate} />
-    );
-    await findByRole("button", { name: /add/ });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("matches the latest snapshot edit", async () => {
-    const { container, findByRole } = render(
-      <LinkStructureTagForm {...propsUpdate} />
-    );
-    await findByRole("button", { name: /edit/ });
-    await findByRole("button", { name: /delete/ });
-    expect(container).toMatchSnapshot();
-  });
-
-  it("matches the latest snapshot create without comment", async () => {
-    const linkedStructureTagWithoutComment = {
-      ...linkedStructureTags[0],
-    };
-    delete linkedStructureTagWithoutComment.comment;
-
-    const propsCreateWithoutComment = {
-      ...propsCreate,
-      linkedStructureTags: [linkedStructureTagWithoutComment],
-    };
-
-    const { container, getByRole, findByText } = render(
-      <LinkStructureTagForm {...propsCreateWithoutComment} />
-    );
-
-    // Select tag
-    userEvent.click(await findByText("Tag2"));
-
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("create button enabled if there is only one tag available", async () => {
-    const propsCreateWithOneStrutureTagAvailable = {
-      ...propsCreate,
-      structureTags: [structureTags[1], structureTags[2]],
-    };
-
-    const { container, getByRole } = render(
-      <LinkStructureTagForm {...propsCreateWithOneStrutureTagAvailable} />
-    );
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it("Tag dropdown show tag description", async () => {
-    const { getByText } = render(<LinkStructureTagForm {...propsCreate} />);
-    await waitFor(() =>
-      expect(getByText("description test")).toBeInTheDocument()
-    );
-  });
-
-  it("Tag dropdown with tag with large description show ellipsis", async () => {
-    const { getByText } = render(<LinkStructureTagForm {...propsCreate} />);
-
-    const tagElement = getByText("Tag2");
-
-    await waitFor(() => expect(tagElement).toBeInTheDocument());
-
-    const descriptionElement = tagElement.parentElement.firstElementChild;
-
-    expect(descriptionElement).toHaveClass("description");
-  });
-
-  it("calls ", async () => {
-    const { queryByTestId, findByRole, findByText, getByRole } = render(
-      <LinkStructureTagForm {...{ ...propsCreate, linkedStructureTags: [] }} />
-    );
-
-    // Submit button should initially be disabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).toBeDisabled()
-    );
-
-    // Select tag
-    userEvent.click(await findByText("Tag1"));
-
-    // Submit button should now be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
-    );
-
-    // Description
-    // Issue: https://github.com/testing-library/user-event/issues/346
-    userEvent.type(queryByTestId("comment-id"), "x");
-    userEvent.type(queryByTestId("comment-id"), "yz");
-
-    userEvent.click(await findByRole("button", { name: /add/ }));
-
-    await waitFor(() =>
-      expect(linkStructureTag).toHaveBeenCalledWith({
-        structureId,
-        tagId: 1,
-        tag: { comment: "xyz" },
-      })
-    );
-  });
-
-  it("calls deleteLinkStructureTag on delete", async () => {
-    const { findByRole, getByRole } = render(
-      <LinkStructureTagForm {...propsUpdate} />
-    );
-
-    // Delete button should be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /delete/ })).not.toBeDisabled()
-    );
-
-    userEvent.click(await findByRole("button", { name: /delete/ }));
-
-    await waitFor(() =>
-      expect(deleteLinkStructureTag).toHaveBeenCalledWith({
-        structureId,
-        tagId,
-      })
-    );
-  });
-});