overrideStore: add global mapping for overriden components

* closes inveniosoftware#2018

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/index.js

@@ -9,8 +9,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { getInputFromDOM } from "react-invenio-deposit";
 import { RDMDepositForm } from "./RDMDepositForm";
-import { OverridableContext } from "react-overridable";
-import { overriddenComponents } from "./override";
+import { OverridableContext, overrideStore } from "react-overridable";
+
+const overriddenComponents = overrideStore.getAll();
 
 ReactDOM.render(
   <OverridableContext.Provider value={overriddenComponents}>

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/frontpage/index.js

@@ -7,9 +7,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import RecordsList from "./RecordsList";
-import { OverridableContext } from "react-overridable";
-import { overriddenComponents } from "./override";
+import { OverridableContext, overrideStore } from "react-overridable";
 
+const overriddenComponents = overrideStore.getAll();
 const recordsListContainer = document.getElementById("records-list");
 const title = recordsListContainer.dataset.title;
 const fetchUrl = recordsListContainer.dataset.fetchUrl;

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/overridableRegistry/index.js

@@ -0,0 +1,13 @@
+// This file is part of InvenioRDM
+// Copyright (C) 2023 CERN.
+//
+// Invenio App RDM is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+import { overridenComponents } from "./mapping";
+
+import { overrideStore } from "react-overridable";
+
+for (const [key, value] of Object.entries(overridenComponents)) {
+  overrideStore.add(key, value);
+}

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/override.js → invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/overridableRegistry/mapping.js

@@ -1,7 +1,7 @@
 // This file is part of InvenioRDM
-// Copyright (C) 2022 CERN.
+// Copyright (C) 2023 CERN.
 //
 // Invenio App RDM is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-export const overriddenComponents = {};
+export const overridenComponents = {};

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/search/index.js

@@ -17,7 +17,7 @@ import {
   RDMRecordMultipleSearchBarElement,
   RDMToggleComponent,
 } from "./components";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import {
   ContribSearchAppFacets,
   ContribBucketAggregationElement,
@@ -28,16 +28,30 @@ const ContribSearchAppFacetsWithConfig = parametrize(ContribSearchAppFacets, {
   toogle: true,
 });
 
-createSearchAppInit({
-  "BucketAggregation.element": ContribBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "ResultsGrid.item": RDMRecordResultsGridItem,
-  "EmptyResults.element": RDMEmptyResults,
-  "ResultsList.item": RDMRecordResultsListItemWithState,
-  "SearchApp.facets": ContribSearchAppFacetsWithConfig,
-  "SearchApp.searchbarContainer": RDMRecordSearchBarContainer,
-  "SearchBar.element": RDMRecordMultipleSearchBarElement,
-  "Count.element": RDMCountComponent,
-  "Error.element": RDMErrorComponent,
-  "SearchFilters.Toggle.element": RDMToggleComponent,
-});
+const appName = "rdm-search";
+
+export const defaultComponents = {};
+
+defaultComponents[`${appName}.BucketAggregation.element`] =
+  ContribBucketAggregationElement;
+defaultComponents[`${appName}.BucketAggregationValues.element`] =
+  ContribBucketAggregationValuesElement;
+defaultComponents[`${appName}.ResultsGrid.item`] = RDMRecordResultsGridItem;
+defaultComponents[`${appName}.EmptyResults.element`] = RDMEmptyResults;
+defaultComponents[`${appName}.ResultsList.item`] = RDMRecordResultsListItemWithState;
+defaultComponents[`${appName}.SearchApp.facets`] = ContribSearchAppFacetsWithConfig;
+defaultComponents[`${appName}.SearchApp.searchbarContainer`] =
+  RDMRecordSearchBarContainer;
+defaultComponents[`${appName}.SearchBar.element`] = RDMRecordMultipleSearchBarElement;
+defaultComponents[`${appName}.Count.element`] = RDMCountComponent;
+defaultComponents[`${appName}.Error.element`] = RDMErrorComponent;
+defaultComponents[`${appName}.SearchFilters.Toggle.element`] = RDMToggleComponent;
+
+const overriddenComponents = overrideStore.getAll();
+
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/base.js

@@ -88,6 +88,7 @@ DashboardResultView.propTypes = {
 export const DashboardSearchLayoutHOC = ({
   searchBarPlaceholder = "",
   newBtn = () => null,
+  appName = undefined,
 }) => {
   const DashboardUploadsSearchLayout = (props) => {
     const [sidebarVisible, setSidebarVisible] = React.useState(false);
@@ -118,7 +119,7 @@ export const DashboardSearchLayoutHOC = ({
             open={sidebarVisible}
             onHideClick={() => setSidebarVisible(false)}
           >
-            <SearchAppFacets aggs={config.aggs} />
+            <SearchAppFacets aggs={config.aggs} appName={appName} />
           </GridResponsiveSidebarColumn>
           <Grid.Column mobile={16} tablet={16} computer={12}>
             <SearchAppResultsPane layoutOptions={config.layoutOptions} />

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/communities.js

@@ -21,6 +21,9 @@ import {
   ContribBucketAggregationElement,
   ContribBucketAggregationValuesElement,
 } from "@js/invenio_search_ui/components";
+import { overrideStore } from "react-overridable";
+
+export const appName = "dashboard-communities";
 
 function ResultsGridItemTemplate({ result, index }) {
   return (
@@ -74,6 +77,7 @@ export const DashboardCommunitiesSearchLayout = DashboardSearchLayoutHOC({
       floated="right"
     />
   ),
+  appName: appName,
 });
 
 export const RDMCommunitiesEmptyResults = (props) => {
@@ -98,16 +102,25 @@ RDMCommunitiesEmptyResults.propTypes = {
   resetQuery: PropTypes.func.isRequired,
 };
 
-export const defaultComponents = {
-  "BucketAggregation.element": ContribBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "EmptyResults.element": RDMCommunitiesEmptyResults,
-  "ResultsList.item": CommunitiesResultsItemTemplate,
-  "ResultsGrid.item": ResultsGridItemTemplate,
-  "SearchApp.facets": ContribSearchAppFacets,
-  "SearchApp.layout": DashboardCommunitiesSearchLayout,
-  "SearchApp.results": DashboardResultView,
-  "SearchBar.element": RDMRecordSearchBarElement,
-};
+export const defaultComponents = {};
+
+defaultComponents[`${appName}.BucketAggregation.element`] =
+  ContribBucketAggregationElement;
+defaultComponents[`${appName}.BucketAggregationValues.element`] =
+  ContribBucketAggregationValuesElement;
+defaultComponents[`${appName}.EmptyResults.element`] = RDMCommunitiesEmptyResults;
+defaultComponents[`${appName}.ResultsList.item`] = CommunitiesResultsItemTemplate;
+defaultComponents[`${appName}.ResultsGrid.item`] = ResultsGridItemTemplate;
+defaultComponents[`${appName}.SearchApp.facets`] = ContribSearchAppFacets;
+defaultComponents[`${appName}.SearchApp.layout`] = DashboardCommunitiesSearchLayout;
+defaultComponents[`${appName}.SearchApp.results`] = DashboardResultView;
+defaultComponents[`${appName}.SearchBar.element`] = RDMRecordSearchBarElement;
+
+const overriddenComponents = overrideStore.getAll();
 
-createSearchAppInit(defaultComponents);
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js

@@ -20,7 +20,7 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { GridResponsiveSidebarColumn } from "react-invenio-forms";
 import { Count, ResultsList, SearchBar, Sort, withState } from "react-searchkit";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import {
   LabelTypeInvitation,
   LabelTypeSubmission,
@@ -60,6 +60,8 @@ import {
   ContribBucketAggregationValuesElement,
 } from "@js/invenio_search_ui/components";
 
+const appName = "dashboard-requests";
+
 export const RequestsResults = ({
   sortOptions,
   paginationOptions,
@@ -313,7 +315,7 @@ export const RDMRequestsSearchLayout = (props) => {
             open={sidebarVisible}
             onHideClick={() => setSidebarVisible(false)}
           >
-            <SearchAppFacets aggs={config.aggs} />
+            <SearchAppFacets aggs={config.aggs} appName={appName} />
           </GridResponsiveSidebarColumn>
           <Grid.Column mobile={16} tablet={16} computer={12}>
             <SearchAppResultsPane layoutOptions={config.layoutOptions} />
@@ -418,30 +420,44 @@ const Cancelled = () => <LabelStatusCancel className="neutral" size="small" />;
 
 const Expired = () => <LabelStatusExpire className="expired" size="small" />;
 
-export const defaultComponents = {
-  "BucketAggregation.element": ContribBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "SearchApp.facets": ContribSearchAppFacets,
-  "ResultsList.item": RequestsResultsItemTemplateDashboard,
-  "ResultsGrid.item": RequestsResultsGridItemTemplate,
-  "SearchApp.layout": RDMRequestsSearchLayout,
-  "SearchApp.results": RequestsResults,
-  "SearchBar.element": RDMRecordSearchBarElement,
-  "EmptyResults.element": RDMRequestsEmptyResultsWithState,
-  "RequestTypeLabel.layout.community-submission": CommunitySubmission,
-  "RequestTypeLabel.layout.community-invitation": CommunityInvitation,
-  "RequestStatusLabel.layout.submitted": Submitted,
-  "RequestStatusLabel.layout.deleted": Deleted,
-  "RequestStatusLabel.layout.accepted": Accepted,
-  "RequestStatusLabel.layout.declined": Declined,
-  "RequestStatusLabel.layout.cancelled": Cancelled,
-  "RequestStatusLabel.layout.expired": Expired,
-  "RequestActionModalTrigger.accept": RequestAcceptModalTriggerWithConfig,
-  "RequestActionModalTrigger.decline": RequestDeclineModalTriggerWithConfig,
-  "RequestActionModalTrigger.cancel": RequestCancelModalTriggerWithConfig,
-  "RequestActionButton.cancel": RequestCancelButton,
-  "RequestActionButton.decline": RequestDeclineButton,
-  "RequestActionButton.accept": RequestAcceptButton,
-};
-
-createSearchAppInit(defaultComponents);
+export const defaultComponents = {};
+
+defaultComponents[`${appName}.BucketAggregation.element`] =
+  ContribBucketAggregationElement;
+defaultComponents[`${appName}.BucketAggregationValues.element`] =
+  ContribBucketAggregationValuesElement;
+defaultComponents[`${appName}.SearchApp.facets`] = ContribSearchAppFacets;
+defaultComponents[`${appName}.ResultsList.item`] = RequestsResultsItemTemplateDashboard;
+defaultComponents[`${appName}.ResultsGrid.item`] = RequestsResultsGridItemTemplate;
+defaultComponents[`${appName}.SearchApp.layout`] = RDMRequestsSearchLayout;
+defaultComponents[`${appName}.SearchApp.results`] = RequestsResults;
+defaultComponents[`${appName}.SearchBar.element`] = RDMRecordSearchBarElement;
+defaultComponents[`${appName}.EmptyResults.element`] = RDMRequestsEmptyResultsWithState;
+defaultComponents[`${appName}.RequestTypeLabel.layout.community-submission`] =
+  CommunitySubmission;
+defaultComponents[`${appName}.RequestTypeLabel.layout.community-invitation`] =
+  CommunityInvitation;
+defaultComponents[`${appName}.RequestStatusLabel.layout.submitted`] = Submitted;
+defaultComponents[`${appName}.RequestStatusLabel.layout.deleted`] = Deleted;
+defaultComponents[`${appName}.RequestStatusLabel.layout.accepted`] = Accepted;
+defaultComponents[`${appName}.RequestStatusLabel.layout.declined`] = Declined;
+defaultComponents[`${appName}.RequestStatusLabel.layout.cancelled`] = Cancelled;
+defaultComponents[`${appName}.RequestStatusLabel.layout.expired`] = Expired;
+defaultComponents[`${appName}.RequestActionModalTrigger.accept`] =
+  RequestAcceptModalTriggerWithConfig;
+defaultComponents[`${appName}.RequestActionModalTrigger.decline`] =
+  RequestDeclineModalTriggerWithConfig;
+defaultComponents[`${appName}.RequestActionModalTrigger.cancel`] =
+  RequestCancelModalTriggerWithConfig;
+defaultComponents[`${appName}.RequestActionButton.cancel`] = RequestCancelButton;
+defaultComponents[`${appName}.RequestActionButton.decline`] = RequestDeclineButton;
+defaultComponents[`${appName}.RequestActionButton.accept`] = RequestAcceptButton;
+
+const overriddenComponents = overrideStore.getAll();
+
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);

invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/uploads.js

@@ -12,7 +12,7 @@ import _get from "lodash/get";
 import _truncate from "lodash/truncate";
 import React from "react";
 import { Button, Card, Divider, Header, Segment } from "semantic-ui-react";
-import { parametrize } from "react-overridable";
+import { parametrize, overrideStore } from "react-overridable";
 import {
   RDMCountComponent,
   RDMEmptyResults as RDMNoSearchResults,
@@ -161,6 +161,8 @@ RDMEmptyResults.propTypes = {
   queryString: PropTypes.string.isRequired,
 };
 
+const appName = "dashboard-uploads";
+
 export const DashboardUploadsSearchLayout = DashboardSearchLayoutHOC({
   searchBarPlaceholder: i18next.t("Search in my uploads..."),
   newBtn: (
@@ -172,24 +174,33 @@ export const DashboardUploadsSearchLayout = DashboardSearchLayoutHOC({
       floated="right"
     />
   ),
+  appName: appName,
 });
 
 const ContribSearchAppFacetsWithConfig = parametrize(ContribSearchAppFacets, {
   toogle: true,
 });
 
-export const defaultComponents = {
-  "BucketAggregation.element": ContribBucketAggregationElement,
-  "BucketAggregationValues.element": ContribBucketAggregationValuesElement,
-  "Count.element": RDMCountComponent,
-  "EmptyResults.element": RDMEmptyResults,
-  "ResultsList.item": RDMRecordResultsListItem,
-  "ResultsGrid.item": RDMRecordResultsGridItem,
-  "SearchApp.facets": ContribSearchAppFacetsWithConfig,
-  "SearchApp.layout": DashboardUploadsSearchLayout,
-  "SearchApp.results": DashboardResultView,
-  "SearchBar.element": RDMRecordSearchBarElement,
-  "SearchFilters.Toggle.element": RDMToggleComponent,
-};
+export const defaultComponents = {};
+defaultComponents[`${appName}.BucketAggregation.element`] =
+  ContribBucketAggregationElement;
+defaultComponents[`${appName}.BucketAggregationValues.element`] =
+  ContribBucketAggregationValuesElement;
+defaultComponents[`${appName}.Count.element`] = RDMCountComponent;
+defaultComponents[`${appName}.EmptyResults.element`] = RDMEmptyResults;
+defaultComponents[`${appName}.ResultsList.item`] = RDMRecordResultsListItem;
+defaultComponents[`${appName}.ResultsGrid.item`] = RDMRecordResultsGridItem;
+defaultComponents[`${appName}.SearchApp.facets`] = ContribSearchAppFacetsWithConfig;
+defaultComponents[`${appName}.SearchApp.layout`] = DashboardUploadsSearchLayout;
+defaultComponents[`${appName}.SearchApp.results`] = DashboardResultView;
+defaultComponents[`${appName}.SearchBar.element`] = RDMRecordSearchBarElement;
+defaultComponents[`${appName}.SearchFilters.Toggle.element`] = RDMToggleComponent;
+
+const overriddenComponents = overrideStore.getAll();
 
-createSearchAppInit(defaultComponents);
+createSearchAppInit(
+  { ...defaultComponents, ...overriddenComponents },
+  true,
+  "invenio-search-config",
+  true
+);

invenio_app_rdm/theme/templates/semantic-ui/invenio_app_rdm/javascript.html

@@ -9,3 +9,4 @@
 {{ webpack['theme.js']}}
 {{ webpack['base-theme-rdm.js']}}
 {{ webpack['i18n_app.js']}}
+{{ webpack['overridable-registry.js'] }}

invenio_app_rdm/theme/webpack.py

@@ -29,6 +29,7 @@
                 "base-theme-rdm": "./js/invenio_app_rdm/theme.js",
                 "iiif-simple-previewer": "./less/invenio_app_rdm/previewer/iiif_simple.less",
                 "invenio-app-rdm-frontpage": "./js/invenio_app_rdm/frontpage/index.js",
+                "overridable-registry": "./js/invenio_app_rdm/overridableRegistry/index.js",
             },
             dependencies={
                 "@babel/runtime": "^7.9.0",

invenio_app_rdm/users_ui/templates/semantic-ui/invenio_app_rdm/users/communities.html

@@ -18,7 +18,7 @@
 {%- block user_dashboard_body %}
   <div
     id="invenio-search-config"
-    data-invenio-search-config='{{ search_app_rdm_user_communities_config() | tojson }}'
+    data-invenio-search-config='{{ search_app_rdm_user_communities_config(app_id="dashboard-communities") | tojson }}'
   >
   </div>
 {%- endblock user_dashboard_body %}

invenio_app_rdm/users_ui/templates/semantic-ui/invenio_app_rdm/users/requests.html

@@ -18,7 +18,7 @@
 {%- block user_dashboard_body %}
   <div
     id="invenio-search-config"
-    data-invenio-search-config='{{ search_app_rdm_user_requests_config() | tojson }}'
+    data-invenio-search-config='{{ search_app_rdm_user_requests_config(app_id="dashboard-requests") | tojson }}'
   >
   </div>
 {%- endblock user_dashboard_body %}

invenio_app_rdm/users_ui/templates/semantic-ui/invenio_app_rdm/users/uploads.html

@@ -18,7 +18,7 @@
 {%- block user_dashboard_body %}
   <div
     id="invenio-search-config"
-    data-invenio-search-config='{{ search_app_rdm_user_uploads_config() | tojson }}'
+    data-invenio-search-config='{{ search_app_rdm_user_uploads_config(app_id="dashboard-uploads") | tojson }}'
   >
 
 </div>