N21-2248 Create LTI 1.1 deep links with external tools

src/components/rooms/RoomExternalToolCard.vue

@@ -1,6 +1,7 @@
 <template>
 	<room-base-card
-		:title="tool.name"
+		v-if="showTool"
+		:title="toolName"
 		:logo-url="tool.logoUrl"
 		:open-in-new-tab="tool.openInNewTab"
 		test-id="tool-card"
@@ -72,15 +73,15 @@ const props = defineProps({
 	},
 });
 
-const emit = defineEmits(["edit", "delete", "error"]);
+const emit = defineEmits(["edit", "delete", "error", "refresh"]);
 
 const { t } = useI18n();
 
 const {
 	fetchContextLaunchRequest,
 	launchTool,
 	error: launchError,
-} = useExternalToolLaunchState();
+} = useExternalToolLaunchState(() => emit("refresh"));
 
 const { isTeacher } = useContextExternalToolConfigurationStatus();
 
@@ -122,6 +123,28 @@ const menuItems = [
 	},
 ];
 
+const isDeepLinkingTool: ComputedRef = computed(
+	() => !!props.tool.isLtiDeepLinkingTool
+);
+
+const hasDeepLink: ComputedRef = computed(() => !!props.tool.ltiDeepLink);
+
+const toolName: ComputedRef = computed(() => {
+	if (isDeepLinkingTool.value) {
+		return hasDeepLink.value
+			? props.tool.name
+			: t("feature-board-external-tool-element.placeholder.selectContent", {
+					toolName: props.tool.name,
+				});
+	}
+
+	return props.tool.name;
+});
+
+const showTool: ComputedRef = computed(
+	() => !(isDeepLinkingTool.value && !hasDeepLink.value && !isTeacher())
+);
+
 const isToolOutdated: ComputedRef = computed(
 	() =>
 		props.tool.status.isOutdatedOnScopeSchool ||

src/modules/data/external-tool/ExternalToolApi.composable.unit.ts

@@ -1,6 +1,7 @@
 import * as serverApi from "@/serverApi/v3/api";
 import {
 	ContextExternalToolBodyParams,
+	LaunchType,
 	ToolContextType,
 	ToolLaunchRequestResponse,
 } from "@/serverApi/v3/api";
@@ -67,7 +68,7 @@ describe("ExternalToolApi.composable", () => {
 				payload: launchRequest.payload,
 				method: ToolLaunchRequestMethodEnum.Get,
 				openNewTab: launchRequest.openNewTab,
-				isDeepLink: false,
+				launchType: LaunchType.Basic,
 			});
 		});
 	});
@@ -119,7 +120,7 @@ describe("ExternalToolApi.composable", () => {
 				payload: launchRequest.payload,
 				method: ToolLaunchRequestMethodEnum.Get,
 				openNewTab: launchRequest.openNewTab,
-				isDeepLink: false,
+				launchType: LaunchType.Basic,
 			});
 		});
 	});

src/modules/data/external-tool/ExternalToolLaunchState.composable.ts

@@ -1,22 +1,28 @@
-import { ContextExternalToolBodyParams } from "@/serverApi/v3";
+import { ContextExternalToolBodyParams, LaunchType } from "@/serverApi/v3";
 import {
 	ToolLaunchRequest,
 	ToolLaunchRequestMethodEnum,
 } from "@/store/external-tool";
 import { BusinessError } from "@/store/types/commons";
 import { HttpStatusCode } from "@/store/types/http-status-code.enum";
 import { mapAxiosErrorToResponseError } from "@/utils/api";
-import { ref, Ref } from "vue";
+import { uniqueId } from "lodash";
+import { onUnmounted, ref, Ref } from "vue";
 import { useExternalToolApi } from "./ExternalToolApi.composable";
 
-export const useExternalToolLaunchState = () => {
+export const useExternalToolLaunchState = (
+	refreshCallback?: () => Promise<void> | void
+) => {
 	const { fetchContextLaunchDataCall, fetchSchoolLaunchDataCall } =
 		useExternalToolApi();
 
 	const isLoading: Ref<boolean> = ref(false);
 	const error: Ref<BusinessError | undefined> = ref();
 	const toolLaunchRequest: Ref<ToolLaunchRequest | undefined> = ref();
 
+	const windowRef: Ref<Window | null> = ref(null);
+	const windowIntervalHandle: Ref<NodeJS.Timeout | undefined> = ref();
+
 	const fetchContextLaunchRequest = async (
 		contextExternalToolId: string
 	): Promise<void> => {
@@ -103,9 +109,11 @@ export const useExternalToolLaunchState = () => {
 		const form: HTMLFormElement = document.createElement("form");
 		form.method = "POST";
 		form.action = toolLaunch.url;
-		form.target = toolLaunch.openNewTab ? "_blank" : "_self";
 		form.id = "launch-form";
 
+		const target = uniqueId();
+		form.target = toolLaunch.openNewTab ? target : "_self";
+
 		const payload = JSON.parse(toolLaunch.payload || "{}");
 
 		for (const key in payload) {
@@ -121,9 +129,27 @@ export const useExternalToolLaunchState = () => {
 
 		document.body.appendChild(form);
 
+		windowRef.value = window.open(undefined, form.target);
+
 		form.submit();
+
+		if (toolLaunch.launchType === LaunchType.Lti11ContentItemSelection) {
+			windowIntervalHandle.value = setInterval(async () => {
+				if (windowRef.value?.closed) {
+					await refreshCallback?.();
+
+					// Cleanup
+					windowRef.value = null;
+					clearInterval(windowIntervalHandle.value);
+				}
+			}, 1000);
+		}
 	};
 
+	onUnmounted(() => {
+		clearInterval(windowIntervalHandle.value);
+	});
+
 	return {
 		toolLaunchRequest,
 		error,

src/modules/data/external-tool/ExternalToolLaunchState.composable.unit.ts

@@ -1,4 +1,8 @@
-import { ContextExternalToolBodyParams, ToolContextType } from "@/serverApi/v3";
+import {
+	ContextExternalToolBodyParams,
+	LaunchType,
+	ToolContextType,
+} from "@/serverApi/v3";
 import {
 	ToolLaunchRequest,
 	ToolLaunchRequestMethodEnum,
@@ -11,6 +15,7 @@ import { toolLaunchRequestFactory } from "@@/tests/test-utils/factory/toolLaunch
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { useExternalToolApi } from "./ExternalToolApi.composable";
 import { useExternalToolLaunchState } from "./ExternalToolLaunchState.composable";
+import { nextTick } from "vue";
 
 jest.mock("@data-external-tool/ExternalToolApi.composable");
 
@@ -64,7 +69,7 @@ describe("ExternalToolLaunchState.composable", () => {
 					url: response.url,
 					payload: response.payload,
 					openNewTab: response.openNewTab,
-					isDeepLink: false,
+					launchType: LaunchType.Basic,
 				});
 			});
 
@@ -152,7 +157,7 @@ describe("ExternalToolLaunchState.composable", () => {
 					url: response.url,
 					payload: response.payload,
 					openNewTab: response.openNewTab,
-					isDeepLink: false,
+					launchType: response.launchType,
 				});
 			});
 
@@ -279,11 +284,12 @@ describe("ExternalToolLaunchState.composable", () => {
 		});
 
 		describe("when launching a tool with post method", () => {
-			describe("when opening in the same tab", () => {
+			describe("when opening in a new tab", () => {
 				const setup = () => {
 					const launchRequest = toolLaunchRequestFactory.build({
 						method: ToolLaunchRequestMethodEnum.Post,
-						openNewTab: false,
+						openNewTab: true,
+						payload: "",
 					});
 
 					const composable = useExternalToolLaunchState();
@@ -295,25 +301,24 @@ describe("ExternalToolLaunchState.composable", () => {
 					};
 				};
 
-				it("should create a launch form with target _self", () => {
+				it("should create a launch form with a number as the target ", () => {
 					const { launchRequest, launchTool } = setup();
 
 					launchTool();
 
 					const form = document.getElementById("launch-form");
 
 					expect(form?.outerHTML).toEqual(
-						`<form method="POST" action="${launchRequest.url}" target="_self" id="launch-form"><input type="hidden" name="key" value="value"></form>`
+						`<form method="POST" action="${launchRequest.url}" id="launch-form" target="1"></form>`
 					);
 				});
 			});
 
-			describe("when opening in a new tab", () => {
+			describe("when opening in the same tab", () => {
 				const setup = () => {
 					const launchRequest = toolLaunchRequestFactory.build({
 						method: ToolLaunchRequestMethodEnum.Post,
-						openNewTab: true,
-						payload: "",
+						openNewTab: false,
 					});
 
 					const composable = useExternalToolLaunchState();
@@ -325,15 +330,15 @@ describe("ExternalToolLaunchState.composable", () => {
 					};
 				};
 
-				it("should create a launch form with target _blank", () => {
+				it("should create a launch form with target _self", () => {
 					const { launchRequest, launchTool } = setup();
 
 					launchTool();
 
 					const form = document.getElementById("launch-form");
 
 					expect(form?.outerHTML).toEqual(
-						`<form method="POST" action="${launchRequest.url}" target="_blank" id="launch-form"></form>`
+						`<form method="POST" action="${launchRequest.url}" id="launch-form" target="_self"><input type="hidden" name="key" value="value"></form>`
 					);
 				});
 			});
@@ -403,5 +408,84 @@ describe("ExternalToolLaunchState.composable", () => {
 				expect(window.open).not.toHaveBeenCalled();
 			});
 		});
+
+		describe("when the launch is with launchType Lti11ContentItemSelection", () => {
+			const setup = () => {
+				const refreshCallback = jest.fn();
+				const launchRequest = toolLaunchRequestFactory.build({
+					method: ToolLaunchRequestMethodEnum.Post,
+					openNewTab: true,
+					launchType: LaunchType.Lti11ContentItemSelection,
+				});
+
+				const composable = useExternalToolLaunchState(refreshCallback);
+				composable.toolLaunchRequest.value = launchRequest;
+
+				const mockWindow = {
+					closed: false,
+				};
+
+				jest
+					.spyOn(window, "open")
+					.mockReturnValue(mockWindow as unknown as Window);
+
+				const setInterval = jest.spyOn(window, "setInterval");
+				const clearInterval = jest.spyOn(window, "clearInterval");
+
+				return {
+					...composable,
+					refreshCallback,
+					setInterval,
+					clearInterval,
+					mockWindow,
+				};
+			};
+
+			afterEach(() => {
+				jest.useRealTimers();
+				jest.restoreAllMocks();
+			});
+
+			it("should call refreshCallback", async () => {
+				jest.useFakeTimers();
+				const {
+					launchTool,
+					refreshCallback,
+					mockWindow,
+					setInterval,
+					clearInterval,
+				} = setup();
+
+				launchTool();
+
+				expect(setInterval).toHaveBeenCalled();
+				expect(mockWindow.closed).toBe(false);
+
+				mockWindow.closed = true;
+
+				jest.advanceTimersByTime(1000);
+				await nextTick();
+
+				expect(refreshCallback).toHaveBeenCalled();
+				expect(clearInterval).toHaveBeenCalled();
+			});
+
+			it("should not call refreshCallback", async () => {
+				jest.useFakeTimers();
+				const { launchTool, refreshCallback, mockWindow } = setup();
+
+				launchTool();
+
+				expect(setInterval).toHaveBeenCalled();
+
+				mockWindow.closed = false;
+
+				jest.advanceTimersByTime(1000);
+				await nextTick();
+
+				expect(refreshCallback).not.toHaveBeenCalled();
+				expect(clearInterval).not.toHaveBeenCalled();
+			});
+		});
 	});
 });

src/modules/data/external-tool/externalToolReferenceApi.composable.unit.ts

@@ -62,6 +62,7 @@ describe("externalToolReferenceApi.composable", () => {
 				logoUrl: displayData.logoUrl,
 				status: contextExternalToolConfigurationStatusFactory.build(),
 				openInNewTab: displayData.openInNewTab,
+				isLtiDeepLinkingTool: displayData.isLtiDeepLinkingTool,
 			});
 		});
 	});
@@ -109,6 +110,7 @@ describe("externalToolReferenceApi.composable", () => {
 					logoUrl: displayData.logoUrl,
 					status: contextExternalToolConfigurationStatusFactory.build(),
 					openInNewTab: displayData.openInNewTab,
+					isLtiDeepLinkingTool: displayData.isLtiDeepLinkingTool,
 				},
 			]);
 		});

src/modules/data/external-tool/types/external-tool-display-data.ts

@@ -1,3 +1,4 @@
+import { LtiDeepLinkResponse } from "@/serverApi/v3";
 import { ContextExternalToolConfigurationStatus } from "./context-external-tool-configuration-status";
 
 export type ExternalToolDisplayData = {
@@ -14,4 +15,8 @@ export type ExternalToolDisplayData = {
 	openInNewTab: boolean;
 
 	status: ContextExternalToolConfigurationStatus;
+
+	isLtiDeepLinkingTool: boolean;
+
+	ltiDeepLink?: LtiDeepLinkResponse;
 };