@truedat/dd 4.48.11 → 4.49.0

package/src/components/StructureTagForm.js

@@ -1,110 +1,170 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { Button, Form } from "semantic-ui-react";
+import React, { useEffect } 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 { HistoryBackButton, DomainSelector } from "@truedat/core/components";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { deleteStructureTag, tagStructure } from "../routines";
+
+const DEFAULT_VALUES = {
+  dataStructureId: null,
+  tagId: null,
+  id: null,
+  inherit: false,
+  comment: "",
+};
 
 export const StructureTagForm = ({
-  loading,
-  onSubmit,
+  deleteStructureTag,
   saving,
   structureTag,
+  tagStructure,
+  tags,
 }) => {
-  const [domainsLoading, setDomainsLoading] = useState(true);
   const { formatMessage } = useIntl();
-  const { handleSubmit, control, formState } = useForm({
+
+  const options = _.flow(
+    _.prop("tag"),
+    _.defaultTo(tags),
+    _.castArray,
+    _.sortBy(accentInsensitivePathOrder("name")),
+    _.map(({ id, name, description }) => ({
+      value: id,
+      text: name,
+      description: description,
+    }))
+  )(structureTag);
+  const { handleSubmit, control, formState, setValue } = useForm({
     mode: "all",
-    defaultValues: _.pick(["name", "description", "domainIds"])(structureTag),
+    defaultValues: {
+      ...DEFAULT_VALUES,
+      ..._.pick(["dataStructureId", "id", "inherit", "comment", "tagId"])(
+        structureTag
+      ),
+    },
   });
-
+  useEffect(() => {
+    if (!structureTag.tagId && _.size(options) === 1) {
+      const tagId = _.head(options).value;
+      setValue("tagId", tagId, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    }
+  }, [options, setValue, structureTag]);
   const { isDirty, isValid } = formState;
-
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} loading={loading || domainsLoading}>
-      <Controller
-        control={control}
-        name="name"
-        rules={{ required: true }}
-        render={({
-          field: { onBlur, onChange, value },
-          fieldState: { error },
-        }) => (
-          <Form.Input
-            autoComplete="off"
-            error={!!error}
-            id="name"
-            label={formatMessage({ id: "structureTagForm.props.name" })}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "structureTagForm.props.name",
-            })}
-            value={value}
-            required
-          />
-        )}
-      />
-      <Controller
-        control={control}
-        name="description"
-        rules={{ required: false }}
-        render={({
-          field: { onBlur, onChange, value },
-          fieldState: { error },
-        }) => (
-          <Form.Input
-            autoComplete="off"
-            error={error}
-            id="description"
-            label={formatMessage({ id: "structureTagForm.props.description" })}
-            onBlur={onBlur}
-            onChange={(_e, { value }) => onChange(value)}
-            placeholder={formatMessage({
-              id: "structureTagForm.props.description",
-            })}
-            value={value}
-          />
-        )}
-      />
-      <Controller
-        control={control}
-        name="domainIds"
-        render={({ field: { onChange, value } }) => (
-          <DomainSelector
-            action="manageTags"
-            value={value}
-            onLoad={() => setDomainsLoading(false)}
-            onChange={(_e, { value }) => onChange(value)}
-            label={formatMessage({ id: "structureTagForm.props.domains" })}
-          />
-        )}
-      />
-      <div className="actions">
-        <Button
-          floated="right"
-          type="submit"
-          primary
-          loading={saving}
-          disabled={saving || !isDirty || !isValid}
-        >
-          {formatMessage({ id: "actions.save" })}
-        </Button>
-        <HistoryBackButton
-          content={formatMessage({ id: "actions.cancel" })}
-          disabled={saving}
+    <Container className="link-structure-tag-form">
+      <Form
+        onSubmit={handleSubmit((data) => tagStructure(data))}
+        loading={saving}
+      >
+        <Controller
+          control={control}
+          name="tagId"
+          rules={{ required: true }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Dropdown
+              name="tagId"
+              disabled={!_.isNil(structureTag.tagId)}
+              error={!!error}
+              placeholder={formatMessage({
+                id: "structureTag.tag.placeholder",
+              })}
+              label={formatMessage({ id: "structureTag.tag" })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              clearable={_.size(options) > 1}
+              search
+              selection
+              options={options}
+              value={value}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="comment"
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.TextArea
+              id="comment"
+              error={!!error}
+              name="comment"
+              label={{
+                children: formatMessage({ id: "structureTag.comment" }),
+                htmlFor: "comment",
+              }}
+              placeholder={formatMessage({
+                id: "structureTag.comment.placeholder",
+              })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="inherit"
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Checkbox
+              id="inherit"
+              error={!!error}
+              name="inherit"
+              label={{
+                htmlFor: "inherit",
+                children: formatMessage({ id: "structureTag.inherit" }),
+              }}
+              onBlur={onBlur}
+              onChange={(_e, { checked }) => onChange(checked)}
+              checked={value}
+            />
+          )}
         />
-      </div>
-    </Form>
+        <div className="actions">
+          <Button
+            type="submit"
+            disabled={!!saving || !isDirty || !isValid}
+            primary
+            content={formatMessage({ id: "actions.save" })}
+          />
+          {structureTag.inherited === false ? (
+            <Button
+              type="button"
+              onClick={() => deleteStructureTag(structureTag.id)}
+              disabled={!!saving}
+              secondary
+              content={formatMessage({ id: "actions.delete" })}
+            />
+          ) : null}
+        </div>
+      </Form>
+    </Container>
   );
 };
 
 StructureTagForm.propTypes = {
-  onSubmit: PropTypes.func.isRequired,
-  loading: PropTypes.bool,
+  deleteStructureTag: PropTypes.func,
   saving: PropTypes.bool,
-  structureTag: PropTypes.object,
+  structureTag: PropTypes.object.isRequired,
+  tagStructure: PropTypes.func,
+  tags: PropTypes.array,
+};
+
+const mapDispatchToProps = {
+  deleteStructureTag,
+  tagStructure,
 };
 
-export default StructureTagForm;
+export default connect(null, mapDispatchToProps)(StructureTagForm);

package/src/components/StructureTags.js

@@ -1,33 +1,63 @@
+import _ from "lodash/fp";
 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 StructureTagsCards from "./StructureTagsCards";
+import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import { Loading } from "@truedat/core/components";
+import { STRUCTURE_TAGS_QUERY } from "../api/queries";
+import StructureTag from "./StructureTag";
+import TagStructureButton from "./TagStructureButton";
 
-export const StructureTags = () => {
-  const { formatMessage } = useIntl();
+export const StructureTags = ({ structureId, structureTags, tags }) => {
+  const editableIds = _.map("id")(tags);
+  const taggedIds = _.flow(
+    _.reject("inherited"),
+    _.map("tag.id")
+  )(structureTags);
+  const availableTags = _.reject(({ id }) => _.includes(id)(taggedIds))(tags);
   return (
-    <Segment>
-      <Header as="h2">
-        <Button
-          floated="right"
-          primary
-          as={Link}
-          to={STRUCTURE_TAGS_NEW}
-          content={formatMessage({ id: "structureTags.actions.create" })}
-        />
-        <Icon name="tags" circular />
-        <Header.Content>
-          <FormattedMessage id="structureTags.header" />
-          <Header.Subheader>
-            <FormattedMessage id="structureTags.subheader" />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
-      <StructureTagsCards />
-    </Segment>
+    <>
+      {_.isEmpty(structureTags)
+        ? null
+        : structureTags.map((structureTag, i) => (
+            <StructureTag
+              key={i}
+              editable={
+                structureTag?.inherited
+                  ? false
+                  : _.includes(structureTag?.tag?.id)(editableIds)
+              }
+              structureTag={structureTag}
+            />
+          ))}
+      {_.isEmpty(availableTags) ? null : (
+        <TagStructureButton structureId={structureId} tags={availableTags} />
+      )}
+    </>
   );
 };
 
-export default StructureTags;
+StructureTags.propTypes = {
+  structureId: PropTypes.string,
+  structureTags: PropTypes.array,
+  tags: PropTypes.array,
+};
+
+export const StructureTagsLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(STRUCTURE_TAGS_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
+  return (
+    <StructureTags
+      structureId={id}
+      structureTags={_.sortBy("insertedAt")(data?.dataStructure?.structureTags)}
+      tags={_.sortBy("name")(data?.dataStructure?.availableTags)}
+    />
+  );
+};
+
+export default StructureTagsLoader;

package/src/components/Tag.js

@@ -0,0 +1,62 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Header, Icon, Container, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { connect } from "react-redux";
+import { Loading } from "@truedat/core/components";
+import { createTag, updateTag } from "../routines";
+import TagCrumbs from "./TagCrumbs";
+import TagForm from "./TagForm";
+
+const DEFAULT_VALUES = {
+  name: "",
+  domainIds: [],
+};
+
+export const Tag = ({
+  tag = DEFAULT_VALUES,
+  updateTag,
+  createTag,
+  loading,
+  saving,
+  id,
+}) => {
+  const action = id ? "tags.actions.edit" : "tags.actions.create";
+  const onSubmit = id ? (data) => updateTag({ ...data, id }) : createTag;
+  return (
+    <>
+      <TagCrumbs action={action} />
+      <Container text as={Segment}>
+        <Header as="h2">
+          <Icon name="tag" />
+          <Header.Content>
+            <FormattedMessage id={action} />
+          </Header.Content>
+        </Header>
+        {loading ? (
+          <Loading />
+        ) : (
+          <TagForm tag={tag} onSubmit={onSubmit} saving={saving} />
+        )}
+      </Container>
+    </>
+  );
+};
+
+Tag.propTypes = {
+  tag: PropTypes.object,
+  updateTag: PropTypes.func,
+  createTag: PropTypes.func,
+  loading: PropTypes.bool,
+  saving: PropTypes.bool,
+  id: PropTypes.string,
+};
+
+const mapStateToProps = ({ tagSaving }) => ({
+  saving: tagSaving,
+});
+
+export default connect(mapStateToProps, {
+  createTag,
+  updateTag,
+})(Tag);

package/src/components/TagCards.js

@@ -0,0 +1,85 @@
+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 { TAGS_QUERY } from "../api/queries";
+import { deleteTag } from "../routines";
+
+const EmptyMessage = () => (
+  <Message icon info>
+    <Icon name="folder open outline" />
+    <Message.Content>
+      <Message.Header>
+        <FormattedMessage id="tags.empty" />
+      </Message.Header>
+    </Message.Content>
+  </Message>
+);
+
+export const TagCards = ({ deleteTag, tags }) =>
+  _.isEmpty(tags) ? (
+    <EmptyMessage />
+  ) : (
+    <Card.Group>
+      {tags.map(({ id, name, description, structureCount }) => (
+        <Card key={id}>
+          <Card.Content>
+            <Card.Header as={Link} to={linkTo.STRUCTURE_TAG_EDIT({ id })}>
+              {name}
+            </Card.Header>
+            <Card.Description>{description}</Card.Description>
+          </Card.Content>
+          <Card.Content extra>
+            <div className="ui actions">
+              <ConfirmModal
+                icon="trash"
+                trigger={<Button icon="trash" basic color="red" />}
+                header={
+                  <FormattedMessage id="tags.actions.delete.confirmation.header" />
+                }
+                content={
+                  structureCount > 0 ? (
+                    <FormattedMessage
+                      id="tags.actions.delete.confirmation.content"
+                      values={{
+                        name: <i>{`'${name}'`}</i>,
+                        count: structureCount,
+                      }}
+                    />
+                  ) : (
+                    <FormattedMessage
+                      id="tags.actions.delete.noStructures.confirmation.content"
+                      values={{ name: <i>{`'${name}'`}</i> }}
+                    />
+                  )
+                }
+                onConfirm={() => deleteTag({ id })}
+              />
+            </div>
+          </Card.Content>
+        </Card>
+      ))}
+    </Card.Group>
+  );
+
+TagCards.propTypes = {
+  tags: PropTypes.array,
+  deleteTag: PropTypes.func,
+};
+
+export const TagCardsLoader = (props) => {
+  const { loading, error, data } = useQuery(TAGS_QUERY);
+  if (error) return null;
+  if (loading) return <Loading />;
+  const tags = _.sortBy(accentInsensitivePathOrder("name"))(data?.tags || []);
+  return <TagCards tags={tags} {...props} />;
+};
+
+export default connect(null, { deleteTag })(TagCardsLoader);

package/src/components/TagCrumbs.js

@@ -0,0 +1,25 @@
+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 } from "@truedat/core/routes";
+
+export const TagCrumbs = ({ action }) => (
+  <Breadcrumb>
+    <Breadcrumb.Section as={Link} to={STRUCTURE_TAGS} active={false}>
+      <FormattedMessage id="tags.crumbs.root" />
+    </Breadcrumb.Section>
+    <Breadcrumb.Divider icon="right angle" />
+    <Breadcrumb.Section active>
+      <FormattedMessage id={action} defaultMessage={action} />
+    </Breadcrumb.Section>
+  </Breadcrumb>
+);
+
+TagCrumbs.propTypes = {
+  action: PropTypes.string.isRequired,
+};
+
+export default TagCrumbs;

package/src/components/TagForm.js

@@ -0,0 +1,101 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Form } from "semantic-ui-react";
+import { useForm, Controller } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { HistoryBackButton, DomainSelector } from "@truedat/core/components";
+
+export const TagForm = ({ loading, onSubmit, saving, tag }) => {
+  const [domainsLoading, setDomainsLoading] = useState(true);
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: _.pick(["name", "description", "domainIds"])(tag),
+  });
+
+  const { isDirty, isValid } = formState;
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)} loading={loading || domainsLoading}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{ required: true }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={!!error}
+            id="name"
+            label={formatMessage({ id: "tagForm.props.name" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "tagForm.props.name" })}
+            value={value}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="description"
+        rules={{ required: false }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Input
+            autoComplete="off"
+            error={error}
+            id="description"
+            label={formatMessage({ id: "tagForm.props.description" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "tagForm.props.description" })}
+            value={value}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="domainIds"
+        render={({ field: { onChange, value } }) => (
+          <DomainSelector
+            action="manageTags"
+            value={value}
+            onLoad={() => setDomainsLoading(false)}
+            onChange={(_e, { value }) => onChange(value)}
+            label={formatMessage({ id: "tagForm.props.domains" })}
+          />
+        )}
+      />
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={saving}
+          disabled={saving || !isDirty || !isValid}
+        >
+          {formatMessage({ id: "actions.save" })}
+        </Button>
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={saving}
+        />
+      </div>
+    </Form>
+  );
+};
+
+TagForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  saving: PropTypes.bool,
+  tag: PropTypes.object,
+};
+
+export default TagForm;

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