@truedat/audit 7.5.9 → 7.5.11

package/src/components/SubscriptionForm.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { Suspense, useState, useEffect } from "react";
+import { lazy, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useForm, useWatch, Controller } from "react-hook-form";
@@ -16,24 +16,24 @@ import {
 } from "../subscriptionConstants";
 import ContentFilters from "./ContentFilters";
 
-const ConceptSelector = React.lazy(() =>
-  import("@truedat/bg/concepts/relations/components/ConceptSelector")
+const ConceptSelector = lazy(
+  () => import("@truedat/bg/concepts/relations/components/ConceptSelector")
 );
 
-const UserSelector = React.lazy(() =>
-  import("@truedat/auth/users/components/UserSelector")
+const UserSelector = lazy(
+  () => import("@truedat/auth/users/components/UserSelector")
 );
 
-const RoleSelector = React.lazy(() =>
-  import("@truedat/auth/roles/components/RoleSelector")
+const RoleSelector = lazy(
+  () => import("@truedat/auth/roles/components/RoleSelector")
 );
 
-const StructureSelector = React.lazy(() =>
-  import("@truedat/dd/components/StructureSelector")
+const StructureSelector = lazy(
+  () => import("@truedat/dd/components/StructureSelector")
 );
 
-const SourceSelector = React.lazy(() =>
-  import("@truedat/cx/sources/components/SourceSelector")
+const SourceSelector = lazy(
+  () => import("@truedat/cx/sources/components/SourceSelector")
 );
 
 const SUBSCRIBER_TYPES = ["role", "taxonomy_role", "email", "user"];
@@ -132,8 +132,8 @@ export const SubscriptionForm = ({
       !_.isEmpty(_.intersection(exclusiveEvents)(events))
         ? events
         : !_.isEmpty(events)
-        ? _.difference(eventsbytype)(exclusiveEvents)
-        : eventsbytype
+          ? _.difference(eventsbytype)(exclusiveEvents)
+          : eventsbytype
     );
   }, [resourceType, events]);
 
@@ -176,249 +176,287 @@ export const SubscriptionForm = ({
   const disabled = isLoading || !isDirty || notEmpty(errors);
 
   return (
-    <Suspense fallback={null}>
-      <Form onSubmit={doHandleSubmit}>
-        <Controller
-          control={control}
-          name="subscriber.type"
-          rules={{ required: true }}
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Field className="subscription-form-radio-group" required>
-              <label>
-                <FormattedMessage id="subscriptions.subscriber" />
-              </label>
-              {SUBSCRIBER_TYPES.map((type, idx) => (
-                <Radio
-                  role="radio"
-                  onBlur={onBlur}
-                  key={idx}
-                  disabled={isEditForm}
-                  label={
-                    <label>
-                      <Icon name={subscriberIcon(type)} />
-                      <FormattedMessage
-                        id={`subscription.subscriber_type.${type}`}
-                        defaultMessage={type}
-                      />
-                    </label>
-                  }
-                  name={type}
-                  value={type}
-                  checked={value == type}
-                  onChange={onChangeSubscriberType(onChange)}
-                />
-              ))}
-            </Form.Field>
-          )}
-        />
-        {_.includes(subscriberType)(["role", "taxonomy_role"]) && (
-          <Controller
-            control={control}
-            name="subscriber.identifier"
-            rules={{ required: true }}
-            render={({
-              field: { onBlur, onChange, value },
-              fieldState: { error },
-            }) => (
-              <RoleSelector
-                disabled={isEditForm}
-                error={!!error}
+    <Form onSubmit={doHandleSubmit}>
+      <Controller
+        control={control}
+        name="subscriber.type"
+        rules={{ required: true }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Field className="subscription-form-radio-group" required>
+            <label>
+              <FormattedMessage id="subscriptions.subscriber" />
+            </label>
+            {SUBSCRIBER_TYPES.map((type, idx) => (
+              <Radio
+                role="radio"
                 onBlur={onBlur}
-                onChange={(_e, { value }) => onChange(value)}
-                value={value}
-              />
-            )}
-          />
-        )}
-        {subscriberType === "email" && (
-          <Controller
-            control={control}
-            name="subscriber.identifier"
-            shouldUnregister
-            rules={{
-              required: true,
-              pattern: { value: /^\S+@\S+\.\S+$/ },
-            }}
-            render={({
-              field: { onBlur, onChange, value },
-              fieldState: { error },
-            }) => (
-              <Form.Input
-                disabled={isEditForm}
-                error={!!error}
-                onBlur={onBlur}
-                onChange={(_e, { value }) => onChange(value)}
-                value={value}
-                data-testid="email-input"
-              />
-            )}
-          />
-        )}
-        {subscriberType === "user" && (
-          <Controller
-            control={control}
-            name="subscriber.identifier"
-            rules={{ required: true }}
-            render={({
-              field: { onBlur, onChange, value },
-              fieldState: { error },
-            }) => (
-              <UserSelector
+                key={idx}
                 disabled={isEditForm}
-                error={!!error}
-                onBlur={onBlur}
-                onChange={(_e, { value }) => onChange(value)}
-                value={value}
+                label={
+                  <label>
+                    <Icon name={subscriberIcon(type)} />
+                    <FormattedMessage
+                      id={`subscription.subscriber_type.${type}`}
+                      defaultMessage={type}
+                    />
+                  </label>
+                }
+                name={type}
+                value={type}
+                checked={value == type}
+                onChange={onChangeSubscriberType(onChange)}
               />
-            )}
-          />
+            ))}
+          </Form.Field>
         )}
+      />
+      {_.includes(subscriberType)(["role", "taxonomy_role"]) && (
         <Controller
           control={control}
-          name="scope.resource_type"
+          name="subscriber.identifier"
           rules={{ required: true }}
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Field className="subscription-form-radio-group" required>
-              <label>
-                <FormattedMessage id="subscriptions.resource" />
-              </label>
-              {RESOURCE_TYPES.map((type, idx) => (
-                <Radio
-                  role="radio"
-                  disabled={
-                    isEditForm ||
-                    type == "rule" ||
-                    (subscriberType === "taxonomy_role" &&
-                      type !== "domains") ||
-                    ((subscriberType === "taxonomy_role" ||
-                      subscriberType === "role") &&
-                      type === "source")
-                  }
-                  onBlur={onBlur}
-                  key={idx}
-                  label={
-                    <label>
-                      <Icon name={resourceIcon(type)} />
-                      <FormattedMessage
-                        id={`subscriptions.resource.type.${type}`}
-                        defaultMessage={type}
-                      />
-                    </label>
-                  }
-                  value={type}
-                  checked={value == type}
-                  onChange={onChangeResourceType(onChange)}
-                />
-              ))}
-            </Form.Field>
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <RoleSelector
+              disabled={isEditForm}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
           )}
         />
-        {isEditForm && (
-          <Form.Input disabled value={_.get("resource.name")(subscription)} />
-        )}
-        {resourceType === "concept" && !isEditForm && (
-          <Controller
-            control={control}
-            name="scope.resource_id"
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <ConceptSelector
-                showTitle={false}
-                handleConceptSelected={(concept) => {
-                  setSelectedConceptType(_.prop("type")(concept));
-                  onChange(concept.business_concept_id);
-                }}
-                businessConceptId={value}
-                defaultFilters={defaultFilters}
-              />
-            )}
-          />
-        )}
-        {_.includes(resourceType)(["domains", "domain"]) && !isEditForm && (
-          <Controller
-            control={control}
-            name="scope.resource_id"
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <DomainSelector
-                action="manageSubscriptions"
-                disabled={isEditForm}
-                label={formatMessage({ id: "domain.selector.label" })}
-                required
-                labels
-                value={value}
-                onChange={(_e, { value }) => onChange(value)}
-              />
-            )}
-          />
-        )}
-        {resourceType === "data_structure" && !isEditForm && (
-          <Controller
-            control={control}
-            name="scope.resource_id"
-            rules={{ required: true }}
-            render={({ field: { onChange } }) => (
-              <StructureSelector
-                onSelect={({ id, name, domain_id }) => {
-                  onChange(id);
-                  setResource({ name, domain_id });
-                }}
-              />
-            )}
-          />
-        )}
-        {resourceType === "source" && !isEditForm && (
-          <Controller
-            control={control}
-            name="scope.resource_id"
-            rules={{ required: true }}
-            render={({ field: { onChange, value } }) => (
-              <SourceSelector
-                disabled={isEditForm}
-                value={value}
-                onChange={(_e, { value, options }) => {
-                  onChange(value);
-                  setResource({
-                    id: value,
-                    name: _.path("text")(_.find({ key: value })(options)),
-                  });
-                }}
-              />
-            )}
-          />
-        )}
+      )}
+      {subscriberType === "email" && (
+        <Controller
+          control={control}
+          name="subscriber.identifier"
+          shouldUnregister
+          rules={{
+            required: true,
+            pattern: { value: /^\S+@\S+\.\S+$/ },
+          }}
+          render={({
+            field: { onBlur, onChange, value },
+            fieldState: { error },
+          }) => (
+            <Form.Input
+              disabled={isEditForm}
+              error={!!error}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+              data-testid="email-input"
+            />
+          )}
+        />
+      )}
+      {subscriberType === "user" && (
         <Controller
           control={control}
-          name="periodicity"
+          name="subscriber.identifier"
           rules={{ required: true }}
           render={({
             field: { onBlur, onChange, value },
             fieldState: { error },
           }) => (
-            <Form.Dropdown
+            <UserSelector
+              disabled={isEditForm}
               error={!!error}
-              selection
-              clearable
-              label={formatMessage({ id: "subscriptions.periodicity" })}
               onBlur={onBlur}
               onChange={(_e, { value }) => onChange(value)}
-              placeholder={formatMessage({ id: "subscriptions.periodicity" })}
               value={value}
+            />
+          )}
+        />
+      )}
+      <Controller
+        control={control}
+        name="scope.resource_type"
+        rules={{ required: true }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Field className="subscription-form-radio-group" required>
+            <label>
+              <FormattedMessage id="subscriptions.resource" />
+            </label>
+            {RESOURCE_TYPES.map((type, idx) => (
+              <Radio
+                role="radio"
+                disabled={
+                  isEditForm ||
+                  type == "rule" ||
+                  (subscriberType === "taxonomy_role" && type !== "domains") ||
+                  ((subscriberType === "taxonomy_role" ||
+                    subscriberType === "role") &&
+                    type === "source")
+                }
+                onBlur={onBlur}
+                key={idx}
+                label={
+                  <label>
+                    <Icon name={resourceIcon(type)} />
+                    <FormattedMessage
+                      id={`subscriptions.resource.type.${type}`}
+                      defaultMessage={type}
+                    />
+                  </label>
+                }
+                value={type}
+                checked={value == type}
+                onChange={onChangeResourceType(onChange)}
+              />
+            ))}
+          </Form.Field>
+        )}
+      />
+      {isEditForm && (
+        <Form.Input disabled value={_.get("resource.name")(subscription)} />
+      )}
+      {resourceType === "concept" && !isEditForm && (
+        <Controller
+          control={control}
+          name="scope.resource_id"
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <ConceptSelector
+              showTitle={false}
+              handleConceptSelected={(concept) => {
+                setSelectedConceptType(_.prop("type")(concept));
+                onChange(concept.business_concept_id);
+              }}
+              businessConceptId={value}
+              defaultFilters={defaultFilters}
+            />
+          )}
+        />
+      )}
+      {_.includes(resourceType)(["domains", "domain"]) && !isEditForm && (
+        <Controller
+          control={control}
+          name="scope.resource_id"
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <DomainSelector
+              action="manageSubscriptions"
+              disabled={isEditForm}
+              label={formatMessage({ id: "domain.selector.label" })}
               required
-              options={PERIODICITIES.map((periodicity, key) => ({
-                key,
-                value: periodicity,
-                text: formatMessage({
-                  id: `subscriptions.periodicity.${periodicity}`,
-                  defaultMessage: periodicity,
-                }),
-              }))}
+              labels
+              value={value}
+              onChange={(_e, { value }) => onChange(value)}
+            />
+          )}
+        />
+      )}
+      {resourceType === "data_structure" && !isEditForm && (
+        <Controller
+          control={control}
+          name="scope.resource_id"
+          rules={{ required: true }}
+          render={({ field: { onChange } }) => (
+            <StructureSelector
+              onSelect={({ id, name, domain_id }) => {
+                onChange(id);
+                setResource({ name, domain_id });
+              }}
+            />
+          )}
+        />
+      )}
+      {resourceType === "source" && !isEditForm && (
+        <Controller
+          control={control}
+          name="scope.resource_id"
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <SourceSelector
+              disabled={isEditForm}
+              value={value}
+              onChange={(_e, { value, options }) => {
+                onChange(value);
+                setResource({
+                  id: value,
+                  name: _.path("text")(_.find({ key: value })(options)),
+                });
+              }}
             />
           )}
         />
+      )}
+      <Controller
+        control={control}
+        name="periodicity"
+        rules={{ required: true }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Dropdown
+            error={!!error}
+            selection
+            clearable
+            label={formatMessage({ id: "subscriptions.periodicity" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "subscriptions.periodicity" })}
+            value={value}
+            required
+            options={PERIODICITIES.map((periodicity, key) => ({
+              key,
+              value: periodicity,
+              text: formatMessage({
+                id: `subscriptions.periodicity.${periodicity}`,
+                defaultMessage: periodicity,
+              }),
+            }))}
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name="scope.events"
+        rules={{
+          required: true,
+          validate: { notEmpty },
+        }}
+        render={({
+          field: { onBlur, onChange, value },
+          fieldState: { error },
+        }) => (
+          <Form.Dropdown
+            error={!!error}
+            selection
+            clearable
+            multiple
+            disabled={_.isEmpty(eventsForType)}
+            label={formatMessage({ id: "subscriptions.events" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({ id: "subscriptions.events" })}
+            value={value}
+            required
+            options={eventsForType.map((event, key) => ({
+              key,
+              value: event,
+              text: formatMessage({
+                id: `subscriptions.events.${event}`,
+                defaultMessage: event,
+              }),
+            }))}
+          />
+        )}
+      />
+      <ContentFilters
+        control={control}
+        setValue={setValue}
+        conceptType={selectedConceptType}
+      />
+      {_.isEmpty(statuses) ? null : (
         <Controller
           control={control}
-          name="scope.events"
+          name="scope.status"
           rules={{
             required: true,
             validate: { notEmpty },
@@ -428,97 +466,54 @@ export const SubscriptionForm = ({
             fieldState: { error },
           }) => (
             <Form.Dropdown
+              onBlur={onBlur}
               error={!!error}
+              label={formatMessage({ id: "subscriptions.status" })}
               selection
-              clearable
               multiple
-              disabled={_.isEmpty(eventsForType)}
-              label={formatMessage({ id: "subscriptions.events" })}
-              onBlur={onBlur}
+              clearable
+              required
               onChange={(_e, { value }) => onChange(value)}
-              placeholder={formatMessage({ id: "subscriptions.events" })}
               value={value}
-              required
-              options={eventsForType.map((event, key) => ({
+              placeholder={formatMessage({ id: "subscriptions.status" })}
+              options={statuses.map(({ name, color }, key) => ({
                 key,
-                value: event,
-                text: formatMessage({
-                  id: `subscriptions.events.${event}`,
-                  defaultMessage: event,
-                }),
+                value: name,
+                text: (
+                  <label>
+                    {color ? (
+                      <Icon
+                        name={
+                          name == "error" || "empty_dataset"
+                            ? "warning circle"
+                            : "circle"
+                        }
+                        inverted={name == "empty_dataset" ? true : false}
+                        color={color}
+                      />
+                    ) : null}
+                    <FormattedMessage
+                      id={`subscriptions.status.${name}`}
+                      defaultMessage={name}
+                    />
+                  </label>
+                ),
               }))}
             />
           )}
         />
-        <ContentFilters
-          control={control}
-          setValue={setValue}
-          conceptType={selectedConceptType}
+      )}
+      <div className="actions">
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+        <Button
+          primary
+          type="submit"
+          loading={isLoading}
+          disabled={disabled}
+          content={formatMessage({ id: "actions.save" })}
         />
-        {_.isEmpty(statuses) ? null : (
-          <Controller
-            control={control}
-            name="scope.status"
-            rules={{
-              required: true,
-              validate: { notEmpty },
-            }}
-            render={({
-              field: { onBlur, onChange, value },
-              fieldState: { error },
-            }) => (
-              <Form.Dropdown
-                onBlur={onBlur}
-                error={!!error}
-                label={formatMessage({ id: "subscriptions.status" })}
-                selection
-                multiple
-                clearable
-                required
-                onChange={(_e, { value }) => onChange(value)}
-                value={value}
-                placeholder={formatMessage({ id: "subscriptions.status" })}
-                options={statuses.map(({ name, color }, key) => ({
-                  key,
-                  value: name,
-                  text: (
-                    <label>
-                      {color ? (
-                        <Icon
-                          name={
-                            name == "error" || "empty_dataset"
-                              ? "warning circle"
-                              : "circle"
-                          }
-                          inverted={name == "empty_dataset" ? true : false}
-                          color={color}
-                        />
-                      ) : null}
-                      <FormattedMessage
-                        id={`subscriptions.status.${name}`}
-                        defaultMessage={name}
-                      />
-                    </label>
-                  ),
-                }))}
-              />
-            )}
-          />
-        )}
-        <div className="actions">
-          <HistoryBackButton
-            content={formatMessage({ id: "actions.cancel" })}
-          />
-          <Button
-            primary
-            type="submit"
-            loading={isLoading}
-            disabled={disabled}
-            content={formatMessage({ id: "actions.save" })}
-          />
-        </div>
-      </Form>
-    </Suspense>
+      </div>
+    </Form>
   );
 };