Skip to content

Commit

Permalink
overrideStore: add global mapping for overriden components
Browse files Browse the repository at this point in the history 
* closes #2018
  • Loading branch information
@jrcastro2 @kpsherva
jrcastro2 authored and kpsherva committed Jan 26, 2023
1 parent 5e834f5 commit 6c4e176
Show file tree
Hide file tree
Showing 21 changed files with 279 additions and 146 deletions.
2 changes: 1 addition & 1 deletion invenio_app_rdm/communities_ui/templates/semantic-ui/invenio_communities/details/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,6 @@
{%- block page_body %}
{{ super() }}
<div data-invenio-search-config='{{
search_app_communities_records_config(app_id="rdm-search",
search_app_communities_records_config(app_id="InvenioCommunities.DetailsSearch",
endpoint=endpoint) | tojson }}'></div>
{%- endblock page_body %}
2 changes: 1 addition & 1 deletion invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@

{%- block page_body %}
<div class="ui container">
<div data-invenio-search-config='{{ search_app_rdm_config(app_id="rdm-search") | tojson }}'></div>
<div data-invenio-search-config='{{ search_app_rdm_config(app_id="InvenioAppRdm.Search") | tojson }}'></div>
</div>
{%- endblock page_body %}
7 changes: 5 additions & 2 deletions ..._app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/components/RecordsResultsListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ import Overridable from "react-overridable";
import { SearchItemCreators } from "../utils";
import PropTypes from "prop-types";
import { Item, Label, Icon } from "semantic-ui-react";
import { buildUID } from "react-searchkit";

class RecordsResultsListItem extends Component {
render() {
const { currentQueryState, result, key } = this.props;
const { currentQueryState, result, key, appName } = this.props;

const accessStatusId = _get(result, "ui.access_status.id", "open");
const accessStatus = _get(result, "ui.access_status.title_l10n", "Open");
Expand Down Expand Up @@ -56,7 +57,7 @@ class RecordsResultsListItem extends Component {
const viewLink = `/records/${result.id}`;
return (
<Overridable
id="InvenioAppRdm.RecordsResultsListItem.layout"
id={buildUID("RecordsResultsListItem.layout", "", appName)}
result={result}
key={key}
accessStatusId={accessStatusId}
Expand Down Expand Up @@ -133,11 +134,13 @@ RecordsResultsListItem.propTypes = {
currentQueryState: PropTypes.object,
result: PropTypes.object.isRequired,
key: PropTypes.string,
appName: PropTypes.string,
};

RecordsResultsListItem.defaultProps = {
key: null,
currentQueryState: null,
appName: "",
};

export default Overridable.component("RecordsResultsListItem", RecordsResultsListItem);
42 changes: 21 additions & 21 deletions invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/RDMDepositForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export class RDMDepositForm extends Component {
permissions={permissions}
>
<Overridable
id="InvenioAppRdm.deposit.FormFeedback.layout"
id="InvenioAppRdm.Deposit.FormFeedback.layout"
labels={this.config.custom_fields.error_labels}
>
<FormFeedback
Expand All @@ -115,7 +115,7 @@ export class RDMDepositForm extends Component {
/>
</Overridable>

<Overridable id="InvenioAppRdm.deposit.CommunityHeader.layout">
<Overridable id="InvenioAppRdm.Deposit.CommunityHeader.layout">
<CommunityHeader imagePlaceholderLink="/static/images/square-placeholder.png" />
</Overridable>
<Container id="rdm-deposit-form" className="rel-mt-1">
Expand All @@ -132,7 +132,7 @@ export class RDMDepositForm extends Component {
</div>
)}
<Overridable
id="InvenioAppRdm.deposit.FileUploader.layout"
id="InvenioAppRdm.Deposit.FileUploader.layout"
record={record}
config={this.config}
>
Expand Down Expand Up @@ -161,7 +161,7 @@ export class RDMDepositForm extends Component {
{this.config.pids.map((pid) => (
<Fragment key={pid.scheme}>
<Overridable
id="InvenioAppRdm.deposit.PIDField.layout"
id="InvenioAppRdm.Deposit.PIDField.layout"
pid={pid}
record={record}
>
Expand All @@ -187,7 +187,7 @@ export class RDMDepositForm extends Component {
))}

<Overridable
id="InvenioAppRdm.deposit.ResourceTypeField.layout"
id="InvenioAppRdm.Deposit.ResourceTypeField.layout"
vocabularies={this.vocabularies}
>
<ResourceTypeField
Expand All @@ -198,7 +198,7 @@ export class RDMDepositForm extends Component {
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.TitlesField.layout"
id="InvenioAppRdm.Deposit.TitlesField.layout"
vocabularies={this.vocabularies}
>
<TitlesField
Expand All @@ -209,15 +209,15 @@ export class RDMDepositForm extends Component {
/>
</Overridable>

<Overridable id="InvenioAppRdm.deposit.PublicationDateField.layout">
<Overridable id="InvenioAppRdm.Deposit.PublicationDateField.layout">
<PublicationDateField
required
fieldPath="metadata.publication_date"
/>
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.CreatorsField.layout"
id="InvenioAppRdm.Deposit.CreatorsField.layout"
vocabularies={this.vocabularies}
config={this.config}
>
Expand All @@ -233,7 +233,7 @@ export class RDMDepositForm extends Component {
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.DescriptionsField.layout"
id="InvenioAppRdm.Deposit.DescriptionsField.layout"
record={record}
vocabularies={this.vocabularies}
>
Expand All @@ -258,7 +258,7 @@ export class RDMDepositForm extends Component {
/>
</Overridable>

<Overridable id="InvenioAppRdm.deposit.LicenseField.layout">
<Overridable id="InvenioAppRdm.Deposit.LicenseField.layout">
<LicenseField
fieldPath="metadata.rights"
searchConfig={{
Expand Down Expand Up @@ -298,7 +298,7 @@ export class RDMDepositForm extends Component {
label={i18next.t("Recommended information")}
>
<Overridable
id="InvenioAppRdm.deposit.ContributorsField.layout"
id="InvenioAppRdm.Deposit.ContributorsField.layout"
vocabularies={this.vocabularies}
config={this.config}
>
Expand All @@ -318,7 +318,7 @@ export class RDMDepositForm extends Component {
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.SubjectsField.layout"
id="InvenioAppRdm.Deposit.SubjectsField.layout"
record={record}
vocabularies={this.vocabularies}
>
Expand All @@ -330,7 +330,7 @@ export class RDMDepositForm extends Component {
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.LanguagesField.layout"
id="InvenioAppRdm.Deposit.LanguagesField.layout"
record={record}
>
<LanguagesField
Expand All @@ -349,7 +349,7 @@ export class RDMDepositForm extends Component {
</Overridable>

<Overridable
id="InvenioAppRdm.deposit.DateField.layout"
id="InvenioAppRdm.Deposit.DateField.layout"
vocabularies={this.vocabularies}
>
<DatesField
Expand All @@ -359,11 +359,11 @@ export class RDMDepositForm extends Component {
/>
</Overridable>

<Overridable id="InvenioAppRdm.deposit.VersionField.layout">
<Overridable id="InvenioAppRdm.Deposit.VersionField.layout">
<VersionField fieldPath="metadata.version" />
</Overridable>

<Overridable id="InvenioAppRdm.deposit.PublisherField.layout">
<Overridable id="InvenioAppRdm.Deposit.PublisherField.layout">
<PublisherField fieldPath="metadata.publisher" />
</Overridable>
</AccordionField>
Expand All @@ -374,7 +374,7 @@ export class RDMDepositForm extends Component {
label="Funding"
ui={this.accordionStyle}
>
<Overridable id="InvenioAppRdm.deposit.FundingField.layout">
<Overridable id="InvenioAppRdm.Deposit.FundingField.layout">
<FundingField
fieldPath="metadata.funding"
searchConfig={{
Expand Down Expand Up @@ -456,7 +456,7 @@ export class RDMDepositForm extends Component {
label={i18next.t("Alternate identifiers")}
>
<Overridable
id="InvenioAppRdm.deposit.IdentifiersField.layout"
id="InvenioAppRdm.Deposit.IdentifiersField.layout"
vocabularies={this.vocabularies}
>
<IdentifiersField
Expand All @@ -475,7 +475,7 @@ export class RDMDepositForm extends Component {
label={i18next.t("Related works")}
>
<Overridable
id="InvenioAppRdm.deposit.RelatedWorksField.layout"
id="InvenioAppRdm.Deposit.RelatedWorksField.layout"
vocabularies={this.vocabularies}
>
<RelatedWorksField
Expand All @@ -487,7 +487,7 @@ export class RDMDepositForm extends Component {
</AccordionField>
{!_isEmpty(customFieldsUI) && (
<Overridable
id="InvenioAppRdm.deposit.CustomFields.layout"
id="InvenioAppRdm.Deposit.CustomFields.layout"
customFieldsUI={customFieldsUI}
>
<CustomFields
Expand Down Expand Up @@ -536,7 +536,7 @@ export class RDMDepositForm extends Component {
</Grid>
</Card.Content>
</Card>
<Overridable id="InvenioAppRdm.deposit.AccessRightField.layout">
<Overridable id="InvenioAppRdm.Deposit.AccessRightField.layout">
<AccessRightField
label={i18next.t("Visibility")}
labelIcon="shield"
Expand Down
5 changes: 3 additions & 2 deletions invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/deposit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
80 changes: 52 additions & 28 deletions invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/frontpage/RecordsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import { Loader, Container, Header, Item, Button, Message } from "semantic-ui-re
import Overridable from "react-overridable";
import RecordsResultsListItem from "@js/invenio_app_rdm/components/RecordsResultsListItem";
import isEmpty from "lodash/isEmpty";
import { buildUID } from "react-searchkit";

class RecordsList extends Component {
export class RecordsList extends Component {
constructor(props) {
super(props);

Expand Down Expand Up @@ -55,47 +56,70 @@ class RecordsList extends Component {

render() {
const { isLoading, data, error } = this.state;
const { title } = this.props;
const { title, appName } = this.props;

const listItems = data.hits?.map((record) => {
return <RecordsResultsListItem result={record} key={record.id} />;
return (
<RecordsResultsListItem result={record} key={record.id} appName={appName} />
);
});

return (
!isEmpty(listItems) && (
<Container>
{isLoading && <Loader active inline="centered" />}

{!isLoading && !error && (
<>
<Header as="h2">{title}</Header>
<Item.Group relaxed link divided>
{listItems}
</Item.Group>
<Container textAlign="center">
<Button href="/search">{i18next.t("More")}</Button>
</Container>
</>
)}

{error && <Message content={error} error icon="warning sign" />}
</Container>
)
);
}
}

RecordsList.propTypes = {
title: PropTypes.string.isRequired,
fetchUrl: PropTypes.string.isRequired,
appName: PropTypes.string,
};

RecordsList.defaultProps = {
appName: "",
};

export class RecordsListOverridable extends Component {
render() {
const { title, fetchUrl, appName } = this.props;
return (
<Overridable
id="InvenioAppRdm.RecordsList.layout"
isLoading={isLoading}
error={error}
id={buildUID("layout", "", appName)}
title={title}
listItems={listItems}
fetchUrl={fetchUrl}
appName={appName}
>
{!isEmpty(listItems) && (
<Container>
{isLoading && <Loader active inline="centered" />}

{!isLoading && !error && (
<>
<Header as="h2">{title}</Header>
<Item.Group relaxed link divided>
{listItems}
</Item.Group>
<Container textAlign="center">
<Button href="/search">{i18next.t("More")}</Button>
</Container>
</>
)}

{error && <Message content={error} error icon="warning sign" />}
</Container>
)}
<RecordsList title={title} fetchUrl={fetchUrl} appName={appName} />
</Overridable>
);
}
}

RecordsList.propTypes = {
RecordsListOverridable.propTypes = {
title: PropTypes.string.isRequired,
fetchUrl: PropTypes.string.isRequired,
appName: PropTypes.string,
};

export default Overridable.component("RecordsList", RecordsList);
RecordsListOverridable.defaultProps = {
appName: "",
};
9 changes: 5 additions & 4 deletions invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/frontpage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@

import React from "react";
import ReactDOM from "react-dom";
import RecordsList from "./RecordsList";
import { OverridableContext } from "react-overridable";
import { overriddenComponents } from "./override";
import { RecordsListOverridable } from "./RecordsList";
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;
const appName = "InvenioAppRDM.RecordsList";

ReactDOM.render(
<OverridableContext.Provider value={overriddenComponents}>
<RecordsList title={title} fetchUrl={fetchUrl} />
<RecordsListOverridable title={title} fetchUrl={fetchUrl} appName={appName} />
</OverridableContext.Provider>,
recordsListContainer
);
7 changes: 0 additions & 7 deletions invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/frontpage/override.js
View file

This file was deleted.

Loading

0 comments on commit 6c4e176

Please sign in to comment.