@truedat/dd 4.48.11 → 4.49.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.49.0] 2022-07-27
+
+### Changed
+
+- [TD-4175] Support inheritance of structure tags
+
 ## [4.48.10] 2022-07-19
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.48.11",
+  "version": "4.49.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.48.11",
-    "@truedat/core": "4.48.11",
-    "@truedat/df": "4.48.11",
+    "@truedat/auth": "4.49.0",
+    "@truedat/core": "4.49.0",
+    "@truedat/df": "4.49.0",
     "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": "c174776672b9079d23a00a6561db635d43cbeb32"
+  "gitHead": "7260126df6067fe59b11c5dc2b94dbdd881fed7b"
 }

package/src/api/fragments.js

@@ -1,7 +1,7 @@
 import { gql } from "@apollo/client";
 
-export const STRUCTURE_TAG_DETAIL = gql`
-  fragment StructureTagDetail on StructureTag {
+export const TAG_DETAIL = gql`
+  fragment TagDetail on Tag {
     id
     name
     description

package/src/api/mutations.js

@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client";
-import { STRUCTURE_TAG_DETAIL } from "./fragments";
+import { TAG_DETAIL } from "./fragments";
 
 export const CREATE_REFERENCE_DATASET = gql`
   mutation CreateReferenceDataset($dataset: CreateReferenceDatasetInput!) {
@@ -28,28 +28,50 @@ export const DELETE_REFERENCE_DATASET = gql`
   }
 `;
 
-export const CREATE_STRUCTURE_TAG = gql`
-  mutation CreateStructureTag($structureTag: StructureTagInput!) {
-    createStructureTag(structureTag: $structureTag) {
-      ...StructureTagDetail
+export const CREATE_TAG = gql`
+  mutation CreateTag($tag: TagInput!) {
+    createTag(tag: $tag) {
+      ...TagDetail
     }
   }
-  ${STRUCTURE_TAG_DETAIL}
+  ${TAG_DETAIL}
 `;
 
-export const UPDATE_STRUCTURE_TAG = gql`
-  mutation UpdateStructureTag($structureTag: StructureTagInput!) {
-    updateStructureTag(structureTag: $structureTag) {
-      ...StructureTagDetail
+export const UPDATE_TAG = gql`
+  mutation UpdateTag($tag: TagInput!) {
+    updateTag(tag: $tag) {
+      ...TagDetail
+    }
+  }
+  ${TAG_DETAIL}
+`;
+
+export const DELETE_TAG = gql`
+  mutation DeleteTag($id: ID!) {
+    deleteTag(id: $id) {
+      id
+    }
+  }
+`;
+
+export const TAG_STRUCTURE = gql`
+  mutation TagStructure($structureTag: StructureTagInput!) {
+    tagStructure(structureTag: $structureTag) {
+      id
+      dataStructure {
+        id
+      }
     }
   }
-  ${STRUCTURE_TAG_DETAIL}
 `;
 
 export const DELETE_STRUCTURE_TAG = gql`
   mutation DeleteStructureTag($id: ID!) {
     deleteStructureTag(id: $id) {
       id
+      dataStructure {
+        id
+      }
     }
   }
 `;

package/src/api/queries.js

@@ -1,22 +1,49 @@
 import { gql } from "@apollo/client";
-import { STRUCTURE_TAG_DETAIL } from "./fragments";
+import { TAG_DETAIL } from "./fragments";
 
-export const STRUCTURE_TAG_QUERY = gql`
-  query StructureTag($id: ID!) {
-    structureTag(id: $id) {
-      ...StructureTagDetail
+export const TAG_QUERY = gql`
+  query Tag($id: ID!) {
+    tag(id: $id) {
+      ...TagDetail
     }
   }
-  ${STRUCTURE_TAG_DETAIL}
+  ${TAG_DETAIL}
+`;
+
+export const TAGS_QUERY = gql`
+  query Tags {
+    tags {
+      ...TagDetail
+    }
+  }
+  ${TAG_DETAIL}
 `;
 
 export const STRUCTURE_TAGS_QUERY = gql`
-  query StructureTags {
-    structureTags {
-      ...StructureTagDetail
+  query StructureTags($id: ID!) {
+    dataStructure(id: $id) {
+      id
+      availableTags {
+        id
+        name
+        description
+      }
+      structureTags {
+        id
+        comment
+        inherit
+        inherited
+        insertedAt
+        dataStructureId
+        tagId
+        tag {
+          id
+          name
+          description
+        }
+      }
     }
   }
-  ${STRUCTURE_TAG_DETAIL}
 `;
 
 export const REFERENCE_DATASETS_QUERY = gql`

package/src/api.js

@@ -33,8 +33,6 @@ const API_STRUCTURE_TYPE = "/api/data_structure_types/:id";
 const API_STRUCTURE_TYPES = "/api/data_structure_types";
 const API_STRUCTURES_DOMAINS_UPLOAD =
   "/api/data_structures/bulk_upload_domains";
-const API_STRUCTURES_TAG = "/api/data_structures/:data_structure_id/tags/:id";
-const API_STRUCTURES_TAGS = "/api/data_structures/:data_structure_id/tags";
 const API_USER_SEARCH_FILTERS = "/api/user_search_filters";
 const API_USER_SEARCH_FILTER = "/api/user_search_filters/:id";
 const API_GET_USER_SEARCH_FILTERS = "/api/user_search_filters/me";
@@ -84,8 +82,6 @@ export {
   API_USER_SEARCH_FILTER,
   API_GET_USER_SEARCH_FILTERS,
   API_STRUCTURES_DOMAINS_UPLOAD,
-  API_STRUCTURES_TAG,
-  API_STRUCTURES_TAGS,
   API_STRUCTURES_UPLOAD,
   API_STRUCTURES_UPLOAD_EVENTS,
   API_STRUCTURE_NOTE,

package/src/components/DictionaryRoutes.js

@@ -6,10 +6,10 @@ import {
   PROFILE_EXECUTION,
   PROFILE_GROUP,
   REFERENCE_DATASETS,
-  STRUCTURE_TAGS,
-  STRUCTURE_TYPES,
   STRUCTURES,
   STRUCTURES_UPLOAD_EVENTS,
+  STRUCTURE_TAGS,
+  STRUCTURE_TYPES,
   SYSTEMS,
 } from "@truedat/core/routes";
 import PendingStructureNotes from "./PendingStructureNotes";
@@ -24,10 +24,10 @@ import StructuresLoader from "./StructuresLoader";
 import StructuresRoutes from "./StructuresRoutes";
 import StructuresUploadEvents from "./StructuresUploadEvents";
 import StructureTypesLoader from "./StructureTypesLoader";
-import StructureTagsRoutes from "./StructureTagsRoutes";
 import StructureTypesRoutes from "./StructureTypesRoutes";
 import SystemsRoutes from "./SystemsRoutes";
 import SystemsLoader from "./SystemsLoader";
+import TagsRoutes from "./TagsRoutes";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
@@ -74,7 +74,7 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
-      <Route path={STRUCTURE_TAGS} render={() => <StructureTagsRoutes />} />
+      <Route path={STRUCTURE_TAGS} render={() => <TagsRoutes />} />
       <Route
         path={STRUCTURE_TYPES}
         render={() => (

package/src/components/StructureSummary.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Dimmer, Header, Icon, Label, Loader, Grid } from "semantic-ui-react";
+import { Header, Icon, Label, Grid } from "semantic-ui-react";
 import Moment from "react-moment";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
@@ -13,7 +13,7 @@ import StructureDeleteButton from "./StructureDeleteButton";
 import StructureGrantButton from "./StructureGrantButton";
 import StructureProfileButton from "./StructureProfileButton";
 import StructuresProfileButton from "./StructuresProfileButton";
-import TagsHeader from "./TagsHeader";
+import StructureTags from "./StructureTags";
 
 const Date = ({ className, icon, label, date }) => {
   const { formatMessage } = useIntl();
@@ -60,7 +60,6 @@ export const StructureSummary = ({
   userPermissions,
   updatedAt,
   deleted_at,
-  linkedStructureTagsLoading,
   isAdmin,
 }) => {
   const { formatMessage } = useIntl();
@@ -72,22 +71,15 @@ export const StructureSummary = ({
       <Grid>
         <Grid.Row>
           <Grid.Column width={10}>
-            <Dimmer.Dimmable dimmed={linkedStructureTagsLoading}>
-              <Header as="h2">
-                <Header.Content>
-                  {_.defaultTo(name)(alias)}
-                  {structureClasses?._grantable ? (
-                    <StructureGrantButton />
-                  ) : null}
-                  {_.isEmpty(alias) ? null : (
-                    <Header.Subheader>{name}</Header.Subheader>
-                  )}
-                </Header.Content>
-              </Header>
-              <Dimmer active={linkedStructureTagsLoading} inverted>
-                <Loader />
-              </Dimmer>
-            </Dimmer.Dimmable>
+            <Header as="h2">
+              <Header.Content>
+                {_.defaultTo(name)(alias)}
+                {structureClasses?._grantable ? <StructureGrantButton /> : null}
+                {_.isEmpty(alias) ? null : (
+                  <Header.Subheader>{name}</Header.Subheader>
+                )}
+              </Header.Content>
+            </Header>
           </Grid.Column>
           <Grid.Column width={6} textAlign="right">
             {(deleted_at || updatedAt) && (
@@ -108,7 +100,7 @@ export const StructureSummary = ({
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <TagsHeader />
+      <StructureTags />
       <StructureProperties />
     </>
   );
@@ -123,13 +115,11 @@ StructureSummary.propTypes = {
   userPermissions: PropTypes.object,
   updatedAt: PropTypes.string,
   deleted_at: PropTypes.string,
-  linkedStructureTagsLoading: PropTypes.bool,
   isAdmin: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
   userPermissions: state.userPermissions,
-  linkedStructureTagsLoading: state.linkedStructureTagsLoading,
   updatedAt: getStructureUpdatedAt(state),
   ...state.structure,
   isAdmin: state.authentication.role === "admin",

package/src/components/StructureTag.js

@@ -1,70 +1,99 @@
-import React from "react";
+import _ from "lodash/fp";
+import React, { useEffect, useState } 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 { createStructureTag, updateStructureTag } from "../routines";
-import StructureTagsCrumbs from "./StructureTagsCrumbs";
+import { Icon, Label, Popup, Header } from "semantic-ui-react";
 import StructureTagForm from "./StructureTagForm";
 
-const DEFAULT_VALUES = {
-  name: "",
-  domainIds: [],
+export const ToolTip = ({ description, comment }) => (
+  <>
+    {_.isEmpty(description) ? null : <Header as="h2" subheader={description} />}
+    {_.isEmpty(comment) ? null : (
+      <>
+        <Header as="h5">
+          <FormattedMessage id="structureTag.comment" />
+        </Header>
+        <p>{comment}</p>
+      </>
+    )}
+  </>
+);
+
+ToolTip.propTypes = {
+  description: PropTypes.string,
+  comment: PropTypes.string,
 };
 
-export const StructureTag = ({
-  structureTag = DEFAULT_VALUES,
-  updateStructureTag,
-  createStructureTag,
-  loading,
-  saving,
-  id,
-}) => {
-  const action = id
-    ? "structureTags.actions.edit"
-    : "structureTags.actions.create";
-  const onSubmit = id
-    ? (data) => updateStructureTag({ ...data, id })
-    : createStructureTag;
+export const StructureTag = ({ editable, savingId, structureTag }) => {
+  const [formActive, setFormActive] = useState(false);
+  const [tooltipActive, setTooltipActive] = useState(false);
+  useEffect(() => {
+    setFormActive(savingId === structureTag.id);
+  }, [savingId, structureTag]);
+  const name = structureTag.tag.name;
+  const description = structureTag.tag.description;
+  const comment = structureTag.comment;
+  const inherited = structureTag.inherited;
+  const trigger = editable ? <Icon link name="edit" /> : null;
+
   return (
-    <>
-      <StructureTagsCrumbs action={action} />
-      <Container text as={Segment}>
-        <Header as="h2">
-          <Icon name="tag" />
-          <Header.Content>
-            <FormattedMessage id={action} />
-          </Header.Content>
-        </Header>
-        {loading ? (
-          <Loading />
-        ) : (
-          <StructureTagForm
-            structureTag={structureTag}
-            onSubmit={onSubmit}
-            saving={saving}
-          />
-        )}
-      </Container>
-    </>
+    <Popup
+      basic
+      open={tooltipActive}
+      onOpen={
+        formActive ? null : () => setTooltipActive(!!comment || !!description)
+      }
+      onClose={() => setTooltipActive(false)}
+      positionFixed
+      className="popup-tag"
+      trigger={
+        <Label tag style={{ marginLeft: "1.5em" }}>
+          {editable ? (
+            <Popup
+              on="click"
+              basic
+              onOpen={() => {
+                setTooltipActive(false);
+                setFormActive(true);
+              }}
+              onClose={() => setFormActive(false)}
+              open={formActive}
+              flowing
+              content={
+                <StructureTagForm
+                  structureTag={structureTag}
+                  saving={!!savingId}
+                />
+              }
+              position="bottom center"
+              size="large"
+              positionFixed
+              trigger={trigger}
+            />
+          ) : null}
+          {name}
+          {inherited ? (
+            <Label.Detail>
+              <Icon name="linkify" />
+            </Label.Detail>
+          ) : null}
+        </Label>
+      }
+    >
+      <ToolTip description={description} comment={comment} />
+    </Popup>
   );
 };
 
 StructureTag.propTypes = {
-  structureTag: PropTypes.object,
-  updateStructureTag: PropTypes.func,
-  createStructureTag: PropTypes.func,
-  loading: PropTypes.bool,
-  saving: PropTypes.bool,
-  id: PropTypes.string,
+  editable: PropTypes.bool,
+  savingId: PropTypes.string,
+  structureTag: PropTypes.object.isRequired,
 };
 
-const mapStateToProps = ({ structureTagSaving }) => ({
-  saving: structureTagSaving,
+export const mapStateToProps = ({ structureTagSaving }) => ({
+  savingId: structureTagSaving,
 });
 
-export default connect(mapStateToProps, {
-  createStructureTag,
-  updateStructureTag,
-})(StructureTag);
+export default connect(mapStateToProps)(StructureTag);