@truedat/df 7.4.5 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "7.4.5",
+  "version": "7.5.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.4.5",
+    "@truedat/test": "7.5.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "7.4.5",
-    "@truedat/core": "7.4.5",
+    "@truedat/auth": "7.5.0",
+    "@truedat/core": "7.5.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "2deeffe70bf878df0ea47917f1c8258d7e476914"
+  "gitHead": "c6088400f5b3724b8b358e9c4893096005fe4e42"
 }

package/src/messages/en.js

@@ -94,6 +94,7 @@ export default {
   "template.field.values.add_file_config": "Add file config",
   "template.field.values.add_format": "Add format",
   "template.field.values.add_switch_value": "Add field value",
+  "template.field.values.add_switch_value.label": "Field value",
   "template.field.values.add_text": "Add text",
   "template.field.values.add_value": "Add value to the list",
   "template.field.values.column_mandatory": "Mandatory",
@@ -102,6 +103,7 @@ export default {
   "template.field.values.default.omit": "Undo default option",
   "template.field.values.default": "Select as default option",
   "template.field.values.domain_field": "Select domain",
+  "template.field.values.domain_label": "Associated domain",
   "template.field.values.domain": "Dependent on domain",
   "template.field.values.file_types": "File types",
   "template.field.values.fixed_tuple": "Key/Value list",
@@ -110,7 +112,9 @@ export default {
   "template.field.values.none": "Free text",
   "template.field.values.role_groups": "Users or Groups of a Role",
   "template.field.values.role_users": "Users of a Role",
+  "template.field.values.role.label": "Role",
   "template.field.values.switch_field": "In funtion of the field",
+  "template.field.values.switch_field.label": "Associated field",
   "template.field.values.switch": "Dependent on other field",
   "template.field.values.table_columns": "Columns of the table",
   "template.field.values": "Values",

package/src/messages/es.js

@@ -94,6 +94,7 @@ export default {
   "template.field.values.add_file_config": "Añadir configuración de fichero",
   "template.field.values.add_format": "Añadir formato",
   "template.field.values.add_switch_value": "Añadir valor del campo",
+  "template.field.values.add_switch_value.label": "Valor del campo",
   "template.field.values.add_text": "Añadir texto",
   "template.field.values.add_value": "Añadir valor a la lista",
   "template.field.values.column_mandatory": "Obligatorio",
@@ -102,7 +103,8 @@ export default {
   "template.field.values.default.omit": "Deshacer opción por defecto",
   "template.field.values.default": "Seleccionar como opción por defecto",
   "template.field.values.domain_field": "Seleccionar dominio",
-  "template.field.values.domain": "Seleccionar en función de dominio",
+  "template.field.values.domain_label": "Dominio asociado",
+  "template.field.values.domain": "En función de dominio",
   "template.field.values.file_types": "Tipos de ficheros",
   "template.field.values.fixed_tuple": "Lista de código/descripción",
   "template.field.values.fixed": "Lista fija",
@@ -110,7 +112,9 @@ export default {
   "template.field.values.none": "Texto libre",
   "template.field.values.role_groups": "Usuarios o grupos de un Role",
   "template.field.values.role_users": "Usuarios de un Role",
+  "template.field.values.role.label": "Role",
   "template.field.values.switch_field": "En función del campo",
+  "template.field.values.switch_field.label": "Campo asociado",
   "template.field.values.switch": "En función de otro campo",
   "template.field.values.table_columns": "Columnas de la tabla",
   "template.field.values": "Valores",

package/src/styles/template.less

@@ -0,0 +1,12 @@
+.ui.form.template-form{
+   
+  .field > label{
+      padding-top: 0.1875rem;
+      padding-bottom: 0.1875rem;
+      
+      .ui.pointing.label {
+         margin-top: -0.125rem;
+         margin-bottom: -0.25rem;
+      }
+  }
+}

package/src/templates/components/__tests__/Template.spec.js

@@ -2,16 +2,32 @@ import React from "react";
 import { render } from "@truedat/test/render";
 import Template from "../Template";
 
-const renderOpts = {
-  state: {
-    template: { id: 1, label: "My Template", name: "template1" },
-    templateDeleting: false,
-    templateSaving: false,
-  },
-};
-
 describe("<Template />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot for empty data", () => {
+    const renderOpts = {
+      state: {
+        template: { id: null, label: "", name: "", scope: "" },
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
+    const { container } = render(<Template />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot with previous data", () => {
+    const renderOpts = {
+      state: {
+        template: {
+          id: 1,
+          label: "My Template",
+          name: "template1",
+          scope: "td",
+        },
+        templateDeleting: false,
+        templateSaving: false,
+      },
+    };
     const { container } = render(<Template />, renderOpts);
     expect(container).toMatchSnapshot();
   });

package/src/templates/components/__tests__/__snapshots__/Template.spec.js.snap

@@ -1,6 +1,363 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Template /> matches the latest snapshot 1`] = `
+exports[`<Template /> matches the latest snapshot for empty data 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/templates"
+    >
+      Templates
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    />
+  </div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="eight wide column"
+      >
+        <h2
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="file code outline circular icon"
+          />
+          <div
+            class="content"
+          >
+            
+            <div
+              class="sub header"
+            />
+          </div>
+        </h2>
+      </div>
+      <div
+        class="eight wide column"
+      >
+        <div
+          class="ui right aligned container"
+        />
+      </div>
+    </div>
+    <form
+      class="ui form template-form"
+    >
+      <div
+        class="ui horizontal divider"
+      >
+        <h4
+          class="ui header"
+        >
+          Template
+        </h4>
+      </div>
+      <div
+        class="fields"
+      >
+        <div
+          class="required six wide field"
+        >
+          <label>
+            Name
+            <div
+              class="ui left pointing label"
+            >
+              Empty required field
+            </div>
+          </label>
+          <div
+            class="ui input"
+          >
+            <input
+              name="name"
+              readonly=""
+              required=""
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="required six wide field"
+        >
+          <label>
+            Label
+            <div
+              class="ui left pointing label"
+            >
+              Empty required field
+            </div>
+          </label>
+          <div
+            class="ui input"
+          >
+            <input
+              name="label"
+              required=""
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="required four wide field"
+        >
+          <label>
+            Scope
+            <div
+              class="ui left pointing label"
+            >
+              Empty required field
+            </div>
+          </label>
+          <div
+            aria-expanded="false"
+            class="ui selection dropdown"
+            name="scope"
+            required=""
+            role="listbox"
+            tabindex="0"
+          >
+            <div
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider default text"
+              role="alert"
+            >
+              Select scope...
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              class="menu transition"
+            >
+              <div
+                aria-checked="false"
+                aria-selected="true"
+                class="selected item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Business Concept
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Data Catalog
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Data Request
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Grants
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Quality Control
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Quality Executions
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Quality Implementation
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Quality Rule
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  Remediation plan
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
+                >
+                  template.scope.qxe
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="disabled six wide field"
+        >
+          <label>
+            Subscope
+          </label>
+          <div
+            class="ui disabled input"
+          >
+            <input
+              disabled=""
+              name="subscope"
+              placeholder="Type a subscope..."
+              tabindex="-1"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui horizontal divider"
+      >
+        <h4
+          class="ui header"
+        >
+          Field Groups
+        </h4>
+      </div>
+      <div
+        class="ui grid"
+      >
+        <div
+          class="four wide column"
+        >
+          <div
+            class="ui pointing vertical menu"
+          >
+            <a
+              class="item"
+            >
+              <i
+                aria-hidden="true"
+                class="square plus icon"
+              />
+              Add Group
+            </a>
+          </div>
+        </div>
+        <div
+          class="twelve wide column"
+        />
+      </div>
+      <div
+        class="ui divider"
+      />
+      <div
+        class="ui right aligned container"
+      >
+        <button
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
+        >
+          Save
+        </button>
+        <button
+          class="ui button"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+`;
+
+exports[`<Template /> matches the latest snapshot with previous data 1`] = `
 <div>
   <div
     class="ui breadcrumb"
@@ -67,7 +424,7 @@ exports[`<Template /> matches the latest snapshot 1`] = `
       </div>
     </div>
     <form
-      class="ui form"
+      class="ui form template-form"
     >
       <div
         class="ui horizontal divider"
@@ -133,14 +490,14 @@ exports[`<Template /> matches the latest snapshot 1`] = `
             <div
               aria-atomic="true"
               aria-live="polite"
-              class="divider default text"
+              class="divider text"
               role="alert"
             >
               Select scope...
             </div>
             <i
               aria-hidden="true"
-              class="dropdown icon"
+              class="dropdown icon clear"
             />
             <div
               class="menu transition"
@@ -338,7 +695,9 @@ exports[`<Template /> matches the latest snapshot 1`] = `
         class="ui right aligned container"
       >
         <button
-          class="ui primary button"
+          class="ui primary disabled button"
+          disabled=""
+          tabindex="-1"
         >
           Save
         </button>

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

@@ -10,7 +10,7 @@ import {
   Input,
   Icon,
 } from "semantic-ui-react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { dropAt, swap } from "@truedat/core/services/arrays";
 import FieldForm from "./FieldForm";
 
@@ -66,6 +66,7 @@ export const ActiveGroupForm = ({
     };
     const name = `${groupNamePrefix}.fields`;
     onChange(null, { name, value: [...fields, newField] });
+    setActiveField(fields.length);
   };
 
   const onSelectField = (e, { index }) =>
@@ -94,6 +95,9 @@ export const ActiveGroupForm = ({
 
   const { formatMessage } = useIntl();
 
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
+
   return (
     <>
       <Button.Group
@@ -134,7 +138,17 @@ export const ActiveGroupForm = ({
       <Form.Field
         control={Input}
         name={`${groupNamePrefix}.name`}
-        label={formatMessage({ id: "template.form.group.name" })}
+        required
+        label={
+          <label>
+            {formatMessage({ id: "template.form.group.name" })}
+            {isNullOrEmpty(name) ? (
+              <Label pointing="left">
+                <FormattedMessage id="template.form.validation.empty_required" />
+              </Label>
+            ) : null}
+          </label>
+        }
         value={name}
         onChange={onChange}
         error={

package/src/templates/components/templateForm/ConditionalFieldForm.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";
 
 const nilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
@@ -47,15 +48,38 @@ const ConditionalFieldForm = ({
 
     onChange(e, { name, value });
   };
+  const value = _.propOr([], "to_be")(depends);
+  const fieldValue = _.propOr("", "on")(depends);
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
   return (
     <DependentFormField
-      label={formatMessage({ id: "template.field.depends" })}
+      label={
+        <label>
+          {formatMessage({ id: "template.field.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}.depends.on`}
       fieldOptions={optionFields}
       fieldPlaceholder={formatMessage({ id: "template.field.depends.on" })}
-      fieldValue={_.propOr("", "on")(depends)}
+      fieldValue={fieldValue}
       onChange={handleChange}
-      value={_.propOr([], "to_be")(depends)}
+      value={value}
       valueName={`${fieldNamePrefix}.depends.to_be`}
       valueOptions={optionValues}
       valuePlaceholder={formatMessage({ id: "template.field.depends.to_be" })}

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

@@ -1,9 +1,10 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
 import { useQuery } from "@apollo/client";
 import { useIntl } from "react-intl";
-import { Form, List } from "semantic-ui-react";
+import { Form, List, Label } from "semantic-ui-react";
 import { DOMAINS_QUERY } from "../../../api/queries";
 import SwitchSegment from "./SwitchSegment";
 
@@ -37,6 +38,9 @@ export const DependentDomain = ({
     _.sortBy("text")
   )(domains);
 
+  const isNullOrEmpty = (value) =>
+    !_.isNumber(value) && (!value || _.isEmpty(value));
+
   return (
     <List verticalAlign="middle">
       {_.flow(
@@ -59,6 +63,28 @@ export const DependentDomain = ({
         <Form.Dropdown
           loading={loading}
           selection
+          label={
+            <label>
+              {formatMessage({
+                id: "template.field.values.domain_label",
+              })}
+              {isNullOrEmpty(values) ? (
+                <>
+                  <Label pointing="left">
+                    <FormattedMessage id="template.form.validation.empty_required" />
+                  </Label>
+                  <span
+                    style={{
+                      color: "#D95C5C",
+                      marginLeft: "3px",
+                    }}
+                  >
+                    *
+                  </span>
+                </>
+              ) : null}
+            </label>
+          }
           placeholder={formatMessage({
             id: "template.field.values.domain_field",
           })}