@truedat/audit 4.43.2 → 4.43.3

package/src/components/SubscriptionForm.js

@@ -2,10 +2,18 @@ import _ from "lodash/fp";
 import React, { Suspense, useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, useWatch, Controller } from "react-hook-form";
 import { Button, Form, Radio, Icon } from "semantic-ui-react";
 import { HistoryBackButton } from "@truedat/core/components";
-import { events as subscriptionEvents, icons } from "../subscriptionConstants";
+import {
+  CONCEPT_EVENTS,
+  DEFAULT_ICON,
+  EVENTS_BY_TYPE,
+  RESOURCE_TYPE_ICONS,
+  STATUSES_BY_EVENT,
+  SUBSCRIBER_TYPE_ICONS,
+  isSubset,
+} from "../subscriptionConstants";
 import ContentFilters from "./ContentFilters";
 
 const ConceptSelector = React.lazy(() =>
@@ -57,12 +65,38 @@ const DEFAULT_VALUES = {
   },
 };
 
+const notEmpty = _.negate(_.isEmpty);
+
 const validFilters = (filters) =>
   _.conformsTo({
     template: _.conformsTo({ id: _.isNumber }),
     content: _.conformsTo({ name: _.isString, value: _.isString }),
   })(filters);
 
+const subscriberIcon = (type) =>
+  _.getOr(DEFAULT_ICON, type)(SUBSCRIBER_TYPE_ICONS);
+const resourceIcon = (type) => _.getOr(DEFAULT_ICON, type)(RESOURCE_TYPE_ICONS);
+const withoutFilters = ({ filtersEnabled, ...data }) =>
+  filtersEnabled &&
+  isSubset(data?.scope?.events, CONCEPT_EVENTS) &&
+  _.has("scope.filters")(data)
+    ? data
+    : _.set("scope.filters", null)(data);
+const withResourceName = (resource) => (data) =>
+  resource &&
+  _.includes(data?.scope?.resource_type)(["data_structure", "source"])
+    ? {
+        ...data,
+        scope: {
+          ...data.scope,
+          resource_name: resource.name,
+          domain_id: resource.domain_id,
+        },
+      }
+    : data;
+const doPayload = (data, resource) =>
+  _.flow(withoutFilters, withResourceName(resource))(data);
+
 export const SubscriptionForm = ({
   onSubmit,
   subscription = {},
@@ -72,85 +106,69 @@ export const SubscriptionForm = ({
   const [selectedConceptType, setSelectedConceptType] = useState();
   const [resource, setResource] = useState();
 
-  const { SUBSCRIBER_TYPE_ICONS, DEFAULT_ICON, RESOURCE_TYPE_ICONS } = icons;
-
-  const { handleSubmit, control, formState, setValue, watch } = useForm({
+  const { handleSubmit, control, formState, setValue } = useForm({
     mode: "all",
     defaultValues: {
       ...DEFAULT_VALUES,
       ...subscription,
-      selectFilters: validFilters(_.path("scope.filters")(subscription)),
+      filtersEnabled: validFilters(subscription?.scope?.filters),
     },
   });
+  const { isDirty, errors } = formState;
 
-  const subscriberIcon = (type) =>
-    _.getOr(DEFAULT_ICON, type)(SUBSCRIBER_TYPE_ICONS);
-  const resourceIcon = (type) =>
-    _.getOr(DEFAULT_ICON, type)(RESOURCE_TYPE_ICONS);
-  const withoutFilters = (state) =>
-    _.negate(_.has("scope.filters"))(state)
-      ? _.set("scope.filters", null)(state)
-      : state;
-  const withResourceName = (state) =>
-    _.includes(_.get("scope.resource_type")(state), [
-      "data_structure",
-      "source",
-    ]) && resource
-      ? {
-          ...state,
-          scope: {
-            ...state.scope,
-            resource_name: resource.name,
-            domain_id: resource.domain_id,
-          },
-        }
-      : state;
-  const doPayload = (state) =>
-    _.flow(_.omit(["selectFilters"]), withoutFilters, withResourceName)(state);
-
-  const isEditForm = !!_.get("id")(subscription);
-
-  const subscriberType = watch("subscriber.type");
-  const resourceType = watch("scope.resource_type");
-  const events = watch("scope.events");
-  const selectFilters = watch("selectFilters");
+  const [subscriberType, resourceType, events] = useWatch({
+    control,
+    name: ["subscriber.type", "scope.resource_type", "scope.events"],
+  });
+  const fields = useWatch({ control });
 
+  const isEditForm = !!subscription?.id;
   const isEmptyEvents = _.isEmpty(events);
   const isRuleEvent = _.isEqual(["rule_result_created"])(events);
-  const isConceptEvent =
-    _.negate(_.isEmpty)(events) &&
-    _.flow(
-      _.prop("concept"),
-      _.map("event"),
-      _.difference(events),
-      _.isEmpty
-    )(subscriptionEvents);
-
   const eventsForType = _.flow(
     _.getOr([], resourceType),
     _.filter(
-      ({ event }) =>
+      (event) =>
         isEmptyEvents ||
         (isRuleEvent
           ? event === "rule_result_created"
           : event !== "rule_result_created")
     )
-  )(subscriptionEvents);
+  )(EVENTS_BY_TYPE);
 
   const statuses = _.flow(
-    _.filter(({ event }) => _.includes(event)(events)),
-    _.map("statuses"),
-    _.reject(_.isNil),
-    _.flatten,
-    _.uniq
-  )(eventsForType);
+    _.pick(events),
+    _.values,
+    _.flatten
+  )(STATUSES_BY_EVENT);
 
-  const doHandleSubmit = handleSubmit((formState) => {
-    const payload = doPayload(formState);
+  const doHandleSubmit = handleSubmit((data) => {
+    const payload = doPayload(data, resource);
     onSubmit(payload);
   });
 
-  const { isDirty, isValid } = formState;
+  const onChangeSubscriberType =
+    (onChange) =>
+    (_e, { value }) => {
+      if (!_.endsWith(value, "role") && !_.endsWith(subscriberType, "role")) {
+        setValue("subscriber.identifier", "", { shouldDirty: true });
+      }
+      if (value === "taxonomy_role" && resourceType !== "domains") {
+        setValue("scope.resource_type", "domains", { shouldDirty: true });
+      }
+
+      onChange(value);
+    };
+
+  const onChangeResourceType =
+    (onChange) =>
+    (_e, { value }) => {
+      setSelectedConceptType(null);
+      setResource(null);
+      onChange(value);
+    };
+
+  const disabled = isLoading || !isDirty || notEmpty(errors);
 
   return (
     <Suspense fallback={null}>
@@ -159,7 +177,7 @@ export const SubscriptionForm = ({
           control={control}
           name="subscriber.type"
           rules={{ required: true }}
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscription-form-radio-group" required>
               <label>{formatMessage({ id: "subscriptions.subscriber" })}</label>
               {SUBSCRIBER_TYPES.map((type, idx) => (
@@ -179,15 +197,7 @@ export const SubscriptionForm = ({
                   name={type}
                   value={type}
                   checked={value == type}
-                  onChange={(_e, { value }) => {
-                    if (value === "taxonomy_role" && resourceType !== "domains")
-                      setValue("scope.resource_type", "domains", {
-                        shouldValidate: true,
-                        shouldDirty: true,
-                      });
-
-                    onChange(value);
-                  }}
+                  onChange={onChangeSubscriberType(onChange)}
                 />
               ))}
             </Form.Field>
@@ -198,10 +208,13 @@ export const SubscriptionForm = ({
             control={control}
             name="subscriber.identifier"
             rules={{ required: true }}
-            render={({ onBlur, onChange, value }, { invalid }) => (
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
               <RoleSelector
                 disabled={isEditForm}
-                error={invalid}
+                error={!!error}
                 onBlur={onBlur}
                 onChange={(_e, { value }) => onChange(value)}
                 value={value}
@@ -213,14 +226,18 @@ export const SubscriptionForm = ({
           <Controller
             control={control}
             name="subscriber.identifier"
+            shouldUnregister
             rules={{
               required: true,
               pattern: { value: /^\S+@\S+\.\S+$/ },
             }}
-            render={({ onBlur, onChange, value }, { invalid }) => (
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
               <Form.Input
                 disabled={isEditForm}
-                error={invalid}
+                error={!!error}
                 onBlur={onBlur}
                 onChange={(_e, { value }) => onChange(value)}
                 value={value}
@@ -234,10 +251,13 @@ export const SubscriptionForm = ({
             control={control}
             name="subscriber.identifier"
             rules={{ required: true }}
-            render={({ onBlur, onChange, value }, { invalid }) => (
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
               <UserSelector
                 disabled={isEditForm}
-                error={invalid}
+                error={!!error}
                 onBlur={onBlur}
                 onChange={(_e, { value }) => onChange(value)}
                 value={value}
@@ -249,7 +269,7 @@ export const SubscriptionForm = ({
           control={control}
           name="scope.resource_type"
           rules={{ required: true }}
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscription-form-radio-group" required>
               <label>{formatMessage({ id: "subscriptions.resource" })}</label>
               {RESOURCE_TYPES.map((type, idx) => (
@@ -276,11 +296,7 @@ export const SubscriptionForm = ({
                   }
                   value={type}
                   checked={value == type}
-                  onChange={(_e, { value }) => {
-                    setSelectedConceptType(null);
-                    setResource(null);
-                    onChange(value);
-                  }}
+                  onChange={onChangeResourceType(onChange)}
                 />
               ))}
             </Form.Field>
@@ -294,7 +310,7 @@ export const SubscriptionForm = ({
             control={control}
             name="scope.resource_id"
             rules={{ required: true }}
-            render={({ onChange, value }) => (
+            render={({ field: { onChange, value } }) => (
               <ConceptSelector
                 showTitle={false}
                 handleConceptSelected={(concept) => {
@@ -311,7 +327,7 @@ export const SubscriptionForm = ({
             control={control}
             name="scope.resource_id"
             rules={{ required: true }}
-            render={({ onChange, value }) => (
+            render={({ field: { onChange, value } }) => (
               <DomainDropdownSelector
                 disabled={isEditForm}
                 value={value}
@@ -326,7 +342,7 @@ export const SubscriptionForm = ({
             control={control}
             name="scope.resource_id"
             rules={{ required: true }}
-            render={({ onChange }) => (
+            render={({ field: { onChange } }) => (
               <StructureSelector
                 onSelect={({ id, name, domain_id }) => {
                   onChange(id);
@@ -341,7 +357,7 @@ export const SubscriptionForm = ({
             control={control}
             name="scope.resource_id"
             rules={{ required: true }}
-            render={({ onChange, value }) => (
+            render={({ field: { onChange, value } }) => (
               <SourceSelector
                 disabled={isEditForm}
                 value={value}
@@ -360,9 +376,12 @@ export const SubscriptionForm = ({
           control={control}
           name="periodicity"
           rules={{ required: true }}
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.Dropdown
-              error={invalid}
+              error={!!error}
               selection
               clearable
               label={formatMessage({ id: "subscriptions.periodicity" })}
@@ -388,13 +407,14 @@ export const SubscriptionForm = ({
           name="scope.events"
           rules={{
             required: true,
-            validate: {
-              notEmpty: _.negate(_.isEmpty),
-            },
+            validate: { notEmpty },
           }}
-          render={({ onBlur, onChange, value }, { invalid }) => (
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
             <Form.Dropdown
-              error={invalid}
+              error={!!error}
               selection
               clearable
               multiple
@@ -402,57 +422,37 @@ export const SubscriptionForm = ({
               label={formatMessage({ id: "subscriptions.events" })}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              placeholder={formatMessage({
-                id: "subscriptions.events",
-              })}
+              placeholder={formatMessage({ id: "subscriptions.events" })}
               value={value}
               required
-              options={eventsForType.map(({ event }, key) => ({
+              options={eventsForType.map((event, key) => ({
                 key,
                 value: event,
-                text: formatMessage({
-                  id: `subscriptions.events.${event}`,
-                }),
+                text: formatMessage({ id: `subscriptions.events.${event}` }),
               }))}
             />
           )}
         />
-        {isConceptEvent && (
-          <Controller
-            control={control}
-            name="selectFilters"
-            render={({ onChange, value }) => (
-              <Form.Radio
-                checked={value}
-                onChange={(_e, { checked }) => onChange(checked)}
-                label={formatMessage({ id: "subscriptions.selectFilters" })}
-                toggle
-              />
-            )}
-          />
-        )}
-        {selectFilters && isConceptEvent && (
-          <ContentFilters
-            control={control}
-            setValue={setValue}
-            watch={watch}
-            conceptType={selectedConceptType}
-          />
-        )}
-        {!_.isEmpty(statuses) && (
+        <ContentFilters
+          control={control}
+          setValue={setValue}
+          conceptType={selectedConceptType}
+        />
+        {_.isEmpty(statuses) ? null : (
           <Controller
             control={control}
             name="scope.status"
             rules={{
               required: true,
-              validate: {
-                notEmpty: _.negate(_.isEmpty),
-              },
+              validate: { notEmpty },
             }}
-            render={({ onBlur, onChange, value }, { invalid }) => (
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
               <Form.Dropdown
                 onBlur={onBlur}
-                error={invalid}
+                error={!!error}
                 label={formatMessage({ id: "subscriptions.status" })}
                 selection
                 multiple
@@ -460,9 +460,7 @@ export const SubscriptionForm = ({
                 required
                 onChange={(_e, { value }) => onChange(value)}
                 value={value}
-                placeholder={formatMessage({
-                  id: "subscriptions.status",
-                })}
+                placeholder={formatMessage({ id: "subscriptions.status" })}
                 options={statuses.map(({ name, color }, key) => ({
                   key,
                   value: name,
@@ -485,7 +483,7 @@ export const SubscriptionForm = ({
             primary
             type="submit"
             loading={isLoading}
-            disabled={isLoading || !isDirty || !isValid}
+            disabled={disabled}
             content={formatMessage({ id: "actions.submit" })}
           />
         </div>

package/src/components/Subscriptions.js

@@ -15,7 +15,11 @@ import {
   Label,
   Checkbox,
 } from "semantic-ui-react";
-import { icons } from "../subscriptionConstants";
+import {
+  DEFAULT_ICON,
+  RESOURCE_TYPE_ICONS,
+  SUBSCRIBER_TYPE_ICONS,
+} from "../subscriptionConstants";
 
 const SUBSCRIBER_TYPES = ["role", "email", "user", "taxonomy_role"];
 const RESOURCE_TYPES = [
@@ -58,7 +62,6 @@ export const Subscriptions = () => {
   const { subscriptions, subscriptionsLoading, users } = useSelector(
     _.pick(["subscriptions", "subscriptionsLoading", "users"])
   );
-  const { SUBSCRIBER_TYPE_ICONS, DEFAULT_ICON, RESOURCE_TYPE_ICONS } = icons;
   if (subscriptionsLoading) return null;
 
   const usersById = _.keyBy("id")(users);
@@ -93,7 +96,7 @@ export const Subscriptions = () => {
         <Controller
           control={control}
           name="subscriberTypes"
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscriptions-checkbox-filters">
               <label>
                 <FormattedMessage id="subscriptions.subscriber" />
@@ -126,7 +129,7 @@ export const Subscriptions = () => {
         <Controller
           control={control}
           name="resourceTypes"
-          render={({ onBlur, onChange, value }) => (
+          render={({ field: { onBlur, onChange, value } }) => (
             <Form.Field className="subscriptions-checkbox-filters">
               <label>
                 <FormattedMessage id="subscriptions.resource" />