Administration: make main components overridable

* remove unused components * add missing translations * closes: inveniosoftware#102
Pineirin · Oct 6, 2022 · a38adb9 · a38adb9
1 parent 2bf3b9d
commit a38adb9
Show file tree

Hide file tree

Showing 39 changed files with 645 additions and 654 deletions.
diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json b/invenio_administration/assets/semantic-ui/js/invenio_administration/package.json
@@ -19,7 +19,8 @@
     "luxon": "^1.23.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "react-overridable": "^0.3.3"
   },
   "jest": {
     "snapshotSerializers": [

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
@@ -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 (
-        <ActionsDropdown
-          title={title}
-          resourceName={resourceName}
-          apiEndpoint={apiEndpoint}
-          resource={resource}
-          successCallback={successCallback}
-          idKeyPath={idKeyPath}
-          actions={actions}
-          displayEdit={displayEdit}
-          displayDelete={displayDelete}
-        />
-      );
-    } else {
-      return (
-        <Button.Group size="tiny" className="relaxed">
-          {!isEmpty(actions) && (
-            <ResourceActions
-              resource={resource}
-              successCallback={successCallback}
-              idKeyPath={idKeyPath}
-              actions={actions}
-              apiEndpoint={apiEndpoint}
-            />
-          )}
-          {displayEdit && (
-            <Popup
-              content={
-                disabledEditMessage
-                  ? disabledEditMessage
-                  : i18next.t("Resource is not editable.")
-              }
-              disabled={!disableEdit}
-              trigger={
-                <span className="mr-5">
-                  <Button
-                    as="a"
-                    disabled={disableEdit}
-                    href={AdminUIRoutes.editView(listUIEndpoint, resource, idKeyPath)}
-                    icon
-                    labelPosition="left"
-                    title={disabledEditMessage ? disabledEditMessage : ""}
-                  >
-                    <Icon name="pencil" />
-                    {i18next.t("Edit")}
-                  </Button>
-                </span>
-              }
-            />
-          )}
-          {displayDelete && (
-            <Popup
-              content={
-                disabledDeleteMessage
-                  ? disabledDeleteMessage
-                  : i18next.t("Resource is not deletable.")
-              }
-              disabled={!disableDelete}
-              trigger={
-                <span>
-                  <DeleteModalTrigger
-                    title={title}
-                    resourceName={resourceName}
-                    apiEndpoint={apiEndpoint}
-                    resource={resource}
-                    successCallback={successCallback}
-                    idKeyPath={idKeyPath}
-                    disabled={disableDelete}
-                    disabledDeleteMessage={
-                      disabledEditMessage ? disabledEditMessage : ""
-                    }
-                  />
-                </span>
-              }
-            />
-          )}
-        </Button.Group>
-      );
-    }
+    return (
+      <Overridable id="Actions.layout">
+        {displayAsDropdown ? (
+          <ActionsDropdown
+            title={title}
+            resourceName={resourceName}
+            apiEndpoint={apiEndpoint}
+            resource={resource}
+            successCallback={successCallback}
+            idKeyPath={idKeyPath}
+            actions={actions}
+            displayEdit={displayEdit}
+            displayDelete={displayDelete}
+          />
+        ) : (
+          <Button.Group size="tiny" className="relaxed">
+            {!isEmpty(actions) && (
+              <ResourceActions
+                resource={resource}
+                successCallback={successCallback}
+                idKeyPath={idKeyPath}
+                actions={actions}
+                apiEndpoint={apiEndpoint}
+              />
+            )}
+            {displayEdit && (
+              <Popup
+                content={
+                  disabledEditMessage
+                    ? disabledEditMessage
+                    : i18next.t("Resource is not editable.")
+                }
+                disabled={!disableEdit}
+                trigger={
+                  <span className="mr-5">
+                    <Button
+                      as="a"
+                      disabled={disableEdit}
+                      href={AdminUIRoutes.editView(listUIEndpoint, resource, idKeyPath)}
+                      icon
+                      labelPosition="left"
+                      title={disabledEditMessage ? disabledEditMessage : ""}
+                    >
+                      <Icon name="pencil" />
+                      {i18next.t("Edit")}
+                    </Button>
+                  </span>
+                }
+              />
+            )}
+            {displayDelete && (
+              <Popup
+                content={
+                  disabledDeleteMessage
+                    ? disabledDeleteMessage
+                    : i18next.t("Resource is not deletable.")
+                }
+                disabled={!disableDelete}
+                trigger={
+                  <span>
+                    <DeleteModalTrigger
+                      title={title}
+                      resourceName={resourceName}
+                      apiEndpoint={apiEndpoint}
+                      resource={resource}
+                      successCallback={successCallback}
+                      idKeyPath={idKeyPath}
+                      disabled={disableDelete}
+                      disabledDeleteMessage={
+                        disabledEditMessage ? disabledEditMessage : ""
+                      }
+                    />
+                  </span>
+                }
+              />
+            )}
+          </Button.Group>
+        )}
+      </Overridable>
+    );
   }
 }
 
@@ -153,3 +158,5 @@ Actions.defaultProps = {
   apiEndpoint: undefined,
   idKeyPath: "pid",
 };
+
+export default Overridable.component("Actions", Actions);
diff --git a/...dministration/assets/semantic-ui/js/invenio_administration/src/actions/ActionsDropdown.js b/...dministration/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 (
-      <Dropdown>
-        {!isEmpty(actions) && (
-          <ResourceActions
-            resource={resource}
-            successCallback={successCallback}
-            idKeyPath={idKeyPath}
-            actions={actions}
-            apiEndpoint={apiEndpoint}
-            Element={Dropdown.Item}
-            trigger={
-              <Button
-                icon="cog"
-                size="tiny"
-                className="transparent rel-ml-1"
-                aria-label={i18next.t("Open list of actions")}
-              />
-            }
-          />
-        )}
-        {displayEdit && <Dropdown.Item>Edit</Dropdown.Item>}
-        {displayDelete && (
-          <DeleteModalTrigger
-            title={title}
-            resourceName={resourceName}
-            apiEndpoint={apiEndpoint}
-            resource={resource}
-            successCallback={successCallback}
-            idKeyPath={idKeyPath}
-            Element={Dropdown.Item}
-          />
-        )}
-      </Dropdown>
+      <Overridable id="ActionsDropdown.layout">
+        <Dropdown>
+          {!isEmpty(actions) && (
+            <ResourceActions
+              resource={resource}
+              successCallback={successCallback}
+              idKeyPath={idKeyPath}
+              actions={actions}
+              apiEndpoint={apiEndpoint}
+              Element={Dropdown.Item}
+              trigger={
+                <Button
+                  icon="cog"
+                  size="tiny"
+                  className="transparent rel-ml-1"
+                  aria-label={i18next.t("Open list of actions")}
+                />
+              }
+            />
+          )}
+          {displayEdit && <Dropdown.Item>Edit</Dropdown.Item>}
+          {displayDelete && (
+            <DeleteModalTrigger
+              title={title}
+              resourceName={resourceName}
+              apiEndpoint={apiEndpoint}
+              resource={resource}
+              successCallback={successCallback}
+              idKeyPath={idKeyPath}
+              Element={Dropdown.Item}
+            />
+          )}
+        </Dropdown>
+      </Overridable>
     );
   }
 }
@@ -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
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
@@ -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 };