Merge branch 'feature/integration-improvements' into andrea/redesign-integration-page

# Conflicts:
#	client/src/features/connectedServices/ConnectedServicesPage.tsx
#	client/src/features/rootV2/RootV2.tsx
#	tests/cypress/e2e/connectedServicesV2.spec.ts

Author: andre-code

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "renku-ui",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "private": true,
   "scripts": {
     "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev --port 3000",

client/package.json

@@ -21,7 +21,6 @@ import { ReactNode } from "react";
 import { Route, Routes } from "react-router";
 
 import LazyAdminPage from "./features/admin/LazyAdminPage";
-import LazyAnonymousHome from "./features/landing/LazyAnonymousHome";
 import LegacyDatasetAddToProject from "./features/legacy/LegacyDatasetAddToProject";
 import LegacyDatasets from "./features/legacy/LegacyDatasets";
 import LegacyProjectView from "./features/legacy/LegacyProjectView";
@@ -39,18 +38,6 @@ export default function CatchallApp() {
   const { data: user } = useGetUserQueryState();
   return (
     <Routes>
-      <Route
-        index
-        element={
-          user?.isLoggedIn ? (
-            <LazyRootV2 />
-          ) : (
-            <div className="w-100">
-              <LazyAnonymousHome />
-            </div>
-          )
-        }
-      />
       <Route path="/projects/*" element={<LegacyProjectView />} />
       <Route
         path="/datasets/:identifier/add"

client/src/CatchallApp.tsx

@@ -0,0 +1,30 @@
+// TODO: use bootstrap margin classes
+.progressBoxSmall {
+  max-width: 500px;
+  margin: auto;
+
+  &Steps {
+    padding-top: 110px;
+  }
+}
+
+.progressBox {
+  width: 100%;
+  padding: 40px 25px 20px 25px;
+
+  & h2 {
+    color: var(--bs-dark);
+    font-weight: bold;
+    font-size: 20px;
+  }
+
+  & p {
+    color: var(--bs-dark);
+    font-weight: normal;
+    font-size: 16px;
+  }
+
+  &_dark {
+    background-color: var(--bs-rk-dark-bg);
+  }
+}

client/src/components/progress/Progress.css

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2022 - Swiss Data Science Center (SDSC)
+ * Copyright 2026 - Swiss Data Science Center (SDSC)
  * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
  * Eidgenössische Technische Hochschule Zürich (ETHZ).
  *
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import {
   CheckCircleFill,
   SlashCircle,
@@ -24,7 +25,7 @@ import {
 
 import { Loader } from "../Loader";
 
-import "./Progress.css";
+import styles from "./ProgressBox.module.scss";
 
 /**
  *  renku-ui
@@ -74,31 +75,27 @@ interface ProgressStepsIndicatorProps {
   moreOptions?: React.ReactNode;
 }
 
-/**
- * Project Visibility functional component
- * @param {ProgressIndicatorProps} props - progress indicator options
- */
-const ProgressStepsIndicator = ({
+export default function ProgressStepsIndicator({
   style = ProgressStyle.Dark,
   title,
   description,
   status,
   moreOptions,
-}: ProgressStepsIndicatorProps) => {
+}: ProgressStepsIndicatorProps) {
   const content = status.map((s) => (
     <ProgressStep key={`step-${s.id}`} step={s} />
   ));
   return (
-    <div className={`progress-box progress-box--${style}`}>
-      <h2 className="progress-title">{title}</h2>
+    <div className={cx(styles.progressBox, styles[`progressBox_${style}`])}>
+      <h2>{title}</h2>
       <p className="pb-2">{description}</p>
-      <div className="mt-3 details-progress-box">
+      <div className="mt-3">
         {content}
         {moreOptions}
       </div>
     </div>
   );
-};
+}
 
 interface progressStepProps {
   step: StepsProgressBar;
@@ -148,7 +145,9 @@ function ProgressStep({ step }: progressStepProps) {
       break;
   }
 
-  return <div className="d-flex gap-2 mt-2 align-items-center">{content}</div>;
+  return (
+    <div className={cx("d-flex", "gap-2", "mt-2", "align-items-center")}>
+      {content}
+    </div>
+  );
 }
-
-export default ProgressStepsIndicator;

client/src/components/progress/ProgressBox.module.scss

@@ -42,7 +42,7 @@ export default function ProjectPageDelete({ project }: ProjectDeleteProps) {
 
   useEffect(() => {
     if (result.isSuccess) {
-      navigate(ABSOLUTE_ROUTES.v2.root);
+      navigate(ABSOLUTE_ROUTES.v2.index);
       renkuToastSuccess({
         textHeader: NOTIFICATION_TOPICS.PROJECT_DELETED,
         textBody: (

client/src/components/progress/ProgressSteps.tsx

@@ -127,14 +127,14 @@ function DashboardSession({ session }: DashboardSessionProps) {
     ? generatePath(ABSOLUTE_ROUTES.v2.projects.showById, {
         id: projectId,
       })
-    : ABSOLUTE_ROUTES.v2.root;
+    : ABSOLUTE_ROUTES.v2.index;
   const showSessionUrl = project
     ? generatePath(ABSOLUTE_ROUTES.v2.projects.show.sessions.show, {
         namespace: project.namespace,
         slug: project.slug,
         session: session.name,
       })
-    : ABSOLUTE_ROUTES.v2.root;
+    : ABSOLUTE_ROUTES.v2.index;
 
   const sessionStyles = getSessionStatusStyles(session);
   const state = session.status.state;

client/src/features/ProjectPageV2/ProjectPageContent/Settings/ProjectDelete.tsx

@@ -88,7 +88,7 @@ function GroupDeleteConfirmation({
       renkuToastSuccess({
         textHeader: `Group ${group.name} has been successfully deleted.`,
       });
-      navigate(generatePath(ABSOLUTE_ROUTES.v2.root));
+      navigate(generatePath(ABSOLUTE_ROUTES.v2.index));
     }
   }, [
     group.name,

client/src/features/dashboardV2/DashboardV2Sessions.tsx

@@ -27,9 +27,9 @@ export function useCustomHomePageProjectUrl(): string {
   const { params } = useContext(AppContext);
   const homePage = params?.["HOMEPAGE"] ?? DEFAULT_APP_PARAMS.HOMEPAGE;
   if (!homePage || !homePage.projectPath)
-    return generatePath(ABSOLUTE_ROUTES.v2.root);
+    return generatePath(ABSOLUTE_ROUTES.v2.index);
   const [namespace, slug] = homePage.projectPath.split("/");
-  if (!namespace || !slug) return generatePath(ABSOLUTE_ROUTES.v2.root);
+  if (!namespace || !slug) return generatePath(ABSOLUTE_ROUTES.v2.index);
   return generatePath(ABSOLUTE_ROUTES.v2.projects.show.root, {
     namespace,
     slug,