feat(vcs): support for new VCS integration (frontend)

This commit only contains the frontend changes.

- Added overrides for the VCS templates to make functionality specific
to RDM. This involves moving some functions (e.g. showing the DOI) to
RDM from the old Invenio GitHub, since they are more RDM specific.

- Added a small React app to show the community selection modal when
activating a repo, only on instances where communities are required to
publish as per the config.

- Madde small changes to the CommunitySelectionModal files to support
using the modal without a record.

Author: palkerecsenyi

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/components/CommunitySelectionModal/CommunityListItem.js

@@ -27,7 +27,7 @@ export const CommunityListItem = ({ result, record, isInitialSubmission }) => {
   const itemSelected = getChosenCommunity()?.id === result.id;
   const userMembership = userCommunitiesMemberships[result["id"]];
   const invalidPermissionLevel =
-    record.access.record === "public" && result.access.visibility === "restricted";
+    record?.access.record === "public" && result.access.visibility === "restricted";
   const canSubmitRecord = result.ui.permissions.can_submit_record;
   const hasTheme = get(result, "theme.enabled");
   const dedicatedUpload = isInitialSubmission && hasTheme;
@@ -126,10 +126,11 @@ export const CommunityListItem = ({ result, record, isInitialSubmission }) => {
 
 CommunityListItem.propTypes = {
   result: PropTypes.object.isRequired,
-  record: PropTypes.object.isRequired,
+  record: PropTypes.object,
   isInitialSubmission: PropTypes.bool,
 };
 
 CommunityListItem.defaultProps = {
   isInitialSubmission: true,
+  record: null,
 };

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/components/CommunitySelectionModal/CommunitySelectionModal.js

@@ -25,7 +25,7 @@ export class CommunitySelectionModalComponent extends Component {
     this.contextValue = {
       setLocalCommunity: this.setCommunity,
       getChosenCommunity: this.getChosenCommunity,
-      userCommunitiesMemberships,
+      userCommunitiesMemberships: userCommunitiesMemberships ?? {},
       displaySelected,
     };
   }
@@ -117,15 +117,15 @@ CommunitySelectionModalComponent.propTypes = {
   chosenCommunity: PropTypes.object,
   onCommunityChange: PropTypes.func.isRequired,
   trigger: PropTypes.object,
-  userCommunitiesMemberships: PropTypes.object.isRequired,
+  userCommunitiesMemberships: PropTypes.object,
   extraContentComponents: PropTypes.node,
   modalHeader: PropTypes.string,
   onModalChange: PropTypes.func,
   displaySelected: PropTypes.bool,
   modalOpen: PropTypes.bool,
   apiConfigs: PropTypes.object,
   handleClose: PropTypes.func.isRequired,
-  record: PropTypes.object.isRequired,
+  record: PropTypes.object,
   isInitialSubmission: PropTypes.bool,
 };
 
@@ -139,6 +139,7 @@ CommunitySelectionModalComponent.defaultProps = {
   trigger: undefined,
   apiConfigs: undefined,
   isInitialSubmission: true,
+  record: null,
 };
 
 const mapStateToProps = (state) => ({

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/src/deposit/components/CommunitySelectionModal/CommunitySelectionSearch.js

@@ -57,8 +57,8 @@ export class CommunitySelectionSearch extends Component {
     const searchApi = new InvenioSearchApi(selectedSearchApi);
     const overriddenComponents = {
       [`${selectedAppId}.ResultsList.item`]: parametrize(CommunityListItem, {
-        record: record,
-        isInitialSubmission: isInitialSubmission,
+        record,
+        isInitialSubmission,
       }),
     };
 
@@ -178,7 +178,7 @@ CommunitySelectionSearch.propTypes = {
       searchApi: PropTypes.object.isRequired,
     }),
   }),
-  record: PropTypes.object.isRequired,
+  record: PropTypes.object,
   isInitialSubmission: PropTypes.bool,
   CommunityListItem: PropTypes.elementType,
   pagination: PropTypes.bool,
@@ -192,6 +192,7 @@ CommunitySelectionSearch.defaultProps = {
   myCommunitiesEnabled: true,
   autofocus: true,
   CommunityListItem: CommunityListItem,
+  record: null,
   apiConfigs: {
     allCommunities: {
       initialQueryState: { size: 5, page: 1, sortBy: "bestmatch" },

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/vcs/VCSCommunitiesApp.js

@@ -0,0 +1,93 @@
+// This file is part of InvenioRdmRecords
+// Copyright (C) 2026 CERN.
+//
+// Invenio RDM 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, { useCallback, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { sendEnableDisableRequest } from "./api";
+import { CommunitySelectionModalComponent } from "../src/deposit/components/CommunitySelectionModal/CommunitySelectionModal.js";
+import { i18next } from "@translations/invenio_rdm_records/i18next";
+
+const getRepositoryItemContainer = (repoSwitchElement) => {
+  let currentEl = repoSwitchElement.parentElement;
+  while (!currentEl.classList.contains("repository-item") || currentEl === null) {
+    currentEl = currentEl.parentElement;
+  }
+  return currentEl;
+};
+
+export const VCSCommunitiesApp = ({ communityRequiredToPublish }) => {
+  const [selectedRepoSwitch, setSelectedRepoSwitch] = useState(null);
+
+  useEffect(() => {
+    const repoSwitchElements = document.getElementsByClassName(
+      "repo-switch-with-communities"
+    );
+
+    const toggleListener = (event) => {
+      if (communityRequiredToPublish && event.target.checked) {
+        // If the instance requires communities, we need to ask the user's community of choice
+        // before sending the request to enable the repo.
+        setSelectedRepoSwitch(event.target);
+        return;
+      }
+
+      sendEnableDisableRequest(
+        event.target.checked,
+        getRepositoryItemContainer(event.target)
+      );
+    };
+
+    for (const repoSwitchElement of repoSwitchElements) {
+      repoSwitchElement.addEventListener("change", toggleListener);
+    }
+
+    return () => {
+      for (const repoSwitchElement of repoSwitchElements) {
+        repoSwitchElement.removeEventListener("change", toggleListener);
+      }
+    };
+  }, [communityRequiredToPublish]);
+
+  const onCommunitySelect = useCallback(
+    (community) => {
+      if (selectedRepoSwitch === null) return;
+      sendEnableDisableRequest(
+        true,
+        getRepositoryItemContainer(selectedRepoSwitch),
+        community.id
+      );
+      setSelectedRepoSwitch(null);
+    },
+    [selectedRepoSwitch]
+  );
+
+  const onModalClose = useCallback(() => {
+    if (selectedRepoSwitch === null) return;
+    // Uncheck the box so the user can clearly see the repo wasn't enabled
+    selectedRepoSwitch.checked = false;
+    setSelectedRepoSwitch(null);
+  }, [selectedRepoSwitch]);
+
+  if (!selectedRepoSwitch) return null;
+
+  return (
+    <CommunitySelectionModalComponent
+      modalOpen
+      onCommunityChange={onCommunitySelect}
+      modalHeader={i18next.t("Select a community for this repository's records")}
+      onModalChange={onModalClose}
+      handleClose={onModalClose}
+      isInitialSubmission
+    />
+  );
+};
+
+VCSCommunitiesApp.propTypes = {
+  communityRequiredToPublish: PropTypes.bool,
+};
+
+VCSCommunitiesApp.defaultProps = {
+  communityRequiredToPublish: false,
+};

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/vcs/api.js

@@ -0,0 +1,127 @@
+// This file is part of InvenioRdmRecords
+// Copyright (C) 2026 CERN.
+//
+// InvenioRDM 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 $ from "jquery";
+
+function addResultMessage(element, color, icon, message) {
+  element.classList.remove("hidden");
+  element.classList.add(color);
+  element.querySelector(`.icon`).className = `${icon} small icon`;
+  element.querySelector(".content").textContent = message;
+}
+
+// function from https://www.w3schools.com/js/js_cookies.asp
+// We're keeping this old method of accessing cookies for now since the modern async
+// CookieStore is not Baseline Widely Available (as of 2026-02, see https://developer.mozilla.org/en-US/docs/Web/API/CookieStore)
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === " ") {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) === 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+const REQUEST_HEADERS = {
+  "Content-Type": "application/json",
+  "X-CSRFToken": getCookie("csrftoken"),
+};
+
+export function sendEnableDisableRequest(checked, repo, communityId) {
+  const input = repo.querySelector("input[data-repo-id]");
+  const repoId = input.dataset["repoId"];
+  const provider = input.dataset["provider"];
+  const switchMessage = repo.querySelector(".repo-switch-message");
+
+  let url;
+  if (checked === true) {
+    url = `/api/user/vcs/${provider}/repositories/${repoId}/enable`;
+    if (communityId) {
+      url += `?community_id=${communityId}`;
+    }
+  } else if (checked === false) {
+    url = `/api/user/vcs/${provider}/repositories/${repoId}/disable`;
+  }
+
+  const request = new Request(url, {
+    method: "POST",
+    headers: REQUEST_HEADERS,
+  });
+
+  sendRequest(request);
+
+  async function sendRequest(request) {
+    try {
+      const response = await fetch(request);
+      if (response.ok) {
+        addResultMessage(
+          switchMessage,
+          "positive",
+          "checkmark",
+          "Repository synced successfully. Please reload the page."
+        );
+        setTimeout(function () {
+          switchMessage.classList.add("hidden");
+        }, 10000);
+      } else {
+        addResultMessage(
+          switchMessage,
+          "negative",
+          "cancel",
+          `Request failed with status code: ${response.status}`
+        );
+        setTimeout(function () {
+          switchMessage.classList.add("hidden");
+        }, 5000);
+      }
+    } catch (error) {
+      addResultMessage(
+        switchMessage,
+        "negative",
+        "cancel",
+        `There has been a problem: ${error}`
+      );
+      setTimeout(function () {
+        switchMessage.classList.add("hidden");
+      }, 7000);
+    }
+  }
+}
+
+// DOI badge modal
+$(".doi-badge-modal").modal({
+  selector: {
+    close: ".close.button",
+  },
+  onShow: function () {
+    const modalId = $(this).attr("id");
+    const $modalTrigger = $(`#${modalId}-trigger`);
+    $modalTrigger.attr("aria-expanded", true);
+  },
+  onHide: function () {
+    const modalId = $(this).attr("id");
+    const $modalTrigger = $(`#${modalId}-trigger`);
+    $modalTrigger.attr("aria-expanded", false);
+  },
+});
+
+$(".doi-modal-trigger").on("click", function (event) {
+  const modalId = $(event.target).attr("aria-controls");
+  $(`#${modalId}.doi-badge-modal`).modal("show");
+});
+
+$(".doi-modal-trigger").on("keydown", function (event) {
+  if (event.key === "Enter") {
+    const modalId = $(event.target).attr("aria-controls");
+    $(`#${modalId}.doi-badge-modal`).modal("show");
+  }
+});

invenio_rdm_records/assets/semantic-ui/js/invenio_rdm_records/vcs/index.js

@@ -0,0 +1,25 @@
+// This file is part of InvenioRdmRecords
+// Copyright (C) 2026 CERN.
+//
+// Invenio RDM 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 ReactDOM from "react-dom";
+import "./api";
+import { VCSCommunitiesApp } from "./VCSCommunitiesApp";
+import { OverridableContext, overrideStore } from "react-overridable";
+
+const domContainer = document.getElementById("invenio-vcs-communities-app");
+const communityRequiredToPublish =
+  domContainer.dataset["communityRequiredToPublish"] === "True";
+const overriddenComponents = overrideStore.getAll();
+
+if (domContainer) {
+  ReactDOM.render(
+    <OverridableContext.Provider value={overriddenComponents}>
+      <VCSCommunitiesApp communityRequiredToPublish={communityRequiredToPublish} />
+    </OverridableContext.Provider>,
+    domContainer
+  );
+}

invenio_rdm_records/templates/semantic-ui/invenio_vcs/doi-badge.html

@@ -0,0 +1,56 @@
+{# -*- coding: utf-8 -*-
+
+  This file is part of Invenio.
+  Copyright (C) 2026 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.
+#}
+
+{% from "semantic-ui/invenio_formatter/macros/badges.html" import badges_formats_list %}
+
+{%- macro doi_badge(doi, doi_url, provider_id, provider) %}
+  {%- block doi_badge scoped %}
+    {% set image_url = url_for('invenio_vcs_badge.index', provider=provider, repo_provider_id=provider_id, _external=True) %}
+    <img
+      role="button"
+      tabindex="0"
+      id="modal-{{ provider_id }}-trigger"
+      aria-controls="modal-{{ provider_id }}"
+      aria-expanded="false"
+      class="doi-modal-trigger block m-0"
+      src="{{ image_url }}"
+      alt="DOI: {{ doi }}"
+    />
+
+    <div
+      id="modal-{{ provider_id }}"
+      role="dialog"
+      aria-modal="true"
+      class="ui modal segments fade doi-badge-modal"
+    >
+      <div class="ui segment header">
+        <h2>{{ _("DOI Badge") }}</h2>
+      </div>
+
+      <div class="ui segment content">
+        <small>
+          {{ _("This badge points to the latest released version of your repository. If you want a DOI badge for a specific release, please follow the DOI link for one of the specific releases and view the badge from its record.") }}
+        </small>
+      </div>
+
+      <div class="ui segment content">
+        <h3 class="ui small header">{{ _("DOI") }}</h3>
+        <pre>{{ doi }}</pre>
+
+        {{ badges_formats_list(image_url, doi_url) }}
+      </div>
+
+      <div class="ui segment actions">
+        <button class="ui close button">
+          {{ _("Close") }}
+        </button>
+      </div>
+    </div>
+  {%- endblock %}
+{%- endmacro %}