@truedat/df 7.4.4 → 7.5.0

package/src/templates/components/templateForm/DependentFormField.js

@@ -53,7 +53,7 @@ export const DependentFormField = ({
 );
 
 DependentFormField.propTypes = {
-  label: PropTypes.string,
+  label: PropTypes.node,
   fieldOptions: PropTypes.array,
   fieldPlaceholder: PropTypes.string,
   fieldName: PropTypes.string,

package/src/templates/components/templateForm/FieldForm.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Form, Button, Divider, Segment, Popup, Icon } from "semantic-ui-react";
+import { Form, Button, Divider, Label, Segment } from "semantic-ui-react";
 import ValuesField from "./ValuesField";
 import ConditionalFieldForm from "./ConditionalFieldForm";
 import MandatoryConditional from "./MandatoryConditional";
@@ -130,6 +130,12 @@ export const FieldForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [widget, type]);
 
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
+
+  const labelValue = label || "";
+  const nameValue = name || "";
+
   return (
     <Segment>
       <Button.Group
@@ -163,8 +169,19 @@ export const FieldForm = ({
         <Form.Input
           name={`${fieldNamePrefix}.label`}
           size="small"
-          label={formatMessage({ id: "template.field.label" })}
-          value={label || ""}
+          label={
+            <label>
+              {formatMessage({
+                id: "template.field.label",
+              })}
+              {isNullOrEmpty(labelValue) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
+          value={labelValue}
           required
           onChange={onChange}
         />
@@ -172,8 +189,19 @@ export const FieldForm = ({
           name={`${fieldNamePrefix}.name`}
           size="small"
           fluid
-          label={formatMessage({ id: "template.field.name" })}
-          value={name || ""}
+          label={
+            <label>
+              {formatMessage({
+                id: "template.field.name",
+              })}
+              {isNullOrEmpty(nameValue) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
+          value={nameValue}
           required
           onChange={onChange}
           disabled={disabledName || hasDependencies}

package/src/templates/components/templateForm/HierarchiesList.js

@@ -40,7 +40,6 @@ export const HierarchiesList = ({ hierarchies, onChange, values, loading }) => {
       />
       <Form.Input
         type="number"
-        required
         name="min_depth"
         label={formatMessage({ id: "template.field.type.depth" })}
         onChange={handleChange}

package/src/templates/components/templateForm/MandatoryConditional.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "semantic-ui-react";
 import DependentFormField from "./DependentFormField";
 
 export const MandatoryConditional = ({
@@ -30,18 +31,40 @@ export const MandatoryConditional = ({
 
     onChange(e, { name, value });
   };
-
+  const fieldValue = field?.mandatory?.on;
+  const value = field?.mandatory?.to_be;
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
   return (
     <DependentFormField
-      label={formatMessage({ id: "template.field.mandatory.depends" })}
+      label={
+        <label>
+          {formatMessage({ id: "template.field.mandatory.depends" })}
+          {!isNullOrEmpty(fieldValue) && isNullOrEmpty(value) ? (
+            <>
+              <span
+                style={{
+                  color: "#D95C5C",
+                  marginLeft: "3px",
+                }}
+              >
+                *
+              </span>
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            </>
+          ) : null}
+        </label>
+      }
       fieldName={`${fieldNamePrefix}.mandatory.on`}
       fieldOptions={fieldOptions}
       fieldPlaceholder={formatMessage({
         id: "template.field.mandatory.depends.on",
       })}
-      fieldValue={field?.mandatory?.on}
+      fieldValue={fieldValue}
       onChange={handleChange}
-      value={field?.mandatory?.to_be}
+      value={value}
       valueName={`${fieldNamePrefix}.mandatory.to_be`}
       valueOptions={valueOptions}
       valuePlaceholder={formatMessage({

package/src/templates/components/templateForm/SwitchListForm.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { injectIntl } from "react-intl";
-import { Form, Icon, List } from "semantic-ui-react";
+import { FormattedMessage, injectIntl } from "react-intl";
+import { Form, Icon, List, Label } from "semantic-ui-react";
 import SwitchSegment from "./SwitchSegment";
 
 const initialState = {
@@ -56,11 +56,35 @@ export class SwitchListForm extends React.Component {
       onChange,
     } = this.props;
     const { error } = this.state;
+    const isNullOrEmpty = (value) =>
+      !_.isNumber(value) && (!value || _.isEmpty(value));
     return (
       <List verticalAlign="middle">
         <List.Item>
           <Form.Input
             value={on}
+            label={
+              <label>
+                {formatMessage({
+                  id: "template.field.values.switch_field.label",
+                })}
+                {isNullOrEmpty(on) ? (
+                  <>
+                    <span
+                      style={{
+                        color: "#D95C5C",
+                        marginLeft: "3px",
+                      }}
+                    >
+                      *
+                    </span>
+                    <Label pointing="left">
+                      <FormattedMessage id="template.form.validation.empty_required" />
+                    </Label>
+                  </>
+                ) : null}
+              </label>
+            }
             placeholder={formatMessage({
               id: "template.field.values.switch_field",
             })}
@@ -88,6 +112,28 @@ export class SwitchListForm extends React.Component {
           <Form.Input
             error={error}
             value={this.state.value}
+            label={
+              <label>
+                {formatMessage({
+                  id: "template.field.values.add_switch_value.label",
+                })}
+                {isNullOrEmpty(values) ? (
+                  <>
+                    <span
+                      style={{
+                        color: "#D95C5C",
+                        marginLeft: "3px",
+                      }}
+                    >
+                      *
+                    </span>
+                    <Label pointing="left">
+                      <FormattedMessage id="template.form.validation.empty_required" />
+                    </Label>
+                  </>
+                ) : null}
+              </label>
+            }
             icon={<Icon name="add circle" />}
             placeholder={formatMessage({
               id: "template.field.values.add_switch_value",

package/src/templates/components/templateForm/TemplateForm.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Header, Form, Grid, Divider } from "semantic-ui-react";
+import { Header, Form, Grid, Label, Divider } from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
 import GroupsList from "./GroupsList";
 import ActiveGroupForm from "./ActiveGroupForm";
@@ -34,7 +34,7 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
   const [activeGroup, setActiveGroup] = useState(0);
   const [editedTemplate, setEditedTemplate] = useState({
     ...template,
-    content: template.content || [],
+    content: template?.content || [],
   });
 
   useEffect(() => {
@@ -98,8 +98,25 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
 
   const validatedContent = parseContentValidation(editedTemplate.content);
 
+  const hasContentErrors =
+    _.isEmpty(validatedContent) ||
+    _.some((group) => group?.errors?.hasErrors)(validatedContent);
+
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
+
+  const isNameEmpty = isNullOrEmpty(editedTemplate.name);
+  const isLabelEmpty = isNullOrEmpty(editedTemplate.label);
+  const isScopeEmpty = isNullOrEmpty(editedTemplate.scope);
+  const isInvalidTemplate =
+    isNameEmpty || isLabelEmpty || isScopeEmpty || hasContentErrors;
+
+  const nameValue = editedTemplate.name || "";
+  const labelValue = editedTemplate.label || "";
+  const scopeValue = editedTemplate.scope || "";
+  const subscopeValue = editedTemplate.subscope || "";
   return (
-    <Form loading={loading}>
+    <Form loading={loading} className="template-form">
       <Divider horizontal>
         <Header as="h4">
           <FormattedMessage id="template.form.header" />
@@ -109,8 +126,17 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
         <Form.Input
           name="name"
           width={6}
-          label={formatMessage({ id: "template.form.name" })}
-          value={editedTemplate.name || ""}
+          label={
+            <label>
+              {formatMessage({ id: "template.form.name" })}
+              {isNullOrEmpty(nameValue) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
+          value={nameValue}
           required
           onChange={handleChange}
           readOnly={!_.isEmpty(template)}
@@ -118,8 +144,17 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
         <Form.Input
           name="label"
           width={6}
-          label={formatMessage({ id: "template.form.label" })}
-          value={editedTemplate.label || ""}
+          label={
+            <label>
+              {formatMessage({ id: "template.form.label" })}
+              {isNullOrEmpty(labelValue) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
+          value={labelValue}
           required
           onChange={handleChange}
         />
@@ -128,8 +163,17 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
           clearable
           placeholder={formatMessage({ id: "template.form.scope.placeholder" })}
           width={4}
-          label={formatMessage({ id: "template.form.scope" })}
-          value={editedTemplate.scope || ""}
+          label={
+            <label>
+              {formatMessage({ id: "template.form.scope" })}
+              {isNullOrEmpty(scopeValue) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
+          value={scopeValue}
           required
           selection
           options={scopeOptions(formatMessage)}
@@ -142,7 +186,7 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
             id: "template.form.subscope.placeholder",
           })}
           label={formatMessage({ id: "template.form.subscope" })}
-          value={editedTemplate?.subscope || ""}
+          value={subscopeValue}
           onChange={handleChange}
           disabled={editedTemplate?.scope !== "bg"}
         />
@@ -174,7 +218,10 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
         </Grid.Column>
       </Grid>
       <Divider />
-      <TemplateFormActions template={template} onSave={handleSubmit} />
+      <TemplateFormActions
+        onSave={handleSubmit}
+        isInvalid={isInvalidTemplate}
+      />
     </Form>
   );
 };

package/src/templates/components/templateForm/TemplateFormActions.js

@@ -10,6 +10,7 @@ export const TemplateFormActions = ({
   templateSaving,
   templateDeleting,
   onSave,
+  isInvalid,
 }) => {
   const history = useHistory();
   const onCancel = () => history.push(TEMPLATES);
@@ -20,7 +21,7 @@ export const TemplateFormActions = ({
         content={<FormattedMessage id="actions.save" />}
         onClick={onSave}
         loading={templateSaving}
-        disabled={templateSaving || templateDeleting}
+        disabled={templateSaving || templateDeleting || isInvalid}
       />
       <Button
         content={<FormattedMessage id="actions.cancel" />}
@@ -31,9 +32,9 @@ export const TemplateFormActions = ({
 };
 
 TemplateFormActions.propTypes = {
-  template: PropTypes.object.isRequired,
   templateDeleting: PropTypes.bool.isRequired,
   templateSaving: PropTypes.bool.isRequired,
+  isInvalid: PropTypes.bool.isRequired,
   onSave: PropTypes.func.isRequired,
 };
 

package/src/templates/components/templateForm/ValuesListForm.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Form, Icon, List, Popup } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Form, Icon, Label, List, Popup } from "semantic-ui-react";
 import { injectIntl } from "react-intl";
 
 const initialState = {
@@ -121,6 +122,8 @@ export class ValuesListForm extends React.Component {
       type,
     } = this.props;
     const { error } = this.state;
+    const isNullOrEmpty = (value) =>
+      !_.isNumber(value) && (!value || _.isEmpty(value));
     return (
       <List verticalAlign="middle">
         {values.map((value, key) => (
@@ -172,6 +175,23 @@ export class ValuesListForm extends React.Component {
               <Form.Input
                 error={error}
                 name="tuple_value"
+                label={
+                  isNullOrEmpty(values) ? (
+                    <label>
+                      <Label pointing="below">
+                        <FormattedMessage id="template.form.validation.empty_required" />
+                      </Label>
+                      <span
+                        style={{
+                          color: "#D95C5C",
+                          marginLeft: "3px",
+                        }}
+                      >
+                        *
+                      </span>
+                    </label>
+                  ) : null
+                }
                 value={this.state.tuple_value}
                 placeholder={formatMessage({
                   id: "template.field.values.add_value",
@@ -181,6 +201,23 @@ export class ValuesListForm extends React.Component {
               />
               <Form.Input
                 name="tuple_text"
+                label={
+                  isNullOrEmpty(values) ? (
+                    <label>
+                      <Label pointing="below">
+                        <FormattedMessage id="template.form.validation.empty_required" />
+                      </Label>
+                      <span
+                        style={{
+                          color: "#D95C5C",
+                          marginLeft: "3px",
+                        }}
+                      >
+                        *
+                      </span>
+                    </label>
+                  ) : null
+                }
                 value={this.state.tuple_text}
                 icon={
                   <Icon
@@ -200,6 +237,23 @@ export class ValuesListForm extends React.Component {
           {type == "fixed" && (
             <Form.Input
               error={error}
+              label={
+                isNullOrEmpty(values) ? (
+                  <label>
+                    <Label pointing="below">
+                      <FormattedMessage id="template.form.validation.empty_required" />
+                    </Label>
+                    <span
+                      style={{
+                        color: "#D95C5C",
+                        marginLeft: "3px",
+                      }}
+                    >
+                      *
+                    </span>
+                  </label>
+                ) : null
+              }
               name="fixed_value"
               value={this.state.fixed_value}
               icon={
@@ -221,6 +275,23 @@ export class ValuesListForm extends React.Component {
               <Form.Input
                 error={error}
                 name="column_name"
+                label={
+                  isNullOrEmpty(values) ? (
+                    <>
+                      <Label pointing="below">
+                        <FormattedMessage id="template.form.validation.empty_required" />
+                      </Label>
+                      <span
+                        style={{
+                          color: "#D95C5C",
+                          marginLeft: "3px",
+                        }}
+                      >
+                        *
+                      </span>
+                    </>
+                  ) : null
+                }
                 icon={
                   <Icon
                     name="add circle"

package/src/templates/components/templateForm/ValuesSelector.js

@@ -1,6 +1,8 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Form } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Form, Label } from "semantic-ui-react";
 import DependentDomain from "./DependentDomain";
 import SwitchListForm from "./SwitchListForm";
 import HierarchiesList from "./HierarchiesList";
@@ -25,6 +27,8 @@ export const ValuesSelector = ({
       value,
     });
   };
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
   return (
     <>
       {listFormat(type) ? (
@@ -50,24 +54,59 @@ export const ValuesSelector = ({
           defaultValue={defaultValue}
           onChange={onValueChange}
           onDefaultValueChange={onDefaultValueChange}
+          required
           values={values || {}}
         />
       ) : null}
       {type === "role_users" ? (
         <Form.Input
           value={values || ""}
-          placeholder={formatMessage({
-            id: "template.field.values.role_users",
-          })}
+          label={
+            <label>
+              {formatMessage({
+                id: "template.field.values.role.label",
+              })}
+              <span
+                style={{
+                  color: "#D95C5C",
+                  marginLeft: "3px",
+                }}
+              >
+                *
+              </span>
+              {isNullOrEmpty(values) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
           onChange={(e, { value }) => onValueChange(value)}
         />
       ) : null}
       {type === "role_groups" ? (
         <Form.Input
           value={values || ""}
-          placeholder={formatMessage({
-            id: "template.field.values.role_groups",
-          })}
+          label={
+            <label>
+              {formatMessage({
+                id: "template.field.values.role.label",
+              })}
+              <span
+                style={{
+                  color: "#D95C5C",
+                  marginLeft: "3px",
+                }}
+              >
+                *
+              </span>
+              {isNullOrEmpty(values) ? (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              ) : null}
+            </label>
+          }
           onChange={(e, { value }) => onValueChange(value)}
         />
       ) : null}

package/src/templates/components/templateForm/__tests__/DependentDomain.spec.js

@@ -31,9 +31,11 @@ describe("<DependentDomain />", () => {
     messages: {
       en: {
         "template.field.values.domain_field": "domain field",
+        "template.field.values.domain_label": "domain label",
         "template.field.values.default.omit": "omit",
         "template.field.values.default": "default",
         "template.field.values.add_value": "add",
+        "template.field.values.add_value.label": "List value",
         "template.field.values.add_text": "add text",
         "template.field.values.add_format": "add format",
         "template.field.values.add_file_config": "file config",

package/src/templates/components/templateForm/__tests__/SwitchSegment.spec.js

@@ -29,6 +29,7 @@ describe("<SwitchSegment />", () => {
         "template.field.values.default.omit": "omit",
         "template.field.values.default": "default",
         "template.field.values.add_value": "add",
+        "template.field.values.add_value.label": "List value",
         "template.field.values.add_text": "add text",
         "template.field.values.add_format": "add format",
         "template.field.values.add_file_config": "file config",

package/src/templates/components/templateForm/__tests__/TemplateForm.spec.js

@@ -2,6 +2,14 @@ import React from "react";
 import { render } from "@truedat/test/render";
 import TemplateForm from "../TemplateForm";
 
+const emptyTemplate = {
+  id: null,
+  name: "",
+  label: "",
+  scope: "",
+  content: [],
+};
+
 const template = {
   id: 1,
   name: "Name",
@@ -9,11 +17,47 @@ const template = {
   scope: "bg",
 };
 
+const templateContent = [
+  {
+    fields: [
+      {
+        ai_suggestion: false,
+        cardinality: "*",
+        default: {
+          origin: "default",
+          value: "",
+        },
+        label: "field",
+        name: "field",
+        subscribable: false,
+        type: "string",
+        values: null,
+        widget: "string",
+        disabledName: true,
+      },
+    ],
+    name: "group",
+  },
+];
+
+const filledTemplate = {
+  ...template,
+  content: templateContent,
+};
+
 describe("<TemplateForm />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot for empty template", () => {
     const state = { templateSaving: false, templateDeleting: false };
     const renderOpts = { state };
-    const props = { template, onSubmit: jest.fn() };
+    const props = { emptyTemplate, onSubmit: jest.fn() };
+    const { container } = render(<TemplateForm {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for filled template", () => {
+    const state = { templateSaving: false, templateDeleting: false };
+    const renderOpts = { state };
+    const props = { template: filledTemplate, onSubmit: jest.fn() };
     const { container } = render(<TemplateForm {...props} />, renderOpts);
     expect(container).toMatchSnapshot();
   });

package/src/templates/components/templateForm/__tests__/TemplateFormActions.spec.js

@@ -10,11 +10,13 @@ describe("<TemplateFormActions />", () => {
   };
   const templateSaving = false;
   const templateDeleting = false;
+  const isInvalid = false;
   const props = {
     template,
     templateSaving,
     templateDeleting,
     onSave,
+    isInvalid,
   };
 
   it("matches the latest snapshot", () => {
@@ -33,4 +35,9 @@ describe("<TemplateFormActions />", () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("matches the latest snapshot (invalid)", () => {
+    const wrapper = shallow(<TemplateFormActions {...props} isInvalid />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });