N21-1319 ctl showing tool usage

src/components/administration/ExternalToolSection.unit.ts

@@ -14,13 +14,25 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { i18nMock } from "@@/tests/test-utils/i18nMock";
 import { mdiCheckCircle, mdiRefreshCircle } from "@mdi/js";
 import { mount, Wrapper } from "@vue/test-utils";
-import Vue from "vue";
+import Vue, { ref } from "vue";
 import ExternalToolSection from "./ExternalToolSection.vue";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { useSchoolExternalToolUsage } from "@data-external-tool";
+import {
+	schoolExternalToolFactory,
+	schoolExternalToolMetadataFactory,
+} from "@@/tests/test-utils/factory";
+
+jest.mock("@data-external-tool");
 
 describe("ExternalToolSection", () => {
 	let el: HTMLDivElement;
 
-	const setup = (getters: Partial<SchoolExternalToolsModule> = {}) => {
+	let useSchoolExternalToolUsageMock: DeepMocked<
+		ReturnType<typeof useSchoolExternalToolUsage>
+	>;
+
+	const getWrapper = (getters: Partial<SchoolExternalToolsModule> = {}) => {
 		el = document.createElement("div");
 		el.setAttribute("data-app", "true");
 		document.body.appendChild(el);
@@ -63,17 +75,26 @@ describe("ExternalToolSection", () => {
 		};
 	};
 
+	beforeEach(() => {
+		useSchoolExternalToolUsageMock =
+			createMock<ReturnType<typeof useSchoolExternalToolUsage>>();
+
+		jest
+			.mocked(useSchoolExternalToolUsage)
+			.mockReturnValue(useSchoolExternalToolUsageMock);
+	});
+
 	describe("when component is used", () => {
 		it("should be found in the dom", () => {
-			const { wrapper } = setup();
+			const { wrapper } = getWrapper();
 			expect(wrapper.findComponent(ExternalToolSection).exists()).toBeTruthy();
 		});
 	});
 
 	describe("onMounted is called", () => {
 		describe("when component is mounted", () => {
 			it("should load the external tools", () => {
-				const { schoolExternalToolsModule } = setup();
+				const { schoolExternalToolsModule } = getWrapper();
 
 				expect(
 					schoolExternalToolsModule.loadSchoolExternalTools
@@ -86,7 +107,7 @@ describe("ExternalToolSection", () => {
 		const setupItems = () => {
 			const firstToolName = "Test";
 			const secondToolName = "Test2";
-			const { wrapper, schoolExternalToolsModule } = setup({
+			const { wrapper, schoolExternalToolsModule } = getWrapper({
 				getSchoolExternalTools: [
 					{
 						id: "testId",
@@ -213,7 +234,7 @@ describe("ExternalToolSection", () => {
 
 				describe("when deletion is confirmed", () => {
 					it("should call externalToolsModule.deleteSchoolExternalTool", async () => {
-						const { wrapper, schoolExternalToolsModule } = setup({
+						const { wrapper, schoolExternalToolsModule } = getWrapper({
 							getSchoolExternalTools: [
 								{
 									id: "testId",
@@ -234,7 +255,9 @@ describe("ExternalToolSection", () => {
 						const deleteButton = firstRowButtons.at(1);
 						await deleteButton.trigger("click");
 
-						const confirmButton = wrapper.find("[data-testId=dialog-confirm]");
+						const confirmButton = wrapper.find(
+							"[data-testId=delete-dialog-confirm]"
+						);
 						await confirmButton.trigger("click");
 
 						expect(
@@ -243,7 +266,7 @@ describe("ExternalToolSection", () => {
 					});
 
 					it("should call notifierModule.show", async () => {
-						const { wrapper, notifierModule } = setup({
+						const { wrapper, notifierModule } = getWrapper({
 							getSchoolExternalTools: [
 								{
 									id: "testId",
@@ -264,7 +287,9 @@ describe("ExternalToolSection", () => {
 						const deleteButton = firstRowButtons.at(1);
 						await deleteButton.trigger("click");
 
-						const confirmButton = wrapper.find("[data-testId=dialog-confirm]");
+						const confirmButton = wrapper.find(
+							"[data-testId=delete-dialog-confirm]"
+						);
 						await confirmButton.trigger("click");
 
 						expect(notifierModule.show).toHaveBeenCalled();
@@ -277,7 +302,7 @@ describe("ExternalToolSection", () => {
 	describe("getItemName is called", () => {
 		describe("when itemToDelete is set", () => {
 			it("should return the name", () => {
-				const { wrapper } = setup();
+				const { wrapper } = getWrapper();
 
 				const expectedName = "Name";
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -298,7 +323,7 @@ describe("ExternalToolSection", () => {
 
 		describe("when itemToDelete is not set", () => {
 			it("should return an empty string", () => {
-				const { wrapper } = setup();
+				const { wrapper } = getWrapper();
 
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				//@ts-ignore
@@ -312,4 +337,100 @@ describe("ExternalToolSection", () => {
 			});
 		});
 	});
+
+	describe("when deleting a schoolExternalTool", () => {
+		describe("when metadata is given", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					getSchoolExternalTools: [
+						schoolExternalToolFactory.build({}),
+						schoolExternalToolFactory.build(),
+					],
+				});
+
+				const schoolExternalToolMetadata =
+					schoolExternalToolMetadataFactory.build();
+
+				useSchoolExternalToolUsageMock.metadata = ref(
+					schoolExternalToolMetadata
+				);
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should display tool usage count", async () => {
+				const { wrapper } = setup();
+
+				const deletebtn = wrapper.find('[data-testId="deleteAction"]');
+				await deletebtn.trigger("click");
+
+				const toolUsageCount = wrapper.find(
+					'[data-testid="delete-dialog-content"]'
+				);
+
+				expect(toolUsageCount).not.toBe("visible");
+			});
+
+			it("should display notification", async () => {
+				const { wrapper } = setup();
+
+				const deletebtn = wrapper.find('[data-testId="deleteAction"]');
+				await deletebtn.trigger("click");
+
+				const toolUsageCount = wrapper.find(
+					'[data-testid="delete-dialog-content"]'
+				);
+
+				expect(toolUsageCount).not.toBe("visible");
+			});
+		});
+
+		describe("when metadata is undefined", () => {
+			const setup = () => {
+				const { wrapper, notifierModule } = getWrapper({
+					getSchoolExternalTools: [
+						schoolExternalToolFactory.build({}),
+						schoolExternalToolFactory.build(),
+					],
+				});
+
+				useSchoolExternalToolUsageMock.metadata = ref(undefined);
+
+				return {
+					wrapper,
+					notifierModule,
+				};
+			};
+
+			it("should not display delete dialog", async () => {
+				const { wrapper } = setup();
+
+				const tableRows = wrapper.find("tbody").findAll("tr");
+
+				const firstRowButtons = tableRows.at(0).findAll("button");
+
+				const deleteButton = firstRowButtons.at(1);
+				await deleteButton.trigger("click");
+
+				const toolUsageCount = wrapper.find('[data-testid="delete-dialog"]');
+
+				expect(toolUsageCount).not.toBe("visible");
+			});
+
+			it("should display notification", async () => {
+				const { wrapper, notifierModule } = setup();
+
+				const deletebtn = wrapper.find('[data-testId="deleteAction"]');
+				await deletebtn.trigger("click");
+
+				expect(notifierModule.show).toHaveBeenCalled();
+				expect(notifierModule.show).toHaveBeenCalledWith({
+					status: "error",
+					text: "components.administration.externalToolsSection.dialog.content.metadata.error",
+				});
+			});
+		});
+	});
 });

src/components/administration/ExternalToolSection.vue

@@ -4,6 +4,7 @@
 			{{ t("components.administration.externalToolsSection.info") }}
 		</p>
 		<v-data-table
+			data-testid="external-tool-section-table"
 			v-if="items.length"
 			:disable-pagination="true"
 			:hide-default-footer="true"
@@ -45,9 +46,14 @@
 			{{ t("components.administration.externalToolsSection.action.add") }}
 		</v-btn>
 
-		<v-dialog v-model="isDeleteDialogOpen" max-width="360">
+		<v-dialog
+			v-if="metadata"
+			data-testid="delete-dialog"
+			v-model="isDeleteDialogOpen"
+			max-width="360"
+		>
 			<v-card :ripple="false">
-				<v-card-title>
+				<v-card-title data-testid="delete-dialog-title">
 					<h2 class="text-h4 my-2">
 						{{
 							t("components.administration.externalToolsSection.dialog.title")
@@ -56,11 +62,16 @@
 				</v-card-title>
 				<v-card-text class="text--primary">
 					<RenderHTML
+						data-testid="delete-dialog-content"
 						class="text-md mt-2"
 						:html="
 							t(
 								'components.administration.externalToolsSection.dialog.content',
-								{ itemName: getItemName }
+								{
+									itemName: getItemName,
+									courseCount: metadata.course,
+									boardElementCount: metadata.boardElement,
+								}
 							)
 						"
 						component="p"
@@ -69,7 +80,7 @@
 				<v-card-actions>
 					<v-spacer />
 					<v-btn
-						data-testId="dialog-cancel"
+						data-testId="delete-dialog-cancel"
 						class="dialog-closed"
 						depressed
 						text
@@ -78,7 +89,7 @@
 						{{ t("common.actions.cancel") }}
 					</v-btn>
 					<v-btn
-						data-testId="dialog-confirm"
+						data-testId="delete-dialog-confirm"
 						class="dialog-confirmed px-6"
 						color="primary"
 						depressed
@@ -120,6 +131,7 @@ import { DataTableHeader } from "vuetify";
 import { useExternalToolsSectionUtils } from "./external-tool-section-utils.composable";
 import ExternalToolToolbar from "./ExternalToolToolbar.vue";
 import { SchoolExternalToolItem } from "./school-external-tool-item";
+import { useSchoolExternalToolUsage } from "@data-external-tool";
 
 export default defineComponent({
 	name: "ExternalToolSection",
@@ -147,6 +159,8 @@ export default defineComponent({
 			i18n.tc(key, 0, values);
 
 		const { getHeaders, getItems } = useExternalToolsSectionUtils(t);
+		const { fetchSchoolExternalToolUsage, metadata } =
+			useSchoolExternalToolUsage();
 
 		const headers: DataTableHeader[] = getHeaders;
 
@@ -189,9 +203,18 @@ export default defineComponent({
 
 		const isDeleteDialogOpen: Ref<boolean> = ref(false);
 
-		const openDeleteDialog = (item: SchoolExternalToolItem) => {
+		const openDeleteDialog = async (item: SchoolExternalToolItem) => {
 			itemToDelete.value = item;
 			isDeleteDialogOpen.value = true;
+			await fetchSchoolExternalToolUsage(item.id);
+			if (!metadata.value) {
+				notifierModule.show({
+					text: t(
+						"components.administration.externalToolsSection.dialog.content.metadata.error"
+					),
+					status: "error",
+				});
+			}
 		};
 
 		const onCloseDeleteDialog = () => {
@@ -214,6 +237,7 @@ export default defineComponent({
 			getItemName,
 			mdiRefreshCircle,
 			mdiCheckCircle,
+			metadata,
 		};
 	},
 });

src/components/data-external-tool/SchoolExternalApi.composable.unit.ts

@@ -0,0 +1,63 @@
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import * as serverApi from "../../serverApi/v3/api";
+import { SchoolExternalToolMetadataResponse } from "../../serverApi/v3/api";
+import { mockApiResponse } from "../../../tests/test-utils";
+import { useExternalToolApi } from "./ExternalToolApi.composable";
+import {
+	SchoolExternalToolMetadata,
+} from "../../store/external-tool";
+import { schoolExternalToolMetadataResponseFactory } from "../../../tests/test-utils/factory/schoolExternalToolMetadataResponseFactory";
+import { useSchoolExternalToolApi } from "./SchoolExternalToolApi.composable";
+
+describe("SchoolExternalToolApi.composable", () => {
+	let toolApi: DeepMocked<serverApi.ToolApiInterface>;
+
+	beforeEach(() => {
+		toolApi = createMock<serverApi.ToolApiInterface>();
+
+		jest.spyOn(serverApi, "ToolApiFactory").mockReturnValue(toolApi);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe("fetchSchoolExternalToolMetadata", () => {
+		const setup = () => {
+			const request: SchoolExternalToolMetadataResponse =
+				schoolExternalToolMetadataResponseFactory.build();
+
+			toolApi.toolSchoolControllerGetMetaDataForExternalTool.mockResolvedValue(
+				mockApiResponse({ data: request })
+			);
+
+			return {
+				request,
+			};
+		};
+
+		it("should call the api for metadata of schoolExternalTool", async () => {
+			setup();
+
+			await useExternalToolApi().fetchLaunchDataCall("contextExternalToolId");
+
+			expect(
+				toolApi.toolLaunchControllerGetToolLaunchRequest
+			).toHaveBeenCalledWith("contextExternalToolId");
+		});
+
+		it("should return metadata", async () => {
+			const { request } = setup();
+
+			const result: SchoolExternalToolMetadata =
+				await useSchoolExternalToolApi().fetchSchoolExternalToolMetadata(
+					"schoolExternalToolId"
+				);
+
+			expect(result).toEqual<SchoolExternalToolMetadata>({
+				course: 5,
+				boardElement: 6,
+			});
+		});
+	});
+});