@truedat/bg 7.10.4 → 7.11.1

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);

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

@@ -0,0 +1,123 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import LinksApprovalResults from "../ConceptLinksApprovalResults";
+import { useLocation } from "react-router";
+
+jest.mock("react-router", () => {
+  const actual = jest.requireActual("react-router");
+  return {
+    ...actual,
+    useLocation: jest.fn(),
+  };
+});
+
+const mockFormatMessage = jest.fn(({ id }) => id);
+jest.mock("react-intl", () => ({
+  ...jest.requireActual("react-intl"),
+  useIntl: () => ({
+    formatMessage: mockFormatMessage,
+  }),
+}));
+
+describe("<LinksApprovalResults />", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders approval results with relations and errors", async () => {
+    useLocation.mockReturnValue({
+      state: {
+        status: "approved",
+        relations: [
+          {
+            id: 1,
+            source_id: 10,
+            source_name: "Source 1",
+            target_id: 20,
+            target_name: "Target 1",
+          },
+        ],
+        errors: {
+          permissions: {
+            message: "forbidden",
+            reason: "permissions",
+            relations: [
+              {
+                id: 2,
+                source_id: 11,
+                source_name: "Source 2",
+                target_id: 21,
+                target_name: "Target 2",
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    const rendered = render(<LinksApprovalResults />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders rejection results", async () => {
+    useLocation.mockReturnValue({
+      state: {
+        status: "rejected",
+        relations: [
+          {
+            id: 3,
+            source_id: 12,
+            source_name: "Source 3",
+            target_id: 22,
+            target_name: "Target 3",
+          },
+        ],
+        errors: {},
+      },
+    });
+
+    const rendered = render(<LinksApprovalResults />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders with no errors", async () => {
+    useLocation.mockReturnValue({
+      state: {
+        status: "approved",
+        relations: [
+          {
+            id: 4,
+            source_id: 13,
+            source_name: "Source 4",
+            target_id: 23,
+            target_name: "Target 4",
+          },
+        ],
+        errors: {},
+      },
+    });
+
+    const rendered = render(<LinksApprovalResults />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders with empty relations and errors", async () => {
+    useLocation.mockReturnValue({
+      state: {
+        status: "approved",
+        relations: [],
+        errors: {},
+      },
+    });
+
+    const rendered = render(<LinksApprovalResults />);
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,77 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { ConceptLinksApprovals } from "../ConceptLinksApprovals";
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+describe("<ConceptLinksApprovals />", () => {
+  it("matches the latest snapshot", async () => {
+    useSearchContext.mockReturnValue({
+      searchData: {
+        data: [
+          {
+            domain_ids: [2],
+            id: 1,
+            origin: null,
+            source_domain_ids: [2],
+            source_id: 11,
+            source_name: "Busines 11",
+            source_type: "business_concept",
+            status: "pending",
+            target_domain_ids: [2],
+            target_id: 21,
+            target_name: "Structure 21",
+            target_type: "data_structure",
+            updated_at: "2025-08-11T07:07:13.336631Z",
+          },
+          {
+            domain_ids: [2, 1],
+            id: 2,
+            origin: null,
+            source_domain_ids: [2],
+            source_id: 21,
+            source_name: "Busines 21",
+            source_type: "business_concept",
+            status: "pending",
+            target_domain_ids: [1],
+            target_id: 22,
+            target_name: "Structure 22",
+            target_type: "data_structure",
+            updated_at: "2025-08-11T07:07:13.336631Z",
+          },
+        ],
+        scroll_id: null,
+      },
+      searchMust: { status: ["pending"] },
+      setOnSearchChange: jest.fn(),
+    });
+    const rendered = render(<ConceptLinksApprovals />);
+
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for empty results", async () => {
+    useSearchContext.mockReturnValue({
+      searchData: [],
+      searchMust: { status: ["pending"] },
+      setOnSearchChange: jest.fn(),
+    });
+    const rendered = render(<ConceptLinksApprovals />);
+
+    await waitForLoad(rendered);
+
+    expect(rendered.container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { ConceptLinksApprovalsLabelResults } from "../ConceptLinksApprovalsLabelResults";
+
+jest.mock("@truedat/core/search/SearchContext", () => {
+  const originalModule = jest.requireActual(
+    "@truedat/core/search/SearchContext"
+  );
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useSearchContext: jest.fn(),
+  };
+});
+
+describe("ConceptLinksApprovalsLabelResults", () => {
+  it("matches the latest snapshot", async () => {
+    useSearchContext.mockReturnValue({
+      count: 1,
+      loading: false,
+    });
+
+    const props = {
+      selectedCount: 1,
+      approveView: true,
+    };
+    const rendered = render(<ConceptLinksApprovalsLabelResults {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("should not render results count when is loading", async () => {
+    useSearchContext.mockReturnValue({
+      count: 1,
+      loading: true,
+    });
+    const props = {
+      selectedCount: 1,
+      approveView: true,
+    };
+    const rendered = render(<ConceptLinksApprovalsLabelResults {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});