@truedat/dd 6.0.1 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Truedat Web Data Dictionary",
   "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": "6.0.1",
+    "@truedat/test": "6.0.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.0.1",
-    "@truedat/core": "6.0.1",
-    "@truedat/df": "6.0.1",
+    "@truedat/auth": "6.0.3",
+    "@truedat/core": "6.0.3",
+    "@truedat/df": "6.0.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "2ce73d263401e0a7959f9111ba3370b6810b5420"
+  "gitHead": "c88ddc501214b8c4e2732654ca0052ebbcc802c9"
 }

package/src/api.js

@@ -1,4 +1,5 @@
 const API_BUCKET_STRUCTURES = "/api/buckets/structures";
+const API_BUCKET_PATHS = "/api/buckets/paths";
 const API_BUCKET_STRUCTURE = "/api/buckets/structures/:id";
 const API_DATA_STRUCTURE = "/api/data_structures/:id";
 const API_DATA_STRUCTURES_BULK_UPDATE = "/api/data_structures/bulk_update";
@@ -54,6 +55,7 @@ const API_STRUCTURE_NOTES = "/api/data_structures/:data_structure_id/notes";
 
 export {
   API_BUCKET_STRUCTURES,
+  API_BUCKET_PATHS,
   API_BUCKET_STRUCTURE,
   API_DATA_STRUCTURE,
   API_DATA_STRUCTURES_BULK_UPDATE,

package/src/components/BucketView.js

@@ -7,7 +7,6 @@ import { useParams, useLocation } from "react-router-dom";
 import searchImage from "assets/searching.png";
 import { FormattedMessage, useIntl } from "react-intl";
 import { saveNavFilter as saveNavFilterRoutine } from "../routines";
-import { isBucketFilter } from "../utils/bucketNav";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureGrantCart from "./StructureGrantCart";
@@ -53,6 +52,7 @@ export const BucketView = ({
       getNavFilterURLParams,
       _.values,
       (keyValue) => Object.fromEntries(new Map([keyValue]).entries()),
+      (filter) => ({ view: "BUCKET_VIEW", filter }),
       saveNavFilter
     )(location);
   }, [location, saveNavFilter]);
@@ -68,8 +68,8 @@ export const BucketView = ({
           </Grid.Row>
           <Grid.Column width={4}>
             <Segment>
-              {isBucketFilter(navFilter) ? (
-                <FilteredNav filter={navFilter} />
+              {navFilter?.view === "BUCKET_VIEW" ? (
+                <FilteredNav navFilter={navFilter} />
               ) : null}
             </Segment>
           </Grid.Column>
@@ -90,6 +90,7 @@ export const BucketView = ({
                     {navFilterOneProp?.propertyPath
                       ? `${formatMessage({
                           id: navFilterOneProp.propertyPath,
+                          defaultMessage: navFilterOneProp.propertyPath,
                         })} > ${navFilterOneProp?.propertyValue}`
                       : null}
                   </Header>

package/src/components/CatalogCustomViewCards.js

@@ -9,6 +9,7 @@ import { FormattedNumber } from "react-intl";
 import { CardGroupsAccordion } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 import { fetchStructureFilters as fetchStructureFiltersRoutine } from "@truedat/dd/routines";
+import { Loading } from "@truedat/core/components";
 
 const moveMissingBucketToTheEnd = (buckets) =>
   _.sortBy(({ key }) => (key === "_missing" || key === "" ? 1 : 0))(buckets);
@@ -29,7 +30,9 @@ export const CatalogCustomViewCards = ({
   const { propertyPath } = useParams();
   const groups = [];
 
-  return Object.keys(groups).length > 1 ? (
+  return _.isEmpty(structureFilters) ? (
+    <Loading />
+  ) : Object.keys(groups).length > 1 ? (
     <CardGroupsAccordion
       groups={groups}
       cardComponent={CatalogCustomViewCard}

package/src/components/FilteredNav.js

@@ -1,19 +1,23 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { lowerDeburrTrim } from "@truedat/core/services/sort";
-import { Button, Icon, Loader } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { useBucketStructures } from "../hooks/useBucketStructures";
-import { toggleStructuresAliasNameMode } from "../routines";
+
 import { getStructureParent } from "../selectors";
+import { toggleStructuresAliasNameMode } from "../routines";
+import { useBucketStructures } from "../hooks/useBucketStructures";
+import { useBucketPaths } from "../hooks/useBucketPaths";
 import StructureNav from "./StructureNav";
 import StructureSearch from "./StructureSearch";
 
 export const FilteredNav = ({
   childStructures,
+  fnHasCatalogViewProp,
+  isLoading,
   parentStructure,
+  setSearchValue,
   structuresAliasNameMode,
   toggleStructuresAliasNameMode,
   totalStructures,
@@ -22,15 +26,6 @@ export const FilteredNav = ({
     _.has("original_name")(structure)
   )(childStructures);
   const { formatMessage } = useIntl();
-  const [searchValue, setSearchValue] = useState("");
-  const onChange = (searchValue) => setSearchValue(searchValue);
-
-  const filteredStructures = (collection) => {
-    const normalizedSearchValue = lowerDeburrTrim(searchValue);
-    return _.filter((structure) =>
-      _.contains(normalizedSearchValue)(lowerDeburrTrim(structure.name))
-    )(collection);
-  };
 
   return (
     <>
@@ -46,6 +41,7 @@ export const FilteredNav = ({
             icon
             data-tooltip={formatMessage({
               id: "structures.props.functional_name",
+              defaultMessage: "structures.props.functional_name",
             })}
             onClick={() => toggleStructuresAliasNameMode(true)}
           >
@@ -64,12 +60,14 @@ export const FilteredNav = ({
           </Button>
         </Button.Group>
       </div>
-      <StructureSearch onChange={onChange} />
+      <StructureSearch onChange={setSearchValue} isLoading={isLoading} />
       <StructureNav
-        childStructures={filteredStructures(childStructures)}
+        childStructures={childStructures}
         parentStructure={parentStructure}
         totalChildStructures={totalStructures}
         structuresAliasNameMode={structuresAliasNameMode}
+        fnHasCatalogViewProp={fnHasCatalogViewProp}
+        isLoading={isLoading}
       />
     </>
   );
@@ -77,48 +75,105 @@ export const FilteredNav = ({
 
 FilteredNav.propTypes = {
   childStructures: PropTypes.array,
+  isLoading: PropTypes.bool,
   parentStructure: PropTypes.object,
+  setSearchValue: PropTypes.func,
   structuresAliasNameMode: PropTypes.bool,
   toggleStructuresAliasNameMode: PropTypes.func,
   totalStructures: PropTypes.number,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
+// ElasticSearch identifier null_value
+// It is also the root ID.
+const ES_ID_NULL_VALUE = 0;
+
 export const FilteredNavLoader = ({
-  filter,
+  navFilter,
   parentStructure,
   structure,
   structuresAliasNameMode,
   toggleStructuresAliasNameMode,
 }) => {
-  const { trigger, data, error } = useBucketStructures();
-
-  useEffect(() => {
-    const parentFilter = _.isObject(structure)
-      ? {
-          parent_id: _.isEmpty(structure.children)
-            ? _.pathOr("", "parents[0].data_structure_id")(structure)
-            : _.pathOr("", "id")(structure),
-        }
-      : { parent_id: "" };
-
-    trigger({ ...filter, ...parentFilter });
-  }, [trigger, structure, filter]);
-
-  return !data && !error ? (
-    <Loader />
-  ) : (
+  const { data: dataBucketPaths, isLoading: isLoadingBucketPaths } =
+    useBucketPaths(navFilter);
+
+  const bucketPaths = dataBucketPaths?.data;
+
+  const initialTotalRef = useRef();
+
+  const subTreeChildren = (ancestry, dsid) =>
+    ancestry
+      ? _.flow(
+          _.map(({ data_structure_id }) => data_structure_id),
+          (ancestryDsIds) => [...ancestryDsIds, dsid],
+          (idPath) => _.get(idPath, bucketPaths?.forest),
+          _.keys,
+          (keys) => keys || []
+        )(ancestry)
+      : _.keys(bucketPaths?.forest);
+
+  const children =
+    navFilter.view === "SYSTEM_STRUCTURES"
+      ? structure?.children
+      : [
+          ...subTreeChildren(structure?.ancestry, structure?.id),
+          ...(bucketPaths?.filtered_children[structure?.id || 0] || []),
+        ];
+
+  const parentId =
+    structure?.parents?.[0]?.data_structure_id || ES_ID_NULL_VALUE;
+
+  const childrenOrSiblings = !_.isEmpty(children)
+    ? children
+    : [
+        ...subTreeChildren(structure?.ancestry.slice(0, -1), structure?.id),
+        ...(bucketPaths?.filtered_children[parentId] || []),
+      ];
+
+  // If there are children, show children (next parent_id is structure id)
+  // If there are no children, show siblings (next parent_id is structure parent id)
+  const parentOrCurrentId = _.isEmpty(children)
+    ? parentId
+    : structure?.id || ES_ID_NULL_VALUE;
+
+  const initialSearchValue = "";
+  const [searchValue, setSearchValue] = useState(initialSearchValue);
+
+  const { data: dataBucketStructures, isLoading } = useBucketStructures({
+    navFilter,
+    parentFilter: { parent_id: parentOrCurrentId },
+    ids: childrenOrSiblings,
+    query: searchValue,
+  });
+  if (searchValue === initialSearchValue) {
+    initialTotalRef.current = dataBucketStructures?.headers["x-total-count"];
+  }
+  const bucketStructures = dataBucketStructures?.data?.data;
+
+  const fnHasCatalogViewProp = (structure) =>
+    navFilter?.view === "BUCKET_VIEW"
+      ? bucketPaths?.filtered_children[parentOrCurrentId]?.includes(
+          structure?.id
+        ) || false
+      : undefined;
+
+  return (
     <FilteredNav
-      childStructures={data.data.data}
+      childStructures={bucketStructures || []}
       parentStructure={parentStructure}
-      totalStructures={data.headers["x-total-count"]}
+      totalStructures={initialTotalRef.current}
+      fnHasCatalogViewProp={fnHasCatalogViewProp}
       structuresAliasNameMode={structuresAliasNameMode}
       toggleStructuresAliasNameMode={toggleStructuresAliasNameMode}
+      setSearchValue={setSearchValue}
+      isLoading={isLoading || isLoadingBucketPaths}
     />
   );
 };
 
 FilteredNavLoader.propTypes = {
-  filter: PropTypes.object,
+  navFilter: PropTypes.object,
   parentStructure: PropTypes.object,
   structure: PropTypes.object,
   structuresAliasNameMode: PropTypes.bool,

package/src/components/StructureCrumbs.js

@@ -18,7 +18,7 @@ export const StructuresCrumb = () => (
 
 const filterQueryParams = _.flow(
   Object.entries,
-  _.first,
+  _.first, // only works for one filter
   ([propertyPath, propertyValue]) => ({
     propertyPath,
     propertyValue,
@@ -27,12 +27,12 @@ const filterQueryParams = _.flow(
 );
 
 export const SystemCrumb = ({ id, name, navFilter }) => {
-  const [propertyPath, propertyValue] = !_.isEmpty(navFilter)
-    ? _.toPairs(navFilter)[0]
+  const [propertyPath, propertyValue] = !_.isEmpty(navFilter.filter)
+    ? _.toPairs(navFilter.filter)[0]
     : [null, null];
   return (
     <>
-      {_.isEmpty(navFilter) || navFilter?.system_id ? (
+      {navFilter.view === "SYSTEM_STRUCTURES" ? (
         <Breadcrumb.Section
           as={Link}
           to={linkTo.SYSTEM_STRUCTURES({ id })}
@@ -40,25 +40,27 @@ export const SystemCrumb = ({ id, name, navFilter }) => {
         >
           {name}
         </Breadcrumb.Section>
-      ) : (
+      ) : navFilter.view === "BUCKET_VIEW" ? (
         <>
           <Breadcrumb.Section
             as={Link}
             to={`${linkTo.BUCKETS_VIEW({ propertyPath })}`}
             active={false}
           >
-            <FormattedMessage id={propertyPath} />
+            <FormattedMessage id={propertyPath} defaultMessage={propertyPath} />
           </Breadcrumb.Section>
           <Breadcrumb.Divider icon="right angle" />
           <Breadcrumb.Section
             as={Link}
-            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`}
+            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(
+              navFilter.filter
+            )}`}
             active={false}
           >
             {propertyValue}
           </Breadcrumb.Section>
         </>
-      )}
+      ) : undefined}
       <Breadcrumb.Divider icon="right angle" />
     </>
   );

package/src/components/StructureItem.js

@@ -23,9 +23,12 @@ const filterQueryParams = _.flow(
   (queryParams) => new URLSearchParams(queryParams)
 );
 
-const bucketToBreadcrumbs = ({ navFilter, formatMessage }) => {
-  const [propertyPath, propertyValue] = _.toPairs(navFilter)[0];
-  return `${formatMessage({ id: propertyPath })} > ${propertyValue}`;
+const bucketToBreadcrumbs = ({ filter, formatMessage }) => {
+  const [propertyPath, propertyValue] = _.toPairs(filter)[0];
+  return `${formatMessage({
+    id: propertyPath,
+    defaultMessage: propertyPath,
+  })} > ${propertyValue}`;
 };
 
 export const StructureItem = ({
@@ -37,11 +40,44 @@ export const StructureItem = ({
   navFilter,
   original_name,
   type,
+  /* hasCatalogViewProp can be:
+   *   - true/false in bucket view (catalog view)
+   *   - undefined in regular structure view
+   */
+  hasCatalogViewProp,
 }) => {
   const { formatMessage } = useIntl();
 
   const displayName = structuresAliasNameMode ? name : original_name || name;
 
+  const truthyToClassName = {
+    deleted_at: "deleted",
+    hasCatalogViewProp: "has-catalog-view-prop",
+  };
+
+  const notUndefinedToClassName = {
+    hasCatalogViewProp: "has-no-catalog-view-prop",
+  };
+
+  const toClassNames = _.flow(
+    Object.entries,
+    _.reduce(
+      (acc, [key, value]) =>
+        value
+          ? [truthyToClassName[key], ...acc]
+          : value !== undefined
+          ? [
+              ...(notUndefinedToClassName[key]
+                ? [notUndefinedToClassName[key]]
+                : []),
+              ...acc,
+            ]
+          : acc,
+      []
+    ),
+    _.join(" ")
+  );
+
   return (
     <List.Item
       as={active ? "a" : Link}
@@ -52,19 +88,19 @@ export const StructureItem = ({
           : type == "system" && id
           ? linkTo.SYSTEM_STRUCTURES({ id })
           : type == "bucket"
-          ? `${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`
+          ? `${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter.filter)}`
           : id
           ? linkTo.STRUCTURE({ id })
           : STRUCTURES
       }
-      className={deleted_at ? "deleted" : undefined}
+      className={toClassNames({ deleted_at, hasCatalogViewProp })}
       active={active}
     >
       <List.Icon name={getIcon(formatMessage, type)} verticalAlign="middle" />
       <List.Content>
         <List.Description>
           {type == "bucket"
-            ? bucketToBreadcrumbs({ navFilter, formatMessage })
+            ? bucketToBreadcrumbs({ filter: navFilter.filter, formatMessage })
             : displayName}
         </List.Description>
       </List.Content>
@@ -81,6 +117,7 @@ StructureItem.propTypes = {
   original_name: PropTypes.string,
   structuresAliasNameMode: PropTypes.bool,
   type: PropTypes.string,
+  hasCatalogViewProp: PropTypes.bool,
 };
 
 export const mapStateToProps = (

package/src/components/StructureItemRoot.js

@@ -6,7 +6,6 @@ import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
 import { List } from "semantic-ui-react";
 import { STRUCTURES, linkTo } from "@truedat/core/routes";
-import { isBucketFilter } from "../utils/bucketNav";
 
 const filterParams = _.flow(
   Object.entries,
@@ -19,11 +18,12 @@ const filterParams = _.flow(
 
 export const StructureItemRoot = ({ navFilter }) => {
   const history = useHistory();
-  const url = isBucketFilter(navFilter)
-    ? linkTo.BUCKETS_VIEW({
-        propertyPath: filterParams(navFilter)?.propertyPath,
-      })
-    : STRUCTURES;
+  const url =
+    navFilter?.view === "BUCKET_VIEW"
+      ? linkTo.BUCKETS_VIEW({
+          propertyPath: filterParams(navFilter.filter)?.propertyPath,
+        })
+      : STRUCTURES;
   return (
     <List.Item onClick={() => history.push(url)}>
       <List.Icon name="angle double left" verticalAlign="middle" />

package/src/components/StructureItems.js

@@ -3,13 +3,16 @@ import PropTypes from "prop-types";
 import StructureItem from "./StructureItem";
 
 export const StructureItems = ({
-  bucketChildStructures,
   structures,
   structuresAliasNameMode,
+  fnHasCatalogViewProp,
 }) => {
-  return (bucketChildStructures || structures).map((structure, index) => (
+  return structures.map((structure, index) => (
     <StructureItem
       key={index}
+      hasCatalogViewProp={
+        fnHasCatalogViewProp ? fnHasCatalogViewProp(structure) : undefined
+      }
       structuresAliasNameMode={structuresAliasNameMode}
       {...structure}
     />
@@ -19,6 +22,7 @@ export const StructureItems = ({
 StructureItems.propTypes = {
   structures: PropTypes.array,
   structuresAliasNameMode: PropTypes.bool,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export default StructureItems;

package/src/components/StructureNav.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { List, Divider } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import { useIntl } from "react-intl";
 import StructureItemRoot from "./StructureItemRoot";
 import StructureItem from "./StructureItem";
@@ -20,6 +21,8 @@ export const StructureNav = ({
   parentStructure,
   structuresAliasNameMode,
   totalChildStructures,
+  fnHasCatalogViewProp,
+  isLoading,
 }) => {
   const { formatMessage } = useIntl();
   const firstWithClasses = _.find(hasNavClass)(childStructures);
@@ -27,7 +30,9 @@ export const StructureNav = ({
     ? _.flow(navClasses, _.head)(firstWithClasses)
     : undefined;
 
-  return (
+  return isLoading ? (
+    <Loading />
+  ) : (
     <>
       <List relaxed selection className="structure-nav">
         <StructureItemRoot />
@@ -42,11 +47,13 @@ export const StructureNav = ({
           <StructureNavClassified
             classifier={classifier}
             structures={childStructures}
+            fnHasCatalogViewProp={fnHasCatalogViewProp}
           />
         ) : (
           <StructureItems
             structures={childStructures}
             structuresAliasNameMode={structuresAliasNameMode}
+            fnHasCatalogViewProp={fnHasCatalogViewProp}
           />
         )}
       </List>
@@ -67,9 +74,11 @@ export const StructureNav = ({
 
 StructureNav.propTypes = {
   childStructures: PropTypes.array,
+  isLoading: PropTypes.bool,
   parentStructure: PropTypes.object,
   structuresAliasNameMode: PropTypes.bool,
   totalChildStructures: PropTypes.number,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export default StructureNav;

package/src/components/StructureNavClassified.js

@@ -11,6 +11,7 @@ export const StructureNavClassified = ({
   classifier,
   structures,
   leafClasses,
+  fnHasCatalogViewProp,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -43,7 +44,12 @@ export const StructureNavClassified = ({
           className: "noselect",
         }}
       />
-      {expanded[label] ? <StructureItems structures={children} /> : null}
+      {expanded[label] ? (
+        <StructureItems
+          structures={children}
+          fnHasCatalogViewProp={fnHasCatalogViewProp}
+        />
+      ) : null}
     </React.Fragment>
   ));
 };
@@ -52,6 +58,7 @@ StructureNavClassified.propTypes = {
   classifier: PropTypes.string,
   structures: PropTypes.array,
   leafClasses: PropTypes.object,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export const mapStateToProps = (state) => ({

package/src/components/StructureNotesEdit.js

@@ -7,9 +7,10 @@ import { useIntl } from "react-intl";
 import { HistoryBackButton } from "@truedat/core/components";
 import { selectTemplate, selectDomains } from "@truedat/df/routines";
 import { applyTemplate, validateContent } from "@truedat/df/utils";
+import { apiJson } from "@truedat/core/services/api";
+import SuggestionsWidget from "@truedat/ai/components/suggestions/SuggestionsWidget";
 import { doStructureNoteAction } from "../routines";
 import { getLatestDfContent } from "../selectors/getSortedStructureNotes";
-import StructureNoteSuggestions from "./StructureNoteSuggestions";
 
 const DynamicForm = React.lazy(() =>
   import("@truedat/df/components/DynamicForm")
@@ -30,7 +31,9 @@ export const StructureNotesEdit = ({
   latestDfContent,
 }) => {
   const [content, setContent] = useState(latestDfContent);
-  const aiSuggestionsAction = _.prop("_actions.ai_suggestions")(structureNotes);
+  const aiSuggestionsUrl = _.prop("_actions.ai_suggestions.href")(
+    structureNotes
+  );
 
   const isModification = !_.isEmpty(latestDfContent);
 
@@ -75,13 +78,18 @@ export const StructureNotesEdit = ({
     setContent({ ...content, ...suggestions });
   };
 
+  const requestAiSuggestion = (callback) => {
+    const url = `${aiSuggestionsUrl}?language=${locale}`;
+    apiJson(url).then(callback);
+  };
+
   return (
     <Segment attached="bottom">
       <TemplateLoader />
 
-      {aiSuggestionsAction ? (
-        <StructureNoteSuggestions
-          aiSuggestionsAction={aiSuggestionsAction}
+      {aiSuggestionsUrl ? (
+        <SuggestionsWidget
+          requestAiSuggestion={requestAiSuggestion}
           template={template}
           applySuggestions={applySuggestions}
           isModification={isModification}

package/src/components/StructureSearch.js

@@ -1,20 +1,29 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Input } from "semantic-ui-react";
 
-export const StructureSearch = ({ onChange, loading = false }) => {
-  const { formatMessage } = useIntl();
-  const handleChange = (e) => {
-    onChange(e.target.value);
+// https://stackoverflow.com/a/37312154
+const debounceEventHandler = (...args) => {
+  const debounced = _.debounce(...args);
+  return (e) => {
+    e.persist();
+    return debounced(e);
   };
+};
+
+export const StructureSearch = ({ onChange, isLoading = false }) => {
+  const { formatMessage } = useIntl();
+  const handleChange = (e) => onChange(e.target.value);
+
   return (
     <Input
-      onChange={handleChange}
+      onChange={debounceEventHandler(500, handleChange)}
       icon={{ name: "search", link: true }}
       iconPosition="left"
       fluid
-      loading={loading}
+      loading={isLoading}
       placeholder={formatMessage({ id: "structure.search.placeholder" })}
     />
   );
@@ -22,7 +31,7 @@ export const StructureSearch = ({ onChange, loading = false }) => {
 
 StructureSearch.propTypes = {
   onChange: PropTypes.func,
-  loading: PropTypes.bool,
+  isLoading: PropTypes.bool,
 };
 
 export default StructureSearch;