Create registration system for instances to override (overridable) UI components

tldr; we are missing the hooks/registration system to make an InvenioRDM instance able to override react-overridable components.

Background

Let's consider 2 current usages of react-overridable:

1- Invenio-Requests: invenio-requests/invenio_requests/assets/semantic-ui/js/invenio_requests/requestsAppInit.js 2- Invenio-Communities: invenio-communities/invenio_communities/assets/semantic-ui/js/invenio_communities/requests/index.js

In 1-, the overriding components are imported and passed

const overriddenComponents = {
  // TimelineUnknownEvent is imported in this file and passed here  
  "TimelineEvent.layout.unknown": TimelineUnknownEvent,
  // ...
}

ReactDOM.render(
  <InvenioRequestsApp
    request={request}
    defaultQueryParams={defaultQueryParams}
    // and then passed here
    overriddenCmps={overriddenComponents}
    userAvatar={userAvatar}
  />,
  requestDetailsDiv
);

. InvenioRequestsApp then renders with <OverridableContext.Provider value={overriddenCmps}>.

The equivalent for the deposit form would be to pass the overriding components in invenio-app-rdm/invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/index.js:

ReactDOM.render(
  <RDMDepositForm
    record={getInputFromDOM("deposits-record")}
    preselectedCommunity={getInputFromDOM("deposits-draft-community")}
    files={getInputFromDOM("deposits-record-files")}
    config={getInputFromDOM("deposits-config")}
    permissions={getInputFromDOM("deposits-record-permissions")}
    overriddenCmps={overriddenComponents}
  />,
  document.getElementById("deposit-form")
);

. RDMDepositForm could then be made to render with <OverridableContext.Provider value={overriddenCmps}> and have e.g., the PublishButton (the real component we want to override) overridden.

The problem is how to fill overriddenComponents with components from my instance? The above works because the render is under control of the module. It's not the case for instances.

In 2-, the setup is similar but of note is that it uses the

parametrize(RequestDeclineButton, {
  size: "mini",
  className: "mt-10 fluid-responsive",
});

approach to create the overriding components first. It then does the same passing of overridden components but via the createSearchAppInit.

The use of the parametrize would be a seam for an instance to pass their publishExtra there via config, but we would be back to a config.py value which isn't quite what we want.

So the fundamental problem is: how does an instance provide components to the deposit form for overriding?

This ticket is about creating such a mechanism.

_Originally posted by @fenekku in https://github.com/inveniosoftware/invenio-app-rdm/pull/1832#discussion_r959749598_

inveniosoftware / invenio-app-rdm

Create registration system for instances to override (overridable) UI components #1858

Background