project creation

client/src/features/projectsV2/new/ProjectV2New.tsx

@@ -67,7 +67,7 @@ function ProjectV2NewMetadataStepHeader() {
 function ProjectV2NewProjectCreatingStepHeader() {
   return (
     <>
-      <p>Project is being created...</p>
+      <b>Creating project...</b>
     </>
   );
 }
@@ -84,6 +84,17 @@ function ProjectV2NewRepositoryStepHeader() {
   );
 }
 
+function ProjectV2BeingCreatedLoader() {
+  return (
+    <div className="d-flex justify-content-center w-100">
+      <div className="d-flex flex-column">
+        <Loader className="me-2" />
+        <div>Creating project...</div>
+      </div>
+    </div>
+  );
+}
+
 function ProjectV2BeingCreated() {
   const { project } = useNewProjectV2Selector((state) => state);
   const dispatch = useDispatch();
@@ -103,20 +114,10 @@ function ProjectV2BeingCreated() {
   if (result == null || result.isUninitialized) {
     createProject({ projectPost: newProject });
 
-    return (
-      <div className="d-flex align-items-center">
-        <Loader className="me-2" />
-        <span>Creating project...</span>
-      </div>
-    );
+    return <ProjectV2BeingCreatedLoader />;
   }
   if (result.isLoading) {
-    return (
-      <div className="d-flex align-items-center">
-        <Loader className="me-2" />
-        <span>Creating project...</span>
-      </div>
-    );
+    return <ProjectV2BeingCreatedLoader />;
   }
 
   if (result.isError || result.data == null) {

client/src/features/projectsV2/new/ProjectV2NewForm.tsx

@@ -25,7 +25,6 @@ import { Button, Form, FormText, Input, Label } from "reactstrap";
 
 import { slugFromTitle } from "../../../utils/helpers/HelperFunctions";
 
-import styles from "./projectV2New.module.scss";
 import type { NewProjectV2State } from "./projectV2New.slice";
 import {
   setAccess,
@@ -76,7 +75,7 @@ export default function ProjectV2NewForm({
   currentStep,
 }: ProjectV2NewFormProps) {
   return (
-    <div className={cx(styles.projectV2NewForm, "form-rk-green mb-4")}>
+    <div className="form-rk-green mb-4 w-100">
       {currentStep === 0 && <h4>Describe the project</h4>}
       {currentStep === 1 && <h4>Define access</h4>}
       {currentStep === 2 && <h4>Add repositories</h4>}

tests/cypress/e2e/projectV2.spec.ts

@@ -16,36 +16,48 @@
  * limitations under the License.
  */
 
-import Fixtures from "../support/renkulab-fixtures";
+import fixtures from "../support/renkulab-fixtures";
 
 describe("Add new v2 project", () => {
-  const fixtures = new Fixtures(cy);
-  // const newProjectTitle = "new space";
+  const newProjectTitle = "new project";
   const slug = "new-project";
-  const newProjectPath = `e2e/${slug}`;
 
   beforeEach(() => {
     fixtures.config().versions().userTest().namespaces();
-    fixtures.projects().landingUserProjects("getLandingUserProjects");
+    fixtures.projects().landingUserProjects();
     cy.visit("projectV2/new");
   });
 
   it("create a new project", () => {
-    fixtures
-      .templates()
-      .createProject()
-      .project(newProjectPath, "getNewProject", "projects/project.json", false)
-      .updateProject(newProjectPath);
+    fixtures.templates().createProjectV2().readProjectV2();
     cy.contains("New Project (V2)").should("be.visible");
-    cy.getDataCy("project-name-input").clear().type("new project");
+    cy.getDataCy("project-name-input").clear().type(newProjectTitle);
     cy.getDataCy("project-slug-input").should("have.value", slug);
     cy.contains("Set Visibility").click();
     cy.contains("Add repositories").click();
+    cy.contains("Create").click();
+
+    cy.contains("Creating project...").should("be.visible");
+    cy.wait("@createProjectV2");
+    cy.contains("Project created").should("be.visible");
 
     // cy.createProject(newProjectTitle);
     // cy.wait("@getTemplates");
     // cy.wait("@createProject");
   });
 
-  // TODO: test validation
+  it("prevents invalid input", () => {
+    cy.contains("Set Visibility").click();
+    cy.contains("Please provide a name").should("be.visible");
+    cy.getDataCy("project-name-input").clear().type(newProjectTitle);
+
+    cy.getDataCy("project-slug-input").clear().type(newProjectTitle);
+    cy.contains("Set Visibility").click();
+    cy.contains(
+      "Please provide a slug consisting of lowercase letters, numbers, and hyphens."
+    ).should("be.visible");
+    cy.getDataCy("project-slug-input").clear().type(slug);
+    cy.contains("Set Visibility").click();
+    cy.contains("Define access").should("be.visible");
+  });
 });

tests/cypress/fixtures/projectV2/create-projectV2.json

@@ -0,0 +1,9 @@
+{
+  "id": "THEPROJECTULID26CHARACTERS",
+  "name": "Renku R Project",
+  "slug": "r-project",
+  "created_by": {
+    "id": "owner-KC-id"
+  },
+  "visibility": "public"
+}

tests/cypress/fixtures/projectV2/read-projectV2.json

@@ -0,0 +1,9 @@
+{
+  "id": "THEPROJECTULID26CHARACTERS",
+  "name": "Renku R Project",
+  "slug": "r-project",
+  "created_by": {
+    "id": "owner-KC-id"
+  },
+  "visibility": "public"
+}

tests/cypress/support/renkulab-fixtures/index.ts

@@ -30,6 +30,7 @@ import { KgSearch } from "./kgSearch";
 import { NewProject } from "./newProject";
 import { NewSession } from "./newSession";
 import { Projects } from "./projects";
+import { ProjectV2 } from "./projectV2";
 import { Sessions } from "./sessions";
 import { User } from "./user";
 import { Versions } from "./versions";
@@ -44,7 +45,9 @@ const Fixtures = NewProject(
             CloudStorage(
               Datasets(
                 Projects(
-                  User(Versions(Workflows(KgSearch(Global(BaseFixtures)))))
+                  ProjectV2(
+                    User(Versions(Workflows(KgSearch(Global(BaseFixtures)))))
+                  )
                 )
               )
             )

tests/cypress/support/renkulab-fixtures/projectV2.ts

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2023 - 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 { FixturesConstructor } from "./fixtures";
+import { SimpleFixture } from "./fixtures.types";
+
+/**
+ * Fixtures for New Project
+ */
+
+interface ProjectV2Args extends SimpleFixture {
+  projectId: string;
+}
+
+export function ProjectV2<T extends FixturesConstructor>(Parent: T) {
+  return class ProjectV2Fixtures extends Parent {
+    createProjectV2(args?: SimpleFixture) {
+      const {
+        fixture = "projectV2/create-projectV2.json",
+        name = "createProjectV2",
+      } = args ?? {};
+      const response = { fixture, delay: 2000, statusCode: 201 };
+      cy.intercept("POST", "/ui-server/api/data/projects", response).as(name);
+      return this;
+    }
+
+    readProjectV2(args?: ProjectV2Args) {
+      const {
+        fixture = "projectV2/read-projectV2.json",
+        name = "readProjectV2",
+        projectId = "THEPROJECTULID26CHARACTERS",
+      } = args ?? {};
+      const response = { fixture };
+      cy.intercept(
+        "POST",
+        `/ui-server/api/data/projects/${projectId}`,
+        response
+      ).as(name);
+      return this;
+    }
+  };
+}