@truedat/df 8.8.3 → 8.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.8.3",
+  "version": "8.8.4",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,14 +51,14 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.8.3",
+    "@truedat/test": "8.8.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@truedat/core": "8.8.3",
+    "@truedat/core": "8.8.4",
     "axios": "^1.15.0",
     "graphql": "^16.11.0",
     "is-hotkey": "^0.2.0",
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "db057d418d0612dbf385d40c48d5fa6a8258e9ab"
+  "gitHead": "eebd748d118e628959e9d935e9ba9baaebe0a8e1"
 }

package/src/styles/templateForm.less

@@ -0,0 +1,4 @@
+.template-question-popup {
+  width: max-content;
+  max-width: 80vw !important;
+}

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

@@ -58,6 +58,11 @@ exports[`<NewTemplate /> matches the latest snapshot 1`] = `
         >
           <label>
             template.form.name
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
             <div
               class="ui left pointing label"
             >
@@ -68,6 +73,7 @@ exports[`<NewTemplate /> matches the latest snapshot 1`] = `
             class="ui input"
           >
             <input
+              maxlength="31"
               name="name"
               required=""
               type="text"
@@ -80,6 +86,11 @@ exports[`<NewTemplate /> matches the latest snapshot 1`] = `
         >
           <label>
             template.form.label
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
             <div
               class="ui left pointing label"
             >
@@ -90,6 +101,7 @@ exports[`<NewTemplate /> matches the latest snapshot 1`] = `
             class="ui input"
           >
             <input
+              maxlength="31"
               name="label"
               required=""
               type="text"

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

@@ -73,6 +73,11 @@ exports[`<Template /> matches the latest snapshot for empty data 1`] = `
         >
           <label>
             template.form.name
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
             <div
               class="ui left pointing label"
             >
@@ -83,6 +88,7 @@ exports[`<Template /> matches the latest snapshot for empty data 1`] = `
             class="ui input"
           >
             <input
+              maxlength="31"
               name="name"
               readonly=""
               required=""
@@ -96,6 +102,11 @@ exports[`<Template /> matches the latest snapshot for empty data 1`] = `
         >
           <label>
             template.form.label
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
             <div
               class="ui left pointing label"
             >
@@ -106,6 +117,7 @@ exports[`<Template /> matches the latest snapshot for empty data 1`] = `
             class="ui input"
           >
             <input
+              maxlength="31"
               name="label"
               required=""
               type="text"
@@ -444,11 +456,17 @@ exports[`<Template /> matches the latest snapshot with previous data 1`] = `
         >
           <label>
             template.form.name
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
           </label>
           <div
             class="ui input"
           >
             <input
+              maxlength="31"
               name="name"
               readonly=""
               required=""
@@ -462,11 +480,17 @@ exports[`<Template /> matches the latest snapshot with previous data 1`] = `
         >
           <label>
             template.form.label
+            <i
+              aria-hidden="true"
+              class="question circle outline icon"
+              style="cursor: pointer; margin-left: 5px;"
+            />
           </label>
           <div
             class="ui input"
           >
             <input
+              maxlength="31"
               name="label"
               required=""
               type="text"

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

@@ -2,7 +2,15 @@ import _ from "lodash/fp";
 import { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Header, Form, Grid, Label, Divider } from "semantic-ui-react";
+import {
+  Header,
+  Form,
+  Grid,
+  Icon,
+  Label,
+  Divider,
+  Popup,
+} from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { useWebContext } from "@truedat/core/webContext";
 import GroupsList from "./GroupsList";
@@ -31,6 +39,8 @@ const scopeOptions = (formatMessage) =>
     "qxe",
   ]);
 
+const MAX_LENGTH = 31;
+
 export const TemplateForm = ({ loading, template, onSubmit }) => {
   const { formatMessage } = useIntl();
   const { scopesWithRelations = [] } = useWebContext();
@@ -154,10 +164,26 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
         <Form.Input
           name="name"
           width={6}
+          maxLength={MAX_LENGTH}
           label={
             <label>
               {formatMessage({ id: "template.form.name" })}
-              {isNullOrEmpty(nameValue) ? (
+              <Popup
+                className="template-question-popup"
+                trigger={
+                  <Icon
+                    style={{
+                      cursor: "pointer",
+                      marginLeft: "5px",
+                    }}
+                    name="question circle outline"
+                  />
+                }
+                content={<FormattedMessage id="template.form.name.popup" />}
+                on="click"
+                hideOnScroll
+              />
+              {isNameEmpty ? (
                 <Label pointing="left">
                   <FormattedMessage id="template.form.validation.empty_required" />
                 </Label>
@@ -172,10 +198,26 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
         <Form.Input
           name="label"
           width={6}
+          maxLength={MAX_LENGTH}
           label={
             <label>
               {formatMessage({ id: "template.form.label" })}
-              {isNullOrEmpty(labelValue) ? (
+              <Popup
+                className="template-question-popup"
+                trigger={
+                  <Icon
+                    style={{
+                      cursor: "pointer",
+                      marginLeft: "5px",
+                    }}
+                    name="question circle outline"
+                  />
+                }
+                content={<FormattedMessage id="template.form.label.popup" />}
+                on="click"
+                hideOnScroll
+              />
+              {isLabelEmpty ? (
                 <Label pointing="left">
                   <FormattedMessage id="template.form.validation.empty_required" />
                 </Label>
@@ -194,7 +236,7 @@ export const TemplateForm = ({ loading, template, onSubmit }) => {
           label={
             <label>
               {formatMessage({ id: "template.form.scope" })}
-              {isNullOrEmpty(scopeValue) ? (
+              {isScopeEmpty ? (
                 <Label pointing="left">
                   <FormattedMessage id="template.form.validation.empty_required" />
                 </Label>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
 import { render, waitForLoad } from "@truedat/test/render";
 import TemplateForm from "../TemplateForm";
 
@@ -195,4 +195,108 @@ describe("<TemplateForm />", () => {
     const submittedPayload = onSubmit.mock.calls[0][0];
     expect(submittedPayload.template.template_resource_relations).toEqual([]);
   });
+
+  it("should limit name input to 31 characters", async () => {
+    const user = userEvent.setup({ delay: null });
+    const newTemplate = { ...validTemplate, id: undefined, name: "" };
+    const renderOpts = {
+      state: { templateDeleting: false, templateSaving: false },
+    };
+    const rendered = render(
+      <TemplateForm
+        template={newTemplate}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
+    );
+    const nameInput = rendered
+      .getAllByRole("textbox")
+      .find((input) => input.name === "name");
+
+    expect(nameInput).toBeInTheDocument();
+    await user.type(nameInput, "a".repeat(40));
+    expect(nameInput.value.length).toBeLessThanOrEqual(31);
+    expect(nameInput).toHaveAttribute("maxLength", "31");
+  });
+
+  it("should limit label input to 31 characters", async () => {
+    const user = userEvent.setup({ delay: null });
+    const newTemplate = { ...validTemplate, id: undefined, label: "" };
+    const renderOpts = {
+      state: { templateDeleting: false, templateSaving: false },
+    };
+    const rendered = render(
+      <TemplateForm
+        template={newTemplate}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
+    );
+    const labelInput = rendered
+      .getAllByRole("textbox")
+      .find((input) => input.name === "label");
+
+    expect(labelInput).toBeInTheDocument();
+    await user.type(labelInput, "b".repeat(40));
+    expect(labelInput.value.length).toBeLessThanOrEqual(31);
+    expect(labelInput).toHaveAttribute("maxLength", "31");
+  });
+
+  it("should truncate pasted text in name input to 31 characters", async () => {
+    const user = userEvent.setup({ delay: null });
+    const renderOpts = {
+      state: { templateDeleting: false, templateSaving: false },
+    };
+    const rendered = render(
+      <TemplateForm
+        template={validTemplate}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
+    );
+    const nameInput = rendered
+      .getAllByRole("textbox")
+      .find((input) => input.name === "name");
+
+    expect(nameInput).toBeInTheDocument();
+    await user.click(nameInput);
+    fireEvent.paste(nameInput, {
+      clipboardData: {
+        getData: () => "x".repeat(50),
+      },
+    });
+    fireEvent.change(nameInput, { target: { value: "x".repeat(50) } });
+    expect(nameInput).toHaveAttribute("maxLength", "31");
+  });
+
+  it("should truncate pasted text in label input to 31 characters", async () => {
+    const user = userEvent.setup({ delay: null });
+    const renderOpts = {
+      state: { templateDeleting: false, templateSaving: false },
+    };
+    const rendered = render(
+      <TemplateForm
+        template={validTemplate}
+        onSubmit={jest.fn()}
+        loading={false}
+      />,
+      renderOpts,
+    );
+    const labelInput = rendered
+      .getAllByRole("textbox")
+      .find((input) => input.name === "label");
+
+    expect(labelInput).toBeInTheDocument();
+    await user.click(labelInput);
+    fireEvent.paste(labelInput, {
+      clipboardData: {
+        getData: () => "x".repeat(50),
+      },
+    });
+    fireEvent.change(labelInput, { target: { value: "x".repeat(50) } });
+    expect(labelInput).toHaveAttribute("maxLength", "31");
+  });
 });

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

@@ -22,11 +22,17 @@ exports[`<TemplateForm /> matches snapshot when scope has no relations 1`] = `
       >
         <label>
           template.form.name
+          <i
+            aria-hidden="true"
+            class="question circle outline icon"
+            style="cursor: pointer; margin-left: 5px;"
+          />
         </label>
         <div
           class="ui input"
         >
           <input
+            maxlength="31"
             name="name"
             readonly=""
             required=""
@@ -40,11 +46,17 @@ exports[`<TemplateForm /> matches snapshot when scope has no relations 1`] = `
       >
         <label>
           template.form.label
+          <i
+            aria-hidden="true"
+            class="question circle outline icon"
+            style="cursor: pointer; margin-left: 5px;"
+          />
         </label>
         <div
           class="ui input"
         >
           <input
+            maxlength="31"
             name="label"
             required=""
             type="text"
@@ -1122,11 +1134,17 @@ exports[`<TemplateForm /> matches snapshot when scope has relations 1`] = `
       >
         <label>
           template.form.name
+          <i
+            aria-hidden="true"
+            class="question circle outline icon"
+            style="cursor: pointer; margin-left: 5px;"
+          />
         </label>
         <div
           class="ui input"
         >
           <input
+            maxlength="31"
             name="name"
             readonly=""
             required=""
@@ -1140,11 +1158,17 @@ exports[`<TemplateForm /> matches snapshot when scope has relations 1`] = `
       >
         <label>
           template.form.label
+          <i
+            aria-hidden="true"
+            class="question circle outline icon"
+            style="cursor: pointer; margin-left: 5px;"
+          />
         </label>
         <div
           class="ui input"
         >
           <input
+            maxlength="31"
             name="label"
             required=""
             type="text"