Jobs registry

invenio_administration/assets/semantic-ui/js/invenio_administration/src/actions/ResourceActions.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Button, Modal } from "semantic-ui-react";
+import { Button, Modal, Icon } from "semantic-ui-react";
 import { ActionForm } from "../formik";
 import ActionModal from "./ActionModal";
 import _isEmpty from "lodash/isEmpty";
@@ -17,18 +17,29 @@ class ResourceActions extends Component {
   }
 
   onModalTriggerClick = (e, { payloadSchema, dataName, dataActionKey }) => {
-    const { resource } = this.props;
+    const { resource, actions: actionsConfig } = this.props;
     this.setState({
       modalOpen: true,
       modalHeader: dataName,
       modalBody: (
-        <ActionForm
+        <Overridable
+          id={`InvenioAdministration.ResourceActions.ModalBody.${dataActionKey}`}
           actionKey={dataActionKey}
           actionSchema={payloadSchema}
           actionSuccessCallback={this.onModalClose}
           actionCancelCallback={this.closeModal}
           resource={resource}
-        />
+          actionConfig={actionsConfig[dataActionKey]}
+        >
+          <ActionForm
+            actionKey={dataActionKey}
+            actionSchema={payloadSchema}
+            actionSuccessCallback={this.onModalClose}
+            actionCancelCallback={this.closeModal}
+            resource={resource}
+            actionConfig={actionsConfig[dataActionKey]}
+          />
+        </Overridable>
       ),
     });
   };
@@ -57,6 +68,8 @@ class ResourceActions extends Component {
     return (
       <>
         {Object.entries(actions).map(([actionKey, actionConfig]) => {
+          const icon = actionConfig.icon;
+          const labelPos = icon ? "left" : null;
           return (
             <Element
               key={actionKey}
@@ -65,7 +78,10 @@ class ResourceActions extends Component {
               dataName={actionConfig.text}
               dataActionKey={actionKey}
               basic
+              icon={!_isEmpty(icon)}
+              labelPosition={labelPos}
             >
+              {!_isEmpty(icon) && <Icon name={icon} />}
               {actionConfig.text}
             </Element>
           );
@@ -82,17 +98,12 @@ class ResourceActions extends Component {
 ResourceActions.propTypes = {
   resource: PropTypes.object.isRequired,
   successCallback: PropTypes.func.isRequired,
-  actions: PropTypes.shape({
-    text: PropTypes.string.isRequired,
-    payload_schema: PropTypes.object.isRequired,
-    order: PropTypes.number.isRequired,
-  }),
+  actions: PropTypes.object.isRequired,
   Element: PropTypes.node,
 };
 
 ResourceActions.defaultProps = {
   Element: Button,
-  actions: undefined,
 };
 
 export default Overridable.component(

invenio_administration/assets/semantic-ui/js/invenio_administration/src/api/actions.js

@@ -21,10 +21,16 @@ const resourceAction = async (endpoint, payload) => {
   return await http.post(endpoint, payload);
 };
 
+const getSchema = async (endpoint, id) => {
+  const serializedEndpoint = endpoint.replace("<item_id>", id);
+  return await http.get(serializedEndpoint);
+};
+
 export const InvenioAdministrationActionsApi = {
   deleteResource: deleteResource,
   editResource: editResource,
   getResource: getResource,
   resourceAction: resourceAction,
   createResource: createResource,
+  getSchema: getSchema,
 };

invenio_administration/assets/semantic-ui/js/invenio_administration/src/details/AdminDetailsView.js

@@ -8,8 +8,9 @@ import { Actions } from "../actions/Actions";
 import _isEmpty from "lodash/isEmpty";
 import { sortFields } from "../components/utils";
 import { Loader, ErrorPage } from "../components";
+import Overridable from "react-overridable";
 
-export default class AdminDetailsView extends Component {
+class AdminDetailsView extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -73,51 +74,60 @@ export default class AdminDetailsView extends Component {
       displayDelete,
       displayEdit,
       uiSchema,
+      name,
     } = this.props;
     const { loading, data, error } = this.state;
     const sortedColumns = sortFields(uiSchema);
     return (
-      <Loader isLoading={loading}>
-        <ErrorPage
-          error={!_isEmpty(error)}
-          errorCode={error?.response.status}
-          errorMessage={error?.response.data}
-        >
-          <Grid stackable>
-            <Grid.Row columns="2">
-              <Grid.Column verticalAlign="middle">
-                <Header as="h1">{title}</Header>
-              </Grid.Column>
-              <Grid.Column verticalAlign="middle" floated="right" textAlign="right">
-                <Button.Group size="tiny" className="relaxed">
-                  <Actions
-                    title={title}
-                    resourceName={resourceName}
-                    apiEndpoint={apiEndpoint}
-                    editUrl={AdminUIRoutes.editView(listUIEndpoint, data, idKeyPath)}
-                    actions={actions}
-                    displayEdit={displayEdit}
-                    displayDelete={displayDelete}
-                    resource={data}
-                    idKeyPath={idKeyPath}
-                    successCallback={this.handleDelete}
-                    listUIEndpoint={listUIEndpoint}
-                  />
-                </Button.Group>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-          <Divider />
-          <Container fluid>
-            <DetailsTable
-              data={data}
-              schema={resourceSchema}
-              uiSchema={sortedColumns}
-            />
-            {this.childrenWithData(data, columns)}
-          </Container>
-        </ErrorPage>
-      </Loader>
+      <Overridable
+        id={`InvenioAdministration.AdminDetailsView.${name}.layout`}
+        data={data}
+        error={error}
+        loading={loading}
+        {...this.props}
+      >
+        <Loader isLoading={loading}>
+          <ErrorPage
+            error={!_isEmpty(error)}
+            errorCode={error?.response.status}
+            errorMessage={error?.response.data}
+          >
+            <Grid stackable>
+              <Grid.Row columns="2">
+                <Grid.Column verticalAlign="middle">
+                  <Header as="h1">{title}</Header>
+                </Grid.Column>
+                <Grid.Column verticalAlign="middle" floated="right" textAlign="right">
+                  <Button.Group size="tiny" className="relaxed">
+                    <Actions
+                      title={title}
+                      resourceName={resourceName}
+                      apiEndpoint={apiEndpoint}
+                      editUrl={AdminUIRoutes.editView(listUIEndpoint, data, idKeyPath)}
+                      actions={actions}
+                      displayEdit={displayEdit}
+                      displayDelete={displayDelete}
+                      resource={data}
+                      idKeyPath={idKeyPath}
+                      successCallback={this.handleDelete}
+                      listUIEndpoint={listUIEndpoint}
+                    />
+                  </Button.Group>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+            <Divider />
+            <Container fluid>
+              <DetailsTable
+                data={data}
+                schema={resourceSchema}
+                uiSchema={sortedColumns}
+              />
+              {this.childrenWithData(data, columns)}
+            </Container>
+          </ErrorPage>
+        </Loader>
+      </Overridable>
     );
   }
 }
@@ -137,9 +147,15 @@ AdminDetailsView.propTypes = {
   resourceSchema: PropTypes.object.isRequired,
   requestHeaders: PropTypes.object.isRequired,
   uiSchema: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
 };
 
 AdminDetailsView.defaultProps = {
   actions: undefined,
   children: undefined,
 };
+
+export default Overridable.component(
+  "InvenioAdministration.AdminDetailsView",
+  AdminDetailsView
+);

invenio_administration/assets/semantic-ui/js/invenio_administration/src/details/details.js

@@ -8,6 +8,9 @@ import React from "react";
 import ReactDOM from "react-dom";
 import _get from "lodash/get";
 import AdminDetailsView from "./AdminDetailsView";
+import { OverridableContext, overrideStore } from "react-overridable";
+
+const overriddenComponents = overrideStore.getAll();
 
 const domContainer = document.getElementById("invenio-details-config");
 
@@ -24,23 +27,28 @@ const listUIEndpoint = domContainer.dataset.listEndpoint;
 const resourceSchema = JSON.parse(domContainer.dataset?.resourceSchema);
 const requestHeaders = JSON.parse(domContainer.dataset?.requestHeaders);
 const uiSchema = JSON.parse(domContainer.dataset?.uiConfig);
+const name = JSON.parse(domContainer.dataset?.name);
 
 domContainer &&
   ReactDOM.render(
-    <AdminDetailsView
-      title={title}
-      actions={actions}
-      apiEndpoint={apiEndpoint}
-      columns={fields}
-      pid={pidValue}
-      displayEdit={displayEdit}
-      displayDelete={displayDelete}
-      idKeyPath={idKeyPath}
-      resourceName={resourceName}
-      listUIEndpoint={listUIEndpoint}
-      resourceSchema={resourceSchema}
-      requestHeaders={requestHeaders}
-      uiSchema={uiSchema}
-    />,
+    <OverridableContext.Provider value={overriddenComponents}>
+      <AdminDetailsView
+        title={title}
+        actions={actions}
+        apiEndpoint={apiEndpoint}
+        columns={fields}
+        pid={pidValue}
+        displayEdit={displayEdit}
+        displayDelete={displayDelete}
+        idKeyPath={idKeyPath}
+        resourceName={resourceName}
+        listUIEndpoint={listUIEndpoint}
+        resourceSchema={resourceSchema}
+        requestHeaders={requestHeaders}
+        uiSchema={uiSchema}
+        name={name}
+      />
+      ,
+    </OverridableContext.Provider>,
     domContainer
   );