From 03ac773c77033bec11cfb4a2e586975dd015ab57 Mon Sep 17 00:00:00 2001 From: Lorenzo Date: Wed, 19 Jun 2024 17:30:05 +0200 Subject: [PATCH 01/39] build: update bootstrap to 5.3.3 --- client/package-lock.json | 8 ++++---- client/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index ef6547419..b2cb8c79e 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -19,7 +19,7 @@ "@renku/ckeditor5-build-renku": "0.0.6", "@sentry/react": "^7.81.1", "ajv": "^6.12.6", - "bootstrap": "^5.3.0", + "bootstrap": "^5.3.3", "classnames": "^2.3.2", "cookieconsent": "^3.1.1", "d3": "^7.9.0", @@ -19702,9 +19702,9 @@ "dev": true }, "node_modules/bootstrap": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", - "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", "funding": [ { "type": "github", diff --git a/client/package.json b/client/package.json index 4150bedc6..1a935d1d5 100644 --- a/client/package.json +++ b/client/package.json @@ -41,7 +41,7 @@ "@renku/ckeditor5-build-renku": "0.0.6", "@sentry/react": "^7.81.1", "ajv": "^6.12.6", - "bootstrap": "^5.3.0", + "bootstrap": "^5.3.3", "classnames": "^2.3.2", "cookieconsent": "^3.1.1", "d3": "^7.9.0", From 6657e302819a25aeb0c879498cbf156e089cec58 Mon Sep 17 00:00:00 2001 From: Lorenzo Cavazzi <43481553+lorenzo-cavazzi@users.noreply.github.com> Date: Thu, 18 Jul 2024 22:30:04 +0200 Subject: [PATCH 02/39] refactor: revamp design (#3215) * remove v1 Bootstrap customization and add minimal styling to Bootstrap components. * swap components with custom CSS classes for standard Bootstrap components. * remove or modify a few interactions on the landing page and the project page --------- Co-authored-by: Andrea Cordoba --- client/.eslintrc.json | 4 + client/.storybook/preview.tsx | 2 +- .../public/static/public/img/logo-yellow.svg | 2 +- client/src/App.jsx | 4 +- client/src/components/Alert.jsx | 33 +- client/src/components/ExternalLinks.tsx | 8 +- client/src/components/Logs.tsx | 39 +- client/src/components/buttons/Button.tsx | 85 ++- .../components/buttons/ThreeDots.module.scss | 26 - .../components/container/ContainerWrap.tsx | 6 +- .../components/entities/VisibilityIcon.tsx | 9 +- .../src/components/formschema/FormSchema.tsx | 8 +- client/src/components/icons/AlertIcon.tsx | 200 ------ client/src/components/navbar/NavBarItems.tsx | 11 +- .../src/components/progress/ProgressSteps.tsx | 6 +- .../error-boundary/ErrorBoundary.module.scss | 17 +- client/src/error-boundary/ErrorBoundary.tsx | 53 +- .../ProjectPageContainer.module.scss | 23 - .../ProjectPageContainer.tsx | 16 +- .../AddCodeRepositoryModal.tsx | 106 +-- .../CodeRepositoryDisplay.tsx | 519 +++++++------- .../CodeRepositories/RepositoriesBox.tsx | 97 ++- .../DataSources/DataSourceDisplay.tsx | 186 ++--- .../DataSources/DataSourceView.tsx | 83 +-- .../DataSources/DataSourcesBox.tsx | 104 ++- .../LazyProjectInformation.tsx | 30 - .../ProjectInformation/ProjectInformation.tsx | 338 ++++----- .../ProjectOverview.module.scss | 6 - .../ProjectOverview/ProjectOverview.tsx | 73 -- .../ProjectOverviewPage.tsx | 29 +- .../Settings/ProjectDelete.tsx | 67 +- .../Settings/ProjectSettings.tsx | 81 +-- .../Settings/ProjectSettingsMembers.tsx | 266 +++---- .../ProjectPageHeader/ProjectPageHeader.tsx | 211 +----- .../ProjectPageNav/ProjectPageNav.tsx | 129 +--- .../settings/ProjectDeleteConfirmation.tsx | 19 +- .../dashboardV2/Dashboard.module.scss | 82 --- .../src/features/dashboardV2/DashboardV2.tsx | 383 ++++------ .../dashboardV2/DashboardV2Sessions.tsx | 221 +++--- client/src/features/dashboardV2/HelpV2.tsx | 160 +++-- .../members/GroupV2MemberListDisplay.tsx | 54 +- .../groupsV2/settings/GroupV2Settings.tsx | 40 +- .../features/groupsV2/show/GroupV2Show.tsx | 51 +- .../cloudStorage/AddOrEditCloudStorage.tsx | 2 +- .../cloudStorage/CloudStorageModal.tsx | 2 +- .../cloudStorageModalComponents.tsx | 39 +- .../fields/AddEntityMemberLookupForm.tsx | 25 +- .../projectsV2/fields/AddGroupMemberModal.tsx | 8 +- .../fields/EditProjectMemberModal.tsx | 16 +- .../ProjectNamespaceFormField.module.scss | 45 -- .../fields/ProjectNamespaceFormField.tsx | 57 +- .../fields/ProjectRepositoryFormField.tsx | 16 +- .../fields/ProjectVisibilityFormField.tsx | 38 +- .../features/projectsV2/list/GroupList.tsx | 71 +- .../projectsV2/list/ProjectV2List.tsx | 11 +- .../projectsV2/list/ProjectV2ListDisplay.tsx | 62 +- .../projectsV2/list/projectV2List.module.scss | 3 - .../src/features/projectsV2/new/GroupNew.tsx | 22 +- .../new/ProjectV2FormSubmitGroup.tsx | 17 +- .../features/projectsV2/new/ProjectV2New.tsx | 30 +- .../projectsV2/new/ProjectV2NewForm.tsx | 39 +- .../projectsV2/notFound/GroupNotFound.tsx | 14 +- .../projectsV2/notFound/ProjectNotFound.tsx | 14 +- .../projectsV2/shared/BackToV1Button.tsx | 1 - .../features/projectsV2/shared/WipBadge.tsx | 6 +- .../features/projectsV2/show/GroupSimple.tsx | 94 +++ .../show/GroupSimple.types.tsx} | 20 +- .../projectsV2/show/ProjectSimple.tsx | 100 +++ .../ProjectV2DescriptionAndRepositories.tsx | 19 +- .../projectsV2/show/groupEditForms.tsx | 95 +-- client/src/features/rootV2/NavbarV2.tsx | 72 +- client/src/features/rootV2/RootV2.tsx | 5 - client/src/features/searchV2/SearchV2.tsx | 4 +- .../searchV2/components/SearchV2Bar.tsx | 6 +- .../searchV2/components/SearchV2Filters.tsx | 20 +- .../searchV2/components/SearchV2Header.tsx | 2 +- .../searchV2/components/SearchV2Results.tsx | 218 +++--- .../src/features/searchV2/searchV2.slice.ts | 2 +- .../components/ResourcesSessionModal.tsx | 51 +- .../components/SessionModals.module.scss | 4 - .../session/components/SessionsList.tsx | 12 +- .../components/StartSessionProgressBar.tsx | 2 +- .../components/options/SessionClassOption.tsx | 116 +++- .../session/utils/sessionStatus.utils.ts | 2 +- .../sessionsV2/AddSessionLauncherButton.tsx | 16 +- .../SessionLauncherForm.module.scss | 24 +- .../sessionsV2/SessionLauncherFormContent.tsx | 323 ++++----- .../sessionsV2/SessionList/SessionItem.tsx | 128 ++++ .../SessionItemDisplay.module.scss | 9 - .../SessionList/SessionItemDisplay.tsx | 223 +----- .../SessionView/SessionView.module.scss | 29 - .../sessionsV2/SessionView/SessionView.tsx | 657 ++++++++---------- client/src/features/sessionsV2/SessionsV2.tsx | 312 +++------ .../features/sessionsV2/ShowSessionPage.tsx | 26 +- .../sessionsV2/StartSessionButton.tsx | 56 +- .../sessionsV2/UpdateSessionLauncherModal.tsx | 21 +- .../SessionButton/ActiveSessionButton.tsx | 68 +- .../components/SessionModals/AddSession.tsx | 128 ++-- .../SessionModals/ModifyResourcesLauncher.tsx | 74 +- .../SessionModals/SelectResourceClass.tsx | 44 +- .../SessionStatus/SessionStatus.tsx | 116 ++-- .../usersV2/show/UserAvatar.module.scss | 7 +- client/src/features/usersV2/show/UserShow.tsx | 35 +- client/src/index.jsx | 2 +- client/src/landing/NavBar.jsx | 55 +- client/src/not-found/NotFound.css | 22 +- client/src/not-found/NotFound.tsx | 26 +- .../project/filestreeview/FilesTreeView.jsx | 4 +- client/src/routing/routes.constants.ts | 1 - .../storybook/bootstrap/Accordion.stories.tsx | 109 +++ .../src/storybook/bootstrap/Alert.stories.tsx | 80 +++ .../src/storybook/bootstrap/Badge.stories.tsx | 72 ++ .../storybook/bootstrap/Button.stories.tsx | 249 +++++++ .../src/storybook/bootstrap/Card.stories.tsx | 52 ++ .../bootstrap/ColorPalette.module.scss | 27 + .../bootstrap/ColorPalette.stories.tsx | 68 ++ .../storybook/bootstrap/Spacing.stories.tsx | 70 ++ .../styles/bootstrap/_custom_utilities.scss | 12 - client/src/styles/bootstrap_ext/_alert.scss | 4 - client/src/styles/icons/icons.scss | 15 - client/src/styles/index.scss | 1 - client/src/styles/indexV2.scss | 38 - .../src/styles/renku_additional_classes.scss | 17 + client/src/styles/renku_bootstrap.scss | 15 + .../styles/renku_bootstrap_customization.scss | 99 +++ tests/cypress/e2e/dashboard.spec.ts | 20 +- tests/cypress/e2e/dashboardV2.spec.ts | 21 +- tests/cypress/e2e/groupV2.spec.ts | 14 +- tests/cypress/e2e/maintenance.spec.ts | 3 +- tests/cypress/e2e/projectV2.spec.ts | 29 +- tests/cypress/e2e/projectV2setup.spec.ts | 21 +- 131 files changed, 4203 insertions(+), 4508 deletions(-) delete mode 100644 client/src/components/buttons/ThreeDots.module.scss delete mode 100644 client/src/components/icons/AlertIcon.tsx delete mode 100644 client/src/features/ProjectPageV2/ProjectPageContainer/ProjectPageContainer.module.scss delete mode 100644 client/src/features/ProjectPageV2/ProjectPageContent/LazyProjectInformation.tsx delete mode 100644 client/src/features/ProjectPageV2/ProjectPageContent/ProjectOverview/ProjectOverview.module.scss delete mode 100644 client/src/features/ProjectPageV2/ProjectPageContent/ProjectOverview/ProjectOverview.tsx delete mode 100644 client/src/features/dashboardV2/Dashboard.module.scss delete mode 100644 client/src/features/projectsV2/list/projectV2List.module.scss create mode 100644 client/src/features/projectsV2/show/GroupSimple.tsx rename client/src/features/{ProjectPageV2/ProjectPageContent/ProjectInformationPage.tsx => projectsV2/show/GroupSimple.types.tsx} (69%) create mode 100644 client/src/features/projectsV2/show/ProjectSimple.tsx create mode 100644 client/src/features/sessionsV2/SessionList/SessionItem.tsx delete mode 100644 client/src/features/sessionsV2/SessionList/SessionItemDisplay.module.scss delete mode 100644 client/src/features/sessionsV2/SessionView/SessionView.module.scss create mode 100644 client/src/storybook/bootstrap/Accordion.stories.tsx create mode 100644 client/src/storybook/bootstrap/Alert.stories.tsx create mode 100644 client/src/storybook/bootstrap/Badge.stories.tsx create mode 100644 client/src/storybook/bootstrap/Button.stories.tsx create mode 100644 client/src/storybook/bootstrap/Card.stories.tsx create mode 100644 client/src/storybook/bootstrap/ColorPalette.module.scss create mode 100644 client/src/storybook/bootstrap/ColorPalette.stories.tsx create mode 100644 client/src/storybook/bootstrap/Spacing.stories.tsx delete mode 100644 client/src/styles/bootstrap/_custom_utilities.scss delete mode 100644 client/src/styles/indexV2.scss create mode 100644 client/src/styles/renku_additional_classes.scss create mode 100644 client/src/styles/renku_bootstrap.scss create mode 100644 client/src/styles/renku_bootstrap_customization.scss diff --git a/client/.eslintrc.json b/client/.eslintrc.json index c5c771cc2..ed0cdecc1 100644 --- a/client/.eslintrc.json +++ b/client/.eslintrc.json @@ -100,6 +100,7 @@ "azureblob", "backend", "beforeunload", + "blockquote", "bioconductor", "bool", "booleans", @@ -114,6 +115,7 @@ "ciyer", "ckeditor", "cktextarea", + "clearfix", "cloudstorage", "codegen", "codemirror", @@ -200,11 +202,13 @@ "papermill", "pathname", "pdfjs", + "plaintext", "poller", "popups", "prepend", "presentational", "profiler", + "progressbar", "proxying", "Pupikofer", "pygments", diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx index 876ac92bf..a005e45d1 100644 --- a/client/.storybook/preview.tsx +++ b/client/.storybook/preview.tsx @@ -9,7 +9,7 @@ import { DEFAULT_APP_PARAMS } from "../src/utils/context/appParams.constants"; import { createStore } from "../src/utils/helpers/EnhancedState"; import { createCoreApiVersionedUrlConfig } from "../src/utils/helpers/url"; -import "../src/styles/index.scss"; +import "../src/styles/renku_bootstrap.scss"; // This how the documentation recommends introducing the store into storybook // https://storybook.js.org/addons/@dreamworld/addon-redux/ diff --git a/client/public/static/public/img/logo-yellow.svg b/client/public/static/public/img/logo-yellow.svg index b9723ef00..5fa91a499 100644 --- a/client/public/static/public/img/logo-yellow.svg +++ b/client/public/static/public/img/logo-yellow.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/client/src/App.jsx b/client/src/App.jsx index ee7df08a6..2c6be6e11 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -260,8 +260,8 @@ function App(props) { const user = useLegacySelector((state) => state.stateModel.user); if (!user?.fetched && user?.fetching) { return ( -
-

Checking user data

+
+

Checking user data

); diff --git a/client/src/components/Alert.jsx b/client/src/components/Alert.jsx index e8c8ce028..c432e3284 100644 --- a/client/src/components/Alert.jsx +++ b/client/src/components/Alert.jsx @@ -21,16 +21,15 @@ * Alert.js * Alert code and presentation. */ - +import cx from "classnames"; import { Component } from "react"; import { Alert } from "reactstrap"; import { - WarningIcon, - DangerIcon, - InfoIcon, - SuccessIcon, -} from "./icons/AlertIcon.tsx"; + CheckCircleFill, + ExclamationTriangleFill, + InfoCircleFill, +} from "react-bootstrap-icons"; /** * Display a alert that can be dismissed. @@ -86,13 +85,17 @@ class RenkuAlert extends Component { getIcon() { const icon = { - danger: , - info: , - warning: , - success: , + danger: ( + + ), + info: , + warning: ( + + ), + success: , }[this.props.color]; - return icon ?
{icon}
: ""; + return icon; } render() { @@ -108,9 +111,11 @@ class RenkuAlert extends Component { className={this.props.className} data-cy={this.props.dataCy} > -
- {alertIcon} -
{this.props.children}
+
+

{alertIcon}

+
+ {this.props.children} +
); diff --git a/client/src/components/ExternalLinks.tsx b/client/src/components/ExternalLinks.tsx index d0048e8aa..8f06b018e 100644 --- a/client/src/components/ExternalLinks.tsx +++ b/client/src/components/ExternalLinks.tsx @@ -139,13 +139,13 @@ export function ExternalLink({ ); const icon = iconSup ? {iconNode} : <>{iconNode}; displayTitle = iconAfter ? ( - + {title} - {icon} + {icon} ) : ( - - {icon} + + {icon} {title} ); diff --git a/client/src/components/Logs.tsx b/client/src/components/Logs.tsx index 111df5c7d..3cdf36088 100644 --- a/client/src/components/Logs.tsx +++ b/client/src/components/Logs.tsx @@ -16,8 +16,6 @@ * limitations under the License. */ -import { faSave, faSyncAlt } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useEffect } from "react"; import { Button, @@ -45,6 +43,8 @@ import { import { Loader } from "./Loader"; import "./Logs.css"; +import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons"; +import cx from "classnames"; export interface ILogs { data: Record; @@ -104,7 +104,7 @@ const LogTabs = ({ logs }: { logs: Record }) => { return (
-
)} - - -
-

Group Members

+

Group Members

-

Group Projects

+

Group Projects

@@ -169,17 +166,15 @@ function GroupSettingsButton({ group }: GroupSettingsButtonProps) { return ( - - - Edit group settings - - + + + Edit settings + } disabled={null} members={members} diff --git a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx index 1813a621a..e5a3da476 100644 --- a/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx +++ b/client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx @@ -688,7 +688,7 @@ function AddStorageType({ pill className={cx( "fst-italic", - "text-warning", + "text-warning-emphasis", "bg-warning-subtle", "border", "border-warning", diff --git a/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx b/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx index 2f02a5a13..56e101d77 100644 --- a/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx +++ b/client/src/features/project/components/cloudStorage/CloudStorageModal.tsx @@ -475,7 +475,7 @@ export default function CloudStorageModal({ reset(); }} > - + Reset )} diff --git a/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx b/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx index 0935d3562..31a0188ed 100644 --- a/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx +++ b/client/src/features/project/components/cloudStorage/cloudStorageModalComponents.tsx @@ -67,17 +67,17 @@ export function AddCloudStorageBackButton({ if (state.step <= 1 || success) return ( ); return ( ); @@ -126,7 +126,7 @@ export function AddCloudStorageBodyContent({ if (success) return ( -

+

The storage {addResultStorageName} has been successfully{" "} {storageId ? "updated" : "added"}.

@@ -148,7 +148,7 @@ export function AddCloudStorageBodyContent({ return ( <> {!storageId && ( -

+

Add published datasets from data repositories for use in your project. Or, connect to cloud storage to read and write custom data.

@@ -176,10 +176,8 @@ export function AddCloudStorageHeaderContent({ if (isV2) return ( <> - {" "} - - {storageId ? "Edit" : "Add"} data source - + {storageId ? "Edit" : "Add"}{" "} + data source ); return ( @@ -220,6 +218,7 @@ export function AddCloudStorageContinueButton({ return (
{disableContinueButton && ( @@ -319,7 +319,7 @@ export function AddCloudStorageConnectionTestResult({
{" "} -

The connection to the storage works correctly.

+

The connection to the storage works correctly.
); @@ -363,18 +363,17 @@ function TestConnectionAndContinueButtons({ Test connection ); - const testConnectionColorClass = testIsSuccess - ? "btn-outline-rk-green" + const testConnectionColor = testIsSuccess + ? "outline-primary" : testIsFailure - ? "btn-danger" - : "btn-secondary"; + ? "danger" + : "outline-primary"; const testConnectionSection = (
@@ -125,15 +117,20 @@ export default function AddEntityMemberEmailLookupForm({ - diff --git a/client/src/features/projectsV2/fields/AddGroupMemberModal.tsx b/client/src/features/projectsV2/fields/AddGroupMemberModal.tsx index 222ed85fe..bc8acc8e4 100644 --- a/client/src/features/projectsV2/fields/AddGroupMemberModal.tsx +++ b/client/src/features/projectsV2/fields/AddGroupMemberModal.tsx @@ -136,12 +136,12 @@ function AddGroupMemberAccessForm({ - - diff --git a/client/src/features/projectsV2/fields/EditProjectMemberModal.tsx b/client/src/features/projectsV2/fields/EditProjectMemberModal.tsx index cb0f968d7..d53609168 100644 --- a/client/src/features/projectsV2/fields/EditProjectMemberModal.tsx +++ b/client/src/features/projectsV2/fields/EditProjectMemberModal.tsx @@ -103,12 +103,8 @@ function EditProjectMemberAccessForm({ return ( <> - -
+ + {result.error && }
- - diff --git a/client/src/features/projectsV2/fields/ProjectNamespaceFormField.module.scss b/client/src/features/projectsV2/fields/ProjectNamespaceFormField.module.scss index 530faf082..44ee9daab 100644 --- a/client/src/features/projectsV2/fields/ProjectNamespaceFormField.module.scss +++ b/client/src/features/projectsV2/fields/ProjectNamespaceFormField.module.scss @@ -1,28 +1,5 @@ -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/variables-dark"; -@import "~bootstrap/scss/maps"; -@import "~bootstrap/scss/mixins"; - .control { - background: var(--bs-rk-white); - --bs-border-color: var(--bs-rk-border-input); - cursor: pointer !important; - - &:hover { - --bs-border-color: var(--bs-rk-green); - } - - &IsOpen { - --bs-border-color: var(--bs-rk-green); - } -} - -.menu { - background: var(--bs-rk-white); - --bs-border-color: var(--bs-rk-green); - z-index: 10 !important; } .option { @@ -37,25 +14,3 @@ background-color: #e4e7ea80; } } - -.option, -.singleValue { - font-size: 0.875rem !important; - - @include media-breakpoint-up(lg) { - font-size: 1rem !important; - } - - & .slug { - @include media-breakpoint-up(sm) { - min-width: 80px; - width: 20em; - } - } - & .kind { - @include media-breakpoint-up(sm) { - min-width: 80px; - width: 5em; - } - } -} diff --git a/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx b/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx index 2de3a651e..fd4f510f7 100644 --- a/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx +++ b/client/src/features/projectsV2/fields/ProjectNamespaceFormField.tsx @@ -16,11 +16,12 @@ * limitations under the License. */ -import { faSyncAlt } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import cx from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { ChevronDown, ThreeDots } from "react-bootstrap-icons"; +import { Button, FormText, Label, UncontrolledTooltip } from "reactstrap"; +import { ArrowRepeat, ChevronDown, ThreeDots } from "react-bootstrap-icons"; +import type { FieldValues } from "react-hook-form"; +import { Controller } from "react-hook-form"; import Select, { ClassNamesConfig, components, @@ -31,10 +32,6 @@ import Select, { SingleValue, SingleValueProps, } from "react-select"; -import { Button, FormText, Label, UncontrolledTooltip } from "reactstrap"; - -import type { FieldValues } from "react-hook-form"; -import { Controller } from "react-hook-form"; import { ErrorAlert } from "../../../components/Alert"; import { Loader } from "../../../components/Loader"; @@ -61,7 +58,7 @@ const selectComponents: SelectComponentsConfig< DropdownIndicator: (props) => { return ( - + ); }, @@ -109,19 +106,19 @@ function CustomMenuList({ {props.children} {hasMore && ( -
+
)} @@ -181,43 +178,25 @@ function NamespaceSelector({ const selectClassNames: ClassNamesConfig = { control: ({ menuIsOpen }) => - cx( - menuIsOpen ? "rounded-top" : "rounded", - "border", - "py-2", - styles.control, - menuIsOpen && styles.controlIsOpen - ), + cx(menuIsOpen ? "rounded-top" : "rounded", "border", styles.control), dropdownIndicator: () => cx("pe-3"), - menu: () => - cx("rounded-bottom", "border", "border-top-0", "px-0", "py-2", styles.menu), + menu: () => cx("bg-white", "rounded-bottom", "border", "border-top-0"), menuList: () => cx("d-grid"), option: ({ isFocused, isSelected }) => cx( "d-flex", "flex-column", "flex-sm-row", - "align-items-start", - "align-items-sm-center", "column-gap-3", "px-3", - "py-1", + "py-2", styles.option, isFocused && styles.optionIsFocused, !isFocused && isSelected && styles.optionIsSelected ), placeholder: () => cx("px-3"), singleValue: () => - cx( - "d-flex", - "flex-column", - "flex-sm-row", - "align-items-start", - "align-items-sm-center", - "column-gap-3", - "px-3", - styles.singleValue - ), + cx("d-flex", "flex-column", "flex-sm-row", "column-gap-3", "px-3"), }; export default function ProjectNamespaceFormField({ @@ -409,13 +388,13 @@ function RefreshNamespaceButton({ refresh }: RefreshNamespaceButtonProps) { return ( <> Refresh namespaces diff --git a/client/src/features/projectsV2/fields/ProjectRepositoryFormField.tsx b/client/src/features/projectsV2/fields/ProjectRepositoryFormField.tsx index 9a57732a2..d9e692071 100644 --- a/client/src/features/projectsV2/fields/ProjectRepositoryFormField.tsx +++ b/client/src/features/projectsV2/fields/ProjectRepositoryFormField.tsx @@ -17,12 +17,11 @@ */ import cx from "classnames"; - +import { Button, FormText, Input, Label } from "reactstrap"; +import { XLg } from "react-bootstrap-icons"; import { Controller } from "react-hook-form"; import type { FieldValues } from "react-hook-form"; -import { Button, FormText, Input, Label } from "reactstrap"; - import type { Repository } from "../projectV2.types"; import type { GenericProjectFormFieldProps } from "./formField.types"; @@ -54,6 +53,7 @@ export default function ProjectRepositoryFormField({
0 && (errors.repositories == null || @@ -69,7 +69,6 @@ export default function ProjectRepositoryFormField({ render={({ field }) => ( -
Please provide a valid URL or remove the repository.
{index == 0 && ( - + A URL that refers to a git repository. )} diff --git a/client/src/features/projectsV2/fields/ProjectVisibilityFormField.tsx b/client/src/features/projectsV2/fields/ProjectVisibilityFormField.tsx index e7a62ea6e..8d5ce93b8 100644 --- a/client/src/features/projectsV2/fields/ProjectVisibilityFormField.tsx +++ b/client/src/features/projectsV2/fields/ProjectVisibilityFormField.tsx @@ -40,16 +40,11 @@ export default function ProjectVisibilityFormField({ control={control} name={name} render={({ field }) => ( -
-
+
+
({ />
-
+
({ />
diff --git a/client/src/features/projectsV2/list/GroupList.tsx b/client/src/features/projectsV2/list/GroupList.tsx index 8b3cc8ff1..f2fcfc81b 100644 --- a/client/src/features/projectsV2/list/GroupList.tsx +++ b/client/src/features/projectsV2/list/GroupList.tsx @@ -17,6 +17,7 @@ */ import cx from "classnames"; import { useState } from "react"; +import { Card, CardBody, Col, Row } from "reactstrap"; import { generatePath, Link } from "react-router-dom-v5-compat"; import ContainerWrap from "../../../components/container/ContainerWrap"; @@ -25,12 +26,10 @@ import { Loader } from "../../../components/Loader"; import Pagination from "../../../components/Pagination"; import { TimeCaption } from "../../../components/TimeCaption"; import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants"; - import type { GroupResponse } from "../api/namespace.api"; import { useGetGroupsQuery } from "../api/projectV2.enhanced-api"; import WipBadge from "../shared/WipBadge"; - -import styles from "./projectV2List.module.scss"; +import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert"; interface GroupListGroupProps { group: GroupResponse; @@ -40,25 +39,35 @@ function GroupListGroup({ group }: GroupListGroupProps) { slug: group.slug, }); return ( -
-
-

- {group.name} -

-
{group.description}
-
+ + + +
+ {group.name} +
+ + {group.description && ( +

+ {group.description} +

+ )} + -
-
-
+ + + ); } function GroupListDisplay() { - const perPage = 10; + const perPage = 12; const [page, setPage] = useState(1); const { data, error, isLoading } = useGetGroupsQuery({ page, @@ -69,22 +78,27 @@ function GroupListDisplay() { return (
- +
Retrieving groups...
); - if (error) return
Cannot show groups.
; - if (data == null) return
No renku v2 groups.
; + if (error || data == null) { + return ; + } + + if (!data.total) return
No renku v2 groups.
; return ( - <> -
+
+ {data.groups?.map((group) => ( ))} -
+ - +
); } @@ -109,11 +123,12 @@ export default function GroupList() { title="List Groups" description={ <> -
- All visible groups {" "} -
+

+ All visible groups + +

- + Create New Group
diff --git a/client/src/features/projectsV2/list/ProjectV2List.tsx b/client/src/features/projectsV2/list/ProjectV2List.tsx index e4b89e552..7259ee620 100644 --- a/client/src/features/projectsV2/list/ProjectV2List.tsx +++ b/client/src/features/projectsV2/list/ProjectV2List.tsx @@ -32,11 +32,12 @@ export default function ProjectV2List() { title="List Projects (V2)" description={ <> -
- All visible projects {" "} -
-
- +

+ All visible projects + +

+
+ Create New Project
diff --git a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx index 42c11c383..6cab092b7 100644 --- a/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx +++ b/client/src/features/projectsV2/list/ProjectV2ListDisplay.tsx @@ -18,7 +18,7 @@ import cx from "classnames"; import { ReactNode, useCallback, useEffect, useMemo } from "react"; -import { Globe2, LockFill } from "react-bootstrap-icons"; +import { Globe2, Lock } from "react-bootstrap-icons"; import { Link, generatePath, @@ -37,7 +37,7 @@ import { useGetProjectsQuery, } from "../api/projectV2.enhanced-api"; -const DEFAULT_PER_PAGE = 10; +const DEFAULT_PER_PAGE = 12; const DEFAULT_PAGE_PARAM = "page"; interface ProjectListDisplayProps { @@ -131,8 +131,10 @@ export default function ProjectListDisplay({ } return ( - <> - +
+ {data.projects?.map((project) => ( ))} @@ -148,7 +150,7 @@ export default function ProjectListDisplay({ "rk-search-pagination" )} /> - +
); } @@ -183,49 +185,55 @@ function ProjectV2ListProject({ project }: ProjectV2ListProjectProps) { -

- - {name} - -

-

+

+ {name} +
+

{"@"} {namespace}

{description && ( -

{description}

+

+ {description} +

)}
-
- {visibility === "private" ? ( +
+ {visibility.toLowerCase() === "private" ? ( <> - + Private ) : ( <> - + Public )}
-
- -
+
diff --git a/client/src/features/projectsV2/list/projectV2List.module.scss b/client/src/features/projectsV2/list/projectV2List.module.scss deleted file mode 100644 index 1bb37db9d..000000000 --- a/client/src/features/projectsV2/list/projectV2List.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.listProjectWidth { - min-width: 250px; -} diff --git a/client/src/features/projectsV2/new/GroupNew.tsx b/client/src/features/projectsV2/new/GroupNew.tsx index efac90ca5..c2a62e670 100644 --- a/client/src/features/projectsV2/new/GroupNew.tsx +++ b/client/src/features/projectsV2/new/GroupNew.tsx @@ -39,12 +39,10 @@ import WipBadge from "../shared/WipBadge"; function GroupNewHeader() { return ( - <> -
- Groups let you group together related projects and control who can - access them. {" "} -
- +

+ Groups let you group together related projects and control who can access + them. +

); } @@ -126,11 +124,7 @@ function GroupMetadataForm() { return ( <>

Describe the group

- +
Cancel
- +
diff --git a/client/src/features/projectsV2/new/ProjectV2FormSubmitGroup.tsx b/client/src/features/projectsV2/new/ProjectV2FormSubmitGroup.tsx index 9a56a5a05..55318a414 100644 --- a/client/src/features/projectsV2/new/ProjectV2FormSubmitGroup.tsx +++ b/client/src/features/projectsV2/new/ProjectV2FormSubmitGroup.tsx @@ -19,7 +19,6 @@ import cx from "classnames"; import { useCallback } from "react"; import { useDispatch } from "react-redux"; - import { Button } from "reactstrap"; import type { NewProjectV2State } from "./projectV2New.slice"; @@ -44,28 +43,32 @@ export default function ProjectFormSubmitGroup({
{currentStep === 0 && ( - )} {currentStep === 1 && ( - )} {currentStep === 2 && ( - )} - {currentStep === 3 && } + {currentStep === 3 && ( + + )}
); diff --git a/client/src/features/projectsV2/new/ProjectV2New.tsx b/client/src/features/projectsV2/new/ProjectV2New.tsx index 76c9225b5..f6f2aff9a 100644 --- a/client/src/features/projectsV2/new/ProjectV2New.tsx +++ b/client/src/features/projectsV2/new/ProjectV2New.tsx @@ -66,10 +66,10 @@ function ProjectV2NewHeader({ }: Pick) { return ( <> -
+

V2 Projects let you group together related resources and control who can - access them. {" "} -

+ access them. +

{currentStep === 0 && } {currentStep === 1 && } {currentStep === 2 && } @@ -81,7 +81,7 @@ function ProjectV2NewHeader({ function ProjectV2NewMetadataStepHeader() { return ( <> - Describe your project +

Describe your project

Provide some information to explain what your project is about.

); @@ -90,7 +90,7 @@ function ProjectV2NewMetadataStepHeader() { function ProjectV2NewProjectCreatingStepHeader() { return ( <> - Review and create +

Review and create

Review what has been entered and, if ready, create the project.

); @@ -99,7 +99,7 @@ function ProjectV2NewProjectCreatingStepHeader() { function ProjectV2NewRepositoryStepHeader() { return ( <> - Associate some repositories (optional) +

Associate some repositories (optional)

You can associate one or more repositories with the project now if you want. This can also be done later at any time. @@ -140,24 +140,18 @@ function ProjectV2NewReviewCreateStep({ const errorAlert = result.error && ; return ( -

+ {errorAlert}

Review

-
+
-
{newProject.name}
-
-
+

{newProject.name}

-
{newProject.namespace}
-
-
+

{newProject.namespace}

-
{newProject.slug}
-
-
+

{newProject.slug}

-
{newProject.visibility}
+

{newProject.visibility}

diff --git a/client/src/features/projectsV2/new/ProjectV2NewForm.tsx b/client/src/features/projectsV2/new/ProjectV2NewForm.tsx index 4957f440e..00ed58850 100644 --- a/client/src/features/projectsV2/new/ProjectV2NewForm.tsx +++ b/client/src/features/projectsV2/new/ProjectV2NewForm.tsx @@ -50,7 +50,7 @@ export default function ProjectV2NewForm({ currentStep, }: ProjectV2NewFormProps) { return ( -
+
{currentStep === 0 && ( )} @@ -85,12 +85,8 @@ function ProjectV2NewAccessStepForm({ currentStep }: ProjectV2NewFormProps) { ); return ( <> -

Define access

- +

Define access

+ -

Describe the project

- +

Describe the project

+ -

Add Repositories

- -
+

Add Repositories

+ +
+ {fields.length === 0 && ( +

No repositories added yet.

+ )} {fields.map((f, i) => { return (
@@ -223,8 +214,12 @@ function ProjectV2NewRepositoryStepForm({
); })} -
diff --git a/client/src/features/projectsV2/notFound/GroupNotFound.tsx b/client/src/features/projectsV2/notFound/GroupNotFound.tsx index 840e279a9..e273ab6cf 100644 --- a/client/src/features/projectsV2/notFound/GroupNotFound.tsx +++ b/client/src/features/projectsV2/notFound/GroupNotFound.tsx @@ -50,11 +50,11 @@ export default function GroupNotFound({ error }: GroupNotFoundProps) { ); return ( - - + +

Error 404

-

Group not found

+

Group not found

{notFoundText}

It is possible that the group has been deleted by its owner.

@@ -62,17 +62,17 @@ export default function GroupNotFound({ error }: GroupNotFoundProps) {
- + Return to the groups list
{error && ( <> -
-
diff --git a/client/src/features/projectsV2/notFound/ProjectNotFound.tsx b/client/src/features/projectsV2/notFound/ProjectNotFound.tsx index fb6327498..cd45c247a 100644 --- a/client/src/features/projectsV2/notFound/ProjectNotFound.tsx +++ b/client/src/features/projectsV2/notFound/ProjectNotFound.tsx @@ -68,11 +68,11 @@ export default function ProjectNotFound({ error }: ProjectNotFoundProps) { ); return ( - - + +

Error 404

-

Project not found

+

Project not found

{notFoundText}

@@ -83,17 +83,17 @@ export default function ProjectNotFound({ error }: ProjectNotFoundProps) {

- + Return to the projects list
{error && ( <> -
-
diff --git a/client/src/features/projectsV2/shared/BackToV1Button.tsx b/client/src/features/projectsV2/shared/BackToV1Button.tsx index 1e1fa5fa7..19c54ebfb 100644 --- a/client/src/features/projectsV2/shared/BackToV1Button.tsx +++ b/client/src/features/projectsV2/shared/BackToV1Button.tsx @@ -34,7 +34,6 @@ export default function BackToV1Button({ "btn", "btn-sm", outline ? `btn-outline-${color}` : `btn-${color}`, - "ms-2", "text-decoration-none" )} to="/" diff --git a/client/src/features/projectsV2/shared/WipBadge.tsx b/client/src/features/projectsV2/shared/WipBadge.tsx index d5caa47d8..99fcbc38e 100644 --- a/client/src/features/projectsV2/shared/WipBadge.tsx +++ b/client/src/features/projectsV2/shared/WipBadge.tsx @@ -21,11 +21,13 @@ import cx from "classnames"; import { Badge, UncontrolledTooltip } from "reactstrap"; interface WipBadeProps { + className?: string; children?: ReactNode; tooltip?: ReactNode; } export default function WipBadge({ + className, children = "Beta", tooltip = "Renku 2.0 is under active development and features may not work as expected.", }: WipBadeProps) { @@ -34,8 +36,8 @@ export default function WipBadge({ return ( <> {children} diff --git a/client/src/features/projectsV2/show/GroupSimple.tsx b/client/src/features/projectsV2/show/GroupSimple.tsx new file mode 100644 index 000000000..e32855ad3 --- /dev/null +++ b/client/src/features/projectsV2/show/GroupSimple.tsx @@ -0,0 +1,94 @@ +/*! + * 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 { Link, generatePath } from "react-router-dom-v5-compat"; + +import type { GroupSimple } from "./GroupSimple.types"; +import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants"; +import VisibilityIcon from "../../../components/entities/VisibilityIcon"; +import { TimeCaption } from "../../../components/TimeCaption"; + +interface GroupSimpleProps { + className?: string | string[]; + element: "card-body" | "list-item" | "plain"; + group: GroupSimple; +} +export default function GroupSimple({ + className, + element, + group, +}: GroupSimpleProps) { + const content = ( +
+
{group.name}
+

{group.slug}

+ {group.description && ( +

+ {group.description} +

+ )} +
+ + +
+
+ ); + + const elementClasses = + element === "card-body" + ? cx("card-body", "d-flex") + : element === "list-item" + ? cx("list-group-item", "list-group-item-action") + : ""; + + return ( + + {content} + + ); +} diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/ProjectInformationPage.tsx b/client/src/features/projectsV2/show/GroupSimple.types.tsx similarity index 69% rename from client/src/features/ProjectPageV2/ProjectPageContent/ProjectInformationPage.tsx rename to client/src/features/projectsV2/show/GroupSimple.types.tsx index 01ead85d2..70dfbda4e 100644 --- a/client/src/features/ProjectPageV2/ProjectPageContent/ProjectInformationPage.tsx +++ b/client/src/features/projectsV2/show/GroupSimple.types.tsx @@ -13,16 +13,14 @@ * 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. + * limitations under the License */ -import cx from "classnames"; -import ProjectInformation from "./ProjectInformation/ProjectInformation"; - -export default function ProjectInformationPage() { - return ( -
- -
- ); -} +export type GroupSimple = { + id: string; + name: string; + slug: string; + creation_date: string | Date; + created_by: string; + description?: string; +}; diff --git a/client/src/features/projectsV2/show/ProjectSimple.tsx b/client/src/features/projectsV2/show/ProjectSimple.tsx new file mode 100644 index 000000000..f5ef5889b --- /dev/null +++ b/client/src/features/projectsV2/show/ProjectSimple.tsx @@ -0,0 +1,100 @@ +/*! + * 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 { Link, generatePath } from "react-router-dom-v5-compat"; + +import { Project } from "../api/projectV2.api"; +import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants"; +import VisibilityIcon from "../../../components/entities/VisibilityIcon"; +import { TimeCaption } from "../../../components/TimeCaption"; + +interface ProjectSimpleProps { + className?: string | string[]; + element: "card-body" | "list-item" | "plain"; + project: Project; +} + +export default function ProjectSimple({ + className, + element, + project, +}: ProjectSimpleProps) { + const content = ( +
+
{project.name}
+

+ @{project.namespace}/{project.slug} +

+ + {project.description && ( +

+ {project.description} +

+ )} + +
+ + +
+
+ ); + + const elementClasses = + element === "card-body" + ? cx("card-body", "d-flex") + : element === "list-item" + ? cx("list-group-item", "list-group-item-action") + : ""; + + return ( + + {content} + + ); +} diff --git a/client/src/features/projectsV2/show/ProjectV2DescriptionAndRepositories.tsx b/client/src/features/projectsV2/show/ProjectV2DescriptionAndRepositories.tsx index 5a7343147..d64a57001 100644 --- a/client/src/features/projectsV2/show/ProjectV2DescriptionAndRepositories.tsx +++ b/client/src/features/projectsV2/show/ProjectV2DescriptionAndRepositories.tsx @@ -15,29 +15,32 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import cx from "classnames"; import { Label } from "reactstrap"; import type { Project } from "../api/projectV2.api"; function ProjectV2Description({ description }: Pick) { const desc = - description == null - ? "(no description)" - : description.length < 1 - ? "(no description)" - : description; - return
{desc}
; + description == null || description.length < 1 ? ( + (no description) + ) : ( + description + ); + return

{desc}

; } function ProjectV2Repositories({ repositories, }: Pick) { if (repositories == null || repositories.length < 1) - return
(no repositories)
; + return

(no repositories)

; return (
{repositories?.map((repo, i) => ( -
{repo}
+

+ {repo} +

))}
); diff --git a/client/src/features/projectsV2/show/groupEditForms.tsx b/client/src/features/projectsV2/show/groupEditForms.tsx index 99b595cae..5236bc4b2 100644 --- a/client/src/features/projectsV2/show/groupEditForms.tsx +++ b/client/src/features/projectsV2/show/groupEditForms.tsx @@ -18,20 +18,22 @@ import cx from "classnames"; import { useCallback, useEffect, useState } from "react"; -import { CheckLg, XLg } from "react-bootstrap-icons"; +import { CheckLg, PlusLg, XLg } from "react-bootstrap-icons"; import { useForm } from "react-hook-form"; import { Button, Form, Input, + ListGroup, + ListGroupItem, Modal, ModalBody, ModalFooter, - Table, + ModalHeader, } from "reactstrap"; +import { capitalize } from "lodash-es"; import { Loader } from "../../../components/Loader"; - import type { GroupMemberResponse, GroupPatchRequest, @@ -43,7 +45,6 @@ import { useGetGroupsByGroupSlugMembersQuery, usePatchGroupsByGroupSlugMutation, } from "../api/projectV2.enhanced-api"; - import AddGroupMemberModal from "../fields/AddGroupMemberModal"; import DescriptionFormField from "../fields/DescriptionFormField"; import NameFormField from "../fields/NameFormField"; @@ -84,11 +85,9 @@ function GroupDeleteConfirmation({ return ( + Are you absolutely sure? -

- Are you absolutely sure? -

-

+

Deleting a group{" "} will also delete all projects in the group, and deleted groups and projects cannot be restored. Please type{" "} @@ -100,21 +99,20 @@ function GroupDeleteConfirmation({ onChange={onChange} /> - - @@ -130,7 +128,7 @@ function GroupEditSubmitGroup({ isUpdating }: GroupEditSubmitGroupProps) { return (

-
@@ -184,17 +182,8 @@ export function GroupMetadataForm({ group }: GroupMetadataFormProps) { return (
-
- -
- + - +
+ + +
{updateGroupResult.isError &&
There was an error
}
@@ -248,35 +242,50 @@ export function GroupMembersForm({ group }: GroupMetadataFormProps) { ); return ( <> -
+

Project Members

-
- - - {data.map((d, i) => { - return ( - - - - - - ); - })} - -
{d.email ?? d.id}{d.role} + + {data.map((d, i) => { + return ( + +
+

+ {d.email ?? d.id} + {capitalize(d.role)} +

+
-
+
+
+ + ); + })} + - - + + - + - +
+
- Renku 2.0 (beta) + Renku v2 (beta) 2.0 Beta @@ -217,21 +183,21 @@ export default function NavbarV2() { - +
); } diff --git a/client/src/features/rootV2/RootV2.tsx b/client/src/features/rootV2/RootV2.tsx index b46af8764..67aa75644 100644 --- a/client/src/features/rootV2/RootV2.tsx +++ b/client/src/features/rootV2/RootV2.tsx @@ -28,7 +28,6 @@ import useAppSelector from "../../utils/customHooks/useAppSelector.hook"; import { setFlag } from "../../utils/feature-flags/featureFlags.slice"; import LazyProjectPageV2Show from "../ProjectPageV2/LazyProjectPageV2Show"; -import LazyProjectInformation from "../ProjectPageV2/ProjectPageContent/LazyProjectInformation"; import LazyProjectPageOverview from "../ProjectPageV2/ProjectPageContent/LazyProjectPageOverview"; import LazyProjectPageSettings from "../ProjectPageV2/ProjectPageContent/LazyProjectPageSettings"; import LazyConnectedServicesPage from "../connectedServices/LazyConnectedServicesPage"; @@ -195,10 +194,6 @@ function ProjectsV2Routes() { }> } /> - } - /> } diff --git a/client/src/features/searchV2/SearchV2.tsx b/client/src/features/searchV2/SearchV2.tsx index f2829075c..6ac2d78e0 100644 --- a/client/src/features/searchV2/SearchV2.tsx +++ b/client/src/features/searchV2/SearchV2.tsx @@ -41,10 +41,10 @@ export default function SearchV2() { - + - + diff --git a/client/src/features/searchV2/components/SearchV2Bar.tsx b/client/src/features/searchV2/components/SearchV2Bar.tsx index be0f7ab54..ea17d13d6 100644 --- a/client/src/features/searchV2/components/SearchV2Bar.tsx +++ b/client/src/features/searchV2/components/SearchV2Bar.tsx @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License */ -import cx from "classnames"; import { useEffect, useRef } from "react"; import { useDispatch } from "react-redux"; import { Button, InputGroup } from "reactstrap"; @@ -54,7 +53,7 @@ export default function SearchV2Bar() { {previousSearchEntries} )} ); diff --git a/client/src/features/session/components/options/SessionClassOption.tsx b/client/src/features/session/components/options/SessionClassOption.tsx index 3c17087d4..da58c48e3 100644 --- a/client/src/features/session/components/options/SessionClassOption.tsx +++ b/client/src/features/session/components/options/SessionClassOption.tsx @@ -455,7 +455,6 @@ interface SessionClassSelectorProps { onChange?: (newValue: SingleValue) => void; disabled?: boolean; } - export const SessionClassSelector = ({ id, resourcePools, @@ -596,6 +595,121 @@ const selectComponents: SelectComponentsConfig< }, }; +export const SessionClassSelectorV2 = ({ + id, + resourcePools, + currentSessionClass, + defaultSessionClass, + onChange, + disabled, +}: SessionClassSelectorProps) => { + const { data: nbVersion } = useGetNotebooksVersionQuery(); + const options = useMemo( + () => + makeGroupedOptions( + resourcePools, + nbVersion?.defaultCullingThresholds?.registered.idle + ), + [resourcePools, nbVersion] + ); + + return ( +
+