overridable: enable components to be overriden

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

Hide file tree

Showing 19 changed files with 205 additions and 138 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.AdministrationListView"
     display_search = True
     display_delete = False
     display_create = False
@@ -68,6 +68,7 @@ class CommunityDetailView(AdminResourceDetailView):
     title = "Community"
 
     template = "invenio_communities/administration/community_details.html"
+    app_id = "InvenioCommunities.AdministrationDetailView"
     display_delete = False
     display_edit = False
 

diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/administration/details.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/administration/details.js
@@ -8,7 +8,7 @@ import { FeatureModal } from "./FeatureModal";
 import React from "react";
 import ReactDOM from "react-dom";
 import _get from "lodash/get";
-import { OverridableContext, parametrize } from "react-overridable";
+import { OverridableContext, parametrize, overrideStore } from "react-overridable";
 import { FeaturedEntries } from "./featured";
 import { AdminDetailsView, Edit, Delete } from "@js/invenio_administration";
 import { i18next } from "@translations/invenio_communities/i18next";
@@ -27,28 +27,21 @@ const listUIEndpoint = domContainer.dataset.listEndpoint;
 const resourceSchema = JSON.parse(domContainer.dataset.resourceSchema);
 const uiSchema = JSON.parse(domContainer.dataset?.uiConfig);
 const requestHeaders = JSON.parse(domContainer.dataset?.requestHeaders);
+const appName = JSON.parse(domContainer.dataset?.appId);
 
 const createdBySystem = (data) => data?.system_created;
 
-const overridenComponents = {
-  "InvenioAdministration.EditAction": parametrize(Edit, {
-    disable: createdBySystem,
-    disabledMessage: i18next.t(
-      "This set is not editable as it was created by the system."
-    ),
-  }),
-  "InvenioAdministration.DeleteAction": parametrize(Delete, {
-    disable: createdBySystem,
-    disabledMessage: i18next.t(
-      "This set is not deletable as it was created by the system."
-    ),
-  }),
-  "InvenioAdministration.ActionModal.layout": FeatureModal,
+const defaultComponents = {
+  [`${appName}.ActionModal.layout`]: FeatureModal,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 domContainer &&
   ReactDOM.render(
-    <OverridableContext.Provider value={overridenComponents}>
+    <OverridableContext.Provider
+      value={{ ...defaultComponents, ...overriddenComponents }}
+    >
       <AdminDetailsView
         title={title}
         actions={actions}
@@ -63,6 +56,7 @@ domContainer &&
         resourceSchema={resourceSchema}
         requestHeaders={requestHeaders}
         uiSchema={uiSchema}
+        appName={appName}
       >
         <FeaturedEntries />
       </AdminDetailsView>

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.AdministrationListView";
+
+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}.BoolFormatter`]: CustomBoolFormatter,
+  [`${appName}.ActionModal.layout`]: FeatureModal,
 };
 
+const overriddenComponents = overrideStore.getAll();
+
 createSearchAppInit(
-  overridenComponents,
+  { ...overriddenDefaultComponents, ...overriddenComponents },
   true,
   "invenio-search-config",
-  false,
+  true,
   NotificationController
 );
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,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
 );