@truedat/core 4.53.1 → 4.53.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [4.53.3] 2022-10-07
+
+### Added
+
+- [TD-5195] Support for global user filters
+
+## [4.53.2] 2022-10-07
+
+### Added
+
+- [TD-5226] `useOperators` hook to load operators using GraphQL `functions`
+  query
+
 ## [4.52.4] 2022-09-30
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.53.1",
+  "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.1",
+    "@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": "aec23f8f32a131dfa84620ec6e14c31916118d44"
+  "gitHead": "d4f6cc40692e4d1e3f13e42774938765fe49c3b7"
 }

package/src/api/queries.js

@@ -32,3 +32,20 @@ export const TEMPLATES_QUERY = gql`
     }
   }
 `;
+
+export const FUNCTIONS_QUERY = gql`
+  query Functions {
+    functions {
+      id
+      name
+      group
+      returnType
+      scope
+      args {
+        name
+        type
+        values
+      }
+    }
+  }
+`;

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/hooks/index.js

@@ -3,3 +3,4 @@ export * from "./useActiveRoutes";
 export * from "./useAuthorized";
 export * from "./usePath";
 export * from "./useOnScreen";
+export * from "./useOperators";

package/src/hooks/useOperators.js

@@ -0,0 +1,10 @@
+import { useQuery } from "@apollo/client";
+import { FUNCTIONS_QUERY } from "../api/queries";
+import { transform } from "../services/operators";
+
+export const useOperators = () => {
+  const { loading, error, data } = useQuery(FUNCTIONS_QUERY);
+  return { loading, error, data: data ? transform(data) : [] };
+};
+
+export default useOperators;

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":

package/src/services/__tests__/operators.spec.js

@@ -0,0 +1,215 @@
+import { toItem, transform } from "../operators";
+
+describe("services: operators toItem should transform to existing operator/modifier format", () => {
+  const id = "123";
+
+  it("simple operator", () => {
+    expect(
+      toItem({
+        id,
+        name: "name",
+        returnType: "boolean",
+        args: [{ type: "xyz" }],
+      })
+    ).toEqual({ id, category: "xyz", name: "name", returnType: "boolean" });
+  });
+
+  it("includes scope and group", () => {
+    expect(
+      toItem({
+        id,
+        name: "name",
+        group: "group",
+        scope: "scope",
+        returnType: "boolean",
+        args: [{ type: "any" }],
+      })
+    ).toEqual({
+      id,
+      category: "any",
+      name: "name",
+      group: "group",
+      scope: "scope",
+      returnType: "boolean",
+    });
+  });
+
+  it("maps as a modifier with params if returnType is not boolean", () => {
+    expect(
+      toItem({
+        id,
+        name: "name",
+        returnType: "string",
+        args: [
+          { type: "cat" },
+          { name: "start", type: "number" },
+          { name: "end", type: "number" },
+        ],
+      })
+    ).toEqual({
+      id,
+      category: "cat",
+      name: "name",
+      type: "string",
+      params: [
+        { name: "start", type: "number" },
+        { name: "end", type: "number" },
+      ],
+      returnType: "string",
+    });
+  });
+
+  it("maps arity and values", () => {
+    expect(
+      toItem({
+        id,
+        name: "variation_on_count",
+        scope: "validation",
+        returnType: "boolean",
+        args: [
+          { type: "date" },
+          {
+            type: "string",
+            values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+          },
+          {
+            type: "string",
+            values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+          },
+        ],
+      })
+    ).toEqual({
+      id,
+      category: "date",
+      name: "variation_on_count",
+      value_type: "string",
+      fixed_values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+      scope: "validation",
+      arity: 2,
+      returnType: "boolean",
+    });
+  });
+
+  it("maps value_type_filter if type is 'ref'", () => {
+    expect(
+      toItem({
+        id,
+        name: "references",
+        scope: "validation_filter",
+        group: "references",
+        returnType: "boolean",
+        args: [{ type: "any" }, { type: "ref" }],
+      })
+    ).toEqual({
+      id,
+      category: "any",
+      group: "references",
+      name: "references",
+      value_type: "field",
+      value_type_filter: "any",
+      scope: "validation",
+      population: true,
+      returnType: "boolean",
+    });
+  });
+});
+
+describe("services: operators transform", () => {
+  test("transforms items and groups by category", () => {
+    const data = {
+      functions: [
+        {
+          id: "1",
+          name: "name",
+          returnType: "boolean",
+          args: [{ type: "xyz" }],
+        },
+        {
+          id: "2",
+          name: "name",
+          group: "group",
+          scope: "scope",
+          returnType: "boolean",
+          args: [{ type: "any" }],
+        },
+        {
+          id: "3",
+          name: "name",
+          returnType: "string",
+          args: [
+            { type: "cat" },
+            { name: "start", type: "number" },
+            { name: "end", type: "number" },
+          ],
+        },
+        {
+          id: "4",
+          name: "variation_on_count",
+          scope: "validation",
+          returnType: "boolean",
+          args: [
+            { type: "date" },
+            {
+              type: "string",
+              values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+            },
+            {
+              type: "string",
+              values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+            },
+          ],
+        },
+        {
+          id: "5",
+          name: "references",
+          scope: "validation_filter",
+          group: "references",
+          returnType: "boolean",
+          args: [{ type: "any" }, { type: "ref" }],
+        },
+      ],
+    };
+    expect(transform(data)).toEqual({
+      xyz: { operators: [{ id: "1", name: "name" }] },
+      any: {
+        operators: [
+          { id: "2", name: "name", group: "group", scope: "scope" },
+          {
+            id: "5",
+            name: "references",
+            group: "references",
+            scope: "validation",
+            value_type: "field",
+            value_type_filter: "any",
+            population: true,
+          },
+        ],
+      },
+      cat: {
+        modifiers: [
+          {
+            id: "3",
+            name: "name",
+            type: "string",
+            params: [
+              { name: "start", type: "number" },
+              { name: "end", type: "number" },
+            ],
+          },
+        ],
+      },
+      date: {
+        operators: [
+          {
+            arity: 2,
+            id: "4",
+            name: "variation_on_count",
+            scope: "validation",
+            value_type: "string",
+            fixed_values: ["D-0", "D-1", "M-0", "M-1", "M-2", "Y-0", "Y-1"],
+          },
+        ],
+      },
+    });
+  });
+});

package/src/services/operators.js

@@ -0,0 +1,54 @@
+import _ from "lodash/fp";
+
+export const toItem = ({
+  name,
+  group,
+  returnType,
+  scope,
+  id,
+  args: [{ type: category }, ...args],
+}) => {
+  const arity = _.size(args);
+  const arg1 = _.head(args);
+  const type = arg1?.type;
+  const values = arg1?.values;
+  const params =
+    _.isEmpty(args) || returnType === "boolean"
+      ? null
+      : _.map(_.pick(["name", "type"]))(args);
+  const value_type =
+    returnType === "boolean" ? (type === "ref" ? "field" : type) : null;
+  return _.pickBy(_.identity)({
+    arity: returnType === "boolean" && arity > 1 ? arity : null,
+    category,
+    name,
+    group: group,
+    scope: scope === "validation_filter" ? "validation" : scope || null,
+    id,
+    type: returnType === "boolean" ? null : returnType,
+    value_type,
+    value_type_filter: type === "ref" ? "any" : null,
+    population: scope === "validation_filter",
+    fixed_values: values,
+    returnType,
+    params,
+  });
+};
+
+// Transfrom functions from GraphQL API to old model (operators + modifiers)
+export const transform = _.flow(
+  _.propOr([], "functions"),
+  _.map(toItem),
+  _.flow(
+    _.groupBy("category"),
+    _.mapValues(_.map(_.omit(["category"]))),
+    _.mapValues(
+      _.flow(
+        _.groupBy(({ returnType }) =>
+          returnType === "boolean" ? "operators" : "modifiers"
+        ),
+        _.mapValues(_.map(_.omit(["returnType"])))
+      )
+    )
+  )
+);