@truedat/df 8.5.7 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "8.5.7",
+  "version": "8.5.8",
   "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.5.7",
+    "@truedat/test": "8.5.8",
     "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.5.7",
+    "@truedat/core": "8.5.8",
     "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": "871357888d97c203cf009a04878e0277cff6af9b"
+  "gitHead": "61ad9443b3d822d30dcfa977f5fad3494b3ed5b4"
 }

package/src/components/DynamicFieldValue.js

@@ -7,7 +7,6 @@ import DomainPreview from "./widgets/DomainPreview";
 import HierarchyPreview from "./widgets/HierarchyPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import FieldViewerValue from "./FieldViewerValue";
-import "../styles/fieldGroupDetail.less";
 
 export const DynamicFieldValue = ({
   label,

package/src/components/EditableDynamicFieldValue.js

@@ -8,7 +8,6 @@ import DomainPreview from "./widgets/DomainPreview";
 import SystemPreview from "./widgets/SystemPreview";
 import DynamicField from "./widgets/DynamicField";
 import FieldViewerValue from "./FieldViewerValue";
-import "../styles/fieldGroupDetail.less";
 
 export const EditableDynamicFieldValue = (props) => {
   const [updatedFailed, setUpdateFailed] = useState(false);

package/src/components/FieldGroupDetail.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { Divider, List, Segment } from "semantic-ui-react";
 import DynamicFieldValue from "./DynamicFieldValue";
 import EditableDynamicFieldValue from "./EditableDynamicFieldValue";
-import "../styles/fieldGroupDetail.less";
 
 const parseField = (field) => {
   const { value, values } = field;

package/src/components/FieldGroupWithTranslations.js

@@ -25,6 +25,7 @@ export const FieldGroupWithTranslations = ({
     setAltLang,
     isMultilingual,
   } = useLanguage();
+  const selectedAltLang = altLang || altLangs[0];
   const hasTranslations = hasTranslatableFields(
     fieldsByLang[defaultLang] || []
   );
@@ -58,7 +59,7 @@ export const FieldGroupWithTranslations = ({
       )}
       {hasTranslations && isMultilingual ? (
         <>
-          <Grid>
+          <Grid className="translation-tabs-header-grid">
             <Grid.Row columns={2}>
               <Grid.Column>
                 <Tab
@@ -79,7 +80,7 @@ export const FieldGroupWithTranslations = ({
                 <LanguagesTabs
                   altLangs={altLangs}
                   requiredLangs={requiredLangs}
-                  selectedLang={altLang}
+                  selectedLang={selectedAltLang}
                   onLangChange={setAltLang}
                 />
               </Grid.Column>
@@ -115,17 +116,17 @@ export const FieldGroupWithTranslations = ({
                       }
                     </Grid.Column>
                     <Grid.Column>
-                      {isTranslatableField(field) && fieldsByLang[altLang] ? (
-                        <I18nProvider lang={altLang}>
+                      {isTranslatableField(field) && selectedAltLang ? (
+                        <I18nProvider lang={selectedAltLang}>
                           <DynamicField
                             scope={scope}
-                            field={getFieldForLang(field, altLang)}
-                            fields={fieldsByLang[altLang]}
+                            field={getFieldForLang(field, selectedAltLang)}
+                            fields={fieldsByLang[selectedAltLang] || []}
                             isModification={isModification}
-                            key={`${field.name}-${altLang}`}
+                            key={`${field.name}-${selectedAltLang}`}
                             onChange={(e, { name, value }) =>
                               onFieldChange(e, {
-                                lang: altLang,
+                                lang: selectedAltLang,
                                 name,
                                 value,
                               })

package/src/components/FieldViewerValue.js

@@ -5,7 +5,6 @@ import { Icon, Label, Table } from "semantic-ui-react";
 import { MarkdownReader, SafeLink } from "@truedat/core/components";
 import ImagePreview from "./widgets/ImagePreview";
 import SystemPreview from "./widgets/SystemPreview";
-import "../styles/fieldGroupDetail.less";
 
 export const LocalizedFieldValue = ({ label, value }) => {
   const { formatMessage } = useIntl();

package/src/components/SelectDynamicFormWithTranslations.js

@@ -1,13 +1,15 @@
 import _ from "lodash/fp";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { Grid } from "semantic-ui-react";
+import { Grid, Header } from "semantic-ui-react";
 import { TemplateSelector } from "@truedat/core/components";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
 import { useLanguage } from "@truedat/core/i18n";
+import { useIntl } from "react-intl";
 import DynamicFormWithTranslations from "./DynamicFormWithTranslations";
 
 export default function SelectDynamicFormWithTranslations({
+  beforeSelector,
   i18nContent,
   onChangeContent,
   domainIds,
@@ -24,12 +26,22 @@ export default function SelectDynamicFormWithTranslations({
   disabled,
   disableSelector,
   selectedTemplate,
+  showTemplateSectionTitle,
 }) {
   const [thisTemplate, setThisTemplate] = useState();
-  const [showSelector, setShowSelector] = useState(false);
-  const template = selectedTemplate || thisTemplate;
-  const { defaultLang, enabledLangs, isMultilingual } = useLanguage();
-  const domain = _.size(domainIds) > 0 ? { id: _.head(domainIds) } : null;
+  const template = _.isEmpty(selectedTemplate) ? thisTemplate : selectedTemplate;
+  const { enabledLangs } = useLanguage();
+  const { formatMessage } = useIntl();
+  const domainIdsArray = _.isArray(domainIds) ? domainIds : [];
+  const domain = _.size(domainIdsArray) > 0 ? { id: _.head(domainIdsArray) } : null;
+  const hasDomainSelection = domain !== null;
+  const domainKey = domainIdsArray.join(",");
+  const templateTitle =
+    template &&
+    formatMessage({
+      id: `templates.${template.label || template.name}`,
+      defaultMessage: template.label || template.name,
+    });
 
   const handleChange = (content, currentTemplate = thisTemplate, lang) => {
     onChangeContent(lang, {
@@ -38,6 +50,21 @@ export default function SelectDynamicFormWithTranslations({
     });
   };
 
+  useEffect(() => {
+    if (actionKey === "create") {
+      setThisTemplate(undefined);
+      onChangeTemplate(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [domainKey]);
+
+  const applyTemplateToLangs = (tpl) => {
+    enabledLangs.forEach((lang) => {
+      const content = tpl ? applyTemplate(tpl)(i18nContent[lang] || {}, domain?.id) : {};
+      handleChange(content, tpl, lang);
+    });
+  };
+
   const handleLoad = ({ templates }) => {
     const templateFound = name
       ? _.find(_.propEq("name", name))(templates)
@@ -45,19 +72,10 @@ export default function SelectDynamicFormWithTranslations({
         ? _.head(templates)
         : null;
 
-    setShowSelector(templates.length > 1);
-
-    if (templateFound && (!name || templateFound.name === name)) {
+    if (templateFound) {
       onChangeTemplate(templateFound);
       setThisTemplate(templateFound);
-
-      enabledLangs.forEach((lang) => {
-        const contentForLang = applyTemplate(templateFound)(
-          i18nContent[lang]?.content || {},
-          domain?.id
-        );
-        handleChange(contentForLang, templateFound, defaultLang);
-      });
+      applyTemplateToLangs(templateFound);
     }
   };
 
@@ -65,42 +83,44 @@ export default function SelectDynamicFormWithTranslations({
     if (selectedTpl !== thisTemplate) {
       onChangeTemplate(selectedTpl);
       setThisTemplate(selectedTpl);
-
-      enabledLangs.forEach((lang) => {
-        const languageContent = i18nContent[lang]?.content || {};
-        const processedContent = selectedTpl
-          ? applyTemplate(selectedTpl)(languageContent, domain?.id)
-          : {};
-        handleChange(processedContent, selectedTpl, defaultLang);
-      });
+      applyTemplateToLangs(selectedTpl);
     }
   };
 
   return (
     <>
-      {(!actionKey || actionKey === "create") && (
-        <Grid style={{ display: showSelector ? "block" : "none" }}>
-          <Grid.Row columns={isMultilingual ? 2 : 1}>
-            <Grid.Column>
-              <TemplateSelector
-                scope={scope}
-                domainIds={domainIds}
-                hideLabel={hideLabel}
-                onChange={handleSelected}
-                onLoad={handleLoad}
-                label={label}
-                placeholder={placeholder}
-                required={required}
-                selectedValue={template?.id}
-                disabled={disabled || disableSelector}
-              />
-            </Grid.Column>
-            {isMultilingual && <Grid.Column />}
+      {(beforeSelector || (hasDomainSelection && (!actionKey || actionKey === "create"))) && (
+        <Grid stackable>
+          <Grid.Row columns={beforeSelector ? 2 : 1} verticalAlign="bottom">
+            {beforeSelector ? <Grid.Column>{beforeSelector}</Grid.Column> : null}
+            {hasDomainSelection && (!actionKey || actionKey === "create") ? (
+              <Grid.Column>
+                <TemplateSelector
+                  scope={scope}
+                  domainIds={domainIds}
+                  hideLabel={hideLabel}
+                  onChange={handleSelected}
+                  onLoad={handleLoad}
+                  label={label}
+                  placeholder={placeholder}
+                  required={required}
+                  liftRequiredLabel
+                  selectedValue={template?.id}
+                  disabled={disabled || disableSelector}
+                  showSingleOption
+                />
+              </Grid.Column>
+            ) : null}
           </Grid.Row>
         </Grid>
       )}
       {!disabled && template && (
         <>
+          {showTemplateSectionTitle && templateTitle ? (
+            <Header as="h3" dividing>
+              {templateTitle}
+            </Header>
+          ) : null}
           {header}
           <DynamicFormWithTranslations
             template={template}
@@ -116,6 +136,7 @@ export default function SelectDynamicFormWithTranslations({
 }
 
 SelectDynamicFormWithTranslations.propTypes = {
+  beforeSelector: PropTypes.node,
   i18nContent: PropTypes.object,
   onChangeContent: PropTypes.func,
   domainIds: PropTypes.array,
@@ -132,4 +153,5 @@ SelectDynamicFormWithTranslations.propTypes = {
   disabled: PropTypes.bool,
   disableSelector: PropTypes.bool,
   selectedTemplate: PropTypes.object,
+  showTemplateSectionTitle: PropTypes.bool,
 };

package/src/components/__tests__/DynamicFormWithTranslations.spec.js

@@ -118,5 +118,38 @@ describe("<DynamicFormWithTranslations /> markdown", () => {
       },
     });
   });
-});
 
+  it("renders the alternate language field when its content is missing", () => {
+    const template = {
+      scope: "bg",
+      name: "tmpl",
+      content: [
+        {
+          name: "g1",
+          fields: [
+            {
+              name: "md-field",
+              label: "md-label",
+              type: "markdown",
+              widget: "markdown",
+              cardinality: "1",
+            },
+          ],
+        },
+      ],
+    };
+
+    const rendered = render(
+      <DynamicFormWithTranslations
+        applyTemplate={(content) => content}
+        i18nContent={{
+          es: { "md-field": { value: "## ES", origin: "user" } },
+        }}
+        onChange={jest.fn()}
+        template={template}
+      />,
+    );
+
+    expect(rendered.getAllByText(/edit markdown/i)).toHaveLength(2);
+  });
+});

package/src/components/__tests__/SelectDynamicFormWithTranslations.spec.js

@@ -0,0 +1,86 @@
+import { render, waitFor } from "@testing-library/react";
+import SelectDynamicFormWithTranslations from "../SelectDynamicFormWithTranslations";
+
+const mockTemplate = {
+  id: "1",
+  name: "business_term",
+  content: [
+    {
+      name: "main",
+      fields: [
+        {
+          name: "description",
+          label: "Description",
+          type: "string",
+          widget: "textarea",
+        },
+      ],
+    },
+  ],
+};
+
+jest.mock("@truedat/core/i18n", () => ({
+  useLanguage: () => ({
+    defaultLang: "en",
+    enabledLangs: ["en", "es"],
+    isMultilingual: true,
+  }),
+}));
+
+jest.mock("react-intl", () => ({
+  useIntl: () => ({
+    formatMessage: ({ defaultMessage, id }) => defaultMessage || id,
+  }),
+}));
+
+jest.mock("@truedat/core/components", () => {
+  const React = require("react");
+
+  return {
+    TemplateSelector: ({ onLoad }) => {
+      React.useEffect(() => {
+        onLoad({ templates: [mockTemplate] });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return null;
+    },
+  };
+});
+
+jest.mock("../DynamicFormWithTranslations", () => () => null);
+
+describe("<SelectDynamicFormWithTranslations />", () => {
+  it("loads template content for each enabled language", async () => {
+    const onChangeContent = jest.fn();
+
+    render(
+      <SelectDynamicFormWithTranslations
+        actionKey="create"
+        domainIds={[1]}
+        i18nContent={{
+          en: { description: { value: "English text", origin: "user" } },
+          es: { description: { value: "Texto español", origin: "user" } },
+        }}
+        onChangeContent={onChangeContent}
+        onChangeTemplate={jest.fn()}
+        scope="bg"
+      />
+    );
+
+    await waitFor(() => {
+      expect(onChangeContent).toHaveBeenCalledWith("en", {
+        content: {
+          description: { value: "English text", origin: "user" },
+        },
+        valid: [],
+      });
+      expect(onChangeContent).toHaveBeenCalledWith("es", {
+        content: {
+          description: { value: "Texto español", origin: "user" },
+        },
+        valid: [],
+      });
+    });
+  });
+});

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

@@ -76,13 +76,8 @@ exports[`<DropdownField /> matches the latest snapshot when type domain 1`] = `
         tabindex="0"
       >
         <div
-          class="ui label"
-        >
-          <i
-            aria-hidden="true"
-            class="delete icon"
-          />
-        </div>
+          class="text"
+        />
         <i
           aria-hidden="true"
           class="dropdown icon"

package/src/styles/fieldGroupDetail.less

@@ -1,26 +1,26 @@
 .list > .item > .header.dynamic-field-header {
   margin-bottom: 10px;
 }
-.list > .item > .header.dynamic-field-header i{
+.list > .item > .header.dynamic-field-header i {
   visibility: hidden;
 }
 
-.list > .item > .header.editable-dynamic-field-header{
+.list > .item > .header.editable-dynamic-field-header {
   cursor: pointer;
 }
 
-.list > .item > .header.editable-dynamic-field-header i{
+.list > .item > .header.editable-dynamic-field-header i {
   color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
   margin-left: 5px;
   visibility: hidden;
 }
 
-.list > .item > .header.editable-dynamic-field-header:hover i{
+.list > .item > .header.editable-dynamic-field-header:hover i {
   visibility: visible;
 }
 
-.editable-dynamic-field-buttons{
+.editable-dynamic-field-buttons {
   padding: 8px;
 }
 
@@ -29,41 +29,83 @@
 }
 
 @keyframes shake {
-  10%, 90% {
+  10%,
+  90% {
     transform: translate3d(-1px, 0, 0);
   }
-  
-  20%, 80% {
+
+  20%,
+  80% {
     transform: translate3d(2px, 0, 0);
   }
 
-  30%, 50%, 70% {
+  30%,
+  50%,
+  70% {
     transform: translate3d(-4px, 0, 0);
   }
 
-  40%, 60% {
+  40%,
+  60% {
     transform: translate3d(4px, 0, 0);
   }
 }
 
 .hidden-secret-value {
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
   color: #888;
 }
 
-
 .identifier-value {
-  font-family: 'Courier New', Courier, monospace;
+  font-family: "Courier New", Courier, monospace;
   font-size: medium;
 }
 .default-value {
   white-space: pre-wrap;
 }
 
-.attached-tab.ui.menu.attached.top {
-  border: 1px solid #ddd;
-  border-radius: 4px 4px 0 0;
-  margin: 0;
+.translation-tabs-header-grid.ui.grid {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.translation-tabs-header-grid.ui.grid > .row {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.translation-tabs-header-grid.ui.grid > .row > .column:first-child {
+  padding-left: 0;
+}
+
+.translation-tabs-header-grid.ui.grid > .row > .column:last-child {
+  padding-right: 0;
+}
+
+.translation-tabs-header-grid.ui.grid
+  > .row
+  > .column:first-child
+  .attached-tab[attached="top"]
+  > .ui.attached.tabular.menu {
+  border-left: none;
+  border-top-left-radius: 0;
+}
+
+.translation-tabs-header-grid.ui.grid
+  > .row
+  .ui.attached.tabular.menu
+  > .item:first-child {
+  margin-left: -1px;
+}
+
+.translation-tabs-header-grid.ui.grid
+  > .row
+  > .column:first-child
+  .attached-tab[attached="top"]
+  > .ui.attached.tabular.menu
+  > .item:first-child {
+  border-left: 1px solid #ddd;
+  border-top-left-radius: 4px;
 }
 
 .attached-segment.ui.attached.segment.bottom {
@@ -71,4 +113,4 @@
   border-top: none;
   border-radius: 0 0 4px 4px;
   padding: 1em;
-}
+}

package/src/templates/components/Templates.js

@@ -3,8 +3,6 @@ import {
   Header,
   Icon,
   Segment,
-  Grid,
-  Container,
   Button,
 } from "semantic-ui-react";
 import { Link } from "react-router";
@@ -31,21 +29,16 @@ export default function Templates() {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Grid>
-        <Grid.Column width={8}>
-          <TemplateFilters />
-        </Grid.Column>
-        <Grid.Column width={8}>
-          <Container textAlign="right">
-            <Button
-              primary
-              as={Link}
-              to={TEMPLATES_NEW}
-              content={<FormattedMessage id="templates.actions.create" />}
-            />
-          </Container>
-        </Grid.Column>
-      </Grid>
+      <Segment basic clearing>
+        <TemplateFilters />
+        <Button
+          primary
+          floated="right"
+          as={Link}
+          to={TEMPLATES_NEW}
+          content={<FormattedMessage id="templates.actions.create" />}
+        />
+      </Segment>
       <TemplatesTable />
     </Segment>
   );