@truedat/audit 4.43.1 → 4.43.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.43.3] 2022-05-04
+
+### Changed
+
+- [TD-3936] Updated `react-hook-form`, refactored `SubscriptionForm`
+
 ## [4.38.4] 2022-02-20
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/audit",
-  "version": "4.43.1",
+  "version": "4.43.4",
   "description": "Truedat Web Audit Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.43.1",
+    "@truedat/test": "4.43.4",
     "babel-jest": "^27.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -84,13 +84,13 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.43.1",
-    "@truedat/core": "4.43.1",
+    "@truedat/auth": "4.43.4",
+    "@truedat/core": "4.43.4",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
     "react-color": "^2.17.3",
-    "react-hook-form": "^6.15.8",
+    "react-hook-form": "^7.30.0",
     "react-intl": "^5.20.10",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
@@ -105,5 +105,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "7ea6f37972e3a70706913ada33751b955313801f"
+  "gitHead": "7f0463a65a0b8137f1598487bf26fefa52e5fa59"
 }

package/src/components/ContentFilters.js

@@ -1,10 +1,11 @@
 import _ from "lodash/fp";
 import React, { useEffect } from "react";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import PropTypes from "prop-types";
 import { Form } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
+import { CONCEPT_EVENTS, isSubset } from "../subscriptionConstants";
 
 const toTemplateOptions = (templates) =>
   _.flow(
@@ -49,10 +50,18 @@ export const ContentFilters = ({
   conceptType,
   control,
   setValue,
-  watch,
   templates,
 }) => {
   const { formatMessage } = useIntl();
+  const [templateId, filterName, filtersEnabled, events] = useWatch({
+    control,
+    name: [
+      "scope.filters.template.id",
+      "scope.filters.content.name",
+      "filtersEnabled",
+      "scope.events",
+    ],
+  });
 
   useEffect(() => {
     if (conceptType) {
@@ -63,9 +72,6 @@ export const ContentFilters = ({
     }
   }, [conceptType, setValue, templates]);
 
-  const templateId = watch("scope.filters.template.id");
-  const filterName = watch("scope.filters.content.name");
-
   const setDefaultCondition = () => {
     setValue("scope.filters.content.name", null, {
       shouldValidate: true,
@@ -86,124 +92,129 @@ export const ContentFilters = ({
   const fieldOptions = toFieldOptions(fields);
   const valueOptions = toValueOptions(field);
 
-  return (
+  return isSubset(events, CONCEPT_EVENTS) ? (
     <>
       <Controller
         control={control}
-        name="scope.filters.template.id"
-        defaultValue={null}
-        render={({ onChange }) => (
-          <Form.Dropdown
-            clearable
-            disabled={
-              _.isEmpty(templateOptions) || _.negate(_.isNil)(conceptType)
-            }
-            label={formatMessage({
-              id: "subscriptions.template.label",
-            })}
-            placeholder={formatMessage({
-              id: "subscriptions.template.placeholder",
-            })}
-            fluid
-            options={templateOptions}
-            onChange={(e, { value }) => {
-              setDefaultCondition();
-              value === "" ? onChange(null) : onChange(value);
-            }}
-            search
-            selection
-            value={templateId}
+        name="filtersEnabled"
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Radio
+            checked={value}
+            onBlur={onBlur}
+            onChange={(_e, { checked }) => onChange(checked)}
+            label={formatMessage({ id: "subscriptions.selectFilters" })}
+            toggle
           />
         )}
       />
-      <Form.Group widths="equal">
-        <Controller
-          control={control}
-          defaultValue={null}
-          name="scope.filters.content.name"
-          rules={{
-            validate: {
-              requiredOnTemplate: (value) =>
-                _.negate(_.isNil)(templateId) && _.negate(_.isNil)(value),
-            },
-          }}
-          render={({ onChange, value }) =>
-            templateId ? (
+      {filtersEnabled ? (
+        <>
+          <Controller
+            control={control}
+            name="scope.filters.template.id"
+            defaultValue={null}
+            render={({ field: { onChange } }) => (
               <Form.Dropdown
                 clearable
-                disabled={_.isEmpty(fieldOptions)}
-                label={formatMessage({
-                  id: "subscriptions.template.field",
-                })}
+                disabled={_.isEmpty(templateOptions) || !_.isNil(conceptType)}
+                label={formatMessage({ id: "subscriptions.template.label" })}
                 placeholder={formatMessage({
-                  id: "subscriptions.template.field.placeholder",
+                  id: "subscriptions.template.placeholder",
                 })}
                 fluid
-                options={fieldOptions}
-                onChange={(_e, { value }) => {
-                  setValue("scope.filters.content.value", null, {
-                    shouldValidate: true,
-                    shouldDirty: true,
-                  });
+                options={templateOptions}
+                onChange={(e, { value }) => {
+                  setDefaultCondition();
                   value === "" ? onChange(null) : onChange(value);
                 }}
-                required={_.negate(_.isNil)(templateId)}
                 search
                 selection
-                value={value}
+                value={templateId}
               />
-            ) : null
-          }
-        />
-        <Controller
-          control={control}
-          defaultValue={null}
-          name="scope.filters.content.value"
-          rules={{
-            validate: {
-              requiredOnTemplate: (value) =>
-                _.negate(_.isNil)(templateId) && _.negate(_.isNil)(value),
-            },
-          }}
-          render={({ onChange, value }) =>
-            templateId ? (
-              <Form.Dropdown
-                clearable
-                required={_.negate(_.isNil)(templateId)}
-                disabled={_.isEmpty(valueOptions)}
-                label={formatMessage({
-                  id: "subscriptions.template.field.value",
-                })}
-                placeholder={formatMessage({
-                  id: "subscriptions.template.field.value.placeholder",
-                })}
-                fluid
-                options={valueOptions}
-                onChange={(_e, { value }) =>
-                  value === "" ? onChange(null) : onChange(value)
-                }
-                search
-                selection
-                value={value}
-              />
-            ) : null
-          }
-        />
-      </Form.Group>
+            )}
+          />
+          <Form.Group widths="equal">
+            <Controller
+              control={control}
+              name="scope.filters.content.name"
+              defaultValue={null}
+              rules={{
+                validate: {
+                  requiredOnTemplate: (value) =>
+                    !_.isNil(templateId) && !_.isNil(value),
+                },
+              }}
+              render={({ field: { onChange, value } }) => (
+                <Form.Dropdown
+                  clearable
+                  disabled={!templateId || _.isEmpty(fieldOptions)}
+                  label={formatMessage({
+                    id: "subscriptions.template.field",
+                  })}
+                  placeholder={formatMessage({
+                    id: "subscriptions.template.field.placeholder",
+                  })}
+                  fluid
+                  options={fieldOptions}
+                  onChange={(_e, { value }) => {
+                    setValue("scope.filters.content.value", null, {
+                      shouldValidate: true,
+                      shouldDirty: true,
+                    });
+                    value === "" ? onChange(null) : onChange(value);
+                  }}
+                  required={!!templateId}
+                  search
+                  selection
+                  value={value}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="scope.filters.content.value"
+              defaultValue={null}
+              rules={{
+                validate: {
+                  requiredOnTemplate: (value) => !!templateId && !!value,
+                },
+              }}
+              render={({ field: { onChange, value } }) => (
+                <Form.Dropdown
+                  clearable
+                  required={!!templateId}
+                  disabled={!templateId || _.isEmpty(valueOptions)}
+                  label={formatMessage({
+                    id: "subscriptions.template.field.value",
+                  })}
+                  placeholder={formatMessage({
+                    id: "subscriptions.template.field.value.placeholder",
+                  })}
+                  fluid
+                  options={valueOptions}
+                  onChange={(_e, { value }) =>
+                    value === "" ? onChange(null) : onChange(value)
+                  }
+                  search
+                  selection
+                  value={value}
+                />
+              )}
+            />
+          </Form.Group>
+        </>
+      ) : null}
     </>
-  );
+  ) : null;
 };
 
 ContentFilters.propTypes = {
   conceptType: PropTypes.string,
   control: PropTypes.object.isRequired,
   setValue: PropTypes.func.isRequired,
-  watch: PropTypes.func.isRequired,
   templates: PropTypes.array.isRequired,
 };
 
-const mapStateToProps = ({ templates }) => ({
-  templates,
-});
+const mapStateToProps = ({ templates }) => ({ templates });
 
 export default connect(mapStateToProps)(ContentFilters);