Merge branch 'main' into BC-8427-member-dialogs-a11y

hpi-schul-cloud · Dec 11, 2024 · 4dd9439 · 4dd9439
2 parents 6ec5504 + e152727
commit 4dd9439
Show file tree

Hide file tree

Showing 30 changed files with 1,103 additions and 647 deletions.
diff --git a/src/components/copy-result-modal/CopyResultModal.unit.ts b/src/components/copy-result-modal/CopyResultModal.unit.ts
@@ -151,53 +151,77 @@ describe("@/components/copy-result-modal/CopyResultModal", () => {
 			);
 		});
 
-		it("should render ctl tools info if root item is a Course and has no failed file ", () => {
-			const copyResultItems = mockLessonResultItems([]);
-
-			const envs = envsFactory.build({
-				FEATURE_CTL_TOOLS_TAB_ENABLED: true,
-			});
-			envConfigModule.setEnvs(envs);
-			const wrapper = createWrapper({
-				isOpen: true,
-				copyResultItems,
-				copyResultRootItemType: CopyApiResponseTypeEnum.Course,
-			});
-
-			const dialog = wrapper.findComponent(vCustomDialog);
-			const content = dialog.findComponent(".v-card-text").text();
-
-			expect(content).toContain(
-				"components.molecules.copyResult.ctlTools.info"
-			);
-		});
-
-		describe("when root item is a Course, has no failed file and CTL_TOOLS_COPY feature flag is enabled", () => {
-			const setup = () => {
-				const copyResultItems = mockLessonResultItems([]);
-				const wrapper = createWrapper({
-					isOpen: true,
-					copyResultItems,
-					copyResultRootItemType: CopyApiResponseTypeEnum.Course,
+		describe("when there is no failed file and CTL_TOOLS_COPY & CTL_TOOLS_TAB_ENABLED feature flag is enabled", () => {
+			describe("when the item has element of type external tool", () => {
+				const setup = () => {
+					const envs = envsFactory.build({
+						FEATURE_CTL_TOOLS_TAB_ENABLED: true,
+						FEATURE_CTL_TOOLS_COPY_ENABLED: true,
+					});
+					envConfigModule.setEnvs(envs);
+
+					const copyResultItems = mockLessonResultItems([]);
+					copyResultItems[0].elements.push({
+						title: "Course External Tool",
+						type: CopyApiResponseTypeEnum.ExternalTool,
+					});
+					copyResultItems[0].type = CopyApiResponseTypeEnum.Course;
+
+					const wrapper = createWrapper({
+						isOpen: true,
+						copyResultItems,
+						copyResultRootItemType: CopyApiResponseTypeEnum.Course,
+					});
+
+					return { wrapper };
+				};
+
+				it("should show the warning text for non-copyable course external tools", () => {
+					const { wrapper } = setup();
+
+					const dialog = wrapper.findComponent(vCustomDialog);
+					const content = dialog.findComponent(".v-card-text").text();
+
+					expect(content).toContain(
+						"components.molecules.copyResult.ctlTools.withFeature.info"
+					);
 				});
+			});
 
-				return { wrapper };
-			};
-
-			it("should render ctl tools copy info ", () => {
-				const envs = envsFactory.build({
-					FEATURE_CTL_TOOLS_TAB_ENABLED: true,
-					FEATURE_CTL_TOOLS_COPY_ENABLED: true,
+			describe("when there is an item of type ExternalToolElement", () => {
+				const setup = () => {
+					const envs = envsFactory.build({
+						FEATURE_CTL_TOOLS_TAB_ENABLED: true,
+						FEATURE_CTL_TOOLS_COPY_ENABLED: true,
+					});
+					envConfigModule.setEnvs(envs);
+
+					const copyResultItems = mockLessonResultItems([]);
+					copyResultItems[0].elements.push({
+						title: "Board External Tool Element",
+						type: CopyApiResponseTypeEnum.ExternalToolElement,
+					});
+					copyResultItems[0].type = CopyApiResponseTypeEnum.Course;
+
+					const wrapper = createWrapper({
+						isOpen: true,
+						copyResultItems,
+						copyResultRootItemType: CopyApiResponseTypeEnum.Course,
+					});
+
+					return { wrapper };
+				};
+
+				it("should show the warning text for non-copyable course external tools", () => {
+					const { wrapper } = setup();
+
+					const dialog = wrapper.findComponent(vCustomDialog);
+					const content = dialog.findComponent(".v-card-text").text();
+
+					expect(content).toContain(
+						"components.molecules.copyResult.ctlTools.withFeature.info"
+					);
 				});
-				envConfigModule.setEnvs(envs);
-				const { wrapper } = setup();
-
-				const dialog = wrapper.findComponent(vCustomDialog);
-				const content = dialog.findComponent(".v-card-text").text();
-
-				expect(content).toContain(
-					"components.molecules.copyResult.ctlTools.withFeature.info"
-				);
 			});
 		});
 

diff --git a/src/components/copy-result-modal/CopyResultModal.vue b/src/components/copy-result-modal/CopyResultModal.vue
@@ -128,7 +128,9 @@ export default {
 					title: this.$t("components.molecules.copyResult.label.files"),
 				},
 				{
-					isShow: this.hasFeatureCtlsToolsenabled,
+					isShow:
+						this.isFeatureCtlToolsEnabled &&
+						(this.hasExternalTool || this.hasExternalToolElement),
 					text: this.externalToolsInfoText,
 					title: this.$t("components.molecules.copyResult.label.externalTools"),
 				},
@@ -178,7 +180,7 @@ export default {
 				CopyApiResponseTypeEnum.CoursegroupGroup
 			);
 		},
-		hasFeatureCtlsToolsenabled() {
+		isFeatureCtlToolsEnabled() {
 			return envConfigModule.getCtlToolsTabEnabled;
 		},
 		hasErrors() {
@@ -206,6 +208,18 @@ export default {
 				? this.$t("components.molecules.copyResult.ctlTools.withFeature.info")
 				: this.$t("components.molecules.copyResult.ctlTools.info");
 		},
+		hasExternalTool() {
+			return this.hasElementOfType(
+				this.items,
+				CopyApiResponseTypeEnum.ExternalTool
+			);
+		},
+		hasExternalToolElement() {
+			return this.hasElementOfType(
+				this.items,
+				CopyApiResponseTypeEnum.ExternalToolElement
+			);
+		},
 	},
 	methods: {
 		hasElementOfType(items, types) {

diff --git a/src/components/copy-result-modal/CopyResultModalListItem.unit.ts b/src/components/copy-result-modal/CopyResultModalListItem.unit.ts
@@ -161,6 +161,10 @@ describe("@/components/copy-result-modal/CopyResultModalListItem", () => {
 				CopyApiResponseTypeEnum.CollaborativeTextEditorElement,
 				"components.molecules.copyResult.label.etherpad",
 			],
+			[
+				CopyApiResponseTypeEnum.ExternalToolElement,
+				"components.molecules.copyResult.label.toolElements",
+			],
 		];
 
 		map.forEach(([constant, languageConstant]) => {

diff --git a/src/components/copy-result-modal/CopyResultModalListItem.vue b/src/components/copy-result-modal/CopyResultModalListItem.vue
@@ -9,6 +9,7 @@
 				v-for="element in aggregatedElements()"
 				:key="element.type"
 				class="element-info"
+				data-testid="copy-result-list-item-element-info"
 			>
 				<span>
 					{{ element.count }} {{ element.type }}
@@ -121,6 +122,8 @@ export default {
 					return this.$t("components.molecules.copyResult.label.columnBoard");
 				case CopyApiResponseTypeEnum.DrawingElement:
 					return this.$t("components.molecules.copyResult.label.tldraw");
+				case CopyApiResponseTypeEnum.ExternalToolElement:
+					return this.$t("components.molecules.copyResult.label.toolElements");
 				default:
 					return this.$t("components.molecules.copyResult.label.unknown");
 			}

diff --git a/src/components/share/ImportModal.unit.ts b/src/components/share/ImportModal.unit.ts
@@ -2,11 +2,11 @@ import ImportModal from "@/components/share/ImportModal.vue";
 import EnvConfigModule from "@/store/env-config";
 import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
-import { mount } from "@vue/test-utils";
 import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
 
 describe("@components/share/ImportModal", () => {
 	const setup = (envConfigModuleGetter?: Partial<EnvConfigModule>) => {
@@ -122,11 +122,11 @@ describe("@components/share/ImportModal", () => {
 					`[data-testid="import-modal-external-tools-info"]`
 				);
 
-				expect(infoText.attributes("html")).toEqual(
-					"components.molecules.import.courses.options.ctlTools.infoText"
+				expect(infoText.text()).toEqual(
+					"components.molecules.shareImport.options.ctlTools.infoText.unavailable"
 				);
 			});
-			it("should not show course file info", () => {
+			it("should also show course file info", () => {
 				const { wrapper } = setup({ getCtlToolsTabEnabled: true });
 
 				const dialog = wrapper.findComponent({ name: "v-custom-dialog" });
@@ -136,7 +136,7 @@ describe("@components/share/ImportModal", () => {
 					`[data-testid="import-modal-coursefiles-info"]`
 				);
 
-				expect(infoText.exists()).toBe(false);
+				expect(infoText.exists()).toBe(true);
 			});
 		});
 		describe("show ctl tool info is disabled", () => {
@@ -176,7 +176,7 @@ describe("@components/share/ImportModal", () => {
 					);
 
 					expect(infoText.element.innerHTML).toEqual(
-						"components.molecules.import.courses.options.infoText"
+						"components.molecules.shareImport.options.restrictions.infoText.courseFiles"
 					);
 				});
 			});

diff --git a/src/components/share/ImportModal.vue b/src/components/share/ImportModal.vue
@@ -8,6 +8,7 @@
 		confirm-btn-title-key="common.actions.import"
 		@dialog-confirmed="onConfirm"
 		@dialog-canceled="onCancel"
+		data-testid="import-modal"
 	>
 		<template #title>
 			<div ref="textTitle" class="text-h4 my-2">
@@ -21,39 +22,88 @@
 					<div class="mx-2">
 						<v-icon color="info" :icon="mdiInformation" />
 					</div>
-					<RenderHTML
-						data-testid="import-modal-external-tools-info"
-						v-if="ctlToolsEnabled && parentType === 'courses'"
-						:html="
-							t(
-								`components.molecules.import.${parentType}.options.ctlTools.infoText`
-							)
-						"
-					/>
-					<div v-else data-testid="import-modal-coursefiles-info">
-						{{
-							t(`components.molecules.import.${parentType}.options.infoText`)
-						}}
+					<div data-testid="import-options-table-header">
+						{{ t("components.molecules.import.options.tableHeader.InfoText") }}
+						<ul class="ml-6">
+							<li data-testid="import-options-personal-data-text">
+								{{
+									t(
+										"components.molecules.shareImport.options.restrictions.infoText.personalData"
+									)
+								}}
+							</li>
+							<li
+								v-if="showCtlToolsInfo"
+								data-testid="import-modal-external-tools-info"
+							>
+								{{
+									t(
+										"components.molecules.shareImport.options.ctlTools.infoText.unavailable"
+									)
+								}}
+							</li>
+							<li
+								v-if="showCtlToolsInfo"
+								data-testid="import-modal-external-tools-protected-parameter-info"
+							>
+								{{
+									t(
+										"components.molecules.shareImport.options.ctlTools.infoText.protected"
+									)
+								}}
+							</li>
+							<li data-testid="import-modal-coursefiles-info">
+								{{
+									t(
+										"components.molecules.shareImport.options.restrictions.infoText.courseFiles"
+									)
+								}}
+							</li>
+							<li>
+								{{
+									t(
+										"components.molecules.shareImport.options.restrictions.infoText.etherpad"
+									)
+								}}
+							</li>
+							<li>
+								{{
+									t(
+										"components.molecules.shareImport.options.restrictions.infoText.geogebra"
+									)
+								}}
+							</li>
+							<li>
+								{{
+									t(
+										"components.molecules.shareImport.options.restrictions.infoText.courseGroups"
+									)
+								}}
+							</li>
+						</ul>
 					</div>
 				</div>
+				<div class="mb-4">
+					{{ t(`components.molecules.import.${parentType}.rename`) }}
+				</div>
 				<v-text-field
 					ref="nameInputText"
 					v-model="newName"
 					:label="t(`components.molecules.import.${parentType}.label`)"
 					:rules="[rules.required]"
+					data-testid="import-modal-name-input"
 				/>
 			</div>
 		</template>
 	</v-custom-dialog>
 </template>
 
 <script setup>
-import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
+import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
 import { mdiInformation } from "@icons/material";
 import { computed, reactive, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { RenderHTML } from "@feature-render-html";
 
 const emit = defineEmits(["import", "cancel"]);
 const props = defineProps({
@@ -82,7 +132,10 @@ const onConfirm = () => {
 };
 const onCancel = () => emit("cancel");
 
-const ctlToolsEnabled = computed(() => {
-	return envConfigModule.getCtlToolsTabEnabled;
+const showCtlToolsInfo = computed(() => {
+	return (
+		envConfigModule.getCtlToolsTabEnabled &&
+		(props.parentType === "courses" || props.parentType === "columnBoard")
+	);
 });
 </script>
diff --git a/src/components/share/SelectDestinationModal.vue b/src/components/share/SelectDestinationModal.vue
@@ -59,7 +59,7 @@ const props = defineProps({
 		required: true,
 	},
 	destinationType: {
-		type: Object as PropType<BoardExternalReferenceType>,
+		type: String as PropType<BoardExternalReferenceType>,
 		required: true,
 	},
 });