@truedat/bg 7.2.11 → 7.3.0

package/src/concepts/components/ConceptForm.js

@@ -1,169 +1,331 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, lazy } from "react";
 import PropTypes from "prop-types";
-import { Form, Header, Label } from "semantic-ui-react";
+import {
+  Form,
+  Header,
+  Label,
+  Grid,
+  Tab,
+  Button,
+  Container,
+  Segment,
+  Icon,
+} from "semantic-ui-react";
 import { useIntl, FormattedMessage } from "react-intl";
-import { apiJsonPost } from "@truedat/core/services/api";
-import { DomainSelector } from "@truedat/core/components";
 import { useAvailabilityCheck } from "@truedat/ai/hooks/useSuggestions";
+import { apiJsonPost } from "@truedat/core/services/api";
 import { API_SUGGESTIONS_REQUEST } from "@truedat/ai/api";
+import {
+  DomainSelector,
+  LanguagesTabs,
+  HistoryBackButton,
+} from "@truedat/core/components";
+import { useLanguage, I18nProvider } from "@truedat/core/i18n";
 import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 
-const SelectableDynamicForm = React.lazy(() =>
-  import("@truedat/df/components/SelectableDynamicForm")
+const SelectDynamicFormWithTranslations = lazy(() =>
+  import("@truedat/df/components/SelectDynamicFormWithTranslations")
 );
 
 const ConceptForm = ({
   actionKey,
   domainId,
-  template,
-  concept,
+  i18nConcept,
   loading,
-  defaultContent,
-  noTranslatableFields,
-  onChangeDomainId,
-  onChangeName,
-  onChangeTemplate,
-  onChangeConceptContent,
+  onSubmit,
+  setDomainId,
+  setI18nConcept,
+  setTemplate,
+  template,
 }) => {
   const { formatMessage } = useIntl();
+  const {
+    defaultLang,
+    altLangs,
+    requiredLangs,
+    altLang,
+    isMultilingual,
+    setAltLang,
+  } = useLanguage();
+  console.log("useLanguage", defaultLang);
   const [domains, setDomains] = useState();
   const [domainsLoading, setDomainsLoading] = useState(true);
   const [hasSuggestions, setHasSuggestions] = useState(false);
-
+  const isNonEmptyString = useCallback(_.flow(_.trim, _.negate(_.isEmpty)), []);
   const { trigger: checkSuggestionAvailability } = useAvailabilityCheck();
-
-  const templateDisabled = !domainId || (!concept?.name && concept?.is_default);
   const templateId = template?.id;
 
+  const handleDomainChange = (_e, { value }) => setDomainId(_.toInteger(value));
+  const handleTemplateChange = (value) => setTemplate(value);
+  const handleI18nNameChange = (lang, name) =>
+    setI18nConcept(_.set(`${lang}.name`, name, i18nConcept));
+  const handleI18nConceptContentChange = (lang, { content }) => {
+    setI18nConcept({
+      ...i18nConcept,
+      [lang]: { ...i18nConcept[lang], content: { ...content } },
+    });
+  };
+
   useEffect(() => {
     if (templateId && domainId) {
       checkSuggestionAvailability({
         template_id: templateId,
         domain_ids: [domainId],
         resource_type: "business_concept",
-      }).then((prop) =>
-        setHasSuggestions(_.prop("data.data.status")(prop) == "ok")
+      }).then((res) =>
+        setHasSuggestions(_.get("data.data.status", res) === "ok")
       );
     }
-  }, [templateId, domainId]);
+  }, [templateId, domainId, checkSuggestionAvailability]);
+
+  useEffect(() => {
+    if (domainsLoading && domainId) setDomainsLoading(false);
+  }, [domainsLoading, domainId]);
 
   const handleDomainsLoaded = ({ domains }) => {
     setDomains(domains);
     setDomainsLoading(false);
   };
 
-  if (domainsLoading && domainId) {
-    setDomainsLoading(false);
-  }
-
   const requestAiSuggestion = (callback) => {
-    const domainName = _.flow(
-      _.find({ id: domainId }),
-      _.prop("name")
-    )(domains);
-    const body = {
+    const domainName = _.get("name", _.find({ id: domainId }, domains));
+    apiJsonPost(API_SUGGESTIONS_REQUEST, {
       resource_type: "business_concept",
       resource_body: {
-        name: concept.name,
+        name: i18nConcept?.[defaultLang]?.name || "",
         domain: domainName,
         type: template?.name,
       },
       domain_ids: [domainId],
       template_id: templateId,
-    };
-    apiJsonPost(API_SUGGESTIONS_REQUEST, body).then(callback);
+    }).then(callback);
   };
 
-  const handleOnChangeConceptContent = (content) =>
-    onChangeConceptContent(concept.lang, content);
-
   const applySuggestions = (suggestions) => {
-    onChangeConceptContent(concept.lang, {
-      content: { ...concept?.content, ...suggestions },
+    handleI18nConceptContentChange(defaultLang, {
+      content: { ...i18nConcept[defaultLang]?.content, ...suggestions },
     });
   };
 
-  return (
+  const renderNameField = useCallback(
+    (lang, value, onChange, showValidation = false) => (
+      <I18nProvider lang={lang}>
+        <Form.Field required={requiredLangs.includes(lang)}>
+          <label>
+            <FormattedMessage id="concepts.props.name" />
+            {showValidation &&
+              requiredLangs.includes(lang) &&
+              _.isEmpty(value) && (
+                <Label pointing="left">
+                  <FormattedMessage id="template.form.validation.empty_required" />
+                </Label>
+              )}
+          </label>
+          <Form.Input
+            name="name"
+            value={value || ""}
+            onChange={(_e, { value }) => onChange(lang, value)}
+          />
+        </Form.Field>
+      </I18nProvider>
+    ),
+    [requiredLangs, i18nConcept]
+  );
+
+  const renderFormHeader = () => (
     <>
-      <Form loading={loading || domainsLoading}>
-        {actionKey == "create" ? (
+      {!isMultilingual ? (
+        renderNameField(
+          defaultLang,
+          i18nConcept[defaultLang]?.name,
+          handleI18nNameChange,
+          true
+        )
+      ) : (
+        <>
+          <Grid style={{ background: "white" }}>
+            <Grid.Row columns={2}>
+              <Grid.Column>
+                <Tab
+                  attached="top"
+                  panes={[
+                    {
+                      menuItem: formatMessage({
+                        id: `i18n.messages.locale.${defaultLang}`,
+                        defaultMessage: defaultLang,
+                      }),
+                    },
+                  ]}
+                  activeIndex={0}
+                />
+              </Grid.Column>
+              <Grid.Column>
+                <LanguagesTabs
+                  altLangs={altLangs}
+                  requiredLangs={requiredLangs}
+                  selectedLang={altLang}
+                  onLangChange={setAltLang}
+                />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+          <Segment attached="bottom" className="attached-segment">
+            <Grid className="translation-tabs-grid">
+              <Grid.Row columns={2}>
+                <Grid.Column>
+                  {renderNameField(
+                    defaultLang,
+                    i18nConcept[defaultLang]?.name,
+                    handleI18nNameChange
+                  )}
+                </Grid.Column>
+                <Grid.Column>
+                  {renderNameField(
+                    altLang,
+                    i18nConcept[altLang]?.name,
+                    handleI18nNameChange
+                  )}
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Segment>
+        </>
+      )}
+      {hasSuggestions && (
+        <Grid>
+          <Grid.Row columns={isMultilingual ? 2 : 1}>
+            <Grid.Column>
+              <SuggestionsWidget
+                requestAiSuggestion={requestAiSuggestion}
+                template={template}
+                applySuggestions={applySuggestions}
+                isModification
+                enableRequestButton={!_.isEmpty(i18nConcept[defaultLang]?.name)}
+                disabledButtonMessage={formatMessage({
+                  id: "template.form.validation.name_required",
+                })}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      )}
+    </>
+  );
+
+  const validDomain = () => _.isFinite(domainId);
+  const validNames = () =>
+    _.flow(
+      _.filter("is_required"),
+      _.map("name"),
+      _.every(isNonEmptyString)
+    )(i18nConcept);
+  const validTemplate = () =>
+    _.isObject(template) && isNonEmptyString(template?.name);
+  const isInvalid = !validDomain() || !validNames() || !validTemplate();
+
+  const renderDomainSelector = () =>
+    actionKey === "create" &&
+    (isMultilingual ? (
+      <Grid.Row columns={2}>
+        <Grid.Column>
           <DomainSelector
             action="createBusinessConcept"
             label={formatMessage({ id: "domain.selector.label" })}
             labels
             required
-            disabled={!concept?.is_default}
-            onChange={onChangeDomainId}
+            disabled={!(i18nConcept[defaultLang]?.is_default ?? true)}
+            onChange={handleDomainChange}
             onLoad={handleDomainsLoaded}
             value={domainId}
           />
-        ) : null}
+        </Grid.Column>
+        <Grid.Column />
+      </Grid.Row>
+    ) : (
+      <DomainSelector
+        action="createBusinessConcept"
+        label={formatMessage({ id: "domain.selector.label" })}
+        labels
+        required
+        disabled={!(i18nConcept[defaultLang]?.is_default ?? true)}
+        onChange={handleDomainChange}
+        onLoad={handleDomainsLoaded}
+        value={domainId}
+      />
+    ));
 
-        <Form.Field required>
-          <label>
-            <FormattedMessage id="concepts.props.name" />
-            {_.isEmpty(concept?.name) ? (
-              <Label pointing="left">
-                <FormattedMessage id="template.form.validation.empty_required" />
-              </Label>
-            ) : null}
-          </label>
-          <Form.Input
-            name="name"
-            value={concept?.name}
-            onChange={(_e, { value }) => onChangeName(concept?.lang, value)}
-          />
-        </Form.Field>
-        <SelectableDynamicForm
-          key={concept?.lang}
-          disableSelector={!concept?.is_default}
-          disabled={templateDisabled}
-          scope="bg"
-          domainIds={_.isNil(domainId) ? null : [domainId]}
-          required
-          header={
-            <>
-              <Header
-                as="h3"
-                content={formatMessage({
-                  id: "concepts.form.aditional_fields",
-                })}
-              />
-              {hasSuggestions && concept?.is_default ? (
-                <SuggestionsWidget
-                  requestAiSuggestion={requestAiSuggestion}
-                  template={template}
-                  applySuggestions={applySuggestions}
-                  isModification={true}
-                />
-              ) : null}
-            </>
+  const commonForm = (
+    <>
+      {isMultilingual ? (
+        <Grid>{renderDomainSelector()}</Grid>
+      ) : (
+        renderDomainSelector()
+      )}
+      <SelectDynamicFormWithTranslations
+        scope="bg"
+        domainIds={domainId ? [domainId] : null}
+        required
+        header={renderFormHeader()}
+        i18nContent={_.mapValues("content", i18nConcept)}
+        name={template?.name}
+        actionKey={actionKey}
+        onChangeContent={handleI18nConceptContentChange}
+        onChangeTemplate={handleTemplateChange}
+        selectedTemplate={template}
+      />
+      <div className="concept-forms-actions actions">
+        <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
+        <Button
+          primary
+          disabled={isInvalid}
+          onClick={onSubmit}
+          content={formatMessage({ id: `actions.${actionKey}` })}
+        />
+      </div>
+    </>
+  );
+
+  const renderHeader = () => (
+    <Header as="h2">
+      <Icon name="book" />
+      <Header.Content>
+        <FormattedMessage
+          id={
+            actionKey === "create"
+              ? "concepts.actions.create"
+              : "concepts.header.edit"
           }
-          content={{ ...defaultContent, ...concept?.content }}
-          name={template?.name}
-          noTranslatableFields={noTranslatableFields}
-          actionKey={actionKey}
-          onChange={handleOnChangeConceptContent}
-          onNameChange={onChangeName}
-          onTemplateChange={onChangeTemplate}
-          selectedTemplate={template}
         />
+      </Header.Content>
+    </Header>
+  );
+
+  return isMultilingual ? (
+    <>
+      {renderHeader()}
+      <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
+        {commonForm}
       </Form>
     </>
+  ) : (
+    <Container as={Segment} text>
+      {renderHeader()}
+      <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
+        {commonForm}
+      </Form>
+    </Container>
   );
 };
 
 ConceptForm.propTypes = {
   domainId: PropTypes.number,
   template: PropTypes.object,
-  concept: PropTypes.object,
-  defaultContent: PropTypes.object,
-  noTranslatableFields: PropTypes.array,
-  onChangeDomainId: PropTypes.func,
-  onChangeName: PropTypes.func,
-  onChangeTemplate: PropTypes.func,
-  onChangeConceptContent: PropTypes.func,
+  i18nConcept: PropTypes.object,
+  onSubmit: PropTypes.func,
+  setDomainId: PropTypes.func,
+  setI18nConcept: PropTypes.func,
+  setTemplate: PropTypes.func,
   actionKey: PropTypes.string,
   loading: PropTypes.bool,
 };

package/src/concepts/components/__tests__/ConceptForm.spec.js

@@ -1,12 +1,7 @@
 import React, { Suspense } from "react";
 import { waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
-import {
-  domainsMock,
-  multipleTemplatesMock,
-  singleTemplateMock,
-} from "@truedat/test/mocks";
+import { domainsMock, multipleTemplatesMock } from "@truedat/test/mocks";
 import ConceptForm from "../ConceptForm";
 
 jest.mock("@truedat/ai/hooks/useSuggestions", () => {
@@ -38,10 +33,13 @@ const props = {
   loading: false,
   defaultContent: {},
   noTranslatableFields: [],
+  i18nConcept: { en: { is_default: true } },
+  defaultLang: "en",
   onChangeDomainId: jest.fn(),
   onChangeName: jest.fn(),
   onChangeTemplate: jest.fn(),
   onChangeConceptContent: jest.fn(),
+  setAltLang: jest.fn(),
 };
 
 const state = {

package/src/concepts/components/__tests__/__snapshots__/ConceptEdit.spec.js.snap

@@ -42,131 +42,138 @@ exports[`<ConceptEdit /> matches the latest snapshot 1`] = `
           </div>
         </div>
       </div>
-      <h3
-        class="ui header"
-      >
-        concepts.form.aditional_fields
-      </h3>
       <div
-        class="ui segment"
+        class="ui grid"
       >
         <div
-          class="field"
-          data-testid="form-field"
+          class="one column row"
         >
-          <label>
-            user
-          </label>
           <div
-            class="dimmable"
+            class="column"
           >
             <div
-              class="field"
+              class="ui segment"
             >
               <div
-                aria-expanded="false"
-                class="ui fluid search selection dropdown"
-                name="user"
-                role="combobox"
+                class="field"
+                data-testid="form-field"
               >
-                <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"
-                >
-                  fields.dropdown.placeholder
-                </div>
-                <i
-                  aria-hidden="true"
-                  class="dropdown icon"
-                />
+                <label>
+                  user
+                </label>
                 <div
-                  aria-multiselectable="false"
-                  class="menu transition"
-                  role="listbox"
+                  class="dimmable"
                 >
                   <div
-                    aria-checked="false"
-                    aria-selected="true"
-                    class="selected item"
-                    role="option"
-                    style="pointer-events: all;"
-                  >
-                    <span
-                      class="text"
-                    >
-                      selector.no.selection
-                    </span>
-                  </div>
-                  <div
-                    aria-checked="false"
-                    aria-selected="false"
-                    class="item"
-                    role="option"
-                    style="pointer-events: all;"
+                    class="field"
                   >
-                    <span
-                      class="text"
+                    <div
+                      aria-expanded="false"
+                      class="ui fluid search selection dropdown"
+                      name="user"
+                      role="combobox"
                     >
-                      foo_user
-                    </span>
+                      <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"
+                      >
+                        fields.dropdown.placeholder
+                      </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"
+                          >
+                            selector.no.selection
+                          </span>
+                        </div>
+                        <div
+                          aria-checked="false"
+                          aria-selected="false"
+                          class="item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <span
+                            class="text"
+                          >
+                            foo_user
+                          </span>
+                        </div>
+                        <div
+                          aria-checked="false"
+                          aria-selected="false"
+                          class="item"
+                          role="option"
+                          style="pointer-events: all;"
+                        >
+                          <span
+                            class="text"
+                          >
+                            xyz_user
+                          </span>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                   <div
-                    aria-checked="false"
-                    aria-selected="false"
-                    class="item"
-                    role="option"
-                    style="pointer-events: all;"
+                    class="ui inverted dimmer"
                   >
-                    <span
-                      class="text"
+                    <div
+                      class="content"
                     >
-                      xyz_user
-                    </span>
+                      <div
+                        class="ui loader"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div
-              class="ui inverted dimmer"
-            >
-              <div
-                class="content"
-              >
-                <div
-                  class="ui loader"
-                />
-              </div>
-            </div>
           </div>
         </div>
       </div>
-    </form>
-    <div
-      class="concept-forms-actions actions"
-    >
-      <a
-        class="ui secondary button"
-        href="/"
-        role="button"
-      >
-        actions.cancel
-      </a>
-      <button
-        class="ui primary button"
+      <div
+        class="concept-forms-actions actions"
       >
-        actions.update
-      </button>
-    </div>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          actions.cancel
+        </a>
+        <button
+          class="ui primary button"
+        >
+          actions.update
+        </button>
+      </div>
+    </form>
   </div>
 </div>
 `;