feat: update to handle 403 error for the Lock tab (#123)

* Update to handle 403 error in the Lock tab

* Fix the warning message

Author: Noah Hanjun Lee

internal/server/api/v1/repos/middleware.go

@@ -99,8 +99,8 @@ func (rm *RepoMiddleware) RepoWritePerm() gin.HandlerFunc {
 		}
 
 		if !(p.RepoPerm == perm.RepoPermWrite || p.RepoPerm == perm.RepoPermAdmin) {
-			rm.log.Warn("It is denied to access the repository.", zap.String("repo_id", id), zap.Error(err))
-			gb.AbortWithErrorResponse(c, http.StatusForbidden, "It is denied to access the repository, only write permission can access.")
+			rm.log.Warn("The access is forbidden. Only write permission can access.", zap.String("repo_id", id))
+			gb.AbortWithErrorResponse(c, http.StatusForbidden, "Only write permission can access.")
 			return
 		}
 
@@ -142,8 +142,8 @@ func (rm *RepoMiddleware) RepoAdminPerm() gin.HandlerFunc {
 		}
 
 		if p.RepoPerm != perm.RepoPermAdmin {
-			rm.log.Warn("It is denied to access the repository.", zap.String("repo_id", id), zap.Error(err))
-			gb.AbortWithErrorResponse(c, http.StatusForbidden, "It is denied to access the repository, only admin permission can access.")
+			rm.log.Warn("The access is forbidden. Only admin permission can access.", zap.String("repo_id", id))
+			gb.AbortWithErrorResponse(c, http.StatusForbidden, "Only admin permission can access.")
 			return
 		}
 

ui/src/apis/lock.ts

@@ -3,7 +3,7 @@ import { StatusCodes } from "http-status-codes"
 import { instance, headers } from "./setting"
 import { _fetch } from "./_base"
 import { UserData, mapDataToUser } from "./user"
-import { Repo, Lock, User, HttpUnprocessableEntityError } from "../models"
+import { Repo, Lock, User, HttpForbiddenError, HttpUnprocessableEntityError } from "../models"
 
 interface LockData {
     id: number
@@ -48,7 +48,10 @@ export const lock = async (repo: Repo, env: string): Promise<Lock> => {
         body: JSON.stringify({env})
     })
 
-    if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
+    if (res.status === StatusCodes.FORBIDDEN) {
+        const {message} = await res.json()
+        throw new HttpForbiddenError(message)
+    } else if (res.status === StatusCodes.UNPROCESSABLE_ENTITY) {
         const {message} = await res.json()
         throw new HttpUnprocessableEntityError(message)
     }
@@ -60,9 +63,14 @@ export const lock = async (repo: Repo, env: string): Promise<Lock> => {
 }
 
 export const unlock = async (repo: Repo, lock: Lock): Promise<void> => {
-    await _fetch(`${instance}/api/v1/repos/${repo.id}/locks/${lock.id}`, {
+    const res = await _fetch(`${instance}/api/v1/repos/${repo.id}/locks/${lock.id}`, {
         headers,
         credentials: 'same-origin',
         method: "DELETE",
     })
+
+    if (res.status === StatusCodes.FORBIDDEN) {
+        const {message} = await res.json()
+        throw new HttpForbiddenError(message)
+    }
 }

ui/src/redux/repoLock.ts

@@ -1,9 +1,11 @@
 import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
+import { message } from "antd"
 
 import {
     Repo,
     Config,
-    Lock
+    Lock,
+    HttpForbiddenError
 } from "../models"
 import {
     searchRepo,
@@ -79,6 +81,9 @@ export const lock = createAsyncThunk<Lock, string, { state: {repoLock: RepoLockS
             const locks = await _lock(repo, env)
             return locks
         } catch (e) {
+            if (e instanceof HttpForbiddenError) {
+                message.error("Only write permission can lock.", 3)
+            }
             return rejectWithValue(e)
         }
     },
@@ -101,6 +106,9 @@ export const unlock = createAsyncThunk<Lock, string, { state: {repoLock: RepoLoc
             await _unlock(repo, lock)
             return lock
         } catch (e) {
+            if (e instanceof HttpForbiddenError) {
+                message.error("Only write permission can unlock.", 3)
+            }
             return rejectWithValue(e)
         }
     },