deposit-ui: align license with funding modal

* add pagination and mode switch
* prevent modal jumping
* aligned styling with funding modal in invenio-vocabularies
* closes: inveniosoftware/invenio-app-rdm#2284

Co-authored-by: Talha Muqsit <iammuqsit@gmail.com>

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/fields/License/LicenseModal.js

@@ -16,15 +16,17 @@ import {
   EmptyResults,
   Error,
   InvenioSearchApi,
+  Pagination,
   ReactSearchKit,
   ResultsLoader,
   Toggle,
 } from "react-searchkit";
-import { Button, Form, Grid, Menu, Modal } from "semantic-ui-react";
+import { Button, Container, Form, Grid, Menu, Modal } from "semantic-ui-react";
 import * as Yup from "yup";
 import { LicenseFilter } from "./LicenseFilter";
 import { LicenseResults } from "./LicenseResults";
 import { LicenseSearchBar } from "./LicenseSearchBar";
+import { NoLicenseResults } from "./NoLicenseResults";
 
 const overriddenComponents = {
   "SearchFilters.Toggle": LicenseFilter,
@@ -50,6 +52,7 @@ const LicenseSchema = Yup.object().shape({
 export class LicenseModal extends Component {
   state = {
     open: false,
+    mode: ModalTypes.STANDARD,
   };
 
   openModal = () => {
@@ -60,12 +63,17 @@ export class LicenseModal extends Component {
     this.setState({ open: false });
   };
 
+  setMode = (mode) => {
+    this.setState({ mode: mode });
+  };
+
   onSubmit = (values, formikBag) => {
     // We have to close the modal first because onLicenseChange and passing
     // license as an object makes React get rid of this component. Otherwise
     // we get a memory leak warning.
     const { onLicenseChange } = this.props;
     this.closeModal();
+    this.setMode(this.mode);
     onLicenseChange(values.selectedLicense);
     formikBag.resetForm();
   };
@@ -101,12 +109,21 @@ export class LicenseModal extends Component {
       >
         {({ handleSubmit, resetForm }) => (
           <Modal
-            onOpen={() => this.openModal()}
+            role="dialog"
+            centered={false}
+            onOpen={() => {
+              this.openModal();
+              this.setMode(mode);
+            }}
             open={open}
-            trigger={trigger}
+            trigger={React.cloneElement(trigger, {
+              "aria-expanded": open,
+              "aria-haspopup": "dialog",
+            })}
             onClose={() => {
-              this.closeModal();
               resetForm();
+              this.setMode(ModalTypes.STANDARD);
+              this.closeModal();
             }}
             closeIcon
             closeOnDimmerClick={false}
@@ -120,8 +137,8 @@ export class LicenseModal extends Component {
                     mode: mode,
                   })}
             </Modal.Header>
-            <Modal.Content scrolling>
-              {mode === ModalTypes.STANDARD && (
+            <Modal.Content>
+              {this.state.mode === ModalTypes.STANDARD && (
                 <OverridableContext.Provider value={overriddenComponents}>
                   <ReactSearchKit
                     searchApi={searchApi}
@@ -133,7 +150,7 @@ export class LicenseModal extends Component {
                       <Grid.Row>
                         <Grid.Column width={8} floated="left" verticalAlign="middle">
                           <LicenseSearchBar
-                            placeholder={i18next.t("Search")}
+                            placeholder={i18next.t("Search for licenses")}
                             autofocus
                             actionProps={{
                               icon: "search",
@@ -168,7 +185,7 @@ export class LicenseModal extends Component {
                         </Grid.Column>
                       </Grid.Row>
                       <Grid.Row verticalAlign="middle">
-                        <Grid.Column>
+                        <Grid.Column width={16} className="pb-0">
                           <ResultsLoader>
                             <EmptyResults />
                             <Error />
@@ -178,13 +195,28 @@ export class LicenseModal extends Component {
                               })}
                             />
                           </ResultsLoader>
+                          <Container textAlign="center" className="rel-mb-1">
+                            <Pagination />
+                          </Container>
+                        </Grid.Column>
+                        <Grid.Column
+                          width={16}
+                          textAlign="center"
+                          className="pt-0 pb-0"
+                        >
+                          <NoLicenseResults
+                            switchToCustom={() => {
+                              resetForm();
+                              this.setMode(ModalTypes.CUSTOM);
+                            }}
+                          />
                         </Grid.Column>
                       </Grid.Row>
                     </Grid>
                   </ReactSearchKit>
                 </OverridableContext.Provider>
               )}
-              {mode === ModalTypes.CUSTOM && (
+              {this.state.mode === ModalTypes.CUSTOM && (
                 <Form>
                   <TextField
                     label={i18next.t("Title")}
@@ -211,10 +243,10 @@ export class LicenseModal extends Component {
                 name="cancel"
                 onClick={() => {
                   resetForm();
+                  this.setMode(mode);
                   this.closeModal();
                 }}
                 icon="remove"
-                labelPosition="left"
                 content={i18next.t("Cancel")}
                 floated="left"
               />
@@ -223,7 +255,6 @@ export class LicenseModal extends Component {
                 onClick={(event) => handleSubmit(event)}
                 primary
                 icon="checkmark"
-                labelPosition="left"
                 content={
                   action === ModalActions.ADD
                     ? i18next.t("Add license")

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/fields/License/NoLicenseResults.js

@@ -0,0 +1,38 @@
+// This file is part of Invenio-RDM-Records
+// Copyright (C) 2021-2024 CERN.
+// Copyright (C) 2021 Northwestern University.
+// Copyright (C) 2025 ZBW – Leibniz-Informationszentrum Wirtschaft.
+//
+// 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 PropTypes from "prop-types";
+import React from "react";
+import { Segment } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_rdm_records/i18next";
+
+export function NoLicenseResults({ switchToCustom }) {
+  return (
+    <Segment
+      basic
+      content={
+        <p>
+          {i18next.t("Did not find your license? ")}
+          <a
+            href="/"
+            onClick={(e) => {
+              e.preventDefault();
+              switchToCustom();
+            }}
+          >
+            {i18next.t("Add a custom license.")}
+          </a>
+        </p>
+      }
+    />
+  );
+}
+
+NoLicenseResults.propTypes = {
+  switchToCustom: PropTypes.func.isRequired,
+};