base: enables namespacing

* closes inveniosoftware/invenio-app-rdm#2018
inveniosoftware · Jan 24, 2023 · c5e73fe · c5e73fe
1 parent f1f10fc
commit c5e73fe
Show file tree

Hide file tree

Showing 20 changed files with 247 additions and 87 deletions.
diff --git a/...io_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionModal.js b/...io_administration/assets/semantic-ui/js/invenio_administration/src/actions/ActionModal.js
@@ -8,18 +8,19 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { Modal } from "semantic-ui-react";
 import Overridable from "react-overridable";
+import { buildUID } from "react-searchkit";
 
-class ActionModal extends Component {
+export default class ActionModal extends Component {
   render() {
-    const { children, modalOpen, resource } = this.props;
-
+    const { children, modalOpen, resource, appName } = this.props;
     return (
       <Overridable
-        id="InvenioAdministration.ActionModal.layout"
+        id={buildUID("ActionModal.layout", "", appName)}
         modalOpen={modalOpen}
         // eslint-disable-next-line react/no-children-prop
         children={children}
         resource={resource}
+        appName={appName}
       >
         <Modal role="dialog" open={modalOpen}>
           {children}
@@ -33,11 +34,11 @@ ActionModal.propTypes = {
   children: PropTypes.object,
   modalOpen: PropTypes.bool,
   resource: PropTypes.object.isRequired,
+  appName: PropTypes.string,
 };
 
 ActionModal.defaultProps = {
   modalOpen: false,
   children: null,
+  appName: "",
 };
-
-export default Overridable.component("InvenioAdministration.ActionModal", ActionModal);
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
@@ -21,12 +21,12 @@ export class Actions extends Component {
       editUrl,
       displayEdit,
       displayDelete,
+      appName,
     } = this.props;
 
     // if number of actions is greater than 3, we display all in a dropdown
     const displayAsDropdown =
       displayEdit && displayDelete && Object.keys(actions).length > 1;
-
     if (displayAsDropdown) {
       return (
         <Dropdown>
@@ -37,6 +37,7 @@ export class Actions extends Component {
               idKeyPath={idKeyPath}
               actions={actions}
               Element={Dropdown.Item}
+              appName={appName}
               trigger={
                 <Button
                   icon="cog"
@@ -47,7 +48,9 @@ export class Actions extends Component {
               }
             />
           )}
-          {displayEdit && <Edit editUrl={editUrl} resource={resource} />}
+          {displayEdit && (
+            <Edit editUrl={editUrl} resource={resource} appName={appName} />
+          )}
           {displayDelete && (
             <DeleteModalTrigger
               title={title}
@@ -57,6 +60,7 @@ export class Actions extends Component {
               successCallback={successCallback}
               idKeyPath={idKeyPath}
               Element={Dropdown.Item}
+              appName={appName}
             />
           )}
         </Dropdown>
@@ -67,18 +71,22 @@ export class Actions extends Component {
           {!isEmpty(actions) && (
             <ResourceActions
               resource={resource}
+              appName={appName}
               successCallback={successCallback}
               idKeyPath={idKeyPath}
               actions={actions}
             />
           )}
-          {displayEdit && <Edit editUrl={editUrl} resource={resource} />}
+          {displayEdit && (
+            <Edit editUrl={editUrl} resource={resource} appName={appName} />
+          )}
           {displayDelete && (
             <Delete
               successCallback={successCallback}
               resource={resource}
               resourceName={resourceName}
               title={title}
+              appName={appName}
             />
           )}
         </Button.Group>
@@ -97,10 +105,12 @@ Actions.propTypes = {
   idKeyPath: PropTypes.string,
   actions: PropTypes.object.isRequired,
   editUrl: PropTypes.string.isRequired,
+  appName: PropTypes.string,
 };
 
 Actions.defaultProps = {
   displayEdit: true,
   displayDelete: true,
   idKeyPath: "pid",
+  appName: "",
 };
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
@@ -5,8 +5,9 @@ import { Popup } from "semantic-ui-react";
 import { i18next } from "@translations/invenio_administration/i18next";
 import _get from "lodash/get";
 import Overridable from "react-overridable";
+import { buildUID } from "react-searchkit";
 
-class DeleteCmp extends Component {
+export default class DeleteCmp extends Component {
   render() {
     const {
       disabledMessage,
@@ -16,26 +17,40 @@ class DeleteCmp extends Component {
       successCallback,
       idKeyPath,
       resource,
+      appName,
     } = this.props;
     return (
-      <Popup
-        content={disabledMessage}
-        disabled={!disable}
-        trigger={
-          <span>
-            <DeleteModalTrigger
-              title={title}
-              resourceName={resourceName}
-              resource={resource}
-              successCallback={successCallback}
-              idKeyPath={idKeyPath}
-              disabled={disable(resource)}
-              apiEndpoint={_get(resource, "links.self")}
-              disabledDeleteMessage={disabledMessage}
-            />
-          </span>
-        }
-      />
+      <Overridable
+        id={buildUID("DeleteAction", "", appName)}
+        disabledMessage={disabledMessage}
+        disable={disable}
+        title={title}
+        resourceName={resourceName}
+        successCallback={successCallback}
+        idKeyPath={idKeyPath}
+        resource={resource}
+        appName={appName}
+      >
+        <Popup
+          content={disabledMessage}
+          disabled={!disable}
+          trigger={
+            <span>
+              <DeleteModalTrigger
+                title={title}
+                resourceName={resourceName}
+                resource={resource}
+                successCallback={successCallback}
+                idKeyPath={idKeyPath}
+                disabled={disable(resource)}
+                apiEndpoint={_get(resource, "links.self")}
+                disabledDeleteMessage={disabledMessage}
+                appName={appName}
+              />
+            </span>
+          }
+        />
+      </Overridable>
     );
   }
 }
@@ -48,12 +63,12 @@ DeleteCmp.propTypes = {
   idKeyPath: PropTypes.string,
   disable: PropTypes.func,
   resource: PropTypes.object.isRequired,
+  appName: PropTypes.string,
 };
 
 DeleteCmp.defaultProps = {
   disabledMessage: i18next.t("Resource is not deletable."),
   idKeyPath: "pid",
+  appName: "",
   disable: () => false,
 };
-
-export default Overridable.component("InvenioAdministration.DeleteAction", DeleteCmp);
diff --git a/...io_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js b/...io_administration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModal.js
@@ -15,8 +15,9 @@ import { ErrorMessage } from "../ui_messages/messages";
 import { NotificationContext } from "../ui_messages/context";
 import Overridable from "react-overridable";
 import { InvenioAdministrationActionsApi } from "../api/actions";
+import { buildUID } from "react-searchkit";
 
-class DeleteModal extends Component {
+export default class DeleteModal extends Component {
   constructor(props) {
     super(props);
     this.state = { loading: false, error: undefined };
@@ -58,11 +59,16 @@ class DeleteModal extends Component {
 
   render() {
     const { loading, error } = this.state;
-    const { modalOpen, toggleModal, children, title } = this.props;
+    const { modalOpen, toggleModal, children, title, appName } = this.props;
     return (
       <Overridable
-        id="DeleteModal.layout"
-        {...this.props}
+        id={buildUID("DeleteModal.layout", "", appName)}
+        modalOpen={modalOpen}
+        toggleModal={toggleModal}
+        // eslint-disable-next-line react/no-children-prop
+        children={children}
+        title={title}
+        appName={appName}
         handleOnButtonClick={this.handleOnButtonClick}
         cleanError={this.cleanError}
         resetErrorState={this.resetErrorState}
@@ -110,10 +116,10 @@ DeleteModal.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   modalOpen: PropTypes.bool.isRequired,
   children: PropTypes.node,
+  appName: PropTypes.string,
 };
 
 DeleteModal.defaultProps = {
   children: null,
+  appName: "",
 };
-
-export default Overridable.component("DeleteModal", DeleteModal);
diff --git a/...nistration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js b/...nistration/assets/semantic-ui/js/invenio_administration/src/actions/DeleteModalTrigger.js
@@ -13,6 +13,7 @@ import { Modal } from "semantic-ui-react";
 import { Trans } from "react-i18next";
 import _get from "lodash/get";
 import Overridable from "react-overridable";
+import { buildUID } from "react-searchkit";
 
 export class DeleteModalTrigger extends Component {
   constructor(props) {
@@ -35,11 +36,24 @@ export class DeleteModalTrigger extends Component {
       Element,
       disabled,
       disabledDeleteMessage,
+      appName,
     } = this.props;
     const { modalOpen } = this.state;
     const triggerId = `delete-modal-trigger-${resource.id}`;
     return (
-      <Overridable id="InvenioAdministration.DeleteModalTrigger">
+      <Overridable
+        id={buildUID("DeleteModalTrigger.layout", "", appName)}
+        title={title}
+        resourceName={resourceName}
+        apiEndpoint={apiEndpoint}
+        resource={resource}
+        successCallback={successCallback}
+        idKeyPath={idKeyPath}
+        Element={Element}
+        disabled={disabled}
+        disabledDeleteMessage={disabledDeleteMessage}
+        appName={appName}
+      >
         <>
           <Element
             id={triggerId}
@@ -65,6 +79,7 @@ export class DeleteModalTrigger extends Component {
             idKeyPath={idKeyPath}
             toggleModal={this.toggleModal}
             modalOpen={modalOpen}
+            appName={appName}
           >
             <Modal.Content>
               <Modal.Description>
@@ -91,10 +106,12 @@ DeleteModalTrigger.propTypes = {
   idKeyPath: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   disabledDeleteMessage: PropTypes.string,
+  appName: PropTypes.string,
 };
 
 DeleteModalTrigger.defaultProps = {
   Element: Button,
   disabled: false,
   disabledDeleteMessage: "",
+  appName: "",
 };
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
@@ -3,28 +3,46 @@ import React, { Component } from "react";
 import { i18next } from "@translations/invenio_administration/i18next";
 import { Button, Popup, Icon } from "semantic-ui-react";
 import Overridable from "react-overridable";
+import { buildUID } from "react-searchkit";
 
-class EditCmp extends Component {
+export default class EditCmp extends Component {
   render() {
-    const { display, editUrl, disable, disabledMessage, resource } = this.props;
+    const { display, editUrl, disable, disabledMessage, resource, appName } =
+      this.props;
     if (!display) {
       return null;
     }
     const disabled = disable(resource);
 
     return (
-      <Popup
-        content={disabledMessage}
-        disabled={!disabled}
-        trigger={
-          <span className="mr-5">
-            <Button as="a" disabled={disabled} href={editUrl} icon labelPosition="left">
-              <Icon name="pencil" />
-              {i18next.t("Edit")}
-            </Button>
-          </span>
-        }
-      />
+      <Overridable
+        id={buildUID("EditAction.layout", "", appName)}
+        display={display}
+        editUrl={editUrl}
+        disable={disable}
+        disabledMessage={disabledMessage}
+        resource={resource}
+        appName={appName}
+      >
+        <Popup
+          content={disabledMessage}
+          disabled={!disabled}
+          trigger={
+            <span className="mr-5">
+              <Button
+                as="a"
+                disabled={disabled}
+                href={editUrl}
+                icon
+                labelPosition="left"
+              >
+                <Icon name="pencil" />
+                {i18next.t("Edit")}
+              </Button>
+            </span>
+          }
+        />
+      </Overridable>
     );
   }
 }
@@ -35,13 +53,13 @@ EditCmp.propTypes = {
   disable: PropTypes.func,
   disabledMessage: PropTypes.string,
   resource: PropTypes.object,
+  appName: PropTypes.string,
 };
 
 EditCmp.defaultProps = {
   display: true,
   disable: () => false,
   disabledMessage: i18next.t("Resource is not editable."),
   resource: undefined,
+  appName: "",
 };
-
-export default Overridable.component("InvenioAdministration.EditAction", EditCmp);