@truedat/dd 4.48.12 → 4.49.1

package/src/components/LinkStructureTagForm.js

@@ -1,163 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Button, Container, Form } from "semantic-ui-react";
-import { connect } from "react-redux";
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
-import { deleteLinkStructureTag, linkStructureTag } from "../routines";
-
-export const LinkStructureTagForm = ({
-  deleteLinkStructureTag,
-  comment,
-  linkedStructureTags,
-  linkId,
-  linkStructureTag,
-  structureId,
-  structureTags,
-  tagId,
-}) => {
-  const { formatMessage } = useIntl();
-  const allTags = _.map("id")(structureTags);
-  const availableTags = _.negate(_.isNil)(tagId)
-    ? allTags
-    : _.difference(
-        allTags,
-        _.map(_.path("_embedded.data_structure_tag.id"))(linkedStructureTags)
-      );
-  const options = _.flow(
-    _.filter(({ id }) => _.includes(id)(availableTags)),
-    _.sortBy(accentInsensitivePathOrder("name")),
-    _.map(({ id, name, description }) => ({
-      value: id,
-      text: name,
-      description: description,
-    }))
-  )(structureTags);
-  const defaultTag = _.negate(_.isNil)(tagId)
-    ? tagId
-    : _.size(options) === 1
-    ? _.head(options).value
-    : null;
-  const submitTitle = _.isNil(tagId)
-    ? "structure.tag.add"
-    : "structure.tag.edit";
-  const onSubmit = (params) => {
-    const payload = {
-      structureId,
-      tagId: params.tag,
-      tag: { comment: params.comment },
-    };
-    linkStructureTag(payload);
-  };
-  const doDelete = () => deleteLinkStructureTag({ structureId, tagId });
-  const { handleSubmit, control, formState } = useForm({
-    mode: "all",
-    defaultValues: {
-      comment: comment || "",
-      tag: defaultTag,
-    },
-  });
-  const { isDirty, isValid } = formState;
-  return (
-    <Container className="link-structure-tag-form">
-      <Form onSubmit={handleSubmit(onSubmit)}>
-        <Controller
-          control={control}
-          name="tag"
-          rules={{ required: true }}
-          render={({
-            field: { onBlur, onChange, value },
-            fieldState: { error },
-          }) => (
-            <Form.Dropdown
-              name="tag"
-              disabled={_.negate(_.isNil)(tagId)}
-              error={!!error}
-              placeholder={formatMessage({
-                id: "structure.tag.dropdown.placeholder",
-              })}
-              label={formatMessage({ id: "structure.tag.dropdown.label" })}
-              onBlur={onBlur}
-              onChange={(_e, { value }) => onChange(value)}
-              clearable
-              search
-              selection
-              options={options}
-              value={value}
-            />
-          )}
-        />
-        <Controller
-          control={control}
-          name="comment"
-          render={({
-            field: { onBlur, onChange, value },
-            fieldState: { error },
-          }) => (
-            <Form.TextArea
-              data-testid="comment-id"
-              error={!!error}
-              name="comment"
-              label={formatMessage({ id: "structure.tag.textArea.label" })}
-              placeholder={formatMessage({
-                id: "structure.tag.textArea.placeholder",
-              })}
-              onBlur={onBlur}
-              onChange={(_e, { value }) => onChange(value)}
-              value={value}
-            />
-          )}
-        />
-        <div className="actions">
-          <Button
-            type="submit"
-            disabled={(!isDirty && options.length > 1) || !isValid}
-            primary
-            content={formatMessage({ id: submitTitle })}
-          />
-          {_.negate(_.isNil)(linkId) && (
-            <Button
-              type="button"
-              onClick={doDelete}
-              secondary
-              content={formatMessage({ id: "structure.tag.delete" })}
-            />
-          )}
-        </div>
-      </Form>
-    </Container>
-  );
-};
-
-LinkStructureTagForm.propTypes = {
-  deleteLinkStructureTag: PropTypes.func,
-  comment: PropTypes.string,
-  linkedStructureTags: PropTypes.array,
-  linkId: PropTypes.number,
-  linkStructureTag: PropTypes.func,
-  structureId: PropTypes.number,
-  structureTags: PropTypes.array,
-  tagId: PropTypes.number,
-};
-
-const mapStateToProps = ({
-  linkedStructureTags,
-  structure,
-  editableStructureTags,
-}) => ({
-  linkedStructureTags,
-  structureId: _.prop("id")(structure),
-  structureTags: editableStructureTags,
-});
-
-const mapDispatchToProps = {
-  deleteLinkStructureTag,
-  linkStructureTag,
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(LinkStructureTagForm);

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);