@truedat/dd 4.43.6 → 4.44.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.44.0] 2022-05-10
+
+### Added
+
+- [TD-4723] Support for domain-specific structure tags
+
 ## [4.43.6] 2022-05-06
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.43.6",
+  "version": "4.44.2",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.43.6",
+    "@truedat/test": "4.44.2",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,9 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.43.6",
-    "@truedat/core": "4.43.6",
-    "@truedat/df": "4.43.6",
+    "@truedat/auth": "4.44.2",
+    "@truedat/core": "4.44.2",
+    "@truedat/df": "4.44.2",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -107,5 +107,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "848143d79486499dd9deadea6a545929b5cdb39c"
+  "gitHead": "ca0c5fffcba96736f7a2054f3c37789da8c30a9e"
 }

package/src/api/fragments.js

@@ -0,0 +1,10 @@
+import { gql } from "@apollo/client";
+
+export const STRUCTURE_TAG_DETAIL = gql`
+  fragment StructureTagDetail on StructureTag {
+    id
+    name
+    domainIds
+    structureCount
+  }
+`;

package/src/api/mutations.js

@@ -0,0 +1,28 @@
+import { gql } from "@apollo/client";
+import { STRUCTURE_TAG_DETAIL } from "./fragments";
+
+export const CREATE_STRUCTURE_TAG = gql`
+  mutation CreateStructureTag($structureTag: StructureTagInput!) {
+    createStructureTag(structureTag: $structureTag) {
+      ...StructureTagDetail
+    }
+  }
+  ${STRUCTURE_TAG_DETAIL}
+`;
+
+export const UPDATE_STRUCTURE_TAG = gql`
+  mutation UpdateStructureTag($structureTag: StructureTagInput!) {
+    updateStructureTag(structureTag: $structureTag) {
+      ...StructureTagDetail
+    }
+  }
+  ${STRUCTURE_TAG_DETAIL}
+`;
+
+export const DELETE_STRUCTURE_TAG = gql`
+  mutation DeleteStructureTag($id: ID!) {
+    deleteStructureTag(id: $id) {
+      id
+    }
+  }
+`;

package/src/api/queries.js

@@ -0,0 +1,20 @@
+import { gql } from "@apollo/client";
+import { STRUCTURE_TAG_DETAIL } from "./fragments";
+
+export const STRUCTURE_TAG_QUERY = gql`
+  query StructureTag($id: ID!) {
+    structureTag(id: $id) {
+      ...StructureTagDetail
+    }
+  }
+  ${STRUCTURE_TAG_DETAIL}
+`;
+
+export const STRUCTURE_TAGS_QUERY = gql`
+  query StructureTags {
+    structureTags {
+      ...StructureTagDetail
+    }
+  }
+  ${STRUCTURE_TAG_DETAIL}
+`;

package/src/api.js

@@ -27,8 +27,6 @@ const API_PROFILE_GROUPS = "/api/profile_execution_groups";
 const API_SYSTEM = "/api/systems/:id";
 const API_SYSTEMS = "/api/systems";
 const API_SYSTEM_STRUCTURES = "/api/systems/:id/structures";
-const API_STRUCTURE_TAG = "/api/data_structure_tags/:id";
-const API_STRUCTURE_TAGS = "/api/data_structure_tags";
 const API_STRUCTURE_TYPE = "/api/data_structure_types/:id";
 const API_STRUCTURE_TYPES = "/api/data_structure_types";
 const API_STRUCTURES_DOMAINS_UPLOAD =
@@ -76,8 +74,6 @@ export {
   API_SYSTEM,
   API_SYSTEMS,
   API_SYSTEM_STRUCTURES,
-  API_STRUCTURE_TAG,
-  API_STRUCTURE_TAGS,
   API_STRUCTURE_TYPE,
   API_STRUCTURE_TYPES,
   API_USER_SEARCH_FILTERS,

package/src/components/DictionaryRoutes.js

@@ -72,15 +72,7 @@ export const DictionaryRoutes = () => {
           </>
         )}
       />
-      <Route
-        path={STRUCTURE_TAGS}
-        render={() => (
-          <>
-            <StructureTypesLoader />
-            <StructureTagsRoutes />
-          </>
-        )}
-      />
+      <Route path={STRUCTURE_TAGS} render={() => <StructureTagsRoutes />} />
       <Route
         path={STRUCTURE_TYPES}
         render={() => (
@@ -113,7 +105,7 @@ export const DictionaryRoutes = () => {
         render={() => (
           <>
             <StructureTypesLoader />
-            <Route render={() => <ProfileGroupLoader />} />
+            <ProfileGroupLoader />
             <Switch>
               <Route
                 exact

package/src/components/LinkStructureTagForm.js

@@ -142,11 +142,11 @@ LinkStructureTagForm.propTypes = {
 const mapStateToProps = ({
   linkedStructureTags,
   structure,
-  structureTags,
+  editableStructureTags,
 }) => ({
   linkedStructureTags,
   structureId: _.prop("id")(structure),
-  structureTags,
+  structureTags: editableStructureTags,
 });
 
 const mapDispatchToProps = {

package/src/components/LinkedStructureTag.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Icon, Label, Popup } from "semantic-ui-react";
@@ -7,9 +8,10 @@ import LinkStructureTagForm from "./LinkStructureTagForm";
 const LinkedStructureTag = ({
   id,
   _embedded,
+  editable,
   description,
   loading,
-  manageTags
+  structureTags,
 }) => {
   const name = _embedded.data_structure_tag.name;
   const tagId = _embedded.data_structure_tag.id;
@@ -20,6 +22,8 @@ const LinkedStructureTag = ({
     if (loading) setOpenForm(false);
   }, [loading, setOpenForm]);
 
+  const trigger = editable ? <Icon link name="edit" /> : null;
+
   return (
     <Popup
       basic
@@ -32,7 +36,7 @@ const LinkedStructureTag = ({
       positionFixed
       trigger={
         <Label tag style={{ marginLeft: "1.5em" }}>
-          {manageTags && (
+          {_.isEmpty(structureTags) ? null : (
             <Popup
               on="click"
               basic
@@ -53,7 +57,7 @@ const LinkedStructureTag = ({
               position="bottom center"
               size="large"
               positionFixed
-              trigger={<Icon link name="edit" />}
+              trigger={trigger}
             />
           )}
 
@@ -67,14 +71,19 @@ const LinkedStructureTag = ({
 LinkedStructureTag.propTypes = {
   _embedded: PropTypes.object,
   description: PropTypes.string,
+  editable: PropTypes.bool,
   id: PropTypes.number,
   loading: PropTypes.bool,
-  manageTags: PropTypes.bool
+  structureTags: PropTypes.array,
 };
 
-const mapStateToProps = state => ({
-  loading: state.linkingStructureTags || state.deletingStructureTags,
-  manageTags: state.userPermissions.manage_tags
+const mapStateToProps = ({
+  editableStructureTags,
+  linkingStructureTags,
+  deletingStructureTags,
+}) => ({
+  loading: linkingStructureTags || deletingStructureTags,
+  structureTags: editableStructureTags,
 });
 
 export default connect(mapStateToProps)(LinkedStructureTag);

package/src/components/StructureLinkTagButton.js

@@ -1,19 +1,16 @@
-import React, { useEffect, useState } from "react";
+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 = ({ loading }) => {
+export const StructureLinkTagButton = ({ structureTags }) => {
   const { formatMessage } = useIntl();
   const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    if (loading) setOpen(false);
-  }, [loading, setOpen]);
-
-  return (
+  return _.isEmpty(structureTags) ? null : (
     <Popup
       on="click"
       basic
@@ -21,7 +18,7 @@ export const StructureLinkTagButton = ({ loading }) => {
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
       open={open}
-      content={<LinkStructureTagForm />}
+      content={<LinkStructureTagForm structureTags={structureTags} />}
       position="bottom center"
       size="large"
       positionFixed
@@ -40,11 +37,11 @@ export const StructureLinkTagButton = ({ loading }) => {
 };
 
 StructureLinkTagButton.propTypes = {
-  loading: PropTypes.bool
+  structureTags: PropTypes.array,
 };
 
-const mapStateToProps = ({ deletingStructureTags, linkingStructureTags }) => ({
-  loading: deletingStructureTags || linkingStructureTags
+const mapStateToProps = ({ editableStructureTags }) => ({
+  structureTags: editableStructureTags,
 });
 
 export default connect(mapStateToProps)(StructureLinkTagButton);

package/src/components/StructureSummary.js

@@ -153,7 +153,7 @@ const mapStateToProps = (state) => ({
   userPermissions: state.userPermissions,
   linkedStructureTagsLoading: state.linkedStructureTagsLoading,
   updatedAt: getStructureUpdatedAt(state),
-  structureTags: state.structureTags,
+  structureTags: state.editableStructureTags,
   structureGrant: state.structureGrant,
   ...state.structure,
   isAdmin: state.authentication.role === "admin",

package/src/components/StructureTag.js

@@ -2,30 +2,69 @@ 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 { createStructureTag, updateStructureTag } from "../routines";
+import StructureTagsCrumbs from "./StructureTagsCrumbs";
 import StructureTagForm from "./StructureTagForm";
 
-export const StructureTag = ({ isCreate }) => (
-  <>
-    <Container text as={Segment}>
-      <Header as="h2">
-        <Icon name="tag" />
-        <Header.Content>
-          <FormattedMessage
-            id={
-              isCreate
-                ? "structureTags.actions.create"
-                : "structureTags.actions.update"
-            }
+const DEFAULT_VALUES = {
+  name: "",
+  domainIds: [],
+};
+
+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;
+  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}
           />
-        </Header.Content>
-      </Header>
-      <StructureTagForm />
-    </Container>
-  </>
-);
+        )}
+      </Container>
+    </>
+  );
+};
 
 StructureTag.propTypes = {
-  isCreate: PropTypes.bool
+  structureTag: PropTypes.object,
+  updateStructureTag: PropTypes.func,
+  createStructureTag: PropTypes.func,
+  loading: PropTypes.bool,
+  saving: PropTypes.bool,
+  id: PropTypes.string,
 };
 
-export default StructureTag;
+const mapStateToProps = ({ structureTagSaving }) => ({
+  saving: structureTagSaving,
+});
+
+export default connect(mapStateToProps, {
+  createStructureTag,
+  updateStructureTag,
+})(StructureTag);

package/src/components/StructureTagForm.js

@@ -1,38 +1,28 @@
-import React from "react";
+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 { connect } from "react-redux";
-import { HistoryBackButton } from "@truedat/core/components";
-import { createStructureTag, updateStructureTag } from "../routines";
+import { HistoryBackButton, DomainSelector } from "@truedat/core/components";
 
 export const StructureTagForm = ({
-  createStructureTag,
-  updateStructureTag,
-  isSubmitting,
+  loading,
+  onSubmit,
+  saving,
   structureTag,
 }) => {
+  const [domainsLoading, setDomainsLoading] = useState(true);
   const { formatMessage } = useIntl();
   const { handleSubmit, control, formState } = useForm({
     mode: "all",
-    defaultValues: {
-      name: "",
-      ...structureTag,
-    },
+    defaultValues: _.pick(["name", "domainIds"])(structureTag),
   });
 
-  const onSubmit = (params) =>
-    "id" in structureTag
-      ? updateStructureTag({
-          id: structureTag.id,
-          ...params,
-        })
-      : createStructureTag(params);
   const { isDirty, isValid } = formState;
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit)}>
+    <Form onSubmit={handleSubmit(onSubmit)} loading={loading || domainsLoading}>
       <Controller
         control={control}
         name="name"
@@ -56,19 +46,32 @@ export const StructureTagForm = ({
           />
         )}
       />
+      <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={isSubmitting}
-          disabled={isSubmitting || !isDirty || !isValid}
+          loading={saving}
+          disabled={saving || !isDirty || !isValid}
         >
-          {formatMessage({ id: "actions.submit" })}
+          {formatMessage({ id: "actions.save" })}
         </Button>
         <HistoryBackButton
           content={formatMessage({ id: "actions.cancel" })}
-          disabled={isSubmitting}
+          disabled={saving}
         />
       </div>
     </Form>
@@ -76,18 +79,10 @@ export const StructureTagForm = ({
 };
 
 StructureTagForm.propTypes = {
-  createStructureTag: PropTypes.func.isRequired,
-  updateStructureTag: PropTypes.func.isRequired,
-  isSubmitting: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
+  saving: PropTypes.bool,
   structureTag: PropTypes.object,
 };
 
-const mapStateToProps = ({ structureTagCreating, structureTag }) => ({
-  isSubmitting: structureTagCreating,
-  structureTag,
-});
-
-export default connect(mapStateToProps, {
-  createStructureTag,
-  updateStructureTag,
-})(StructureTagForm);
+export default StructureTagForm;

package/src/components/StructureTags.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Button, Header, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import { useIntl, FormattedMessage } from "react-intl";
 import { STRUCTURE_TAGS_NEW } from "@truedat/core/routes";
-import { useAuthorized } from "@truedat/core/hooks";
 import StructureTagsCards from "./StructureTagsCards";
 
-export const StructureTags = () =>
-  useAuthorized() ? (
+export const StructureTags = () => {
+  const { formatMessage } = useIntl();
+  return (
     <Segment>
       <Header as="h2">
         <Button
@@ -15,7 +15,7 @@ export const StructureTags = () =>
           primary
           as={Link}
           to={STRUCTURE_TAGS_NEW}
-          content={<FormattedMessage id="structureTags.actions.create" />}
+          content={formatMessage({ id: "structureTags.actions.create" })}
         />
         <Icon name="tags" circular />
         <Header.Content>
@@ -27,6 +27,7 @@ export const StructureTags = () =>
       </Header>
       <StructureTagsCards />
     </Segment>
-  ) : null;
+  );
+};
 
 export default StructureTags;

package/src/components/StructureTagsCards.js

@@ -5,9 +5,11 @@ 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 { ConfirmModal } from "@truedat/core/components";
+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 = () => (
@@ -21,72 +23,67 @@ const EmptyMessage = () => (
   </Message>
 );
 
-export const StructureTagsCards = ({
-  deleteStructureTag,
-  structureTags,
-  structureTagsLoading,
-}) => {
-  if (structureTagsLoading) return null;
+export const StructureTagsCards = ({ deleteStructureTag, structureTags }) => {
   if (_.isEmpty(structureTags)) return <EmptyMessage />;
   return (
-    <>
-      <Card.Group>
-        {structureTags.map((structureTag, i) => (
-          <Card key={i}>
-            <Card.Content>
-              <Card.Header
-                as={Link}
-                to={linkTo.STRUCTURE_TAGS_EDIT({ id: structureTag.id })}
-              >
-                {_.prop("name")(structureTag)}
-              </Card.Header>
-            </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.structure_count > 0 ? (
-                      <FormattedMessage
-                        id="structureTags.actions.delete.confirmation.content"
-                        values={{
-                          name: <i>{`'${structureTag.name}'`}</i>,
-                          count: structureTag.structure_count,
-                        }}
-                      />
-                    ) : (
-                      <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>
-    </>
+    <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.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,
-  structureTagsLoading: PropTypes.bool,
   deleteStructureTag: PropTypes.func,
 };
 
-const mapStateToProps = ({ structureTags, structureTagsLoading }) => ({
-  structureTags: _.sortBy(accentInsensitivePathOrder("name"))(structureTags),
-  structureTagsLoading,
-});
+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(mapStateToProps, { deleteStructureTag })(
-  StructureTagsCards
-);
+export default connect(null, { deleteStructureTag })(StructureTagsCardsLoader);