@truedat/df 4.35.5 → 4.36.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.35.6] 2022-01-04
+
+### Added
+
+- [TD-4312] Autogenerated template identifier widget
+
 ## [4.34.0] 2021-12-02
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.35.5",
+  "version": "4.36.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -80,8 +80,8 @@
     ]
   },
   "dependencies": {
-    "@truedat/auth": "4.35.5",
-    "@truedat/core": "4.35.5",
+    "@truedat/auth": "4.36.0",
+    "@truedat/core": "4.36.0",
     "axios": "^0.19.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.7.2",
@@ -100,5 +100,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "7fcdb873dcb995997c4f31ef2bb3556577b40d14"
+  "gitHead": "6bf7c33362c73f97c8e5ff61f19c694ef28a0c3d"
 }

package/src/components/FieldGroupDetail.js

@@ -14,12 +14,13 @@ import DomainPreview from "./widgets/DomainPreview";
 import FieldGroupCopy from "./FieldGroupCopy";
 import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
+import "../styles/fieldGroupDetail.less";
 
 const RichTextEditor = React.lazy(() =>
   import("@truedat/core/components/RichTextEditor")
 );
 
-const ValueRenderByType = ({ value, type, multiple, values }) => {
+const ValueRenderByType = ({ value, type, multiple, values, widget }) => {
   switch (type) {
     case "url":
       return (
@@ -69,7 +70,18 @@ const ValueRenderByType = ({ value, type, multiple, values }) => {
       if (multiple) {
         return <Label>{value}</Label>;
       }
-      return <div style={{ whiteSpace: "pre-wrap" }}>{value}</div>;
+      return (
+        <div
+          className={[
+            "default-value",
+            widget === "identifier" ? "identifier-value" : "",
+          ]
+            .join(" ")
+            .trim()}
+        >
+          {value}
+        </div>
+      );
   }
 };
 
@@ -78,6 +90,7 @@ ValueRenderByType.propTypes = {
   type: PropTypes.string,
   values: PropTypes.any,
   multiple: PropTypes.bool,
+  widget: PropTypes.string,
 };
 
 const parseField = (field) => {
@@ -104,7 +117,7 @@ const parseField = (field) => {
 const DynamicFieldValue = ({ label, value, type, values, widget }) => {
   return (
     <List.Item>
-      <List.Header>{label}</List.Header>
+      <List.Header className="dynamic-field-header">{label}</List.Header>
       <List.Description>
         {_.isNil(value) || (!_.isNumber(value) && _.isEmpty(value)) ? (
           <Icon name="minus" color="grey" />
@@ -127,7 +140,12 @@ const DynamicFieldValue = ({ label, value, type, values, widget }) => {
         ) : widget === "password" ? (
           "*****"
         ) : (
-          <ValueRenderByType value={value} type={type} values={values} />
+          <ValueRenderByType
+            value={value}
+            type={type}
+            values={values}
+            widget={widget}
+          />
         )}
       </List.Description>
     </List.Item>

package/src/components/widgets/DynamicField.js

@@ -8,6 +8,7 @@ import CheckboxField from "./CheckboxField";
 import ColorPickerField from "./ColorPickerField";
 import DropdownField from "./DropdownField";
 import EnrichedTextField from "./EnrichedTextField";
+import IdentifierField from "./IdentifierField";
 import ImageField from "./ImageField";
 import PairListField from "./PairListField";
 import PasswordField from "./PasswordField";
@@ -24,6 +25,8 @@ const isNullOrEmpty = (value) =>
 
 const FieldByWidget = ({ scope, widget, onChange, field }) => {
   switch (widget) {
+    case "identifier":
+      return <IdentifierField field={field} />;
     case "dropdown":
       return <DropdownField field={field} scope={scope} onChange={onChange} />;
     case "radio":

package/src/components/widgets/IdentifierField.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+
+import "../../styles/identifierField.less";
+
+export const IdentifierField = ({ field: { value } }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <p className="identifier">
+      {value || formatMessage({ id: "template.field.autogenerated" })}
+    </p>
+  );
+};
+
+IdentifierField.propTypes = {
+  field: PropTypes.object,
+};
+
+export default IdentifierField;

package/src/messages/en.js

@@ -8,7 +8,9 @@ export default {
   "template.actions.delete.confirmation.content":
     "Template {name} will be deleted. Are you sure?",
   "template.actions.delete.confirmation.header": "Delete Template",
+  "template.field.autogenerated": "Generated automatically",
   "template.field.cardinality": "Cardinality",
+  "template.field.cardinality.0": "None (autogenerated)",
   "template.field.cardinality.*": "None or more",
   "template.field.cardinality.+": "One or more",
   "template.field.cardinality.1": "One",

package/src/messages/es.js

@@ -8,7 +8,9 @@ export default {
   "template.actions.delete.confirmation.content":
     "Se va a eliminar la plantilla {name}. ¿Estás seguro?",
   "template.actions.delete.confirmation.header": "Eliminar plantilla",
+  "template.field.autogenerated": "Generado automáticamente",
   "template.field.cardinality": "Cardinalidad",
+  "template.field.cardinality.0": "Ninguno (autogenerado)",
   "template.field.cardinality.*": "Ningúno o más",
   "template.field.cardinality.+": "Uno o más",
   "template.field.cardinality.1": "Uno",

package/src/styles/fieldGroupDetail.less

@@ -0,0 +1,11 @@
+.list > .item > .header.dynamic-field-header {
+  margin-bottom: 10px;
+}
+
+.identifier-value {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: medium;
+}
+.default-value {
+  whiteSpace: "pre-wrap"
+}

package/src/styles/identifierField.less

@@ -0,0 +1,8 @@
+.identifier {
+  font-family: 'Courier New', Courier, monospace;
+  color: #bbb;
+  margin: 20px 0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  
+}

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

@@ -62,6 +62,7 @@ export const DefaultValue = ({
         />
       )}
       {!type &&
+        field.cardinality != "0" &&
         !_.includes(fieldType)([
           "url",
           "date",

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

@@ -27,53 +27,53 @@ export const ValuesField = ({
       text: formatMessage({ id }),
     }))(options);
 
-  return (
-    valueSegment(values, keyType, fieldType) && (
-      <Segment>
-        {_.size(values) > 1 && (
-          <Form.Dropdown
-            fluid
-            selection
-            label={formatMessage({ id: "template.field.values" })}
-            onChange={onSelectionChange}
-            value={keyType || "null"}
-            required
-            options={valueTypes(values)}
-          />
-        )}
-        {keyType && (
-          <ValuesSelector
-            cardinality={field?.cardinality}
+  return field.cardinality == "0"
+    ? null
+    : valueSegment(values, keyType, fieldType) && (
+        <Segment>
+          {_.size(values) > 1 && (
+            <Form.Dropdown
+              fluid
+              selection
+              label={formatMessage({ id: "template.field.values" })}
+              onChange={onSelectionChange}
+              value={keyType || "null"}
+              required
+              options={valueTypes(values)}
+            />
+          )}
+          {keyType && (
+            <ValuesSelector
+              cardinality={field?.cardinality}
+              defaultField={defaultField}
+              defaultValue={field?.default}
+              name={name}
+              formatMessage={formatMessage}
+              onChange={onChange}
+              type={keyType}
+              values={_.path(`values.${keyType}`)(field)}
+            />
+          )}
+          {_.includes(keyType)(["fixed", "fixed_tuple"]) && (
+            <Form.Checkbox
+              name={subscribableField}
+              label={formatMessage({ id: "template.field.subscribable" })}
+              checked={_.prop("subscribable")(field) || false}
+              onChange={(e, { name, checked: value }) =>
+                onChange(null, { name, value })
+              }
+            />
+          )}
+          <DefaultValue
             defaultField={defaultField}
-            defaultValue={field?.default}
-            name={name}
+            field={field}
+            fieldType={fieldType}
             formatMessage={formatMessage}
             onChange={onChange}
             type={keyType}
-            values={_.path(`values.${keyType}`)(field)}
-          />
-        )}
-        {_.includes(keyType)(["fixed", "fixed_tuple"]) && (
-          <Form.Checkbox
-            name={subscribableField}
-            label={formatMessage({ id: "template.field.subscribable" })}
-            checked={_.prop("subscribable")(field) || false}
-            onChange={(e, { name, checked: value }) =>
-              onChange(null, { name, value })
-            }
           />
-        )}
-        <DefaultValue
-          defaultField={defaultField}
-          field={field}
-          fieldType={fieldType}
-          formatMessage={formatMessage}
-          onChange={onChange}
-          type={keyType}
-        />
-      </Segment>
-    )
-  );
+        </Segment>
+      );
 };
 
 ValuesField.propTypes = {

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

@@ -25,6 +25,7 @@ const messages = {
     "template.scope.gr": "gr",
     "template.scope.ie": "ie",
     "template.scope.ri": "ri",
+    "template.scope.qe": "qe",
   },
 };
 

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

@@ -84,6 +84,12 @@ exports[`<FieldForm /> manages handleCardinalityChange 1`] = `
       onChange={[Function]}
       options={
         Array [
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Identifier",
+            "value": "identifier",
+          },
           Object {
             "icon": "minus",
             "key": undefined,
@@ -425,6 +431,12 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       onChange={[Function]}
       options={
         Array [
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Identifier",
+            "value": "identifier",
+          },
           Object {
             "icon": "minus",
             "key": undefined,
@@ -711,6 +723,12 @@ exports[`<FieldForm /> renders MandatoryConditional 1`] = `
       onChange={[Function]}
       options={
         Array [
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Identifier",
+            "value": "identifier",
+          },
           Object {
             "icon": "minus",
             "key": undefined,
@@ -1052,6 +1070,12 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
       onChange={[Function]}
       options={
         Array [
+          Object {
+            "icon": "hashtag",
+            "key": undefined,
+            "text": "Identifier",
+            "value": "identifier",
+          },
           Object {
             "icon": "minus",
             "key": undefined,

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

@@ -155,7 +155,7 @@ exports[`<TemplateForm /> matches the latest snapshot (loading) 1`] = `
               <span
                 class="text"
               >
-                ri
+                qe
               </span>
             </div>
             <div
@@ -168,7 +168,7 @@ exports[`<TemplateForm /> matches the latest snapshot (loading) 1`] = `
               <span
                 class="text"
               >
-                template.scope.qe
+                ri
               </span>
             </div>
           </div>
@@ -388,7 +388,7 @@ exports[`<TemplateForm /> matches the latest snapshot 1`] = `
               <span
                 class="text"
               >
-                ri
+                qe
               </span>
             </div>
             <div
@@ -401,7 +401,7 @@ exports[`<TemplateForm /> matches the latest snapshot 1`] = `
               <span
                 class="text"
               >
-                template.scope.qe
+                ri
               </span>
             </div>
           </div>

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

@@ -31,6 +31,14 @@ export const getWidgetOptions = () => {
 };
 
 export const WIDGETS = [
+  {
+    key: "identifier",
+    value: "identifier",
+    text: "Identifier",
+    icon: "hashtag",
+    cardinalities: ["0"],
+    types: ["string"]
+  },
   {
     key: "string",
     value: "string",