@truedat/df 4.58.4 → 4.58.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.58.5] 2022-12-23
+
+### Added
+
+- [TD-5368] Editable checkbox in template form fields
+
 ## [4.58.3] 2022-12-21
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "4.58.4",
+  "version": "4.58.6",
   "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": "4.58.4",
+    "@truedat/test": "4.58.6",
     "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": "4.58.4",
-    "@truedat/core": "4.58.4",
+    "@truedat/auth": "4.58.6",
+    "@truedat/core": "4.58.6",
     "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": "852f36764d42a458272b3d5a5d204d928d5243c4"
+  "gitHead": "6d62fbef2dea9d23cb1f3908bdc48ba36f4fd55d"
 }

package/src/components/DynamicForm.js

@@ -10,11 +10,12 @@ import FieldGroupSegment from "./FieldGroupSegment";
 export const DynamicForm = ({
   applyTemplate,
   content,
-  onChange,
-  template,
-  loading,
   fieldsToOmit,
+  isModification,
+  loading,
+  onChange,
   selectedDomain,
+  template,
 }) => {
   const { formatMessage } = useIntl();
   const domainId = selectedDomain?.id;
@@ -59,8 +60,9 @@ export const DynamicForm = ({
             })
           : null
       }
-      fields={fields}
       scope={template?.scope}
+      fields={fields}
+      isModification={isModification}
     />
   ));
 };
@@ -69,10 +71,11 @@ DynamicForm.propTypes = {
   applyTemplate: PropTypes.func,
   content: PropTypes.object,
   fieldsToOmit: PropTypes.array,
-  onChange: PropTypes.func,
-  template: PropTypes.object,
+  isModification: PropTypes.bool,
   loading: PropTypes.bool,
+  onChange: PropTypes.func,
   selectedDomain: PropTypes.object,
+  template: PropTypes.object,
 };
 
 const makeMapStateToProps = () => {

package/src/components/FieldGroupSegment.js

@@ -4,7 +4,13 @@ import { Segment, Header } from "semantic-ui-react";
 import DynamicField from "./widgets/DynamicField";
 import FieldGroupSubSegment from "./FieldGroupSubSegment/FieldGroupSubSegment";
 
-export const FieldGroupSegment = ({ onFieldChange, name, fields, scope }) => (
+export const FieldGroupSegment = ({
+  scope,
+  fields,
+  isModification,
+  name,
+  onFieldChange,
+}) => (
   <Segment>
     {name && name !== "undefined" ? <Header as="h4" content={name} /> : null}
     {fields &&
@@ -19,11 +25,12 @@ export const FieldGroupSegment = ({ onFieldChange, name, fields, scope }) => (
           />
         ) : (
           <DynamicField
-            key={i}
-            onChange={onFieldChange}
+            scope={scope}
             field={field}
             fields={fields}
-            scope={scope}
+            isModification={isModification}
+            key={i}
+            onChange={onFieldChange}
           />
         )
       )}
@@ -31,9 +38,10 @@ export const FieldGroupSegment = ({ onFieldChange, name, fields, scope }) => (
 );
 
 FieldGroupSegment.propTypes = {
-  onFieldChange: PropTypes.func,
-  name: PropTypes.string,
   fields: PropTypes.array,
+  isModification: PropTypes.bool,
+  name: PropTypes.string,
+  onFieldChange: PropTypes.func,
   scope: PropTypes.string,
 };
 

package/src/components/SelectableDynamicForm.js

@@ -6,16 +6,17 @@ import { applyTemplate, validateContent } from "@truedat/df/utils";
 import DynamicForm from "./DynamicForm";
 
 export default function SelectableDynamicForm({
-  domainIds,
-  scope,
-  required,
   content,
+  domainIds,
   header,
+  hideLabel,
+  isModification,
   name,
   onChange,
   onNameChange,
   placeholder,
-  hideLabel,
+  required,
+  scope,
 }) {
   const [template, setTemplate] = useState();
   const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
@@ -54,21 +55,22 @@ export default function SelectableDynamicForm({
       <TemplateSelector
         scope={scope}
         domainIds={domainIds}
-        required={required}
-        selectedValue={template?.id}
+        hideLabel={hideLabel}
         onChange={handleSelected}
         onLoad={handleLoad}
         placeholder={placeholder}
-        hideLabel={hideLabel}
+        required={required}
+        selectedValue={template?.id}
       />
       {template ? (
         <>
           {header}
           <DynamicForm
-            onChange={handleChange}
             content={content}
-            template={template}
+            isModification={isModification}
+            onChange={handleChange}
             selectedDomain={domain}
+            template={template}
           />
         </>
       ) : null}
@@ -77,14 +79,15 @@ export default function SelectableDynamicForm({
 }
 
 SelectableDynamicForm.propTypes = {
-  domainIds: PropTypes.array,
-  scope: PropTypes.string,
-  required: PropTypes.bool,
   content: PropTypes.object,
+  domainIds: PropTypes.array,
   header: PropTypes.node,
+  hideLabel: PropTypes.bool,
+  isModification: PropTypes.bool,
   name: PropTypes.string,
   onChange: PropTypes.func,
   onNameChange: PropTypes.func,
   placeholder: PropTypes.string,
-  hideLabel: PropTypes.bool,
+  required: PropTypes.bool,
+  scope: PropTypes.string,
 };

package/src/components/__tests__/__snapshots__/EditableDynamicFieldValue.spec.js.snap

@@ -19,6 +19,7 @@ Object {
         >
           <div
             class="field"
+            data-testid="form-field"
           >
             <label>
               label
@@ -70,6 +71,7 @@ Object {
       >
         <div
           class="field"
+          data-testid="form-field"
         >
           <label>
             label

package/src/components/__tests__/__snapshots__/SelectableDynamicForm.spec.js.snap

@@ -12,6 +12,7 @@ exports[`<SelectableDynamicForm /> with a single template matches the latest sna
     </h4>
     <div
       class="field"
+      data-testid="form-field"
     >
       <label>
         field1

package/src/components/widgets/DynamicField.js

@@ -68,11 +68,19 @@ FieldByWidget.propTypes = {
 };
 
 export const DynamicField = ({
-  field: { label, cardinality, description, value, ...fieldProps },
+  field: {
+    label,
+    cardinality,
+    description,
+    value,
+    editable = true,
+    ...fieldProps
+  },
+  isModification,
   onChange,
   scope,
 }) => (
-  <Form.Field>
+  <Form.Field disabled={!editable && isModification} data-testid="form-field">
     <label>
       {label ? (
         <FormattedMessage id={`fields.${label}`} defaultMessage={label} />
@@ -109,6 +117,7 @@ export const DynamicField = ({
         </Label>
       ) : null}
     </label>
+
     <FieldByWidget
       field={{ ...fieldProps, value, cardinality }}
       onChange={onChange}
@@ -119,8 +128,9 @@ export const DynamicField = ({
 );
 
 DynamicField.propTypes = {
-  onChange: PropTypes.func.isRequired,
   field: PropTypes.object.isRequired,
+  isModification: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
   scope: PropTypes.string,
 };
 

package/src/components/widgets/__tests__/DynamicField.spec.js

@@ -1,73 +1,130 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { render } from "@truedat/test/render";
+import { within } from "@testing-library/react";
 import { DynamicField } from "../DynamicField";
 
 const onChange = jest.fn();
 
 describe("<DynamicField />", () => {
   it("matches the latest snapshot (radio widget)", () => {
-    const props = { field: { widget: "radio" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const parsedValues = [
+      {
+        value: "a",
+        text: "a",
+      },
+      {
+        value: "b",
+        text: "b",
+      },
+      {
+        value: "c",
+        text: "c",
+      },
+    ];
+    const props = { field: { widget: "radio", parsedValues }, onChange };
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
-  it("matches the latest snapshot (cehckbox widget)", () => {
+  it("matches the latest snapshot (checkbox widget)", () => {
     const props = { field: { widget: "checkbox" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (dropdown widget)", () => {
     const props = { field: { widget: "dropdown" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (textarea widget)", () => {
     const props = { field: { widget: "textarea" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (color_picker widget)", () => {
     const props = { field: { widget: "color_picker" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (pair_list widget)", () => {
     const props = { field: { widget: "pair_list" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (image widget)", () => {
     const props = { field: { widget: "image" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (number widget)", () => {
     const props = { field: { widget: "number" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (date widget)", () => {
     const props = { field: { widget: "date" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (datetime widget)", () => {
     const props = { field: { widget: "datetime" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
   it("matches the latest snapshot (default widget)", () => {
     const props = { field: { widget: "foo" }, onChange };
-    const wrapper = shallow(<DynamicField {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<DynamicField {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("editable: false enable the form field if is not modification", () => {
+    const props = {
+      field: { widget: "string", value: "input_placeholder", editable: false },
+      onChange,
+      isModification: false,
+    };
+
+    const { getByTestId } = render(<DynamicField {...props} />);
+    const formField = getByTestId("form-field");
+    expect(formField).not.toHaveClass("disabled");
+    const input = within(formField).getByDisplayValue("input_placeholder");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("editable: false disables the form field if is a modification", () => {
+    const props = {
+      field: { widget: "string", value: "input_placeholder", editable: false },
+      onChange,
+      isModification: true,
+    };
+
+    const { getByTestId } = render(<DynamicField {...props} />);
+    const formField = getByTestId("form-field");
+    expect(formField).toHaveClass("disabled");
+    const input = within(formField).getByDisplayValue("input_placeholder");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("editable: true enables the form field if not a modification", () => {
+    const props = {
+      field: { widget: "string", value: "input_placeholder", editable: true },
+      onChange,
+      isModification: false,
+    };
+
+    const { getByTestId } = render(<DynamicField {...props} />);
+    const formField = getByTestId("form-field");
+    expect(formField).not.toHaveClass("disabled");
+    const input = within(formField).getByDisplayValue("input_placeholder");
+    expect(input).toBeInTheDocument();
   });
 });

package/src/components/widgets/__tests__/__snapshots__/DynamicField.spec.js.snap

@@ -1,188 +1,555 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<DynamicField /> matches the latest snapshot (cehckbox widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "checkbox",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="checkbox"
-  />
-</FormField>
+exports[`<DynamicField /> matches the latest snapshot (checkbox widget) 1`] = `
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <div
+        class="ui fitted checkbox"
+      >
+        <input
+          class="hidden"
+          readonly=""
+          tabindex="0"
+          type="checkbox"
+          value=""
+        />
+        <label />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (color_picker widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "color_picker",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="color_picker"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="github-picker "
+      style="width: 200px; background: rgb(255, 255, 255); border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 3px 12px rgba(0,0,0,0.15); border-radius: 4px; position: relative; padding: 5px; display: flex; flex-wrap: wrap;"
+    >
+      <div
+        style="position: absolute; border: 8px solid transparent; border-bottom-color: rgba(0,0,0,0.15); top: -16px; left: 9px;"
+      />
+      <div
+        style="position: absolute; border: 7px solid transparent; border-bottom-color: #fff; top: -14px; left: 10px;"
+      />
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(184, 0, 0); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#B80000"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(219, 62, 0); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#DB3E00"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(252, 203, 0); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#FCCB00"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(0, 139, 2); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#008B02"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(0, 107, 118); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#006B76"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(18, 115, 222); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#1273DE"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(0, 77, 207); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#004DCF"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(83, 0, 235); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#5300EB"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(235, 150, 148); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#EB9694"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(250, 208, 195); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#FAD0C3"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(254, 243, 189); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#FEF3BD"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(193, 225, 197); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#C1E1C5"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(190, 218, 220); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#BEDADC"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(196, 222, 246); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#C4DEF6"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(190, 211, 243); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#BED3F3"
+            />
+          </span>
+        </div>
+      </span>
+      <span>
+        <div
+          style="width: 25px; height: 25px; font-size: 0px;"
+        >
+          <span>
+            <div
+              style="background: rgb(212, 196, 251); height: 100%; width: 100%; cursor: pointer; position: relative; outline: none;"
+              tabindex="0"
+              title="#D4C4FB"
+            />
+          </span>
+        </div>
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (date widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "date",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="date"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <div
+        class="ui left icon input"
+      >
+        <i
+          aria-hidden="true"
+          class="calendar icon"
+        />
+        <input
+          placeholder="Date"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (datetime widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "datetime",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="datetime"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <div
+        class="ui left icon input"
+      >
+        <i
+          aria-hidden="true"
+          class="calendar icon"
+        />
+        <input
+          placeholder="Date Time"
+          tabindex="0"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (default widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "foo",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="foo"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <div
+        class="ui input"
+      >
+        <input
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (dropdown widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "dropdown",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="dropdown"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="dimmable"
+    >
+      <div
+        class="field"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search selection dropdown"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            Select one...
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            aria-multiselectable="false"
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                No selection
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui inverted dimmer"
+      >
+        <div
+          class="content"
+        >
+          <div
+            class="ui loader"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (image widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "image",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="image"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <input
+      accept="image/*"
+      type="file"
+      value=""
+    />
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (number widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "number",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="number"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <input
+        type="number"
+        value=""
+      />
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (pair_list widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "pair_list",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="pair_list"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <button
+        class="ui compact icon button"
+      >
+        <i
+          aria-hidden="true"
+          class="green add icon"
+        />
+      </button>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (radio widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "radio",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="radio"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <div
+        class="ui radio checkbox"
+      >
+        <input
+          class="hidden"
+          readonly=""
+          tabindex="0"
+          type="radio"
+          value="a"
+        />
+        <label>
+          a
+        </label>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <div
+        class="ui radio checkbox"
+      >
+        <input
+          class="hidden"
+          readonly=""
+          tabindex="0"
+          type="radio"
+          value="b"
+        />
+        <label>
+          b
+        </label>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <div
+        class="ui radio checkbox"
+      >
+        <input
+          class="hidden"
+          readonly=""
+          tabindex="0"
+          type="radio"
+          value="c"
+        />
+        <label>
+          c
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<DynamicField /> matches the latest snapshot (textarea widget) 1`] = `
-<FormField>
-  <label />
-  <FieldByWidget
-    field={
-      Object {
-        "cardinality": undefined,
-        "value": undefined,
-        "widget": "textarea",
-      }
-    }
-    onChange={[MockFunction]}
-    widget="textarea"
-  />
-</FormField>
+<div>
+  <div
+    class="field"
+    data-testid="form-field"
+  >
+    <label />
+    <div
+      class="field"
+    >
+      <textarea
+        rows="3"
+      />
+    </div>
+  </div>
+</div>
 `;

package/src/messages/en.js

@@ -22,6 +22,7 @@ export default {
   "template.field.depends.on": "Source Field",
   "template.field.depends.to_be": "Source Value",
   "template.field.description": "Description",
+  "template.field.editable": "Editable",
   "template.field.hidden_secret": "<Hidden secret value>",
   "template.field.label": "Label",
   "template.field.mandatory.depends": "Mandatory depending on",

package/src/messages/es.js

@@ -22,6 +22,7 @@ export default {
   "template.field.depends.on": "Campo origen",
   "template.field.depends.to_be": "Valor origen",
   "template.field.description": "Descripción",
+  "template.field.editable": "Editable",
   "template.field.hidden_secret": "<Campo secreto oculto>",
   "template.field.mandatory.depends": "Obligatorio dependiente de",
   "template.field.mandatory.depends.on": "Depende de",

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 { useIntl } from "react-intl";
-import { Form, Button, Divider, Segment } from "semantic-ui-react";
+import { Form, Button, Divider, Segment, Checkbox } from "semantic-ui-react";
 import ValuesField from "./ValuesField";
 import ConditionalFieldForm from "./ConditionalFieldForm";
 import MandatoryConditional from "./MandatoryConditional";
@@ -42,8 +42,9 @@ export const FieldForm = ({
     cardinality,
     type,
     widget,
-    disabled,
+    disabledName,
     errors,
+    editable = true,
   } = field;
   const fieldNamePrefix = `${groupNamePrefix}.fields[${fieldIndex}]`;
   const valueName = `${fieldNamePrefix}.values`;
@@ -167,7 +168,7 @@ export const FieldForm = ({
           value={name || ""}
           required
           onChange={onChange}
-          disabled={disabled || hasDependencies}
+          disabled={disabledName || hasDependencies}
           error={
             errors &&
             errors.nameDuplicated && {
@@ -217,6 +218,14 @@ export const FieldForm = ({
           required
           options={getCardinalityOptions(formatMessage)(widget)}
         />
+        <Form.Checkbox
+          name={`${fieldNamePrefix}.editable`}
+          label={formatMessage({ id: "template.field.editable" })}
+          checked={editable}
+          onChange={(e, { name, checked: value }) =>
+            onChange(null, { name, value })
+          }
+        ></Form.Checkbox>
       </Form.Group>
       <ValuesField
         defaultField={defaultField}

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

@@ -29,7 +29,9 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
   useEffect(() => {
     if (template && !_.isNil(template.id)) {
       const content = _.map((g) => {
-        const fields = _.map((f) => ({ ...f, disabled: true }))(g.fields);
+        const fields = _.map((f) => {
+          return { ...f, disabledName: true };
+        })(g.fields);
         return { ...g, fields };
       })(template.content);
       setEditedTemplate({ ...editedTemplate, content });
@@ -65,6 +67,7 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
               "default",
               "subscribable",
               "mandatory",
+              "editable",
             ];
 
             const dependsProperty = _.isEmpty(_.path("depends.on")(field))

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

@@ -41,7 +41,7 @@ describe("<FieldForm />", () => {
       label: "Field 1",
       description: "A field for testing",
       meta: { role: "Data Owner" },
-      disabled: true,
+      disabledName: true,
       widget: "string",
     };
     const fieldIndex = 0;

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

@@ -208,6 +208,14 @@ exports[`<FieldForm /> manages handleCardinalityChange 1`] = `
       selection={true}
       value="?"
     />
+    <FormCheckbox
+      as={[Function]}
+      checked={true}
+      control={[Function]}
+      label="template.field.editable"
+      name="Group.fields[0].editable"
+      onChange={[Function]}
+    />
   </FormGroup>
   <ValuesField
     defaultField="Group.fields[0].default"
@@ -587,6 +595,14 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
       required={true}
       selection={true}
     />
+    <FormCheckbox
+      as={[Function]}
+      checked={true}
+      control={[Function]}
+      label="template.field.editable"
+      name="undefined.fields[0].editable"
+      onChange={[Function]}
+    />
   </FormGroup>
   <ValuesField
     defaultField="undefined.fields[0].default"
@@ -847,6 +863,14 @@ exports[`<FieldForm /> renders MandatoryConditional 1`] = `
       selection={true}
       value="?"
     />
+    <FormCheckbox
+      as={[Function]}
+      checked={true}
+      control={[Function]}
+      label="template.field.editable"
+      name="Group.fields[0].editable"
+      onChange={[Function]}
+    />
   </FormGroup>
   <ValuesField
     defaultField="Group.fields[0].default"
@@ -1246,6 +1270,14 @@ exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
       required={true}
       selection={true}
     />
+    <FormCheckbox
+      as={[Function]}
+      checked={true}
+      control={[Function]}
+      label="template.field.editable"
+      name="Group.fields[0].editable"
+      onChange={[Function]}
+    />
   </FormGroup>
   <ValuesField
     defaultField="Group.fields[0].default"