@truedat/dd 5.3.0 → 5.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.3.1] 2023-03-11
+
+### Added
+
+- [TD-5509] Structure to structure link form
+
 ## [5.3.0] 2023-03-08
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.2.4",
+    "@truedat/test": "5.3.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,9 +87,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.3.0",
-    "@truedat/core": "5.3.0",
-    "@truedat/df": "5.3.0",
+    "@truedat/auth": "5.3.1",
+    "@truedat/core": "5.3.1",
+    "@truedat/df": "5.3.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "4893c314084a4ea7ca48a4e251d4e47565f3f030"
+  "gitHead": "6f7ae72a2abda5e41480fa5254c3c37447821a45"
 }

package/src/api/queries.js

@@ -1,6 +1,15 @@
 import { gql } from "@apollo/client";
 import { TAG_DETAIL } from "./fragments";
 
+export const LINK_LABELS_QUERY = gql`
+  query StructureToStructureLabels {
+    labels {
+      id
+      name
+    }
+  }
+`;
+
 export const TAG_QUERY = gql`
   query Tag($id: ID!) {
     tag(id: $id) {
@@ -166,6 +175,8 @@ export const STRUCTURE_STRUCTURE_LINKS_QUERY = gql`
     dataStructure(id: $id) {
       id
       dataStructureLinks {
+        _actions
+        id
         labels {
           name
         }

package/src/api.js

@@ -30,6 +30,9 @@ 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_TO_STRUCTURE_LINKS = "/api/data_structure_links";
+const API_STRUCTURE_TO_STRUCTURE_LINK =
+  "/api/data_structures/structure_links/source/:sourceStructureId/target/:targetStructureId";
 const API_STRUCTURE_TYPE = "/api/data_structure_types/:id";
 const API_STRUCTURE_TYPES = "/api/data_structure_types";
 const API_STRUCTURES_DOMAINS_UPLOAD =
@@ -87,4 +90,6 @@ export {
   API_STRUCTURES_UPLOAD_EVENTS,
   API_STRUCTURE_NOTE,
   API_STRUCTURE_NOTES,
+  API_STRUCTURE_TO_STRUCTURE_LINKS,
+  API_STRUCTURE_TO_STRUCTURE_LINK,
 };

package/src/components/LinkLabelsSelector.js

@@ -0,0 +1,74 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { Form } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useQuery } from "@apollo/client";
+import { LINK_LABELS_QUERY } from "../api/queries";
+
+const makeOptions = (labels) =>
+  _.flow(
+    _.sortBy("name"),
+    _.map(({ id, name }) => ({
+      key: id,
+      value: id,
+      text: name,
+    }))
+  )(labels);
+
+export const LinkLabelsSelector = ({
+  labels,
+  loading,
+  onChange,
+  selectedLabelIds,
+}) => {
+  const { formatMessage } = useIntl();
+  const options = makeOptions(labels);
+
+  return _.isEmpty(labels) ? null : (
+    <Form.Field>
+      <label>
+        <FormattedMessage id="structureLink.selector.label" />
+      </label>
+
+      <Form.Dropdown
+        loading={loading}
+        multiple
+        name="link-label-selector"
+        onChange={(_e, { value: labels }) => {
+          onChange(labels);
+        }}
+        options={options}
+        placeholder={formatMessage({
+          id: loading ? "loading" : "structureLink.selector.placeholder",
+        })}
+        search
+        selection
+        value={selectedLabelIds}
+      />
+    </Form.Field>
+  );
+};
+
+LinkLabelsSelector.propTypes = {
+  labels: PropTypes.array,
+  loading: PropTypes.bool,
+  onChange: PropTypes.func,
+  selectedLabelIds: PropTypes.array,
+};
+
+export const LinkLabelsSelectorLoader = (props) => {
+  const { error, data } = useQuery(LINK_LABELS_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+  if (error) return null;
+  const labels = data?.labels || [];
+  return <LinkLabelsSelector {...props} labels={labels} />;
+};
+
+LinkLabelsSelectorLoader.propTypes = {
+  onChange: PropTypes.func,
+  selectedLabelIds: PropTypes.array,
+};
+
+export default LinkLabelsSelectorLoader;

package/src/components/StructureStructureForm.js

@@ -0,0 +1,95 @@
+import _ from "lodash/fp";
+import React, { Suspense } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { Button, Form } from "semantic-ui-react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { HistoryBackButton } from "@truedat/core/components";
+import { linkStructureToStructure as linkStructureToStructureRoutine } from "../routines";
+import LinkLabelsSelector from "./LinkLabelsSelector";
+
+const StructureSelector = React.lazy(() =>
+  import("@truedat/dd/components/StructureSelector")
+);
+
+export const StructureStructureForm = ({
+  sourceStructure,
+  linkStructureToStructure,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: {
+      sourceStructureId: sourceStructure.id,
+      targetStructureId: null,
+      labelIds: [],
+    },
+  });
+  const { isDirty, isValid } = formState;
+
+  return (
+    <Suspense fallback={null}>
+      <Form
+        onSubmit={handleSubmit((data) => {
+          linkStructureToStructure(data);
+        })}
+      >
+        <Controller
+          control={control}
+          name="labelIds"
+          render={({ field: { onChange, value: selectedLabelIds } }) => (
+            <LinkLabelsSelector
+              onChange={onChange}
+              selectedLabelIds={selectedLabelIds}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="targetStructureId"
+          rules={{ required: true }}
+          render={({ field: { onChange } }) => (
+            <StructureSelector
+              onSelect={({ id }) => {
+                onChange(id);
+              }}
+            />
+          )}
+        />
+
+        <div className="actions">
+          <HistoryBackButton
+            content={formatMessage({ id: "actions.cancel" })}
+          />
+          <Button
+            type="submit"
+            disabled={!isDirty || !isValid}
+            primary
+            content={formatMessage({ id: "actions.save" })}
+          />
+        </div>
+      </Form>
+    </Suspense>
+  );
+};
+
+StructureStructureForm.propTypes = {
+  sourceStructure: PropTypes.object,
+  linkStructureToStructure: PropTypes.func,
+};
+
+const mapDispatchToProps = {
+  linkStructureToStructure: linkStructureToStructureRoutine,
+};
+
+const mapStateToProps = ({ structure }) => ({
+  sourceStructure: structure,
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(StructureStructureForm);

package/src/components/StructureStructureLinks.js

@@ -2,13 +2,18 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
-import { Table, Grid } from "semantic-ui-react";
+import { Button, Table, Grid } from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
 import { columnDecorator } from "@truedat/core/services";
 import { Loading } from "@truedat/core/components";
 import { useQuery } from "@apollo/client";
 import { useParams } from "react-router-dom";
+import { connect } from "react-redux";
+import { ConfirmModal } from "@truedat/core/components";
 import { StructureCrumbs } from "../components/StructureCrumbs";
 import { STRUCTURE_STRUCTURE_LINKS_QUERY } from "../api/queries";
+import { deleteStructureStructureLink as deleteStructureStructureLinkRoutine } from "../routines";
 
 // An arrow with labels
 export const Edge = ({ structureId, structureLink }) => (
@@ -68,12 +73,51 @@ Edge.propTypes = {
   structureLink: PropTypes.object,
 };
 
+export const DeleteLink = ({ deleteStructureStructureLink, structureLink }) => {
+  return !structureLink._actions.delete_struct_to_struct_link ? null : (
+    <ConfirmModal
+      icon="trash"
+      trigger={
+        <Button
+          id={`delete-link-${structureLink.source.id}-${structureLink.target.id}`}
+          icon="trash alternate"
+          color="red"
+        />
+      }
+      header={
+        <FormattedMessage id="relations.actions.data_field.delete.confirmation.header" />
+      }
+      content={
+        <FormattedMessage id="relations.actions.data_field.delete.confirmation.content" />
+      }
+      onConfirm={() =>
+        _.flow(
+          ({
+            source: { id: sourceStructureId },
+            target: { id: targetStructureId },
+            id: dataStructureLinkId,
+          }) => ({ dataStructureLinkId, sourceStructureId, targetStructureId }),
+          (destructuredLink) => deleteStructureStructureLink(destructuredLink)
+        )(structureLink)
+      }
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+DeleteLink.propTypes = {
+  structureLink: PropTypes.object,
+  deleteStructureStructureLink: PropTypes.func,
+};
+
 export const StructureStructureLinks = ({
   structureId,
   currentVersion,
   structureLinks,
+  canLinkStructureToStructure,
 }) => {
-  const columns = [
+  const fixedColumns = [
     {
       header: "structureLink.currentStructure",
       fieldSelector: () => currentVersion.name,
@@ -107,6 +151,21 @@ export const StructureStructureLinks = ({
     },
   ];
 
+  const DeleteLinkConnected = connect(null, {
+    deleteStructureStructureLink: deleteStructureStructureLinkRoutine,
+  })(DeleteLink);
+
+  const deleteButtonColumn = {
+    textAlign: "center",
+    name: "_actions",
+    fieldSelector: (structureLink) => structureLink,
+    fieldDecorator: (structureLink) =>
+      React.createElement(DeleteLinkConnected, { structureLink }),
+  };
+  const columns = canLinkStructureToStructure
+    ? [...fixedColumns, deleteButtonColumn]
+    : fixedColumns;
+
   const headerRow = columns.map(({ header }, key) => (
     <Table.HeaderCell
       key={key}
@@ -128,6 +187,17 @@ export const StructureStructureLinks = ({
 
   return (
     <Grid>
+      {structureId && canLinkStructureToStructure && (
+        <Grid.Column width={16}>
+          <Button
+            floated="right"
+            primary
+            as={Link}
+            to={linkTo.STRUCTURE_STRUCTURE_LINKS_NEW({ id: structureId })}
+            content={<FormattedMessage id="links.actions.create" />}
+          />
+        </Grid.Column>
+      )}
       {!_.isEmpty(structureLinks) && (
         <Grid.Column width={16}>
           <Table
@@ -145,8 +215,23 @@ StructureStructureLinks.propTypes = {
   structureId: PropTypes.string,
   currentVersion: PropTypes.object,
   structureLinks: PropTypes.array,
+  canLinkStructureToStructure: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => {
+  const { structureActions } = state;
+  return {
+    canLinkStructureToStructure: _.has(
+      "create_struct_to_struct_link",
+      structureActions
+    ),
+  };
 };
 
+const StructureStructureLinksConnected = connect(mapStateToProps)(
+  StructureStructureLinks
+);
+
 export const StructuresStructureLinksLoader = () => {
   const { id } = useParams();
   const { loading, error, data } = useQuery(STRUCTURE_STRUCTURE_LINKS_QUERY, {
@@ -155,8 +240,9 @@ export const StructuresStructureLinksLoader = () => {
   });
   if (error) return null;
   if (loading) return <Loading />;
+
   return (
-    <StructureStructureLinks
+    <StructureStructureLinksConnected
       structureId={data?.dataStructure?.id}
       structureLinks={data?.dataStructure?.dataStructureLinks}
       currentVersion={data?.dataStructure?.currentVersion}

package/src/components/StructureTabPane.js

@@ -5,6 +5,7 @@ import { Route, Switch } from "react-router-dom";
 import { ErrorBoundary } from "@truedat/core/components";
 import {
   STRUCTURE_LINKS_NEW,
+  STRUCTURE_STRUCTURE_LINKS_NEW,
   STRUCTURE_NOTES_EDIT,
 } from "@truedat/core/routes";
 import { getActiveTab } from "../selectors/getActiveTab";
@@ -22,6 +23,7 @@ import StructureVersions from "./StructureVersions";
 import StructureMetadata from "./StructureMetadata";
 import StructureNotesLoader from "./StructureNotesLoader";
 import StructureStructureLinks from "./StructureStructureLinks";
+import StructureStructureForm from "./StructureStructureForm";
 
 const StructureLinks = React.lazy(() =>
   import("@truedat/lm/components/StructureLinks")
@@ -63,7 +65,15 @@ export const StructureTabPane = ({ activeTab, tabVisibility }) => {
           <Route render={() => <StructureLinks />} />
         </Switch>
       )}
-      {activeTab === "structureLinks" && <StructureStructureLinks />}
+      {activeTab === "structureLinks" && (
+        <Switch>
+          <Route
+            path={STRUCTURE_STRUCTURE_LINKS_NEW}
+            render={() => <StructureStructureForm />}
+          />
+          <Route render={() => <StructureStructureLinks />} />
+        </Switch>
+      )}
       {activeTab === "profile" && tabVisibility.profile && <StructureProfile />}
       {activeTab === "parents" && <StructureParentRelations />}
       {activeTab === "children" && <StructureChildrenRelations />}

package/src/components/StructureTabPaneRoutes.js

@@ -7,7 +7,7 @@ import {
   STRUCTURE_GRANTS,
   STRUCTURE_IMPACT,
   STRUCTURE_LINEAGE,
-  STRUCTURE_LINKED_STRUCTURES,
+  STRUCTURE_STRUCTURE_LINKS,
   STRUCTURE_LINKS,
   STRUCTURE_METADATA,
   STRUCTURE_NOTES,
@@ -25,7 +25,7 @@ export const StructureTabPaneRoutes = ({}) => (
     <Route path={STRUCTURE_VERSION_VERSIONS} component={StructureTabPane} />
     <Route path={STRUCTURE_VERSION} component={StructureTabPane} />
     <Route path={STRUCTURE_PROFILE} component={StructureTabPane} />
-    <Route path={STRUCTURE_LINKED_STRUCTURES} component={StructureTabPane} />
+    <Route path={STRUCTURE_STRUCTURE_LINKS} component={StructureTabPane} />
     <Route path={STRUCTURE_LINKS} component={StructureTabPane} />
     <Route path={STRUCTURE_VERSIONS} component={StructureTabPane} />
     <Route path={STRUCTURE_EVENTS} component={StructureTabPane} />

package/src/components/StructureTabRoutes.js

@@ -8,7 +8,7 @@ import {
   STRUCTURE_IMPACT,
   STRUCTURE_LINEAGE,
   STRUCTURE_LINKS,
-  STRUCTURE_LINKED_STRUCTURES,
+  STRUCTURE_STRUCTURE_LINKS,
   STRUCTURE_NOTES,
   STRUCTURE_PARENTS,
   STRUCTURE_PROFILE,
@@ -26,7 +26,7 @@ export const StructureTabRoutes = () => (
     <Route path={STRUCTURE_VERSION} component={StructureTabs} />
     <Route path={STRUCTURE_PROFILE} component={StructureTabs} />
     <Route path={STRUCTURE_LINKS} component={StructureTabs} />
-    <Route path={STRUCTURE_LINKED_STRUCTURES} component={StructureTabs} />
+    <Route path={STRUCTURE_STRUCTURE_LINKS} component={StructureTabs} />
     <Route path={STRUCTURE_VERSIONS} component={StructureTabs} />
     <Route path={STRUCTURE_EVENTS} component={StructureTabs} />
     <Route path={STRUCTURE_METADATA} component={StructureTabs} />

package/src/components/StructureTabs.js

@@ -109,7 +109,7 @@ export const StructureTabs = ({
     {
       active: activeTab === "structureLinks",
       as: Link,
-      to: linkTo.STRUCTURE_LINKED_STRUCTURES(structure),
+      to: linkTo.STRUCTURE_STRUCTURE_LINKS(structure),
       content: structureLinks
         ? formatMessage({ id: "tabs.dd.structureLinks" })
         : false,

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

@@ -0,0 +1,138 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import StructureStructureForm from "../StructureStructureForm";
+import { linkStructureToStructure } from "../../routines";
+import { LINK_LABELS_QUERY } from "../../api/queries";
+
+const linkLabels = {
+  labels: [
+    {
+      id: "1",
+      name: "is_copy_from",
+    },
+    {
+      id: "2",
+      name: "reimu_ga_tsukutta",
+    },
+    {
+      id: "3",
+      name: "marisa_ga_tsukutta",
+    },
+  ],
+};
+
+const linkLabelsMock = {
+  request: { query: LINK_LABELS_QUERY },
+  result: { data: linkLabels },
+};
+
+describe("<StructureStructureForm />", () => {
+  const structure = {
+    alias: null,
+    confidential: false,
+    domain_ids: [1],
+    domains: [
+      {
+        external_id: "Acme",
+        id: 1,
+        name: "Acme",
+        parent_id: null,
+        parents: [],
+        updated_at: "2022-03-22 12:56:39.639127Z",
+      },
+    ],
+    external_id: "external_id",
+    id: 67583,
+    inserted_at: "2019-11-27T08:35:44.000000Z",
+    updated_at: "2021-06-10T12:01:17.343065Z",
+    class: null,
+    classes: null,
+    data_structure_link_count: 0,
+    data_structure_type: {
+      metadata_views: [],
+      template_id: 9,
+      translation: null,
+    },
+    degree: null,
+    deleted_at: null,
+    description: null,
+    grant: null,
+    grants: [],
+    group: "group",
+    implementation_count: 0,
+    metadata: {
+      database: "database",
+      host: "host",
+    },
+    name: "structure",
+    note: {},
+    siblings: [],
+    source: {
+      external_id: "oracle_meta_ds2",
+      id: 19,
+    },
+    system: {
+      id: 2,
+      name: "SYSTEM_1",
+    },
+    type: "Schema",
+  };
+
+  it("matches the latest snapshot", async () => {
+    const columns = ["name", "system", "group"].map((name) => ({ name }));
+    const structureActiveFilters = {};
+    const structuresRows = [{ id: 1 }, { id: 2 }];
+    const dispatch = jest.fn();
+
+    const props = {
+      linkStructureToStructure,
+      structuresRows,
+      columns,
+      onSelect: jest.fn(),
+    };
+
+    const renderOpts = {
+      mocks: [linkLabelsMock],
+      state: {
+        structure,
+        structures: [structure],
+        structureActiveFilters,
+      },
+      dispatch,
+    };
+
+    const { queryByText, findByText, getByRole } = render(
+      <StructureStructureForm {...props} />,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/loading/i)).not.toBeInTheDocument()
+    );
+    userEvent.click(await findByText("structure"));
+
+    const saveButton = getByRole("button", { name: "Save" });
+    await waitFor(() => {
+      expect(saveButton).toBeEnabled();
+    });
+
+    const label1 = getByRole("option", { name: "is_copy_from" });
+    const label2 = getByRole("option", { name: "reimu_ga_tsukutta" });
+
+    userEvent.click(label1);
+    userEvent.click(label2);
+
+    userEvent.click(saveButton);
+    await new Promise((r) => setTimeout(r, 200));
+
+    expect(dispatch).toHaveBeenCalledWith({
+      ...linkStructureToStructure(),
+      payload: {
+        sourceStructureId: 67583,
+        targetStructureId: 67583,
+        labelIds: ["1", "2"],
+      },
+    });
+  });
+});