feat: add a search page for groups

client/src/components/PageNav.tsx

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 import cx from "classnames";
-import { Eye, Sliders } from "react-bootstrap-icons";
+import { Eye, Search, Sliders } from "react-bootstrap-icons";
 import { Nav, NavItem } from "reactstrap";
 import RenkuNavLinkV2 from "./RenkuNavLinkV2";
 
 export interface PageNavOptions {
   overviewUrl: string;
+  searchUrl: string;
   settingsUrl: string;
 }
 export default function PageNav({ options }: { options: PageNavOptions }) {
@@ -33,18 +34,29 @@ export default function PageNav({ options }: { options: PageNavOptions }) {
             end
             to={options.overviewUrl}
             title="Overview"
-            data-cy="nav-link-overview"
+            data-cy="group-overview-link"
           >
             <Eye className={cx("bi", "me-1")} />
             Overview
           </RenkuNavLinkV2>
         </NavItem>
+        <NavItem>
+          <RenkuNavLinkV2
+            end
+            to={options.searchUrl}
+            title="Search"
+            data-cy="group-search-link"
+          >
+            <Search className={cx("bi", "me-1")} />
+            Search
+          </RenkuNavLinkV2>
+        </NavItem>
         <NavItem>
           <RenkuNavLinkV2
             end
             to={options.settingsUrl}
             title="Settings"
-            data-cy="nav-link-settings"
+            data-cy="group-settings-link"
           >
             <Sliders className={cx("bi", "me-1")} />
             Settings

client/src/components/keywords/KeywordBadge.tsx

@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2025 - 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 RenkuBadge from "../renkuBadge/RenkuBadge";
+import { XCircle } from "react-bootstrap-icons";
+
+interface KeywordBadgeProps {
+  children?: React.ReactNode;
+  className?: string;
+  "data-cy"?: string;
+  highlighted?: boolean;
+  removable?: boolean;
+  removeHandler?: () => void;
+}
+
+export default function KeywordBadge({
+  children,
+  className,
+  "data-cy": dataCy = "keyword",
+  highlighted,
+  removable = true,
+  removeHandler,
+}: KeywordBadgeProps) {
+  const remove =
+    removable && removeHandler ? (
+      <XCircle
+        aria-label="Remove keyword"
+        className={cx("cursor-pointer")}
+        data-cy={`${dataCy}-remove`}
+        onClick={removeHandler}
+      />
+    ) : null;
+
+  return (
+    <RenkuBadge
+      className={cx(
+        "d-flex",
+        "fw-semibold",
+        "gap-1",
+        highlighted ? "bg-success-subtle" : "",
+        className
+      )}
+      data-cy={dataCy}
+    >
+      {children}
+      {remove}
+    </RenkuBadge>
+  );
+}

client/src/components/keywords/KeywordContainer.tsx

@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2025 - 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";
+
+interface KeywordContainerProps {
+  children?: React.ReactNode;
+  className?: string;
+  "data-cy"?: string;
+}
+
+export default function KeywordContainer({
+  children,
+  className,
+  "data-cy": dataCy,
+}: KeywordContainerProps) {
+  return (
+    <div
+      className={cx(
+        "align-items-center",
+        "d-flex",
+        "flex-wrap",
+        "fs-5",
+        "gap-1",
+        className
+      )}
+      data-cy={dataCy}
+    >
+      {children}
+    </div>
+  );
+}

client/src/components/renkuBadge/RenkuBadge.tsx

@@ -0,0 +1,59 @@
+/*!
+ * Copyright 2025 - 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";
+
+interface RenkuBadgeProps {
+  children?: React.ReactNode;
+  className?: string;
+  color?: "success" | "danger" | "warning" | "light";
+  "data-cy"?: string;
+  pills?: boolean;
+}
+
+export default function RenkuBadge({
+  children,
+  className,
+  color = "light",
+  "data-cy": dataCy,
+  pills = false,
+}: RenkuBadgeProps) {
+  const colorClasses =
+    color === "success"
+      ? ["border-success", "bg-success-subtle", "text-success-emphasis"]
+      : color === "danger"
+      ? ["border-danger", "bg-danger-subtle", "text-danger-emphasis"]
+      : color === "warning"
+      ? ["border-warning", "bg-warning-subtle", "text-warning-emphasis"]
+      : ["border-dark-subtle", "bg-light", "text-dark-emphasis"];
+
+  const baseClasses = [
+    "border",
+    "badge",
+    pills ? "rounded-pill" : "",
+    ...colorClasses,
+  ];
+
+  const finalClasses = className ? cx(className, baseClasses) : cx(baseClasses);
+
+  return (
+    <div className={finalClasses} data-cy={dataCy}>
+      {children}
+    </div>
+  );
+}

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

@@ -30,28 +30,28 @@ import {
 } from "react-bootstrap-icons";
 import { Link, generatePath } from "react-router";
 import { Badge, Card, CardBody, CardHeader } from "reactstrap";
-
+import KeywordBadge from "~/components/keywords/KeywordBadge";
+import KeywordContainer from "~/components/keywords/KeywordContainer";
 import { Loader } from "../../../../components/Loader";
 import { TimeCaption } from "../../../../components/TimeCaption";
 import { UnderlineArrowLink } from "../../../../components/buttons/Button";
 import { ABSOLUTE_ROUTES } from "../../../../routing/routes.constants";
 import projectPreviewImg from "../../../../styles/assets/projectImagePreview.svg";
 import type {
+  Project,
   ProjectMemberListResponse,
   ProjectMemberResponse,
 } from "../../../projectsV2/api/projectV2.api";
 import {
   useGetNamespacesByNamespaceSlugQuery,
-  useGetProjectsByProjectIdQuery,
   useGetProjectsByProjectIdMembersQuery,
+  useGetProjectsByProjectIdQuery,
 } from "../../../projectsV2/api/projectV2.enhanced-api";
-import type { Project } from "../../../projectsV2/api/projectV2.api";
 import { useProject } from "../../ProjectPageContainer/ProjectPageContainer";
 import { getMemberNameToDisplay, toSortedMembers } from "../../utils/roleUtils";
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
-
-import ProjectInformationButton from "./ProjectInformationButton";
 import styles from "./ProjectInformation.module.scss";
+import ProjectInformationButton from "./ProjectInformationButton";
 
 const MAX_MEMBERS_DISPLAYED = 5;
 
@@ -164,6 +164,12 @@ export default function ProjectInformation({
           }),
     [namespace?.namespace_kind, project.namespace]
   );
+  const keywordsSorted = useMemo(() => {
+    if (!project.keywords) return [];
+    return project.keywords
+      .map((keyword) => keyword.trim())
+      .sort((a, b) => a.localeCompare(b));
+  }, [project.keywords]);
 
   const information = (
     <div className={cx("d-flex", "flex-column", "gap-3")}>
@@ -208,11 +214,11 @@ export default function ProjectInformation({
           </>
         }
       >
-        {project.keywords?.map((keyword, index) => (
-          <p key={`keyword-${index}`} className="mb-0">
-            #{keyword}
-          </p>
-        ))}
+        <KeywordContainer className="mt-1">
+          {keywordsSorted.map((keyword, index) => (
+            <KeywordBadge key={`keyword-${index}`}>{keyword}</KeywordBadge>
+          ))}
+        </KeywordContainer>
       </ProjectInformationBox>
       <ProjectCopyTemplateInformationBox project={project} />
     </div>