@truedat/lm 8.2.0 → 8.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "Truedat Link Manager",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.2.0",
+    "@truedat/test": "8.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -82,5 +82,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "a0b6d89f64e82602a1f3c5e250691526fe0c558a"
+  "gitHead": "3008f4a5a734dc1f12e9f25a790542b56aed61d2"
 }

package/src/api.js

@@ -2,6 +2,8 @@ const API_RELATION = "/api/relations/:id";
 const API_RELATIONS = "/api/relations";
 const API_RELATIONS_GRAPH = "/api/relations/:id/graph";
 const API_RELATIONS_SEARCH = "/api/relations/search";
+const API_RELATIONS_INDEX_SEARCH = "/api/relations/index_search";
+const API_RELATIONS_FILTERS = "/api/relations/filters";
 const API_TAG = "/api/tags/:id";
 const API_TAGS = "/api/tags";
 const API_TAGS_SEARCH = "/api/tags/search";
@@ -11,6 +13,8 @@ export {
   API_RELATIONS,
   API_RELATIONS_GRAPH,
   API_RELATIONS_SEARCH,
+  API_RELATIONS_INDEX_SEARCH,
+  API_RELATIONS_FILTERS,
   API_TAG,
   API_TAGS,
   API_TAGS_SEARCH,

package/src/components/ConceptLinkForm.js

@@ -0,0 +1,111 @@
+import _ from "lodash/fp";
+import { lazy, useState, useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useIntl } from "react-intl";
+import { clearSelectedRelationTags } from "../routines";
+import { Divider, Button } from "semantic-ui-react";
+import { HistoryBackButton } from "@truedat/core/components";
+import { useWebContext } from "@truedat/core/webContext";
+import RelationTagsLoader from "./RelationTagsLoader";
+import { useCreateRelation } from "../hooks/useRelations";
+import { useNavigate } from "react-router";
+import { getRelationErrorAlertMessage } from "../selectors/messages";
+
+const TagTypeDropdownSelector = lazy(
+  () => import("@truedat/lm/components/TagTypeDropdownSelector")
+);
+
+const ConceptSelector = lazy(
+  () => import("@truedat/bg/concepts/relations/components/ConceptSelector")
+);
+
+const filters = {
+  current: [true],
+  status: ["pending_approval", "draft", "published"],
+};
+
+export const ConceptLinkForm = ({
+  targetId,
+  targetType,
+  redirectUrl,
+  selectTagOptions,
+}) => {
+  const navigate = useNavigate();
+  const selectedRelationTags = useSelector(
+    (state) => state?.selectedRelationTags
+  );
+  const tagOptions = useSelector(selectTagOptions);
+  const { trigger: createRelation, isMutating: creatingRelation } =
+    useCreateRelation();
+  const dispatch = useDispatch();
+  const [selectedConcept, setSelectedConcept] = useState(null);
+  const { formatMessage } = useIntl();
+  const { setAlertMessage } = useWebContext();
+
+  useEffect(() => {
+    return () => {
+      dispatch(clearSelectedRelationTags.trigger());
+    };
+  }, [clearSelectedRelationTags, dispatch]);
+
+  const handleSubmit = () => {
+    const link = {
+      source_id: selectedConcept?.business_concept_id,
+      source_type: "business_concept",
+      target_id: targetId,
+      target_type: targetType,
+      tag_ids: selectedRelationTags ? selectedRelationTags : [],
+    };
+    createRelation({ relation: link })
+      .then(({ data }) => {
+        navigate(redirectUrl, {
+          state: {
+            createdRelation: {
+              ...data?.data,
+              source_name: selectedConcept?.name,
+              source_data: selectedConcept,
+            },
+          },
+        });
+      })
+      .catch((error) => {
+        const alertMessage = getRelationErrorAlertMessage(error, formatMessage);
+        if (alertMessage) {
+          setAlertMessage(alertMessage);
+        }
+      });
+  };
+
+  const disabled = !(selectedConcept && selectedRelationTags);
+
+  return (
+    <>
+      <Divider hidden />
+      <RelationTagsLoader />
+      {!_.isEmpty(tagOptions) && (
+        <>
+          <TagTypeDropdownSelector options={tagOptions} />
+          <Divider hidden />
+        </>
+      )}
+      <ConceptSelector
+        selectedConcept={selectedConcept}
+        handleConceptSelected={setSelectedConcept}
+        defaultFilters={filters}
+      />
+      <Divider hidden />
+      <Button.Group>
+        <Button
+          primary
+          loading={creatingRelation}
+          content={formatMessage({ id: "actions.create" })}
+          disabled={disabled}
+          onClick={handleSubmit}
+        />
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+      </Button.Group>
+    </>
+  );
+};
+
+export default ConceptLinkForm;

package/src/components/LinksPagination.js

@@ -0,0 +1,15 @@
+import { Pagination } from "@truedat/core/components";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export default function LinksPagination() {
+  const { count, size, page, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
+
+  return (
+    <Pagination
+      totalPages={totalPages}
+      activePage={page}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/components/LinksSearch.js

@@ -0,0 +1,139 @@
+import _ from "lodash/fp";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import { useEffect, useRef } from "react";
+import { useNavigate, useLocation } from "react-router";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import { useRelations, useRelationFilters } from "../hooks/useRelations";
+import { Table, Segment, Header, Icon } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { columnDecorator } from "@truedat/core/services";
+import LinksPagination from "./LinksPagination";
+
+const LinkRow = ({ link, columns, highlight }) => (
+  <Table.Row positive={highlight}>
+    {columns.map((column, i) => (
+      <Table.Cell
+        key={i}
+        textAlign={_.prop("textAlign")(column)}
+        content={columnDecorator(column)(link)}
+      />
+    ))}
+  </Table.Row>
+);
+
+const LinksTable = ({ relations, columns, extraRow }) => {
+  const headerRow = columns.map(({ header }, key) => (
+    <Table.HeaderCell
+      key={key}
+      content={header ? <FormattedMessage id={header} /> : null}
+    />
+  ));
+
+  const renderBodyRow = (link, i) => (
+    <LinkRow
+      key={i}
+      link={link}
+      columns={columns}
+      highlight={link.id === extraRow?.id}
+    />
+  );
+
+  return (
+    <Table
+      headerRow={headerRow}
+      renderBodyRow={renderBodyRow}
+      tableData={relations}
+    />
+  );
+};
+const LinksSearchContent = ({
+  columns,
+  extraRow,
+  deletedLinkId,
+  refetchSearch,
+  setRefetchSearch,
+  targetType = "business_concept",
+}) => {
+  const { searchData, loading, filterParams } = useSearchContext();
+  const { trigger: searchRelations } = useRelations();
+  const { trigger: searchRelationsFilters } = useRelationFilters();
+  const previousParamsRef = useRef(filterParams);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const emptyMessage =
+    targetType === "business_concept"
+      ? "linked_concepts.empty"
+      : "linked_structures.empty";
+
+  useEffect(() => {
+    if (refetchSearch) {
+      setRefetchSearch(false);
+      searchRelations(filterParams);
+      searchRelationsFilters(filterParams);
+    }
+  }, [refetchSearch, filterParams, searchRelations, searchRelationsFilters]);
+
+  useEffect(() => {
+    if (_.isEmpty(previousParamsRef.current)) {
+      previousParamsRef.current = filterParams;
+      return;
+    }
+
+    if (extraRow && !_.isEqual(previousParamsRef, filterParams)) {
+      navigate(location.pathname, {
+        replace: true,
+        state: null,
+      });
+    }
+  }, [extraRow, previousParamsRef, location.pathname, filterParams]);
+  const data = _.reject(_.propEq("id", deletedLinkId))(searchData?.data || []);
+  const relations =
+    extraRow && !_.some(_.propEq("id", extraRow.id))(data)
+      ? [extraRow, ...data]
+      : data;
+  return (
+    <Segment loading={loading}>
+      <SearchWidget />
+      {!_.isEmpty(relations) ? (
+        <LinksTable
+          relations={relations}
+          columns={columns}
+          extraRow={extraRow}
+        />
+      ) : (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id={emptyMessage} />
+          </Header.Content>
+        </Header>
+      )}
+      <LinksPagination size="small" />
+    </Segment>
+  );
+};
+
+export function LinksSearch(props) {
+  const defaultFilters = _.propOr({}, "defaultFilters")(props);
+  const useSearch = _.propOr(useRelations, "useSearch")(props);
+  const useFilters = _.propOr(useRelationFilters, "useFilters")(props);
+  const searchProps = {
+    initialSortColumn: _.propOr("source_name.raw", "initialSortColumn")(props),
+    initialSortDirection: "ascending",
+    useSearch: useSearch,
+    useFilters: useFilters,
+    pageSize: 10,
+    omitFilters: ["current", "domain_ids"],
+  };
+
+  return (
+    <SearchContextProvider {...searchProps} defaultFilters={defaultFilters}>
+      <LinksSearchContent {...props} />
+    </SearchContextProvider>
+  );
+}
+
+export default LinksSearch;

package/src/components/QualityControlConcepts.js

@@ -0,0 +1,156 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Grid, Label, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { useDeleteRelation } from "../hooks/useRelations";
+import { Link, useLocation } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+import { ConfirmDeleteRelation } from "./ConfirmDeleteRelation";
+import LinksSearch from "./LinksSearch";
+
+const mapStatusColor = {
+  deprecated: "grey",
+  draft: "olive",
+  pending_approval: "teal",
+  published: "green",
+  rejected: "red",
+  versioned: "yellow",
+};
+
+const ConceptLink = ({ source_id: business_concept_id, source_name: name }) => (
+  <Link
+    to={linkTo.CONCEPT_LINKS_QUALITY_CONTROLS({
+      business_concept_id,
+      id: "current",
+    })}
+  >
+    {name}
+  </Link>
+);
+
+const RelationTag = ({ tag_type }) => {
+  if (!tag_type) return null;
+  return (
+    <FormattedMessage
+      id={`relation.tag.${tag_type}`}
+      defaultMessage={tag_type}
+    />
+  );
+};
+
+const ConfirmDeleteQualityControlRelation = ({ id, deleteRelation }) => (
+  <ConfirmDeleteRelation
+    id={id}
+    resourceType="quality_control_concept"
+    deleteRelation={deleteRelation}
+  />
+);
+
+const StatusDecorator = ({ status }) => (
+  <Label color={mapStatusColor[status]}>
+    <FormattedMessage id={`concepts.status.${status}`} />
+  </Label>
+);
+
+export const QualityControlConcepts = ({ qualityControl, actions }) => {
+  const target_id = qualityControl?.id;
+  const target_type = "quality_control";
+  const source_type = "business_concept";
+  const defaultFilters = {
+    target_id,
+    target_type,
+    source_type,
+  };
+  const [refetchSearch, setRefetchSearch] = useState(false);
+  const [deletedRelationId, setDeletedRelationId] = useState(null);
+  const { trigger: deleteRelation, isMutating: deleting } = useDeleteRelation();
+  const canCreateLink = _.includes("link_to_business_concept")(actions);
+  const { state } = useLocation();
+  const extraRow = state?.createdRelation;
+
+  const onDeleteRelation = ({ id }) => {
+    deleteRelation(id).then(({ status }) => {
+      if (status === 204) {
+        setRefetchSearch(true);
+        setDeletedRelationId(id);
+      }
+    });
+  };
+
+  const deleteColumn = canCreateLink
+    ? [
+        {
+          fieldSelector: _.identity,
+          fieldDecorator: ({ id }) => (
+            <ConfirmDeleteQualityControlRelation
+              id={id}
+              deleteRelation={onDeleteRelation}
+            />
+          ),
+        },
+      ]
+    : [];
+
+  const columns = [
+    {
+      header: "concepts.props.name",
+      fieldSelector: _.identity,
+      fieldDecorator: ConceptLink,
+    },
+    {
+      header: "concepts.props.domain",
+      fieldSelector: _.path("source_data.domain.name"),
+    },
+    {
+      header: "concepts.props.tags",
+      fieldSelector: _.identity,
+      fieldDecorator: RelationTag,
+    },
+    {
+      header: "concepts.props.status",
+      fieldSelector: _.path("source_data.status"),
+      fieldDecorator: (status) => <StatusDecorator status={status} />,
+    },
+    ...deleteColumn,
+  ];
+
+  return (
+    <Segment basic loading={deleting}>
+      <Grid>
+        <Grid.Column width={16}>
+          {canCreateLink && (
+            <Button
+              floated="right"
+              primary
+              as={Link}
+              to={linkTo.QUALITY_CONTROL_CONCEPT_LINKS_NEW({
+                id: qualityControl?.id,
+                version: qualityControl?.version,
+              })}
+              state={null}
+              content={<FormattedMessage id="links.actions.create" />}
+            />
+          )}
+        </Grid.Column>
+        <Grid.Column width={16}>
+          <LinksSearch
+            columns={columns}
+            extraRow={extraRow}
+            deletedLinkId={deletedRelationId}
+            defaultFilters={defaultFilters}
+            refetchSearch={refetchSearch}
+            setRefetchSearch={setRefetchSearch}
+          />
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+QualityControlConcepts.propTypes = {
+  qualityControl: PropTypes.object,
+  actions: PropTypes.array,
+};
+
+export default QualityControlConcepts;

package/src/components/QualityControlStructures.js

@@ -0,0 +1,183 @@
+import _ from "lodash/fp";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Button, Grid, Icon, Label, Segment } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { useDeleteRelation } from "../hooks/useRelations";
+import { Link, useLocation } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+import { useRelations, useRelationFilters } from "../hooks/useRelations";
+import { ConfirmDeleteRelation } from "./ConfirmDeleteRelation";
+import LinksSearch from "./LinksSearch";
+import Moment from "react-moment";
+
+const StructureLink = ({ target_id: id, target_name: name }) => (
+  <Link to={linkTo.STRUCTURE({ id })} title={name}>
+    {name}
+  </Link>
+);
+
+const ConfirmDeleteQualityControlRelation = ({ id, deleteRelation }) => (
+  <ConfirmDeleteRelation
+    id={id}
+    resourceType="quality_control_structure"
+    deleteRelation={deleteRelation}
+  />
+);
+
+const PathDecorator = (path) => (
+  <span title={_.join(" › ")(path)}>
+    {_.flow(_.join(" › "), _.truncate({ length: 90 }))(path)}{" "}
+  </span>
+);
+
+const DateDecorator = (date) => {
+  const { locale } = useIntl();
+  return (
+    date && <Moment locale={locale} date={date} format="YYYY-MM-DD HH:mm" />
+  );
+};
+
+const DeletedDateDecorator = (date) => {
+  const { locale } = useIntl();
+  return (
+    date && (
+      <Label className="alert warning">
+        <Icon name="warning circle" color="red" />
+        <Moment locale={locale} date={date} format="YYYY-MM-DD HH:mm" />
+      </Label>
+    )
+  );
+};
+
+const RelationTag = ({ tag_type }) => {
+  if (!tag_type) return null;
+  return (
+    <FormattedMessage
+      id={`relation.tag.${tag_type}`}
+      defaultMessage={tag_type}
+    />
+  );
+};
+
+export const QualityControlStructures = ({ qualityControl, actions }) => {
+  const source_id = qualityControl?.id;
+  const source_type = "quality_control";
+  const target_type = "data_structure";
+  const defaultFilters = {
+    source_id,
+    target_type,
+    source_type,
+  };
+  const [refetchSearch, setRefetchSearch] = useState(false);
+  const [deletedRelationId, setDeletedRelationId] = useState(null);
+  const { trigger: deleteRelation, isMutating: deleting } = useDeleteRelation();
+  const canCreateLink = _.includes("link_to_data_structure")(actions);
+  const { state } = useLocation();
+  const extraRow = state?.createdRelation;
+
+  const onDeleteRelation = ({ id }) => {
+    deleteRelation(id).then(({ status }) => {
+      if (status === 204) {
+        setRefetchSearch(true);
+        setDeletedRelationId(id);
+      }
+    });
+  };
+
+  const deleteColumn = canCreateLink
+    ? [
+        {
+          fieldSelector: _.identity,
+          fieldDecorator: ({ id }) => (
+            <ConfirmDeleteQualityControlRelation
+              id={id}
+              deleteRelation={onDeleteRelation}
+            />
+          ),
+        },
+      ]
+    : [];
+
+  const columns = [
+    {
+      header: "structures.props.name",
+      fieldSelector: _.identity,
+      fieldDecorator: StructureLink,
+    },
+    {
+      header: "structures.props.domain",
+      fieldSelector: _.path("target_data.domain.name"),
+    },
+    {
+      header: "structures.props.system",
+      fieldSelector: _.path("target_data.system.name"),
+    },
+    {
+      header: "structures.props.path",
+      fieldSelector: _.path("target_data.path"),
+      fieldDecorator: PathDecorator,
+    },
+    {
+      header: "structures.props.last_change_at",
+      fieldSelector: _.path("target_data.last_change_at"),
+      fieldDecorator: DateDecorator,
+      width: 1,
+    },
+    {
+      header: "structures.props.relation_tags",
+      fieldSelector: _.identity,
+      fieldDecorator: RelationTag,
+    },
+    {
+      header: "structures.props.deleted_at",
+      fieldSelector: _.path("target_data.deleted_at"),
+      fieldDecorator: DeletedDateDecorator,
+      width: 1,
+    },
+    ...deleteColumn,
+  ];
+
+  return (
+    <Segment basic loading={deleting}>
+      <Grid>
+        <Grid.Column width={16}>
+          {canCreateLink && (
+            <Button
+              floated="right"
+              primary
+              as={Link}
+              to={linkTo.QUALITY_CONTROL_STRUCTURE_LINKS_NEW({
+                id: qualityControl?.id,
+                version: qualityControl?.version,
+              })}
+              state={null}
+              content={<FormattedMessage id="links.actions.create" />}
+            />
+          )}
+        </Grid.Column>
+        <Grid.Column width={16}>
+          <LinksSearch
+            columns={columns}
+            extraRow={extraRow}
+            deletedLinkId={deletedRelationId}
+            defaultFilters={defaultFilters}
+            refetchSearch={refetchSearch}
+            setRefetchSearch={setRefetchSearch}
+            targetType={target_type}
+            initialSortColumn="target_name.raw"
+            useSearch={() => useRelations({ document: "all" })}
+            useFilters={() => useRelationFilters({ document: "all" })}
+          />
+        </Grid.Column>
+      </Grid>
+    </Segment>
+  );
+};
+
+QualityControlStructures.propTypes = {
+  qualityControl: PropTypes.object,
+  actions: PropTypes.array,
+};
+
+export default QualityControlStructures;

package/src/components/RelationTagForm.js

@@ -31,6 +31,10 @@ export const RelationTagForm = ({ relationTag, isSubmitting, onSubmit }) => {
       value: "data_field",
       text: formatMessage({ id: "target_type.data_field" }),
     },
+    {
+      value: "quality_control",
+      text: formatMessage({ id: "target_type.quality_control" }),
+    },
   ];
   const currentTargetType = watch("target_type");
   return (