[ShapeUp] Renku V2 Project Page #3108

andre-code · 2024-04-22T08:01:13Z

This PR adds a new project page for Renku v2. It includes:

Project information overview (name, namespace, description, visibility, keywords)
Add session launcher from custom image or existing global environment
Sessions launcher overview
Launch, stop, modify, pause a session
Add data source (cloud storage only)
Data sources overview
Link existing code repository
Code repositories overview
Edit project information
New colors for inputs, buttons, alerts, and fonts

fix #3098

/deploy renku=release-0.52.x

RenkuBot · 2024-04-22T08:02:05Z

You can access the deployment of this PR at https://renku-ci-ui-3108.dev.renku.ch

Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>

Add project page header, menu and project info --------- Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>

…options to add/edit/delete session launcher and add/delete code repositories

…vironments available, and fix the copyright year for new components.

…. Remove status and date for code repositories

…-page-merge

Merge pull request #3133 from SwissDataScienceCenter/leafty/update-project-page-merge

leafty

This is mostly ready 👏 , some comments below.

The [design] items are non-blocking but need to be raised with design and fixed shortly.

leafty · 2024-05-17T14:11:13Z

client/.eslintrc.json

@@ -212,6 +213,7 @@
          "readme",
          "readonly",
          "Ravey",
+          "rcloud",


Suggested change

"rcloud",

leafty · 2024-05-17T14:12:05Z

client/src/components/buttons/Button.tsx

+import {
+  default as buttonStyles,
+  default as styles,
+} from "./Buttons.module.scss";


There is no reason to import this twice:

Suggested change

import {

default as buttonStyles,

default as styles,

} from "./Buttons.module.scss";

import styles from "./Buttons.module.scss";

leafty · 2024-05-17T14:12:41Z

client/src/components/buttons/Button.tsx

+  const classesNames = props.className?.length
+    ? props.className?.split(" ")
+    : [];


Please use cx() from classnames.

leafty · 2024-05-17T14:13:55Z

client/src/components/buttons/Button.tsx

  const options = props.children ? (
    <>
      <DropdownToggle
        data-cy="more-menu"
-        className={`${props.className} ${classes}`}
+        className={cx(...classesNames, classes, "rounded-end-pill")}


Suggested change

className={cx(...classesNames, classes, "rounded-end-pill")}

className={cx(props.classesName, classes, "rounded-end-pill")}

leafty · 2024-05-17T14:14:42Z

client/src/components/buttons/Button.tsx

@@ -98,7 +111,7 @@ function ButtonWithMenu(props: ButtonWithMenuProps) {
  return (
    <ButtonDropdown
      id={props.id}
-      className={`${props.className} btn-with-menu`}
+      className={cx("btn-with-menu", classesNames)}


Suggested change

className={cx("btn-with-menu", classesNames)}

className={cx(props.className, "btn-with-menu")}

leafty · 2024-05-17T14:48:24Z

client/src/styles/assets/env.svg

[design]: Should use viewbox of 32x32.

leafty · 2024-05-17T14:48:50Z

client/src/styles/assets/globalEnvironment.svg

[design]: Should use viewbox of 32x32.

leafty · 2024-05-21T07:21:53Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

+  const badge =
+    state === "running" && defaultImage ? (
+      <SessionBadge className="border border-warning bg-warning-subtle">
+        <ExclamationCircleFill className="text-warning" size={16} />


For all bootstrap icons, use class "bi" to align them with the surrounding text. Also, you can handle the margin here:

Suggested change

<ExclamationCircleFill className="text-warning" size={16} />

<ExclamationCircleFill className={cx("bi", "me-1", "text-warning")} size={16} />

leafty · 2024-05-21T07:22:17Z

client/src/features/sessionsV2/components/SessionStatus/SessionStatus.tsx

+    ) : state === "starting" ? (
+      <SessionBadge className="border border-warning bg-warning-subtle">
+        <Loader size={16} className="text-warning" inline />
+        <span className="text-warning ml-2">Starting Session</span>


Note: class ml-2 does not exist. Use ms-1, me-1, etc.

leafty · 2024-05-21T07:23:50Z

client/src/styles/icons/sessions.svg

[design] same viewbox comment here

andre-code · 2024-05-21T10:25:27Z

Thanks, @leafty. I've included your code suggestions in the latest commit.

leafty

Should be good after this.

leafty · 2024-05-21T11:41:49Z

client/src/components/buttons/Button.tsx

@@ -80,7 +86,7 @@ function ButtonWithMenu(props: ButtonWithMenuProps) {
    <>
      <DropdownToggle
        data-cy="more-menu"
-        className={`${props.className} ${classes}`}
+        className={cx(props.className || "", classes, "rounded-end-pill")}


why have || ""?

Suggested change

className={cx(props.className || "", classes, "rounded-end-pill")}

className={cx(props.className, classes, "rounded-end-pill")}

It was a misunderstanding; the cx function can handle undefined values.

leafty · 2024-05-21T11:42:52Z

client/src/components/buttons/Button.tsx

+    <>
+      <span ref={ref} className={buttonStyles.LinkUnderline}>
+        <Link className="text-decoration-none" to={to}>
+          {text} <ArrowRight />


This probably looks better:

Suggested change

{text} <ArrowRight />

{text}

<ArrowRight className={cx("bi", "ms-1")} />

leafty

LGTM 🚀 👏

RenkuBot · 2024-05-22T09:39:35Z

Tearing down the temporary RenkuLab deplyoment for this PR.

andre-code temporarily deployed to renku-ci-ui-3108 April 22, 2024 08:01 — with GitHub Actions Inactive

andre-code force-pushed the build/project-page-2.0 branch from 1f74a2a to 4580ba2 Compare April 26, 2024 07:11

andre-code temporarily deployed to renku-ci-ui-3108 April 26, 2024 07:11 — with GitHub Actions Inactive

andre-code force-pushed the build/project-page-2.0 branch from a2871ef to 3b6cae9 Compare May 3, 2024 09:52

andre-code had a problem deploying to renku-ci-ui-3108 May 3, 2024 09:52 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 3, 2024 11:14 — with GitHub Actions Failure

andre-code and others added 7 commits May 13, 2024 10:37

feat: conditional style loading for v1/v2 (#3094)

1d20f9e

Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>

feat(client): Add structure project page (#3104)

211193a

Add project page header, menu and project info --------- Co-authored-by: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>

add overview page with sessions view and code repositories view, add …

10176c4

…options to add/edit/delete session launcher and add/delete code repositories

fix rebase errors

24abf39

Update environment list styles, include an alert when there are no en…

dbf818b

…vironments available, and fix the copyright year for new components.

fix styles for alerts, dropdowns menu, badge. Remove rk custom colors…

00b572b

…. Remove status and date for code repositories

feat: add data source to project page v2

5bb8cd9

andre-code force-pushed the build/project-page-2.0 branch from 3b6cae9 to 5bb8cd9 Compare May 13, 2024 08:37

andre-code had a problem deploying to renku-ci-ui-3108 May 13, 2024 08:38 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 13, 2024 09:06 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 13, 2024 09:29 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 13, 2024 11:57 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 14, 2024 14:06 — with GitHub Actions Failure

andre-code and others added 5 commits May 17, 2024 08:48

feat: project page overview V2 (sessions and code repositories) (#3117)

a82852c

feat: project page overview V2 (data sources) (#3120)

b0201b4

feat: project page overview V2 (settings) (#3121)

0db571f

Merge remote-tracking branch 'origin/main' into leafty/update-project…

332c830

…-page-merge

Update build/project-page-2.0

ef844b5

Merge pull request #3133 from SwissDataScienceCenter/leafty/update-project-page-merge

andre-code had a problem deploying to renku-ci-ui-3108 May 17, 2024 09:11 — with GitHub Actions Failure

feat: project page overview V2 (keywords) (#3132)

672bcc1

andre-code had a problem deploying to renku-ci-ui-3108 May 17, 2024 11:48 — with GitHub Actions Failure

Merge branch 'main' into build/project-page-2.0

2e40dca

andre-code marked this pull request as ready for review May 17, 2024 12:24

andre-code requested a review from a team as a code owner May 17, 2024 12:24

andre-code had a problem deploying to renku-ci-ui-3108 May 17, 2024 12:24 — with GitHub Actions Failure

andre-code had a problem deploying to renku-ci-ui-3108 May 17, 2024 12:51 — with GitHub Actions Error

andre-code temporarily deployed to renku-ci-ui-3108 May 17, 2024 13:19 — with GitHub Actions Inactive

andre-code temporarily deployed to renku-ci-ui-3108 May 17, 2024 14:10 — with GitHub Actions Inactive

andre-code self-assigned this May 17, 2024

andre-code requested a review from leafty May 17, 2024 14:26

leafty requested changes May 21, 2024

View reviewed changes

lorenzo-cavazzi added the ShapeUp label May 21, 2024

leafty mentioned this pull request May 21, 2024

feat: update repository box with provider metadata #3135

Merged

apply code suggestions

1149094

andre-code had a problem deploying to renku-ci-ui-3108 May 21, 2024 10:24 — with GitHub Actions Failure

andre-code requested a review from leafty May 21, 2024 10:25

leafty reviewed May 21, 2024

View reviewed changes

apply code suggestion

42ab045

andre-code had a problem deploying to renku-ci-ui-3108 May 21, 2024 12:33 — with GitHub Actions Failure

andre-code requested a review from leafty May 21, 2024 12:34

leafty previously approved these changes May 21, 2024

View reviewed changes

andre-code temporarily deployed to renku-ci-ui-3108 May 21, 2024 15:06 — with GitHub Actions Inactive

feat: update repository box with provider metadata (#3135)

9d4e7f4

andre-code dismissed leafty’s stale review via 9d4e7f4 May 21, 2024 19:21

andre-code temporarily deployed to renku-ci-ui-3108 May 21, 2024 19:21 — with GitHub Actions Inactive

leafty approved these changes May 22, 2024

View reviewed changes

Merge branch 'main' into build/project-page-2.0

f7eb9ac

andre-code deployed to renku-ci-ui-3108 May 22, 2024 08:46 — with GitHub Actions View deployment

andre-code merged commit 1e67198 into main May 22, 2024
17 checks passed

andre-code deleted the build/project-page-2.0 branch May 22, 2024 09:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ShapeUp] Renku V2 Project Page #3108

[ShapeUp] Renku V2 Project Page #3108

andre-code commented Apr 22, 2024 •

edited

RenkuBot commented Apr 22, 2024

leafty left a comment

leafty May 17, 2024

leafty May 17, 2024

leafty May 17, 2024

leafty May 17, 2024

leafty May 17, 2024

leafty May 17, 2024

leafty May 17, 2024

leafty May 21, 2024

leafty May 21, 2024

leafty May 21, 2024

andre-code commented May 21, 2024

leafty left a comment

leafty May 21, 2024

andre-code May 21, 2024

leafty May 21, 2024

leafty left a comment

RenkuBot commented May 22, 2024

	className={cx(...classesNames, classes, "rounded-end-pill")}
	className={cx(props.classesName, classes, "rounded-end-pill")}

	className={cx("btn-with-menu", classesNames)}
	className={cx(props.className, "btn-with-menu")}

	<ExclamationCircleFill className="text-warning" size={16} />
	<ExclamationCircleFill className={cx("bi", "me-1", "text-warning")} size={16} />

	className={cx(props.className \|\| "", classes, "rounded-end-pill")}
	className={cx(props.className, classes, "rounded-end-pill")}

	{text} <ArrowRight />
	{text}
	<ArrowRight className={cx("bi", "ms-1")} />

[ShapeUp] Renku V2 Project Page #3108

[ShapeUp] Renku V2 Project Page #3108

Conversation

andre-code commented Apr 22, 2024 • edited

RenkuBot commented Apr 22, 2024

leafty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andre-code commented May 21, 2024

leafty left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leafty left a comment

Choose a reason for hiding this comment

RenkuBot commented May 22, 2024

andre-code commented Apr 22, 2024 •

edited