@truedat/dd 4.47.5 → 4.47.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [4.47.8] 2022-07-02
+
+## Changed
+
+- [TD-4176] Add className to LinkStructureTagForm
+
+## [4.47.7] 2022-07-02
+
+## Added
+
+- [TD-4176] Added description in structure tag
+
+## Changed
+
+- [TD-4176]
+  - Changed description by comment in structure tag link
+  - Commend now is not mandatory field
+
 ## [4.47.5] 2022-06-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.47.5",
+  "version": "4.47.8",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.5",
+    "@truedat/test": "4.47.8",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.47.5",
-    "@truedat/core": "4.47.5",
-    "@truedat/df": "4.47.5",
+    "@truedat/auth": "4.47.8",
+    "@truedat/core": "4.47.8",
+    "@truedat/df": "4.47.8",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "1265272aa7b8fcb415592916f0e557ae226befe3"
+  "gitHead": "dccc0d92c419a5ee257a8e15b64c1b98d909809a"
 }

package/src/api/fragments.js

@@ -4,6 +4,7 @@ export const STRUCTURE_TAG_DETAIL = gql`
   fragment StructureTagDetail on StructureTag {
     id
     name
+    description
     domainIds
     structureCount
   }

package/src/components/LinkStructureTagForm.js

@@ -10,7 +10,7 @@ import { deleteLinkStructureTag, linkStructureTag } from "../routines";
 
 export const LinkStructureTagForm = ({
   deleteLinkStructureTag,
-  description,
+  comment,
   linkedStructureTags,
   linkId,
   linkStructureTag,
@@ -29,7 +29,11 @@ export const LinkStructureTagForm = ({
   const options = _.flow(
     _.filter(({ id }) => _.includes(id)(availableTags)),
     _.sortBy(accentInsensitivePathOrder("name")),
-    _.map(({ id, name }) => ({ value: id, text: name }))
+    _.map(({ id, name, description }) => ({
+      value: id,
+      text: name,
+      description: description,
+    }))
   )(structureTags);
   const defaultTag = _.negate(_.isNil)(tagId)
     ? tagId
@@ -43,7 +47,7 @@ export const LinkStructureTagForm = ({
     const payload = {
       structureId,
       tagId: params.tag,
-      tag: { description: params.description },
+      tag: { comment: params.comment },
     };
     linkStructureTag(payload);
   };
@@ -51,13 +55,13 @@ export const LinkStructureTagForm = ({
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
     defaultValues: {
-      description: description || "",
+      comment: comment || "",
       tag: defaultTag,
     },
   });
   const { isDirty, isValid } = formState;
   return (
-    <Container style={{ width: "300px" }}>
+    <Container className="link-structure-tag-form">
       <Form onSubmit={handleSubmit(onSubmit)}>
         <Controller
           control={control}
@@ -87,16 +91,15 @@ export const LinkStructureTagForm = ({
         />
         <Controller
           control={control}
-          name="description"
-          rules={{ required: true }}
+          name="comment"
           render={({
             field: { onBlur, onChange, value },
             fieldState: { error },
           }) => (
             <Form.TextArea
-              data-testid="description-id"
+              data-testid="comment-id"
               error={!!error}
-              name="description"
+              name="comment"
               label={formatMessage({ id: "structure.tag.textArea.label" })}
               placeholder={formatMessage({
                 id: "structure.tag.textArea.placeholder",
@@ -110,7 +113,7 @@ export const LinkStructureTagForm = ({
         <div className="actions">
           <Button
             type="submit"
-            disabled={!isDirty || !isValid}
+            disabled={(!isDirty && options.length > 1) || !isValid}
             primary
             content={formatMessage({ id: submitTitle })}
           />
@@ -130,7 +133,7 @@ export const LinkStructureTagForm = ({
 
 LinkStructureTagForm.propTypes = {
   deleteLinkStructureTag: PropTypes.func,
-  description: PropTypes.string,
+  comment: PropTypes.string,
   linkedStructureTags: PropTypes.array,
   linkId: PropTypes.number,
   linkStructureTag: PropTypes.func,

package/src/components/LinkedStructureTag.js

@@ -1,19 +1,22 @@
 import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Icon, Label, Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { Icon, Label, Popup, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import LinkStructureTagForm from "./LinkStructureTagForm";
 
-const LinkedStructureTag = ({
+export const LinkedStructureTag = ({
   id,
   _embedded,
   editable,
-  description,
+  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);
@@ -24,16 +27,46 @@ const LinkedStructureTag = ({
 
   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
-      content={description}
       open={openDescription}
       onOpen={() => {
-        if (!openForm) setOpenDescription(true);
+        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 : (
@@ -49,7 +82,7 @@ const LinkedStructureTag = ({
               flowing
               content={
                 <LinkStructureTagForm
-                  description={description}
+                  comment={comment}
                   linkId={id}
                   tagId={tagId}
                 />
@@ -64,13 +97,15 @@ const LinkedStructureTag = ({
           {name}
         </Label>
       }
-    />
+    >
+      {renderTooltip()}
+    </Popup>
   );
 };
 
 LinkedStructureTag.propTypes = {
   _embedded: PropTypes.object,
-  description: PropTypes.string,
+  comment: PropTypes.string,
   editable: PropTypes.bool,
   id: PropTypes.number,
   loading: PropTypes.bool,

package/src/components/StructureTagForm.js

@@ -16,7 +16,7 @@ export const StructureTagForm = ({
   const { formatMessage } = useIntl();
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
-    defaultValues: _.pick(["name", "domainIds"])(structureTag),
+    defaultValues: _.pick(["name", "description", "domainIds"])(structureTag),
   });
 
   const { isDirty, isValid } = formState;
@@ -46,6 +46,28 @@ export const StructureTagForm = ({
           />
         )}
       />
+      <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"

package/src/components/StructureTagsCards.js

@@ -36,6 +36,9 @@ export const StructureTagsCards = ({ deleteStructureTag, structureTags }) => {
             >
               {_.prop("name")(structureTag)}
             </Card.Header>
+            <Card.Description>
+              {_.prop("description")(structureTag)}
+            </Card.Description>
           </Card.Content>
           <Card.Content extra>
             <div className="ui actions">

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

@@ -11,26 +11,27 @@ jest.spyOn(React, "useContext").mockImplementation(() => intl);
 describe("<LinkStructureTagForm />", () => {
   const deleteLinkStructureTag = jest.fn();
   const linkStructureTag = jest.fn();
-  const description = "foo";
+  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,
-      description: "foo",
+      comment: "foo",
       inserted_at: "foo",
       updated_at: "foo",
       _embedded: {
         data_structure: { id: 1, external_id: "baz" },
-        data_structure_tag: { id: 1, name: "bar" }
-      }
-    }
-  ];
-  const structureTags = [
-    { id: 1, name: "foo" },
-    { id: 2, name: "bar" }
+        data_structure_tag: { ...structureTags[2] },
+      },
+    },
   ];
 
+  const comment = "foo";
   const structureId = 1;
-  const tagId = 1;
+  const tagId = 3;
   const linkId = 1;
 
   const propsCreate = {
@@ -38,18 +39,18 @@ describe("<LinkStructureTagForm />", () => {
     linkedStructureTags,
     linkStructureTag,
     structureId,
-    structureTags
+    structureTags,
   };
 
   const propsUpdate = {
     deleteLinkStructureTag,
-    description,
+    comment,
     linkedStructureTags,
     linkId,
     linkStructureTag,
     structureId,
     structureTags,
-    tagId
+    tagId,
   };
 
   it("matches the latest snapshot create", async () => {
@@ -69,6 +70,64 @@ describe("<LinkStructureTagForm />", () => {
     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: [] }} />
@@ -80,30 +139,25 @@ describe("<LinkStructureTagForm />", () => {
     );
 
     // Select tag
-    userEvent.click(await findByText("bar"));
+    userEvent.click(await findByText("Tag1"));
 
-    // Submit button should still be disabled
+    // Submit button should now be enabled
     await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).toBeDisabled()
+      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
     );
 
     // Description
     // Issue: https://github.com/testing-library/user-event/issues/346
-    userEvent.type(queryByTestId("description-id"), "x");
-    userEvent.type(queryByTestId("description-id"), "yz");
-
-    // Submit button should now be enabled
-    await waitFor(() =>
-      expect(getByRole("button", { name: /add/ })).not.toBeDisabled()
-    );
+    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: 2,
-        tag: { description: "xyz" }
+        tagId: 1,
+        tag: { comment: "xyz" },
       })
     );
   });
@@ -123,7 +177,7 @@ describe("<LinkStructureTagForm />", () => {
     await waitFor(() =>
       expect(deleteLinkStructureTag).toHaveBeenCalledWith({
         structureId,
-        tagId
+        tagId,
       })
     );
   });

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

@@ -0,0 +1,133 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+import { LinkedStructureTag } from "../LinkedStructureTag";
+
+describe("<LinkedStructureTag />", () => {
+  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 props = {
+    id: 1,
+    _embedded: {
+      data_structure: { id: 1, external_id: "baz" },
+      data_structure_tag: { ...structureTags[2] },
+    },
+    editable: true,
+    comment: "foo comment",
+    loading: false,
+    structureTags,
+  };
+
+  const state = {
+    editableStructureTags: structureTags,
+    linkingStructureTags: false,
+    deletingStructureTags: false,
+  };
+
+  const renderOpts = {
+    state,
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<LinkedStructureTag {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Show update modal when click in tad edit icon", async () => {
+    const { getByText, container } = render(
+      <LinkedStructureTag {...props} />,
+      renderOpts
+    );
+    fireEvent.click(container.getElementsByClassName("edit")[0]);
+    await waitFor(() => expect(getByText("Tag1")).toBeTruthy());
+  });
+
+  it("Show tooltip with description and comment", async () => {
+    const tagWithDescriptionProps = {
+      ...props,
+      _embedded: {
+        ...props._embedded,
+        data_structure_tag: { ...structureTags[0] },
+      },
+    };
+
+    const { getByText } = render(
+      <LinkedStructureTag {...tagWithDescriptionProps} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag1"));
+
+    await waitFor(() => expect(getByText("Comment")).toBeTruthy());
+    await waitFor(() => expect(getByText("foo comment")).toBeTruthy());
+    await waitFor(() =>
+      expect(getByText(structureTags[0].description)).toBeTruthy()
+    );
+  });
+
+  it("Show tooltip with description", async () => {
+    const tagWithDescriptionWithoutCommentProps = {
+      ...props,
+      _embedded: {
+        ...props._embedded,
+        data_structure_tag: { ...structureTags[0] },
+      },
+      comment: undefined,
+    };
+
+    const { getByText, queryByText } = render(
+      <LinkedStructureTag {...tagWithDescriptionWithoutCommentProps} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag1"));
+
+    await waitFor(() => expect(queryByText("Comment")).toBeNull());
+    await waitFor(() => expect(queryByText("foo comment")).toBeNull());
+    await waitFor(() =>
+      expect(getByText(structureTags[0].description)).toBeTruthy()
+    );
+  });
+
+  it("Show tooltip with comment", async () => {
+    const { getByText, queryByText } = render(
+      <LinkedStructureTag {...props} />,
+      renderOpts
+    );
+    fireEvent.mouseEnter(getByText("Tag without description"));
+
+    await waitFor(() => expect(getByText("Comment")).toBeTruthy());
+    await waitFor(() => expect(getByText("foo comment")).toBeTruthy());
+    await waitFor(() =>
+      expect(queryByText(structureTags[0].description)).toBeNull()
+    );
+  });
+
+  it("Tooltip not show without description and without comment", async () => {
+    const tagWithoutDescriptionWithoutComment = {
+      ...props,
+      comment: undefined,
+    };
+
+    const { getByText, queryByText, container } = render(
+      <LinkedStructureTag {...tagWithoutDescriptionWithoutComment} />,
+      renderOpts
+    );
+
+    fireEvent.mouseEnter(getByText("Tag without description"));
+
+    await waitFor(() => expect(queryByText("Comment")).toBeNull());
+    await waitFor(() => expect(queryByText("foo comment")).toBeNull());
+    await waitFor(() =>
+      expect(queryByText(structureTags[0].description)).toBeNull()
+    );
+
+    await waitFor(() =>
+      expect(container.getElementsByClassName("popup")).toHaveLength(0)
+    );
+  });
+});

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

@@ -9,6 +9,9 @@ import {
 jest.mock("@truedat/core/hooks", () => ({
   useAuthorized: jest.fn(() => true),
 }));
+jest
+  .spyOn(global.Date, "now")
+  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
 
 const dataset = {
   __typename: "ReferenceDataset",

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

@@ -23,6 +23,10 @@ const datasetsMock = {
 
 const renderOpts = { mocks: [datasetsMock] };
 
+jest
+  .spyOn(global.Date, "now")
+  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
+
 describe("<ReferenceDatasets />", () => {
   it("matches the latest snapshot", async () => {
     const { container, findByText } = render(<ReferenceDatasets />, renderOpts);

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

@@ -2,6 +2,10 @@ import React from "react";
 import { render } from "@truedat/test/render";
 import ReferenceDatasetsTable from "../ReferenceDatasetsTable";
 
+jest
+  .spyOn(global.Date, "now")
+  .mockImplementation(() => new Date("2022-01-01T11:01:58.135Z").valueOf());
+
 const props = {
   datasets: [
     {

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

@@ -19,6 +19,7 @@ describe("<StructureTagForm />", () => {
   const structureTag = {
     id: 1,
     name: "foo",
+    description: "bar",
     domainIds: [],
   };
   const saving = false;
@@ -45,7 +46,7 @@ describe("<StructureTagForm />", () => {
       expect(getByRole("button", { name: /save/i })).toBeDisabled()
     );
 
-    // Description
+    // Name
     userEvent.type(getByRole("textbox", { name: /name/i }), "foo");
 
     // Submit button should now be enabled
@@ -53,6 +54,9 @@ describe("<StructureTagForm />", () => {
       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 }));
 
@@ -61,6 +65,7 @@ describe("<StructureTagForm />", () => {
     });
     expect(onSubmit.mock.calls[0][0]).toMatchObject({
       name: "foofoo",
+      description: "barbar",
       domainIds: [],
     });
   });

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

@@ -14,6 +14,7 @@ const structureTagsMock = {
           __typename: "StructureTag",
           id: "1",
           name: "tag1",
+          description: "tag_desc_1",
           domainIds: [],
           structureCount: 1,
         },
@@ -21,6 +22,7 @@ const structureTagsMock = {
           __typename: "StructureTag",
           id: "2",
           name: "tag2",
+          description: "tag_desc_2",
           domainIds: ["1"],
           structureCount: 1,
         },

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

@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
+exports[`<LinkStructureTagForm /> create button enabled if there is only one tag available 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"
@@ -36,7 +35,7 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
             class="divider text"
             role="alert"
           >
-            bar
+            Tag2
           </div>
           <i
             aria-hidden="true"
@@ -53,10 +52,127 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
               role="option"
               style="pointer-events: all;"
             >
+              <span
+                class="description"
+              >
+                large desclarge desclarge desclarge desclarge desc
+              </span>
+              <span
+                class="text"
+              >
+                Tag2
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          structure.tag.textArea.label
+        </label>
+        <textarea
+          data-testid="comment-id"
+          name="comment"
+          placeholder="structure.tag.textArea.placeholder"
+          rows="3"
+        />
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary button"
+          type="submit"
+        >
+          structure.tag.add
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
+<div>
+  <div
+    class="ui container link-structure-tag-form"
+  >
+    <form
+      class="ui form"
+    >
+      <div
+        class="field"
+      >
+        <label>
+          structure.tag.dropdown.label
+        </label>
+        <div
+          aria-disabled="false"
+          aria-expanded="false"
+          class="ui search selection dropdown"
+          name="tag"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            structure.tag.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="description"
+              >
+                description test
+              </span>
+              <span
+                class="text"
+              >
+                Tag1
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="description"
+              >
+                large desclarge desclarge desclarge desclarge desc
+              </span>
               <span
                 class="text"
               >
-                bar
+                Tag2
               </span>
             </div>
           </div>
@@ -69,8 +185,8 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
           structure.tag.textArea.label
         </label>
         <textarea
-          data-testid="description-id"
-          name="description"
+          data-testid="comment-id"
+          name="comment"
           placeholder="structure.tag.textArea.placeholder"
           rows="3"
         />
@@ -92,11 +208,122 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot create 1`] = `
 </div>
 `;
 
+exports[`<LinkStructureTagForm /> matches the latest snapshot create without comment 1`] = `
+<div>
+  <div
+    class="ui container link-structure-tag-form"
+  >
+    <form
+      class="ui form"
+    >
+      <div
+        class="field"
+      >
+        <label>
+          structure.tag.dropdown.label
+        </label>
+        <div
+          aria-disabled="false"
+          aria-expanded="true"
+          class="ui active visible search selection dropdown"
+          name="tag"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            Tag2
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon clear"
+          />
+          <div
+            class="visible menu transition"
+            role="listbox"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="description"
+              >
+                description test
+              </span>
+              <span
+                class="text"
+              >
+                Tag1
+              </span>
+            </div>
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="description"
+              >
+                large desclarge desclarge desclarge desclarge desc
+              </span>
+              <span
+                class="text"
+              >
+                Tag2
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          structure.tag.textArea.label
+        </label>
+        <textarea
+          data-testid="comment-id"
+          name="comment"
+          placeholder="structure.tag.textArea.placeholder"
+          rows="3"
+        />
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary button"
+          type="submit"
+        >
+          structure.tag.add
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
 exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
 <div>
   <div
-    class="ui container"
-    style="width: 300px;"
+    class="ui container link-structure-tag-form"
   >
     <form
       class="ui form"
@@ -128,7 +355,7 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
             class="divider text"
             role="alert"
           >
-            foo
+            Tag without description
           </div>
           <i
             aria-hidden="true"
@@ -138,6 +365,19 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
             class="menu transition"
             role="listbox"
           >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                Tag without description
+              </span>
+            </div>
             <div
               aria-checked="false"
               aria-selected="false"
@@ -145,23 +385,33 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
               role="option"
               style="pointer-events: all;"
             >
+              <span
+                class="description"
+              >
+                description test
+              </span>
               <span
                 class="text"
               >
-                bar
+                Tag1
               </span>
             </div>
             <div
-              aria-checked="true"
-              aria-selected="true"
-              class="active selected item"
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
               role="option"
               style="pointer-events: all;"
             >
+              <span
+                class="description"
+              >
+                large desclarge desclarge desclarge desclarge desc
+              </span>
               <span
                 class="text"
               >
-                foo
+                Tag2
               </span>
             </div>
           </div>
@@ -174,8 +424,8 @@ exports[`<LinkStructureTagForm /> matches the latest snapshot edit 1`] = `
           structure.tag.textArea.label
         </label>
         <textarea
-          data-testid="description-id"
-          name="description"
+          data-testid="comment-id"
+          name="comment"
           placeholder="structure.tag.textArea.placeholder"
           rows="3"
         >

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LinkedStructureTag /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui tag label"
+    style="margin-left: 1.5em;"
+  >
+    <i
+      aria-hidden="true"
+      class="edit link icon"
+    />
+    Tag without description
+  </div>
+</div>
+`;

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

@@ -26,6 +26,26 @@ exports[`<StructureTagForm /> matches the latest snapshot 1`] = `
         />
       </div>
     </div>
+    <div
+      class="field"
+    >
+      <label
+        for="description"
+      >
+        Description
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          id="description"
+          placeholder="Description"
+          type="text"
+          value="bar"
+        />
+      </div>
+    </div>
     <div
       class="actions"
     >

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

@@ -17,6 +17,11 @@ exports[`<StructureTagsCards /> matches the latest snapshot, renders a link for
         >
           tag1
         </a>
+        <div
+          class="description"
+        >
+          tag_desc_1
+        </div>
       </div>
       <div
         class="extra content"
@@ -47,6 +52,11 @@ exports[`<StructureTagsCards /> matches the latest snapshot, renders a link for
         >
           tag2
         </a>
+        <div
+          class="description"
+        >
+          tag_desc_2
+        </div>
       </div>
       <div
         class="extra content"

package/src/messages/en.js

@@ -308,8 +308,9 @@ export default {
   "structure.tag.dropdown.label": "Select tag",
   "structure.tag.dropdown.placeholder": "Tag name",
   "structure.tag.edit": "Edit",
-  "structure.tag.textArea.label": "Tag description",
-  "structure.tag.textArea.placeholder": "Introduce a description",
+  "structure.tag.textArea.label": "Tag comments",
+  "structure.tag.textArea.placeholder": "Introduce a comment",
+  "structure.tag.tooltip.commentTitle": "Comment",
   "structure.type": "Type",
   "structure.type.Attribute": "Attribute",
   "structure.type.File.icon": "file",
@@ -360,6 +361,7 @@ export default {
   "structureSelector.union.criteria": "Union criteria",
   "structureTagForm.props.domains": "Domains",
   "structureTagForm.props.name": "Name",
+  "structureTagForm.props.description": "Description",
   "structureTags.actions.create": "Create Structure Tag",
   "structureTags.actions.delete.confirmation.content":
     "This tag has {count} linked structures. Are you sure that you want to delete this Struture Tag?",

package/src/messages/es.js

@@ -317,8 +317,9 @@ export default {
   "structure.tag.dropdown.label": "Seleccionar etiqueta",
   "structure.tag.dropdown.placeholder": "Clave de etiqueta",
   "structure.tag.edit": "Editar",
-  "structure.tag.textArea.label": "Descripción de etiqueta",
-  "structure.tag.textArea.placeholder": "Introducir una descripción",
+  "structure.tag.textArea.label": "Comentarios de etiqueta",
+  "structure.tag.textArea.placeholder": "Introducir un comentario",
+  "structure.tag.tooltip.commentTitle": "Comentario",
   "structure.type": "Tipo",
   "structure.type.Attribute": "Atributo",
   "structure.type.File.icon": "file",
@@ -369,6 +370,7 @@ export default {
   "structureSelector.union.criteria": "Criterio de unión",
   "structureTagForm.props.domains": "Dominios",
   "structureTagForm.props.name": "Nombre",
+  "structureTagForm.props.description": "Descripción",
   "structureTags.actions.create": "Crear Etiqueta de Estructura",
   "structureTags.actions.delete.confirmation.content":
     "Esta etiqueta tiene {count} estructuras asociadas. ¿Desea eliminar la Etiqueta de Estructura {name}?",

package/src/reducers/__tests__/linkedStructureTags.spec.js

@@ -15,7 +15,7 @@ const tags = [
     updated_at: "foo",
     _embedded: {
       data_structure: { id: 1, external_id: "baz" },
-      data_structure_tag: { id: 1, name: "bar" },
+      data_structure_tag: { id: 1, name: "bar", description: "qux" },
     },
   },
 ];