Experimental: etags

client/src/features/projectsV2/api/projectV2.api.ts

@@ -28,6 +28,7 @@
         url: `/projects/${queryArg.projectId}`,
         method: "PATCH",
         body: queryArg.projectPatch,
+        headers: { "If-Match": queryArg["If-Match"] },
       }),
     }),
     deleteProjectsByProjectId: build.mutation<
@@ -90,6 +91,8 @@
   /** status 200 The patched project */ Project;
 export type PatchProjectsByProjectIdApiArg = {
   projectId: string;
+  /** If-Match header, for avoiding mid-air collisions */
+  "If-Match": ETag;
   projectPatch: ProjectPatch;
 };
 export type DeleteProjectsByProjectIdApiResponse =
@@ -127,15 +130,17 @@
 export type RepositoriesList = Repository[];
 export type Visibility = "private" | "public";
 export type Description = string;
+export type ETag = string;
 export type Project = {
   id: Ulid;
   name: Name;
-  slug: Slug;
+  slug?: Slug;
   creation_date: CreationDate;
   created_by: Member;
   repositories?: RepositoriesList;
   visibility: Visibility;
   description?: Description;
+  etag?: ETag;
 };
 export type ProjectsList = Project[];
 export type ErrorResponse = {

client/src/features/projectsV2/api/projectV2.enhanced-api.ts

@@ -44,6 +44,9 @@ const injectedApi = api.injectEndpoints({
 const enhancedApi = injectedApi.enhanceEndpoints({
   addTagTypes: ["Project", "Members"],
   endpoints: {
+    postProjects: {
+      invalidatesTags: ["Project"],
+    },
     deleteProjectsByProjectId: {
       invalidatesTags: ["Project"],
     },

client/src/features/projectsV2/api/projectV2.openapi.json

@@ -1,5 +1,5 @@
 {
-  "openapi": "3.1.0",
+  "openapi": "3.0.2",
   "info": {
     "title": "Renku Project Management Service",
     "description": "Service that allows creating, updating, deleting, and managing Renku native projects.\nAll errors have the same format as the schema called ErrorResponse.\n",
@@ -169,6 +169,9 @@
             "schema": {
               "type": "string"
             }
+          },
+          {
+            "$ref": "#/components/parameters/If-Match"
           }
         ],
         "requestBody": {
@@ -395,16 +398,12 @@
           },
           "description": {
             "$ref": "#/components/schemas/Description"
+          },
+          "etag": {
+            "$ref": "#/components/schemas/ETag"
           }
         },
-        "required": [
-          "id",
-          "name",
-          "slug",
-          "created_by",
-          "creation_date",
-          "visibility"
-        ],
+        "required": ["id", "name", "created_by", "creation_date", "visibility"],
         "example": {
           "id": "01AN4Z79ZS5XN0F25N3DB94T4R",
           "name": "Renku R Project",
@@ -650,6 +649,11 @@
         "description": "User email",
         "example": "[email protected]"
       },
+      "ETag": {
+        "type": "string",
+        "description": "Entity Tag",
+        "example": "9EE498F9D565D0C41E511377425F32F3"
+      },
       "ErrorResponse": {
         "type": "object",
         "properties": {
@@ -688,6 +692,17 @@
           }
         }
       }
+    },
+    "parameters": {
+      "If-Match": {
+        "in": "header",
+        "name": "If-Match",
+        "description": "If-Match header, for avoiding mid-air collisions",
+        "required": true,
+        "schema": {
+          "$ref": "#/components/schemas/ETag"
+        }
+      }
     }
   }
 }

client/src/features/projectsV2/show/ProjectV2EditForm.tsx

@@ -49,6 +49,7 @@
 import ProjectVisibilityFormField from "../fields/ProjectVisibilityFormField";
 
 import { SettingEditOption } from "./projectV2Show.types";
+import { RtkErrorAlert } from "../../../components/errors/RtkErrorAlert";
 
 type ProjectV2Metadata = Omit<ProjectPatch, "repositories">;
 
@@ -105,7 +106,7 @@
         <Button
           className="ms-2"
           color="danger"
-          disabled={typedName !== project.slug.trim()}
+          disabled={typedName !== project.slug?.trim()}
           onClick={onDelete}
         >
           {result.isLoading ? (
@@ -162,7 +163,7 @@
     },
   });
 
-  const [updateProject, { isLoading, isError }] =
+  const [updateProject, { isLoading, error }] =
     usePatchProjectsByProjectIdMutation();
 
   const isUpdating = isLoading;
@@ -172,7 +173,11 @@
 
   const onSubmit = useCallback(
     (data: ProjectV2Metadata) => {
-      updateProject({ projectId: project.id, projectPatch: data })
+      updateProject({
+        "If-Match": project.etag ?? "",
+        projectId: project.id,
+        projectPatch: data,
+      })
         .unwrap()
         .then(() => setSettingEdit(null));
     },
@@ -196,6 +201,9 @@
         project={project}
         toggle={toggle}
       />
+
+      {error && <RtkErrorAlert error={error} />}
+
       <Form
         className="form-rk-green"
         noValidate
@@ -213,7 +221,6 @@
           errors={errors}
         />
         <ProjectEditSubmitGroup isUpdating={isUpdating} onCancel={onCancel} />
-        {isError && <div>There was an error</div>}
       </Form>
     </div>
   );
@@ -350,7 +357,11 @@
   const onSubmit = useCallback(
     (data: ProjectV2Repositories) => {
       const repositories = data.repositories.map((r) => r.url);
-      updateProject({ projectId: project.id, projectPatch: { repositories } })
+      updateProject({
+        "If-Match": project.etag ?? "",
+        projectId: project.id,
+        projectPatch: { repositories },
+      })
         .unwrap()
         .then(() => setSettingEdit(null));
     },