Deploy the Renku UI without legacy routes

client/docker-entrypoint.sh

@@ -45,6 +45,7 @@ echo " CORE_API_VERSION_CONFIG=${CORE_API_VERSION_CONFIG}"
 echo " USER_PREFERENCES_MAX_PINNED_PROJECTS=${USER_PREFERENCES_MAX_PINNED_PROJECTS}"
 echo " SESSION_CLASS_EMAIL_US=${SESSION_CLASS_EMAIL_US}"
 echo " IMAGE_BUILDERS_ENABLED=${IMAGE_BUILDERS_ENABLED}"
+echo " LEGACY_SUPPORT=${LEGACY_SUPPORT}"
 echo "==================================================="
 
 echo "Privacy file contains the following markdown (first 5 lines):"
@@ -84,6 +85,7 @@ tee > "${NGINX_PATH}/config.json" << EOF
   "CORE_API_VERSION_CONFIG": ${CORE_API_VERSION_CONFIG},
   "USER_PREFERENCES_MAX_PINNED_PROJECTS": ${USER_PREFERENCES_MAX_PINNED_PROJECTS},
   "SESSION_CLASS_EMAIL_US": ${SESSION_CLASS_EMAIL_US},
+  "LEGACY_SUPPORT": ${LEGACY_SUPPORT},
   "IMAGE_BUILDERS_ENABLED": "${IMAGE_BUILDERS_ENABLED}"
 }
 EOF

client/src/App.jsx

@@ -24,31 +24,33 @@
  */
 
 import { skipToken } from "@reduxjs/toolkit/query";
-import { Fragment, useContext, useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
-import { Navigate, Route, Routes, useLocation } from "react-router";
+import { Route, Routes, useLocation } from "react-router";
 import { ToastContainer } from "react-toastify";
 
 import { LoginHelper } from "./authentication";
 import { Loader } from "./components/Loader";
-import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProject";
-import { DatasetCoordinator } from "./dataset/Dataset.state";
-import LazyShowDataset from "./dataset/LazyShowDataset";
+
 import LazyAdminPage from "./features/admin/LazyAdminPage";
 import { Favicon } from "./features/favicon/Favicon";
 import { Unavailable } from "./features/maintenance/Maintenance";
-import LazyRootV1 from "./features/rootV1/LazyRootV1";
 import LazyRootV2 from "./features/rootV2/LazyRootV2";
 import { useGetUserQuery } from "./features/usersV2/api/users.api";
 import LazyAnonymousHome from "./features/landing/LazyAnonymousHome";
 import {
   FooterNavbar,
   RenkuNavBar,
 } from "./features/landing/components/NavBar/NavBar";
+import {
+  LegacyDatasetAddToProject,
+  LegacyDatasets,
+  LegacyProjectView,
+  LegacyRoot,
+  LegacyShowDataset,
+} from "./features/legacy";
 import NotificationsManager from "./notifications/NotificationsManager";
 import Cookie from "./privacy/Cookie";
-import LazyProjectView from "./project/LazyProjectView";
-import { ABSOLUTE_ROUTES } from "./routing/routes.constants";
 import AppContext from "./utils/context/appContext";
 import useLegacySelector from "./utils/customHooks/useLegacySelector.hook";
 import { setupWebSocket } from "./websocket";
@@ -64,8 +66,6 @@ export const ContainerWrap = ({ children, fullSize = false }) => {
 };
 
 function CentralContentContainer({ user }) {
-  const { model, client } = useContext(AppContext);
-
   const { data: userInfo } = useGetUserQuery(
     user.logged ? undefined : skipToken
   );
@@ -90,38 +90,17 @@ function CentralContentContainer({ user }) {
             )
           }
         />
-        <Route path="/projects/*" element={<LazyProjectView />} />
+        <Route path="/projects/*" element={<LegacyProjectView />} />
         <Route
           path="/datasets/:identifier/add"
-          element={
-            <LazyDatasetAddToProject insideProject={false} model={model} />
-          }
+          element={<LegacyDatasetAddToProject />}
         />
         <Route
           path="/datasets/:identifier"
-          element={
-            <LazyShowDataset
-              insideProject={false}
-              client={client}
-              projectsUrl="/projects"
-              datasetCoordinator={
-                new DatasetCoordinator(client, model.subModel("dataset"))
-              }
-              logged={user.logged}
-              model={model}
-            />
-          }
-        />
-        <Route
-          path="/datasets"
-          element={
-            <Navigate
-              to={`${ABSOLUTE_ROUTES.v1.search}?type=dataset`}
-              replace
-            />
-          }
+          element={<LegacyShowDataset userInfo={userInfo} />}
         />
-        <Route path="/v1/*" element={<LazyRootV1 />} />
+        <Route path="/datasets" element={<LegacyDatasets />} />
+        <Route path="/v1/*" element={<LegacyRoot />} />
         {userInfo?.isLoggedIn && userInfo.is_admin && (
           <Route
             path="/admin"

client/src/error-boundary/ErrorBoundary.tsx

@@ -18,12 +18,13 @@
 
 import * as Sentry from "@sentry/react";
 import cx from "classnames";
-import { ReactNode, useCallback } from "react";
-import { ArrowLeft } from "react-bootstrap-icons";
+import { ReactNode, useCallback, useContext } from "react";
 import { useLocation } from "react-router";
+import { ArrowLeft } from "react-bootstrap-icons";
 
 import rkOopsImg from "../styles/assets/oops.svg";
 import rkOopsV2Img from "../styles/assets/oopsV2.svg";
+import AppContext from "../utils/context/appContext";
 import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import { isRenkuLegacy } from "../utils/helpers/HelperFunctionsV2";
 import { StyleHandler } from "../wrappedIndex";
@@ -56,11 +57,13 @@ export function AppErrorBoundary({ children }: AppErrorBoundaryProps) {
 
 function ErrorPage() {
   const location = useLocation();
-  const isLegacy = isRenkuLegacy(location.pathname);
+  const { params } = useContext(AppContext);
+  const forceV2Style = params && !params.LEGACY_SUPPORT.enabled;
+  const isLegacy = isRenkuLegacy(location.pathname, forceV2Style);
   const logged = useLegacySelector((state) => state.stateModel.user.logged);
   return (
     <>
-      <StyleHandler />
+      <StyleHandler forceV2Style={forceV2Style} />
       <div
         className={cx("d-flex", "flex-column", "align-items-center", "mt-5")}
       >

client/src/features/landing/components/NavBar/NavBar.jsx

@@ -97,8 +97,10 @@ function FooterNavbarAnonymousLinks() {
 }
 
 function FooterNavbarLoggedInLinks({ privacyLink }) {
+  const { params } = useContext(AppContext);
   const location = useLocation();
-  const helpLocation = isRenkuLegacy(location.pathname)
+  const forceV2 = params && !params.LEGACY_SUPPORT.enabled;
+  const helpLocation = isRenkuLegacy(location.pathname, forceV2)
     ? ABSOLUTE_ROUTES.v1.help.root
     : ABSOLUTE_ROUTES.v2.help.root;
   return (
@@ -158,8 +160,10 @@ function FooterNavbarInner() {
       : isDevVersion
       ? `${taggedVersion} (dev)`
       : taggedVersion;
-
-  const isRenkuV1 = isRenkuLegacy(location.pathname);
+  const isRenkuV1 = isRenkuLegacy(
+    location.pathname,
+    params && !params.LEGACY_SUPPORT.enabled
+  );
   const releaseLocation = isRenkuV1
     ? ABSOLUTE_ROUTES.v1.help.release
     : ABSOLUTE_ROUTES.v2.help.release;

client/src/features/legacy/LazyLegacyProjectView.tsx

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Suspense, lazy } from "react";
+import PageLoader from "../../components/PageLoader";
+
+const ProjectView = lazy(() => import("./LegacyProjectView"));
+
+export default function LazyProjectView() {
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <ProjectView />
+    </Suspense>
+  );
+}

client/src/features/legacy/LegacyProjectView.tsx

@@ -0,0 +1,42 @@
+/*!
+ * Copyright 2025 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// import {
+//   useGetRenkuV1ProjectsByV1IdMigrationsQuery,
+//   type Project as ProjectV2,
+// } from "../projectsV2/api/projectV2.api";
+
+export default function LegacyProjectView() {
+  // TODO: figure out how to look up the project by namespace/slug
+  //   const projectId = useLegacySelector<number | null>(
+  //     (state) => state.stateModel.project.metadata.id ?? null
+  //   );
+  //   const { data: projectV2, isFetching: isFetchingMigrations } =
+  //     useGetRenkuV1ProjectsByV1IdMigrationsQuery(
+  //       projectId ? { v1Id: projectId } : skipToken
+  //     );
+  return (
+    <div className="legacy-project-view">
+      <h1>Legacy Project View</h1>
+      <p>
+        This view is for legacy projects that are not yet migrated to the new
+        system.
+      </p>
+    </div>
+  );
+}

client/src/features/legacy/index.tsx

@@ -0,0 +1,138 @@
+import cx from "classnames";
+import { useContext } from "react";
+import { Link, Navigate } from "react-router";
+import { ArrowLeft } from "react-bootstrap-icons";
+
+import ContainerWrap from "../../components/container/ContainerWrap";
+import LazyDatasetAddToProject from "../../dataset/addtoproject/LazyDatasetAddToProject";
+import { DatasetCoordinator } from "../../dataset/Dataset.state";
+import LazyShowDataset from "../../dataset/LazyShowDataset";
+import LazyProjectView from "../../project/LazyProjectView";
+import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
+import rkNotFoundImg from "../../styles/assets/not-foundV2.svg";
+import AppContext from "../../utils/context/appContext";
+
+import LazyRootV1 from "../rootV1/LazyRootV1";
+import NavbarV2 from "../rootV2/NavbarV2";
+import type { UserInfo } from "../usersV2/api/users.types";
+
+function NoLegacySupport() {
+  const title = "Legacy not supported";
+  const description = "Renku Legacy is not supported in this deployment.";
+  const descriptionType = typeof description;
+  const Tag =
+    descriptionType === "string" ||
+    descriptionType === "number" ||
+    descriptionType === "boolean"
+      ? "p"
+      : "div";
+
+  const homeLink = "/";
+  return (
+    <ContainerWrap>
+      <div className={cx("d-flex")}>
+        <div className={cx("m-auto", "d-flex", "flex-column")}>
+          <h3
+            data-cy="not-found-title"
+            className={cx(
+              "fw-bold",
+              "mt-0",
+              "mb-3",
+              "d-flex",
+              "align-items-center",
+              "gap-3",
+              "text-primary"
+            )}
+          >
+            <img src={rkNotFoundImg} />
+            {title}
+          </h3>
+          <Tag data-cy="not-found-description">{description}</Tag>
+          <div>
+            <Link to={homeLink} className={cx("btn", "btn-primary")}>
+              <ArrowLeft className={cx("bi", "me-1")} />
+              Return to home
+            </Link>
+          </div>
+        </div>
+      </div>
+    </ContainerWrap>
+  );
+}
+
+export function LegacyDatasetAddToProject() {
+  const { model: contextModel, params } = useContext(AppContext);
+  if (params && !params.LEGACY_SUPPORT.enabled) {
+    return <NoLegacySupport />;
+  }
+
+  const model = contextModel as { subModel: (arg0: string) => unknown };
+  return (
+    <LazyDatasetAddToProject
+      datasets={null}
+      insideProject={false}
+      model={model}
+    />
+  );
+}
+
+export function LegacyDatasets() {
+  const { params } = useContext(AppContext);
+  if (params && !params.LEGACY_SUPPORT.enabled) {
+    return (
+      <Navigate
+        // eslint-disable-next-line spellcheck/spell-checker
+        to={`${ABSOLUTE_ROUTES.v2.search}?q=type%3Adataconnector`}
+        replace
+      />
+    );
+  }
+  return <Navigate to={`${ABSOLUTE_ROUTES.v1.search}?type=dataset`} replace />;
+}
+
+export function LegacyProjectView() {
+  const { params } = useContext(AppContext);
+  if (params && !params.LEGACY_SUPPORT.enabled) {
+    return <NoLegacySupport />;
+  }
+
+  return <LazyProjectView />;
+}
+
+export function LegacyRoot() {
+  const { params } = useContext(AppContext);
+  if (params && !params.LEGACY_SUPPORT.enabled) {
+    return (
+      <div className={cx("d-flex", "flex-column", "w-100")}>
+        <NavbarV2 />
+        <NoLegacySupport />
+      </div>
+    );
+  }
+  return <LazyRootV1 />;
+}
+
+interface LegacyDatasetProps {
+  userInfo: UserInfo;
+}
+
+export function LegacyShowDataset({ userInfo }: LegacyDatasetProps) {
+  const { client, model: contextModel, params } = useContext(AppContext);
+  if (params && !params.LEGACY_SUPPORT.enabled) {
+    return <NoLegacySupport />;
+  }
+
+  const model = contextModel as { subModel: (arg0: string) => unknown };
+  return (
+    <LazyShowDataset
+      insideProject={false}
+      client={client}
+      projectsUrl="/projects"
+      datasetCoordinator={
+        new DatasetCoordinator(client, model.subModel("dataset"))
+      }
+      logged={userInfo?.isLoggedIn ?? false}
+      model={model}
+    />
+  );
+}

client/src/utils/context/appParams.constants.ts

@@ -43,6 +43,10 @@ const DEFAULT_HOMEPAGE: AppParams["HOMEPAGE"] = {
   tutorialLink: Docs.READ_THE_DOCS_TUTORIALS_STARTING,
 };
 
+const DEFAULT_LEGACY_SUPPORT: AppParams["LEGACY_SUPPORT"] = {
+  enabled: true,
+};
+
 const DEFAULT_PREVIEW_THRESHOLD: AppParams["PREVIEW_THRESHOLD"] = {
   hard: 10_485_760, //10MB
   soft: 1_048_576, // 1MB
@@ -71,6 +75,7 @@ export const DEFAULT_APP_PARAMS: AppParams = {
   GATEWAY_URL: "",
   HOMEPAGE: DEFAULT_HOMEPAGE,
   KEYCLOAK_REALM: DEFAULT_KEYCLOAK_REALM,
+  LEGACY_SUPPORT: DEFAULT_LEGACY_SUPPORT,
   MAINTENANCE: "",
   PREVIEW_THRESHOLD: DEFAULT_PREVIEW_THRESHOLD,
   PRIVACY_BANNER_CONTENT: "",