N21-2167 preferred tools for boards

src/components/administration/ExternalToolSection.unit.ts

@@ -1,5 +1,7 @@
+import { ConfigResponse } from "@/serverApi/v3";
 import AuthModule from "@/store/auth";
 import EnvConfigModule from "@/store/env-config";
+import { SchoolExternalToolMetadata } from "@/store/external-tool";
 import NotifierModule from "@/store/notifier";
 import SchoolExternalToolsModule from "@/store/school-external-tools";
 import {
@@ -28,8 +30,6 @@ import { nextTick, ref } from "vue";
 import vueDompurifyHTMLPlugin from "vue-dompurify-html";
 import { Router, useRouter } from "vue-router";
 import ExternalToolSection from "./ExternalToolSection.vue";
-import { SchoolExternalToolMetadata } from "@/store/external-tool";
-import { ConfigResponse } from "@/serverApi/v3";
 
 jest.mock("@data-external-tool");
 
@@ -402,6 +402,7 @@ describe("ExternalToolSection", () => {
 					statusText: "statusText",
 					isOutdated: false,
 					isDeactivated: false,
+					restrictToContexts: "",
 				};
 
 				const itemName: string = wrapper.vm.getItemName;

src/components/external-tools/configuration/ContextExternalToolConfigurator.unit.ts

@@ -1,7 +1,11 @@
 import ExternalToolConfigurator from "@/components/external-tools/configuration/ExternalToolConfigurator.vue";
 import { ToolContextType } from "@/serverApi/v3";
 import NotifierModule from "@/store/notifier";
-import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import SchoolExternalToolsModule from "@/store/school-external-tools";
+import {
+	NOTIFIER_MODULE_KEY,
+	SCHOOL_EXTERNAL_TOOLS_MODULE_KEY,
+} from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import {
 	businessErrorFactory,
@@ -40,15 +44,25 @@ describe("CourseContextExternalToolConfigurator", () => {
 	>;
 
 	const getWrapper = (
-		props: ComponentProps<typeof ContextExternalToolConfigurator>
+		props: ComponentProps<typeof ContextExternalToolConfigurator>,
+		getters: Partial<SchoolExternalToolsModule> = {}
 	) => {
 		const notifierModule = createModuleMocks(NotifierModule);
+		const schoolExternalToolsModule = createModuleMocks(
+			SchoolExternalToolsModule,
+			{
+				getContextExternalToolConfigurationTemplate: undefined,
+				...getters,
+			}
+		);
 
 		const wrapper = mount(ContextExternalToolConfigurator, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 				provide: {
 					[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+					[SCHOOL_EXTERNAL_TOOLS_MODULE_KEY.valueOf()]:
+						schoolExternalToolsModule,
 				},
 			},
 			props,
@@ -144,6 +158,49 @@ describe("CourseContextExternalToolConfigurator", () => {
 				).toHaveBeenCalledWith("configId");
 			});
 		});
+
+		describe("when a preferred tool with a custom parameter is loaded", () => {
+			const setup = async () => {
+				const contextExternalToolConfigurationTemplate =
+					contextExternalToolConfigurationTemplateFactory.build();
+				const { wrapper } = getWrapper(
+					{
+						contextId: "contextId",
+						contextType: ToolContextType.BoardElement,
+					},
+					{
+						getContextExternalToolConfigurationTemplate:
+							contextExternalToolConfigurationTemplate,
+					}
+				);
+
+				return {
+					wrapper,
+					contextExternalToolConfigurationTemplate,
+				};
+			};
+
+			it("should not fetch available tools", async () => {
+				const { wrapper } = await setup();
+
+				await wrapper.vm.fetchData();
+
+				expect(
+					useContextExternalToolConfigurationStateMock.fetchAvailableToolConfigurationsForContext
+				).not.toHaveBeenCalledWith("contextId", ToolContextType.BoardElement);
+			});
+
+			it("should set the preferred tool as an available tool", async () => {
+				const { wrapper, contextExternalToolConfigurationTemplate } =
+					await setup();
+
+				await wrapper.vm.fetchData();
+
+				expect(
+					useContextExternalToolConfigurationStateMock.availableTools.value
+				).toEqual([contextExternalToolConfigurationTemplate]);
+			});
+		});
 	});
 
 	describe("onCancel", () => {

src/components/external-tools/configuration/ContextExternalToolConfigurator.vue

@@ -2,6 +2,7 @@
 	<external-tool-configurator
 		:templates="availableTools"
 		:configuration="configuration"
+		:isPreferredTool="isPreferredTool"
 		:error="apiError"
 		:loading="loading"
 		:display-settings-title="displaySettingsTitle"
@@ -27,7 +28,9 @@
 import ExternalToolConfigurator from "@/components/external-tools/configuration/ExternalToolConfigurator.vue";
 import { ToolContextType } from "@/serverApi/v3";
 import { ToolParameterEntry } from "@/store/external-tool";
+import SchoolExternalToolsModule from "@/store/school-external-tools";
 import { BusinessError } from "@/store/types/commons";
+import { injectStrict, SCHOOL_EXTERNAL_TOOLS_MODULE_KEY } from "@/utils/inject";
 import {
 	ContextExternalTool,
 	ContextExternalToolConfigurationTemplate,
@@ -86,6 +89,15 @@ const apiError: ComputedRef<BusinessError | undefined> = computed(
 	() => configError.value || templateError.value
 );
 
+const schoolExternalToolsModule: SchoolExternalToolsModule = injectStrict(
+	SCHOOL_EXTERNAL_TOOLS_MODULE_KEY
+);
+
+const preferredTool =
+	schoolExternalToolsModule.getContextExternalToolConfigurationTemplate;
+
+const isPreferredTool: Ref<boolean> = ref(false);
+
 const onCancel = async () => {
 	emit("cancel");
 };
@@ -129,6 +141,12 @@ const fetchData = async () => {
 
 		await fetchContextExternalTool(props.configId);
 		displayName.value = configuration.value?.displayName;
+	} else if (preferredTool) {
+		availableTools.value = [preferredTool];
+		isPreferredTool.value = true;
+		schoolExternalToolsModule.setContextExternalToolConfigurationTemplate(
+			undefined
+		);
 	} else {
 		await fetchAvailableToolConfigurationsForContext(
 			props.contextId,

src/components/external-tools/configuration/ExternalToolConfigurator.unit.ts

@@ -4,6 +4,8 @@
 import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import {
+	contextExternalToolConfigurationTemplateFactory,
+	contextExternalToolFactory,
 	schoolExternalToolConfigurationTemplateFactory,
 	schoolExternalToolFactory,
 	toolParameterFactory,
@@ -86,12 +88,40 @@
 			});
 		});
 
+		describe("when a preferred tool is loaded", () => {
+			const setup = () => {
+				const template1 =
+					contextExternalToolConfigurationTemplateFactory.build();
+				const template2 =
+					contextExternalToolConfigurationTemplateFactory.build();
+
+				const { wrapper } = getWrapper({
+					templates: [template1, template2],
+					configuration: contextExternalToolFactory.build(),
+					isPreferredTool: true,
+				});
+
+				return {
+					wrapper,
+					template1,
+				};
+			};
+
+			it("should display the preferred tool in the selection", async () => {
+				const { wrapper, template1 } = setup();
+
+				const selectionRow = wrapper.find(".v-autocomplete .v-list-item-title");
+
+				expect(selectionRow.text()).toEqual(template1.name);
+			});
+		});
+
 		describe("when clicking on the 'paste' icon", () => {
 			const setup = () => {
 				const clipboardText = "https://google.de";
 				const template = schoolExternalToolConfigurationTemplateFactory.build();
 
 				const clipboardMock = createMock<Clipboard>();
 				Object.assign(navigator, { clipboard: clipboardMock });
 
 				const { wrapper } = getWrapper({

src/components/external-tools/configuration/ExternalToolConfigurator.vue

@@ -100,7 +100,6 @@
 
 <script setup lang="ts">
 import ExternalToolConfigSettings from "@/components/external-tools/configuration/ExternalToolConfigSettings.vue";
-import { mdiAlertCircle, mdiContentPaste } from "@icons/material";
 import { useExternalToolMappings } from "@/composables/external-tool-mappings.composable";
 import {
 	SchoolExternalTool,
@@ -114,6 +113,7 @@ import {
 	ContextExternalTool,
 	ExternalToolConfigurationTemplate,
 } from "@data-external-tool";
+import { mdiAlertCircle, mdiContentPaste } from "@icons/material";
 import {
 	computed,
 	ComputedRef,
@@ -145,6 +145,9 @@ const props = defineProps({
 	configuration: {
 		type: Object as PropType<ConfigurationTypes>,
 	},
+	isPreferredTool: {
+		type: Boolean,
+	},
 	error: {
 		type: Object as PropType<BusinessError>,
 	},
@@ -364,4 +367,10 @@ const filterToolNameOrUrl = (
 
 	return isMatchItemName || isMatchItemUrl;
 };
+
+watch(configurationTemplates, () => {
+	if (props.isPreferredTool) {
+		selectedTemplate.value = props.templates[0];
+	}
+});
 </script>

src/components/share/ShareModalResult.vue

@@ -15,31 +15,31 @@
 					class="d-sm-none d-flex"
 					data-testid="mobilePlatformAction"
 					:icon="mdiShareVariantOutline"
-					label="common.actions.share"
+					:label="$t('common.actions.share')"
 					@click.stop="onShareMobilePlatflorm(shareUrl)"
 				/>
 
 				<ExtendedIconBtn
 					class="d-sm-flex d-none"
 					data-testid="shareMailAction"
 					:icon="mdiEmailOutline"
-					label="components.molecules.share.result.mailShare"
+					:label="$t('components.molecules.share.result.mailShare')"
 					@click.stop="onMailShareUrl(shareUrl, type)"
 				/>
 
 				<ExtendedIconBtn
 					class="d-sm-flex d-none"
 					data-testid="copyAction"
 					:icon="mdiContentCopy"
-					label="components.molecules.share.result.copyClipboard"
+					:label="$t('components.molecules.share.result.copyClipboard')"
 					@click.stop="onCopy(shareUrl)"
 				/>
 
 				<ExtendedIconBtn
 					class="d-flex"
 					data-testid="qrCodeAction"
 					:icon="mdiQrcode"
-					label="components.molecules.share.result.qrCodeScan"
+					:label="$t('components.molecules.share.result.qrCodeScan')"
 					@click.stop="onShowQrCode"
 				/>
 			</div>

src/modules/data/board/BoardApi.composable.ts

@@ -7,14 +7,14 @@ import {
 	CardResponse,
 	ColumnResponse,
 	ContentElementType,
+	CourseRoomsApiFactory,
 	CreateCardBodyParamsRequiredEmptyElementsEnum,
 	CreateContentElementBodyParams,
 	DrawingElementContent,
 	ExternalToolElementContentBody,
 	FileElementContentBody,
 	LinkElementContentBody,
 	RichTextElementContentBody,
-	CourseRoomsApiFactory,
 	SubmissionContainerElementContentBody,
 } from "@/serverApi/v3";
 import { BoardContextType } from "@/types/board/BoardContext";

src/modules/data/board/Card.store.ts

@@ -1,4 +1,9 @@
-import { CardResponse, ContentElementType } from "@/serverApi/v3";
+import {
+	CardResponse,
+	ContentElementType,
+	PreferredToolResponse,
+	ToolContextType,
+} from "@/serverApi/v3";
 import { envConfigModule } from "@/store";
 import { useSharedEditMode, useSharedLastCreatedElement } from "@util-board";
 import { defineStore } from "pinia";
@@ -7,6 +12,7 @@ import { CreateCardSuccessPayload } from "./boardActions/boardActionPayload";
 
 import { useBoardFocusHandler } from "./BoardFocusHandler.composable";
 import {
+	CreateElementRequestPayload,
 	CreateElementSuccessPayload,
 	DeleteCardSuccessPayload,
 	DeleteElementSuccessPayload,
@@ -21,6 +27,7 @@ import { useCardSocketApi } from "./cardActions/cardSocketApi.composable";
 
 export const useCardStore = defineStore("cardStore", () => {
 	const cards = ref<Record<string, CardResponse>>({});
+	const preferredTools = ref<PreferredToolResponse[]>();
 	const { lastCreatedElementId } = useSharedLastCreatedElement();
 
 	const restApi = useCardRestApi();
@@ -90,6 +97,13 @@ export const useCardStore = defineStore("cardStore", () => {
 
 	const createElementRequest = socketOrRest.createElementRequest;
 
+	const createPreferredElement = async (
+		payload: CreateElementRequestPayload,
+		tool: PreferredToolResponse
+	) => {
+		restApi.createPreferredElement(payload, tool);
+	};
+
 	const createElementSuccess = async (payload: CreateElementSuccessPayload) => {
 		const card = cards.value[payload.cardId];
 		if (card === undefined) return;
@@ -109,6 +123,7 @@ export const useCardStore = defineStore("cardStore", () => {
 			lastCreatedElementId.value = payload.newElement.id;
 			setFocus(payload.newElement.id);
 		}
+
 		return payload.newElement;
 	};
 
@@ -220,7 +235,16 @@ export const useCardStore = defineStore("cardStore", () => {
 		return previousElement.id;
 	};
 
+	const loadPreferredTools = async (contextType: ToolContextType) => {
+		preferredTools.value = await restApi.getPreferredTools(contextType);
+	};
+
+	const getPreferredTools = (): PreferredToolResponse[] | undefined => {
+		return preferredTools.value;
+	};
+
 	return {
+		createPreferredElement,
 		createCardSuccess,
 		createElementRequest,
 		createElementSuccess,
@@ -242,5 +266,8 @@ export const useCardStore = defineStore("cardStore", () => {
 		updateCardHeightSuccess,
 		updateCardTitleRequest,
 		updateCardTitleSuccess,
+		loadPreferredTools,
+		preferredTools,
+		getPreferredTools,
 	};
 });