Merge branch 'main' into leafty/fix-3403

SwissDataScienceCenter · Dec 18, 2024 · d4aaba9 · d4aaba9
2 parents 02e07d6 + 99e05e2
commit d4aaba9
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 182 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "renku-ui",
-  "version": "3.44.0",
+  "version": "3.44.1",
   "private": true,
   "scripts": {
     "start": "vite --port 3000",

diff --git a/client/src/components/navbar/NavBarItems.tsx b/client/src/components/navbar/NavBarItems.tsx
@@ -312,7 +312,7 @@ export function RenkuToolbarItemUser({
   const userSecretsUrl = isV2 ? ABSOLUTE_ROUTES.v2.secrets : "/secrets";
 
   return (
-    <UncontrolledDropdown className="nav-item dropdown">
+    <UncontrolledDropdown className={cx("nav-item", "dropdown")}>
       <DropdownToggle
         nav
         className={cx("nav-link", "fs-5")}
@@ -330,14 +330,12 @@ export function RenkuToolbarItemUser({
         key="user-bar"
         aria-labelledby="user-menu"
       >
-        <DropdownItem className="p-0">
-          <ExternalLink
-            url={`${gatewayURL}/auth/user-profile`}
-            title="Account"
-            className="dropdown-item"
-            role="link"
-          />
-        </DropdownItem>
+        <ExternalLink
+          url={`${gatewayURL}/auth/user-profile`}
+          title="Account"
+          className="dropdown-item"
+          role="link"
+        />
 
         <Link to={userSecretsUrl} className="dropdown-item">
           User Secrets

diff --git a/client/src/features/groupsV2/new/CreateGroupButton.tsx b/client/src/features/groupsV2/new/CreateGroupButton.tsx
@@ -20,7 +20,7 @@ import { useCallback } from "react";
 import { Button } from "reactstrap";
 
 import useLocationHash from "../../../utils/customHooks/useLocationHash.hook";
-import { groupCreationHash } from "./createGroup.constants";
+import { GROUP_CREATION_HASH } from "./createGroup.constants";
 
 export interface CreateGroupButtonProps {
   children?: React.ReactNode;
@@ -36,7 +36,7 @@ export default function CreateGroupButton({
 }: CreateGroupButtonProps) {
   const [, setHash] = useLocationHash();
   const openModal = useCallback(() => {
-    setHash(groupCreationHash);
+    setHash(GROUP_CREATION_HASH);
   }, [setHash]);
 
   return (

diff --git a/client/src/features/groupsV2/new/GroupNew.tsx b/client/src/features/groupsV2/new/GroupNew.tsx
@@ -43,17 +43,17 @@ import DescriptionFormField from "../../projectsV2/fields/DescriptionFormField";
 import NameFormField from "../../projectsV2/fields/NameFormField";
 import SlugPreviewFormField from "../../projectsV2/fields/SlugPreviewFormField.tsx";
 import { useGetUserQuery } from "../../usersV2/api/users.api";
-import { groupCreationHash } from "./createGroup.constants";
+import { GROUP_CREATION_HASH } from "./createGroup.constants";
 
 export default function GroupNew() {
   const { data: userInfo, isLoading: userLoading } = useGetUserQuery();
 
   const [hash, setHash] = useLocationHash();
-  const showGroupCreationModal = hash === groupCreationHash;
+  const showGroupCreationModal = hash === GROUP_CREATION_HASH;
   const toggleModal = useCallback(() => {
     setHash((prev) => {
-      const isOpen = prev === groupCreationHash;
-      return isOpen ? "" : groupCreationHash;
+      const isOpen = prev === GROUP_CREATION_HASH;
+      return isOpen ? "" : GROUP_CREATION_HASH;
     });
   }, [setHash]);
 

diff --git a/client/src/features/groupsV2/new/createGroup.constants.ts b/client/src/features/groupsV2/new/createGroup.constants.ts
@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export const groupCreationHash = "create-group";
+export const GROUP_CREATION_HASH = "create-group";
diff --git a/client/src/features/projectsV2/LazyGroupNew.tsx b/client/src/features/projectsV2/LazyGroupNew.tsx
diff --git a/client/src/features/projectsV2/LazyProjectV2New.tsx b/client/src/features/projectsV2/LazyProjectV2New.tsx
diff --git a/client/src/features/projectsV2/new/CreateProjectV2Button.tsx b/client/src/features/projectsV2/new/CreateProjectV2Button.tsx
@@ -20,7 +20,7 @@ import { useCallback } from "react";
 import { Button } from "reactstrap";
 
 import useLocationHash from "../../../utils/customHooks/useLocationHash.hook";
-import { projectCreationHash } from "./createProjectV2.constants";
+import { PROJECT_CREATION_HASH } from "./createProjectV2.constants";
 
 export interface CreateProjectV2ButtonProps {
   children?: React.ReactNode;
@@ -36,7 +36,7 @@ export default function CreateProjectV2Button({
 }: CreateProjectV2ButtonProps) {
   const [, setHash] = useLocationHash();
   const openModal = useCallback(() => {
-    setHash(projectCreationHash);
+    setHash(PROJECT_CREATION_HASH);
   }, [setHash]);
 
   return (

diff --git a/client/src/features/projectsV2/new/ProjectV2New.tsx b/client/src/features/projectsV2/new/ProjectV2New.tsx
@@ -46,17 +46,17 @@ import ProjectNamespaceFormField from "../fields/ProjectNamespaceFormField";
 import SlugPreviewFormField from "../fields/SlugPreviewFormField.tsx";
 import ProjectVisibilityFormField from "../fields/ProjectVisibilityFormField";
 import { NewProjectForm } from "./projectV2New.types";
-import { projectCreationHash } from "./createProjectV2.constants";
+import { PROJECT_CREATION_HASH } from "./createProjectV2.constants";
 
 export default function ProjectV2New() {
   const { data: userInfo, isLoading: userLoading } = useGetUserQuery();
 
   const [hash, setHash] = useLocationHash();
-  const showProjectCreationModal = hash === projectCreationHash;
+  const showProjectCreationModal = hash === PROJECT_CREATION_HASH;
   const toggleModal = useCallback(() => {
     setHash((prev) => {
-      const isOpen = prev === projectCreationHash;
-      return isOpen ? "" : projectCreationHash;
+      const isOpen = prev === PROJECT_CREATION_HASH;
+      return isOpen ? "" : PROJECT_CREATION_HASH;
     });
   }, [setHash]);
 

diff --git a/client/src/features/projectsV2/new/createProjectV2.constants.ts b/client/src/features/projectsV2/new/createProjectV2.constants.ts
@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export const projectCreationHash = "create-project";
+export const PROJECT_CREATION_HASH = "create-project";
diff --git a/client/src/features/rootV2/NavbarV2.tsx b/client/src/features/rootV2/NavbarV2.tsx
@@ -24,7 +24,6 @@ import {
   QuestionCircle,
   Search,
 } from "react-bootstrap-icons";
-import { useLocation } from "react-router";
 import { Link, useMatch } from "react-router-dom-v5-compat";
 import {
   Collapse,
@@ -43,9 +42,10 @@ import { RenkuToolbarItemUser } from "../../components/navbar/NavBarItems";
 import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
 import { Links } from "../../utils/constants/Docs";
 import AppContext from "../../utils/context/appContext";
-import CreateGroupButton from "../groupsV2/new/CreateGroupButton";
+import useLocationHash from "../../utils/customHooks/useLocationHash.hook";
+import { GROUP_CREATION_HASH } from "../groupsV2/new/createGroup.constants";
 import StatusBanner from "../platform/components/StatusBanner";
-import CreateProjectV2Button from "../projectsV2/new/CreateProjectV2Button";
+import { PROJECT_CREATION_HASH } from "../projectsV2/new/createProjectV2.constants";
 import BackToV1Button from "../projectsV2/shared/BackToV1Button";
 import WipBadge from "../projectsV2/shared/WipBadge";
 
@@ -55,58 +55,25 @@ function NavbarItemPlus() {
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = useCallback(() => setIsOpen((isOpen) => !isOpen), []);
 
-  // ? Temporary workaround for the search page
-  const location = useLocation();
-  const searchPage = location.pathname.startsWith(ABSOLUTE_ROUTES.v2.search);
+  const [, setHash] = useLocationHash();
+  const toggleNewProject = useCallback(() => {
+    setHash(PROJECT_CREATION_HASH);
+  }, [setHash]);
+  const toggleNewGroup = useCallback(() => {
+    setHash(GROUP_CREATION_HASH);
+  }, [setHash]);
 
   return (
     <Dropdown isOpen={isOpen} toggle={toggleOpen} className="nav-item">
       <DropdownToggle nav className={cx("nav-link", "fs-5")} id="plus-dropdown">
         <PlusCircle className="bi" id="createPlus" />
       </DropdownToggle>
-      <DropdownMenu
-        aria-labelledby="plus-menu"
-        className={cx("plus-menu", "btn-with-menu-options", "z-3")}
-        end
-      >
-        <DropdownItem className="p-0">
-          {searchPage ? (
-            <Link
-              className="dropdown-item"
-              data-cy="navbar-project-new"
-              to={ABSOLUTE_ROUTES.v2.projects.new}
-            >
-              Project
-            </Link>
-          ) : (
-            <CreateProjectV2Button
-              className="dropdown-item"
-              dataCy="navbar-project-new"
-              color="link"
-            >
-              Project
-            </CreateProjectV2Button>
-          )}
+      <DropdownMenu end>
+        <DropdownItem data-cy="navbar-project-new" onClick={toggleNewProject}>
+          Project
         </DropdownItem>
-
-        <DropdownItem className="p-0">
-          {searchPage ? (
-            <Link
-              className="dropdown-item"
-              data-cy="navbar-group-new"
-              to={ABSOLUTE_ROUTES.v2.groups.new}
-            >
-              Group
-            </Link>
-          ) : (
-            <CreateGroupButton
-              className="dropdown-item"
-              dataCy="navbar-group-new"
-              color="link"
-            >
-              Group
-            </CreateGroupButton>
-          )}
+        <DropdownItem data-cy="navbar-group-new" onClick={toggleNewGroup}>
+          Group
         </DropdownItem>
       </DropdownMenu>
     </Dropdown>
@@ -127,42 +94,30 @@ function NavbarItemHelp() {
       <DropdownToggle nav className={cx("nav-link", "fs-5")}>
         <QuestionCircle className="bi" id="helpDropdownToggle" />
       </DropdownToggle>
-      <DropdownMenu
-        className={cx("help-menu", "btn-with-menu-options")}
-        key="help-bar"
-        aria-labelledby="help-menu"
-      >
-        <DropdownItem className="p-0">
-          <Link
-            data-cy="help-link"
-            className="dropdown-item"
-            to={ABSOLUTE_ROUTES.v2.help.root}
-          >
-            Help
-          </Link>
-        </DropdownItem>
+      <DropdownMenu>
+        <Link
+          data-cy="help-link"
+          className="dropdown-item"
+          to={ABSOLUTE_ROUTES.v2.help.root}
+        >
+          Help
+        </Link>
         <DropdownItem divider />
-        <DropdownItem className="p-0">
-          <ExternalDocsLink
-            url={Links.DISCOURSE}
-            title="Forum"
-            className="dropdown-item"
-          />
-        </DropdownItem>
-        <DropdownItem className="p-0">
-          <ExternalDocsLink
-            url={Links.GITTER}
-            title="Gitter"
-            className="dropdown-item"
-          />
-        </DropdownItem>
-        <DropdownItem className="p-0">
-          <ExternalDocsLink
-            url={Links.GITHUB}
-            title="GitHub"
-            className="dropdown-item"
-          />
-        </DropdownItem>
+        <ExternalDocsLink
+          url={Links.DISCOURSE}
+          title="Forum"
+          className="dropdown-item"
+        />
+        <ExternalDocsLink
+          url={Links.GITTER}
+          title="Gitter"
+          className="dropdown-item"
+        />
+        <ExternalDocsLink
+          url={Links.GITHUB}
+          title="GitHub"
+          className="dropdown-item"
+        />
       </DropdownMenu>
     </Dropdown>
   );