overridable: enable components to be overriden

* namespaces search apps * closes inveniosoftware/invenio-app-rdm#2018
inveniosoftware · Jan 26, 2023 · 53815c2 · 53815c2
1 parent dd1f0ae
commit 53815c2
Show file tree

Hide file tree

Showing 20 changed files with 234 additions and 133 deletions.
diff --git a/...unities/assets/semantic-ui/js/invenio_communities/community/communities-carousel/index.js b/...unities/assets/semantic-ui/js/invenio_communities/community/communities-carousel/index.js
@@ -8,8 +8,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import CommunitiesCarousel from "./CommunitiesCarousel";
-import { OverridableContext } from "react-overridable";
-import { overriddenComponents } from "./override";
+import { OverridableContext, overrideStore } from "react-overridable";
 
 const communitiesCarouselContainer = document.getElementById("communities-carousel");
 const title = communitiesCarouselContainer.dataset.title;
@@ -18,6 +17,8 @@ const intervalDelay = parseInt(communitiesCarouselContainer.dataset.intervalDela
 const animationSpeed = parseInt(communitiesCarouselContainer.dataset.animationSpeed);
 const defaultLogo = communitiesCarouselContainer.dataset.defaultLogo;
 
+const overriddenComponents = overrideStore.getAll();
+
 ReactDOM.render(
   <OverridableContext.Provider value={overriddenComponents}>
     <CommunitiesCarousel

diff --git a/...ties/assets/semantic-ui/js/invenio_communities/community/communities-carousel/override.js b/...ties/assets/semantic-ui/js/invenio_communities/community/communities-carousel/override.js
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,10 +230,13 @@ 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} />
+            <SearchAppResultsPane
+              layoutOptions={config.layoutOptions}
+              appName={appName}
+            />
           </Grid.Column>
         </Grid.Row>
       </Grid>
@@ -248,15 +253,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,10 +174,13 @@ 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} />
+            <SearchAppResultsPane
+              layoutOptions={config.layoutOptions}
+              appName={appName}
+            />
           </Grid.Column>
         </Grid.Row>
       </Grid>
@@ -187,6 +190,11 @@ export const CommunityRecordSearchAppLayout = ({ config }) => {
 
 CommunityRecordSearchAppLayout.propTypes = {
   config: PropTypes.object.isRequired,
+  appName: PropTypes.string,
+};
+
+CommunityRecordSearchAppLayout.defaultProps = {
+  appName: "",
 };
 
 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/...tic-ui/js/invenio_communities/members/components/bulk_actions/SearchResultsBulkActions.js b/...tic-ui/js/invenio_communities/members/components/bulk_actions/SearchResultsBulkActions.js
@@ -60,7 +60,7 @@ export class SearchResultsBulkActions extends Component {
     }));
 
     return (
-      <Overridable id="SearchResultsBulkActionsManager.layout">
+      <Overridable id="InvenioCommunities.SearchResultsBulkActionsManager.layout">
         <div className="flex">
           <Checkbox
             className="align-self-center mr-10"

diff --git a/...js/invenio_communities/members/components/bulk_actions/SearchResultsBulkActionsManager.js b/...js/invenio_communities/members/components/bulk_actions/SearchResultsBulkActionsManager.js
@@ -55,7 +55,7 @@ class SearchResultsBulkActionsManager extends Component {
     const { children } = this.props;
     const { allSelected, selectedCount } = this.state;
     return (
-      <Overridable id="SearchResultsBulkActionsManager.layout">
+      <Overridable id="InvenioCommunities.SearchResultsBulkActionsManager.layout">
         <BulkActionsContext.Provider
           value={{
             bulkActionContext: this.selected,

diff --git a/.../assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsSearchLayout.js b/.../assets/semantic-ui/js/invenio_communities/members/invitations/InvitationsSearchLayout.js
@@ -19,8 +19,14 @@ import { SearchFilters } from "@js/invenio_search_ui/components/SearchFilters";
 
 export class InvitationsSearchLayout extends Component {
   render() {
-    const { config, roles, rolesCanInvite, community, communityGroupsEnabled } =
-      this.props;
+    const {
+      config,
+      roles,
+      rolesCanInvite,
+      community,
+      communityGroupsEnabled,
+      appName,
+    } = this.props;
 
     const filtersClass = new Filters(roles);
     const customFilters = filtersClass.getInvitationFilters();
@@ -50,7 +56,7 @@ export class InvitationsSearchLayout extends Component {
           <FilterLabels ignoreFilters={["is_open"]} />
         </div>
 
-        <SearchAppResultsPane layoutOptions={config.layoutOptions} />
+        <SearchAppResultsPane layoutOptions={config.layoutOptions} appName={appName} />
       </>
     );
   }
@@ -62,4 +68,9 @@ InvitationsSearchLayout.propTypes = {
   rolesCanInvite: PropTypes.object.isRequired,
   community: PropTypes.object.isRequired,
   communityGroupsEnabled: PropTypes.bool.isRequired,
+  appName: PropTypes.string,
+};
+
+InvitationsSearchLayout.defaultProps = {
+  appName: "",
 };
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, {
@@ -43,32 +45,35 @@ const InvitationsSearchLayoutWithConfig = parametrize(InvitationsSearchLayout, {
   community: community,
   permissions: permissions,
   communityGroupsEnabled: communityGroupsEnabled,
+  appName: appName,
 });
 
 const InvitationsContextProvider = parametrize(ContextProvider, {
   community: community,
 });
 
 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/...sets/semantic-ui/js/invenio_communities/members/members/components/MembersSearchLayout.js b/...sets/semantic-ui/js/invenio_communities/members/members/components/MembersSearchLayout.js
@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
 
 export class MembersSearchLayout extends Component {
   render() {
-    const { config, roles } = this.props;
+    const { config, roles, appName } = this.props;
     const filtersClass = new Filters(roles);
     const customFilters = filtersClass.getMembersFilters();
     return (
@@ -36,7 +36,7 @@ export class MembersSearchLayout extends Component {
           <FilterLabels />
         </div>
 
-        <SearchAppResultsPane layoutOptions={config.layoutOptions} />
+        <SearchAppResultsPane layoutOptions={config.layoutOptions} appName={appName} />
       </>
     );
   }
@@ -45,4 +45,9 @@ export class MembersSearchLayout extends Component {
 MembersSearchLayout.propTypes = {
   config: PropTypes.object.isRequired,
   roles: PropTypes.array.isRequired,
+  appName: PropTypes.string,
+};
+
+MembersSearchLayout.defaultProps = {
+  appName: "",
 };
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,
@@ -50,23 +52,26 @@ const MembersSearchAppContext = parametrize(MembersSearchAppContextCmp, {
 
 const MembersSearchLayoutWithConfig = parametrize(MembersSearchLayout, {
   roles: communitiesAllRoles,
+  appName: appName,
 });
 
 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
 );