Merge pull request #63 from eresearchqut/dev

QA Release 2025.3

Author: ppettitau

README.md

@@ -55,7 +55,7 @@ git config blame.ignoreRevsFile .git-blame-ignore-revs
 
 ```
 cd api
-npm install
+pnpm install
 ```
 
 ```

api/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "transcription-api",
+    "name": "api",
     "version": "1.0.0",
     "description": "API for the Transcription Service",
     "engines": {
@@ -34,7 +34,7 @@
         "@types/body-parser": "^1.19.5",
         "@types/cors": "^2.8.13",
         "@types/express": "^5.0.0",
-        "@types/jest": "^29.5.13",
+        "@types/jest": "^29.5.14",
         "@typescript-eslint/parser": "7.2.0",
         "aws-sdk-client-mock": "^4.1.0",
         "aws-sdk-client-mock-jest": "^4.1.0",
@@ -45,7 +45,7 @@
         "jest-dynalite": "^3.6.1",
         "prettier": "^3.0.3",
         "rimraf": "^6.0.1",
-        "ts-jest": "^29.1.1",
+        "ts-jest": "^29.3.2",
         "typescript": "5.5.4"
     },
     "prettier": {

api/src/event/summariseTranscriptionHandler.ts

@@ -12,6 +12,7 @@ import { Transcription } from "model";
 import { bedrockClientConfig, invokeModel } from "../client/bedrockClient";
 import {
   getTranscription,
+  normaliseJobId,
   summaryKey as updateSummaryKey,
 } from "../service/transcriptionService";
 
@@ -43,7 +44,7 @@ export const handler = async (event: S3Event) => {
       ...key.matchAll(outputPattern),
     ][0];
     if (matchedKey) {
-      const jobId = fileName.split(".")[0];
+      const jobId = normaliseJobId(fileName.split(".")[0]);
       const summaryKey = `${identityId}/summary/${jobId}`;
       const privateSummaryKey = `private/${cognitoId}/${summaryKey}`;
       promises.push(

api/src/service/transcriptionService.ts

@@ -7,7 +7,7 @@ import {
   updateResource,
 } from "../repository/repository";
 
-const normaliseJobId = (jobId: string): string =>
+export const normaliseJobId = (jobId: string): string =>
   jobId.split("redacted-").at(-1) ?? jobId;
 
 export const jobStarted = (

api/test/event/summariseTranscriptionHandler.test.ts

@@ -32,14 +32,25 @@ describe("summariseTranscriptionHandler", () => {
     bedrockClientMock.reset();
   });
 
-  test("handler", async () => {
+  test.each([
+    {
+      name: "generate summary",
+      metadata: { generatesummary: "true" },
+      transcriptionKey: "2e9b38b5-1df0-4841-8308-f174fb88aac7.json",
+    },
+    {
+      name: "generate summary with pii redaction",
+      metadata: { generatesummary: "true", enablepiiredaction: "true" },
+      transcriptionKey: "redacted-2e9b38b5-1df0-4841-8308-f174fb88aac7.json",
+    },
+  ])("test $name", async ({ name, metadata, transcriptionKey }) => {
     await dynamoDBClient.send(
       new PutItemCommand({
         TableName: tableName,
         Item: marshall({
           pk: "76c65a59-1c57-489b-be96-020ceaa9675a",
           sk: "2e9b38b5-1df0-4841-8308-f174fb88aac7",
-          metadata: JSON.parse(JSON.stringify({ generatesummary: "true" })),
+          metadata: JSON.parse(JSON.stringify(metadata)),
         }),
       }),
     );
@@ -72,7 +83,7 @@ describe("summariseTranscriptionHandler", () => {
             s3: {
               bucket: { name: "local-transcriptions" },
               object: {
-                key: "private/ap-southeast-2%3Abcb38797-8e6a-43ea-9844-d8505927785a/76c65a59-1c57-489b-be96-020ceaa9675a/2e9b38b5-1df0-4841-8308-f174fb88aac7.json",
+                key: `private/ap-southeast-2%3Abcb38797-8e6a-43ea-9844-d8505927785a/76c65a59-1c57-489b-be96-020ceaa9675a/${transcriptionKey}`,
               },
             },
           },
@@ -82,7 +93,7 @@ describe("summariseTranscriptionHandler", () => {
 
     expect(s3ClientMock).toHaveReceivedCommandWith(GetObjectCommand, {
       Bucket: "local-transcriptions",
-      Key: "private/ap-southeast-2:bcb38797-8e6a-43ea-9844-d8505927785a/76c65a59-1c57-489b-be96-020ceaa9675a/2e9b38b5-1df0-4841-8308-f174fb88aac7.json",
+      Key: `private/ap-southeast-2:bcb38797-8e6a-43ea-9844-d8505927785a/76c65a59-1c57-489b-be96-020ceaa9675a/${transcriptionKey}`,
     });
 
     expect(bedrockClientMock).toHaveReceivedCommandWith(InvokeModelCommand, {

deployment/package.json

@@ -15,15 +15,15 @@
   },
   "devDependencies": {
     "@types/node": "20.16.11",
-    "aws-cdk": "^2.178.1",
-    "esbuild": "^0.24.0",
+    "aws-cdk": "^2.1014.0",
+    "esbuild": "^0.25.4",
     "ts-node": "^10.9.2",
     "typescript": "~5.6.3",
     "rimraf": "^6.0.1"
   },
   "dependencies": {
     "@aws-sdk/client-ssm": "^3.667.0",
-    "aws-cdk-lib": "^2.178.1",
+    "aws-cdk-lib": "^2.195.0",
     "cdk-pipelines-github": "^0.4.125",
     "constructs": "^10.3.0",
     "source-map-support": "^0.5.21"

frontend/client/fetchers.ts

@@ -1,4 +1,4 @@
-import { fetchAuthSession } from "aws-amplify/auth";
+import { fetchAuthSession, signOut } from "aws-amplify/auth";
 
 export interface FetcherProps {
   apiUrl: string;
@@ -58,25 +58,26 @@ export const buildApiEndpoint = ({
 
 export const getHeaders = async () =>
   fetchAuthToken()
-    .then(
-      (idToken) =>
-        ({
-          Authorization: `Bearer ${idToken}`,
-          Accept: "application/json",
-          "Content-Type": "application/json",
-        }) as HeadersInit,
-    )
-    .catch((error) => {
-      console.error(error);
-      throw error;
+    .then((idToken) => {
+      if (idToken === undefined) throw Error("No idToken");
+      return {
+        Authorization: `Bearer ${idToken}`,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      } as HeadersInit;
+    })
+    .catch(async () => {
+      await signOut();
     });
 
 export const getter = (props: FetcherProps) =>
-  getHeaders().then((headers) =>
-    fetch(buildApiEndpoint(props), {
-      ...props.init,
-      headers,
-    }).then((response) =>
-      response.ok ? response.json() : rejectApiError(response),
-    ),
+  getHeaders().then(
+    (headers) =>
+      headers &&
+      fetch(buildApiEndpoint(props), {
+        ...props.init,
+        headers,
+      }).then((response) =>
+        response.ok ? response.json() : rejectApiError(response),
+      ),
   );

frontend/components/errorBoundary/asyncErrorBoundary.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AsyncErrorBoundary } from "./";
+import { Text } from "@chakra-ui/react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorMessage } from "@/components/errorMessage";
+
+export default {
+  title: "Components/AsyncErrorBoundary",
+  component: AsyncErrorBoundary,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<typeof AsyncErrorBoundary>;
+type Story = StoryObj<typeof AsyncErrorBoundary>;
+
+const ErrorComponent = () => {
+  throw new Error("Test error");
+};
+
+export const Default: Story = {
+  args: {
+    children: <ErrorComponent />,
+  },
+  render: (args) => (
+    <ErrorBoundary FallbackComponent={ErrorMessage}>
+      <AsyncErrorBoundary {...args} />
+    </ErrorBoundary>
+  ),
+};
+
+export const WithNoErrors: Story = {
+  ...Default,
+  args: {
+    children: <Text>Success, no errors!</Text>,
+  },
+};

frontend/components/errorBoundary/asyncErrorBoundary.tsx

@@ -0,0 +1,24 @@
+import { FunctionComponent, PropsWithChildren, useEffect } from "react";
+import { useErrorBoundary } from "react-error-boundary";
+
+const AsyncErrorBoundary: FunctionComponent<PropsWithChildren> = ({
+  children,
+}) => {
+  const { showBoundary } = useErrorBoundary();
+
+  useEffect(() => {
+    const handleError = (event: ErrorEvent | PromiseRejectionEvent) => {
+      showBoundary(event);
+    };
+
+    window.addEventListener("unhandledrejection", handleError);
+
+    return () => {
+      window.removeEventListener("unhandledrejection", handleError);
+    };
+  }, [showBoundary]);
+
+  return children;
+};
+
+export default AsyncErrorBoundary;

frontend/components/errorBoundary/index.ts

@@ -0,0 +1 @@
+export { default as AsyncErrorBoundary } from "./asyncErrorBoundary";

frontend/components/errorMessage/errorMessage.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ErrorMessage } from "./";
+import { ErrorBoundary } from "react-error-boundary";
+
+export default {
+  title: "Components/ErrorMessage",
+  component: ErrorMessage,
+} as Meta<typeof ErrorMessage>;
+
+type Story = StoryObj<typeof ErrorMessage>;
+
+const ErrorComponent = () => {
+  throw new Error("Test error");
+};
+
+export const Default: Story = {
+  args: {
+    message: "An error occurred while processing your request.",
+  },
+  render: (args) => (
+    <ErrorBoundary fallback={<ErrorMessage {...args} />}>
+      <ErrorComponent />
+    </ErrorBoundary>
+  ),
+};
+
+export const WithTitle: Story = {
+  ...Default,
+  args: {
+    title: "Oh no!",
+    message: "Something went wrong. Please try again later.",
+  },
+};

frontend/components/errorMessage/errorMessage.tsx

@@ -0,0 +1,68 @@
+import { FunctionComponent } from "react";
+import {
+  DialogBackdrop,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Text } from "@chakra-ui/react";
+import { ExternalLink } from "@/components/externalLink";
+import { FallbackProps, useErrorBoundary } from "react-error-boundary";
+import { MappedIcon } from "@/components/mappedIcon";
+
+export interface ErrorMessageProps extends FallbackProps {
+  icon?: string;
+  title?: string;
+  message?: string;
+}
+
+const ErrorMessage: FunctionComponent<ErrorMessageProps & FallbackProps> = ({
+  icon = "exclamation-circle",
+  title = "An unexpected error has occurred",
+  message,
+}) => {
+  const { resetBoundary } = useErrorBoundary();
+
+  return (
+    <DialogRoot
+      defaultOpen={true}
+      onOpenChange={() => {
+        resetBoundary();
+      }}
+      preventScroll={false}
+    >
+      <DialogTrigger />
+      <DialogBackdrop />
+      <DialogContent>
+        <DialogCloseTrigger />
+        <DialogHeader>
+          <DialogTitle>
+            {icon && <MappedIcon mb={1} icon={icon} />} {title}
+          </DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          {message && <Text>{message}</Text>}
+          <Text>
+            If you continue to receive this error, please{" "}
+            <ExternalLink
+              href={
+                "https://qutvirtual4.qut.edu.au/group/research-students/conducting-research/specialty-research-facilities/advanced-research-computing-storage"
+              }
+            >
+              contact eResearch
+            </ExternalLink>{" "}
+            for assistance.
+          </Text>
+        </DialogBody>
+        <DialogFooter />
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default ErrorMessage;

frontend/components/errorMessage/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as ErrorMessage,
+  type ErrorMessageProps,
+} from "./errorMessage";

frontend/components/header/header.tsx

@@ -10,17 +10,17 @@ import {
 } from "@chakra-ui/react";
 import { MappedIcon } from "@/components/mappedIcon";
 import { ColorModeButton } from "@/components/ui/color-mode";
-import { useAuth, useLogin, useLogout } from "../../context/auth-context";
+import { useAuth, useLogin } from "../../context/auth-context";
 
 import logo from "@/public/logo.png";
 import { ButtonProps } from "@/components/ui/button";
+import { signOut } from "aws-amplify/auth";
 
 export const Header: FunctionComponent = () => {
   const {
     state: { isAuthenticated },
   } = useAuth();
   const { handleLogin } = useLogin();
-  const { handleLogout } = useLogout();
   const buttonProps: ButtonProps = {
     colorPalette: "blue",
     variant: "outline",
@@ -47,7 +47,12 @@ export const Header: FunctionComponent = () => {
         </Button>
       )}
       {isAuthenticated && (
-        <Button onClick={handleLogout} {...buttonProps}>
+        <Button
+          onClick={() => {
+            signOut().then();
+          }}
+          {...buttonProps}
+        >
           <MappedIcon icon={"exit-outline"} />
           Log out
         </Button>