Merge branch 'main' into fix/WALLET-469-AskPermission

.github/workflows/cd.yml

@@ -0,0 +1,25 @@
+name: Inrupt Data Wallet CD
+
+on:
+  push:
+    branches: [ main ]
+
+env:
+  CI: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+            node-version-file: ".nvmrc"
+            cache: npm
+      - run: npm ci
+      - run: npm install -g eas-cli
+      - run: eas build --platform all --profile preview --message "SNAPSHOT build"
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          EAS_PROJECT_ID: ${{ secrets.EAS_PROJECT_ID }}
+

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Wallet Frontend Application CI
+name: Inrupt Data Wallet CI
 
 on:
   pull_request: {}
@@ -15,22 +15,21 @@ jobs:
   lint:
     uses: inrupt/typescript-sdk-tools/.github/workflows/reusable-lint.yml@v3
 
-  build:
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ ubuntu-latest, windows-latest ]
-        node-version: [ "20.x" ]
+  unit-test:
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
+        with:
+            node-version-file: ".nvmrc"
+            cache: npm
       - run: npm ci
       - run: npm run test:snapshot
 
   sonarqube:
     name: run sonarqube
     if: ${{ github.actor != 'dependabot[bot]' }}
-    needs: [build]
+    needs: [unit-test]
     runs-on: ubuntu-latest
     steps:
       - name: Checking out

api/apiRequest.ts

@@ -15,6 +15,7 @@
 //
 import * as SecureStore from "expo-secure-store";
 import { router } from "expo-router";
+import { handleErrorResponse } from "@inrupt/solid-client-errors";
 
 export const SESSION_KEY = "session";
 
@@ -52,12 +53,12 @@ export const makeApiRequest = async <T>(
     throw new Error(`Unauthorized: ${response.status}`);
   }
 
-  if (response.status === 404) {
-    return null as T;
-  }
-
   if (!response.ok) {
-    throw new Error(`Network response was not ok: ${response.statusText}`);
+    throw handleErrorResponse(
+      response,
+      await response.text(),
+      `${endpoint} returned an error response.`
+    );
   }
 
   const responseType = response.headers.get("content-type");

api/files.ts

@@ -14,7 +14,9 @@
 // limitations under the License.
 //
 import mime from "mime";
+import FormData from "form-data";
 import type { WalletFile } from "@/types/WalletFile";
+import { handleErrorResponse } from "@inrupt/solid-client-errors";
 import { makeApiRequest } from "./apiRequest";
 
 interface FileObject {
@@ -27,38 +29,63 @@ export const fetchFiles = async (): Promise<WalletFile[]> => {
   return makeApiRequest<WalletFile[]>("wallet");
 };
 
-export const postFile = async (file: FileObject): Promise<void> => {
-  const formData = new FormData();
+export const postFile = async (fileMetadata: FileObject): Promise<void> => {
+  const acceptValue = fileMetadata.type ?? mime.getType(fileMetadata.name);
+  const acceptHeader = new Headers();
+  if (acceptValue !== null) {
+    acceptHeader.append("Accept", acceptValue);
+  }
+  // Make a HEAD request to the file to report on potential errors
+  // in more details than the fetch with the FormData.
+  const fileResponse = await fetch(fileMetadata.uri, {
+    headers: acceptHeader,
+    method: "HEAD",
+  });
+  if (!fileResponse.ok) {
+    throw handleErrorResponse(
+      fileResponse,
+      await fileResponse.text(),
+      "Failed to fetch file to upload"
+    );
+  }
+  // The following is declared as `any` because there is a type inconsistency,
+  // and the global FormData (expected by the fetch body) is actually not compliant
+  // with the Web spec and its TS declarations. formData.set doesn't exist, and
+  // formData.append doesn't support a Blob being passed.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const formData: any = new FormData();
   formData.append("file", {
-    name: file.name,
-    type: file.type || mime.getType(file.name) || "application/octet-stream",
-    uri: file.uri,
-  } as unknown as Blob);
-
+    name: fileMetadata.name,
+    type:
+      fileMetadata.type ||
+      mime.getType(fileMetadata.name) ||
+      "application/octet-stream",
+    uri: fileMetadata.uri,
+  });
+  let response: Response;
   try {
-    const response = await fetch(
-      `${process.env.EXPO_PUBLIC_WALLET_API}/wallet`,
+    response = await fetch(
+      new URL("wallet", process.env.EXPO_PUBLIC_WALLET_API),
       {
         method: "PUT",
         body: formData,
       }
     );
+  } catch (e) {
+    console.debug("Resolving the file and uploading it to the wallet failed.");
+    throw e;
+  }
 
-    if (response.ok) {
-      console.debug(
-        `Uploaded file to Wallet. HTTP response status:${response.status}`
-      );
-    } else {
-      throw Error(
-        `Failed to upload file to Wallet. HTTP response status from Wallet Backend service:${
-          response.status
-        }`
-      );
-    }
-  } catch (error) {
-    throw Error("Failed to retrieve and upload file to Wallet", {
-      cause: error,
-    });
+  if (response.ok) {
+    console.debug(
+      `Uploaded file to Wallet. HTTP response status:${response.status}`
+    );
+  } else {
+    throw handleErrorResponse(
+      response,
+      await response.text(),
+      "Failed to upload file to Wallet"
+    );
   }
 };
 

app/(tabs)/home/download.tsx

@@ -26,6 +26,7 @@ import { RDF_CONTENT_TYPE } from "@/utils/constants";
 import type { WalletFile } from "@/types/WalletFile";
 import { isDownloadQR } from "@/types/accessPrompt";
 import { useError } from "@/hooks/useError";
+import { hasProblemDetails } from "@inrupt/solid-client-errors";
 
 interface FileDetailProps {
   file: WalletFile;
@@ -52,7 +53,15 @@ const Page: React.FC<FileDetailProps> = () => {
       await queryClient.invalidateQueries({ queryKey: ["files"] });
     },
     onError: (error) => {
-      console.warn(error);
+      if (hasProblemDetails(error)) {
+        console.debug(
+          `${error.problemDetails.status}: ${error.problemDetails.title}.`
+        );
+        console.debug(error.problemDetails.detail);
+      } else {
+        console.debug("A non-HTTP error happened.");
+        console.debug(error);
+      }
       showErrorMsg("Unable to save the file into your Wallet.");
     },
     mutationKey: ["filesMutation"],

app/access-prompt/index.test.tsx

@@ -30,6 +30,7 @@ function mockUseQuery(
 ): ReturnType<typeof ReactQuery.useQuery> {
   return {
     data,
+    error: null,
     isLoading: false,
     isFetching: false,
     refetch: jest.fn<ReturnType<typeof ReactQuery.useQuery>["refetch"]>(),

app/access-prompt/index.tsx

@@ -32,6 +32,7 @@ import { faEye } from "@fortawesome/free-solid-svg-icons/faEye";
 import CardInfo from "@/components/common/CardInfo";
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
 import Loading from "@/components/LoadingButton";
+import { hasProblemDetails } from "@inrupt/solid-client-errors";
 
 const Page: React.FC = () => {
   const params = useLocalSearchParams();
@@ -42,14 +43,16 @@ const Page: React.FC = () => {
     );
   }
   const router = useRouter();
-  const { data, isLoading, isFetching } = useQuery<AccessPromptResource>({
-    queryKey: ["accessPromptResource"],
-    queryFn: () =>
-      getAccessPromptResource({
-        type: params.type,
-        webId: params.webId,
-      }),
-  });
+  const { data, error, isLoading, isFetching } = useQuery<AccessPromptResource>(
+    {
+      queryKey: ["accessPromptResource"],
+      queryFn: () =>
+        getAccessPromptResource({
+          type: params.type,
+          webId: params.webId,
+        }),
+    }
+  );
   const navigation = useNavigation();
   const mutation = useMutation({
     mutationFn: requestAccessPrompt,
@@ -90,23 +93,29 @@ const Page: React.FC = () => {
     });
   };
 
-  if (isLoading || isFetching)
-    return (
-      <View style={styles.container}>
-        <Loading isLoading={true} />
-      </View>
-    );
-
-  if (!data) {
+  if (
+    error !== null &&
+    hasProblemDetails(error) &&
+    error.problemDetails.status === 404
+  ) {
     return (
-      <View style={styles.emptyState} testID="no-prompts">
+      <View style={styles.emptyState}>
         <ThemedText style={styles.emptyStateText}>
           Resource not found
         </ThemedText>
       </View>
     );
   }
 
+  if (isLoading || isFetching)
+    return (
+      <View style={styles.container}>
+        <Loading isLoading={true} />
+      </View>
+    );
+
+  if (!data) return <View style={styles.container} testID="no-prompts" />;
+
   return (
     <View style={styles.container}>
       <View style={styles.content}>

package.json

@@ -23,6 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
     "@gorhom/bottom-sheet": "^4.6.4",
+    "@inrupt/solid-client-errors": "^0.0.2",
     "@react-native-cookies/cookies": "^6.2.1",
     "@react-navigation/native": "^6.1.18",
     "@tanstack/react-query": "^5.51.23",