@truedat/df 8.5.8 → 8.6.0

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

@@ -1,8 +1,14 @@
 import _ from "lodash/fp";
-import { Accordion, Button, Divider, Form, Icon, Label } from "semantic-ui-react";
+import {
+  Accordion,
+  Button,
+  Divider,
+  Form,
+  Icon,
+  Label,
+} from "semantic-ui-react";
 import { useState } from "react";
-import { useIntl } from "react-intl";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import FieldDefinition from "./FieldDefinition";
 import ValuesField from "./ValuesField";
 import { defaultFieldDefinition } from "./widgetDefinitions";
@@ -10,249 +16,253 @@ import { getValues, getKeyType } from "./valueDefinitions";
 import ValuesConfiguration from "./ValuesConfiguration";
 
 const AccordionButtonGroup = ({
-    fieldIndex,
-    fieldCount,
-    onColumnUp,
-    onColumnDown,
-    onColumnRemoval,
+  fieldIndex,
+  fieldCount,
+  onColumnUp,
+  onColumnDown,
+  onColumnRemoval,
 }) => {
-    return (
-        <Button.Group
-            basic
-            floated="right"
-            color="orange"
-            size="tiny"
-            buttons={[
-                {
-                    key: "up",
-                    icon: "arrow up",
-                    type: "button",
-                    onClick: () => onColumnUp(),
-                    disabled: fieldIndex === 0,
-                },
-                {
-                    key: "down",
-                    icon: "arrow down",
-                    type: "button",
-                    onClick: () => onColumnDown(),
-                    disabled: fieldIndex === fieldCount - 1,
-                },
-                {
-                    key: "delete",
-                    icon: "trash alternate outline",
-                    type: "button",
-                    onClick: () => onColumnRemoval(),
-                },
-            ]}
-        />
-    );
+  return (
+    <Button.Group
+      basic
+      floated="right"
+      color="orange"
+      size="tiny"
+      buttons={[
+        {
+          key: "up",
+          icon: "arrow up",
+          type: "button",
+          onClick: () => onColumnUp(),
+          disabled: fieldIndex === 0,
+        },
+        {
+          key: "down",
+          icon: "arrow down",
+          type: "button",
+          onClick: () => onColumnDown(),
+          disabled: fieldIndex === fieldCount - 1,
+        },
+        {
+          key: "delete",
+          icon: "trash alternate outline",
+          type: "button",
+          onClick: () => onColumnRemoval(),
+        },
+      ]}
+    />
+  );
 };
 
 const TableContent = ({
-    field,
-    fieldIndex,
-    fieldCount,
-    onChange,
-    onColumnUp,
-    onColumnDown,
-    onColumnRemoval,
-    prefix,
-    scope,
+  field,
+  fieldIndex,
+  fieldCount,
+  onChange,
+  onColumnUp,
+  onColumnDown,
+  onColumnRemoval,
+  prefix,
+  scope,
 }) => {
-    const valueName = `${prefix}.values`;
-    const defaultField = `${prefix}.default`;
-    const widget = field?.widget || defaultFieldDefinition.widget;
-    const type = field?.type || defaultFieldDefinition.type;
-    const values = getValues(widget, type);
+  const valueName = `${prefix}.values`;
+  const defaultField = `${prefix}.default`;
+  const widget = field?.widget || defaultFieldDefinition.widget;
+  const type = field?.type || defaultFieldDefinition.type;
+  const values = getValues(widget, type);
 
-    return (
-        <>
-            <AccordionButtonGroup
-                fieldIndex={fieldIndex}
-                fieldCount={fieldCount}
-                onColumnUp={onColumnUp}
-                onColumnDown={onColumnDown}
-                onColumnRemoval={onColumnRemoval}
-            />
-            <Divider hidden fitted />
-            <FieldDefinition
-                allowedTypes={["string", "user", "user_group"]}
-                allowedWidgets={["string", "dropdown"]}
-                defaultField={defaultField}
-                cardinality={field?.cardinality || defaultFieldDefinition.cardinality}
-                fieldNamePrefix={prefix}
-                mandatory={field?.mandatory || false}
-                onChange={onChange}
-                type={type}
-                valueName={valueName}
-                widget={widget}
-            />
-            <ValuesField
-                defaultField={defaultField}
-                field={field}
-                name={valueName}
-                onChange={onChange}
-                fieldNamePrefix={prefix}
-                scope={scope}
-                values={values}
-            />
-        </>
-    );
+  return (
+    <>
+      <AccordionButtonGroup
+        fieldIndex={fieldIndex}
+        fieldCount={fieldCount}
+        onColumnUp={onColumnUp}
+        onColumnDown={onColumnDown}
+        onColumnRemoval={onColumnRemoval}
+      />
+      <Divider hidden fitted />
+      <FieldDefinition
+        allowedTypes={["string", "user", "group", "user_group"]}
+        allowedWidgets={["string", "dropdown"]}
+        defaultField={defaultField}
+        cardinality={field?.cardinality || defaultFieldDefinition.cardinality}
+        fieldNamePrefix={prefix}
+        mandatory={field?.mandatory || false}
+        onChange={onChange}
+        type={type}
+        valueName={valueName}
+        widget={widget}
+      />
+      <ValuesField
+        defaultField={defaultField}
+        field={field}
+        name={valueName}
+        onChange={onChange}
+        fieldNamePrefix={prefix}
+        scope={scope}
+        values={values}
+      />
+    </>
+  );
 };
-export const TableValuesForm = ({ name, onChange, type, values, scope, field, fieldNamePrefix }) => {
-    const fieldCount = _.size(values);
-    const [activeField, setActiveField] = useState();
-    const [fieldValue, setFieldValue] = useState();
-    const { formatMessage } = useIntl();
+export const TableValuesForm = ({
+  name,
+  onChange,
+  type,
+  values,
+  scope,
+  field,
+  fieldNamePrefix,
+}) => {
+  const fieldCount = _.size(values);
+  const [activeField, setActiveField] = useState();
+  const [fieldValue, setFieldValue] = useState();
+  const { formatMessage } = useIntl();
 
-    const swap = (targetKey, sourceKey) => {
-        const tagetValue = values[targetKey];
-        const sourceValue = values[sourceKey];
+  const swap = (targetKey, sourceKey) => {
+    const tagetValue = values[targetKey];
+    const sourceValue = values[sourceKey];
 
-        return _.flow(
-            _.set(sourceKey, tagetValue),
-            _.set(targetKey, sourceValue),
-        )(values);
-    };
+    return _.flow(
+      _.set(sourceKey, tagetValue),
+      _.set(targetKey, sourceValue),
+    )(values);
+  };
 
-    const handleColumnUp = (key) => {
-        const updatedValues = swap(key - 1, key);
-        onChange(null, { name, value: { [type]: updatedValues } });
-        setActiveField(key - 1);
-    };
+  const handleColumnUp = (key) => {
+    const updatedValues = swap(key - 1, key);
+    onChange(null, { name, value: { [type]: updatedValues } });
+    setActiveField(key - 1);
+  };
 
-    const handleColumnDown = (key) => {
-        const updatedValues = swap(key + 1, key);
-        onChange(null, { name, value: { [type]: updatedValues } });
-        setActiveField(key + 1);
-    };
+  const handleColumnDown = (key) => {
+    const updatedValues = swap(key + 1, key);
+    onChange(null, { name, value: { [type]: updatedValues } });
+    setActiveField(key + 1);
+  };
 
-    const handleRemove = (key) => {
-        const updatedValues = values.filter((_, i) => i !== key);
-        onChange(null, { name, value: { [type]: updatedValues } });
-        if (_.size(updatedValues) > 0) {
-            setActiveField(key - 1);
-        }
-    };
+  const handleRemove = (key) => {
+    const updatedValues = values.filter((_, i) => i !== key);
+    onChange(null, { name, value: { [type]: updatedValues } });
+    if (_.size(updatedValues) > 0) {
+      setActiveField(key - 1);
+    }
+  };
 
-    const onSelectField = (e, { index }) =>
-        setActiveField((x) => (x == index ? null : index));
+  const onSelectField = (e, { index }) =>
+    setActiveField((x) => (x == index ? null : index));
 
-    const handleAddColumnClick = (e) => {
-        e.preventDefault();
-        if (!fieldValue || fieldValue.trim() === "") {
-            return;
-        }
-        addColumn({ key: "Enter" });
-    };
+  const handleAddColumnClick = (e) => {
+    e.preventDefault();
+    if (!fieldValue || fieldValue.trim() === "") {
+      return;
+    }
+    addColumn({ key: "Enter" });
+  };
 
-    const addColumn = ({ key }) => {
-        if (key === "Enter") {
-            if (!fieldValue || fieldValue.trim() === "") {
-                return;
-            }
-            const updatedValues = [
-                ...values,
-                { ...defaultFieldDefinition, name: fieldValue, ai_suggestion: false, label: fieldValue },
-            ];
-            onChange(null, { name, value: { [type]: updatedValues } });
-            setFieldValue("");
-            setActiveField(_.size(updatedValues) - 1);
-        }
-    };
-
-    const keyType = getKeyType(field);
-
-    const panels = values.map((value, i) => ({
-        title: {
-            content: (
-                <>
-                    <Label key={i} color="orange">
-                        {value?.errors?.hasErrors && (
-                            <Icon
-                                key={i}
-                                style={{ marginLeft: "5px" }}
-                                name="warning sign"
-                            />
-                        )}
-                        {value.name}
-                    </Label>
-                    {value?.errors?.nameDuplicated && <Label basic color="red" size={"small"} pointing={"left"}>
-                        {formatMessage({
-                            id: "template.form.validation.name_duplicated",
-                        })}
-                    </Label>}
-                </>
-            )
-        },
-        key: i,
-        onTitleClick: onSelectField,
-        active: activeField == i,
-        content: {
-            content: (
-                <TableContent
-                    prefix={`${name}.${type}[${i}]`}
-                    fieldIndex={i}
-                    fieldCount={fieldCount}
-                    onColumnUp={() => {
-                        handleColumnUp(i);
-                    }}
-                    onColumnDown={() => {
-                        handleColumnDown(i);
-                    }}
-                    onColumnRemoval={() => {
-                        handleRemove(i);
-                    }}
-                    onChange={onChange}
-                    field={value}
-                    scope={scope}
-                />
-            ),
+  const addColumn = ({ key }) => {
+    if (key === "Enter") {
+      if (!fieldValue || fieldValue.trim() === "") {
+        return;
+      }
+      const updatedValues = [
+        ...values,
+        {
+          ...defaultFieldDefinition,
+          name: fieldValue,
+          ai_suggestion: false,
+          label: fieldValue,
         },
-    }));
+      ];
+      onChange(null, { name, value: { [type]: updatedValues } });
+      setFieldValue("");
+      setActiveField(_.size(updatedValues) - 1);
+    }
+  };
 
-    return (
+  const keyType = getKeyType(field);
+
+  const panels = values.map((value, i) => ({
+    title: {
+      content: (
         <>
-            <Accordion panels={panels} />
-            {activeField == _.size(panels) - 1 && <Divider hidden />}
-            <Form.Input
-                label={
-                    <label>
-                        Header
-                        {(!fieldValue || fieldValue.trim() === "") && (
-                            <Label pointing="left" style={{ marginLeft: "10px" }}>
-                                <FormattedMessage id="template.form.validation.empty_required" />
-                            </Label>
-                        )}
-                       
-                    </label>
-                }
-                required
-                icon={
-                    <Icon
-                        name="add circle"
-                        link
-                        onClick={handleAddColumnClick}
-                    />
-                }
-                value={fieldValue}
-                onChange={(e, { value }) => setFieldValue(value)}
-                onKeyPress={addColumn}
-            />
-            <Divider hidden />
-            <ValuesConfiguration
-                aiSuggestion={field?.ai_suggestion || false}
-                editable={field?.editable || true}
-                keyType={keyType}
-                onChange={onChange}
-                searchable={field?.searchable || false}
-                fieldNamePrefix={fieldNamePrefix}
-                hasAiSuggestion={false}
-                subscribable={field?.subscribable}
-                scope={scope}
-            />
+          <Label key={i} color="orange">
+            {value?.errors?.hasErrors && (
+              <Icon key={i} style={{ marginLeft: "5px" }} name="warning sign" />
+            )}
+            {value.name}
+          </Label>
+          {value?.errors?.nameDuplicated && (
+            <Label basic color="red" size={"small"} pointing={"left"}>
+              {formatMessage({
+                id: "template.form.validation.name_duplicated",
+              })}
+            </Label>
+          )}
         </>
-    );
+      ),
+    },
+    key: i,
+    onTitleClick: onSelectField,
+    active: activeField == i,
+    content: {
+      content: (
+        <TableContent
+          prefix={`${name}.${type}[${i}]`}
+          fieldIndex={i}
+          fieldCount={fieldCount}
+          onColumnUp={() => {
+            handleColumnUp(i);
+          }}
+          onColumnDown={() => {
+            handleColumnDown(i);
+          }}
+          onColumnRemoval={() => {
+            handleRemove(i);
+          }}
+          onChange={onChange}
+          field={value}
+          scope={scope}
+        />
+      ),
+    },
+  }));
+
+  return (
+    <>
+      <Accordion panels={panels} />
+      {activeField == _.size(panels) - 1 && <Divider hidden />}
+      <Form.Input
+        label={
+          <label>
+            Header
+            {(!fieldValue || fieldValue.trim() === "") && (
+              <Label pointing="left" style={{ marginLeft: "10px" }}>
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            )}
+          </label>
+        }
+        required
+        icon={<Icon name="add circle" link onClick={handleAddColumnClick} />}
+        value={fieldValue}
+        onChange={(e, { value }) => setFieldValue(value)}
+        onKeyPress={addColumn}
+      />
+      <Divider hidden />
+      <ValuesConfiguration
+        aiSuggestion={field?.ai_suggestion || false}
+        editable={field?.editable || true}
+        keyType={keyType}
+        onChange={onChange}
+        searchable={field?.searchable || false}
+        fieldNamePrefix={fieldNamePrefix}
+        hasAiSuggestion={false}
+        subscribable={field?.subscribable}
+        scope={scope}
+      />
+    </>
+  );
 };
 
 export default TableValuesForm;

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap

@@ -2126,6 +2126,19 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
                 template.field.type.user
               </span>
             </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.group
+              </span>
+            </div>
             <div
               aria-checked="false"
               aria-selected="false"

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

@@ -8,7 +8,7 @@ const reduceField = (field) => {
     return [field, ...tableColumns];
   }
   return field;
-}
+};
 
 export const parseContentValidation = (content) => {
   const duplicatedGroupNames = _.flow([
@@ -42,6 +42,10 @@ export const parseContentValidation = (content) => {
           () => checkFieldType(field, "user"),
           () => _.isEmpty(field.values.role_users),
         ],
+        [
+          () => checkFieldType(field, "group"),
+          () => _.isEmpty(field.values.role_groups),
+        ],
         [
           () => checkFieldType(field, "user_group"),
           () => _.isEmpty(field.values.role_groups),
@@ -59,7 +63,7 @@ export const parseContentValidation = (content) => {
                 () =>
                   _.isEmpty(field.values.domain) ||
                   _.some((domain) => _.every(_.isEmpty)(_.values(domain)))(
-                    field.values.domain
+                    field.values.domain,
                   ),
               ],
               [
@@ -68,7 +72,7 @@ export const parseContentValidation = (content) => {
                   _.isEmpty(field.values.switch) ||
                   _.isEmpty(field.values.switch.values) ||
                   _.some((switchKey) =>
-                    _.isEmpty(field.values.switch.values[switchKey])
+                    _.isEmpty(field.values.switch.values[switchKey]),
                   )(_.keys(field.values.switch.values)),
               ],
               [
@@ -84,7 +88,8 @@ export const parseContentValidation = (content) => {
       ])();
 
       const tableColumnEmpty =
-        (checkFieldType(field, "table") || checkFieldType(field, "dynamic_table")) &&
+        (checkFieldType(field, "table") ||
+          checkFieldType(field, "dynamic_table")) &&
         _.has("table_columns", field.values) &&
         _.isEmpty(field.values.table_columns);
 
@@ -113,12 +118,19 @@ export const parseContentValidation = (content) => {
       };
 
       if (field?.type === "dynamic_table") {
-        const validatedTableColumns = parseFieldsValidation(field.values.table_columns);
-        const hasChildrenErrors = _.any(_.propOr(false, "errors.hasErrors"))(validatedTableColumns);
+        const validatedTableColumns = parseFieldsValidation(
+          field.values.table_columns,
+        );
+        const hasChildrenErrors = _.any(_.propOr(false, "errors.hasErrors"))(
+          validatedTableColumns,
+        );
 
         return _.flow(
-          _.set("errors", { ...errors, hasErrors: errors?.hasErrors || hasChildrenErrors }),
-          _.set("values.table_columns", validatedTableColumns)
+          _.set("errors", {
+            ...errors,
+            hasErrors: errors?.hasErrors || hasChildrenErrors,
+          }),
+          _.set("values.table_columns", validatedTableColumns),
         )(field);
       }
       return { ...field, errors };
@@ -130,7 +142,7 @@ export const parseContentValidation = (content) => {
     const fields = parseFieldsValidation(group.fields);
     const hasNoFields = _.isEmpty(group.fields);
     const hasFieldErrors = _.flow([_.map((x) => x.errors.hasErrors), arrayAnd])(
-      fields
+      fields,
     );
 
     const hasErrors =

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

@@ -15,6 +15,7 @@ const valueTypes = [
 const selectableValues = {
   string: ["domain", "fixed", "fixed_tuple", "switch"],
   user: ["role_users"],
+  group: ["role_groups"],
   user_group: ["role_groups"],
   hierarchy: ["hierarchy"],
 };

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

@@ -66,7 +66,15 @@ export const WIDGETS = [
     text: "Dropdown",
     icon: "arrow down",
     cardinalities: ["?", "1", "*", "+"],
-    types: ["string", "system", "domain", "user", "user_group", "hierarchy"],
+    types: [
+      "string",
+      "system",
+      "domain",
+      "user",
+      "group",
+      "user_group",
+      "hierarchy",
+    ],
   },
   {
     key: "radio",
@@ -74,7 +82,7 @@ export const WIDGETS = [
     text: "Radio",
     icon: "radio",
     cardinalities: ["?", "1"],
-    types: ["string", "user", "user_group"],
+    types: ["string", "user", "group", "user_group"],
   },
   {
     key: "checkbox",
@@ -82,7 +90,7 @@ export const WIDGETS = [
     text: "Checkbox",
     icon: "check square outline",
     cardinalities: ["*", "+"],
-    types: ["string", "user", "user_group"],
+    types: ["string", "user", "group", "user_group"],
   },
   {
     key: "pair_list",