Merge branch 'main' into leafty/fix-3451-persist-disk-storage

client/.eslintignore

@@ -1,6 +1,7 @@
 *.css
 *.svg
 # Generated files should not be linted
+src/features/projectsV2/api/projectV2.api.ts
 src/features/projectsV2/api/storagesV2.api.ts
 src/features/dataConnectorsV2/api/data-connectors.api.ts
 src/features/usersV2/api/users.generated-api.ts

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renku-ui",
-  "version": "3.44.1",
+  "version": "3.45.0",
   "private": true,
   "scripts": {
     "start": "vite --port 3000",

client/src/App.jsx

@@ -161,7 +161,7 @@ function CentralContentContainer(props) {
               model={props.model}
             />
           </Route>
-          <Route path="/datasets/:identifier">
+          <CompatRoute path="/datasets/:identifier">
             <LazyShowDataset
               insideProject={false}
               client={props.client}
@@ -175,7 +175,7 @@ function CentralContentContainer(props) {
               logged={props.user.logged}
               model={props.model}
             />
-          </Route>
+          </CompatRoute>
           <CompatRoute path="/datasets">
             <Redirect to="/search?type=dataset" />
           </CompatRoute>

client/src/components/PrimaryAlert.module.scss

@@ -0,0 +1,8 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "../styles/renku_bootstrap_customization.scss";
+
+.primaryAlert {
+  --bs-primary-bg-subtle: #{tint-color($primary, 90%)};
+}

client/src/components/PrimaryAlert.tsx

@@ -0,0 +1,47 @@
+/*!
+ * 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 cx from "classnames";
+import { Alert } from "reactstrap";
+import styles from "./PrimaryAlert.module.scss";
+
+interface PrimaryAlertProps {
+  children: React.ReactNode;
+  "data-cy"?: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+export default function PrimaryAlert({
+  children,
+  icon,
+  ...props
+}: PrimaryAlertProps) {
+  return (
+    <Alert
+      color="primary"
+      isOpen
+      data-cy={props["data-cy"]}
+      className={cx(styles.primaryAlert, props.className, "overflow-y-auto")}
+    >
+      <div className={cx("d-flex", "gap-3")}>
+        {icon && <div>{icon}</div>}
+        <div className={cx("my-auto", "w-100")}>{children}</div>
+      </div>
+    </Alert>
+  );
+}

client/src/components/buttons/Button.tsx

@@ -27,7 +27,13 @@ import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import cx from "classnames";
 import { Fragment, ReactNode, useRef, useState } from "react";
-import { ArrowRight, ChevronDown, Pencil, PlusLg } from "react-bootstrap-icons";
+import {
+  ArrowRight,
+  ChevronDown,
+  Pencil,
+  PlusLg,
+  ThreeDotsVertical,
+} from "react-bootstrap-icons";
 import { Link } from "react-router-dom";
 import {
   Button,
@@ -114,7 +120,7 @@ function ButtonWithMenu(props: ButtonWithMenuProps) {
   );
 }
 
-interface BButtonWithMenuV2Props {
+interface ButtonWithMenuV2Props {
   children?: React.ReactNode;
   className?: string;
   color?: string;
@@ -125,7 +131,9 @@ interface BButtonWithMenuV2Props {
   preventPropagation?: boolean;
   size?: string;
 }
-export function ButtonWithMenuV2({
+export const ButtonWithMenuV2 = SplitButtonWithMenu;
+
+export function SplitButtonWithMenu({
   children,
   className,
   color,
@@ -135,15 +143,15 @@ export function ButtonWithMenuV2({
   id,
   preventPropagation,
   size,
-}: BButtonWithMenuV2Props) {
+}: ButtonWithMenuV2Props) {
   // ! Temporary workaround to quickly implement a design solution -- to be removed ASAP #3250
   const additionalProps = preventPropagation
     ? { onClick: (e: React.MouseEvent) => e.stopPropagation() }
     : {};
   return (
     <UncontrolledDropdown
       {...additionalProps}
-      className={cx(className)}
+      className={className}
       color={color ?? "primary"}
       direction={direction ?? "down"}
       disabled={disabled}
@@ -165,6 +173,38 @@ export function ButtonWithMenuV2({
   );
 }
 
+export function SingleButtonWithMenu({
+  children,
+  className,
+  color,
+  direction,
+  disabled,
+  id,
+  size,
+}: Omit<ButtonWithMenuV2Props, "default" | "preventPropagation">) {
+  return (
+    <UncontrolledDropdown
+      className={className}
+      color={color ?? "primary"}
+      direction={direction ?? "down"}
+      disabled={disabled}
+      id={id}
+      size={size ?? "md"}
+    >
+      <DropdownToggle
+        caret={false}
+        data-bs-toggle="dropdown"
+        color={color ?? "primary"}
+        data-cy="button-with-menu-dropdown"
+        disabled={disabled}
+      >
+        <ThreeDotsVertical />
+      </DropdownToggle>
+      <DropdownMenu end>{children}</DropdownMenu>
+    </UncontrolledDropdown>
+  );
+}
+
 type RefreshButtonProps = {
   action: () => void;
   updating?: boolean;

client/src/dataset/Dataset.container.jsx

@@ -17,15 +17,14 @@
  */
 
 import { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router";
+import { useLocation, useParams } from "react-router-dom-v5-compat";
 
 import { useCoreSupport } from "../features/project/useProjectCoreSupport";
 import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import DatasetView from "./Dataset.present";
 
 export default function ShowDataset(props) {
-  const history = useHistory();
-  const location = history.location;
+  const location = useLocation();
 
   const { identifier: identifier_ } = useParams();
   const identifier = identifier_?.replaceAll("-", "");
@@ -160,7 +159,6 @@ export default function ShowDataset(props) {
       fetchError={dataset?.fetchError}
       fetchedKg={dataset?.fetched}
       fileContentUrl={props.fileContentUrl}
-      history={history}
       identifier={identifier}
       insideProject={props.insideProject}
       lineagesUrl={props.lineagesUrl}

client/src/dataset/Dataset.present.jsx

@@ -18,10 +18,10 @@
 
 import { faPen, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { isEmpty, groupBy } from "lodash-es";
+import { groupBy, isEmpty } from "lodash-es";
 import { useState } from "react";
 import { Helmet } from "react-helmet";
-import { Link, useHistory } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom-v5-compat";
 import {
   Button,
   Card,
@@ -42,16 +42,16 @@ import { CoreErrorAlert } from "../components/errors/CoreErrorAlert";
 import { CoreError } from "../components/errors/CoreErrorHelpers";
 import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown";
 import DeleteDataset from "../project/datasets/delete";
+import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import { toHumanDateTime } from "../utils/helpers/DateTimeUtils";
+import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
 import { Url } from "../utils/helpers/url";
 import { DatasetError } from "./DatasetError";
 import {
   cleanModifyLocation,
   getDatasetAuthors,
   getUpdatedDatasetImage,
 } from "./DatasetFunctions";
-import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
-import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 
 function DisplayFiles(props) {
   if (!props.files || !props.files?.hasPart) return null;
@@ -271,21 +271,22 @@ function DisplayInfoTable(props) {
 }
 
 function ErrorAfterCreation(props) {
+  const location = useLocation();
+
   const editButton = (
     <Link
       className="float-right me-1 mb-1"
       id="editDatasetTooltip"
-      to={(location) =>
-        cleanModifyLocation(location, { dataset: props.dataset })
-      }
+      to={cleanModifyLocation(location)}
+      state={{ dataset: props.dataset }}
     >
       <Button size="sm" color="danger" className="btn-icon-text">
         <FontAwesomeIcon icon={faPen} color="dark" /> Edit
       </Button>
     </Link>
   );
 
-  return props.location.state && props.location.state.errorOnCreation ? (
+  return location.state && location.state.errorOnCreation ? (
     <ErrorAlert>
       <strong>Error on creation</strong>
       <br />
@@ -297,10 +298,11 @@ function ErrorAfterCreation(props) {
 }
 
 function AddToProjectButton({ insideKg, locked, logged, identifier }) {
-  const history = useHistory();
+  const navigate = useNavigate();
+
   const addDatasetUrl = `/datasets/${identifier}/add`;
   const goToAddToProject = () => {
-    if (history) history.push(addDatasetUrl);
+    navigate(addDatasetUrl);
   };
 
   const tooltip =
@@ -344,6 +346,8 @@ function EditDatasetButton({
   locked,
   maintainer,
 }) {
+  const location = useLocation();
+
   if (!insideProject || !maintainer) return null;
   if (locked) {
     return (
@@ -367,14 +371,8 @@ function EditDatasetButton({
       className="float-right mb-1"
       id="editDatasetTooltip"
       data-cy="edit-dataset-button"
-      to={(location) =>
-        cleanModifyLocation(location, {
-          dataset,
-          files,
-          isFilesFetching,
-          filesFetchError,
-        })
-      }
+      to={cleanModifyLocation(location)}
+      state={{ dataset, files, isFilesFetching, filesFetchError }}
     >
       <Button
         className="btn-outline-rk-pink icon-button"
@@ -499,7 +497,7 @@ export default function DatasetView(props) {
       }
     >
       <Col>
-        <ErrorAfterCreation location={props.location} dataset={dataset} />
+        <ErrorAfterCreation dataset={dataset} />
         {props.insideProject ? null : (
           <Helmet>
             <title>{pageTitle}</title>
@@ -591,7 +589,6 @@ export default function DatasetView(props) {
             client={props.client}
             dataset={dataset}
             externalUrl={props.externalUrl}
-            history={props.history}
             metadataVersion={props.metadataVersion}
             modalOpen={deleteDatasetModalOpen}
             projectPathWithNamespace={props.projectPathWithNamespace}

client/src/dataset/DatasetFunctions.js

@@ -70,14 +70,12 @@ export { mapDataset, getDatasetAuthors, getUpdatedDatasetImage };
  * Prevents issues with the leading slash  on the dataset modify link.
  *
  * @param {*} location - current location object
- * @param {*} newState - any new state to set
  */
-export function cleanModifyLocation(location, newState) {
+export function cleanModifyLocation(location) {
   return {
     ...location,
     pathname: location.pathname.endsWith("/")
       ? location.pathname + "modify"
       : location.pathname + "/modify",
-    state: newState,
   };
 }