@truedat/dd 7.1.4 → 7.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.1.4",
+  "version": "7.1.6",
   "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": "7.1.4",
+    "@truedat/test": "7.1.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "7.1.4",
-    "@truedat/core": "7.1.4",
-    "@truedat/df": "7.1.4",
+    "@truedat/auth": "7.1.6",
+    "@truedat/core": "7.1.6",
+    "@truedat/df": "7.1.6",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "4b951559f6e84f85ed054bf9afe8699dc57f7b8f"
+  "gitHead": "0d15ef9da4d597618a5e3543ad2173e3d76f258b"
 }

package/src/api/queries.js

@@ -535,3 +535,62 @@ export const CATALOG_VIEW_CONFIG_QUERY = gql`
     }
   }
 `;
+
+export const DATA_FIELDS_QUERY = gql`
+  query DataFields(
+    $dataStructureId: ID!
+    $version: String!
+    $note_fields: [String]
+    $first: Int
+    $last: Int
+    $search: String
+    $before: Cursor
+    $after: Cursor
+    $filters: DataFieldsFilter
+  ) {
+    dataFields(
+      dataStructureId: $dataStructureId
+      version: $version
+      first: $first
+      last: $last
+      before: $before
+      after: $after
+      search: $search
+      filters: $filters
+    ) {
+      page {
+        alias
+        classes
+        data_structure_id
+        deleted_at
+        description
+        degree {
+          in
+          out
+        }
+        links
+        id
+        metadata
+        name
+        type
+        profile {
+          max
+          min
+          most_frequent
+          null_count
+          patterns
+          total_count
+          unique_count
+        }
+        has_note
+        note(select_fields: $note_fields)
+      }
+      pageInfo {
+        startCursor
+        endCursor
+        hasNextPage
+        hasPreviousPage
+      }
+    }
+  }
+`;

package/src/components/CursorPagination.js

@@ -0,0 +1,73 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import queryString from "query-string";
+import { useLocation, Link } from "react-router-dom";
+import { Menu } from "semantic-ui-react";
+
+/* 
+    This component is duplicated from packages/core/src/components/CursorPagination.js
+    to accommodate poorly implemented pagination logic on the back end.
+    We have created a task to improve the pagination system and streamline GraphQL query handling in the future.
+*/
+const CursorPagination = ({ pageInfo, className }) => {
+  const { search, ...location } = useLocation();
+  const { q } = queryString.parse(search);
+  const { endCursor, startCursor, hasPreviousPage, hasNextPage } =
+    pageInfo || {};
+
+  const next =
+    hasNextPage && endCursor
+      ? {
+          ...location,
+          search: "?" + queryString.stringify({ after: endCursor, q }),
+        }
+      : null;
+  const prev =
+    hasPreviousPage && startCursor
+      ? {
+          ...location,
+          search: "?" + queryString.stringify({ before: startCursor, q }),
+        }
+      : null;
+  const first = { ...location, search: "?" + queryString.stringify({ q }) };
+
+  return (
+    <Menu className={className} pagination role="navigation">
+      <Menu.Item
+        as={first ? Link : null}
+        link={!!first}
+        content="«"
+        disabled={!hasPreviousPage}
+        to={first}
+        replace={first ? true : null}
+        aria-label="First"
+      />
+      <Menu.Item
+        as={prev ? Link : null}
+        link={!!prev}
+        content="⟨"
+        disabled={!hasPreviousPage}
+        to={prev}
+        replace={prev ? true : null}
+        aria-label="Later"
+      />
+      <Menu.Item
+        as={next ? Link : null}
+        link={!!next}
+        content="⟩"
+        disabled={!hasNextPage}
+        to={next}
+        replace={next ? true : null}
+        aria-label="Earlier"
+      />
+    </Menu>
+  );
+};
+
+CursorPagination.propTypes = {
+  className: PropTypes.string,
+  pageInfo: PropTypes.object,
+};
+
+export default CursorPagination;

package/src/components/StructureFieldRow.js

@@ -1,10 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Table } from "semantic-ui-react";
+import { Checkbox, Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 
-export const StructureFieldRow = ({ field, columns }) => (
+export const StructureFieldRow = ({
+  field,
+  columns,
+  profilingMode,
+  onCheckedRow,
+  checked,
+}) => (
   <Table.Row key={field.data_structure_id} warning={!!field.deleted_at}>
+    {profilingMode && (
+      <Table.HeaderCell textAlign="center" width={1}>
+        <Checkbox
+          onChange={() => onCheckedRow(field.data_structure_id)}
+          checked={checked}
+        />
+      </Table.HeaderCell>
+    )}
     {columns
       ? columns.map((column, key) => (
           <Table.Cell
@@ -20,6 +34,9 @@ export const StructureFieldRow = ({ field, columns }) => (
 StructureFieldRow.propTypes = {
   field: PropTypes.object.isRequired,
   columns: PropTypes.array,
+  profilingMode: PropTypes.bool,
+  checked: PropTypes.bool,
+  onCheckedRow: PropTypes.func,
 };
 
 export default StructureFieldRow;

package/src/components/StructureFields.js

@@ -1,12 +1,28 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Table } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import queryString from "query-string";
+import { useLocation, useParams, useHistory } from "react-router-dom";
+import { useQuery } from "@apollo/client";
+import {
+  Button,
+  Checkbox,
+  Grid,
+  Icon,
+  Input,
+  Label,
+  Message,
+  Table,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
 import { columnPredicate } from "@truedat/core/services";
-import { getSortedFields, getStructureFieldColumns } from "../selectors";
+import { Loading } from "@truedat/core/components";
+import { connect, useSelector } from "react-redux";
+import { DATA_FIELDS_QUERY } from "../api/queries";
+import { getStructureFieldColumns } from "../selectors";
+import { createProfileGroup } from "../routines";
 import StructureFieldRow from "./StructureFieldRow";
+import CursorPagination from "./CursorPagination";
 
 const columnPred = (c) =>
   c?.name === "degree" ? _.prop("degree") : columnPredicate(c);
@@ -14,10 +30,71 @@ const columnPred = (c) =>
 const getColumns = (columns, fields) =>
   _.filter((c) => _.any(columnPred(c))(fields))(columns);
 
-export const StructureFields = ({ columns, fields, ...rest }) => (
+const PAGE_SIZE = 50;
+
+const ProfileActions = ({
+  emptyFields,
+  handleSubmit,
+  onProfileCheck,
+  profilingMode,
+}) => {
+  return (
+    <Grid.Column
+      textAlign="right"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+      }}
+    >
+      <Checkbox
+        disabled={emptyFields}
+        checked={profilingMode}
+        className="bgOrange"
+        toggle
+        onChange={() => onProfileCheck(!profilingMode)}
+      />
+      <Button
+        style={{ marginLeft: "10px" }}
+        icon
+        labelPosition="left"
+        disabled={!profilingMode || emptyFields}
+        onClick={handleSubmit}
+      >
+        <Icon name="tachometer alternate" />
+        <FormattedMessage id="structure.execute_profile" />
+      </Button>
+    </Grid.Column>
+  );
+};
+
+ProfileActions.propTypes = {
+  emptyFields: PropTypes.bool,
+  handleSubmit: PropTypes.func,
+  onProfileCheck: PropTypes.func,
+  profilingMode: PropTypes.bool,
+};
+
+const StructureFieldsTable = ({
+  allCheckedInPage,
+  profilingMode,
+  columns,
+  fields,
+  onCheckedRow,
+  onPageCheck,
+  checkedFields,
+}) => (
   <Table>
     <Table.Header>
       <Table.Row>
+        {profilingMode && (
+          <Table.HeaderCell textAlign="center" width={1}>
+            <Checkbox
+              checked={allCheckedInPage}
+              onChange={() => onPageCheck()}
+            />
+          </Table.HeaderCell>
+        )}
         {columns.map((column, i) => (
           <Table.HeaderCell
             key={i}
@@ -29,26 +106,200 @@ export const StructureFields = ({ columns, fields, ...rest }) => (
     </Table.Header>
     <Table.Body>
       {fields.map((f, i) => (
-        <StructureFieldRow key={i} columns={columns} field={f} {...rest} />
+        <StructureFieldRow
+          key={i}
+          columns={columns}
+          field={f}
+          profilingMode={profilingMode}
+          onCheckedRow={onCheckedRow}
+          checked={_.contains(f?.data_structure_id)(checkedFields)}
+        />
       ))}
     </Table.Body>
   </Table>
 );
 
+StructureFieldsTable.propTypes = {
+  allCheckedInPage: PropTypes.bool,
+  profilingMode: PropTypes.bool,
+  fields: PropTypes.arrayOf(PropTypes.object),
+  columns: PropTypes.arrayOf(PropTypes.object),
+  onCheckedRow: PropTypes.func,
+  onPageCheck: PropTypes.func,
+  checkedFields: PropTypes.arrayOf(PropTypes.object),
+};
+
+export const StructureFields = ({
+  createProfileGroup,
+  canExecuteProfiling,
+}) => {
+  const { id: dataStructureId, version: version } = useParams();
+  const { search, pathname } = useLocation();
+  const { before, after, q } = queryString.parse(search);
+  const history = useHistory();
+  const { formatMessage } = useIntl();
+  const [profilingMode, setProfilingMode] = useState(false);
+  const [checkedFields, setCheckedFields] = useState([]);
+  const [searchQuery, setSearchQuery] = useState(q || "");
+
+  const structureVariables = _.isNil(version)
+    ? { dataStructureId, version: "latest" }
+    : { dataStructureId, version };
+  const searchVariables = before
+    ? { after, before, last: PAGE_SIZE, search: q }
+    : { after, before, first: PAGE_SIZE, search: q };
+  const variables = { ...structureVariables, ...searchVariables };
+  const { data, loading } = useQuery(DATA_FIELDS_QUERY, { variables });
+  const fields = data?.dataFields?.page || [];
+  const pageInfo = data?.dataFields?.pageInfo || {};
+  const pageStructureIds = _.map("data_structure_id")(fields);
+  const emptyFields = _.isEmpty(fields);
+
+  const columns = useSelector((state) =>
+    getColumns(getStructureFieldColumns(state), fields)
+  );
+
+  const allCheckedInPage = _.every((structureId) =>
+    _.contains(structureId)(checkedFields)
+  )(pageStructureIds);
+
+  const debounceSearch = useCallback(
+    _.debounce(300)((value) => {
+      history.replace({
+        pathname: pathname,
+        search: queryString.stringify({ q: value }),
+      });
+    }),
+    []
+  );
+
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setCheckedFields([]);
+    setSearchQuery(value);
+    debounceSearch(value);
+  };
+
+  const handleCheckedRow = (id) => {
+    const updatedSelection = _.includes(id)(checkedFields)
+      ? _.without([id])(checkedFields)
+      : [id, ...checkedFields];
+    setCheckedFields(updatedSelection);
+  };
+
+  const handleCheckedPage = () => {
+    const updatedSelection = allCheckedInPage
+      ? _.without(pageStructureIds)(checkedFields)
+      : _.union(checkedFields)(pageStructureIds);
+    setCheckedFields(updatedSelection);
+  };
+
+  const handleCheckedProfileExecution = (checked) => {
+    !checked && !_.isEmpty(checkedFields) && setCheckedFields([]);
+    setProfilingMode(checked);
+  };
+
+  const handleSubmit = (e) => {
+    _.isEmpty(checkedFields)
+      ? createProfileGroup({ parent_structure_id: dataStructureId })
+      : createProfileGroup({ data_structure_ids: checkedFields });
+  };
+
+  return (
+    <>
+      {loading ? <Loading /> : null}
+      <>
+        <>
+          <Grid>
+            <Grid.Row columns={2}>
+              <Grid.Column>
+                <Input
+                  icon={{ name: "search", link: true }}
+                  iconPosition="left"
+                  loading={loading}
+                  placeholder={formatMessage({
+                    id: "structure.search.placeholder",
+                  })}
+                  onChange={handleInputChange}
+                  value={searchQuery}
+                />
+              </Grid.Column>
+              {canExecuteProfiling ? (
+                <ProfileActions
+                  emptyFields={emptyFields}
+                  profilingMode={profilingMode}
+                  onProfileCheck={handleCheckedProfileExecution}
+                  handleSubmit={handleSubmit}
+                />
+              ) : null}
+            </Grid.Row>
+            <Grid.Row
+              style={{
+                minHeight: "40px",
+                paddingTop: "2px",
+                paddingBottom: "2px",
+              }}
+            >
+              <Grid.Column textAlign="right">
+                {!loading &&
+                  profilingMode &&
+                  !emptyFields &&
+                  _.isEmpty(checkedFields) && (
+                    <Label>
+                      <FormattedMessage id="structure.profile.tab.execute_all" />
+                    </Label>
+                  )}
+                {!loading && profilingMode && !_.isEmpty(checkedFields) && (
+                  <Label>
+                    <FormattedMessage
+                      id="structure.profile.tab.execute"
+                      values={{ count: checkedFields.length }}
+                    />
+                  </Label>
+                )}
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </>
+        {!_.isEmpty(fields) && !loading && (
+          <>
+            <StructureFieldsTable
+              allCheckedInPage={allCheckedInPage}
+              onPageCheck={handleCheckedPage}
+              profilingMode={profilingMode}
+              fields={fields}
+              columns={columns}
+              onCheckedRow={handleCheckedRow}
+              checkedFields={checkedFields}
+            />
+            <CursorPagination pageInfo={pageInfo} />
+          </>
+        )}
+        {_.isEmpty(fields) && !loading && (
+          <Message icon info>
+            <Icon name="search" />
+            <Message.Content>
+              <Message.Header>
+                <FormattedMessage id={`structures.not_found.header`} />
+              </Message.Header>
+              <FormattedMessage id="structures.not_found.body" />
+            </Message.Content>
+          </Message>
+        )}
+      </>
+    </>
+  );
+};
+
 StructureFields.propTypes = {
-  columns: PropTypes.array,
-  fields: PropTypes.array,
-  version: PropTypes.string,
+  canExecuteProfiling: PropTypes.bool,
+  createProfileGroup: PropTypes.func,
 };
 
-const mapStateToProps = (state, ownProps) => ({
-  structureId: _.path("structure.id")(state),
-  version: state.structureVersion,
-  fields: getSortedFields(state),
-  columns: getColumns(
-    _.propOr(getStructureFieldColumns(state), "columns")(ownProps),
-    state.structureFields
-  ),
+const mapStateToProps = ({ userPermissions }) => ({
+  canExecuteProfiling: _.propOr(false, "profile_permission")(userPermissions),
 });
 
-export default connect(mapStateToProps)(StructureFields);
+const mapDispatchToProps = { createProfileGroup };
+
+export default connect(mapStateToProps, mapDispatchToProps)(StructureFields);

package/src/components/StructureGrantListButton.js

@@ -74,9 +74,9 @@ const mapStateToProps = (
   structure: {
     ...structure,
     id: structure.id + "",
-    hasDataFields: _.negate(_.isEmpty)(structure.data_fields),
+    hasDataFields: _.negate(_.isEmpty)(structure?.data_fields),
     structureFields: _.flow(
-      _.prop("data_fields"),
+      _.get("data_fields"),
       _.map((dataField) => ({ ...dataField, data_structure_id: dataField.id }))
     )(structure),
   },

package/src/components/StructureSummary.js

@@ -12,7 +12,6 @@ import StructureConfidentialButton from "./StructureConfidentialButton";
 import StructureDeleteButton from "./StructureDeleteButton";
 import StructureGrantSummaryButton from "./StructureGrantSummaryButton";
 import StructureProfileButton from "./StructureProfileButton";
-import StructuresProfileButton from "./StructuresProfileButton";
 import StructureTags from "./StructureTags";
 
 const Date = ({ className, icon, label, date }) => {
@@ -100,10 +99,6 @@ export const StructureSummary = ({
             structureClass === "field" ? (
               <StructureProfileButton />
             ) : null}
-            {userPermissions.profile_permission &&
-            structureClass !== "field" ? (
-              <StructuresProfileButton />
-            ) : null}
             {userPermissions.confidential ? (
               <StructureConfidentialButton />
             ) : null}

package/src/components/StructureTabPane.js

@@ -9,7 +9,10 @@ import {
   STRUCTURE_NOTES_EDIT,
 } from "@truedat/core/routes";
 import { getActiveTab } from "../selectors/getActiveTab";
-import { getTabVisibility } from "../selectors/getTabVisibility";
+import {
+  getTabVisibility,
+  getLinkedImplementationsToStructuresColumns,
+} from "../selectors";
 import StructureChildrenRelations from "./StructureChildrenRelations";
 import StructureEvents from "./StructureEvents";
 import StructureGrants from "./StructureGrants";
@@ -40,7 +43,7 @@ const RuleImplementationsTable = React.lazy(() =>
   import("@truedat/dq/components/RuleImplementationsTable")
 );
 
-export const StructureTabPane = ({ activeTab, tabVisibility }) => {
+export const StructureTabPane = ({ activeTab, tabVisibility, columns }) => {
   return (
     <ErrorBoundary>
       {activeTab === "fields" && <StructureFields />}
@@ -82,7 +85,7 @@ export const StructureTabPane = ({ activeTab, tabVisibility }) => {
       {activeTab === "events" && <StructureEvents />}
       {activeTab === "roles" && <StructureRoles />}
       {activeTab === "rules" && tabVisibility.rules && (
-        <RuleImplementationsTable withoutColumns={["status"]} />
+        <RuleImplementationsTable columns={columns} />
       )}
       {activeTab === "metadata" && tabVisibility.metadata && (
         <StructureMetadata />
@@ -96,6 +99,7 @@ export const StructureTabPane = ({ activeTab, tabVisibility }) => {
 StructureTabPane.propTypes = {
   activeTab: PropTypes.string,
   tabVisibility: PropTypes.object,
+  columns: PropTypes.array,
 };
 
 const mapStateToProps = (
@@ -107,6 +111,7 @@ const mapStateToProps = (
   return {
     tabVisibility,
     activeTab,
+    columns: getLinkedImplementationsToStructuresColumns(state),
   };
 };
 

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

@@ -1,41 +1,87 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import { useQuery } from "@apollo/client";
 import StructureFields from "../StructureFields";
 
-const state = {
-  structureFields: [
-    {
-      id: 123,
-      data_structure_id: 1,
-      name: "field1",
-      description: "desc1",
-      links: [{ resource_id: 123 }],
-      metadata: {
-        nullable: true,
-        precision: "22",
-        type: "varchar",
-      },
+jest.mock("@apollo/client", () => ({
+  ...jest.requireActual("@apollo/client"),
+  useQuery: jest.fn(),
+}));
+
+const page = [
+  {
+    id: 123,
+    data_structure_id: 1,
+    name: "foo",
+    description: "desc1",
+    links: [{ resource_id: 123 }],
+    metadata: {
+      nullable: true,
+      precision: "22",
+      type: "varchar",
     },
-    {
-      id: 122,
-      data_structure_id: 2,
-      name: "field2",
-      description: "desc2",
-      external_id: "foo",
-      metadata: {
-        nullable: true,
-        precision: "22",
-        type: "varchar",
+  },
+  {
+    id: 122,
+    data_structure_id: 2,
+    name: "bar",
+    description: "desc2",
+    external_id: "foo",
+    metadata: {
+      nullable: true,
+      precision: "22",
+      type: "varchar",
+    },
+  },
+];
+
+const mockData = {
+  data: {
+    dataFields: {
+      page,
+      pageInfo: {
+        hasNextPage: true,
+        hasPreviousPage: false,
       },
     },
-  ],
+  },
+  loading: false,
+  error: null,
 };
 
-const renderOpts = { state };
+const renderProps = {
+  messages: {
+    en: {
+      "structure.field.metadata.nullable.true": "Yes",
+      "structure.field.links": "Concepts",
+      "structure.field.description": "Description",
+      "structure.field.metadata.nullable": "Nullable",
+      "structure.field.metadata.precision": "Precision",
+      "structure.field.metadata.type": "Type",
+      "structure.field.name": "Field",
+      "structure.execute_profile": "Execute profile",
+      "structure.search.placeholder": "Enter a search...",
+    },
+  },
+  state: {
+    userPermissions: { profile_permission: true },
+  },
+};
 
 describe("<StructureFields />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<StructureFields />, renderOpts);
+    useQuery.mockImplementation(() => mockData);
+    const { container } = render(<StructureFields />, renderProps);
     expect(container).toMatchSnapshot();
   });
+
+  it("no render profile button if dont have permissions", () => {
+    useQuery.mockImplementation(() => mockData);
+    const newRenderProps = {
+      ...renderProps,
+      state: {},
+    };
+    const { queryByText } = render(<StructureFields />, newRenderProps);
+    expect(queryByText("Execute profile")).not.toBeInTheDocument();
+  });
 });

package/src/components/__tests__/__snapshots__/StructureFields.spec.js.snap

@@ -2,6 +2,68 @@
 
 exports[`<StructureFields /> matches the latest snapshot 1`] = `
 <div>
+  <div
+    class="ui grid"
+  >
+    <div
+      class="two column row"
+    >
+      <div
+        class="column"
+      >
+        <div
+          class="ui left icon input"
+        >
+          <input
+            placeholder="Enter a search..."
+            type="text"
+            value=""
+          />
+          <i
+            aria-hidden="true"
+            class="search link icon"
+          />
+        </div>
+      </div>
+      <div
+        class="right aligned column"
+        style="display: flex; align-items: center; justify-content: flex-end;"
+      >
+        <div
+          class="ui fitted toggle checkbox bgOrange"
+        >
+          <input
+            class="hidden"
+            readonly=""
+            tabindex="0"
+            type="checkbox"
+            value=""
+          />
+          <label />
+        </div>
+        <button
+          class="ui icon disabled left labeled button"
+          disabled=""
+          style="margin-left: 10px;"
+          tabindex="-1"
+        >
+          <i
+            aria-hidden="true"
+            class="tachometer alternate icon"
+          />
+          Execute profile
+        </button>
+      </div>
+    </div>
+    <div
+      class="row"
+      style="min-height: 40px; padding-top: 2px; padding-bottom: 2px;"
+    >
+      <div
+        class="right aligned column"
+      />
+    </div>
+  </div>
   <table
     class="ui table"
   >
@@ -55,7 +117,7 @@ exports[`<StructureFields /> matches the latest snapshot 1`] = `
           <a
             href="/structures/1"
           >
-            field1
+            foo
           </a>
         </td>
         <td
@@ -105,7 +167,7 @@ exports[`<StructureFields /> matches the latest snapshot 1`] = `
           <a
             href="/structures/2"
           >
-            field2
+            bar
           </a>
         </td>
         <td
@@ -134,5 +196,29 @@ exports[`<StructureFields /> matches the latest snapshot 1`] = `
       </tr>
     </tbody>
   </table>
+  <div
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-label="First"
+      class="disabled link item"
+      href="/"
+    >
+      «
+    </a>
+    <div
+      aria-label="Later"
+      class="disabled item"
+    >
+      ⟨
+    </div>
+    <div
+      aria-label="Earlier"
+      class="item"
+    >
+      ⟩
+    </div>
+  </div>
 </div>
 `;

package/src/components/index.js

@@ -1,4 +1,5 @@
 import CatalogCustomViewCards from "./CatalogCustomViewCards";
+import CursorPagination from "./CursorPagination";
 import DictionaryRoutes from "./DictionaryRoutes";
 import FilteredNav from "./FilteredNav";
 import GrantRoutes from "./GrantRoutes";
@@ -53,6 +54,7 @@ import ValueConditionStructure from "./ValueConditionStructure";
 
 export {
   CatalogCustomViewCards,
+  CursorPagination,
   DictionaryRoutes,
   FilteredNav,
   GrantRequestBulkActions,

package/src/reducers/__tests__/structureFields.spec.js

@@ -29,7 +29,7 @@ describe("reducers: structureFields", () => {
     expect(
       structureFields(fooState, {
         type: fetchStructure.SUCCESS,
-        payload: { data }
+        payload: { data },
       })
     ).toMatchObject(data_fields);
   });
@@ -60,7 +60,7 @@ describe("reducers: structuresFields", () => {
     expect(
       structuresFields(fooState, {
         type: fetchStructure.SUCCESS,
-        payload: { data }
+        payload: { data },
       })
     ).toMatchObject({ 2: data_fields });
   });

package/src/selectors/__tests__/getLinkedImplementationsToStructuresColumns.spec.js

@@ -0,0 +1,20 @@
+import {
+  getLinkedImplementationsToStructuresColumns,
+  defaultImplementationToStructuresColumns,
+} from "..";
+
+describe("selectors: getLinkedImplementationsToStructuresColumns", () => {
+  it("should return custom ruleColumns when present", () => {
+    const ruleImplementationToStructuresColumns = [{ name: "test" }];
+    const res = getLinkedImplementationsToStructuresColumns({
+      ruleImplementationToStructuresColumns,
+    });
+    expect(res).toHaveLength(1);
+    expect(res).toEqual(ruleImplementationToStructuresColumns);
+  });
+
+  it("should return default defaultImplementationToStructuresColumns when no customized", () => {
+    const res = getLinkedImplementationsToStructuresColumns({});
+    expect(res).toHaveLength(defaultImplementationToStructuresColumns.length);
+  });
+});

package/src/selectors/getLinkedImplementationsToStructuresColumns.js

@@ -0,0 +1,95 @@
+import _ from "lodash/fp";
+import React from "react";
+import { createSelector } from "reselect";
+import { FormattedMessage } from "react-intl";
+import DateTime from "@truedat/core/components/DateTime";
+import { formatNumber } from "@truedat/core/services/format";
+import ConceptsLinkDecorator from "@truedat/bg/concepts/components/ConceptsLinkDecorator";
+import RuleResultDecorator from "@truedat/dq/components/RuleResultDecorator";
+import RuleImplementationLink from "@truedat/dq/components/RuleImplementationLink";
+import RuleLink from "@truedat/dq/components/RuleLink";
+
+const translateDecorator = (id) =>
+  id ? <FormattedMessage id={id} defaultMessage={id} /> : null;
+
+const resultTypeDecorator = (result, result_type, resultType) =>
+  _.defaultTo(result_type)(resultType) === "errors_number"
+    ? formatNumber(result)
+    : `${result}%`;
+
+export const defaultImplementationToStructuresColumns = [
+  {
+    name: "implementation_key",
+    fieldSelector: _.pick(["id", "implementation_key", "rule_id"]),
+    fieldDecorator: RuleImplementationLink,
+    sort: { name: "implementation_key.raw" },
+    width: 2,
+  },
+  {
+    name: "rule",
+    fieldSelector: ({ rule, rule_id: id }) => ({ id, name: rule?.name }),
+    sort: { name: "rule.name.raw" },
+    fieldDecorator: RuleLink,
+    width: 2,
+  },
+  {
+    name: "business_concepts",
+    fieldSelector: _.path("concepts"),
+    fieldDecorator: ConceptsLinkDecorator,
+    width: 2,
+  },
+  {
+    name: "last_execution_at",
+    fieldSelector: ({ execution_result_info }) => ({
+      value: execution_result_info?.date,
+    }),
+    fieldDecorator: DateTime,
+    sort: { name: "execution_result_info.date" },
+    width: 2,
+  },
+  {
+    name: "result_type",
+    fieldDecorator: (value) =>
+      _.isNil(value)
+        ? null
+        : translateDecorator(`ruleImplementations.props.result_type.${value}`),
+    sort: { name: "result_type.raw" },
+    width: 2,
+  },
+  {
+    name: "minimum",
+    fieldSelector: _.pick(["minimum", "result_type"]),
+    fieldDecorator: (field) =>
+      resultTypeDecorator(field.minimum, field.result_type),
+    sort: { name: "minimum" },
+    textAlign: "right",
+    width: 1,
+  },
+  {
+    name: "goal",
+    fieldSelector: _.pick(["goal", "result_type"]),
+    fieldDecorator: (field) =>
+      resultTypeDecorator(field.goal, field.result_type),
+    sort: { name: "goal" },
+    textAlign: "right",
+    width: 1,
+  },
+  {
+    name: "result",
+    fieldSelector: (ruleImplementation) => ({
+      ruleResult: ruleImplementation?.execution_result_info,
+      ruleImplementation,
+    }),
+    fieldDecorator: RuleResultDecorator,
+    textAlign: "center",
+    sort: { name: "execution_result_info.result.sort" },
+    width: 2,
+  },
+];
+
+const getColumns = (state) => state.ruleImplementationToStructuresColumns;
+
+export const getLinkedImplementationsToStructuresColumns = createSelector(
+  [getColumns],
+  _.defaultTo(defaultImplementationToStructuresColumns)
+);

package/src/selectors/index.js

@@ -31,8 +31,6 @@ export {
   getSortedChildrenRelations,
   getSortedParentRelations,
 } from "./getSortedRelations";
-export { getSortedFields } from "./getSortedFields";
-export { getSortedStructureChildren } from "./getSortedStructureChildren";
 export { getStructureDeletedAt } from "./getStructureDeletedAt";
 export {
   getStructureFieldColumns,
@@ -55,6 +53,10 @@ export { getSystemTemplate } from "./getSystemTemplate";
 export { getTabVisibility } from "./getTabVisibility";
 export { groupOptionsSelector } from "./groupOptionsSelector";
 export { resourceOptionsSelector } from "./resourceOptionsSelector";
+export {
+  getLinkedImplementationsToStructuresColumns,
+  defaultImplementationToStructuresColumns,
+} from "./getLinkedImplementationsToStructuresColumns";
 export * from "./templateNamesSelector";
 export * from "./getGrantsColumns";
 export * from "./getLineageLevels";

package/src/components/StructuresProfileButton.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { useIntl } from "react-intl";
-import { Button, Popup, Icon } from "semantic-ui-react";
-import StructuresProfileForm from "./StructuresProfileForm";
-
-export const StructuresProfileButton = () => {
-  const { formatMessage } = useIntl();
-  const trigger = (
-    <Button
-      icon={<Icon name="tachometer alternate" />}
-      className="button basic icon group-actions profile structureButton"
-      data-tooltip={formatMessage({ id: "structure.execute_profile" })}
-    />
-  );
-  return (
-    <Popup
-      className="StructuresProfileFrom-popup"
-      on="click"
-      position="bottom right"
-      flowing
-      trigger={trigger}
-    >
-      <StructuresProfileForm />
-    </Popup>
-  );
-};
-
-export default StructuresProfileButton;

package/src/components/StructuresProfileForm.js

@@ -1,89 +0,0 @@
-import { includes, map, without } from "lodash/fp";
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import { connect } from "react-redux";
-import { Form, List, Header } from "semantic-ui-react";
-import { getSortedFields } from "../selectors";
-import { createProfileGroup } from "../routines";
-
-export const StructuresProfileForm = ({ fields, createProfileGroup }) => {
-  const [selected, setSelected] = useState([]);
-  const { formatMessage } = useIntl();
-  const disabled = selected?.length === 0;
-
-  const handleSubmit = e => {
-    const payload = {
-      data_structure_ids: selected
-    };
-    createProfileGroup(payload);
-  };
-
-  const handleCheckAll = () => setSelected(map("data_structure_id")(fields));
-
-  const handleClearAll = () => setSelected([]);
-
-  const handleChange = (e, { checked, value }) => {
-    e && e.preventDefault() && e.stopPropagation();
-    setSelected(checked ? [...selected, value] : without([value])(selected));
-  };
-
-  return fields ? (
-    <Form onSubmit={handleSubmit} className="StructuresProfileForm">
-      <List horizontal link>
-        <List.Item
-          as="a"
-          onClick={handleCheckAll}
-          content={formatMessage({
-            id: "selectAll",
-            defaultMessage: "Select All"
-          })}
-        />
-        <List.Item
-          as="a"
-          onClick={handleClearAll}
-          content={formatMessage({ id: "clearAll", defaultMessage: "Clear" })}
-        />
-      </List>
-      <Header
-        as="h5"
-        content={formatMessage({
-          id: "tabs.dd.fields",
-          defaultMessage: "Fields"
-        })}
-      />
-      <div className="scrollable">
-        {fields.map(({ data_structure_id: id, name }) => (
-          <Form.Checkbox
-            key={id}
-            name={name}
-            label={<label>{name}</label>}
-            value={id}
-            checked={includes(id)(selected)}
-            onChange={handleChange}
-          />
-        ))}
-      </div>
-      <Form.Button
-        type="submit"
-        content={formatMessage({ id: "structure.execute_profile" })}
-        disabled={disabled}
-      />
-    </Form>
-  ) : null;
-};
-
-StructuresProfileForm.propTypes = {
-  createProfileGroup: PropTypes.func,
-  fields: PropTypes.array
-};
-
-const mapStateToProps = state => ({
-  fields: getSortedFields(state)
-});
-const mapDispatchToProps = { createProfileGroup };
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(StructuresProfileForm);

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

@@ -1,56 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { intl } from "@truedat/test/intl-stub";
-import { StructuresProfileForm } from "../StructuresProfileForm";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<StructuresProfileForm />", () => {
-  const createProfileGroup = jest.fn();
-  const fields = [{ data_structure_id: 1, name: "bar" }];
-  const structure = {
-    id: 1,
-    external_id: 1,
-    source: { external_id: 1 },
-  };
-  const props = {
-    createProfileGroup,
-    fields,
-    structure,
-  };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<StructuresProfileForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("submit button is disable when no fields are selected", async () => {
-    const { getByText } = render(<StructuresProfileForm {...props} />);
-
-    await waitFor(() => getByText("structure.execute_profile"));
-
-    expect(getByText("structure.execute_profile")).toHaveAttribute("disabled");
-  });
-
-  it("calls create job when button handleSubmit click", async () => {
-    const { getByText } = render(<StructuresProfileForm {...props} />);
-
-    await waitFor(() => userEvent.click(getByText("bar")));
-
-    expect(getByText("structure.execute_profile")).not.toHaveAttribute(
-      "disabled"
-    );
-
-    await waitFor(() =>
-      userEvent.click(getByText("structure.execute_profile"))
-    );
-
-    expect(createProfileGroup).toHaveBeenCalledWith({
-      data_structure_ids: [structure.id],
-    });
-  });
-});

package/src/components/__tests__/__snapshots__/StructuresProfileForm.spec.js.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StructuresProfileForm /> matches the latest snapshot 1`] = `
-<Form
-  as="form"
-  className="StructuresProfileForm"
-  onSubmit={[Function]}
->
-  <List
-    horizontal={true}
-    link={true}
-  >
-    <ListItem
-      as="a"
-      content="Select All"
-      onClick={[Function]}
-    />
-    <ListItem
-      as="a"
-      content="Clear"
-      onClick={[Function]}
-    />
-  </List>
-  <Header
-    as="h5"
-    content="tabs.dd.fields"
-  />
-  <div
-    className="scrollable"
-  >
-    <FormCheckbox
-      as={[Function]}
-      checked={false}
-      control={[Function]}
-      key="1"
-      label={
-        <label>
-          bar
-        </label>
-      }
-      name="bar"
-      onChange={[Function]}
-      value={1}
-    />
-  </div>
-  <FormButton
-    as={[Function]}
-    content="structure.execute_profile"
-    control={[Function]}
-    disabled={true}
-    type="submit"
-  />
-</Form>
-`;

package/src/selectors/__tests__/getSortedFields.spec.js

@@ -1,39 +0,0 @@
-import { getSortedFields } from "..";
-
-const projects = [
-  { name: "foo2", type: "project" },
-  { name: "foo1", type: "project" },
-];
-const schemas = [
-  { name: "bar2", type: "schema", metadata: { order: 1 } },
-  { name: "bar1", type: "schema", metadata: { order: 1 } },
-];
-const documents = [
-  { name: "baz1", type: "document" },
-  { name: "baz2", type: "document" },
-];
-const others = [
-  { name: "bay1", type: "other", metadata: { order: "0" } },
-  { name: "bay2", type: "other", metadata: { order: "0" } },
-];
-
-describe("selectors: getSortedFields", () => {
-  const state = {
-    structureFields: [...documents, ...projects, ...schemas, ...others],
-  };
-  const foo = [
-    ...others,
-    ...[
-      { name: "bar1", type: "schema", metadata: { order: 1 } },
-      { name: "bar2", type: "schema", metadata: { order: 1 } },
-    ],
-    ...[
-      { name: "foo1", type: "project" },
-      { name: "foo2", type: "project" },
-    ],
-    ...documents,
-  ];
-  it("get fields sorted by type criteria and name", () => {
-    expect(getSortedFields(state)).toEqual(foo);
-  });
-});

package/src/selectors/__tests__/getSortedStructureChildren.spec.js

@@ -1,36 +0,0 @@
-import { getSortedStructureChildren } from "..";
-
-const projects = [
-  { name: "foo2", type: "project" },
-  { name: "foo1", type: "project" }
-];
-const schemas = [
-  { name: "bar1", type: "schema" },
-  { name: "bar2", type: "schema" }
-];
-const documents = [
-  { name: "baz1", type: "document" },
-  { name: "baz2", type: "document" }
-];
-const others = [
-  { name: "bay1", type: "other" },
-  { name: "bay2", type: "other" }
-];
-
-describe("selectors: getSortedStructureChildren", () => {
-  const state = {
-    structureChildren: [...others, ...documents, ...schemas, ...projects]
-  };
-  const foo = [
-    ...[
-      { name: "foo1", type: "project" },
-      { name: "foo2", type: "project" }
-    ],
-    ...schemas,
-    ...documents,
-    ...others
-  ];
-  it("get structure children sorted by type criteria and name", () => {
-    expect(getSortedStructureChildren(state)).toEqual(foo);
-  });
-});

package/src/selectors/getSortedFields.js

@@ -1,9 +0,0 @@
-import _ from "lodash/fp";
-import { createSelector } from "reselect";
-import { getStructureSortingCriteria } from "./getStructureSortingCriteria";
-
-export const getSortedFields = createSelector(
-  [_.propOr([], "structureFields"), getStructureSortingCriteria],
-  (structureFields, structureSortingCriteria) =>
-    _.sortBy(structureSortingCriteria)(structureFields)
-);

package/src/selectors/getSortedStructureChildren.js

@@ -1,23 +0,0 @@
-import _ from "lodash/fp";
-import { createSelector } from "reselect";
-import { getStructureSortingCriteria } from "./getStructureSortingCriteria";
-
-export const getSortedStructureChildren = createSelector(
-  [
-    _.propOr([], "structureChildren"),
-    _.propOr([], "structureSiblings"),
-    _.propOr([], "systemStructures"),
-    getStructureSortingCriteria,
-  ],
-  (
-    structureChildren,
-    structureSiblings,
-    systemStructures,
-    structureSortingCriteria
-  ) =>
-    _.size(structureChildren)
-      ? _.sortBy(structureSortingCriteria)(structureChildren)
-      : _.size(structureSiblings)
-      ? _.sortBy(structureSortingCriteria)(structureSiblings)
-      : _.sortBy(structureSortingCriteria)(systemStructures)
-);