@truedat/dd 6.8.2 → 6.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.8.2",
+  "version": "6.8.3",
   "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": "6.8.2",
+    "@truedat/test": "6.8.3",
     "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": "6.8.2",
-    "@truedat/core": "6.8.2",
-    "@truedat/df": "6.8.2",
+    "@truedat/auth": "6.8.3",
+    "@truedat/core": "6.8.3",
+    "@truedat/df": "6.8.3",
     "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": "be2060255c20fe0ae577185fcc990a07a3644106"
+  "gitHead": "d3bea8cda996ea5ec5d2a0a75dfeb9a0594269d5"
 }

package/src/components/DictionaryRoutes.js

@@ -114,7 +114,11 @@ export const DictionaryRoutes = () => {
         render={() => (
           <>
             <SystemsLoader />
-            <PendingStructureNotes />
+            <PendingStructureNotes
+              defaultFilters={{
+                note_status: ["rejected", "draft", "pending_approval"],
+              }}
+            />
           </>
         )}
       />

package/src/components/PendingStructureNoteRow.js

@@ -2,41 +2,33 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
-import { useIntl } from "react-intl";
 import { useHistory } from "react-router-dom";
+import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 
-const PendingStructureNoteRow = ({ structureNote }) => {
-  const { formatMessage } = useIntl();
+const PendingStructureNoteRow = ({ structure, columns }) => {
   const history = useHistory();
-  const dataStructure = structureNote?.dataStructure;
-  const path = _.propOr([], "dataStructure.currentVersion.path")(structureNote);
-  const name = dataStructure?.currentVersion?.name;
-  const system = dataStructure?.system?.name;
-  const domainsNames = _.flow(
-    _.prop("dataStructure.domains"),
-    _.map("name")
-  )(structureNote);
-
-  return (
-    <Table.Row
-      onClick={() => history.push(linkTo.STRUCTURE_NOTES(dataStructure))}
-    >
-      <Table.Cell content={name} />
-      <Table.Cell
-        content={formatMessage({
-          id: `structure.notes.status.${structureNote.status}`,
-        })}
-      />
-      <Table.Cell content={system} />
-      <Table.Cell content={domainsNames.join(", ")} />
-      <Table.Cell content={path.join(" > ")} />
+  return _.isEmpty(columns) || _.isEmpty(structure) ? null : (
+    <Table.Row key={structure.id}>
+      {columns.map((column, i) => (
+        <Table.Cell
+          key={i}
+          {...(i == 0 && {
+            title: columnDecorator(column)(structure),
+            className: "structure-cell-overflow",
+          })}
+          textAlign={column.textAlign}
+          content={columnDecorator(column)(structure)}
+          onClick={() => history.push(linkTo.STRUCTURE({ id: structure.id }))}
+        />
+      ))}
     </Table.Row>
   );
 };
 
 PendingStructureNoteRow.propTypes = {
-  structureNote: PropTypes.object,
+  structure: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
 };
 
 export default PendingStructureNoteRow;

package/src/components/PendingStructureNotes.js

@@ -1,34 +1,25 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useQuery } from "@apollo/client";
-import { Checkbox, Form, Header, Icon, Segment } from "semantic-ui-react";
-import { useForm, Controller } from "react-hook-form";
-import { DomainSelector } from "@truedat/core/components";
-import { STRUCTURE_NOTES_QUERY } from "../api/queries";
+import { FormattedMessage } from "react-intl";
+import { Dimmer, Loader, Header, Icon, Segment } from "semantic-ui-react";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  useDataStructureFilters,
+  useDataStructureSearch,
+} from "../hooks/useStructures";
+import translations from "../utils/structureCustomTranslations";
+import PendingStructureNotesPagination from "./PendingStructureNotesPagination";
+import PendingStructureNotesLabelResults from "./PendingStructureNotesLabelResults";
 import PendingStructureNotesTable from "./PendingStructureNotesTable";
 
-const STATUS = ["pending_approval", "draft", "rejected"];
-
-export const PendingStructureNotes = ({ systems }) => {
-  const { formatMessage } = useIntl();
-  const [domainsLoading, setDomainsLoading] = useState(true);
-  const [filter, setFilter] = useState({
-    statuses: STATUS,
-  });
-  const { loading, error, data } = useQuery(STRUCTURE_NOTES_QUERY, {
-    variables: { filter },
-    fetchPolicy: "cache-and-network",
-  });
-  const items = loading || error ? [] : data?.structureNotes;
-  const { control } = useForm({
-    mode: "all",
-    defaultValues: {
-      status: STATUS,
-    },
-  });
+export const PendingStructureNotesContent = () => {
+  const { loading } = useSearchContext();
 
   return (
     <Segment>
@@ -41,97 +32,53 @@ export const PendingStructureNotes = ({ systems }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Form loading={domainsLoading}>
-        <Header
-          as="h5"
-          content={formatMessage({ id: "pendingStructureNotes.filters" })}
-        />
-        <Controller
-          control={control}
-          name="status"
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Field className="subscriptions-checkbox-filters">
-              <label>
-                <FormattedMessage id="pendingStructureNotes.props.status" />
-              </label>
-              {STATUS.map((type, idx) => (
-                <Checkbox
-                  onBlur={onBlur}
-                  key={idx}
-                  label={
-                    <label>
-                      <FormattedMessage
-                        id={`structure.notes.status.${type}`}
-                        defaultMessage={type}
-                      />
-                    </label>
-                  }
-                  onChange={() => {
-                    const statuses = _.includes(type)(value)
-                      ? _.filter((t) => t !== type)(value)
-                      : [...value, type];
-                    setFilter({ ...filter, statuses });
-                    onChange(statuses);
-                  }}
-                  checked={_.includes(type)(value)}
-                />
-              ))}
-            </Form.Field>
-          )}
-        />
-        <Controller
-          control={control}
-          name="domain_ids"
-          render={({ field: { onChange, value } }) => (
-            <DomainSelector
-              label={formatMessage({ id: "domain.selector.label" })}
-              labels
-              action="publishStructureNote"
-              value={value}
-              onChange={(_e, { value }) => {
-                const domain_ids = _.isEmpty(value) ? [] : [value];
-                setFilter({ ...filter, domain_ids });
-                onChange(value);
-              }}
-              onLoad={() => setDomainsLoading(false)}
-            />
-          )}
-        />
-        <Controller
-          control={control}
-          name="system_ids"
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Dropdown
-              label={formatMessage({
-                id: "pendingStructureNotes.props.system",
-              })}
-              onBlur={onBlur}
-              onChange={(e, { value }) => {
-                setFilter({ ...filter, system_ids: value });
-                onChange(value);
-              }}
-              options={systems.map(({ name, id }) => ({
-                text: name,
-                key: id,
-                value: id,
-              }))}
-              selection
-              clearable
-              multiple
-              value={value || []}
-            />
-          )}
-        />
-      </Form>
-      <PendingStructureNotesTable structureNotes={items} loading={loading} />
+
+      <SearchWidget />
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+        <PendingStructureNotesLabelResults />
+        <PendingStructureNotesTable />
+        <PendingStructureNotesPagination />
+      </Dimmer.Dimmable>
     </Segment>
   );
 };
 
+export const PendingStructureNotes = (props) => {
+  const defaultFilters = _.propOr({}, "defaultFilters")(props);
+  const filtersGroup = _.propOr([], "filtersGroup")(props);
+  const enrichSearchPayload = {
+    my_grant_requests: false,
+    with_data_fields: false,
+  };
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useDataStructureSearch,
+    useFilters: useDataStructureFilters,
+    pageSize: 20,
+    userFiltersType: "user_search_filters",
+    userFilterScope: "data_structure",
+    translations,
+    filtersGroup,
+    defaultFilters,
+    enrichSearchPayload,
+  };
+  return (
+    <SearchContextProvider {...searchProps} defaultFilters={defaultFilters}>
+      <PendingStructureNotesContent />
+    </SearchContextProvider>
+  );
+};
+
 PendingStructureNotes.propTypes = {
-  systems: PropTypes.array,
+  defaultFilters: PropTypes.object,
 };
 
-export const mapStateToProps = ({ systems }) => ({ systems });
+const mapStateToProps = (state) => ({
+  filtersGroup: state?.pendingStructureNotesFiltersGroup,
+});
 
 export default connect(mapStateToProps)(PendingStructureNotes);

package/src/components/PendingStructureNotesLabelResults.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export const PendingStructureNotesLabelResults = () => {
+  const { formatNumber } = useIntl();
+  const { count: originalCount } = useSearchContext();
+  const count = formatNumber(originalCount);
+  return (
+    <Label className="structures-notes-label-results">
+      <FormattedMessage id="structures.retrieved.results" values={{ count }} />
+    </Label>
+  );
+};
+
+export default PendingStructureNotesLabelResults;

package/src/components/PendingStructureNotesPagination.js

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

package/src/components/PendingStructureNotesTable.js

@@ -1,13 +1,19 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage, useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { getStructureNotesColumnsSelector } from "../selectors/";
 import PendingStructureNoteRow from "./PendingStructureNoteRow";
 
-const PendingStructureNotesTable = ({ structureNotes, loading }) => {
-  const { formatMessage } = useIntl();
-  return loading ? null : _.isEmpty(structureNotes) ? (
+const PendingStructureNotesTable = ({ columns }) => {
+  const { searchData, sortColumn, sortDirection, handleSortSelection } =
+    useSearchContext();
+  const structures = searchData?.data;
+
+  return _.isEmpty(structures) ? (
     <Header as="h4">
       <Icon name="search" />
       <Header.Content>
@@ -15,48 +21,51 @@ const PendingStructureNotesTable = ({ structureNotes, loading }) => {
       </Header.Content>
     </Header>
   ) : (
-    <Table selectable>
+    <Table selectable sortable>
       <Table.Header>
         <Table.Row>
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.structure",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.status",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.system",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.domains",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.path",
-            })}
-          />
+          {columns &&
+            columns.map((column, key) => (
+              <Table.HeaderCell
+                key={key}
+                width={column.width}
+                content={
+                  <FormattedMessage
+                    id={`pendingStructureNotes.props.${
+                      column.header || 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>
-        {structureNotes.map((structureNote, key) => (
-          <PendingStructureNoteRow key={key} structureNote={structureNote} />
+        {structures.map((structure, key) => (
+          <PendingStructureNoteRow
+            key={key}
+            structure={structure}
+            columns={columns}
+          />
         ))}
       </Table.Body>
     </Table>
   );
 };
 
+const mapStateToProps = (state) => ({
+  columns: getStructureNotesColumnsSelector(state),
+});
+
 PendingStructureNotesTable.propTypes = {
-  structureNotes: PropTypes.array,
-  loading: PropTypes.bool,
+  columns: PropTypes.array,
 };
 
-export default PendingStructureNotesTable;
+export default connect(mapStateToProps)(PendingStructureNotesTable);

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

@@ -1,36 +1,113 @@
 import React from "react";
-import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import { getStructureNotesColumnsSelector } from "../../selectors";
 import PendingStructureNoteRow from "../PendingStructureNoteRow";
 
-const props = {
-  structureNote: {
-    id: "7207",
-    status: "draft",
-    dataStructure: {
-      currentVersion: {
-        name: "bar",
-        path: ["bar rute"],
-      },
-      domains: [{ name: "bar domain" }],
-      system: { name: "bar system" },
-    },
+const mockHistory = {
+  push: jest.fn(),
+};
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => mockHistory,
+}));
+
+const columns = getStructureNotesColumnsSelector({});
+
+const structure = {
+  id: "7207",
+  note: { status: "draft" },
+  name: "bar",
+  path: ["bar rute"],
+  domains: [{ name: "bar domain" }, { name: "baz domain" }],
+  system: { name: "bar system" },
+  non_published_note: { id: 1, status: "draft" },
+};
+
+const messages = {
+  en: {
+    "pendingStructureNotes.props.domain": "Domain",
+    "pendingStructureNotes.props.status": "Status",
+    "pendingStructureNotes.props.name": "Name",
+    "search.placeholder": "Search...",
+    "pendingStructureNotes.props.path": "Path",
+    "pendingStructureNotes.props.system": "System",
+    "pendingStructureNotes.search.results.empty": "Empty",
+    "structures.retrieved.results": "{count} structures found",
+    "pendingStructureNotes.subheader": "Subheader",
+    "pendingStructureNotes.header": "Header",
+    "pendingStructureNotes.status.rejected": "Rejected",
+    "pendingStructureNotes.status.draft": "Draft",
   },
 };
 
+const renderOpts = { messages };
+
+const props = {
+  structure,
+  columns,
+};
+
 describe("<PendingStructureNoteRow />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
+    const { container } = render(
       <table>
         <tbody>
           <PendingStructureNoteRow {...props} />
         </tbody>
-      </table>
+      </table>,
+      renderOpts
     );
+
     expect(container).toMatchSnapshot();
+  });
+
+  it("navigates to the job route when row is clicked", () => {
+    const props = { columns, structure };
+    const { getByText } = render(
+      <table>
+        <tbody>
+          <PendingStructureNoteRow {...props} />
+        </tbody>
+      </table>,
+      renderOpts
+    );
+    userEvent.click(getByText(/bar system/));
+    expect(mockHistory.push.mock.calls.length).toBe(1);
+    expect(mockHistory.push.mock.calls[0][0]).toBe("/structures/7207");
+  });
+
+  it("renders empty table if structure is empty", () => {
+    const emptyStructure = {};
+    const { queryByText } = render(
+      <table>
+        <tbody>
+          <PendingStructureNoteRow
+            structure={emptyStructure}
+            columns={columns}
+          />
+        </tbody>
+      </table>,
+      renderOpts
+    );
+    expect(queryByText("bar system")).not.toBeInTheDocument();
+  });
+
+  it("renders empty table columns are empty", () => {
+    const emptyColumns = [];
+    const { queryByText } = render(
+      <table>
+        <tbody>
+          <PendingStructureNoteRow
+            structure={structure}
+            columns={emptyColumns}
+          />
+        </tbody>
+      </table>,
+      renderOpts
+    );
 
-    await waitFor(() => {
-      expect(queryByText(/bar system/)).toBeTruthy();
-    });
+    expect(queryByText("bar system")).not.toBeInTheDocument();
   });
 });