@truedat/bg 6.3.3 → 6.3.5

package/src/concepts/components/ConceptsLinksManagement.js

@@ -3,11 +3,12 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Header, Icon, Segment, Grid, Message } from "semantic-ui-react";
+import { Header, Icon, Segment, Grid } from "semantic-ui-react";
 import {
   makeTagOptionsSelector,
   makeSearchQuerySelector,
 } from "@truedat/core/selectors";
+
 import {
   clearStructures,
   fetchStructures,
@@ -17,10 +18,10 @@ import {
 } from "@truedat/dd/routines";
 import { createRelation, deleteRelation } from "@truedat/core/routines";
 import ConceptSelector from "../relations/components/ConceptSelector";
-import { fetchConcepts } from "../routines";
 import { pickConceptAttrs } from "../relations/components/ConceptRelationForm";
+import LinkedMessage from "./LinkedMessage";
 import ConceptLinksDropdownSelector from "./ConceptLinksDropdownSelector";
-import ConceptUserFiltersLoader from "./ConceptUserFiltersLoader";
+
 const RelationsLoader = React.lazy(() =>
   import("@truedat/lm/components/RelationsLoader")
 );
@@ -47,77 +48,6 @@ const STATUS_PENDING = "pending";
 const STATUS_CREATED = "created";
 const STATUS_DELETED = "deleted";
 
-const LinkedMessage = ({
-  selectedSourceConcept,
-  selectedTargetConcept,
-  selectedLinkType,
-  selectedStructure,
-  selectedTag,
-  status,
-}) => {
-  const { formatMessage } = useIntl();
-
-  const messagesMap = {
-    [STATUS_PENDING]: formatMessage({ id: "concept.events.relation_creating" }),
-    [STATUS_DELETED]: formatMessage({ id: "concept.events.relation_deleted" }),
-    [STATUS_CREATED]: formatMessage({ id: "concept.events.relation_created" }),
-  };
-
-  return (
-    <Message success={status !== STATUS_PENDING} floating>
-      <Message.Header>{messagesMap[status]}</Message.Header>
-      <Message.List>
-        {selectedSourceConcept ? (
-          <Message.Item>
-            {formatMessage({ id: "conceptRelations.from" })}
-            {": "} {selectedSourceConcept.name}
-          </Message.Item>
-        ) : null}
-        {selectedStructure ? (
-          <Message.Item>
-            {formatMessage({ id: "conceptRelations.to" })}
-            {": "}
-            {selectedStructure.name}
-          </Message.Item>
-        ) : selectedTargetConcept ? (
-          <Message.Item>
-            {formatMessage({ id: "conceptRelations.to" })}
-            {": "}
-            {selectedTargetConcept.name}
-          </Message.Item>
-        ) : null}
-        {selectedTag ? (
-          <Message.Item>
-            {formatMessage({ id: "conceptRelations.tag" })}
-            {": "}
-            {selectedLinkType === "structures"
-              ? formatMessage({
-                  id: selectedTag.text,
-                  defaultMessage: selectedTag.text,
-                })
-              : formatMessage({
-                  id: `source.${selectedTag.text}`,
-                  defaultMessage: formatMessage({
-                    id: selectedTag.text,
-                    defaultMessage: selectedTag.text,
-                  }),
-                })}
-          </Message.Item>
-        ) : null}
-      </Message.List>
-    </Message>
-  );
-};
-
-LinkedMessage.propTypes = {
-  selectedSourceConcept: PropTypes.object,
-  selectedStructure: PropTypes.object,
-  selectedTargetConcept: PropTypes.object,
-  selectedLinkType: PropTypes.string,
-  selectedTag: PropTypes.object,
-  status: PropTypes.string,
-};
-
 export const ConceptsLinksManagement = ({
   header,
   subheader,
@@ -127,8 +57,6 @@ export const ConceptsLinksManagement = ({
   conceptLinks,
   tagStructureOptions,
   tagConceptOptions,
-  fetchConcepts,
-  conceptPayload,
   selectedRelationTags,
   clearStructures,
   clearStructureFilters,
@@ -155,13 +83,6 @@ export const ConceptsLinksManagement = ({
       setSelectedStructure(null);
     } else if (selectedLinkType == "structures") {
       setSelectedTargetConcept(null);
-      const must = conceptPayload.must;
-      const payload = {
-        ...conceptPayload,
-        must: { ...must, ...linksDefaultFilters },
-        size: 7,
-      };
-      fetchConcepts(payload);
       setTagOptions(tagStructureOptions);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -311,6 +232,7 @@ export const ConceptsLinksManagement = ({
                     </Header.Content>
                   </Header>
                   <ConceptSelector
+                    defaultFilters={linksDefaultFilters}
                     showTitle={false}
                     selectedConcept={selectedSourceConcept}
                     handleConceptSelected={handleSourceConceptSelected}
@@ -332,7 +254,6 @@ export const ConceptsLinksManagement = ({
                   </Header>
                   {selectedSourceConcept && selectedLinkType == "structures" ? (
                     <>
-                      <ConceptUserFiltersLoader />
                       <RelationsLoader
                         resource_id={selectedSourceConcept.business_concept_id}
                         resource_type="business_concept"
@@ -354,6 +275,7 @@ export const ConceptsLinksManagement = ({
                         target_type="business_concept"
                       />
                       <ConceptSelector
+                        defaultFilters={linksDefaultFilters}
                         selectedConcept={selectedTargetConcept}
                         handleConceptSelected={handleTargetConceptSelected}
                         businessConceptId={
@@ -378,8 +300,6 @@ ConceptsLinksManagement.propTypes = {
   header: PropTypes.string,
   icon: PropTypes.string,
   subheader: PropTypes.string,
-  fetchConcepts: PropTypes.func,
-  conceptPayload: PropTypes.object,
   structurePayload: PropTypes.object,
   fetchStructures: PropTypes.func,
   clearStructures: PropTypes.func,
@@ -396,10 +316,6 @@ ConceptsLinksManagement.propTypes = {
 
 const makeMapStateToProps = () => {
   const getTagStructureOptions = makeTagOptionsSelector("data_field");
-  const searchQuerySelector = makeSearchQuerySelector(
-    "conceptQuery",
-    "conceptActiveFilters"
-  );
   const getTagConceptOptions = makeTagOptionsSelector("business_concept");
   const structureSearchQuerySelector = makeSearchQuerySelector(
     "structureQuery",
@@ -407,7 +323,6 @@ const makeMapStateToProps = () => {
     "structureDateFilter"
   );
   const mapStateToProps = (state, props) => ({
-    conceptPayload: searchQuerySelector(state, props),
     selectedRelationTags: state.selectedRelationTags,
     structurePayload: structureSearchQuerySelector(state, props),
     tagStructureOptions: getTagStructureOptions(state),
@@ -419,7 +334,6 @@ const makeMapStateToProps = () => {
 };
 
 export default connect(makeMapStateToProps, {
-  fetchConcepts,
   createRelation,
   deleteRelation,
   fetchStructures,

package/src/concepts/components/ConceptsPagination.js

@@ -1,14 +1,16 @@
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
+import React from "react";
 import { Pagination } from "@truedat/core/components";
-import { selectConceptPage } from "../routines";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({ selectPage: selectConceptPage }, dispatch);
+export default function ConceptsPagination() {
+  const { count, size, page, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
 
-const mapStateToProps = ({ conceptQuery, conceptCount, conceptsPageSize }) => ({
-  activePage: conceptQuery?.page,
-  totalPages: Math.ceil(conceptCount / conceptsPageSize),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Pagination);
+  return (
+    <Pagination
+      totalPages={totalPages}
+      activePage={page}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/concepts/components/ConceptsPanel.js

@@ -2,33 +2,70 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Dimmer, Loader } from "semantic-ui-react";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import { translations } from "../utils/filterOptions";
+import {
+  useConceptVersionsSearch,
+  useConceptFilters,
+} from "../hooks/useConcepts";
 import ConceptsActions from "./ConceptsActions";
 import ConceptsLabelResults from "./ConceptsLabelResults";
 import ConceptsPagination from "./ConceptsPagination";
-import ConceptsSearch from "./ConceptsSearch";
 import ConceptsTable from "./ConceptsTable";
-import ConceptSelectedFilters from "./ConceptSelectedFilters";
-
-export const ConceptsPanel = ({ loading, ...actions }) => (
-  <>
-    <ConceptsActions {...actions} />
-    <ConceptsSearch />
-    <ConceptSelectedFilters />
-    <Dimmer.Dimmable dimmed={loading}>
-      <Dimmer active={loading} inverted>
-        <Loader />
-      </Dimmer>
-      <ConceptsLabelResults />
-      <ConceptsTable />
-      <ConceptsPagination />
-    </Dimmer.Dimmable>
-  </>
-);
+
+export function ConceptsPanelContent({ actions }) {
+  const { loading } = useSearchContext();
+
+  return (
+    <>
+      <ConceptsActions {...actions} />
+      <SearchWidget />
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+        <ConceptsLabelResults />
+        <ConceptsTable />
+        <ConceptsPagination />
+      </Dimmer.Dimmable>
+    </>
+  );
+}
+
+ConceptsPanelContent.propTypes = {
+  actions: PropTypes.object,
+};
+
+export const ConceptsPanel = ({ defaultFilters, actions, filtersGroup }) => {
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useConceptVersionsSearch,
+    useFilters: useConceptFilters,
+    userFiltersType: "business_concept_user_filters",
+    omitFilters: ["current", "domain_ids"],
+    translations,
+    filtersGroup,
+  };
+
+  return (
+    <SearchContextProvider {...searchProps} defaultFilters={defaultFilters}>
+      <ConceptsPanelContent actions={actions} />
+    </SearchContextProvider>
+  );
+};
 
 ConceptsPanel.propTypes = {
-  loading: PropTypes.bool,
+  actions: PropTypes.object,
+  defaultFilters: PropTypes.object,
 };
 
-const mapStateToProps = ({ conceptsLoading }) => ({ loading: conceptsLoading });
+const mapStateToProps = (state) => ({
+  filtersGroup: state.conceptFiltersGroup || [],
+});
 
 export default connect(mapStateToProps)(ConceptsPanel);

package/src/concepts/components/ConceptsTable.js

@@ -1,123 +1,94 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { compose } from "redux";
 import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
 import { Table, Header, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import { withRouter } from "react-router";
-import { getSortInfo, sortColumn } from "@truedat/core/services/sort";
+import { sortColumn } from "@truedat/core/services/sort";
 import { CONCEPTS_PENDING } from "@truedat/core/routes";
-import { sortConcepts } from "../routines";
-import { getConceptsRows, getConceptColumns } from "../selectors";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { getConceptColumns } from "../selectors";
 import ConceptRow from "./ConceptRow";
 
-export class ConceptsTable extends React.Component {
-  static propTypes = {
-    loading: PropTypes.bool,
-    sortBy: PropTypes.array,
-    concepts: PropTypes.array,
-    columns: PropTypes.array,
-    location: PropTypes.object,
-    sortConcepts: PropTypes.func,
-  };
+export const ConceptsTable = ({ columns }) => {
+  const {
+    searchData,
+    loading,
+    sortColumn: sortedColumn,
+    sortDirection: direction,
+    setSortColumn: setColumn,
+    setSortDirection: setDirection,
+  } = useSearchContext();
 
-  //initial state
-  state = {
-    sortedColumn: _.prop("column")(getSortInfo(this.props.sortBy)),
-    direction: _.prop("direction")(getSortInfo(this.props.sortBy)),
-  };
+  const concepts = searchData?.data;
+  const { pathname } = useLocation();
+  const conceptColumns = columns.filter(
+    (column) => pathname === CONCEPTS_PENDING || column.name != "status"
+  );
+  const dummySortFunc = () => {};
 
-  setDirection = (direction) => {
-    this.setState({ direction: direction });
-  };
+  return (
+    <>
+      {!_.isEmpty(concepts) && (
+        <Table selectable sortable>
+          <Table.Header>
+            <Table.Row>
+              {conceptColumns &&
+                conceptColumns.map((column, key) => (
+                  <Table.HeaderCell
+                    key={key}
+                    width={column.width}
+                    content={
+                      <FormattedMessage
+                        id={`concepts.props.${column.header || column.name}`}
+                      />
+                    }
+                    sorted={
+                      _.path("sort.name")(column) === sortedColumn
+                        ? direction
+                        : null
+                    }
+                    className={_.path("sort.name")(column) ? "" : "disabled"}
+                    onClick={() =>
+                      sortColumn(
+                        column,
+                        dummySortFunc,
+                        setDirection,
+                        setColumn,
+                        direction,
+                        sortedColumn
+                      )
+                    }
+                  />
+                ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {concepts.map((c, i) => (
+              <ConceptRow key={i} concept={c} columns={conceptColumns} />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {loading || concepts?.length ? null : (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            <FormattedMessage id="concepts.search.results.empty" />
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
 
-  setColumn = (column) => {
-    this.setState({ sortedColumn: column });
-  };
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.sortBy != this.props.sortBy) {
-      const { column: sortedColumn, direction: direction } = getSortInfo(
-        this.props.sortBy
-      );
-      this.setState({ sortedColumn, direction });
-    }
-  }
-
-  render() {
-    const { concepts, columns, loading, location, sortConcepts } = this.props;
-    const { sortedColumn, direction } = this.state;
-
-    const pathname = _.prop("pathname")(location);
-    const conceptColumns = columns.filter(
-      (column) => pathname === CONCEPTS_PENDING || column.name != "status"
-    );
-
-    return (
-      <>
-        {!_.isEmpty(concepts) && (
-          <Table selectable sortable>
-            <Table.Header>
-              <Table.Row>
-                {conceptColumns &&
-                  conceptColumns.map((column, key) => (
-                    <Table.HeaderCell
-                      key={key}
-                      width={column.width}
-                      content={
-                        <FormattedMessage
-                          id={`concepts.props.${column.header || column.name}`}
-                        />
-                      }
-                      sorted={
-                        _.path("sort.name")(column) === sortedColumn
-                          ? direction
-                          : null
-                      }
-                      className={_.path("sort.name")(column) ? "" : "disabled"}
-                      onClick={() =>
-                        sortColumn(
-                          column,
-                          sortConcepts,
-                          this.setDirection,
-                          this.setColumn,
-                          direction,
-                          sortedColumn
-                        )
-                      }
-                    />
-                  ))}
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {concepts.map((c, i) => (
-                <ConceptRow key={i} concept={c} columns={conceptColumns} />
-              ))}
-            </Table.Body>
-          </Table>
-        )}
-        {loading || concepts?.length ? null : (
-          <Header as="h4">
-            <Icon name="search" />
-            <Header.Content>
-              <FormattedMessage id="concepts.search.results.empty" />
-            </Header.Content>
-          </Header>
-        )}
-      </>
-    );
-  }
-}
+ConceptsTable.propTypes = {
+  columns: PropTypes.array,
+};
 
 const mapStateToProps = (state) => ({
   columns: getConceptColumns(state),
-  concepts: getConceptsRows(state),
-  loading: state.conceptsLoading,
-  sortBy: _.path("conceptQuery.sort")(state),
 });
 
-export default compose(
-  withRouter,
-  connect(mapStateToProps, { sortConcepts })
-)(ConceptsTable);
+export default connect(mapStateToProps)(ConceptsTable);

package/src/concepts/components/ConceptsUpdateButton.js

@@ -1,18 +1,61 @@
 import _ from "lodash/fp";
 import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useDispatch } from "react-redux";
 import { Button, Popup } from "semantic-ui-react";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { useAuthorized } from "@truedat/core/hooks";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { CONCEPTS_BULK_UPDATE } from "@truedat/core/routes";
+import { bulkUpdateQuery } from "../routines";
+
+const withoutTemplate = (filters) =>
+  _.negate(_.isEmpty)(filters) && _.negate(_.has("template"))(filters);
+
+const singleTemplate = (filters, key) =>
+  _.flow(_.propOr([], key), verifyTemplateSize)(filters);
+
+const existingTemplate = (conceptFilters, conceptActiveFilters) =>
+  withoutTemplate(conceptFilters) ||
+  singleTemplate(conceptActiveFilters, "template") ||
+  singleTemplate(conceptFilters, "template.values");
+const verifyTemplateSize = (template) => _.size(template) === 1;
+
+export const ConceptsUpdateButton = () => {
+  const setBulkUpdateQuery = useDispatch();
+
+  const history = useHistory();
+  const {
+    allActiveFilters: conceptActiveFilters,
+    count: conceptCount,
+    filters: conceptFilters,
+    loading: conceptsLoading,
+    filterParams: searchParams,
+    searchData,
+  } = useSearchContext();
 
-export const ConceptsUpdateButton = ({ updateUrl }) => {
   const { pathname } = useLocation();
   const authorized = useAuthorized();
   const pathNameWithoutSlash = pathname.split("/").pop();
 
+  const updateUrl =
+    conceptCount !== 0 &&
+    !conceptsLoading &&
+    existingTemplate(conceptFilters, conceptActiveFilters)
+      ? CONCEPTS_BULK_UPDATE
+      : null;
+
+  const navigate = () => {
+    setBulkUpdateQuery(
+      bulkUpdateQuery({
+        conceptCount,
+        searchParams,
+        concepts: searchData?.data || [],
+      })
+    );
+    history.push(updateUrl + `?${pathNameWithoutSlash}` || "");
+  };
+
   return authorized ? (
     <Popup
       content={<FormattedMessage id="concepts.actions.bulk_update.popup" />}
@@ -22,8 +65,7 @@ export const ConceptsUpdateButton = ({ updateUrl }) => {
         <span className="button-update">
           <Button
             primary
-            as={Link}
-            to={updateUrl + `?${pathNameWithoutSlash}` || ""}
+            onClick={navigate}
             content={<FormattedMessage id="actions.update" />}
             disabled={_.isEmpty(updateUrl)}
           />
@@ -33,34 +75,4 @@ export const ConceptsUpdateButton = ({ updateUrl }) => {
   ) : null;
 };
 
-ConceptsUpdateButton.propTypes = {
-  updateUrl: PropTypes.string,
-};
-
-const withoutTemplate = (filters) =>
-  _.negate(_.isEmpty)(filters) && _.negate(_.has("template"))(filters);
-
-const singleTemplate = (filters, key) =>
-  _.flow(_.propOr([], key), verifyTemplateSize)(filters);
-
-const existingTemplate = (conceptFilters, conceptActiveFilters) =>
-  withoutTemplate(conceptFilters) ||
-  singleTemplate(conceptActiveFilters, "template") ||
-  singleTemplate(conceptFilters, "template.values");
-const verifyTemplateSize = (template) => _.size(template) === 1;
-
-const mapStateToProps = ({
-  conceptActiveFilters,
-  conceptFilters,
-  conceptCount,
-  conceptsLoading,
-}) => ({
-  updateUrl:
-    conceptCount !== 0 &&
-    !conceptsLoading &&
-    existingTemplate(conceptFilters, conceptActiveFilters)
-      ? CONCEPTS_BULK_UPDATE
-      : null,
-});
-
-export default connect(mapStateToProps)(ConceptsUpdateButton);
+export default ConceptsUpdateButton;

package/src/concepts/components/DomainConcepts.js

@@ -2,9 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import ConceptsPanel from "./ConceptsPanel";
-import ConceptsLoader from "./ConceptsLoader";
-import ConceptFiltersLoader from "./ConceptFiltersLoader";
-import ConceptUserFiltersLoader from "./ConceptUserFiltersLoader";
 
 export const DomainConcepts = ({ domain = {} }) => {
   const defaultFilters = {
@@ -12,14 +9,8 @@ export const DomainConcepts = ({ domain = {} }) => {
     current: [true],
     status: ["published"],
   };
-  return (
-    <>
-      <ConceptUserFiltersLoader />
-      <ConceptFiltersLoader defaultFilters={defaultFilters} />
-      <ConceptsLoader defaultFilters={defaultFilters} />
-      <ConceptsPanel />
-    </>
-  );
+
+  return <ConceptsPanel defaultFilters={defaultFilters} />;
 };
 
 DomainConcepts.propTypes = {