@truedat/core 4.53.2 → 4.53.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.53.3] 2022-10-07
+
+### Added
+
+- [TD-5195] Support for global user filters
+
 ## [4.53.2] 2022-10-07
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.53.2",
+  "version": "4.53.3",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.53.2",
+    "@truedat/test": "4.53.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "e29af66624aad6ecce065ced88c8cc2e320d67e2"
+  "gitHead": "d4f6cc40692e4d1e3f13e42774938765fe49c3b7"
 }

package/src/components/ModalSaveFilter.js

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
 import { ConfirmModal } from "./ConfirmModal";
 
 export const SaveFilterForm = ({ setFilterName }) => {
@@ -31,8 +32,22 @@ SaveFilterForm.propTypes = {
 
 export const ModalSaveFilter = ({ saveFilters, activeFilters, scope }) => {
   const [filterName, setFilterName] = useState("");
+  const authorized = useAuthorized();
 
-  const actions = (handleSubmit) => [
+  const handleSubmitGlobal = (e) => doSubmit(e, true);
+  const handleSubmit = (e) => doSubmit(e, false);
+
+  const doSubmit = (e, isGlobal) => {
+    e.preventDefault();
+    saveFilters({
+      filters: activeFilters,
+      filterName: filterName,
+      scope,
+      isGlobal,
+    });
+  };
+
+  const actions = [
     {
       key: "no",
       secondary: true,
@@ -45,20 +60,22 @@ export const ModalSaveFilter = ({ saveFilters, activeFilters, scope }) => {
       content: <FormattedMessage id="search.save_filter.save" />,
       onClick: handleSubmit,
     },
+    ...(authorized
+      ? [
+          {
+            key: "yes_global",
+            primary: true,
+            disabled: _.isEmpty(filterName),
+            content: <FormattedMessage id="search.save_filter.save_global" />,
+            onClick: handleSubmitGlobal,
+          },
+        ]
+      : []),
   ];
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    saveFilters({
-      filters: activeFilters,
-      filterName: filterName,
-      scope,
-    });
-  };
-
   return (
     <ConfirmModal
-      actions={actions(handleSubmit)}
+      actions={actions}
       icon="save"
       trigger={
         <a className="resetFilters">

package/src/components/UserFilters.js

@@ -3,6 +3,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Label, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import { useAuthorized } from "@truedat/core/hooks";
 import { ConfirmModal } from "./ConfirmModal";
 
 export const UserFilters = ({
@@ -14,62 +15,74 @@ export const UserFilters = ({
   userFilters,
   userFilterScope,
 }) => {
+  const authorized = useAuthorized();
+  const sortedUserFilters = _.orderBy(
+    ["is_global", "id"],
+    ["desc", "asc"]
+  )(userFilters);
   return _.isEmpty(userFilters) ? null : (
     <div className="selectedFilters">
-      {userFilters.map((userFilter, key) => (
-        <Label
-          basic={selectedUserFilter == userFilter.name ? false : true}
-          circular
-          key={key}
-        >
-          <span
-            onClick={
-              disabled
-                ? null
-                : (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (selectedUserFilter == userFilter.name) {
-                      resetFilters();
-                    } else {
-                      applyUserFilter({ userFilter, scope: userFilterScope });
-                    }
-                  }
-            }
-            className="userFilter"
+      {sortedUserFilters.map((userFilter, key) => {
+        const isGlobal = _.prop("is_global")(userFilter);
+        return (
+          <Label
+            basic={selectedUserFilter == userFilter.name ? false : true}
+            circular
+            key={key}
+            color={isGlobal ? "teal" : null}
           >
-            {userFilter.name}
-          </span>
+            {isGlobal ? <Icon name="globe" /> : null}
+            <span
+              onClick={
+                disabled
+                  ? null
+                  : (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (selectedUserFilter == userFilter.name) {
+                        resetFilters();
+                      } else {
+                        applyUserFilter({ userFilter, scope: userFilterScope });
+                      }
+                    }
+              }
+              className="userFilter"
+            >
+              {userFilter.name}
+            </span>
 
-          <ConfirmModal
-            icon="trash"
-            trigger={
-              <Icon
-                className="selectable"
-                color="grey"
-                size="small"
-                name="trash alternate outline"
-              />
-            }
-            header={
-              <FormattedMessage id="search.filters.actions.delete.confirmation.header" />
-            }
-            content={
-              <FormattedMessage
-                id="search.filters.actions.delete.confirmation.content"
-                values={{
-                  name: (
-                    <b>
-                      <i>{userFilter.name}</i>
-                    </b>
-                  ),
-                }}
+            {!isGlobal || authorized ? (
+              <ConfirmModal
+                icon="trash"
+                trigger={
+                  <Icon
+                    className="selectable"
+                    color="grey"
+                    size="small"
+                    name="trash alternate outline"
+                  />
+                }
+                header={
+                  <FormattedMessage id="search.filters.actions.delete.confirmation.header" />
+                }
+                content={
+                  <FormattedMessage
+                    id="search.filters.actions.delete.confirmation.content"
+                    values={{
+                      name: (
+                        <b>
+                          <i>{userFilter.name}</i>
+                        </b>
+                      ),
+                    }}
+                  />
+                }
+                onConfirm={() => deleteUserFilter({ id: userFilter.id })}
               />
-            }
-            onConfirm={() => deleteUserFilter({ id: userFilter.id })}
-          />
-        </Label>
-      ))}
+            ) : null}
+          </Label>
+        );
+      })}
     </div>
   );
 };

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

@@ -1,32 +1,48 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { ModalSaveFilter, SaveFilterForm } from "../ModalSaveFilter";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import ModalSaveFilter from "../ModalSaveFilter";
+
+const renderOpts = {
+  messages: {
+    en: {
+      ...messages.en,
+    },
+  },
+};
+
+describe("<ModalSaveFilter /> admin", () => {
+  jest.mock("../../hooks", () => ({
+    ...jest.requireActual("../../hooks"),
+    useAuthorized: jest.fn(() => true),
+  }));
 
-describe("<ModalSaveFilter />", () => {
   const saveFilters = jest.fn();
   const activeFilters = {};
+  const scope = "data_structure";
 
   it("matches the latest snapshot", () => {
-    const props = { saveFilters, activeFilters };
-    const wrapper = shallow(<ModalSaveFilter {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const props = {
+      saveFilters,
+      activeFilters,
+      scope,
+    };
+    const { container } = render(<ModalSaveFilter {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
-});
-
-describe("<SaveFilterForm />", () => {
-  it("matches the latest snapshot", () => {
-    const setFilterName = jest.fn();
-    const props = { setFilterName };
-    const wrapper = shallow(<SaveFilterForm {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("calls setFilterName on input change", () => {
-    const setFilterName = jest.fn();
-    const props = { setFilterName };
-    const wrapper = shallow(<SaveFilterForm {...props} />);
 
-    wrapper.find("FormInput").simulate("change", null, { value: "fname" });
-    expect(setFilterName).toBeCalledWith("fname");
+  it("matches the latest snapshot with opened modal", async () => {
+    const props = {
+      saveFilters,
+      activeFilters,
+      scope,
+    };
+    const { container, findByText } = render(
+      <ModalSaveFilter {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByText(/save/i));
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,13 +1,31 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { UserFilters } from "../UserFilters";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import UserFilters from "../UserFilters";
 
-describe("<UserFilters />", () => {
-  const applyUserFilter = jest.fn();
-  const deleteUserFilter = jest.fn();
-  const resetFilters = jest.fn();
-  const selectedUserFilter = null;
-  const userFilters = [{ name: "a" }, { name: "b" }];
+const renderOpts = {
+  messages: {
+    en: {
+      ...messages.en,
+    },
+  },
+};
+
+const applyUserFilter = jest.fn();
+const deleteUserFilter = jest.fn();
+const resetFilters = jest.fn();
+const selectedUserFilter = null;
+const userFilters = [
+  { id: 1, name: "a" },
+  { id: 2, name: "b" },
+];
+
+describe("<UserFilters /> admin", () => {
+  jest.mock("../../hooks", () => ({
+    ...jest.requireActual("../../hooks"),
+    useAuthorized: jest.fn(() => true),
+  }));
 
   it("matches the latest snapshot", () => {
     const props = {
@@ -15,57 +33,82 @@ describe("<UserFilters />", () => {
       deleteUserFilter,
       resetFilters,
       selectedUserFilter,
-      userFilters
+      userFilters,
     };
-    const wrapper = shallow(<UserFilters {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<UserFilters {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 
-  it("renders one label for each user filter", () => {
+  it("matches the latest snapshot with global filters", () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
       resetFilters,
       selectedUserFilter,
-      userFilters
+      userFilters: [...userFilters, { name: "g", is_global: true }],
     };
-    const wrapper = shallow(<UserFilters {...props} />);
-    expect(wrapper.find("Label")).toHaveLength(2);
+    const { container } = render(<UserFilters {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
   });
 
-  it("calls applyUserFilter when selecting unselected filter label", () => {
+  it("calls applyUserFilter when selecting unselected filter label", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
       resetFilters,
       selectedUserFilter,
-      userFilters
+      userFilters,
     };
-    const wrapper = shallow(<UserFilters {...props} />);
-    const e = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
-    wrapper
-      .find("Label")
-      .at(0)
-      .find("span")
-      .simulate("click", e);
+    const { findByText } = render(<UserFilters {...props} />, renderOpts);
+    userEvent.click(await findByText(/b/));
     expect(applyUserFilter.mock.calls.length).toBe(1);
+    expect(applyUserFilter.mock.calls[0][0].userFilter).toEqual({
+      id: 2,
+      name: "b",
+    });
   });
 
-  it("calls resetFilters when selecting selected filter label", () => {
+  it("calls resetFilters when selecting selected filter label", async () => {
     const props = {
       applyUserFilter,
       deleteUserFilter,
       resetFilters,
       selectedUserFilter: "a",
-      userFilters
+      userFilters,
     };
-    const wrapper = shallow(<UserFilters {...props} />);
-    const e = { preventDefault: jest.fn(), stopPropagation: jest.fn() };
-    wrapper
-      .find("Label")
-      .at(0)
-      .find("span")
-      .simulate("click", e);
+    const { findByText } = render(<UserFilters {...props} />, renderOpts);
+    userEvent.click(await findByText(/a/));
     expect(resetFilters.mock.calls.length).toBe(1);
   });
 });
+
+describe("<UserFilters /> not admin", () => {
+  jest.mock("../../hooks", () => ({
+    ...jest.requireActual("../../hooks"),
+    useAuthorized: jest.fn(() => false),
+  }));
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      applyUserFilter,
+      deleteUserFilter,
+      resetFilters,
+      selectedUserFilter,
+      userFilters,
+    };
+    const { container } = render(<UserFilters {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with global filters", () => {
+    const props = {
+      applyUserFilter,
+      deleteUserFilter,
+      resetFilters,
+      selectedUserFilter,
+      userFilters: [...userFilters, { name: "g", is_global: true }],
+    };
+    const { container } = render(<UserFilters {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -1,68 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ModalSaveFilter /> matches the latest snapshot 1`] = `
-<ConfirmModal
-  actions={
-    Array [
-      Object {
-        "content": <Memo(MemoizedFormattedMessage)
-          id="search.save_filter.cancel"
-        />,
-        "key": "no",
-        "secondary": true,
-      },
-      Object {
-        "content": <Memo(MemoizedFormattedMessage)
-          id="search.save_filter.save"
-        />,
-        "disabled": true,
-        "key": "yes",
-        "onClick": [Function],
-        "primary": true,
-      },
-    ]
-  }
-  content={
-    <SaveFilterForm
-      filterName=""
-      setFilterName={[Function]}
-    />
-  }
-  header={
-    <Memo(MemoizedFormattedMessage)
-      id="search.filters.actions.save.confirmation.header"
-    />
-  }
-  icon="save"
-  onConfirm={[Function]}
-  trigger={
-    <a
-      className="resetFilters"
-    >
-      <Memo(MemoizedFormattedMessage)
-        id="search.save_filters"
-      />
-    </a>
-  }
-/>
+exports[`<ModalSaveFilter /> admin matches the latest snapshot 1`] = `
+<div>
+  <a
+    class="resetFilters"
+  >
+    Save
+  </a>
+</div>
 `;
 
-exports[`<SaveFilterForm /> matches the latest snapshot 1`] = `
-<Form
-  as="form"
->
-  <FormField>
-    <label>
-      <MemoizedFormattedMessage
-        id="search.saveFilterForm.filter_name"
-      />
-    </label>
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      name="filter_name"
-      onChange={[Function]}
-    />
-  </FormField>
-</Form>
+exports[`<ModalSaveFilter /> admin matches the latest snapshot with opened modal 1`] = `
+<div>
+  <a
+    class="resetFilters"
+  >
+    Save
+  </a>
+</div>
 `;

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

@@ -1,96 +1,167 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<UserFilters /> matches the latest snapshot 1`] = `
-<div
-  className="selectedFilters"
->
-  <Label
-    basic={true}
-    circular={true}
-    key="0"
+exports[`<UserFilters /> admin matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="selectedFilters"
   >
-    <span
-      className="userFilter"
-      onClick={[Function]}
+    <div
+      class="ui basic circular label"
     >
-      a
-    </span>
-    <ConfirmModal
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="search.filters.actions.delete.confirmation.content"
-          values={
-            Object {
-              "name": <b>
-                <i>
-                  a
-                </i>
-              </b>,
-            }
-          }
-        />
-      }
-      header={
-        <Memo(MemoizedFormattedMessage)
-          id="search.filters.actions.delete.confirmation.header"
-        />
-      }
-      icon="trash"
-      onConfirm={[Function]}
-      trigger={
-        <Icon
-          as="i"
-          className="selectable"
-          color="grey"
-          name="trash alternate outline"
-          size="small"
-        />
-      }
-    />
-  </Label>
-  <Label
-    basic={true}
-    circular={true}
-    key="1"
+      <span
+        class="userFilter"
+      >
+        a
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        b
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<UserFilters /> admin matches the latest snapshot with global filters 1`] = `
+<div>
+  <div
+    class="selectedFilters"
   >
-    <span
-      className="userFilter"
-      onClick={[Function]}
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        a
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        b
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui teal basic circular label"
+    >
+      <i
+        aria-hidden="true"
+        class="globe icon"
+      />
+      <span
+        class="userFilter"
+      >
+        g
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<UserFilters /> not admin matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        a
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        b
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<UserFilters /> not admin matches the latest snapshot with global filters 1`] = `
+<div>
+  <div
+    class="selectedFilters"
+  >
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        a
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui basic circular label"
+    >
+      <span
+        class="userFilter"
+      >
+        b
+      </span>
+      <i
+        aria-hidden="true"
+        class="grey trash alternate outline small icon selectable"
+      />
+    </div>
+    <div
+      class="ui teal basic circular label"
     >
-      b
-    </span>
-    <ConfirmModal
-      content={
-        <Memo(MemoizedFormattedMessage)
-          id="search.filters.actions.delete.confirmation.content"
-          values={
-            Object {
-              "name": <b>
-                <i>
-                  b
-                </i>
-              </b>,
-            }
-          }
-        />
-      }
-      header={
-        <Memo(MemoizedFormattedMessage)
-          id="search.filters.actions.delete.confirmation.header"
-        />
-      }
-      icon="trash"
-      onConfirm={[Function]}
-      trigger={
-        <Icon
-          as="i"
-          className="selectable"
-          color="grey"
-          name="trash alternate outline"
-          size="small"
-        />
-      }
-    />
-  </Label>
+      <i
+        aria-hidden="true"
+        class="globe icon"
+      />
+      <span
+        class="userFilter"
+      >
+        g
+      </span>
+    </div>
+  </div>
 </div>
 `;

package/src/messages/en.js

@@ -63,6 +63,7 @@ export default {
   "search.saveFilterForm.filter_name": "Name",
   "search.save_filter.cancel": "Cancel",
   "search.save_filter.save": "Save",
+  "search.save_filter.save_global": "Save for all users",
   "search.filters.actions.delete.confirmation.header": "Delete custom filter",
   "search.filters.actions.delete.confirmation.content":
     "Are you sure that you want to delete permanently the filter {name}?",

package/src/messages/es.js

@@ -65,6 +65,7 @@ export default {
   "search.saveFilterForm.filter_name": "Nombre",
   "search.save_filter.cancel": "Cancelar",
   "search.save_filter.save": "Guardar",
+  "search.save_filter.save_global": "Guardar para todos los usuarios",
   "search.filters.actions.delete.confirmation.header":
     "Eliminar filtro personalizado",
   "search.filters.actions.delete.confirmation.content":