feat: allow adding keyword to data connectors #3719

lorenzo-cavazzi · 2025-06-05T15:17:56Z

This PR implements the following:

New design for keywords, based on a variation of Bootstrap badges.
Update the keywords section in the project settings.
Add/change keywords when creating/editing data connectors.

Keywords -- project

Keywords -- project settings

Keywords -- data connectors edit/creation

/deploy renku=release-2.2.0

RenkuBot · 2025-06-05T15:18:41Z

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

leafty

partial review, will go look at the keywords input soon

leafty · 2025-06-19T11:21:13Z

client/src/components/keywords/KeywordBadge.tsx

+import cx from "classnames";
+import RenkuBadge from "../renkuBadge/RenkuBadge";
+import { XCircle } from "react-bootstrap-icons";


nitpick: import order (use "organize imports" in vscode)

leafty · 2025-06-19T11:23:29Z

client/src/components/keywords/KeywordBadge.tsx

+  className?: string;
+  "data-cy"?: string;
+  highlighted?: boolean;
+  removable?: boolean;


Why have this prop? Just keep the removeHandler prop.

In case we have places where we switch between view/edit mode. In fact that's not a pattern we use anymore, I'll remove it 👍

leafty · 2025-06-19T11:25:50Z

client/src/components/keywords/KeywordBadge.tsx

+  "data-cy"?: string;
+  highlighted?: boolean;
+  removable?: boolean;
+  removeHandler?: () => void;


Nitpick: I like the way bootstrap has named the event handlers:

Suggested change

removeHandler?: () => void;

remove?: () => void;

This is similar to the toggle function passed for <ModalHeader> and other bootstrap components.

leafty · 2025-06-19T11:27:31Z

client/src/components/keywords/KeywordBadge.tsx

+}: KeywordBadgeProps) {
+  const remove =
+    removable && removeHandler ? (
+      <XCircle


Use a real button here, otherwise this action is not accessible.

See: https://github.com/SwissDataScienceCenter/renku-ui/wiki/Develop#r008-interactive-handlers-can-only-be-used-on-interactive-html-tags

leafty · 2025-06-19T11:28:09Z

client/src/components/keywords/KeywordBadge.tsx

+        "d-flex",
+        "fw-semibold",
+        "gap-1",
+        highlighted ? "bg-success-subtle" : "",


Suggested change

highlighted ? "bg-success-subtle" : "",

highlighted && "bg-success-subtle",

leafty · 2025-06-19T11:30:34Z

client/src/components/renkuBadge/RenkuBadge.tsx

+  const baseClasses = [
+    "border",
+    "badge",
+    pills ? "rounded-pill" : "",


Suggested change

pills ? "rounded-pill" : "",

pills && "rounded-pill",

leafty · 2025-06-19T11:31:09Z

client/src/components/renkuBadge/RenkuBadge.tsx

+    ...colorClasses,
+  ];
+
+  const finalClasses = className ? cx(className, baseClasses) : cx(baseClasses);


Suggested change

const finalClasses = className ? cx(className, baseClasses) : cx(baseClasses);

const finalClasses = cx(className, baseClasses);

cx will do this for you.

leafty · 2025-06-19T11:33:43Z

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

-            #{keyword}
-          </p>
-        ))}
+        <KeywordContainer className="mt-1">


This should not be rendered without keywords, the mt-1 changes the bottom margin.

leafty · 2025-06-19T11:33:59Z

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

+import cx from "classnames";
+import { Controller } from "react-hook-form";
+import { Button, FormText, Label } from "reactstrap";
+import KeywordContainer from "~/components/keywords/KeywordContainer";
+import KeywordBadge from "~/components/keywords/KeywordBadge";
+import { PlusLg } from "react-bootstrap-icons";
+import type {
+  FieldErrors,
+  UseFormGetValues,
+  UseFormSetValue,
+  Control,
+} from "react-hook-form";
+import type { ProjectV2MetadataWithKeyword } from "../../settings/projectSettings.types";


import order

leafty · 2025-06-19T11:37:58Z

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

+      const editedData = {
+        ...data,
+      };
+      delete editedData.keyword;


Suggested change

const editedData = {

...data,

};

delete editedData.keyword;

const { keyword, ...editedData } = data;

leafty

Review on the new keywords input:

leafty · 2025-06-19T12:05:24Z

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

+
+interface ProjectKeywordsFormFieldProps {
+  control: Control<Required<ProjectV2MetadataWithKeyword>>;
+  errors: FieldErrors<Required<ProjectV2MetadataWithKeyword>>;


No need to pass errors.

Suggested change

errors: FieldErrors<Required<ProjectV2MetadataWithKeyword>>;

leafty · 2025-06-19T12:06:03Z

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

+  control: Control<Required<ProjectV2MetadataWithKeyword>>;
+  errors: FieldErrors<Required<ProjectV2MetadataWithKeyword>>;
+  getValues: UseFormGetValues<Required<ProjectV2MetadataWithKeyword>>;
+  oldKeywords?: string[];


I think oldKeywords is not needed, see below.

leafty · 2025-06-19T12:06:25Z

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

+        <Controller
+          control={control}
+          name="keyword"
+          render={({ field }) => (


Suggested change

render={({ field }) => (

render={({ field, fieldState }) => (

leafty · 2025-06-19T12:07:04Z

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

+                placeholder="Add new keyword"
+                type="string"
+                {...field}
+                className={cx("form-control", errors.keyword && "is-invalid")}


The error state is found in fieldState:

Suggested change

className={cx("form-control", errors.keyword && "is-invalid")}

className={cx("form-control", fieldState.error && "is-invalid")}

Also, it doesn't seem that this input is validated, so maybe we can remove error styling here.

leafty · 2025-06-19T12:07:23Z

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

+                onChange={(e) => {
+                  field.onChange(e);
+                }}


Already set correctly from {...field}.

Suggested change

onChange={(e) => {

field.onChange(e);

}}

leafty · 2025-06-19T12:13:08Z

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

+                    const newValue = field.value.trim();
+                    const currentKeywords = getValues("keywords");
+                    if (!currentKeywords.includes(newValue)) {
+                      const newKeywords = [...currentKeywords, newValue];
+                      setValue("keywords", newKeywords);
+                    }
+                    setValue("keyword", "");


Avoid repeating this block: you can make a method you can call for both onClick here and onKeyDown above.

leafty · 2025-06-19T12:14:48Z

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

+          <>
+            {field.value && field.value.length > 0 && (
+              <KeywordContainer data-cy="project-settings-keywords">
+                {getValues("keywords")


Why not continue using field.value here?

Suggested change

{getValues("keywords")

{field.value

leafty · 2025-06-19T12:16:55Z

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

+                    <KeywordBadge
+                      data-cy="project-settings-keyword"
+                      key={index}
+                      highlighted={!oldKeywords?.includes(keyword)}


I think it should be equivalent to use formState (from the render function) here:

Suggested change

highlighted={!oldKeywords?.includes(keyword)}

highlighted={!(formState.defaultValues?.keywords ?? []).includes(keyword)}

leafty · 2025-06-19T12:17:14Z

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

+                      key={index}
+                      highlighted={!oldKeywords?.includes(keyword)}
+                      removeHandler={() => {
+                        const newKeywords = getValues("keywords").filter(


Suggested change

const newKeywords = getValues("keywords").filter(

const newKeywords = field.value.filter(

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

lorenzo-cavazzi · 2025-06-20T14:45:43Z

@leafty I addressed all the points, thank you for the review!

lorenzo-cavazzi requested a review from a team as a code owner June 5, 2025 15:17

lorenzo-cavazzi marked this pull request as draft June 5, 2025 15:18

lorenzo-cavazzi had a problem deploying to renku-ci-ui-3719 June 5, 2025 15:18 — with GitHub Actions Failure

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 10, 2025 07:27 — with GitHub Actions Inactive

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 12, 2025 12:47 — with GitHub Actions Inactive

lorenzo-cavazzi added 3 commits June 17, 2025 10:23

feat: allow adding keyword to data connectors

a735aa0

swap RenkuBadge pills option default

4f8cb64

update change keywords aspect

f7baba3

lorenzo-cavazzi force-pushed the lorenzo/keywords-data-connectors branch from 90591ca to f7baba3 Compare June 17, 2025 08:24

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 17, 2025 08:24 — with GitHub Actions Inactive

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 17, 2025 08:39 — with GitHub Actions Inactive

lorenzo-cavazzi added 5 commits June 17, 2025 11:40

allow removing kewords

abd3afd

add keword on Enter

ebcee02

update project kewords

2093907

add data-cy to data connectors kewords components

5da0d1b

move project keywords to a sparate component

c2882a4

lorenzo-cavazzi had a problem deploying to renku-ci-ui-3719 June 17, 2025 12:09 — with GitHub Actions Failure

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 17, 2025 12:16 — with GitHub Actions Inactive

lorenzo-cavazzi added the ShapeUp label Jun 17, 2025

lorenzo-cavazzi added 2 commits June 17, 2025 17:25

Merge branch 'main' into lorenzo/keywords-data-connectors

2df15fe

sort keywords and highlight new ones

b8af376

lorenzo-cavazzi had a problem deploying to renku-ci-ui-3719 June 17, 2025 15:25 — with GitHub Actions Failure

add tests for keywords

59a5312

lorenzo-cavazzi temporarily deployed to renku-ci-ui-3719 June 18, 2025 09:30 — with GitHub Actions Inactive

update Storybood with Renku badges -- previously Info badges

0f1f897

lorenzo-cavazzi deployed to renku-ci-ui-3719 June 18, 2025 09:56 — with GitHub Actions View deployment

lorenzo-cavazzi marked this pull request as ready for review June 18, 2025 11:09

leafty self-assigned this Jun 19, 2025

leafty reviewed Jun 19, 2025

View reviewed changes

changes from review

af67156

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

lorenzo-cavazzi requested a review from leafty June 20, 2025 14:45

lorenzo-cavazzi had a problem deploying to renku-ci-ui-3719 June 20, 2025 14:47 — with GitHub Actions Failure

	highlighted ? "bg-success-subtle" : "",
	highlighted && "bg-success-subtle",

	const finalClasses = className ? cx(className, baseClasses) : cx(baseClasses);
	const finalClasses = cx(className, baseClasses);

	render={({ field }) => (
	render={({ field, fieldState }) => (

	className={cx("form-control", errors.keyword && "is-invalid")}
	className={cx("form-control", fieldState.error && "is-invalid")}

	highlighted={!oldKeywords?.includes(keyword)}
	highlighted={!(formState.defaultValues?.keywords ?? []).includes(keyword)}

	const newKeywords = getValues("keywords").filter(
	const newKeywords = field.value.filter(

feat: allow adding keyword to data connectors #3719

Are you sure you want to change the base?

feat: allow adding keyword to data connectors #3719

Uh oh!

Conversation

lorenzo-cavazzi commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RenkuBot commented Jun 5, 2025

Uh oh!

leafty left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leafty left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lorenzo-cavazzi commented Jun 20, 2025

Uh oh!

Uh oh!

lorenzo-cavazzi commented Jun 5, 2025 •

edited

Loading