overridable: enable components to be overriden

* namespaces search apps * closes inveniosoftware/invenio-app-rdm#2018
jrcastro2 · Jan 23, 2023 · b9f3ba1 · b9f3ba1
1 parent 3223e96
commit b9f3ba1
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 113 deletions.
diff --git a/invenio_communities/administration/communities.py b/invenio_communities/administration/communities.py
@@ -28,7 +28,7 @@ class CommunityListView(AdminResourceListView):
     pid_path = "id"
     icon = "users"
     template = "invenio_communities/administration/community_search.html"
-
+    app_id = "InvenioCommunities.Administration"
     display_search = True
     display_delete = False
     display_create = False

diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/administration/search.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/administration/search.js
@@ -7,27 +7,31 @@
 import { initDefaultSearchComponents } from "@js/invenio_administration";
 import { createSearchAppInit } from "@js/invenio_search_ui";
 import { FeatureModal } from "./FeatureModal";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import { NotificationController, BoolFormatter } from "@js/invenio_administration";
 
 const domContainer = document.getElementById("invenio-search-config");
 
-const defaultComponents = initDefaultSearchComponents(domContainer);
+const appName = "InvenioCommunities.Administration";
+
+const defaultComponents = initDefaultSearchComponents(domContainer, appName);
 const CustomBoolFormatter = parametrize(BoolFormatter, {
   icon: "star",
   color: "yellow",
 });
 
-const overridenComponents = {
+const overriddenDefaultComponents = {
   ...defaultComponents,
-  "InvenioAdministration.BoolFormatter": CustomBoolFormatter,
-  "InvenioAdministration.ActionModal": FeatureModal,
+  [`${appName}.InvenioAdministration.BoolFormatter`]: CustomBoolFormatter,
+  [`${appName}.InvenioAdministration.ActionModal`]: FeatureModal,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 createSearchAppInit(
-  overridenComponents,
+  { ...overriddenDefaultComponents, ...overriddenComponents },
   true,
   "invenio-search-config",
-  false,
+  true,
   NotificationController
 );
diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/community/search.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/community/search.js
@@ -15,7 +15,7 @@ import {
 import { i18next } from "@translations/invenio_communities/i18next";
 import React from "react";
 import { GridResponsiveSidebarColumn } from "react-invenio-forms";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import { Count, ResultsList, SearchBar, Sort, withState } from "react-searchkit";
 import { Button, Card, Container, Grid, Input, Segment } from "semantic-ui-react";
 import { ComputerTabletCommunitiesItem } from "./communities_items/ComputerTabletCommunitiesItem";
@@ -26,6 +26,8 @@ import {
 } from "@js/invenio_search_ui/components";
 import PropTypes from "prop-types";
 
+const appName = "InvenioCommunities.Search";
+
 function ResultsGridItemTemplate({ result }) {
   return (
     <Card fluid href={`/communities/${result.slug}`}>
@@ -228,7 +230,7 @@ export const CommunitiesSearchLayout = (props) => {
             open={sidebarVisible}
             onHideClick={() => setSidebarVisible(false)}
             // eslint-disable-next-line react/no-children-prop
-            children={<SearchAppFacets aggs={config.aggs} />}
+            children={<SearchAppFacets aggs={config.aggs} appName={appName} />}
           />
           <Grid.Column mobile={16} tablet={16} computer={12}>
             <SearchAppResultsPane layoutOptions={config.layoutOptions} />
@@ -248,15 +250,22 @@ const ContribSearchAppFacetsWithConfig = parametrize(ContribSearchAppFacets, {
 });
 
 const defaultComponents = {
-  "BucketAggregation.element": RDMBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "SearchApp.facets": ContribSearchAppFacetsWithConfig,
-  "ResultsList.item": ResultsItemTemplate,
-  "ResultsGrid.item": ResultsGridItemTemplate,
-  "SearchApp.layout": CommunitiesSearchLayout,
-  "SearchBar.element": CommunitiesSearchBarElement,
-  "SearchApp.results": CommunitiesResults,
+  [`${appName}.BucketAggregation.element`]: RDMBucketAggregationElement,
+  [`${appName}.BucketAggregationValues.element`]: ContribBucketAggregationValuesElement,
+  [`${appName}.SearchApp.facets`]: ContribSearchAppFacetsWithConfig,
+  [`${appName}.ResultsList.item`]: ResultsItemTemplate,
+  [`${appName}.ResultsGrid.item`]: ResultsGridItemTemplate,
+  [`${appName}.SearchApp.layout`]: CommunitiesSearchLayout,
+  [`${appName}.SearchBar.element`]: CommunitiesSearchBarElement,
+  [`${appName}.SearchApp.results`]: CommunitiesResults,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 // Auto-initialize search app
-createSearchAppInit(defaultComponents);
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);
diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/details_search/components.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/details_search/components.js
@@ -124,7 +124,7 @@ CommunityRecordResultsGridItem.propTypes = {
   result: PropTypes.object.isRequired,
 };
 
-export const CommunityRecordSearchAppLayout = ({ config }) => {
+export const CommunityRecordSearchAppLayout = ({ config, appName }) => {
   const [sidebarVisible, setSidebarVisible] = React.useState(false);
 
   return (
@@ -174,7 +174,7 @@ export const CommunityRecordSearchAppLayout = ({ config }) => {
             open={sidebarVisible}
             onHideClick={() => setSidebarVisible(false)}
             // eslint-disable-next-line react/no-children-prop
-            children={<SearchAppFacets aggs={config.aggs} />}
+            children={<SearchAppFacets aggs={config.aggs} appName={appName} />}
           />
           <Grid.Column mobile={16} tablet={16} computer={12}>
             <SearchAppResultsPane layoutOptions={config.layoutOptions} />
@@ -187,6 +187,11 @@ export const CommunityRecordSearchAppLayout = ({ config }) => {
 
 CommunityRecordSearchAppLayout.propTypes = {
   config: PropTypes.object.isRequired,
+  appName: PropTypes.string
+};
+
+CommunityRecordSearchAppLayout.defaultProps = {
+  appName: undefined,
 };
 
 export const CommunityRecordSingleSearchBarElement = withState(

diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/details_search/index.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/details_search/index.js
@@ -15,27 +15,45 @@ import {
   CommunityRecordSearchBarElement,
   CommunityToggleComponent,
 } from "./components";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import {
   ContribSearchAppFacets,
   ContribBucketAggregationElement,
   ContribBucketAggregationValuesElement,
 } from "@js/invenio_search_ui/components";
 
+const appName = "InvenioCommunities.DetailsSearch";
+
 const ContribSearchAppFacetsWithConfig = parametrize(ContribSearchAppFacets, {
   toogle: true,
 });
 
-createSearchAppInit({
-  "BucketAggregation.element": ContribBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "ResultsGrid.item": CommunityRecordResultsGridItem,
-  "EmptyResults.element": CommunityEmptyResults,
-  "ResultsList.item": CommunityRecordResultsListItem,
-  "SearchApp.facets": ContribSearchAppFacetsWithConfig,
-  "SearchApp.layout": CommunityRecordSearchAppLayout,
-  "SearchBar.element": CommunityRecordSearchBarElement,
-  "Count.element": CommunityCountComponent,
-  "Error.element": CommunityErrorComponent,
-  "SearchFilters.Toggle.element": CommunityToggleComponent,
-});
+const CommunityRecordSearchAppLayoutWAppName = parametrize(
+  CommunityRecordSearchAppLayout,
+  {
+    appName: appName,
+  }
+);
+
+const defaultComponents = {
+  [`${appName}.BucketAggregation.element`]: ContribBucketAggregationElement,
+  [`${appName}.BucketAggregationValues.element`]: ContribBucketAggregationValuesElement,
+  [`${appName}.ResultsGrid.item`]: CommunityRecordResultsGridItem,
+  [`${appName}.EmptyResults.element`]: CommunityEmptyResults,
+  [`${appName}.ResultsList.item`]: CommunityRecordResultsListItem,
+  [`${appName}.SearchApp.facets`]: ContribSearchAppFacetsWithConfig,
+  [`${appName}.SearchApp.layout`]: CommunityRecordSearchAppLayoutWAppName,
+  [`${appName}.SearchBar.element`]: CommunityRecordSearchBarElement,
+  [`${appName}.Count.element`]: CommunityCountComponent,
+  [`${appName}.Error.element`]: CommunityErrorComponent,
+  [`${appName}.SearchFilters.Toggle.element`]: CommunityToggleComponent,
+};
+
+const overriddenComponents = overrideStore.getAll();
+
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);
diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/index.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/members/invitations/index.js
@@ -7,7 +7,7 @@
  */
 
 import { createSearchAppInit } from "@js/invenio_search_ui";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import { DropdownSort } from "@js/invenio_search_ui/components";
 import { InvitationsContextProvider as ContextProvider } from "../../api/invitations/InvitationsContextProvider";
 import { InvitationResultItem } from "./InvitationResultItem";
@@ -30,6 +30,8 @@ const communitiesAllRoles = JSON.parse(dataAttr.communitiesAllRoles);
 const communitiesRolesCanInvite = JSON.parse(dataAttr.communitiesRolesCanInvite);
 const permissions = JSON.parse(dataAttr.permissions);
 
+const appName = "InvenioCommunities.InvitationsSearch";
+
 const communityGroupsEnabled = JSON.parse(dataAttr.communityGroupsEnabled);
 
 const InvitationResultItemWithConfig = parametrize(InvitationResultItem, {
@@ -50,25 +52,27 @@ const InvitationsContextProvider = parametrize(ContextProvider, {
 });
 
 const defaultComponents = {
-  "ResultsList.item": InvitationResultItemWithConfig,
-  "SearchApp.layout": InvitationsSearchLayoutWithConfig,
-  "SearchBar.element": InvitationsSearchBarElement,
-  "SearchApp.results": InvitationsResults,
-  "ResultsList.container": InvitationsResultsContainer,
-  "Sort.element": DropdownSort,
-  "RequestStatus.layout.submitted": SubmitStatus,
-  "RequestStatus.layout.deleted": DeleteStatus,
-  "RequestStatus.layout.accepted": AcceptStatus,
-  "RequestStatus.layout.declined": DeclineStatus,
-  "RequestStatus.layout.cancelled": CancelStatus,
-  "RequestStatus.layout.expired": ExpireStatus,
+  [`${appName}.ResultsList.item`]: InvitationResultItemWithConfig,
+  [`${appName}.SearchApp.layout`]: InvitationsSearchLayoutWithConfig,
+  [`${appName}.SearchBar.element`]: InvitationsSearchBarElement,
+  [`${appName}.SearchApp.results`]: InvitationsResults,
+  [`${appName}.ResultsList.container`]: InvitationsResultsContainer,
+  [`${appName}.Sort.element`]: DropdownSort,
+  [`${appName}.RequestStatus.layout.submitted`]: SubmitStatus,
+  [`${appName}.RequestStatus.layout.deleted`]: DeleteStatus,
+  [`${appName}.RequestStatus.layout.accepted`]: AcceptStatus,
+  [`${appName}.RequestStatus.layout.declined`]: DeclineStatus,
+  [`${appName}.RequestStatus.layout.cancelled`]: CancelStatus,
+  [`${appName}.RequestStatus.layout.expired`]: ExpireStatus,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 // Auto-initialize search app
 createSearchAppInit(
-  defaultComponents,
+  { ...defaultComponents, ...overriddenComponents },
   true,
   "invenio-search-config",
-  false,
+  true,
   InvitationsContextProvider
 );
diff --git a/...mmunities/assets/semantic-ui/js/invenio_communities/members/members/manager_view/index.js b/...mmunities/assets/semantic-ui/js/invenio_communities/members/members/manager_view/index.js
@@ -7,7 +7,7 @@
  */
 
 import { createSearchAppInit } from "@js/invenio_search_ui";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import { DropdownSort } from "@js/invenio_search_ui/components";
 import { memberVisibilityTypes } from "../";
 import { MembersSearchBarElement } from "../../components/MembersSearchBarElement";
@@ -24,6 +24,8 @@ const communitiesAllRoles = JSON.parse(dataAttr.communitiesAllRoles);
 const community = JSON.parse(dataAttr.community);
 const permissions = JSON.parse(dataAttr.permissions);
 
+const appName = "InvenioCommunities.ManagerSearch";
+
 const ManagerMembersResultItemWithConfig = parametrize(ManagerMembersResultItem, {
   config: {
     rolesCanUpdate: communitiesRolesCanUpdate,
@@ -53,20 +55,22 @@ const MembersSearchLayoutWithConfig = parametrize(MembersSearchLayout, {
 });
 
 const defaultComponents = {
-  "ResultsList.item": ManagerMembersResultItemWithConfig,
-  "ResultsGrid.item": MembersResultsGridItem,
-  "SearchApp.layout": MembersSearchLayoutWithConfig,
-  "SearchBar.element": MembersSearchBarElement,
-  "SearchApp.results": MembersResults,
-  "ResultsList.container": ManagerMembersResultContainerWithCommunity,
-  "Sort.element": DropdownSort,
+  [`${appName}.ResultsList.item`]: ManagerMembersResultItemWithConfig,
+  [`${appName}.ResultsGrid.item`]: MembersResultsGridItem,
+  [`${appName}.SearchApp.layout`]: MembersSearchLayoutWithConfig,
+  [`${appName}.SearchBar.element`]: MembersSearchBarElement,
+  [`${appName}.SearchApp.results`]: MembersResults,
+  [`${appName}.ResultsList.container`]: ManagerMembersResultContainerWithCommunity,
+  [`${appName}.Sort.element`]: DropdownSort,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 // Auto-initialize search app
 createSearchAppInit(
-  defaultComponents,
+  { ...defaultComponents, ...overriddenComponents },
   true,
   "invenio-search-config",
-  false,
+  true,
   MembersSearchAppContext
 );
diff --git a/...ommunities/assets/semantic-ui/js/invenio_communities/members/members/member_view/index.js b/...ommunities/assets/semantic-ui/js/invenio_communities/members/members/member_view/index.js
@@ -7,7 +7,7 @@
  */
 
 import { createSearchAppInit } from "@js/invenio_search_ui";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import { DropdownSort } from "@js/invenio_search_ui/components";
 import { memberVisibilityTypes } from "../";
 import { MembersSearchBarElement } from "../../components/MembersSearchBarElement";
@@ -24,6 +24,8 @@ const communitiesRolesCanUpdate = JSON.parse(dataAttr.communitiesRolesCanUpdate)
 const permissions = JSON.parse(dataAttr.permissions);
 const community = JSON.parse(dataAttr.community);
 
+const appName = "InvenioCommunities.MemberSearch";
+
 const ManagerMembersResultItemWithConfig = parametrize(ManagerMembersResultItem, {
   config: {
     rolesCanUpdate: communitiesRolesCanUpdate,
@@ -41,20 +43,22 @@ const MembersSearchLayoutWithConfig = parametrize(MembersSearchLayout, {
 });
 
 const defaultComponents = {
-  "ResultsList.item": ManagerMembersResultItemWithConfig,
-  "ResultsGrid.item": MembersResultsGridItem,
-  "SearchApp.layout": MembersSearchLayoutWithConfig,
-  "SearchBar.element": MembersSearchBarElement,
-  "SearchApp.results": MembersResults,
-  "ResultsList.container": MembersResultsContainer,
-  "Sort.element": DropdownSort,
+  [`${appName}.ResultsList.item`]: ManagerMembersResultItemWithConfig,
+  [`${appName}.ResultsGrid.item`]: MembersResultsGridItem,
+  [`${appName}.SearchApp.layout`]: MembersSearchLayoutWithConfig,
+  [`${appName}.SearchBar.element`]: MembersSearchBarElement,
+  [`${appName}.SearchApp.results`]: MembersResults,
+  [`${appName}.ResultsList.container`]: MembersResultsContainer,
+  [`${appName}.Sort.element`]: DropdownSort,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 // Auto-initialize search app
 createSearchAppInit(
-  defaultComponents,
+  { ...defaultComponents, ...overriddenComponents },
   true,
   "invenio-search-config",
-  false,
+  true,
   MembersSearchAppContext
 );
diff --git a/...ommunities/assets/semantic-ui/js/invenio_communities/members/members/public_view/index.js b/...ommunities/assets/semantic-ui/js/invenio_communities/members/members/public_view/index.js
@@ -8,6 +8,7 @@
 
 import { createSearchAppInit } from "@js/invenio_search_ui";
 import { DropdownSort } from "@js/invenio_search_ui/components";
+import { overrideStore } from "react-overridable";
 
 import { PublicMembersResultsItem } from "./PublicMembersResultItem";
 import { MembersSearchBarElement } from "../../components/MembersSearchBarElement";
@@ -17,16 +18,25 @@ import { PublicMembersResultsContainer } from "./PublicMembersResultContainer";
 import { PublicMembersSearchLayout } from "./PublicMembersSearchLayout";
 import MembersEmptyResults from "../components/MembersEmptyResults";
 
+const appName = "InvenioCommunities.PublicSearch";
+
 const defaultComponents = {
-  "ResultsList.item": PublicMembersResultsItem,
-  "ResultsGrid.item": MembersResultsGridItem,
-  "SearchApp.layout": PublicMembersSearchLayout,
-  "SearchBar.element": MembersSearchBarElement,
-  "SearchApp.results": MembersResults,
-  "ResultsList.container": PublicMembersResultsContainer,
-  "EmptyResults.element": MembersEmptyResults,
-  "Sort.element": DropdownSort,
+  [`${appName}.ResultsList.item`]: PublicMembersResultsItem,
+  [`${appName}.ResultsGrid.item`]: MembersResultsGridItem,
+  [`${appName}.SearchApp.layout`]: PublicMembersSearchLayout,
+  [`${appName}.SearchBar.element`]: MembersSearchBarElement,
+  [`${appName}.SearchApp.results`]: MembersResults,
+  [`${appName}.ResultsList.container`]: PublicMembersResultsContainer,
+  [`${appName}.EmptyResults.element`]: MembersEmptyResults,
+  [`${appName}.Sort.element`]: DropdownSort,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 // Auto-initialize search app
-createSearchAppInit(defaultComponents);
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);