N21-1583 copying ctl tools info (#2951)

src/components/copy-result-modal/CopyResultModal.unit.ts

@@ -4,6 +4,10 @@ import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
 import { mount, MountOptions } from "@vue/test-utils";
 import CopyResultModal from "./CopyResultModal.vue";
 import Vue from "vue";
+import { envConfigModule } from "@/store";
+import setupStores from "@@/tests/test-utils/setupStores";
+import EnvConfigModule from "@/store/env-config";
+import { Envs } from "@/store/types/env-config";
 
 const geoGebraItem = {
 	title: "GeoGebra Element Title",
@@ -47,7 +51,7 @@ const mockResultItems = (
 };
 
 const getWrapper = (props?: any) => {
-	return mount<any>(CopyResultModal as MountOptions<Vue>, {
+	const wrapper = mount<any>(CopyResultModal as MountOptions<Vue>, {
 		...createComponentMocks({
 			i18n: true,
 		}),
@@ -57,12 +61,16 @@ const getWrapper = (props?: any) => {
 			...props,
 		},
 	});
+
+	return wrapper;
 };
 
 describe("@/components/copy-result-modal/CopyResultModal", () => {
 	beforeEach(() => {
 		// Avoids console warnings "[Vuetify] Unable to locate target [data-app]"
 		document.body.setAttribute("data-app", "true");
+
+		setupStores({ envConfigModule: EnvConfigModule });
 	});
 
 	describe("basic functions", () => {
@@ -127,6 +135,22 @@ 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 = mockResultItems([]);
+			envConfigModule.setEnvs({ FEATURE_CTL_TOOLS_TAB_ENABLED: true } as Envs);
+			const wrapper = getWrapper({
+				isOpen: true,
+				copyResultItems,
+				copyResultRootItemType: CopyApiResponseTypeEnum.Course,
+			});
+
+			expect(
+				wrapper.find('[data-testid="copy-result-notifications"]').text()
+			).toContain(
+				wrapper.vm.$i18n.t("components.molecules.copyResult.ctlTools.info")
+			);
+		});
+
 		it("should merge file error and coursefiles info if root item is a Course and has a failed file ", () => {
 			const copyResultItems = mockResultItems([fileItem]);
 

src/components/copy-result-modal/CopyResultModal.vue

@@ -54,6 +54,7 @@ import {
 	mdiCloseCircle,
 	mdiInformation,
 } from "@mdi/js";
+import { envConfigModule } from "@/store";
 
 export default {
 	name: "CopyResultModal",
@@ -105,6 +106,11 @@ export default {
 					text: this.filesInfoText,
 					title: this.$t("components.molecules.copyResult.label.files"),
 				},
+				{
+					isShow: this.hasFeatureCtlsToolsenabled,
+					text: this.externalToolsInfoText,
+					title: this.$t("components.molecules.copyResult.label.externalTools"),
+				},
 				{
 					isShow: this.hasCourseGroup,
 					text: this.$t("components.molecules.copyResult.courseGroupCopy.info"),
@@ -139,6 +145,9 @@ export default {
 				CopyApiResponseTypeEnum.CoursegroupGroup
 			);
 		},
+		hasFeatureCtlsToolsenabled() {
+			return envConfigModule.getCtlToolsTabEnabled;
+		},
 		hasErrors() {
 			return this.items.length > 0;
 		},
@@ -154,6 +163,9 @@ export default {
 				: "";
 			return `${courseFilesText} ${fileErrorText}`.trim();
 		},
+		externalToolsInfoText() {
+			return this.$t("components.molecules.copyResult.ctlTools.info");
+		},
 	},
 	methods: {
 		hasElementOfType(items, types) {

src/components/share/ImportFlow.unit.ts

@@ -20,7 +20,12 @@ import SelectCourseModal from "@/components/share/SelectCourseModal.vue";
 import { mount, MountOptions } from "@vue/test-utils";
 import Vue from "vue";
 import { CopyResultItem } from "../copy-result-modal/types/CopyResultItem";
-import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
+import {
+	ENV_CONFIG_MODULE_KEY,
+	I18N_KEY,
+	NOTIFIER_MODULE_KEY,
+} from "@/utils/inject";
+import EnvConfigModule from "@/store/env-config";
 
 describe("@components/share/ImportFlow", () => {
 	let copyModuleMock: CopyModule;
@@ -36,6 +41,10 @@ describe("@components/share/ImportFlow", () => {
 		displayColor: "#54616e",
 	};
 	const mountComponent = (attrs = {}) => {
+		const envConfigModuleMock = createModuleMocks(EnvConfigModule, {
+			getCtlToolsTabEnabled: false,
+		});
+
 		const wrapper = mount(ImportFlow as MountOptions<Vue>, {
 			...createComponentMocks({
 				i18n: true,
@@ -45,6 +54,7 @@ describe("@components/share/ImportFlow", () => {
 				loadingStateModule: loadingStateModuleMock,
 				[I18N_KEY.valueOf()]: { t: (key: string) => key },
 				[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
+				[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
 			},
 			propsData: {
 				token,

src/components/share/ImportModal.unit.ts

@@ -2,16 +2,26 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { mount, MountOptions } from "@vue/test-utils";
 import ImportModal from "@/components/share/ImportModal.vue";
 import Vue from "vue";
-import { I18N_KEY } from "@/utils/inject";
+import { ENV_CONFIG_MODULE_KEY, I18N_KEY } from "@/utils/inject";
+import EnvConfigModule from "@/store/env-config";
+import { createModuleMocks } from "@/utils/mock-store-module";
 
 describe("@components/share/ImportModal", () => {
-	const getWrapper = (attrs = {}) => {
+	const getWrapper = (
+		attrs = {},
+		envConfigModuleGetter?: Partial<EnvConfigModule>
+	) => {
+		const envConfigModuleMock = createModuleMocks(EnvConfigModule, {
+			...envConfigModuleGetter,
+		});
+
 		const wrapper = mount(ImportModal as MountOptions<Vue>, {
 			...createComponentMocks({
 				i18n: true,
 			}),
 			provide: {
 				[I18N_KEY.valueOf()]: { t: (key: string) => key },
+				[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
 			},
 			...attrs,
 		});
@@ -20,6 +30,7 @@ describe("@components/share/ImportModal", () => {
 	};
 
 	beforeEach(() => {
+		jest.clearAllMocks();
 		// Avoids console warnings "[Vuetify] Unable to locate target [data-app]"
 		document.body.setAttribute("data-app", "true");
 	});
@@ -122,4 +133,115 @@ describe("@components/share/ImportModal", () => {
 		const emitted = wrapper.emitted("import");
 		expect(emitted).toBeUndefined();
 	});
+
+	describe("ctl tools info", () => {
+		describe("when ctl tools are enabled", () => {
+			const setup = () => {
+				const wrapper = getWrapper(
+					{
+						propsData: {
+							isOpen: true,
+							parentName: "TestParentName",
+							parentType: "courses",
+						},
+					},
+					{
+						getCtlToolsTabEnabled: true,
+					}
+				);
+				return {
+					wrapper,
+				};
+			};
+
+			it("should show ctl tool info", () => {
+				const { wrapper } = setup();
+
+				const infoText = wrapper.get(
+					`[data-testid="import-modal-external-tools-info"]`
+				);
+
+				expect(infoText.isVisible()).toBe(true);
+			});
+
+			it("should set the right key for ctl tools", () => {
+				const { wrapper } = setup();
+
+				const infoText = wrapper.get(
+					`[data-testid="import-modal-external-tools-info"]`
+				);
+
+				expect(infoText.element.innerHTML).toContain(
+					wrapper.vm.$i18n.t(
+						`components.molecules.import.courses.options.ctlTools.infoText`
+					)
+				);
+			});
+
+			it("should not show course file info", () => {
+				const { wrapper } = setup();
+
+				const infoText = wrapper.find(
+					`[data-testid="import-modal-coursefiles-info"]`
+				);
+
+				expect(infoText.isVisible()).toBe(false);
+			});
+		});
+
+		describe("show ctl tool info is disabled", () => {
+			const setup = () => {
+				const wrapper = getWrapper(
+					{
+						propsData: {
+							isOpen: true,
+							parentName: "TestParentName",
+							parentType: "course",
+						},
+					},
+					{
+						getCtlToolsTabEnabled: false,
+					}
+				);
+
+				return {
+					wrapper,
+				};
+			};
+
+			describe("when ctl is disabled", () => {
+				it("should not show ctl tool info", () => {
+					const { wrapper } = setup();
+
+					const infoText = wrapper.find(
+						`[data-testid="import-modal-external-tools-info"]`
+					);
+
+					expect(infoText.isVisible()).toBe(false);
+				});
+
+				it("should show course file info", () => {
+					const { wrapper } = setup();
+
+					const infoText = wrapper.find(
+						`[data-testid="import-modal-coursefiles-info"]`
+					);
+
+					expect(infoText.isVisible()).toBe(true);
+				});
+
+				it("should set the right key for course files", () => {
+					const { wrapper } = setup();
+
+					const infoText = wrapper.find(
+						`[data-testid="import-modal-coursefiles-info"]`
+					);
+
+					expect(infoText.element.innerHTML).toContain(
+						"components.molecules.import.course.options.infoText"
+					);
+				});
+			});
+		});
+	});
 });

src/components/share/ImportModal.vue

@@ -21,7 +21,19 @@
 					<div class="mx-2">
 						<v-icon color="info">{{ mdiInformation }}</v-icon>
 					</div>
-					<div>
+					<RenderHTML
+						data-testid="import-modal-external-tools-info"
+						v-show="ctlToolsEnabled"
+						:html="
+							$t(
+								`components.molecules.import.${parentType}.options.ctlTools.infoText`
+							)
+						"
+					/>
+					<div
+						v-show="!ctlToolsEnabled"
+						data-testid="import-modal-coursefiles-info"
+					>
 						{{
 							$t(`components.molecules.import.${parentType}.options.infoText`)
 						}}
@@ -40,14 +52,16 @@
 
 <script>
 import vCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { I18N_KEY, injectStrict } from "@/utils/inject";
+import { ENV_CONFIG_MODULE_KEY, I18N_KEY, injectStrict } from "@/utils/inject";
 import { mdiInformation } from "@mdi/js";
 import { computed, defineComponent, reactive, ref } from "vue";
+import { RenderHTML } from "@feature-render-html";
 
 // eslint-disable-next-line vue/require-direct-export
 export default defineComponent({
 	name: "ImportModal",
 	components: {
+		RenderHTML,
 		vCustomDialog,
 	},
 	emits: ["import", "cancel"],
@@ -58,6 +72,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const i18n = injectStrict(I18N_KEY);
+		const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 		const nameInput = ref(undefined);
 
 		const rules = reactive({
@@ -76,12 +91,17 @@ export default defineComponent({
 		};
 		const onCancel = () => emit("cancel");
 
+		const ctlToolsEnabled = computed(() => {
+			return envConfigModule.getCtlToolsTabEnabled;
+		});
+
 		return {
 			onConfirm,
 			onCancel,
 			mdiInformation,
 			rules,
 			newName,
+			ctlToolsEnabled,
 		};
 	},
 });