@truedat/dd 6.6.0 → 6.6.1

package/src/components/StructuresView.js

@@ -7,12 +7,17 @@ import { Header, Icon, Segment, Divider } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 import { BUCKETS_VIEW } from "@truedat/core/routes";
-import { fetchStructureFilters as fetchStructureFiltersRoutine } from "@truedat/dd/routines";
-import { structureRowsSelector } from "../selectors";
-import StructureSelectedFilters from "./StructureSelectedFilters";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import {
+  useDataStructureFilters,
+  useDataStructureSearch,
+} from "../hooks/useStructures";
+import translations from "../utils/structureCustomTranslations";
 import StructuresOptions from "./StructuresOptions";
-import StructureDateFilter from "./StructureDateFilter";
-import StructuresSearch from "./StructuresSearch";
 import StructuresSearchResults from "./StructuresSearchResults";
 import SystemCards from "./SystemCards";
 import CatalogCustomViewCards from "./CatalogCustomViewCards";
@@ -45,23 +50,26 @@ const StructuresHeader = () => {
   );
 };
 
-const StructuresViewContent = ({
-  actions = {},
-  loading,
-  structures,
-  hasFilterApplied,
-  embedded,
-  customView,
-}) => {
+export const StructuresViewContent = ({ embedded, customView }) => {
+  const { searchData, loading, query, allActiveFilters, toggleDateFilter } =
+    useSearchContext();
+  const actions = _.propOr({}, "_actions")(searchData);
+  const structures = searchData?.data;
+
+  const selectedFilters = (allActiveFilters, toggleDateFilter) =>
+    toggleDateFilter
+      ? true
+      : !_.isEmpty(allActiveFilters) &&
+        _.flow(_.values, _.some(_.negate(_.isEmpty)))(allActiveFilters);
+  const hasFilterApplied =
+    !_.isEmpty(query) || selectedFilters(allActiveFilters, toggleDateFilter);
   const history = useHistory();
   return (
     <>
       {!customView ? (
         <>
           <StructuresOptions hasFilterApplied={hasFilterApplied} {...actions} />
-          <StructuresSearch />
-          <StructureSelectedFilters />
-          <StructureDateFilter />
+          <SearchWidget dateFilter />
         </>
       ) : null}
 
@@ -81,53 +89,60 @@ const StructuresViewContent = ({
 };
 
 StructuresViewContent.propTypes = {
-  actions: PropTypes.object,
   grantable: PropTypes.bool,
-  structures: PropTypes.array,
-  loading: PropTypes.bool,
-  hasFilterApplied: PropTypes.bool,
   embedded: PropTypes.bool,
   customView: PropTypes.bool,
 };
 
 export const StructuresView = (props) => {
-  const { systemsLoading, embedded } = props;
-  return embedded ? (
-    <StructuresViewContent {...props} />
-  ) : (
-    <Segment loading={systemsLoading}>
-      <StructuresHeader />
-      <Divider hidden />
-      <StructuresViewContent {...props} />
-    </Segment>
+  const { systemsLoading, embedded, customView } = 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}>
+      {embedded ? (
+        <StructuresViewContent embedded={embedded} customView={customView} />
+      ) : (
+        <Segment loading={systemsLoading}>
+          <StructuresHeader />
+          <Divider hidden />
+          <StructuresViewContent embedded={embedded} customView={customView} />
+        </Segment>
+      )}
+    </SearchContextProvider>
   );
 };
 
 StructuresView.propTypes = {
-  actions: PropTypes.object,
-  structures: PropTypes.array,
-  loading: PropTypes.bool,
-  systemsLoading: PropTypes.bool,
-  hasFilterApplied: PropTypes.bool,
+  defaultFilters: PropTypes.object,
   embedded: PropTypes.bool,
+  customView: PropTypes.bool,
+  systemsLoading: PropTypes.bool,
+  filtersGroup: PropTypes.array,
 };
 
-const selectedFilters = ({ structureActiveFilters, structureDateFilter }) =>
-  structureDateFilter?.active
-    ? true
-    : !_.isEmpty(structureActiveFilters) &&
-      _.flow(_.values, _.some(_.negate(_.isEmpty)))(structureActiveFilters);
-
-const isEmptyPath = (state, path) => _.flow(_.path(path), _.isEmpty)(state);
-
-const mapStateToProps = (state) => ({
-  structures: structureRowsSelector(state),
-  actions: state.structuresActions,
-  fetchStructureFilters: fetchStructureFiltersRoutine,
-  loading: state.structuresLoading,
-  systemsLoading: state.systemsLoading,
-  hasFilterApplied:
-    !isEmptyPath(state, "structureQuery.query") || selectedFilters(state),
-});
-
+const mapStateToProps = (state) => {
+  return {
+    systemsLoading: state?.systemsLoading,
+    filtersGroup: state?.structureFiltersGroup,
+  };
+};
 export default connect(mapStateToProps)(StructuresView);

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { render } from "@truedat/test/render";
 import { within } from "@testing-library/react";
-import { CatalogCustomViewCards } from "../CatalogCustomViewCards";
+import SearchContext from "@truedat/core/search/SearchContext";
+import CatalogCustomViewCards from "../CatalogCustomViewCards";
 import es from "../../messages/en";
 
 const structureFilters = {
@@ -24,7 +25,30 @@ const structureFilters = {
   },
 };
 
-const fetchStructureFilters = jest.fn();
+jest.mock("@truedat/dd/hooks/useStructures", () => {
+  const originalModule = jest.requireActual("@truedat/dd/hooks/useStructures");
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataStructureFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: {},
+          }),
+      }),
+    }),
+    useDataStructureSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: [] },
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
 
 const messages = {
   es: {
@@ -38,13 +62,26 @@ jest.mock("react-router-dom", () => ({
   useParams: () => ({ propertyPath: "metadata.database" }),
 }));
 
+const searchProps = {
+  loading: false,
+  filtersLoading: false,
+  allFilters: structureFilters,
+  searchData: { data: [] },
+};
+
 describe("<CatalogCustomViewCard />", () => {
   it("Shows a structure filter value and count inside each Card", () => {
-    const props = { structureFilters, fetchStructureFilters };
-    const { getByRole } = render(<CatalogCustomViewCards {...props} />, {
-      locale: "es",
-      messages,
-    });
+    const { getByRole } = render(
+      <SearchContext.Provider value={searchProps}>
+        <CatalogCustomViewCards />
+      </SearchContext.Provider>,
+
+      {
+        locale: "es",
+        messages,
+      }
+    );
+
     const missingCard = getByRole("link", { name: /_missing/ });
     expect(missingCard).toBeInTheDocument();
     const databaseOneCard = getByRole("link", { name: /database_1/ });

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { render } from "@truedat/test/render";
+import SearchContextWrapper from "@truedat/core/components/common/SearchContextWrapper";
 import StructureGrantListButton from "../StructureGrantListButton";
 
 const structure = {
@@ -22,7 +23,6 @@ const structure = {
 const renderOpts = {
   state: {
     structureGrantPopup: ["structureGrantPopup"],
-    previousStructureQuery: { foo: "bar" },
     grantRequestsCart: {
       structures: [{ id: 1 }],
     },
@@ -30,10 +30,14 @@ const renderOpts = {
   fallback: "lazy",
 };
 
+const searchProps = { filterParams: { foo: "bar" } };
+
 describe("<StructureGrantListButton />", () => {
   it("matches the latest snapshot", () => {
     const { container } = render(
-      <StructureGrantListButton structure={structure} />,
+      <SearchContextWrapper props={searchProps}>
+        <StructureGrantListButton structure={structure} />
+      </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -41,7 +45,9 @@ describe("<StructureGrantListButton />", () => {
 
   it("matches the latest snapshot for requested structure", () => {
     const { container } = render(
-      <StructureGrantListButton structure={{ ...structure, id: 1 }} />,
+      <SearchContextWrapper props={searchProps}>
+        <StructureGrantListButton structure={{ ...structure, id: 1 }} />
+      </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -49,17 +55,19 @@ describe("<StructureGrantListButton />", () => {
 
   it("matches the latest snapshot with grant", () => {
     const { container } = render(
-      <StructureGrantListButton
-        structure={{
-          ...structure,
-          my_grants: [
-            {
-              id: 2,
-              user_id: 564,
-            },
-          ],
-        }}
-      />,
+      <SearchContextWrapper props={searchProps}>
+        <StructureGrantListButton
+          structure={{
+            ...structure,
+            my_grants: [
+              {
+                id: 2,
+                user_id: 564,
+              },
+            ],
+          }}
+        />
+      </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -67,9 +75,11 @@ describe("<StructureGrantListButton />", () => {
 
   it("matches the latest snapshot with grant request", () => {
     const { container } = render(
-      <StructureGrantListButton
-        structure={{ ...structure, my_grant_request: { status: "pending" } }}
-      />,
+      <SearchContextWrapper props={searchProps}>
+        <StructureGrantListButton
+          structure={{ ...structure, my_grant_request: { status: "pending" } }}
+        />
+      </SearchContextWrapper>,
       renderOpts
     );
     expect(container).toMatchSnapshot();

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

@@ -1,36 +1,81 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { StructureSelector, mapStateToProps } from "../StructureSelector";
+import { render } from "@truedat/test/render";
+import { StructureSelector } from "../StructureSelector";
+
+const data = {
+  _actions: { bulkUpdate: {} },
+  data: [
+    { id: 1, name: "1", updated_at: "2021-12-10T12:22:37.797978Z" },
+    { id: 2, name: "2", updated_at: "2021-12-10T12:22:37.797978Z" },
+  ],
+  headers: { "x-total-count": 2 },
+};
+
+const filterData = {
+  data: {
+    some: {
+      values: ["some_xxx", "some_yyy", "some_xwy"],
+    },
+  },
+};
+
+jest.mock("@truedat/dd/hooks/useStructures", () => {
+  const originalModule = jest.requireActual("@truedat/dd/hooks/useStructures");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataStructureFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: filterData,
+          }),
+      }),
+    }),
+    useDataStructureSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data,
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
+
+const messages = {
+  en: {
+    "search.placeholder": "Search...",
+    "structure.group": "Group",
+    "structure.system": "System",
+    "structure.name": "Name",
+    "structures.retrieved.results": "Results",
+    "structures.loading.header": "Header",
+    "structure.type.undefined.text": "text",
+    "structure.relation.relation_type_name": "relation",
+    "structure.updated_at": "Updated at",
+    "structure.type": "type",
+  },
+};
+const renderOpts = { messages };
 
 describe("<StructureSelector />", () => {
   it("matches the latest snapshot", () => {
-    const columns = ["name", "system", "group"].map(name => ({ name }));
-    const structures = [{ id: 1 }, { id: 2 }];
-    const structuresRows = [{ id: 1 }, { id: 2 }];
+    const columns = ["name", "system", "group"].map((name) => ({ name }));
+
+    const structuresRows = [
+      { id: 1, name: 1 },
+      { id: 2, name: 2 },
+    ];
 
     const props = {
-      structures,
       structuresRows,
       columns,
-      onSelect: jest.fn()
+      onSelect: jest.fn(),
     };
-    const wrapper = shallow(<StructureSelector {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe("mapStateToProps", () => {
-    it("excludes system from columns if the default filters include system.name.raw", () => {
-      const defaultFilters = { "system.name.raw": ["foo"] };
-      const structuresColumns = ["foo", "bar", "system", "baz"].map(name => ({
-        name
-      }));
-      const structuresLoading = false;
-      const state = { structuresColumns, structuresLoading };
-      const ownProps = { defaultFilters };
-      const props = mapStateToProps(state, ownProps);
-      expect(props).toMatchObject({
-        columns: [{ name: "foo" }, { name: "bar" }, { name: "baz" }]
-      });
-    });
+    const { container } = render(<StructureSelector {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -2,10 +2,75 @@ import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
+import SearchContext from "@truedat/core/search/SearchContext";
 import StructureStructureForm from "../StructureStructureForm";
 import { linkStructureToStructure } from "../../routines";
 import { LINK_LABELS_QUERY } from "../../api/queries";
 
+const structure = {
+  external_id: "external_id",
+  id: 67583,
+  updated_at: "2021-06-10T12:01:17.343065Z",
+  name: "structure",
+};
+
+jest.mock("@truedat/dd/hooks/useStructures", () => {
+  const originalModule = jest.requireActual("@truedat/dd/hooks/useStructures");
+
+  const data = {
+    _actions: { bulkUpdate: { href: "/structures/bulkUpdate" } },
+    data: [structure],
+  };
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useDataStructureFilters: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data: { data: {} },
+          }),
+      }),
+    }),
+    useDataStructureSearch: () => ({
+      trigger: () => ({
+        then: (callback) =>
+          callback({
+            data,
+            headers: {},
+          }),
+      }),
+    }),
+  };
+});
+
+const useFilters = jest.fn(() => ({
+  trigger: jest.fn(() => new Promise(() => {})),
+  isMutating: false,
+}));
+
+const useSearch = () => ({
+  trigger: () => ({
+    then: (callback) =>
+      callback({
+        data: {
+          data: [structure],
+        },
+      }),
+  }),
+});
+
+const searchProps = {
+  initialSortColumn: "name.raw",
+  initialSortDirection: "ascending",
+  useSearch: useSearch,
+  useFilters: useFilters,
+  userFiltersType: "structures",
+  omitFilters: [],
+  translations: jest.fn(),
+};
+
 const linkLabels = {
   labels: [
     {
@@ -29,61 +94,12 @@ const linkLabelsMock = {
 };
 
 describe("<StructureStructureForm />", () => {
-  const structure = {
-    alias: null,
-    confidential: false,
-    domain_ids: [1],
-    domains: [
-      {
-        external_id: "Acme",
-        id: 1,
-        name: "Acme",
-        parent_id: null,
-        parents: [],
-        updated_at: "2022-03-22 12:56:39.639127Z",
-      },
-    ],
-    external_id: "external_id",
-    id: 67583,
-    inserted_at: "2019-11-27T08:35:44.000000Z",
-    updated_at: "2021-06-10T12:01:17.343065Z",
-    class: null,
-    classes: null,
-    data_structure_link_count: 0,
-    data_structure_type: {
-      metadata_views: [],
-      template_id: 9,
-      translation: null,
-    },
-    degree: null,
-    deleted_at: null,
-    description: null,
-    grant: null,
-    grants: [],
-    group: "group",
-    implementation_count: 0,
-    metadata: {
-      database: "database",
-      host: "host",
-    },
-    name: "structure",
-    note: {},
-    siblings: [],
-    source: {
-      external_id: "oracle_meta_ds2",
-      id: 19,
-    },
-    system: {
-      id: 2,
-      name: "SYSTEM_1",
-    },
-    type: "Schema",
-  };
-
-  it("matches the latest snapshot", async () => {
+  it.only("matches the latest snapshot", async () => {
     const columns = ["name", "system", "group"].map((name) => ({ name }));
-    const structureActiveFilters = {};
-    const structuresRows = [{ id: 1 }, { id: 2 }];
+    const structuresRows = [
+      { id: 1, name: 1 },
+      { id: 2, name: 1 },
+    ];
     const dispatch = jest.fn();
 
     const props = {
@@ -95,16 +111,32 @@ describe("<StructureStructureForm />", () => {
 
     const renderOpts = {
       mocks: [linkLabelsMock],
-      state: {
-        structure,
-        structures: [structure],
-        structureActiveFilters,
-      },
       dispatch,
+      state: { structure },
+      messages: {
+        en: {
+          "search.placeholder": "Search...",
+          "structure.type.undefined.text": "type",
+          "structureLink.selector.placeholder": "Select a relation label...",
+          "actions.save": "Save",
+          "actions.cancel": "Cancel",
+          "structureLink.selector.label": "Label",
+          "structure.updated_at": "updated at",
+          "structure.group": "group",
+          "structure.relation.relation_type_name": "relation type name",
+          "structure.system": "system",
+          "structure.type": "type",
+          "structure.name": "name",
+          "structures.retrieved.results": "results",
+          "structures.loading.header": "loading header",
+        },
+      },
     };
 
     const { queryByText, findByText, getByRole } = render(
-      <StructureStructureForm {...props} />,
+      <SearchContext.Provider value={{ ...searchProps }}>
+        <StructureStructureForm {...props} />
+      </SearchContext.Provider>,
       renderOpts
     );
     await waitFor(() =>

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

@@ -203,7 +203,7 @@ describe("<StructureStructureLinks />", () => {
   });
 
   it("matches the latest snapshot of StructureStructureLinks for alias check", async () => {
-    const { getByRole, debug, container } = render(
+    const { getByRole, container } = render(
       <StructureStructureLinks {...props} />,
       {
         routes: ["/structures/60217/structureLinks"],