@truedat/lm 8.7.4 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/lm",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "description": "Truedat Link Manager",
   "sideEffects": [
     "**/*.css",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.7.4",
+    "@truedat/test": "8.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "74bf59ddf29e05b518dc206271c4f1215d66a942"
+  "gitHead": "006b9cd6486cd37976d4dc06ede1a48e37175f30"
 }

package/src/components/ConfirmDeleteRelation.js

@@ -10,8 +10,20 @@ export const ConfirmDeleteRelation = ({ id, deleteRelation, resourceType }) => (
     icon="trash"
     color="red"
     trigger={
-      <Button basic color="red" icon size="mini">
-        <Icon name="trash alternate outline" color="red" />
+      <Button
+        basic
+        className="relation-actions__delete-button"
+        color="red"
+        compact
+        icon
+        size="mini"
+      >
+        <Icon
+          className="relation-actions__delete-icon"
+          name="trash alternate outline"
+          color="red"
+          size="small"
+        />
       </Button>
     }
     header={

package/src/components/LinksPane.js

@@ -1,95 +1,107 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { useEffect, useState } from "react";
-import { Table, Header, Grid } from "semantic-ui-react";
+import { useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { columnDecorator, columnPredicate } from "@truedat/core/services";
-import { useDataStructureSearch } from "@truedat/dd/hooks/useStructures";
-
-const Row = ({ columns, link }) => (
-  <Table.Row>
-    {columns.map((column, i) => (
-      <Table.Cell
-        key={i}
-        className={_.prop("className")(column)}
-        textAlign={column.textAlign}
-        content={columnDecorator(column)(link)}
-      />
-    ))}
-  </Table.Row>
-);
-
-Row.propTypes = {
-  columns: PropTypes.array,
-  link: PropTypes.object,
+import { Grid, Header, Table } from "semantic-ui-react";
+import { useStructureNotes } from "../hooks/useStructureNotes";
+import { useFilteredLinks } from "../hooks/useFilteredLinks";
+import { useSortedLinks } from "../hooks/useSortedLinks";
+import {
+  isSortableColumn,
+  mergeClassNames,
+  columnClassName,
+  columnWidthStyle,
+  tableWidthStyle,
+  filterColumns,
+} from "../utils/linksPaneHelpers";
+import { LinksPaneTypeFilter } from "./LinksPaneTypeFilter";
+import { LinksPaneRow } from "./LinksPaneRow";
+
+const onSort = (column, setSort, sort) => {
+  if (!isSortableColumn(column)) return;
+
+  const name = _.prop("name")(column);
+  setSort((currentSort) =>
+    currentSort.column === name
+      ? {
+          column: name,
+          direction:
+            currentSort.direction === "ascending" ? "descending" : "ascending",
+        }
+      : { column: name, direction: "ascending" },
+  );
 };
 
 export const Links = ({ tag, sourceType, targetType, columns, links }) => {
-  const [enrichedLinks, setEnrichedLinks] = useState(links);
-  const { trigger } = useDataStructureSearch();
-
-  useEffect(() => {
-    const fetchStructureNotes = async () => {
-      const structureIds = _.flow(
-        _.filter(_.propEq("resource_type", "data_structure")),
-        _.map(({ resource_id }) => parseInt(resource_id)),
-        _.uniq,
-      )(links);
-
-      if (_.isEmpty(structureIds)) {
-        setEnrichedLinks(links);
-        return;
-      }
-
-      try {
-        const response = await trigger({
-          must: { ids: structureIds },
-          page: 0,
-          size: structureIds.length,
-        });
-
-        const structuresMap = _.flow(
-          _.getOr([], "data.data"),
-          _.keyBy("id"),
-        )(response);
-
-        const enriched = _.map((link) => {
-          if (link.resource_type === "data_structure") {
-            const structure = structuresMap[link.resource_id];
-            return {
-              ...link,
-              note: structure?.note || null,
-            };
-          }
-          return link;
-        })(links);
+  const enrichedLinks = useStructureNotes(links);
+  const [selectedTypes, setSelectedTypes] = useState([]);
+  const [selectedRelationTypes, setSelectedRelationTypes] = useState([]);
+  const [sort, setSort] = useState({ column: null, direction: "ascending" });
+
+  const filteredColumns = useMemo(
+    () => filterColumns(columns, enrichedLinks, tag),
+    [columns, enrichedLinks, tag],
+  );
 
-        setEnrichedLinks(enriched);
-      } catch (error) {
-        setEnrichedLinks(links);
-      }
-    };
+  const { filteredLinks, typeOptions, relationTypeOptions } = useFilteredLinks({
+    enrichedLinks,
+    selectedTypes,
+    selectedRelationTypes,
+  });
 
-    fetchStructureNotes();
-  }, [links, trigger]);
+  const linksData = useSortedLinks(filteredLinks, filteredColumns, sort);
 
-  const linksData = _.orderBy(["business_concept_id", "name"])(["desc", "asc"])(
-    enrichedLinks,
-  );
+  const handleSort = (column) => onSort(column, setSort, sort);
 
-  const filteredColumns = filterColumns(columns, enrichedLinks);
+  const headerRow = filteredColumns.map(({ name }, key) => {
+    const column = filteredColumns[key];
+    const sortable = isSortableColumn(column);
 
-  const headerRow = filteredColumns.map(({ name }, key) => (
-    <Table.HeaderCell
-      key={key}
-      content={
-        <FormattedMessage id={`${targetType}.${name}`} defaultMessage={name} />
-      }
-    />
-  ));
+    return (
+      <Table.HeaderCell
+        className={mergeClassNames(
+          sortable ? undefined : "disabled",
+          columnClassName(column, true),
+        )}
+        key={key}
+        onClick={sortable ? () => handleSort(column) : undefined}
+        sorted={sortable && sort.column === name ? sort.direction : null}
+        style={columnWidthStyle(column)}
+        content={
+          <span className="links-pane__filter-label">
+            <span className="links-pane__filter-label-text">
+              <FormattedMessage
+                id={`${targetType}.${name}`}
+                defaultMessage={name}
+              />
+            </span>
+            {name === "type" && (
+              <LinksPaneTypeFilter
+                onChange={setSelectedTypes}
+                options={typeOptions}
+                selectedTypes={selectedTypes}
+              />
+            )}
+            {name === "relation.relation_type_name" && (
+              <LinksPaneTypeFilter
+                onChange={setSelectedRelationTypes}
+                messageId={(option) =>
+                  option === ""
+                    ? "filter.empty"
+                    : `conceptRelations.relationType.${option}`
+                }
+                options={relationTypeOptions}
+                selectedTypes={selectedRelationTypes}
+              />
+            )}
+          </span>
+        }
+      />
+    );
+  });
 
   const renderBodyRow = (link, i) => (
-    <Row key={i} columns={filteredColumns} link={link} />
+    <LinksPaneRow key={i} columns={filteredColumns} link={link} />
   );
 
   return (
@@ -97,17 +109,36 @@ export const Links = ({ tag, sourceType, targetType, columns, links }) => {
       <Header as="h3">
         {tag === "disabled" || tag === "deleted" ? (
           <FormattedMessage id={`${sourceType}DisabledRelation.table.title`} />
-        ) : tag === "\uffee" ? (
+        ) : tag === "￮" ? (
           <FormattedMessage id={`${sourceType}Relation.table.title`} />
         ) : (
           <FormattedMessage id={`${sourceType}Relation.master.table.title`} />
         )}
       </Header>
-      <Table
-        headerRow={headerRow}
-        renderBodyRow={renderBodyRow}
-        tableData={linksData}
-      />
+      <div className="links-pane__table-scroll">
+        <Table
+          celled
+          className="links-pane__table"
+          compact
+          sortable
+          style={tableWidthStyle(filteredColumns)}
+          unstackable
+        >
+          <colgroup>
+            {filteredColumns.map((column) => (
+              <col
+                className="links-pane__column"
+                key={_.prop("name")(column)}
+                style={columnWidthStyle(column)}
+              />
+            ))}
+          </colgroup>
+          <Table.Header>
+            <Table.Row>{headerRow}</Table.Row>
+          </Table.Header>
+          <Table.Body>{linksData.map(renderBodyRow)}</Table.Body>
+        </Table>
+      </div>
     </>
   );
 };
@@ -120,9 +151,6 @@ Links.propTypes = {
   links: PropTypes.array,
 };
 
-const filterColumns = (columns, links) =>
-  _.filter((c) => _.any(columnPredicate(c))(links))(columns);
-
 export const LinksPane = ({ groups, sourceType, targetType, linksActions }) => (
   <Grid>
     <Grid.Row>

package/src/components/LinksPaneDataCell.js

@@ -0,0 +1,72 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Popup, Table } from "semantic-ui-react";
+import { useTruncatedPopup } from "../hooks/useTruncatedPopup";
+import {
+  getColumnValue,
+  normalizeValue,
+  mergeClassNames,
+  columnClassName,
+  columnWidthStyle,
+  POPUP_EXCLUDED_COLUMNS,
+  NOTE_COLUMN,
+  cellContent,
+} from "../utils/linksPaneHelpers";
+
+export const LinksPaneDataCell = ({ column, link }) => {
+  const {
+    cellRef,
+    popupOpen,
+    popupContent,
+    handleMouseEnter,
+    handleMouseLeave,
+    setPopupOpen,
+  } = useTruncatedPopup();
+  const rawValue = getColumnValue(column, link);
+  const normalizedValue = normalizeValue(rawValue);
+  const popupEnabled =
+    !_.includes(_.prop("name")(column))(POPUP_EXCLUDED_COLUMNS) &&
+    !_.isEmpty(normalizedValue);
+
+  const renderCell = (props = {}) => (
+    <Table.Cell
+      {...props}
+      className={mergeClassNames(
+        _.prop("className")(column),
+        columnClassName(column),
+      )}
+      textAlign={column.textAlign}
+      style={columnWidthStyle(column)}
+      content={cellContent(column, link, rawValue)}
+    />
+  );
+
+  if (!popupEnabled) return renderCell();
+
+  return (
+    <>
+      {renderCell({
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ref: cellRef,
+      })}
+      <Popup
+        className="links-pane__truncated-popup"
+        closeOnDocumentClick={false}
+        content={popupContent}
+        context={cellRef}
+        onClose={() => setPopupOpen(false)}
+        open={popupOpen}
+        position="top center"
+        positionFixed
+      />
+    </>
+  );
+};
+
+LinksPaneDataCell.propTypes = {
+  column: PropTypes.object,
+  link: PropTypes.object,
+};
+
+export default LinksPaneDataCell;

package/src/components/LinksPaneRow.js

@@ -0,0 +1,18 @@
+import PropTypes from "prop-types";
+import { Table } from "semantic-ui-react";
+import { LinksPaneDataCell } from "./LinksPaneDataCell";
+
+export const LinksPaneRow = ({ columns, link }) => (
+  <Table.Row>
+    {columns.map((column, i) => (
+      <LinksPaneDataCell key={i} column={column} link={link} />
+    ))}
+  </Table.Row>
+);
+
+LinksPaneRow.propTypes = {
+  columns: PropTypes.array,
+  link: PropTypes.object,
+};
+
+export default LinksPaneRow;

package/src/components/LinksPaneTypeFilter.js

@@ -0,0 +1,82 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { Checkbox, Icon, Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+
+export const LinksPaneTypeFilter = ({
+  onChange,
+  options,
+  selectedTypes,
+  messageId = (option) => `structure.type.${option}.text`,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (_.isEmpty(options)) return null;
+
+  const activeSelectedTypes = _.filter((type) => options.includes(type))(
+    selectedTypes,
+  );
+  const selected = new Set(activeSelectedTypes);
+  const allSelected = _.isEmpty(activeSelectedTypes);
+
+  const toggleType = (option) => {
+    const current = allSelected ? new Set(options) : new Set(selected);
+    current.has(option) ? current.delete(option) : current.add(option);
+    onChange(current.size === options.length ? [] : Array.from(current));
+  };
+
+  const handleOptionClick = (event, option) => {
+    event.stopPropagation();
+    toggleType(option);
+  };
+
+  return (
+    <span onClick={(event) => event.stopPropagation()}>
+      <Popup
+        basic
+        flowing
+        hoverable
+        on="click"
+        position="bottom left"
+        positionFixed
+        className="links-pane__filter-menu"
+        trigger={
+          <Icon
+            className="links-pane__filter-icon"
+            color={allSelected ? undefined : "blue"}
+            name="filter"
+          />
+        }
+      >
+        <div onClick={(event) => event.stopPropagation()}>
+          {options.map((option) => (
+            <div
+              key={option}
+              onClick={(event) => handleOptionClick(event, option)}
+              className="links-pane__filter-menu-item"
+            >
+              <Checkbox
+                checked={allSelected || selected.has(option)}
+                label={formatMessage({
+                  id: messageId(option),
+                  defaultMessage: option === "" ? "(Empty)" : option,
+                })}
+                onChange={(event) => handleOptionClick(event, option)}
+                onClick={(event) => event.stopPropagation()}
+              />
+            </div>
+          ))}
+        </div>
+      </Popup>
+    </span>
+  );
+};
+
+LinksPaneTypeFilter.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  messageId: PropTypes.func,
+  options: PropTypes.array,
+  selectedTypes: PropTypes.array,
+};
+
+export default LinksPaneTypeFilter;

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

@@ -21,6 +21,15 @@ describe("<ConfirmDeleteRelation />", () => {
       <ConfirmDeleteRelation {...props} />,
       renderOpts,
     );
+
+    expect(container.querySelector("button")).toHaveClass(
+      "relation-actions__delete-button",
+    );
+    expect(container.querySelector("button")).not.toHaveAttribute("style");
+    expect(container.querySelector("i")).toHaveClass(
+      "relation-actions__delete-icon",
+    );
+    expect(container.querySelector("i")).not.toHaveAttribute("style");
     expect(container).toMatchSnapshot();
   });
 });