refactor: update project and group pages

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

@@ -71,7 +71,7 @@ function notificationProjectUpdated(
 
 function ProjectReadOnlyNamespaceField({ namespace }: { namespace: string }) {
   return (
-    <div className="mb-3">
+    <div>
       <Label className="form-label" for="project-namespace">
         Namespace
       </Label>
@@ -93,7 +93,7 @@ function ProjectReadOnlyVisibilityField({
   visibility: string;
 }) {
   return (
-    <div className="mb-3">
+    <div>
       <Label className="form-label" for="project-visibility">
         Visibility
       </Label>
@@ -193,8 +193,13 @@ function ProjectSettingsEditForm({ project }: ProjectPageSettingsProps) {
         </SuccessAlert>
       )}
 
-      <Form noValidate onSubmit={handleSubmit(onSubmit)}>
+      <Form
+        className={cx("d-flex", "flex-column", "gap-3")}
+        noValidate
+        onSubmit={handleSubmit(onSubmit)}
+      >
         <ProjectNameFormField name="name" control={control} errors={errors} />
+
         <PermissionsGuard
           disabled={
             <ProjectReadOnlyNamespaceField namespace={project.namespace} />
@@ -212,11 +217,19 @@ function ProjectSettingsEditForm({ project }: ProjectPageSettingsProps) {
           userPermissions={permissions}
         />
         {currentNamespace !== project.namespace && (
-          <RenkuAlert color={"warning"} dismissible={false} timeout={0}>
-            Modifying the namespace also change the project&apos;s URL. Once the
-            change is saved, it will redirect to the updated project URL.
-          </RenkuAlert>
+          <div className="mt-1">
+            <RenkuAlert
+              className="mb-0"
+              color="warning"
+              dismissible={false}
+              timeout={0}
+            >
+              Modifying the owner also change the project&apos;s URL. Once the
+              change is saved, it will redirect to the updated project URL.
+            </RenkuAlert>
+          </div>
         )}
+
         <PermissionsGuard
           disabled={
             <ProjectReadOnlyVisibilityField visibility={project.visibility} />
@@ -231,20 +244,29 @@ function ProjectSettingsEditForm({ project }: ProjectPageSettingsProps) {
           requestedPermission="delete"
           userPermissions={permissions}
         />
-        <ProjectDescriptionFormField
-          name="description"
-          control={control}
-          errors={errors}
-        />
-        <KeywordsInput
-          hasError={errors.keywords != null}
-          help="Keywords are used to describe the project. To add one, type a keyword and press enter."
-          label="Keywords"
-          name="keywords"
-          register={register("keywords", { validate: () => !areKeywordsDirty })}
-          setDirty={setKeywordsDirty}
-          value={project.keywords as string[]}
-        />
+
+        <div>
+          <ProjectDescriptionFormField
+            name="description"
+            control={control}
+            errors={errors}
+          />
+        </div>
+
+        <div>
+          <KeywordsInput
+            hasError={errors.keywords != null}
+            help="Keywords are used to describe the project. To add one, type a keyword and press enter."
+            label="Keywords"
+            name="keywords"
+            register={register("keywords", {
+              validate: () => !areKeywordsDirty,
+            })}
+            setDirty={setKeywordsDirty}
+            value={project.keywords as string[]}
+          />
+        </div>
+
         <div className={cx("d-flex", "justify-content-end")}>
           <Button
             color="primary"

client/src/features/dashboardV2/DashboardV2.tsx

@@ -27,6 +27,8 @@ import {
   useGetGroupsQuery,
   useGetProjectsQuery,
 } from "../projectsV2/api/projectV2.enhanced-api";
+import CreateGroupButton from "../groupsV2/new/CreateGroupButton";
+import CreateProjectV2Button from "../projectsV2/new/CreateProjectV2Button";
 import GroupShortHandDisplay from "../projectsV2/show/GroupShortHandDisplay";
 import ProjectShortHandDisplay from "../projectsV2/show/ProjectShortHandDisplay";
 import DashboardV2Sessions from "./DashboardV2Sessions";
@@ -96,18 +98,14 @@ function ProjectsDashboard() {
           <Folder className={cx("bi", "me-1")} />
           <span>Projects</span>
         </h4>
-        <Link
-          className={cx(
-            "btn",
-            "btn-outline-primary",
-            "btn-sm",
-            "ms-auto",
-            "my-auto"
-          )}
-          to="/v2/projects/new"
+
+        <CreateProjectV2Button
+          className={cx("btn-sm", "ms-auto", "my-auto")}
+          data-cy="dashboard-project-new"
+          color="outline-primary"
         >
           <PlusLg className="bi" id="createPlus" />
-        </Link>
+        </CreateProjectV2Button>
       </CardHeader>
 
       <CardBody>
@@ -179,18 +177,14 @@ function GroupsDashboard() {
           <People className={cx("bi", "me-1")} />
           <span>Groups</span>
         </h4>
-        <Link
-          className={cx(
-            "btn",
-            "btn-outline-primary",
-            "btn-sm",
-            "ms-auto",
-            "my-auto"
-          )}
-          to="/v2/groups/new"
+
+        <CreateGroupButton
+          className={cx("btn-sm", "ms-auto", "my-auto")}
+          data-cy="dashboard-group-new"
+          color="outline-primary"
         >
           <PlusLg className="bi" id="createPlus" />
-        </Link>
+        </CreateGroupButton>
       </CardHeader>
 
       <CardBody>

client/src/features/groupsV2/new/CreateGroupButton.tsx

@@ -0,0 +1,53 @@
+/*!
+ * 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 { useCallback } from "react";
+import { Button } from "reactstrap";
+
+import useLocationHash from "../../../utils/customHooks/useLocationHash.hook";
+
+export interface CreateGroupButtonProps {
+  children?: React.ReactNode;
+  className?: string;
+  color?: string;
+  dataCy?: string;
+}
+export default function CreateGroupButton({
+  children,
+  className,
+  color,
+  dataCy,
+}: CreateGroupButtonProps) {
+  const [, setHash] = useLocationHash();
+  const groupCreationHash = "createGroup";
+  const openModal = useCallback(() => {
+    setHash(groupCreationHash);
+  }, [setHash]);
+
+  return (
+    <Button
+      className={cx(className)}
+      color={color || "primary"}
+      data-cy={dataCy || "button-group-new"}
+      onClick={openModal}
+    >
+      {children || "Create Group"}
+    </Button>
+  );
+}