@truedat/bg 7.10.3 → 7.11.0

package/src/concepts/hooks/useConcepts.js

@@ -4,6 +4,7 @@ import FileSaver from "file-saver";
 import { apiJson, apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 
 import {
+  API_CONCEPT_SUGGESTIONS,
   API_CONCEPT_FILTERS,
   API_CONCEPT_LINKS_DOWNLOAD,
   API_BUSINESS_CONCEPT_VERSIONS_SEARCH,
@@ -62,6 +63,12 @@ export const useConceptsUpload = () => {
   );
 };
 
+export const useConceptSuggestions = () => {
+  return useSWRMutations(API_CONCEPT_SUGGESTIONS, (url, { arg }) => {
+    return apiJsonPost(url, arg);
+  });
+};
+
 export const useConceptLinksUpload = () => {
   return useSWRMutations(API_CONCEPT_LINKS_UPLOAD, (url, { arg }) =>
     apiJsonPost(url, arg)

package/src/concepts/relations/api.js

@@ -1,3 +1,11 @@
 const API_RELATIONS = "/api/relations";
+const API_RELATIONS_SEARCH = "/api/relations/index_search";
+const API_RELATIONS_FILTERS = "/api/relations/filters";
+const API_RELATIONS_BULK_UPDATE_STATUS = "/api/relations/status";
 
-export { API_RELATIONS };
+export {
+  API_RELATIONS,
+  API_RELATIONS_SEARCH,
+  API_RELATIONS_FILTERS,
+  API_RELATIONS_BULK_UPDATE_STATUS,
+};

package/src/concepts/relations/components/ConceptLinksApprovalResults.js

@@ -0,0 +1,91 @@
+import _ from "lodash/fp";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Breadcrumb, Message } from "semantic-ui-react";
+import { useLocation, Link } from "react-router";
+import { linkTo } from "@truedat/core/routes";
+import { CONCEPT_LINKS_APPROVALS } from "@truedat/core/routes";
+
+export default function LinksApprovalResults() {
+  const { state } = useLocation();
+
+  if (!state) {
+    window.location.replace(CONCEPT_LINKS_APPROVALS);
+    return null;
+  }
+
+  const { formatMessage } = useIntl();
+  const relations = state?.relations || [];
+  const isRejection = state.status === "rejected";
+
+  const relationDecorator = (relation) => (
+    <Message.Item key={relation.id}>
+      <FormattedMessage id="conceptRelations.approvals.results.message.source_name" />
+      <Link
+        to={linkTo.CONCEPT_VERSION({
+          business_concept_id: relation.source_id,
+          id: "current",
+        })}
+        target="_blank"
+      >
+        {relation.source_name}
+      </Link>
+      {relation.tag_type ? (
+        <FormattedMessage
+          id="conceptRelations.approvals.results.message.tag_type"
+          values={{ tag_type: relation.tag_type }}
+        />
+      ) : null}
+      <FormattedMessage id="conceptRelations.approvals.results.message.target_name" />
+      <Link
+        to={linkTo.STRUCTURE({
+          id: relation.target_id,
+        })}
+        target="_blank"
+      >
+        {relation.target_name}
+      </Link>
+    </Message.Item>
+  );
+
+  return (
+    <>
+      <Breadcrumb>
+        <Breadcrumb.Section
+          as={Link}
+          to={CONCEPT_LINKS_APPROVALS}
+          active={false}
+        >
+          {formatMessage({ id: "conceptRelations.approvals.header" })}
+        </Breadcrumb.Section>
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section active>
+          {formatMessage({ id: "conceptRelations.approvals.results.header" })}
+        </Breadcrumb.Section>
+      </Breadcrumb>
+
+      {_.isEmpty(relations) ? null : (
+        <Message positive={!isRejection} warning={isRejection}>
+          <Message.Header>
+            {formatMessage({
+              id: `conceptRelations.approvals.results.${state.status}.header`,
+            })}
+          </Message.Header>
+          {_.map((relation) => relationDecorator(relation))(state.relations)}
+        </Message>
+      )}
+
+      {_.map((errorGroup) => (
+        <Message error key={errorGroup.reason}>
+          <Message.Header>
+            {formatMessage({
+              id: `conceptRelations.approvals.results.errors.${errorGroup.reason}.header`,
+            })}
+          </Message.Header>
+          {_.map((relation) => relationDecorator(relation))(
+            errorGroup.relations
+          )}
+        </Message>
+      ))(state.errors)}
+    </>
+  );
+}

package/src/concepts/relations/components/ConceptLinksApprovals.js

@@ -0,0 +1,225 @@
+import _ from "lodash/fp";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { CONCEPT_LINKS_APPROVALS_RESULTS } from "@truedat/core/routes";
+import {
+  Header,
+  Button,
+  Checkbox,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  Grid,
+  GridColumn,
+  GridRow,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useLinksBulkUpdateStatus } from "../hooks/useLinks";
+import Pagination from "@truedat/core/search/Pagination";
+import ConceptLinksApprovalsLabelResults from "./ConceptLinksApprovalsLabelResults";
+import ConceptLinksApprovalsTable from "./ConceptLinksApprovalsTable";
+
+export const ConceptLinksApprovals = () => {
+  const { searchData, loading, setOnSearchChange, searchMust, setSearchMust } =
+    useSearchContext();
+
+  const navigate = useNavigate();
+  const { formatMessage } = useIntl();
+  const { trigger: triggerUpdateStatus, isMutating: mutatingStatus } =
+    useLinksBulkUpdateStatus();
+
+  const links = _.propOr([], "data")(searchData);
+
+  const [selectedLinks, setSelectedLinks] = useState([]);
+
+  const cleanSelection = () => setSelectedLinks([]);
+  const approveView = _.isEqual(searchMust.status, ["pending"]);
+
+  useEffect(() => {
+    setOnSearchChange(() => cleanSelection);
+  }, []);
+
+  const allChecked = () => {
+    const ids = _.map(_.prop("id"))(links);
+    return (
+      _.negate(_.isEmpty)(selectedLinks) &&
+      _.every((id) => _.includes(id)(selectedLinks))(ids)
+    );
+  };
+
+  const addAll = (_e, target) => {
+    const checkedAll = _.prop("checked")(target);
+    const ids = _.map(_.prop("id"))(links);
+    checkedAll
+      ? setSelectedLinks(_.flow(_.concat(ids), _.uniq)(selectedLinks))
+      : setSelectedLinks(
+          _.flow(_.difference(selectedLinks), _.uniq)(selectedLinks)
+        );
+  };
+
+  const checkRow = (link) => {
+    const id = _.prop("id")(link);
+    const exists = _.some((selectedId) => _.eq(id, selectedId))(selectedLinks);
+    exists
+      ? setSelectedLinks(
+          _.flow(
+            _.remove((selectedId) => _.eq(id, selectedId)),
+            _.uniq()
+          )(selectedLinks)
+        )
+      : setSelectedLinks(_.flow(_.concat(id), _.uniq)(selectedLinks));
+  };
+
+  const isRowChecked = (link) => {
+    const id = _.prop("id")(link);
+    return _.some((selectedId) => _.eq(id, selectedId))(selectedLinks);
+  };
+
+  const disableUpdate = mutatingStatus || _.isEmpty(selectedLinks);
+
+  const handleStatusFilterChange = (_e, { value }) =>
+    _.includes(value, searchMust.status)
+      ? setSearchMust({
+          ...searchMust,
+          status: _.without([value], searchMust.status),
+        })
+      : setSearchMust({
+          ...searchMust,
+          status: _.concat(value, searchMust.status),
+        });
+
+  const handleUpdateStatus = (newState) => {
+    const params = { relation_ids: selectedLinks, status: newState };
+
+    triggerUpdateStatus(params).then((response) => {
+      navigate(CONCEPT_LINKS_APPROVALS_RESULTS, {
+        state: {
+          ..._.prop("data.data")(response),
+          status: newState,
+        },
+      });
+    });
+  };
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon
+          circular
+          name={formatMessage({
+            id: "conceptRelations.approvals.header.icon",
+            defaultMessage: "linkify",
+          })}
+        />
+        <Header.Content>
+          <FormattedMessage id={"conceptRelations.approvals.header"} />
+          <Header.Subheader>
+            <FormattedMessage id={"conceptRelations.approvals.subheader"} />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment attached="bottom">
+        <Grid className="grant-requests-bulk-actions">
+          <GridRow>
+            <GridColumn width={8}>
+              <SearchWidget />
+            </GridColumn>
+            <GridColumn width={8} textAlign="right">
+              {approveView ? (
+                <>
+                  <Button
+                    primary
+                    disabled={disableUpdate}
+                    onClick={() => handleUpdateStatus("approved")}
+                  >
+                    <FormattedMessage id="conceptRelations.approvals.actions.approve" />
+                  </Button>
+                  <Button
+                    secondary
+                    disabled={disableUpdate}
+                    onClick={() => handleUpdateStatus("rejected")}
+                  >
+                    <FormattedMessage id="conceptRelations.approvals.actions.reject" />
+                  </Button>
+                </>
+              ) : null}
+            </GridColumn>
+          </GridRow>
+          <GridRow>
+            <GridColumn
+              width={8}
+              className="concepts-links-approvals-status-selector"
+            >
+              <Checkbox
+                label={
+                  <label>
+                    <FormattedMessage
+                      id={`conceptRelations.approvals.status.pending`}
+                    />
+                  </label>
+                }
+                value="pending"
+                checked={_.includes("pending", searchMust.status)}
+                onChange={handleStatusFilterChange}
+              />
+              <Checkbox
+                label={
+                  <label>
+                    <FormattedMessage
+                      id={`conceptRelations.approvals.status.approved`}
+                    />
+                  </label>
+                }
+                value="approved"
+                checked={_.includes("approved", searchMust.status)}
+                onChange={handleStatusFilterChange}
+              />
+              <Checkbox
+                label={
+                  <label>
+                    <FormattedMessage
+                      id={`conceptRelations.approvals.status.rejected`}
+                    />
+                  </label>
+                }
+                value="rejected"
+                checked={_.includes("rejected", searchMust.status)}
+                onChange={handleStatusFilterChange}
+              />
+            </GridColumn>
+            <GridColumn width={8} textAlign="right">
+              <ConceptLinksApprovalsLabelResults
+                approveView={approveView}
+                selectedCount={_.size(selectedLinks)}
+              />
+            </GridColumn>
+          </GridRow>
+        </Grid>
+        <Segment attached="bottom">
+          <Dimmer.Dimmable dimmed={loading}>
+            {loading ? (
+              <Dimmer active inverted>
+                <Loader />
+              </Dimmer>
+            ) : null}
+
+            <ConceptLinksApprovalsTable
+              approveView={approveView}
+              addAll={addAll}
+              checkedAll={allChecked()}
+              checkRow={checkRow}
+              isRowChecked={isRowChecked}
+            />
+
+            <Pagination />
+          </Dimmer.Dimmable>
+        </Segment>
+      </Segment>
+    </Segment>
+  );
+};
+
+export default ConceptLinksApprovals;

package/src/concepts/relations/components/ConceptLinksApprovalsLabelResults.js

@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export const ConceptLinksApprovalsLabelResults = ({
+  selectedCount,
+  approveView,
+}) => {
+  const { count, loading } = useSearchContext();
+  return (
+    <div className="concepts-links-bulk-label-results">
+      <Label>
+        {loading ? (
+          <FormattedMessage id="conceptRelations.searching" />
+        ) : (
+          <FormattedMessage
+            id="conceptRelations.retrieved.results"
+            values={{ count }}
+          />
+        )}
+      </Label>
+      {!loading && approveView ? (
+        <Label>
+          <FormattedMessage
+            id="conceptRelations.bulk.selected"
+            values={{
+              count: selectedCount,
+            }}
+          />
+        </Label>
+      ) : null}
+    </div>
+  );
+};
+
+ConceptLinksApprovalsLabelResults.propTypes = {
+  selectedCount: PropTypes.number,
+  approveView: PropTypes.bool,
+};
+
+export default ConceptLinksApprovalsLabelResults;

package/src/concepts/relations/components/ConceptLinksApprovalsRow.js

@@ -0,0 +1,43 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Checkbox, Table } from "semantic-ui-react";
+import { columnDecoratorComponent } from "@truedat/core/services";
+
+export const ConceptLinksApprovalsRow = ({
+  checked,
+  columns,
+  onCheckboxChange,
+  link,
+  approveView,
+}) => {
+  return _.isEmpty(columns) || _.isEmpty(link) ? null : (
+    <Table.Row>
+      {approveView ? (
+        <Table.Cell collapsing width="1" textAlign="center">
+          <Checkbox
+            id={link.id}
+            checked={checked}
+            onChange={onCheckboxChange}
+          />
+        </Table.Cell>
+      ) : null}
+      {columns.map((column, key) => (
+        <Table.Cell
+          key={key}
+          textAlign={column.textAlign}
+          content={columnDecoratorComponent(column)(link)}
+        />
+      ))}
+    </Table.Row>
+  );
+};
+
+ConceptLinksApprovalsRow.propTypes = {
+  approveView: PropTypes.bool,
+  checked: PropTypes.bool,
+  link: PropTypes.object,
+  columns: PropTypes.array,
+  onCheckboxChange: PropTypes.func,
+};
+
+export default ConceptLinksApprovalsRow;

package/src/concepts/relations/components/ConceptLinksApprovalsTable.js

@@ -0,0 +1,104 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { Checkbox, Table, Header, Icon } from "semantic-ui-react";
+import { getLinksSearchColumns } from "../selectors";
+import { ConceptLinksApprovalsRow } from "./ConceptLinksApprovalsRow";
+
+export const ConceptLinksApprovalsTable = ({
+  addAll,
+  checkedAll,
+  checkRow,
+  isRowChecked,
+  columns,
+  approveView,
+}) => {
+  const { formatMessage } = useIntl();
+  const {
+    searchData,
+    loading,
+    sortColumn,
+    sortDirection,
+    handleSortSelection,
+  } = useSearchContext();
+
+  const links = _.propOr([], "data")(searchData);
+
+  return (
+    <>
+      {!_.isEmpty(links) ? (
+        <Table sortable selectable>
+          <Table.Header>
+            <Table.Row>
+              {approveView ? (
+                <Table.HeaderCell textAlign="center">
+                  <Checkbox
+                    id="selectLink"
+                    onChange={addAll}
+                    checked={checkedAll}
+                  />
+                </Table.HeaderCell>
+              ) : null}
+              {columns.map((column, key) => (
+                <Table.HeaderCell
+                  key={key}
+                  width={column.width}
+                  content={formatMessage({
+                    id: `conceptRelations.approvals.header.${column.name}`,
+                    defaultMessage: column.name,
+                  })}
+                  sorted={
+                    _.path("sort.name")(column) === sortColumn
+                      ? sortDirection
+                      : null
+                  }
+                  className={_.path("sort.name")(column) ? "" : "disabled"}
+                  onClick={() =>
+                    handleSortSelection(_.path("sort.name")(column))
+                  }
+                />
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {links.map((link, key) => (
+              <ConceptLinksApprovalsRow
+                key={key}
+                checked={isRowChecked && isRowChecked(link)}
+                link={link}
+                columns={columns}
+                approveView={approveView}
+                onCheckboxChange={() => checkRow && checkRow(link)}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      ) : null}
+      {_.isEmpty(links) && !loading ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "conceptRelations.approvals.links.empty" })}
+          </Header.Content>
+        </Header>
+      ) : null}
+    </>
+  );
+};
+
+ConceptLinksApprovalsTable.propTypes = {
+  columns: PropTypes.array,
+  approveView: PropTypes.bool,
+  checkedAll: PropTypes.bool,
+  addAll: PropTypes.func,
+  checkRow: PropTypes.func,
+  isRowChecked: PropTypes.func,
+};
+
+const mapStateToProps = (state) => ({
+  columns: getLinksSearchColumns(state),
+});
+
+export default connect(mapStateToProps)(ConceptLinksApprovalsTable);