fix: show a friendly Access denied message for 403 responses

packages/graph-explorer/src/utils/createDisplayError.test.ts

@@ -178,6 +178,30 @@ describe("createDisplayError", () => {
     });
   });
 
+  it("Should handle access denied error", () => {
+    const result = createDisplayError(
+      new NetworkError("Network error", 403, null),
+    );
+    expect(result).toStrictEqual({
+      title: "Access denied",
+      message:
+        "The server refused this request. Check that your connection credentials and permissions are correct, then try again.",
+    });
+  });
+
+  it("Should handle access denied error ignoring raw server data", () => {
+    const result = createDisplayError(
+      new NetworkError("Network error", 403, {
+        message: '{"requestId":"abc","code":"AccessDeniedException"}',
+      }),
+    );
+    expect(result).toStrictEqual({
+      title: "Access denied",
+      message:
+        "The server refused this request. Check that your connection credentials and permissions are correct, then try again.",
+    });
+  });
+
   it("Should handle too many requests error", () => {
     const result = createDisplayError(
       new NetworkError("Network error", 429, null),

packages/graph-explorer/src/utils/createDisplayError.ts

@@ -122,6 +122,17 @@ export function createDisplayError(error: any): DisplayError {
       };
     }
 
+    if (error.statusCode === 403) {
+      // A 403 can be caused by several things (credentials, permissions,
+      // proxy configuration), so the message stays generic and points the
+      // user at what they can reasonably check.
+      return {
+        title: "Access denied",
+        message:
+          "The server refused this request. Check that your connection credentials and permissions are correct, then try again.",
+      };
+    }
+
     if (error.statusCode === 429) {
       return {
         title: "Too Many Requests",