@truedat/core 6.13.3 → 6.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "6.13.3",
+  "version": "6.13.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "2665e3bb640febd00aa49dd06e37b4d391164e74"
+  "gitHead": "3fd777c739ce6c9c78d505a85877e0ef6059b19c"
 }

package/src/components/BranchViewer.js

@@ -0,0 +1,289 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import {
+  Card,
+  Grid,
+  Header,
+  Icon,
+  Input,
+  Label,
+  Segment,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { LocalSearchInput } from "./LocalSearchInput";
+import { LocalCustomSearch } from "./LocalCustomSearch";
+
+import "../styles/BranchViewer.less";
+
+const organizeBranches = (branches) => {
+  const grouped = branches.reduce((acc, branch) => {
+    const { parent_id } = branch;
+
+    return {
+      ...acc,
+      [parent_id]: [
+        ...(acc[parent_id] || []),
+        {
+          ...branch,
+          parents: [],
+        },
+      ],
+    };
+  }, {});
+
+  const buildParents = (branch, accParents = []) => {
+    if (branch.parent_id === null) {
+      return [...accParents];
+    }
+
+    const parentBranch = Object.values(grouped)
+      .flat()
+      .find((b) => b.id === branch.parent_id);
+
+    return parentBranch
+      ? buildParents(parentBranch, [branch.parent_id, ...accParents])
+      : accParents;
+  };
+
+  const buildBranch = (parentId) => {
+    const children = grouped[parentId] || [];
+
+    return children.map((element) => {
+      const parents = buildParents(element);
+      const childs = buildBranch(element.id);
+
+      const child = {
+        ...element,
+        parents,
+        childs,
+      };
+
+      return { ...child, path: createPathDescription(child) };
+    });
+  };
+
+  const createPathDescription = (branch) => {
+    const results = [];
+    const { parents } = branch;
+
+    for (const parent_id of parents) {
+      const { name } = branches.find((branch) => branch.id === parent_id);
+      results.push(name);
+    }
+
+    return results.length == 0 ? "" : results.join(" > ");
+  };
+
+  return buildBranch(null);
+};
+
+const ListBranchItem = ({ branch, handleRedirect, selectedBranch }) => {
+  const { id, name } = branch;
+  const [expanded, setExpanded] = useState(false);
+  const generation = branch.childs;
+  const hasChildren = !generation.length == 0;
+
+  useEffect(() => {
+    if (selectedBranch?.parents?.includes(id)) {
+      setExpanded(!expanded);
+    }
+
+    if (id === selectedBranch?.id) {
+      setExpanded(true);
+    }
+  }, []);
+
+  return (
+    <li key={id}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "self-start",
+        }}
+        onClick={() => handleRedirect(id)}
+      >
+        <Input
+          labelPosition="left"
+          type="text"
+          value={name == null ? "" : name}
+          className="hierarchyNode"
+          disabled={true}
+        >
+          {hasChildren ? (
+            <Label
+              basic
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpanded(!expanded);
+              }}
+              style={{ cursor: "pointer" }}
+            >
+              <Icon fitted name={expanded ? "dot circle outline" : "circle"} />
+            </Label>
+          ) : null}
+          <input
+            className={id === selectedBranch?.id ? "selectedBranch" : " "}
+          />
+        </Input>
+      </div>
+      {generation.length == 0 || !expanded ? null : (
+        <ListBranch
+          childs={branch.childs}
+          parentId={id}
+          handleRedirect={handleRedirect}
+          selectedBranch={selectedBranch}
+        />
+      )}
+    </li>
+  );
+};
+
+ListBranchItem.propTypes = {
+  key: PropTypes.number,
+  branch: PropTypes.object,
+  handleRedirect: PropTypes.func.isRequired,
+  selectedBranch: PropTypes.object,
+};
+
+const ListBranch = ({ childs, handleRedirect, selectedBranch }) => {
+  return _.isEmpty(childs) ? null : (
+    <ul className="wtree expanded">
+      {childs.map((child) => {
+        return (
+          <ListBranchItem
+            key={child.id}
+            branch={child}
+            handleRedirect={handleRedirect}
+            selectedBranch={selectedBranch}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+ListBranch.propTypes = {
+  childs: PropTypes.object,
+  handleRedirect: PropTypes.func.isRequired,
+  selectedBranch: PropTypes.object,
+};
+
+export const BranchViewer = ({
+  branches = [],
+  handleRedirect,
+  idSelectedBranch,
+}) => {
+  useIntl();
+
+  const [filteredBranches, setFilteredBranches] = useState([]);
+  const [selectedBranch, setSelectedBranch] = useState({});
+  const organizedBranches = _.isNull(branches)
+    ? []
+    : organizeBranches(branches);
+  const searchFields = ["name", "childs"];
+
+  const checkSearchEnabled = () => {
+    return !_.equals(organizedBranches, filteredBranches);
+  };
+
+  useEffect(() => {
+    if (_.isEmpty(filteredBranches) && checkSearchEnabled()) {
+      setFilteredBranches(organizedBranches);
+    }
+
+    if (!_.isUndefined(idSelectedBranch)) {
+      LocalCustomSearch(
+        organizedBranches,
+        idSelectedBranch,
+        setSelectedBranch,
+        ["id", "childs"],
+        true
+      );
+    }
+  }, [branches]);
+
+  return (
+    <Segment
+      style={{
+        overflow: "auto",
+      }}
+    >
+      <Grid>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            <LocalSearchInput
+              collection={organizedBranches}
+              callback={setFilteredBranches}
+              searchFields={searchFields}
+              searchFunction={LocalCustomSearch}
+              enabled={checkSearchEnabled()}
+            />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={16}>
+            {!_.isEmpty(branches) ? (
+              filteredBranches.map((branch) => (
+                <Grid.Column key={branch.id}>
+                  <Grid.Row>
+                    <ul
+                      style={{
+                        listStyleType: "none",
+                        padding: 0,
+                      }}
+                    >
+                      {checkSearchEnabled(branches) ? (
+                        <Card
+                          key={branch.id}
+                          link
+                          as={Link}
+                          to={linkTo.DOMAIN_MEMBERS({
+                            id: _.get("id")(branch),
+                          })}
+                        >
+                          <Card.Content>
+                            <Card.Header className="brancheViewerSearchResultHeader">
+                              {_.get("name")(branch)}
+                            </Card.Header>
+                            <Card.Meta className="brancheViewerSearchResultMeta">
+                              {_.get("path")(branch)}
+                            </Card.Meta>
+                          </Card.Content>
+                        </Card>
+                      ) : (
+                        <ListBranchItem
+                          branch={branch}
+                          handleRedirect={handleRedirect}
+                          selectedBranch={selectedBranch}
+                        />
+                      )}
+                    </ul>
+                  </Grid.Row>
+                </Grid.Column>
+              ))
+            ) : (
+              <Header as="h4">
+                <Icon name="cube" />
+                <Header.Content>
+                  <FormattedMessage id="domains.notExist" />
+                </Header.Content>
+              </Header>
+            )}
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Segment>
+  );
+};
+
+BranchViewer.propTypes = {
+  branches: PropTypes.array,
+  handleRedirect: PropTypes.func.isRequired,
+  idSelectedBranch: PropTypes.number,
+};
+
+export default BranchViewer;

package/src/components/LocalCustomSearch.js

@@ -0,0 +1,58 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+
+export const LocalCustomSearch = (
+  collection,
+  searchString = "",
+  callback,
+  searchFields,
+  getOneOrMany = false
+) => {
+  const results = [];
+
+  const recursiveSearch = (item) => {
+    if (_.isObject(item) && !_.isNull(item)) {
+      for (const field of searchFields) {
+        const value = item[field];
+        if (_.isArray(value) && !_.isEmpty(value)) {
+          value.forEach(recursiveSearch);
+        } else if (_.isNumber(value) && searchString == value) {
+          results.push(item);
+        } else if (
+          _.isString(value) &&
+          value.toLowerCase().includes(searchString.toString().toLowerCase())
+        ) {
+          results.push(item);
+        }
+      }
+    }
+  };
+
+  const applyFilter = (data) => {
+    callback(getOneOrMany ? _.head(data) : data);
+  };
+
+  if (
+    searchFields === undefined ||
+    searchFields === null ||
+    searchFields.length === 0
+  ) {
+    return -1;
+  } else if (_.isEmpty(searchString.toString())) {
+    applyFilter(collection);
+    return collection.length;
+  } else {
+    collection.forEach(recursiveSearch);
+    applyFilter(results);
+    return results.length;
+  }
+};
+
+LocalCustomSearch.propTypes = {
+  collection: PropTypes.array,
+  query: PropTypes.string,
+  callback: PropTypes.func,
+  searchFields: PropTypes.array,
+  getOneOrMany: PropTypes.bool,
+};
+export default LocalCustomSearch;

package/src/components/LocalSearchInput.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Header, Icon, Input } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import "../styles/LocalSearchInput.less";
+
+export const LocalSearchInput = ({
+  loading,
+  query,
+  collection,
+  callback,
+  searchFields,
+  searchFunction,
+  enabled,
+}) => {
+  const { formatMessage } = useIntl();
+  const [countSearch, setCountSearch] = useState(0);
+
+  const onChange = (value) => {
+    setCountSearch(searchFunction(collection, value, callback, searchFields));
+  };
+
+  return (
+    <>
+      <Input
+        value={query}
+        className="searchbox"
+        onChange={(_e, { value }) => onChange(value)}
+        icon={{ name: "search", link: true }}
+        loading={loading}
+        placeholder={formatMessage({ id: "search.input.placeholder" })}
+      />
+      {enabled ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {countSearch == -1 && (
+              <FormattedMessage id="domains.search.error.fields" />
+            )}
+            {countSearch == 0 && (
+              <FormattedMessage id="domains.search.results.empty" />
+            )}
+            {countSearch > 0 && (
+              <FormattedMessage
+                id="domains.search.results.count"
+                values={{ count: countSearch }}
+              />
+            )}
+          </Header.Content>
+        </Header>
+      ) : null}
+    </>
+  );
+};
+
+LocalSearchInput.propTypes = {
+  loading: PropTypes.bool,
+  query: PropTypes.string,
+  collection: PropTypes.array,
+  callback: PropTypes.func,
+  searchFields: PropTypes.array,
+  searchFunction: PropTypes.func,
+  enabled: PropTypes.bool,
+};
+
+export default LocalSearchInput;

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

@@ -0,0 +1,220 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import BranchViewer from "../BranchViewer";
+
+const handleRedirect = jest.fn();
+const props = {
+  branches: [
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "1",
+      id: 1,
+      name: "element_1",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "2",
+      id: 2,
+      name: "element_2",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_2",
+      domain_group: null,
+      external_id: "3",
+      id: 3,
+      name: "element_3",
+      parent_id: 2,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_2",
+      domain_group: null,
+      external_id: "4",
+      id: 4,
+      name: "element_4",
+      parent_id: 2,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "5",
+      id: 5,
+      name: "element_5",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_5",
+      domain_group: null,
+      external_id: "6",
+      id: 6,
+      name: "element_6",
+      parent_id: 5,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_6",
+      domain_group: null,
+      external_id: "7",
+      id: 7,
+      name: "element_7",
+      parent_id: 6,
+      parents: null,
+      type: null,
+    },
+  ],
+  handleRedirect,
+  idSelectedBranch: undefined,
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "domains.search.results.count": "count",
+      "domains.search.results.empty": "empty",
+      "search.input.placeholder": "searchbox_placeholder",
+      "domains.search.error.fields": "No fields for search",
+      "domains.notExist": "notExistDomains",
+    },
+  },
+};
+
+describe("BranchViewer", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<BranchViewer {...props} />, renderOpts);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should return 'no branches' messages if branch list empty", async () => {
+    const customProps = { ...props, branches: [] };
+    const { findByText } = render(
+      <BranchViewer {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+
+  it("should return 'no branches' messages if branch list undefined", async () => {
+    const customProps = { ...props, branches: undefined };
+    const { findByText } = render(
+      <BranchViewer {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+
+  it("should return 'no branches' messages if branch list null", async () => {
+    const customProps = { ...props, branches: null };
+    const { findByText } = render(
+      <BranchViewer {...customProps} />,
+      renderOpts
+    );
+
+    expect(await findByText("notExistDomains")).toBeInTheDocument();
+  });
+
+  it("with a valid idSelectedBranch should return 'branches' highlighting selected branch and ancestors expanded", async () => {
+    const customProps = { ...props, idSelectedBranch: 7 };
+    const { container } = render(<BranchViewer {...customProps} />, renderOpts);
+
+    const expandedElements = container.querySelectorAll(".expanded");
+
+    expect(expandedElements.length).toBe(2);
+
+    expandedElements.forEach((element) => {
+      const input = element.querySelector("input");
+      if (input) {
+        if (input.classList.contains("selectedBranch")) {
+          expect(input.value).toBe("element_7");
+        } else {
+          expect(input.value).toBe("element_6");
+        }
+      }
+    });
+  });
+});
+
+describe("organizeBranches", () => {
+  it("organizeBranches creates 'childs' and 'parents' properties", async () => {
+    const { queryByText, getByDisplayValue, queryByDisplayValue } = render(
+      <BranchViewer {...props} />,
+      renderOpts
+    );
+
+    const input1 = getByDisplayValue("element_1");
+    const parent1 = input1.closest("div");
+    await waitFor(() =>
+      expect(parent1.querySelector("i")).not.toBeInTheDocument()
+    );
+
+    await waitFor(() => expect(queryByText("element_3")).toBeNull());
+    await waitFor(() => expect(queryByText("element_4")).toBeNull());
+
+    const input2 = getByDisplayValue("element_2");
+    const parent2 = input2.closest("div");
+    const sibling2 = parent2.querySelector("i");
+    userEvent.click(sibling2);
+
+    await waitFor(() => {
+      expect(queryByDisplayValue(/element_3/)).toBeInTheDocument();
+      expect(queryByDisplayValue(/element_4/)).toBeInTheDocument();
+    });
+
+    await waitFor(() => expect(queryByText("element_6")).toBeNull());
+    await waitFor(() => expect(queryByText("element_7")).toBeNull());
+
+    const input3 = getByDisplayValue("element_5");
+    const parent3 = input3.closest("div");
+    const sibling3 = parent3.querySelector("i");
+    userEvent.click(sibling3);
+
+    await waitFor(() => {
+      expect(queryByDisplayValue(/element_6/)).toBeInTheDocument();
+
+      const input4 = getByDisplayValue("element_6");
+      const parent4 = input4.closest("div");
+      const sibling4 = parent4.querySelector("i");
+      userEvent.click(sibling4);
+
+      waitFor(() => {
+        expect(queryByDisplayValue(/element_7/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  it("organizeBranches creates 'path' property", async () => {
+    const { container, getByPlaceholderText } = render(
+      <BranchViewer {...props} />,
+      renderOpts
+    );
+    const searchBox = getByPlaceholderText("searchbox_placeholder");
+
+    userEvent.click(searchBox);
+    userEvent.type(searchBox, "element_7");
+
+    await waitFor(() => {
+      const element = container.querySelector(".brancheViewerSearchResultMeta");
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent("element_5 > element_6");
+    });
+  });
+});

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

@@ -0,0 +1,209 @@
+import _ from "lodash/fp";
+
+import LocalCustomSearch from "../LocalCustomSearch";
+
+const collection = [
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "1",
+    id: 1,
+    name: "element_1",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "2",
+    id: 2,
+    name: "element_2",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_2",
+    domain_group: null,
+    external_id: "3",
+    id: 3,
+    name: "element_3",
+    parent_id: 2,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_2",
+    domain_group: null,
+    external_id: "4",
+    id: 4,
+    name: "element_4",
+    parent_id: 2,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "No tiene padre",
+    domain_group: null,
+    external_id: "5",
+    id: 5,
+    name: "element_5",
+    parent_id: null,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_5",
+    domain_group: null,
+    external_id: "6",
+    id: 6,
+    name: "element_6",
+    parent_id: 5,
+    parents: null,
+    type: null,
+  },
+  {
+    description: "el padre es element_6",
+    domain_group: null,
+    external_id: "7",
+    id: 7,
+    name: "element_7",
+    parent_id: 6,
+    parents: null,
+    type: null,
+  },
+];
+
+const searchFields = ["description", "name"];
+const getOneOrMany = false;
+
+describe("LocalCustomSearch", () => {
+  it("LocalCustomSearch filters collection successfully", () => {
+    const firstSearch = "No tiene padre";
+    const callbackMock = jest.fn();
+    const countFirstSearch = 3;
+    const resultFirstSearch = collection.filter((element) =>
+      element.description.includes(firstSearch)
+    );
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        firstSearch,
+        callbackMock,
+        searchFields,
+        getOneOrMany
+      )
+    ).toBe(countFirstSearch);
+
+    expect(callbackMock).toHaveBeenCalledWith(resultFirstSearch);
+
+    const secondSearch = "padre";
+    const countSecondSearch = 7;
+
+    const resultSecondSearch = collection.filter((element) =>
+      element.description.includes(secondSearch)
+    );
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        secondSearch,
+        callbackMock,
+        searchFields,
+        getOneOrMany
+      )
+    ).toBe(countSecondSearch);
+
+    expect(callbackMock).toHaveBeenCalledWith(resultSecondSearch);
+  });
+
+  it("LocalCustomSearch filters empty collection", () => {
+    const search = "custom search";
+    const customCollection = [];
+    const callbackMock = jest.fn();
+
+    expect(
+      LocalCustomSearch(
+        customCollection,
+        search,
+        callbackMock,
+        searchFields,
+        getOneOrMany
+      )
+    ).toBe(customCollection.length);
+
+    expect(callbackMock).toHaveBeenCalledWith(customCollection);
+  });
+
+  it("LocalCustomSearch filters collection but searchFields is empty", () => {
+    const search = "custom search";
+    const customSearchFields = [];
+    const callbackMock = jest.fn();
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        search,
+        callbackMock,
+        customSearchFields,
+        getOneOrMany
+      )
+    ).toBe(-1);
+
+    expect(callbackMock).not.toHaveBeenCalled();
+  });
+
+  it("LocalCustomSearch filters collection but searchFields has fields that not exists in elements", () => {
+    const search = "custom search";
+    const callbackMock = jest.fn();
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        search,
+        callbackMock,
+        ["external_id", "title"],
+        getOneOrMany
+      )
+    ).toBe(0);
+
+    expect(callbackMock).toHaveBeenCalledWith([]);
+  });
+
+  it("LocalCustomSearch filters collection but searchFields is null", () => {
+    const search = "custom search";
+    const customSearchFields = null;
+    const callbackMock = jest.fn();
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        search,
+        callbackMock,
+        customSearchFields,
+        getOneOrMany
+      )
+    ).toBe(-1);
+
+    expect(callbackMock).not.toHaveBeenCalled();
+  });
+
+  it("LocalCustomSearch returns original collection when searchString is empty", () => {
+    const search = "";
+    const callbackMock = jest.fn();
+
+    expect(
+      LocalCustomSearch(
+        collection,
+        search,
+        callbackMock,
+        searchFields,
+        getOneOrMany
+      )
+    ).toBe(collection.length);
+
+    expect(callbackMock).toHaveBeenCalledWith(collection);
+  });
+});

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

@@ -0,0 +1,203 @@
+import _ from "lodash/fp";
+import React from "react";
+import { render } from "@truedat/test/render";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import LocalSearchInput from "../LocalSearchInput";
+
+const searchFields = ["description", "name"];
+const props = {
+  collection: [
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "1",
+      id: 1,
+      name: "element_1",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "2",
+      id: 2,
+      name: "element_2",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_2",
+      domain_group: null,
+      external_id: "3",
+      id: 3,
+      name: "element_3",
+      parent_id: 2,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_2",
+      domain_group: null,
+      external_id: "4",
+      id: 4,
+      name: "element_4",
+      parent_id: 2,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "No tiene padre",
+      domain_group: null,
+      external_id: "5",
+      id: 5,
+      name: "element_5",
+      parent_id: null,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_5",
+      domain_group: null,
+      external_id: "6",
+      id: 6,
+      name: "element_6",
+      parent_id: 5,
+      parents: null,
+      type: null,
+    },
+    {
+      description: "el padre es element_6",
+      domain_group: null,
+      external_id: "7",
+      id: 7,
+      name: "element_7",
+      parent_id: 6,
+      parents: null,
+      type: null,
+    },
+  ],
+  searchFields,
+  enabled: true,
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "domains.search.results.count": "count",
+      "domains.search.results.empty": "empty",
+      "search.input.placeholder": "searchbox_placeholder",
+      "domains.search.error.fields": "No fields for search",
+      "domains.notExist": "notExistDomains",
+    },
+  },
+};
+
+describe("LocalSearchInput", () => {
+  it("matches the latest snapshot", async () => {
+    const searchFunction = jest.fn();
+
+    const customProps = {
+      ...props,
+      callback: jest.fn,
+      searchFunction: searchFunction,
+    };
+
+    const { container, getByPlaceholderText } = render(
+      <LocalSearchInput {...customProps} />,
+      renderOpts
+    );
+
+    const searchBox = getByPlaceholderText("searchbox_placeholder");
+    userEvent.click(searchBox);
+    userEvent.type(searchBox, "padre");
+
+    await waitFor(() => {
+      expect(searchFunction).toHaveBeenCalled();
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it("should return 'no branches' messages if branch list empty", async () => {
+    const searchFunction = () => {
+      return -1;
+    };
+
+    const customProps = {
+      ...props,
+      collection: [],
+      callback: jest.fn,
+      searchFunction: searchFunction,
+    };
+
+    const { queryByText, getByPlaceholderText } = render(
+      <LocalSearchInput {...customProps} />,
+      renderOpts
+    );
+
+    const searchBox = getByPlaceholderText("searchbox_placeholder");
+
+    userEvent.click(searchBox);
+    userEvent.type(searchBox, "padre");
+
+    await waitFor(() => {
+      expect(queryByText(/No fields for search/)).toBeInTheDocument();
+    });
+  });
+
+  it("should return 'no branches' messages if branch list undefined", async () => {
+    const searchFunction = () => {
+      return -1;
+    };
+
+    const customProps = {
+      ...props,
+      collection: undefined,
+      callback: jest.fn,
+      searchFunction: searchFunction,
+    };
+
+    const { queryByText, getByPlaceholderText } = render(
+      <LocalSearchInput {...customProps} />,
+      renderOpts
+    );
+
+    const searchBox = getByPlaceholderText("searchbox_placeholder");
+
+    userEvent.click(searchBox);
+    userEvent.type(searchBox, "padre");
+
+    await waitFor(() => {
+      expect(queryByText(/No fields for search/)).toBeInTheDocument();
+    });
+  });
+
+  it("should return 'no branches' messages if branch list null", async () => {
+    const searchFunction = () => {
+      return -1;
+    };
+
+    const customProps = {
+      ...props,
+      collection: null,
+      callback: jest.fn,
+      searchFunction: searchFunction,
+    };
+
+    const { queryByText, getByPlaceholderText } = render(
+      <LocalSearchInput {...customProps} />,
+      renderOpts
+    );
+
+    const searchBox = getByPlaceholderText("searchbox_placeholder");
+
+    userEvent.click(searchBox);
+    userEvent.type(searchBox, "padre");
+
+    await waitFor(() => {
+      expect(queryByText(/No fields for search/)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BranchViewer matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+    style="overflow: auto;"
+  >
+    <div
+      class="ui grid"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="sixteen wide column"
+        >
+          <div
+            class="ui icon input searchbox"
+          >
+            <input
+              placeholder="searchbox_placeholder"
+              type="text"
+              value=""
+            />
+            <i
+              aria-hidden="true"
+              class="search link icon"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="row"
+      >
+        <div
+          class="sixteen wide column"
+        >
+          <div
+            class="column"
+          >
+            <div
+              class="row"
+            >
+              <ul
+                style="list-style-type: none; padding: 0px;"
+              >
+                <li>
+                  <div
+                    style="display: flex; flex-direction: row; align-items: self-start;"
+                  >
+                    <div
+                      class="ui disabled left labeled input hierarchyNode"
+                    >
+                      <input
+                        class=" "
+                        disabled=""
+                        tabindex="-1"
+                        type="text"
+                        value="element_1"
+                      />
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="column"
+          >
+            <div
+              class="row"
+            >
+              <ul
+                style="list-style-type: none; padding: 0px;"
+              >
+                <li>
+                  <div
+                    style="display: flex; flex-direction: row; align-items: self-start;"
+                  >
+                    <div
+                      class="ui disabled left labeled input hierarchyNode"
+                    >
+                      <div
+                        class="ui basic label"
+                        style="cursor: pointer;"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="circle fitted icon"
+                        />
+                      </div>
+                      <input
+                        class=" "
+                        disabled=""
+                        tabindex="-1"
+                        type="text"
+                        value="element_2"
+                      />
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div
+            class="column"
+          >
+            <div
+              class="row"
+            >
+              <ul
+                style="list-style-type: none; padding: 0px;"
+              >
+                <li>
+                  <div
+                    style="display: flex; flex-direction: row; align-items: self-start;"
+                  >
+                    <div
+                      class="ui disabled left labeled input hierarchyNode"
+                    >
+                      <div
+                        class="ui basic label"
+                        style="cursor: pointer;"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="circle fitted icon"
+                        />
+                      </div>
+                      <input
+                        class=" "
+                        disabled=""
+                        tabindex="-1"
+                        type="text"
+                        value="element_5"
+                      />
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocalSearchInput matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui icon input searchbox"
+  >
+    <input
+      placeholder="searchbox_placeholder"
+      type="text"
+      value=""
+    />
+    <i
+      aria-hidden="true"
+      class="search link icon"
+    />
+  </div>
+  <h4
+    class="ui header"
+  >
+    <i
+      aria-hidden="true"
+      class="search icon"
+    />
+    <div
+      class="content"
+    />
+  </h4>
+</div>
+`;

package/src/components/index.js

@@ -3,6 +3,7 @@ import AdminMenu from "./AdminMenu";
 import Alert from "./Alert";
 import Authorized from "./Authorized";
 import AvailableFilters from "./AvailableFilters";
+import BranchViewer from "./BranchViewer";
 import CardGroupsAccordion from "./CardGroupsAccordion";
 import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
@@ -59,6 +60,7 @@ export {
   Alert,
   Authorized,
   AvailableFilters,
+  BranchViewer,
   CardGroupsAccordion,
   CatalogMenu,
   Comments,

package/src/messages/en.js

@@ -47,6 +47,7 @@ export default {
   "dateFilter.weeks": "weeks ago",
   "dateFilter.months": "months ago",
   "dateFilter.years": "years ago",
+  "domains.notExist": "There are no domains",
   emptyBucket: "(Empty)",
   "error.content": "Please report this error to the Truedat team.",
   "error.duplicated": "duplicated",

package/src/messages/es.js

@@ -48,6 +48,7 @@ export default {
   "dateFilter.weeks": "semanas",
   "dateFilter.months": "meses",
   "dateFilter.years": "años",
+  "domains.notExist": "No existen dominios",
   emptyBucket: "(Vacío)",
   "error.content": "Por favor, coméntaselo al equipo de Truedat.",
   "error.duplicated": "duplicado",
@@ -63,7 +64,6 @@ export default {
   "hierarchy.multiple.placeholder": "Seleccionar Jerarquías",
   "hierarchy.selector.placeholder": "Seleccionar Jerarquía",
   "i18n.actions.createMessage": "Crear mensaje",
-
   "i18n.message.form.messageId.placeholder": "Id del mensaje",
   "i18n.message.form.definition.placeholder": "Definición",
   "i18n.message.form.description.placeholder": "Descripción",

package/src/styles/BranchViewer.less

@@ -0,0 +1,16 @@
+
+.brancheViewerSearchResultHeader{
+    font-size: 1rem !important;
+}
+
+.brancheViewerSearchResultMeta{
+    font-size: 0.8rem !important;
+}
+
+.selectedBranch{
+    background-color: #0d0d0d !important;
+    color: #fff !important;
+    font-weight: 1000 !important;
+}
+
+ 

package/src/styles/LocalSearchInput.less

@@ -0,0 +1,7 @@
+.ui.input.searchbox {
+    width: 100%;
+    height: 36px;
+    border-radius: 4px;
+    border: solid 1px #e8e9e9;
+    background-color: #ffffff
+}