@truedat/dd 5.9.1 → 5.9.3

package/src/components/StructuresRoutes.js

@@ -5,6 +5,8 @@ import { Route, Switch, useRouteMatch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import {
+  BUCKETS_VIEW,
+  BUCKET_VIEW,
   STRUCTURE,
   STRUCTURES,
   STRUCTURES_BULK_UPDATE,
@@ -15,6 +17,7 @@ import StructureCrumbs from "./StructureCrumbs";
 import StructureLoader from "./StructureLoader";
 import UserSearchFiltersLoader from "./UserSearchFiltersLoader";
 import StructureView from "./StructureView";
+import BucketView from "./BucketView";
 import StructuresBulkUpdate from "./StructuresBulkUpdate";
 import StructuresView from "./StructuresView";
 
@@ -58,60 +61,65 @@ const StructureEventsLoader = () => {
 
 const AuthorizedRoutes = () => {
   const { formatMessage } = useIntl();
+
   return (
-    <Switch>
-      <Route
-        exact
-        path={STRUCTURES}
-        render={() => (
-          <>
-            <UserSearchFiltersLoader scope="data_structure" />
-            <StructuresView />
-          </>
-        )}
-      />
+    <>
+      <Switch>
+        <Route
+          exact
+          path={BUCKETS_VIEW}
+          render={() => (
+            <>
+              <UserSearchFiltersLoader scope="data_structure" />
+              <StructuresView customView />
+            </>
+          )}
+        />
+        <Route exact path={[BUCKET_VIEW]} render={() => <BucketView />} />
+
+        <Route
+          exact
+          path={STRUCTURES}
+          render={() => (
+            <>
+              <UserSearchFiltersLoader scope="data_structure" />
+              <StructuresView />
+            </>
+          )}
+        />
+
+        <Route
+          exact
+          path={STRUCTURES_BULK_UPDATE}
+          render={() => (
+            <>
+              <StructureCrumbs
+                name={formatMessage({ id: "structures.bulkUpdate.crumbs.top" })}
+              />
+              <StructuresBulkUpdate />
+            </>
+          )}
+        />
+      </Switch>
       <Route
         exact
-        path={STRUCTURES_BULK_UPDATE}
-        render={() => (
-          <>
-            <StructureCrumbs
-              name={formatMessage({ id: "structures.bulkUpdate.crumbs.top" })}
-            />
-            <StructuresBulkUpdate />
-          </>
-        )}
+        path={[STRUCTURE_EVENTS, STRUCTURE_VERSION, STRUCTURE]}
+        component={ConceptSelectorConceptsLoader}
       />
+      <Route path={STRUCTURE_EVENTS} component={StructureEventsLoader} />
       <Route
-        render={() => (
-          <>
-            <Route component={ConceptSelectorConceptsLoader} />
-            <Switch>
-              <Route
-                path={STRUCTURE_VERSION}
-                render={() => (
-                  <>
-                    <StructureLoader />
-                    <StructureImplementationsLoader />
-                  </>
-                )}
-              />
-              <Route
-                path={STRUCTURE}
-                render={() => (
-                  <>
-                    <StructureLoader />
-                    <StructureImplementationsLoader />
-                  </>
-                )}
-              />
-            </Switch>
-            <Route path={STRUCTURE_EVENTS} component={StructureEventsLoader} />
-            <Route path={STRUCTURE} component={StructureView} />
-          </>
-        )}
+        path={[STRUCTURE_VERSION, STRUCTURE]}
+        render={() => {
+          return (
+            <>
+              <StructureLoader />
+              <StructureImplementationsLoader />
+            </>
+          );
+        }}
       />
-    </Switch>
+      <Route path={[STRUCTURE]} component={StructureView} />
+    </>
   );
 };
 
@@ -120,7 +128,7 @@ export const StructuresRoutes = () => {
 
   return (
     <Route
-      path={STRUCTURES}
+      path={[STRUCTURES, BUCKET_VIEW, BUCKETS_VIEW]}
       render={() => (authorized ? <AuthorizedRoutes /> : <Unauthorized />)}
     />
   );

package/src/components/StructuresView.js

@@ -13,6 +13,7 @@ import StructureDateFilter from "./StructureDateFilter";
 import StructuresSearch from "./StructuresSearch";
 import StructuresSearchResults from "./StructuresSearchResults";
 import SystemCards from "./SystemCards";
+import CatalogCustomViewCards from "./CatalogCustomViewCards";
 
 export const StructuresHeader = () => (
   <Header as="h2">
@@ -32,6 +33,7 @@ const StructuresViewContent = ({
   structures,
   hasFilterApplied,
   embedded,
+  customView,
 }) => {
   const history = useHistory();
   return (
@@ -46,6 +48,8 @@ const StructuresViewContent = ({
           loading={loading}
           onSelect={({ id }) => history.push(linkTo.STRUCTURE({ id }))}
         />
+      ) : customView ? (
+        <CatalogCustomViewCards />
       ) : (
         <SystemCards />
       )}
@@ -60,6 +64,7 @@ StructuresViewContent.propTypes = {
   loading: PropTypes.bool,
   hasFilterApplied: PropTypes.bool,
   embedded: PropTypes.bool,
+  customView: PropTypes.bool,
 };
 
 export const StructuresView = (props) => {

package/src/components/SystemCards.js

@@ -88,6 +88,7 @@ export const SystemsPopup = ({ structures_count, structureTypes }) => {
       }
       basic
     >
+      <p>adfasdfasdfafd</p>
       <Table basic="very" className="no-rows-border super-compact">
         <Table.Body>
           {_.propOr(

package/src/components/SystemFilteredNav.js

@@ -19,7 +19,7 @@ const SystemFilteredNav = ({ delay = 500 }) => {
       />
       <StructureNav
         childStructures={data || []}
-        parentStructure={[]}
+        parentStructure={{}}
         totalChildStructures={count}
       />
     </>

package/src/components/SystemStructures.js

@@ -1,48 +1,66 @@
 import _ from "lodash/fp";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Grid, Segment } from "semantic-ui-react";
+import { useParams } from "react-router-dom";
 import { getSystem, getSystemTemplate } from "../selectors";
-import SystemFilteredNav from "./SystemFilteredNav";
+import { saveNavFilter as saveNavFilterRoutine } from "../routines";
+import FilteredNav from "./FilteredNav";
 import SystemCrumbs from "./SystemCrumbs";
 import SystemView from "./SystemView";
 
 export const SystemStructures = ({
+  navFilter,
+  saveNavFilter,
   system,
   systemStructuresLoading,
   systemTemplate,
-}) =>
-  !systemStructuresLoading && (
-    <Grid>
-      <Grid.Row>
-        <Grid.Column width={16}>
-          <SystemCrumbs system={system} />
-        </Grid.Column>
-      </Grid.Row>
-      <Grid.Row stretched>
-        <Grid.Column width={4}>
-          <Segment>
-            <SystemFilteredNav />
-          </Segment>
-        </Grid.Column>
-        <Grid.Column width={12}>
-          <SystemView system={system} systemTemplate={systemTemplate} />
-        </Grid.Column>
-      </Grid.Row>
-    </Grid>
+}) => {
+  const { id: systemId } = useParams();
+
+  useEffect(() => {
+    saveNavFilter({ system_id: systemId });
+  }, [systemId, saveNavFilter]);
+
+  return (
+    !systemStructuresLoading && (
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            <SystemCrumbs system={system} />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row stretched>
+          <Grid.Column width={4}>
+            <Segment>
+              {navFilter?.system_id ? <FilteredNav filter={navFilter} /> : null}
+            </Segment>
+          </Grid.Column>
+          <Grid.Column width={12}>
+            <SystemView system={system} systemTemplate={systemTemplate} />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    )
   );
+};
 
 SystemStructures.propTypes = {
+  navFilter: PropTypes.object,
+  saveNavFilter: PropTypes.func,
   system: PropTypes.object,
   systemStructuresLoading: PropTypes.bool,
   systemTemplate: PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
+  navFilter: state?.navFilter,
   system: getSystem(state),
   systemStructuresLoading: _.prop("systemStructuresLoading")(state),
   systemTemplate: getSystemTemplate(state),
 });
 
-export default connect(mapStateToProps)(SystemStructures);
+export default connect(mapStateToProps, {
+  saveNavFilter: saveNavFilterRoutine,
+})(SystemStructures);

package/src/components/SystemsRoutes.js

@@ -7,7 +7,7 @@ import { Route, Switch } from "react-router-dom";
 import {
   SYSTEM_EDIT,
   SYSTEM_NEW,
-  SYSTEM_STRUCTURES
+  SYSTEM_STRUCTURES,
 } from "@truedat/core/routes";
 import SystemCrumbs from "./SystemCrumbs";
 import SystemForm from "./SystemForm";
@@ -24,7 +24,7 @@ export const SystemsRoutes = ({ system }) => {
         exact
         render={() => (
           <>
-            <SystemStructuresLoader />
+            {/* <SystemStructuresLoader /> */}
             <SystemStructures />
           </>
         )}
@@ -60,7 +60,7 @@ export const SystemsRoutes = ({ system }) => {
 };
 
 SystemsRoutes.propTypes = {
-  system: PropTypes.object
+  system: PropTypes.object,
 };
 
 const mapStateToProps = _.pick(["system"]);

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

@@ -0,0 +1,49 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { BucketView } from "../BucketView";
+
+const state = {
+  authentication: { role: "admin" },
+  userPermissions: {
+    confidential: true,
+    create_foreign_grant_request: true,
+    profile_permission: false,
+    request_grant: true,
+    update: true,
+    update_domain: true,
+    update_grant_removal: true,
+    view_profiling_permission: true,
+  },
+};
+
+describe("<BucketView />", () => {
+  it("Applies navFilter", async () => {
+    const saveNavFilter = jest.fn();
+    const navFilter = {};
+    const renderOpts = {
+      state,
+    };
+
+    render(
+      <MemoryRouter
+        initialEntries={[
+          "?propertyPath=metadata.region&propertyValue=eu-west-1",
+        ]}
+      >
+        <BucketView {...{ navFilter, saveNavFilter }} />
+      </MemoryRouter>,
+      renderOpts
+    );
+
+    await waitFor(() =>
+      /* Maybe it would be better to test the real store instead of the
+       * mock store from "@truedat/test/render"
+       */
+      expect(saveNavFilter).toHaveBeenCalledWith({
+        "metadata.region": "eu-west-1",
+      })
+    );
+  });
+});

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { within } from "@testing-library/react";
+import { CatalogCustomViewCards } from "../CatalogCustomViewCards";
+import es from "../../messages/en";
+
+const structureFilters = {
+  "metadata.database": {
+    buckets: [
+      {
+        doc_count: 11234,
+        key: "_missing",
+      },
+      {
+        doc_count: 2345,
+        key: "database_1",
+      },
+      {
+        doc_count: 3456,
+        key: "database_2",
+      },
+    ],
+    values: ["_missing", "database_1", "database_2"],
+  },
+};
+
+const messages = {
+  es: {
+    ...es,
+    missingBucket: "_missing",
+  },
+};
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ propertyPath: "metadata.database" }),
+}));
+
+describe("<CatalogCustomViewCard />", () => {
+  it("Shows a structure filter value and count inside each Card", () => {
+    const { getByRole } = render(
+      <CatalogCustomViewCards structureFilters={structureFilters} />,
+      { locale: "es", messages }
+    );
+    const missingCard = getByRole("link", { name: /_missing/ });
+    expect(missingCard).toBeInTheDocument();
+    const databaseOneCard = getByRole("link", { name: /database_1/ });
+    expect(databaseOneCard).toBeInTheDocument();
+    const databaseTwoCard = getByRole("link", { name: /database_2/ });
+    expect(databaseTwoCard).toBeInTheDocument();
+
+    expect(within(missingCard).getByText(/^11.234$/)).toBeInTheDocument();
+    expect(within(databaseOneCard).getByText(/^2345$/)).toBeInTheDocument();
+    expect(within(databaseTwoCard).getByText(/^3456$/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CatalogViewConfigFormLoader } from "../CatalogViewConfigForm";
+import { CATALOG_VIEW_CONFIG_QUERY } from "../../api/queries";
+import { upsertCatalogViewConfig } from "../../routines";
+
+const config = {
+  __typename: "CatalogViewConfig",
+  id: "123",
+  fieldType: "metadata",
+  fieldName: "someFieldName",
+};
+
+const configsMock = {
+  request: { query: CATALOG_VIEW_CONFIG_QUERY },
+  result: { data: { catalogViewConfig: config } },
+};
+
+const renderOpts = { mocks: [configsMock] };
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+const mockHistoryPush = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+describe("<CatalogViewConfigFormLoader />", () => {
+  it("Saves the configuration", async () => {
+    const dispatch = jest.fn();
+    const { findByRole, getByRole } = render(<CatalogViewConfigFormLoader />, {
+      ...renderOpts,
+      dispatch,
+    });
+
+    /* https://github.com/testing-library/dom-testing-library/issues/474#issuecomment-597606894
+     *  A <form> element needs an accessible name to have the form role. So you
+     * need <form aria-label="form" /> or
+     * <form aria-labelledby="form-label-element-id" />.
+     */
+    await findByRole("form");
+
+    const fieldTypeDropdown = getByRole("listbox", { name: "fieldType" });
+    const selectedFieldType = within(fieldTypeDropdown).getByRole("option", {
+      selected: true,
+    });
+    expect(within(selectedFieldType).getByText(/Metadata/)).toBeInTheDocument();
+
+    const fieldName = getByRole("textbox", { name: "fieldName" });
+    expect(fieldName).toHaveValue("someFieldName");
+
+    userEvent.clear(fieldName);
+    userEvent.type(fieldName, "updatedFieldName");
+    const saveButton = getByRole("button", { name: "save" });
+
+    userEvent.click(saveButton);
+    await waitFor(() => {
+      expect(dispatch).toHaveBeenLastCalledWith(
+        upsertCatalogViewConfig({
+          id: "123",
+          fieldType: "metadata",
+          fieldName: "updatedFieldName",
+        })
+      );
+    });
+  });
+});

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CatalogViewConfigsLoader } from "../CatalogViewConfigs";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "../../api/queries";
+import { deleteCatalogViewConfig } from "../../routines";
+
+const config = {
+  __typename: "CatalogViewConfig",
+  id: "123",
+  fieldType: "someFieldType",
+  fieldName: "someFieldName",
+};
+
+const configsMock = {
+  request: { query: CATALOG_VIEW_CONFIGS_QUERY },
+  result: { data: { catalogViewConfigs: [config] } },
+};
+
+const renderOpts = { mocks: [configsMock] };
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+const mockHistoryPush = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+describe("<CatalogViewConfigsLoader />", () => {
+  it("loads all catalog view configs and shows them in a table", async () => {
+    const { findByRole } = render(<CatalogViewConfigsLoader />, renderOpts);
+
+    const table = await findByRole("table");
+    const row = within(table).getAllByRole("row")[1];
+    const fieldType = within(row).getByText(/someFieldType/);
+    const fieldName = within(row).getByText(/someFieldName/);
+    expect(fieldType).toBeInTheDocument();
+    expect(fieldName).toBeInTheDocument();
+    userEvent.click(fieldName);
+    expect(mockHistoryPush).toHaveBeenCalledWith("/bucketViewConfigs/123/edit");
+  });
+
+  it("deletes a catalog view config", async () => {
+    const dispatch = jest.fn();
+    const { findByRole, getByRole } = render(<CatalogViewConfigsLoader />, {
+      ...renderOpts,
+      dispatch,
+    });
+
+    const table = await findByRole("table");
+    const row = within(table).getAllByRole("row")[1];
+    const deleteButton = within(row).getByRole("button", { name: "delete" });
+    userEvent.click(deleteButton);
+
+    const modalConfirmDeleteButton = getByRole("button", {
+      name: "modal-affirmative-action",
+    });
+    userEvent.click(modalConfirmDeleteButton);
+
+    await waitFor(() => {
+      expect(dispatch).toHaveBeenLastCalledWith(
+        deleteCatalogViewConfig({
+          id: "123",
+        })
+      );
+    });
+  });
+});