@truedat/auth 4.51.2 → 4.51.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.51.3] 2022-09-16
+
+### Changed
+
+- [TD-4794] Use `DomainSelector` in `UserDomainsFilter`
+
 ## [4.51.2] 2022-09-15
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/auth",
-  "version": "4.51.2",
+  "version": "4.51.3",
   "description": "Truedat Web Auth",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.47.9",
+    "@truedat/test": "4.51.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,7 +87,7 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "4.51.2",
+    "@truedat/core": "4.51.3",
     "auth0-js": "^9.12.2",
     "immutable": "^4.0.0-rc.12",
     "jwt-decode": "^2.2.0",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "9bdc76f3ee59a6e28fb2312e26d0cba2807f069b"
+  "gitHead": "69d6cf8f7379eb2ef5744a4fdd357a7dd662b115"
 }

package/src/users/components/UserDomainsFilter.js

@@ -1,69 +1,65 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { Form } from "semantic-ui-react";
 import { setDashboardDomains } from "@truedat/core/routines";
 import { useIntl } from "react-intl";
 import PropTypes from "prop-types";
-import { DomainMenuSelector } from "@truedat/bg/taxonomy/components";
-import { getDomainSelectorOptions } from "@truedat/bg/selectors";
+import { DomainSelector } from "@truedat/core/components";
 
 export const UserDomainsFilter = ({
-  domainOptions,
-  domainsLoading,
+  action = "viewDomain",
   setDashboardDomains,
 }) => {
-  const [domainsFilter, setDomainsFilter] = useState([]);
+  const [domainIds, setDomainIds] = useState("loading");
+  const [selectedDomainIds, setSelectedDomainIds] = useState([]);
   const { formatMessage } = useIntl();
 
-  useEffect(() => {
-    setDashboardDomains(_.map("id")(domainOptions));
-  }, [domainOptions, setDashboardDomains]);
-
-  const handleChange = (_e, data) => {
-    const { value } = data;
-    setDomainsFilter(value);
+  const handleDomainsLoaded = ({ domains }) => {
+    const domainIds = _.map(({ id }) => _.toInteger(id))(domains);
+    setDomainIds(domainIds);
   };
 
   const onClick = (_e) => {
-    _.isEmpty(domainsFilter)
-      ? setDashboardDomains(_.map("id")(domainOptions))
-      : setDashboardDomains(domainsFilter);
+    _.isEmpty(selectedDomainIds)
+      ? setDashboardDomains(domainIds)
+      : setDashboardDomains(_.map(_.toInteger)(selectedDomainIds));
   };
 
   return (
-    !domainsLoading && (
-      <Form>
-        <Form.Group inline>
-          <DomainMenuSelector
-            domainOptions={domainOptions}
-            onChange={handleChange}
-          />
-          <Form.Field>
-            <Form.Button name="applyFilter" onClick={onClick}>
-              {formatMessage({
-                id: "userDomainsFilter.button",
-                defaultMessage: "Aplicar filtros",
-              })}
-            </Form.Button>
-          </Form.Field>
-        </Form.Group>
-      </Form>
-    )
+    <Form loading={domainIds === "loading"}>
+      <Form.Group inline>
+        <DomainSelector
+          action={action}
+          placeholder={formatMessage({ id: "domain.multiple.placeholder" })}
+          labels
+          multiple
+          onChange={(_e, { value }) => setSelectedDomainIds(value)}
+          onLoad={handleDomainsLoaded}
+          value={selectedDomainIds}
+        />
+        <Form.Field>
+          <Form.Button
+            name="applyFilter"
+            disabled={domainIds === "loading"}
+            onClick={onClick}
+          >
+            {formatMessage({
+              id: "userDomainsFilter.button",
+              defaultMessage: "Apply filters",
+            })}
+          </Form.Button>
+        </Form.Field>
+      </Form.Group>
+    </Form>
   );
 };
 
 UserDomainsFilter.propTypes = {
-  domainOptions: PropTypes.array,
-  domainsLoading: PropTypes.bool,
+  action: PropTypes.string,
   setDashboardDomains: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
-  domainOptions: getDomainSelectorOptions(state),
-  domainsLoading: state.domainsLoading,
-});
-
 const mapDispatchToProps = { setDashboardDomains };
 
-export default connect(mapStateToProps, mapDispatchToProps)(UserDomainsFilter);
+export default connect(null, mapDispatchToProps)(UserDomainsFilter);

package/src/users/components/__tests__/UserDomainsFilter.spec.js

@@ -2,54 +2,45 @@ import React from "react";
 import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import { intl } from "@truedat/test/intl-stub";
+import { domainsMock } from "@truedat/test/mocks";
 import { UserDomainsFilter } from "../UserDomainsFilter";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 describe("<UserDomainsFilter />", () => {
-  const setDashboardDomains = jest.fn();
-  const formatMessage = jest.fn();
-  const intl = { formatMessage };
-  const domains = [
-    { id: 1, name: "d1", level: 0 },
-    { id: 2, name: "d2", level: 0 },
-  ];
-  const props = {
-    intl,
-    setDashboardDomains,
-    domainsLoading: false,
-    domainOptions: domains,
-  };
-
-  it("matches the latest snapshot", () => {
-    const { container } = render(<UserDomainsFilter {...props} />, {
-      state: { domains },
+  const props = { setDashboardDomains: jest.fn() };
+  const mocks = [domainsMock({ action: "viewDomain" })];
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <UserDomainsFilter {...props} />,
+      { mocks }
+    );
+    await waitFor(() => {
+      expect(queryByText(/fooDomain/)).toBeInTheDocument();
     });
     expect(container).toMatchSnapshot();
   });
 
   it("calls setDashboardDomains when clicking button", async () => {
-    const { getByRole } = render(<UserDomainsFilter {...props} />, {
-      state: { domains },
-    });
+    const { queryByText, findByText } = render(
+      <UserDomainsFilter {...props} />,
+      { mocks }
+    );
 
-    const button = getByRole("button", { name: /userDomainsFilter/i });
-    const option = getByRole("option", { name: /d1/i });
+    await waitFor(() => {
+      expect(queryByText(/fooDomain/)).toBeInTheDocument();
+    });
 
-    userEvent.click(button);
+    userEvent.click(await findByText("Filter"));
 
     await waitFor(() => {
-      expect(setDashboardDomains).toHaveBeenCalledWith([1, 2]);
+      expect(props.setDashboardDomains).toHaveBeenCalledWith([1, 2, 3, 33]);
     });
 
-    userEvent.click(option);
-    userEvent.click(button);
+    userEvent.click(await findByText("fooDomain"));
+    userEvent.click(await findByText("Filter"));
 
     await waitFor(() => {
-      expect(setDashboardDomains).toHaveBeenCalledWith([1]);
+      expect(props.setDashboardDomains).toHaveBeenCalledWith([1]);
     });
   });
 });

package/src/users/components/__tests__/__snapshots__/UserDomainsFilter.spec.js.snap

@@ -19,7 +19,7 @@ exports[`<UserDomainsFilter /> matches the latest snapshot 1`] = `
           tabindex="0"
         >
           <label>
-            domain.multiple.placeholder
+            Select domains
           </label>
           <i
             aria-hidden="true"
@@ -42,6 +42,21 @@ exports[`<UserDomainsFilter /> matches the latest snapshot 1`] = `
             <div
               class="scrolling menu transition"
             >
+              <div
+                aria-selected="false"
+                class="item"
+                role="option"
+              >
+                <div
+                  style="margin-left: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="plus icon"
+                  />
+                  barDomain
+                </div>
+              </div>
               <div
                 aria-selected="false"
                 class="item"
@@ -54,7 +69,7 @@ exports[`<UserDomainsFilter /> matches the latest snapshot 1`] = `
                     aria-hidden="true"
                     class="icon"
                   />
-                  d1
+                  bazDomain
                 </div>
               </div>
               <div
@@ -69,7 +84,7 @@ exports[`<UserDomainsFilter /> matches the latest snapshot 1`] = `
                     aria-hidden="true"
                     class="icon"
                   />
-                  d2
+                  fooDomain
                 </div>
               </div>
             </div>
@@ -86,7 +101,7 @@ exports[`<UserDomainsFilter /> matches the latest snapshot 1`] = `
             class="ui button"
             name="applyFilter"
           >
-            userDomainsFilter.button
+            Filter
           </button>
         </div>
       </div>