From 302544c2635def51a577371af905a4a4388fdd1b Mon Sep 17 00:00:00 2001 From: pablo Date: Mon, 26 Sep 2022 17:54:03 +0200 Subject: [PATCH] Administration: make main components overridable * remove unused components * add missing translations * closes: #102 --- .../js/invenio_administration/package.json | 3 + .../src/actions/Actions.js | 175 +++++++++--------- .../src/actions/ActionsDropdown.js | 80 ++++---- .../src/actions/Delete.js | 59 ------ .../src/actions/DeleteModal.js | 2 +- .../src/actions/DeleteModalTrigger.js | 79 ++++---- .../src/actions/Edit.js | 16 -- .../src/actions/ResourceActions.js | 18 +- .../src/actions/index.js | 12 +- .../src/components/DateFormatter.js | 7 +- .../src/components/ErrorPage.js | 10 +- .../src/components/Formatter.js | 20 +- .../src/components/Formatter.test.js | 2 +- .../src/components/Loader.js | 8 +- .../src/components/index.js | 2 +- .../src/create/CreatePage.js | 41 ++-- .../src/create/create.js | 2 +- .../src/create/index.js | 2 +- .../src/details/ActionModal.js | 56 ------ .../src/details/AdminDetailsView.js | 101 +++++----- .../{DetailsComponent.js => DetailsTable.js} | 4 +- .../src/details/details.js | 2 +- .../src/details/index.js | 3 +- .../src/edit/EditPage.js | 52 +++--- .../invenio_administration/src/edit/edit.js | 2 +- .../invenio_administration/src/edit/index.js | 2 +- .../src/formik/ActionForm.js | 44 +++-- .../src/formik/AdminForm.js | 72 +++---- .../src/formik/GenerateForm.js | 11 +- .../src/formik/index.js | 6 +- .../src/search/SearchBar.js | 35 ++-- .../src/search/SearchBarElement.js | 39 ++-- .../src/search/SearchComponents.js | 14 +- .../src/search/SearchEmptyResults.js | 50 +++-- .../src/search/SearchFacets.js | 29 --- .../src/search/SearchResultItem.js | 91 +++++---- .../src/search/SearchResults.js | 97 +++++----- .../src/search/SearchResultsContainer.js | 40 ++-- .../src/search/index.js | 11 +- 39 files changed, 646 insertions(+), 653 deletions(-) delete mode 100644 invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Delete.js delete mode 100644 invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Edit.js delete mode 100644 invenio_administration/assets/semantic-ui/js/invenio_administration/src/details/ActionModal.js rename invenio_administration/assets/semantic-ui/js/invenio_administration/src/details/{DetailsComponent.js => DetailsTable.js} (92%) delete mode 100644 invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchFacets.js diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json b/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json index 78ef6978..ab8855f5 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json @@ -5,6 +5,9 @@ "scripts": { "test": "react-scripts test" }, + "peerDependencies": { + "react-overridable": "^0.0.3" + }, "devDependencies": { "@testing-library/jest-dom": "^4.2.0", "@testing-library/react": "^9.5.0", diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Actions.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Actions.js index 2da5f774..5c0d4a08 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Actions.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Actions.js @@ -1,14 +1,19 @@ +// This file is part of InvenioAdministration +// Copyright (C) 2022 CERN. +// +// Invenio RDM Records 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 React, { Component } from "react"; import PropTypes from "prop-types"; import isEmpty from "lodash/isEmpty"; -import { ResourceActions } from "./ResourceActions"; -import { ActionsDropdown } from "./ActionsDropdown"; +import { ResourceActions, ActionsDropdown, DeleteModalTrigger } from "."; import { Button, Icon, Popup } from "semantic-ui-react"; import { AdminUIRoutes } from "../routes"; -import { DeleteModalTrigger } from "./DeleteModalTrigger"; import { i18next } from "@translations/invenio_administration/i18next"; +import Overridable from "react-overridable"; -export class Actions extends Component { +class Actions extends Component { render() { const { title, @@ -35,86 +40,86 @@ export class Actions extends Component { const displayAsDropdown = displayEdit && displayDelete && Object.keys(actions).length > 1; - if (displayAsDropdown) { - return ( - - ); - } else { - return ( - - {!isEmpty(actions) && ( - - )} - {displayEdit && ( - - - - } - /> - )} - {displayDelete && ( - - - - } - /> - )} - - ); - } + return ( + + {displayAsDropdown ? ( + + ) : ( + + {!isEmpty(actions) && ( + + )} + {displayEdit && ( + + + + } + /> + )} + {displayDelete && ( + + + + } + /> + )} + + )} + + ); } } @@ -153,3 +158,5 @@ Actions.defaultProps = { apiEndpoint: undefined, idKeyPath: "pid", }; + +export default Overridable.component("Actions", Actions); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionsDropdown.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionsDropdown.js index 75608900..a4410c73 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionsDropdown.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionsDropdown.js @@ -1,12 +1,18 @@ +// This file is part of InvenioAdministration +// Copyright (C) 2022 CERN. +// +// Invenio RDM Records 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 React, { Component } from "react"; import PropTypes from "prop-types"; import { Dropdown, Button } from "semantic-ui-react"; -import { ResourceActions } from "./ResourceActions"; +import { ResourceActions, DeleteModalTrigger } from "."; import isEmpty from "lodash/isEmpty"; import { i18next } from "@translations/invenio_administration/i18next"; -import { DeleteModalTrigger } from "./DeleteModalTrigger"; +import Overridable from "react-overridable"; -export class ActionsDropdown extends Component { +class ActionsDropdown extends Component { render() { const { title, @@ -20,38 +26,40 @@ export class ActionsDropdown extends Component { actions, } = this.props; return ( - - {!isEmpty(actions) && ( - - } - /> - )} - {displayEdit && Edit} - {displayDelete && ( - - )} - + + + {!isEmpty(actions) && ( + + } + /> + )} + {displayEdit && Edit} + {displayDelete && ( + + )} + + ); } } @@ -72,3 +80,5 @@ ActionsDropdown.defaultProps = { displayDelete: true, displayEdit: true, }; + +export default Overridable.component("ActionsDropdown", ActionsDropdown); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Delete.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Delete.js deleted file mode 100644 index 00454736..00000000 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Delete.js +++ /dev/null @@ -1,59 +0,0 @@ -import React, { Component } from "react"; -import PropTypes from "prop-types"; -import { i18next } from "@translations/invenio_administration/i18next"; -import { Button, Icon } from "semantic-ui-react"; -import { InvenioAdministrationActionsApi } from "../api/actions"; -import { NotificationContext } from "../ui_messages/context"; - -export class Delete extends Component { - constructor(props) { - super(props); - this.state = { loading: false }; - } - - static contextType = NotificationContext; - - handleOnButtonClick = async () => { - const { successCallback, resource, apiEndpoint, idKeyPath } = this.props; - const { addNotification } = this.context; - try { - await InvenioAdministrationActionsApi.deleteResource( - resource, - apiEndpoint, - idKeyPath - ); - successCallback(); - } catch (e) { - console.error(e); - addNotification({ - title: i18next.t(`Unexpected exception: ${e.response.code}`), - content: i18next.t( - `The resource could not be deleted. Error: ${e.response.data}` - ), - }); - } - }; - - render() { - const { loading } = this.state; - return ( - - ); - } -} - -Delete.propTypes = { - apiEndpoint: PropTypes.string.isRequired, - resource: PropTypes.object.isRequired, - successCallback: PropTypes.func.isRequired, - idKeyPath: PropTypes.string.isRequired, -}; diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js index 27756b4e..da887779 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js @@ -16,7 +16,7 @@ import { NotificationContext } from "../ui_messages/context"; import Overridable from "react-overridable"; import { InvenioAdministrationActionsApi } from "../api/actions"; -export class DeleteModal extends Component { +class DeleteModal extends Component { constructor(props) { super(props); this.state = { loading: false, error: undefined }; diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js index 598808f3..04c6021c 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js @@ -8,10 +8,11 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import { i18next } from "@translations/invenio_administration/i18next"; import { Button, Icon } from "semantic-ui-react"; -import { DeleteModal } from "./DeleteModal"; +import { DeleteModal } from "."; import { Modal } from "semantic-ui-react"; import { Trans } from "react-i18next"; import _get from "lodash/get"; +import Overridable from "react-overridable"; export class DeleteModalTrigger extends Component { constructor(props) { @@ -38,42 +39,44 @@ export class DeleteModalTrigger extends Component { const { modalOpen } = this.state; const triggerId = `delete-modal-trigger-${resource.id}`; return ( - <> - this.toggleModal(true)} - aria-label={i18next.t("Delete")} - aria-controls="delete-modal" - aria-expanded={modalOpen} - aria-haspopup="dialog" - title={disabledDeleteMessage} - > - - - - - - - - - - + + <> + this.toggleModal(true)} + aria-label={i18next.t("Delete")} + aria-controls="delete-modal" + aria-expanded={modalOpen} + aria-haspopup="dialog" + title={disabledDeleteMessage} + > + + + + + + + + + + + ); } } @@ -95,3 +98,5 @@ DeleteModalTrigger.defaultProps = { disabled: false, disabledDeleteMessage: "", }; + +export default Overridable.component("DeleteModalTrigger", DeleteModalTrigger); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Edit.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Edit.js deleted file mode 100644 index 99fe8dd1..00000000 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/Edit.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component } from "react"; -import { i18next } from "@translations/invenio_administration/i18next"; -import { Button } from "semantic-ui-react"; - -export class Edit extends Component { - render() { - return ( - - - - )} - + + + {(props) => ( + + + {!isEmpty(error) && ( + + )} + + + + + )} + + ); } } @@ -105,3 +113,5 @@ ActionForm.propTypes = { actionSuccessCallback: PropTypes.func.isRequired, actionCancelCallback: PropTypes.func.isRequired, }; + +export default Overridable.component("ActionForm", ActionForm); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js index a0eb5141..54832b92 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js @@ -7,12 +7,13 @@ import { Button } from "semantic-ui-react"; import { NotificationContext } from "../ui_messages/context"; import { ErrorMessage } from "../ui_messages/messages"; import isEmpty from "lodash/isEmpty"; -import { GenerateForm } from "./GenerateForm"; +import { GenerateForm } from "."; import { deserializeFieldErrors } from "../components/utils"; import { i18next } from "@translations/invenio_administration/i18next"; import mapValues from "lodash/mapValues"; +import Overridable from "react-overridable"; -export class AdminForm extends Component { +class AdminForm extends Component { constructor(props) { super(props); const { resource, formFields } = props; @@ -82,36 +83,43 @@ export class AdminForm extends Component { const { formData, error } = this.state; return ( - - {(props) => { - return ( - { - e.preventDefault(); - props.handleSubmit(); - }} - > - - {!isEmpty(error) && ( - - )} - - - ); - }} - + + {!isEmpty(error) && ( + + )} + + + ); + }} + + ); } } @@ -133,3 +141,5 @@ AdminForm.defaultProps = { formFields: undefined, successCallback: () => {}, }; + +export default Overridable.component("AdminForm", AdminForm); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js index f4f9a3a2..951ba587 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js @@ -6,6 +6,7 @@ import { Form, Segment, Header } from "semantic-ui-react"; import { AdminArrayField } from "./array"; import _isEmpty from "lodash/isEmpty"; import { sortFields } from "../components/utils"; +import Overridable from "react-overridable"; const fieldsMap = { string: Input, @@ -125,9 +126,13 @@ const mapFormFields = (obj, parentField, isCreate, formFieldsConfig) => { return elements; }; -export const GenerateForm = ({ jsonSchema, create, formFields }) => { +const GenerateForm = ({ jsonSchema, create, formFields }) => { const properties = jsonSchema; - return <>{mapFormFields(properties, undefined, create, formFields)}; + return ( + + <>{mapFormFields(properties, undefined, create, formFields)} + + ); }; GenerateForm.propTypes = { @@ -140,3 +145,5 @@ GenerateForm.defaultProps = { create: false, formFields: undefined, }; + +export default Overridable.component("GenerateForm", GenerateForm); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/index.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/index.js index 8bcf1ec2..fead3c54 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/index.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/index.js @@ -4,6 +4,6 @@ // Invenio 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 { ActionForm } from "./ActionForm"; -export { AdminForm } from "./AdminForm"; -export { GenerateForm } from "./GenerateForm"; +export { default as ActionForm } from "./ActionForm"; +export { default as AdminForm } from "./AdminForm"; +export { default as GenerateForm } from "./GenerateForm"; diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBar.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBar.js index b5ced2c7..dab4166e 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBar.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBar.js @@ -1,23 +1,34 @@ +/* + * This file is part of Invenio. + * Copyright (C) 2022 CERN. + * + * Invenio 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 React, { useContext } from "react"; import { SearchBar as SKSearchBar, Sort } from "react-searchkit"; import { SearchConfigurationContext } from "@js/invenio_search_ui/components"; import { i18next } from "@translations/invenio_administration/i18next"; +import Overridable from "react-overridable"; export const SearchBar = (props) => { const { sortOptions, sortOrderDisabled } = useContext(SearchConfigurationContext); return ( -
- - {sortOptions && ( - <>{cmp}} // eslint-disable-line react/jsx-no-useless-fragment - /> - )} -
+ +
+ + {sortOptions && ( + <>{cmp}} // eslint-disable-line react/jsx-no-useless-fragment + /> + )} +
+ ); }; -export default SearchBar; +export default Overridable.component("SearchBar", SearchBar); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBarElement.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBarElement.js index 67ef10e0..c102f65c 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBarElement.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchBarElement.js @@ -11,6 +11,7 @@ import { withState } from "react-searchkit"; import { Input } from "semantic-ui-react"; import PropTypes from "prop-types"; import { i18next } from "@translations/invenio_administration/i18next"; +import Overridable from "react-overridable"; export const SearchBarElement = withState( ({ @@ -30,23 +31,25 @@ export const SearchBarElement = withState( } }; return ( - { - onInputChange(value); - }} - value={queryString} - onKeyPress={onKeyPress} - aria-label={i18next.t("Search")} - {...uiProps} - /> + + { + onInputChange(value); + }} + value={queryString} + onKeyPress={onKeyPress} + aria-label={i18next.t("Search")} + {...uiProps} + /> + ); } ); @@ -64,3 +67,5 @@ SearchBarElement.defaultProps = { placeholder: i18next.t("Search ..."), queryString: "", }; + +export default Overridable.component("SearchBarElement", SearchBarElement); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchComponents.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchComponents.js index 96d1ffb9..07a06acc 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchComponents.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchComponents.js @@ -6,20 +6,22 @@ * under the terms of the MIT License; see LICENSE file for more details. */ -import { SearchResultItem } from "./SearchResultItem"; -import SearchEmptyResults from "./SearchEmptyResults"; -import { SearchResultsContainer } from "./SearchResultsContainer"; -import { SearchResults } from "./SearchResults"; +import { + SearchResultItem, + SearchEmptyResults, + SearchResultsContainer, + SearchBarElement, + SearchBar, + SearchResults, +} from "."; import { parametrize } from "react-overridable"; import { DropdownSort } from "@js/invenio_search_ui/components"; -import { SearchBarElement } from "./SearchBarElement"; import _get from "lodash/get"; import { ContribSearchAppFacets, ContribBucketAggregationElement, ContribBucketAggregationValuesElement, } from "@js/invenio_search_ui/components"; -import { SearchBar } from "./SearchBar"; export const initDefaultSearchComponents = (domContainer) => { const sortColumns = (columns) => diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchEmptyResults.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchEmptyResults.js index 9ae1ca74..6a08ac16 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchEmptyResults.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchEmptyResults.js @@ -11,8 +11,9 @@ import { Button, Header, Icon, Segment } from "semantic-ui-react"; import { withState } from "react-searchkit"; import { i18next } from "@translations/invenio_administration/i18next"; import PropTypes from "prop-types"; +import Overridable from "react-overridable"; -class SearchEmptyResults extends Component { +class SearchEmptyResultsComponent extends Component { render() { const { resetQuery, @@ -27,26 +28,36 @@ class SearchEmptyResults extends Component { currentQueryState.page === 1 && currentResultsState.data.total === 0; return ( - -
- - {isEmptyPage && i18next.t("There is no resources in this category.")} - {isEmptyPageAfterSearch && i18next.t("No matching resources found.")} -
- {queryString && Current search "{queryString}"} -
- {isEmptyPageAfterSearch && ( - - )} - {extraContent} - + + +
+ + {isEmptyPage && i18next.t("There is no resources in this category.")} + {isEmptyPageAfterSearch && i18next.t("No matching resources found.")} +
+ + {queryString && ( + + {" "} + {i18next.t(`Current search "{{queryString}}"`, { + queryString: queryString, + })}{" "} + + )} +
+ {isEmptyPageAfterSearch && ( + + )} + {extraContent} + + ); } } -SearchEmptyResults.propTypes = { +SearchEmptyResultsComponent.propTypes = { resetQuery: PropTypes.func.isRequired, extraContent: PropTypes.node, queryString: PropTypes.string, @@ -54,9 +65,10 @@ SearchEmptyResults.propTypes = { currentResultsState: PropTypes.object.isRequired, }; -SearchEmptyResults.defaultProps = { +SearchEmptyResultsComponent.defaultProps = { extraContent: undefined, queryString: undefined, }; -export default withState(SearchEmptyResults); +const SearchEmptyResults = withState(SearchEmptyResultsComponent); +export default Overridable.component("SearchEmptyResults", SearchEmptyResults); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchFacets.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchFacets.js deleted file mode 100644 index a51031ed..00000000 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchFacets.js +++ /dev/null @@ -1,29 +0,0 @@ -/* - * This file is part of Invenio. - * Copyright (C) 2022 CERN. - * - * Invenio 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 React from "react"; -import PropTypes from "prop-types"; -import { BucketAggregation } from "react-searchkit"; - -export const SearchFacets = ({ aggs }) => { - return ( - <> - {aggs.map((agg) => { - return ( -
- -
- ); - })} - - ); -}; - -SearchFacets.propTypes = { - aggs: PropTypes.array.isRequired, -}; diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultItem.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultItem.js index c6b7bed5..04f07422 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultItem.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultItem.js @@ -10,10 +10,11 @@ import PropTypes from "prop-types"; import React, { Component } from "react"; import { Table } from "semantic-ui-react"; import isEmpty from "lodash/isEmpty"; -import { Actions } from "../actions/Actions"; +import { Actions } from "../actions"; import { withState } from "react-searchkit"; import { AdminUIRoutes } from "../routes"; -import Formatter from "../components/Formatter"; +import { Formatter } from "../components"; +import Overridable from "react-overridable"; class SearchResultItemComponent extends Component { refreshAfterAction = () => { @@ -38,50 +39,57 @@ class SearchResultItemComponent extends Component { const resourceHasActions = displayEdit || displayDelete || !isEmpty(actions); return ( - - {columns.map(([property, { text, order }], index) => { - return ( - - {index === 0 && ( - + + + {columns.map(([property, { text, order }], index) => { + return ( + + {index === 0 && ( + + + + )} + {index !== 0 && ( - - )} - {index !== 0 && ( - - )} + )} + + ); + })} + {resourceHasActions && ( + + - ); - })} - {resourceHasActions && ( - - - - )} - + )} + + ); } } @@ -109,4 +117,5 @@ SearchResultItemComponent.defaultProps = { actions: {}, }; -export const SearchResultItem = withState(SearchResultItemComponent); +const SearchResultItem = withState(SearchResultItemComponent); +export default Overridable.component("SearchResultItem", SearchResultItem); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResults.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResults.js index bd302bf8..6c07d6fd 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResults.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResults.js @@ -11,57 +11,60 @@ import { Grid } from "semantic-ui-react"; import { ResultsList, Pagination, ResultsPerPage, Count } from "react-searchkit"; import { i18next } from "@translations/invenio_administration/i18next"; import PropTypes from "prop-types"; +import Overridable from "react-overridable"; export const SearchResults = ({ paginationOptions, currentResultsState }) => { const { total } = currentResultsState.data; return ( - total && ( - - - - - - - - - - - - - - - ( - <> - {total} {i18next.t("result(s) found")} - - )} - /> - - - - - - ( - <> - {" "} - {cmp} {i18next.t("results per page")} - - )} - /> - - - - ) + + {total && ( + + + + + + + + + + + + + + + ( + <> + {total} {i18next.t("result(s) found")} + + )} + /> + + + + + + ( + <> + {" "} + {cmp} {i18next.t("results per page")} + + )} + /> + + + + )} + ); }; @@ -69,3 +72,5 @@ SearchResults.propTypes = { paginationOptions: PropTypes.object.isRequired, currentResultsState: PropTypes.object.isRequired, }; + +export default Overridable.component("SearchResults", SearchResults); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js index 4fc2b798..9e06d7bd 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js @@ -10,6 +10,8 @@ import PropTypes from "prop-types"; import React from "react"; import { Table } from "semantic-ui-react"; import isEmpty from "lodash/isEmpty"; +import Overridable from "react-overridable"; +import { i18next } from "@translations/invenio_administration/i18next"; export const SearchResultsContainer = ({ results, @@ -21,22 +23,26 @@ export const SearchResultsContainer = ({ const resourceHasActions = displayEdit || displayDelete || !isEmpty(actions); return ( - - - - {columns.map(([property, { text, order }], index) => { - const width = index === 0 ? undefined : index === 1 ? 4 : 3; - return ( - - {text} - - ); - })} - {resourceHasActions && Actions} - - - {results} -
+ + + + + {columns.map(([property, { text, order }], index) => { + const width = index === 0 ? undefined : index === 1 ? 4 : 3; + return ( + + {text} + + ); + })} + {resourceHasActions && ( + {i18next.t("Actions")} + )} + + + {results} +
+ ); }; @@ -52,3 +58,5 @@ SearchResultsContainer.defaultProps = { displayDelete: true, displayEdit: true, }; + +export default Overridable.component("SearchResultsContainer", SearchResultsContainer); diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/index.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/index.js index 914318e0..b40c5330 100644 --- a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/index.js +++ b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/search/index.js @@ -5,10 +5,9 @@ // under the terms of the MIT License; see LICENSE file for more details. export { initDefaultSearchComponents } from "./SearchComponents"; -export { SearchBarElement } from "./SearchBarElement"; +export { default as SearchBar } from "./SearchBar"; +export { default as SearchBarElement } from "./SearchBarElement"; export { default as SearchEmptyResults } from "./SearchEmptyResults"; -export { SearchFacets } from "./SearchFacets"; -export { SearchResultItem } from "./SearchResultItem"; -export { SearchBar } from "./SearchBar"; -export { SearchResults } from "./SearchResults"; -export { SearchResultsContainer } from "./SearchResultsContainer"; +export { default as SearchResultItem } from "./SearchResultItem"; +export { default as SearchResults } from "./SearchResults"; +export { default as SearchResultsContainer } from "./SearchResultsContainer";