refactor: adopt typed v2-centric URL scheme (#3504)

* /v2/help -> /help
* /v2/connected-services -> /integrations
* /v2/groups -> /g
* /v2/projects -> /p
* /v2/search -> /search
* /v2/secrets -> /secrets
* /v2/user -> /user
* /v2/users -> /u

Author: ciyer

client/scripts/generate_sitemap.sh

@@ -39,12 +39,6 @@ tee > "${OUTPUT_FILE}" << EOF
   <url>
     <loc>${BASE_URL}/help</loc>
   </url>
-  <url>
-    <loc>${BASE_URL}/help/docs</loc>
-  </url>
-  <url>
-    <loc>${BASE_URL}/help/features</loc>
-  </url>
   <url>
     <loc>${BASE_URL}/help/status</loc>
   </url>

client/src/App.jsx

@@ -35,15 +35,13 @@ import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProj
 import { DatasetCoordinator } from "./dataset/Dataset.state";
 import LazyShowDataset from "./dataset/LazyShowDataset";
 import LazyAdminPage from "./features/admin/LazyAdminPage";
-import LazyDashboardV2 from "./features/dashboardV2/LazyDashboardV2";
 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 "./landing/LazyAnonymousHome";
 import { FooterNavbar, RenkuNavBar } from "./landing/NavBar";
-import LazyNotFound from "./not-found/LazyNotFound";
 import NotificationsManager from "./notifications/NotificationsManager";
 import Cookie from "./privacy/Cookie";
 import LazyProjectView from "./project/LazyProjectView";
@@ -84,7 +82,7 @@ function CentralContentContainer({ user, socket }) {
             element={
               props.user.logged ? (
                 <ContainerWrap fullSize={true}>
-              <LazyDashboardV2 />
+              <LazyRootV2 />
             </ContainerWrap>
               ) : (
                 <div className="w-100">
@@ -124,7 +122,6 @@ function CentralContentContainer({ user, socket }) {
             element={<Navigate to={`${ABSOLUTE_ROUTES.v1.search}?type=dataset`} replace />}
           />
         <Route path="/v1/*" element={<LazyRootV1 />} />
-        <Route path="/v2/*" element={<LazyRootV2 />} />
         {userInfo?.isLoggedIn && userInfo.is_admin && (
                       <Route
                       path="/admin"
@@ -135,9 +132,10 @@ function CentralContentContainer({ user, socket }) {
                       }
                     />
         )}
-<Route path="*" element={<LazyNotFound />} />
-      </Routes>
-      </AppContext.Provider>
+        <Route path="/*">
+          <LazyRootV2 />
+        </Route>
+      </Switch>
     </div>
   );
 }

client/src/components/earlyAccessBanner/EarlyAccessBanner.module.scss

@@ -33,7 +33,7 @@ import {
   RenkuToolbarItemUser,
   RenkuToolbarNotifications,
 } from "./NavBarItems";
-import { RENKU_LOGO } from "./navbar.constans";
+import { RENKU_LOGO } from "./navbar.constants";
 
 export default function AnonymousNavBar() {
   const { params, model, notifications } = useContext(AppContext);

client/src/components/earlyAccessBanner/EarlyAccessBanner.tsx

@@ -33,7 +33,7 @@ import {
   RenkuToolbarItemUser,
   RenkuToolbarNotifications,
 } from "./NavBarItems";
-import { RENKU_LOGO } from "./navbar.constans";
+import { RENKU_LOGO } from "./navbar.constants";
 
 export default function LoggedInNavBar() {
   const { params, model, notifications } = useContext(AppContext);

client/src/components/navbar/AnonymousNavBar.tsx

@@ -345,7 +345,7 @@ export function RenkuToolbarItemUser({
         {isV2 && (
           <>
             <Link
-              to={ABSOLUTE_ROUTES.v2.connectedServices}
+              to={ABSOLUTE_ROUTES.v2.integrations}
               className="dropdown-item"
             >
               Integrations

client/src/components/navbar/LoggedInNavBar.tsx

@@ -19,11 +19,13 @@
 import * as Sentry from "@sentry/react";
 import cx from "classnames";
 import { ReactNode, useCallback } from "react";
+import { useLocation } from "react-router-dom-v5-compat";
 import { ArrowLeft } from "react-bootstrap-icons";
 import { StyleHandler } from "../index";
 import rkOopsImg from "../styles/assets/oops.svg";
 import rkOopsV2Img from "../styles/assets/oopsV2.svg";
 import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
+import { isRenkuLegacy } from "../utils/helpers/HelperFunctionsV2";
 
 interface AppErrorBoundaryProps {
   children?: ReactNode;
@@ -52,7 +54,8 @@ export function AppErrorBoundary({ children }: AppErrorBoundaryProps) {
 }
 
 function ErrorPage() {
-  const isV2 = location.pathname.startsWith("/v2");
+  const location = useLocation();
+  const isLegacy = isRenkuLegacy(location.pathname);
   const logged = useLegacySelector((state) => state.stateModel.user.logged);
   return (
     <>
@@ -61,10 +64,10 @@ function ErrorPage() {
         className={cx("d-flex", "flex-column", "align-items-center", "mt-5")}
       >
         <div className={cx("p-4")}>
-          <img src={isV2 ? rkOopsV2Img : rkOopsImg} />
+          <img src={isLegacy ? rkOopsImg : rkOopsV2Img} />
           <h3
             className={cx(
-              isV2 ? "text-primary" : "text-rk-green",
+              isLegacy ? "text-rk-green" : "text-primary",
               "fw-bold",
               "mt-3"
             )}
@@ -77,7 +80,7 @@ function ErrorPage() {
             <a
               className={cx(
                 "btn",
-                isV2 ? "btn-outline-primary" : "btn-outline-rk-green",
+                isLegacy ? "btn-outline-rk-green" : "btn-outline-primary",
                 "m-2"
               )}
               href={window.location.href}
@@ -89,7 +92,7 @@ function ErrorPage() {
             <a
               className={cx(
                 "btn",
-                isV2 ? "btn-primary" : "btn-rk-green",
+                isLegacy ? "btn-rk-green" : "btn-primary",
                 "m-2"
               )}
               href="/"

client/src/components/navbar/NavBarItems.tsx

@@ -816,7 +816,7 @@ function RepositoryPermissionsAlert({
             <p className={cx("mt-1", "mb-0", "fst-italic")}>
               Your user account is not currently connected to{" "}
               {provider.display_name}. See{" "}
-              <Link to={ABSOLUTE_ROUTES.v2.connectedServices}>
+              <Link to={ABSOLUTE_ROUTES.v2.integrations}>
                 connected services
               </Link>
               .
@@ -843,7 +843,7 @@ function RepositoryPermissionsAlert({
             <p className={cx("mt-1", "mb-0", "fst-italic")}>
               Your user account is not currently connected to{" "}
               {provider.display_name}. See{" "}
-              <Link to={ABSOLUTE_ROUTES.v2.connectedServices}>
+              <Link to={ABSOLUTE_ROUTES.v2.integrations}>
                 connected services
               </Link>
               .

client/src/components/navbar/navbar.constans.ts renamed to client/src/components/navbar/navbar.constants.ts

@@ -569,16 +569,20 @@ function ViewAllLink({
   noItems: boolean;
   total: number;
 }) {
+  const searchUrl = ABSOLUTE_ROUTES.v2.search;
   return noItems ? (
     <Link
-      to={`/v2/search?page=1&perPage=12&q=type:${type}`}
+      to={{ pathname: searchUrl, search: "q=type:${type}" }}
       data-cy={`view-other-${type}s-btn`}
     >
       View other {type === "project" ? "projects" : "groups"}
     </Link>
   ) : (
     <Link
-      to={`/v2/search?page=1&perPage=12&q=role:owner,editor,viewer+type:${type}+sort:created-desc`}
+      to={{
+        pathname: searchUrl,
+        search: `q=role:owner,editor,viewer+type:${type}+sort:created-desc`,
+      }}
       data-cy={`view-my-${type}s-btn`}
     >
       View all my {total > 5 ? total : ""}{" "}
@@ -588,6 +592,7 @@ function ViewAllLink({
 }
 
 function EmptyProjectsButtons() {
+  const searchUrl = ABSOLUTE_ROUTES.v2.search;
   return (
     <div className={cx("d-flex", "gap-3")}>
       <Link
@@ -598,7 +603,7 @@ function EmptyProjectsButtons() {
         Create my first project
       </Link>
       <Link
-        to={"/v2/search?page=1&perPage=12&q=type:project"}
+        to={{ pathname: searchUrl, search: "q=type:project" }}
         className={cx("btn", "btn-outline-primary")}
       >
         <Eye className={cx("bi", "me-1")} />

client/src/error-boundary/ErrorBoundary.tsx

@@ -160,7 +160,10 @@ function GroupV2CreationDetails() {
     }
   }, [result, navigate]);
 
-  const url = "renkulab.io/v2/groups/";
+  const groupPath = generatePath(ABSOLUTE_ROUTES.v2.groups.show.root, {
+    slug: "",
+  });
+  const parentPath = `${groupPath}/`;
 
   const resetUrl = useCallback(() => {
     setValue("slug", slugFromTitle(currentName, true, true), {
@@ -193,7 +196,7 @@ function GroupV2CreationDetails() {
                 errors={errors}
                 name="slug"
                 resetFunction={resetUrl}
-                url={url}
+                parentPath={parentPath}
                 slug={currentSlug}
                 dirtyFields={dirtyFields}
                 label="Group URL"