feat: use RTK Query for server-side data fetches

client/.eslintrc.json

@@ -300,6 +300,7 @@
           "uploadable",
           "uploader",
           "uploadprogress",
+          "upsert",
           "urls",
           "validators",
           "versioned",

client/react-router.config.ts

@@ -5,6 +5,9 @@ import type { Config } from "@react-router/dev/config";
 export default {
   appDirectory: "src",
   ssr: true,
+  future: {
+    v8_middleware: true,
+  },
 
   // TODO: configure Sentry integration for source maps
   // TODO: Reference: https://docs.sentry.io/platforms/javascript/guides/react-router/manual-setup/#step-3-add-readable-stack-traces-with-source-maps-optional

client/server/constants.ts

@@ -49,7 +49,7 @@ export const CONFIG_JSON = {
   RENKU_CHART_VERSION: process.env.RENKU_CHART_VERSION,
   UI_SHORT_SHA: process.env.RENKU_UI_SHORT_SHA,
   BASE_URL: process.env.BASE_URL || "http://renku.build",
-  GATEWAY_URL: process.env.GATEWAY_URL || "http://gateway.renku.build",
+  GATEWAY_URL: process.env.GATEWAY_URL || "http://gateway.renku.build/api",
   UISERVER_URL: process.env.UISERVER_URL || "http://uiserver.renku.build",
   KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || "Renku",
   DASHBOARD_MESSAGE: safeJsonToObject(process.env.DASHBOARD_MESSAGE),

client/src/entry.server.tsx

@@ -4,7 +4,7 @@ import * as Sentry from "@sentry/react-router";
 import { isbot } from "isbot";
 import type { RenderToPipeableStreamOptions } from "react-dom/server";
 import { renderToPipeableStream } from "react-dom/server";
-import type { AppLoadContext, EntryContext } from "react-router";
+import type { EntryContext, RouterContextProvider } from "react-router";
 import { ServerRouter } from "react-router";
 
 import {
@@ -23,7 +23,7 @@ function handleRequest(
   responseHeaders: Headers,
   routerContext: EntryContext,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _loadContext: AppLoadContext
+  _loadContext: RouterContextProvider
   // If you have middleware enabled:
   // loadContext: RouterContextProvider
 ): Promise<Response> {

client/src/features/ProjectPageV2/ProjectPageContent/ProjectInformation/ProjectInformation.tsx

@@ -33,6 +33,7 @@ import { Badge, Card, CardBody, CardHeader } from "reactstrap";
 
 import KeywordBadge from "~/components/keywords/KeywordBadge";
 import KeywordContainer from "~/components/keywords/KeywordContainer";
+import { useProject } from "~/routes/projects/root";
 import { UnderlineArrowLink } from "../../../../components/buttons/Button";
 import { Loader } from "../../../../components/Loader";
 import { TimeCaption } from "../../../../components/TimeCaption";
@@ -48,7 +49,6 @@ import {
   useGetProjectsByProjectIdMembersQuery,
   useGetProjectsByProjectIdQuery,
 } from "../../../projectsV2/api/projectV2.enhanced-api";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import { getMemberNameToDisplay, toSortedMembers } from "../../utils/roleUtils";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import ProjectInformationButton from "./ProjectInformationButton";

client/src/features/ProjectPageV2/ProjectPageContent/ProjectOverviewPage.tsx

@@ -18,8 +18,8 @@
 
 import { Col, Row } from "reactstrap";
 
+import { useProject } from "~/routes/projects/root";
 import SessionsV2 from "../../sessionsV2/SessionsV2";
-import { useProject } from "../ProjectPageContainer/ProjectPageContainer";
 import { CodeRepositoriesDisplay } from "./CodeRepositories/RepositoriesBox";
 import ProjectDataConnectorsBox from "./DataConnectors/ProjectDataConnectorsBox";
 import Documentation from "./Documentation/Documentation";

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/AddSessionSecretButton.tsx

@@ -30,12 +30,12 @@ import {
   UncontrolledTooltip,
 } from "reactstrap";
 
+import { useProject } from "~/routes/projects/root";
 import { SuccessAlert } from "../../../../components/Alert";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
 import type { SessionSecretSlot } from "../../../projectsV2/api/projectV2.api";
 import { usePostSessionSecretSlotsMutation } from "../../../projectsV2/api/projectV2.enhanced-api";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import DescriptionField from "./fields/DescriptionField";
 import FilenameField from "./fields/FilenameField";
 import NameField from "./fields/NameField";

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/ProjectSessionSecrets.tsx

@@ -23,6 +23,7 @@ import { ShieldLock } from "react-bootstrap-icons";
 import { Badge, Card, CardBody, CardHeader, ListGroup } from "reactstrap";
 
 import { useGetUserQueryState } from "~/features/usersV2/api/users.api";
+import { useProject } from "~/routes/projects/root";
 import { InfoAlert } from "../../../../components/Alert";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
@@ -36,7 +37,6 @@ import {
   useGetProjectsByProjectIdSessionSecretSlotsQuery,
   useGetProjectsByProjectIdSessionSecretsQuery,
 } from "../../../projectsV2/api/projectV2.enhanced-api";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import AddSessionSecretButton from "./AddSessionSecretButton";
 import SecretsMountDirectoryComponent from "./SecretsMountDirectoryComponent";

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/SecretsMountDirectoryComponent.tsx

@@ -31,13 +31,13 @@ import {
   UncontrolledTooltip,
 } from "reactstrap";
 
+import { useProject } from "~/routes/projects/root";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
 import ScrollableModal from "../../../../components/modal/ScrollableModal";
 import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api";
 import SecretsMountDirectoryField from "../../../projectsV2/fields/SecretsMountDirectoryField";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 
 export default function SecretsMountDirectoryComponent() {

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/SessionSecretActions.tsx

@@ -40,6 +40,7 @@ import {
   ModalHeader,
 } from "reactstrap";
 
+import { useProject } from "~/routes/projects/root";
 import { ButtonWithMenuV2 } from "../../../../components/buttons/Button";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
@@ -54,7 +55,6 @@ import {
   useGetUserQueryState,
   useGetUserSecretByIdQuery,
 } from "../../../usersV2/api/users.api";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
 import DescriptionField from "./fields/DescriptionField";
 import FilenameField from "./fields/FilenameField";

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/SessionViewSessionSecrets.tsx

@@ -24,6 +24,7 @@ import { generatePath, Link } from "react-router";
 import { Badge, ListGroup } from "reactstrap";
 
 import { useGetUserQueryState } from "~/features/usersV2/api/users.api";
+import { useProject } from "~/routes/projects/root";
 import { InfoAlert } from "../../../../components/Alert";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
@@ -36,7 +37,6 @@ import {
   useGetProjectsByProjectIdSessionSecretSlotsQuery,
   useGetProjectsByProjectIdSessionSecretsQuery,
 } from "../../../projectsV2/api/projectV2.enhanced-api";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import { SESSION_SECRETS_CARD_ID } from "./sessionSecrets.constants";
 import { getSessionSecretSlotsWithSecrets } from "./sessionSecrets.utils";
 import SessionSecretSlotItem from "./SessionSecretSlotItem";

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

@@ -35,6 +35,7 @@ import {
 
 import useRenkuToast from "~/components/toast/useRenkuToast";
 import SlugFormField from "~/features/projectsV2/fields/SlugFormField";
+import { useProject } from "~/routes/projects/root";
 import { RenkuAlert, SuccessAlert } from "../../../../components/Alert";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
@@ -48,7 +49,6 @@ import ProjectDescriptionFormField from "../../../projectsV2/fields/ProjectDescr
 import ProjectNameFormField from "../../../projectsV2/fields/ProjectNameFormField";
 import ProjectNamespaceFormField from "../../../projectsV2/fields/ProjectNamespaceFormField";
 import ProjectVisibilityFormField from "../../../projectsV2/fields/ProjectVisibilityFormField";
-import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import type {
   ProjectV2Metadata,
   ProjectV2MetadataWithKeyword,

client/src/features/ProjectPageV2/ProjectPageLayout/ProjectPageLayout.tsx

@@ -0,0 +1,58 @@
+/*!
+ * 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 { ReactNode } from "react";
+import { Col, Row } from "reactstrap";
+
+import GroupNew from "~/features/groupsV2/new/GroupNew";
+import type { Project } from "~/features/projectsV2/api/projectV2.api";
+import ProjectV2New from "~/features/projectsV2/new/ProjectV2New";
+import ContainerWrap from "../../../components/container/ContainerWrap";
+import ProjectPageHeader from "../ProjectPageHeader/ProjectPageHeader";
+import ProjectPageNav from "../ProjectPageNav/ProjectPageNav";
+
+interface ProjectPageLayoutProps {
+  project: Project;
+  children?: ReactNode;
+}
+
+export default function ProjectPageLayout({
+  project,
+  children,
+}: ProjectPageLayoutProps) {
+  return (
+    <ContainerWrap>
+      <ProjectV2New />
+      <GroupNew />
+
+      <Row>
+        <Col xs={12}>
+          <ProjectPageHeader project={project} />
+        </Col>
+        <Col xs={12} className="mb-2">
+          <div className="mb-3">
+            <ProjectPageNav project={project} />
+          </div>
+        </Col>
+        <Col xs={12}>
+          <main>{children}</main>
+        </Col>
+      </Row>
+    </ContainerWrap>
+  );
+}

client/src/features/projectsV2/api/projectV2-empty.api.ts

@@ -19,10 +19,14 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import queryString from "query-string";
 
+import { API_BASE_URL } from "~/utils/api/api.constants";
+import { prepareHeaders } from "~/utils/api/api.utils";
+
 // initialize an empty api service that we'll inject endpoints into later as needed
 export const projectV2EmptyApi = createApi({
   baseQuery: fetchBaseQuery({
-    baseUrl: "/api/data",
+    baseUrl: API_BASE_URL,
+    prepareHeaders,
     paramsSerializer: (params: Record<string, unknown>) =>
       // NOTE: arrayFormat: none will serialize arrays by using duplicate keys
       // like foo: [1, 2, 3] => 'foo=1&foo=2&foo=3' -> this is compatible

client/src/features/rootV2/RootV2.tsx

@@ -43,9 +43,6 @@ import LazyGroupV2Overview from "../groupsV2/LazyGroupV2Overview";
 import LazyGroupV2Search from "../groupsV2/LazyGroupV2Search";
 import LazyGroupV2Settings from "../groupsV2/LazyGroupV2Settings";
 import GroupNew from "../groupsV2/new/GroupNew";
-import LazyProjectPageV2Show from "../ProjectPageV2/LazyProjectPageV2Show";
-import LazyProjectPageOverview from "../ProjectPageV2/ProjectPageContent/LazyProjectPageOverview";
-import LazyProjectPageSettings from "../ProjectPageV2/ProjectPageContent/LazyProjectPageSettings";
 import LazyProjectV2ShowByProjectId from "../projectsV2/LazyProjectV2ShowByProjectId";
 import ProjectV2New from "../projectsV2/new/ProjectV2New";
 import LazySearchV2 from "../searchV2/LazySearchV2";
@@ -232,13 +229,6 @@ function ProjectsV2Routes() {
     <Routes>
       <Route index element={<RedirectToSearch entityType="project" />} />
       <Route path={RELATIVE_ROUTES.v2.projects.show.root}>
-        <Route element={<LazyProjectPageV2Show />}>
-          <Route index element={<LazyProjectPageOverview />} />
-          <Route
-            path={RELATIVE_ROUTES.v2.projects.show.settings}
-            element={<LazyProjectPageSettings />}
-          />
-        </Route>
         <Route
           path={RELATIVE_ROUTES.v2.projects.show.sessions.root}
           element={<ProjectSessionsRoutes />}

client/src/features/sessionsV2/components/SessionForm/BuilderEnvironmentFields.tsx

@@ -21,12 +21,12 @@ import cx from "classnames";
 import { useContext, useMemo } from "react";
 import { type Control } from "react-hook-form";
 
+import { useProject } from "~/routes/projects/root";
 import { ErrorAlert, WarnAlert } from "../../../../components/Alert";
 import RtkOrDataServicesError from "../../../../components/errors/RtkOrDataServicesError";
 import { Loader } from "../../../../components/Loader";
 import AppContext from "../../../../utils/context/appContext";
 import { DEFAULT_APP_PARAMS } from "../../../../utils/context/appParams.constants";
-import { useProject } from "../../../ProjectPageV2/ProjectPageContainer/ProjectPageContainer";
 import { useGetRepositoriesQuery } from "../../../repositories/api/repositories.api";
 import type { SessionLauncherForm } from "../../sessionsV2.types";
 import BuilderAdvancedSettings from "./BuilderAdvancedSettings";