@webitel/ui-sdk 26.8.56 → 26.8.57

package/dist/{wt-call-media-action-Bn2bGCWs.js → wt-call-media-action-Bkyppnsm.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t } from "./engineCallFileType.zod-C-t93kQg.js";
+import { t } from "./engineCallFileType-D7QVFOac.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, openBlock as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
 //#region src/components/on-demand/wt-call-media-action/wt-call-media-action.vue?vue&type=script&setup=true&lang.ts
 var p = { class: "wt-call-media-action__option" }, m = /*#__PURE__*/ e(/* @__PURE__ */ c({

package/dist/{wt-chat-emoji-DRK_E-lD.js → wt-chat-emoji-Cj3B8oR5.js}

@@ -1,4 +1,4 @@
-import "./components-CWSUHV29.js";
+import "./components-BWyW5EEY.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-DY3jIXFF.js";
 import { t as n } from "./wt-button-2_aOV7LX.js";

package/dist/{wt-display-chip-items-C5z7aCDZ.js → wt-display-chip-items-Cvm5rOYr.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-CWSUHV29.js";
+import { C as e, i as t } from "./components-BWyW5EEY.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./displayText-CtaxzaBz.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-screen-recordings-action-Dj6ITuhE.js → wt-screen-recordings-action-DI1qlUi1.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { t } from "./engineCallFileType.zod-C-t93kQg.js";
+import { t } from "./engineCallFileType-D7QVFOac.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, openBlock as u, resolveComponent as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
 //#region src/components/on-demand/wt-screen-recordings-action/wt-screen-recordings-action.vue?vue&type=script&setup=true&lang.ts
 var h = { class: "wt-screen-recordings-action" }, g = { class: "wt-screen-recordings-action__option" }, _ = /*#__PURE__*/ e(/* @__PURE__ */ l({

package/dist/{wt-send-message-popup-G26F9NPH.js → wt-send-message-popup-OYvzhdyL.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-BEcgMyyN.js";
-import { n as t, r as n } from "./clients-CWSXQd89.js";
-import { T as r, n as i, w as a } from "./components-CWSUHV29.js";
+import { n as t, r as n } from "./clients-B8MJJx6E.js";
+import { T as r, n as i, w as a } from "./components-BWyW5EEY.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { n as s } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, onMounted as p, openBlock as m, ref as h, resolveComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";

package/dist/{wt-type-extension-value-input--Vc1cs5d.js → wt-type-extension-value-input-BfUPxO-s.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clients-CWSXQd89.js";
-import { a as t, o as n, r, s as i } from "./components-CWSUHV29.js";
+import { t as e } from "./clients-B8MJJx6E.js";
+import { a as t, o as n, r, s as i } from "./components-BWyW5EEY.js";
 import { t as a } from "./enums-DY3jIXFF.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-FD4gfDSE.js → wt-vidstack-player-DjQEPOTu.js}

@@ -1,4 +1,4 @@
-import { D as e } from "./components-CWSUHV29.js";
+import { D as e } from "./components-BWyW5EEY.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-DY3jIXFF.js";
 import "./wt-button-2_aOV7LX.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.56",
+	"version": "26.8.57",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -62,6 +62,7 @@
 		"@vuepic/vue-datepicker": "^4.5.1",
 		"@vueuse/components": "^14.0.0",
 		"autosize": "^6.0.1",
+		"csv-parse": "^6.1.0",
 		"csv-stringify": "^5.5.3",
 		"date-fns-tz": "^3.2.0",
 		"dompurify": "^3.3.1",
@@ -139,7 +140,6 @@
 		"@vuelidate/validators": "^2.0.4",
 		"@webitel/styleguide": "~26.2",
 		"clipboard-copy": "^4.x",
-		"csv-parse": "^6.1.0",
 		"globals": "^16.0.0",
 		"globby": "^16.x",
 		"happy-dom": "^20.x",
@@ -355,6 +355,10 @@
 			"types": "./types/modules/ObjectPermissions/index.d.ts",
 			"import": "./src/modules/ObjectPermissions/index.ts"
 		},
+		"./modules/UploadCsvPopup": {
+			"types": "./types/modules/UploadCsvPopup/index.d.ts",
+			"import": "./src/modules/UploadCsvPopup/index.ts"
+		},
 		"./plugins*": {
 			"types": "./types/plugins*",
 			"import": "./src/plugins*"

package/src/modules/UploadCsvPopup/components/__tests__/wt-upload-csv-popup.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtUploadCsvPopup from '../wt-upload-csv-popup.vue';
+
+describe('WtUploadCsvPopup', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtUploadCsvPopup, {
+			props: {
+				file: null,
+				mappingFields: [],
+			},
+		});
+
+		expect(wrapper).toBeTruthy();
+	});
+
+	/*
+	An undeclared prop silently falls through as an attribute, so the composable
+	would never see the saver and the import would close as a success without
+	saving anything. Props extends UseUploadCsvProps to prevent that — this
+	guards the contract.
+	 */
+	it.each([
+		'file',
+		'mappingFields',
+		'addBulkItems',
+		'handlingMode',
+		'fileUploadHandler',
+	])('declares the %s prop', (prop) => {
+		expect(Object.keys(WtUploadCsvPopup.props)).toContain(prop);
+	});
+});

package/src/modules/UploadCsvPopup/components/wt-upload-csv-popup.vue

@@ -79,8 +79,8 @@
             :key="key"
             class="wt-upload-csv-popup-mapping-item"
           >
-            <p class="wt-upload-csv-popup-mapping-item__field">
-              {{ t(field.locale) }}<span v-if="field.required">*</span>
+            <p class="wt-upload-csv-popup-mapping-item__field typo-body-1">
+              {{ getFieldLabel(field) }}<span v-if="field.required">*</span>
             </p>
 
             <wt-single-select
@@ -88,34 +88,29 @@
               v-model:model-value="field.csv"
               :show-clear="!field.required"
               :options="csvColumns"
-              :placeholder="t(field.locale)"
+              :placeholder="getFieldLabel(field)"
               :data-key="null"
               class="wt-upload-csv-popup-mapping-item__select"
             />
             <wt-multi-select
               v-else
               v-model:model-value="field.csv"
+              chips-view
               :options="csvColumns"
-              :placeholder="t(field.locale)"
+              :placeholder="getFieldLabel(field)"
+              :data-key="null"
               class="wt-upload-csv-popup-mapping-item__select"
             />
 
             <div
               v-if="field.tooltip"
-              class="upload-tooltip"
+              class="upload-tooltip typo-caption"
             >
               {{ field.tooltip }}
             </div>
           </div>
         </div>
       </section>
-
-      <div
-        v-show="!isParsingPreview && parseErrorStackTrace"
-        class="wt-upload-csv-popup-form__error-stack-trace"
-      >
-        {{ parseErrorStackTrace }}
-      </div>
     </template>
 
     <template
@@ -143,7 +138,10 @@
 import { ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import useUploadCsv from '../composable/useUploadCsv';
+import useUploadCsv, {
+	type UseUploadCsvProps,
+} from '../composable/useUploadCsv';
+import type { CsvMappingField } from '../scripts/normalizeCSVData';
 import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
 
 interface CharsetOption {
@@ -151,12 +149,9 @@ interface CharsetOption {
 	value: string;
 }
 
-interface Props {
+interface Props extends UseUploadCsvProps {
 	file: File | null;
 	mappingFields: CsvMappingField[];
-	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
-	handlingMode?: string;
-	fileUploadHandler?: () => unknown | Promise<unknown>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -173,6 +168,9 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+const getFieldLabel = (field: CsvMappingField) =>
+	field.locale ? t(field.locale) : field.name;
+
 const skipHeaders = ref(true);
 const separator = ref(',');
 const charsetOptions = ref<CharsetOption[]>([]);
@@ -187,7 +185,6 @@ const {
 	isReadingFile,
 	isParsingCSV,
 	isParsingPreview,
-	parseErrorStackTrace,
 	csvPreviewTableData,
 	csvPreviewTableHeaders,
 	csvColumns,
@@ -254,13 +251,5 @@ const {
       }
     }
   }
-
-  .wt-upload-csv-popup-form__error-stack-trace {
-    margin-top: var(--spacing-sm);
-    padding: var(--spacing-sm);
-    color: var(--error-color);
-    border-radius: var(--border-radius);
-    background: var(--secondary-color);
-  }
 }
 </style>

package/src/modules/UploadCsvPopup/composable/__tests__/useUploadCsv.spec.js

@@ -0,0 +1,393 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+import HandlingCSVMode from '../../types/WtUploadCSVHandlingMode.enum';
+import useUploadCsv from '../useUploadCsv';
+
+const Component = {
+	props: {
+		file: {
+			default: null,
+		},
+		mappingFields: {
+			type: Array,
+			default: () => [],
+		},
+		addBulkItems: {
+			type: Function,
+			default: undefined,
+		},
+		handlingMode: {
+			type: String,
+			default: HandlingCSVMode.PROCESS,
+		},
+		fileUploadHandler: {
+			type: Function,
+			default: undefined,
+		},
+	},
+	emits: [
+		'changeMappingFields',
+		'save',
+		'close',
+	],
+	setup(props, { emit }) {
+		const skipHeaders = ref(true);
+		const separator = ref(',');
+
+		return {
+			skipHeaders,
+			separator,
+			...useUploadCsv({
+				props,
+				emit,
+				skipHeaders,
+				separator,
+			}),
+		};
+	},
+	render: () => null,
+};
+
+const makeFile = (content) => {
+	const blob = new Blob(
+		[
+			content,
+		],
+		{
+			type: 'text/csv',
+		},
+	);
+
+	return new File(
+		[
+			blob,
+		],
+		'test.csv',
+		{
+			type: 'text/csv',
+		},
+	);
+};
+
+// the composable reads the file through a watcher, so give FileReader a tick
+const mountWithFile = async (csv, props = {}) => {
+	const wrapper = shallowMount(Component, {
+		props,
+	});
+
+	await wrapper.setProps({
+		file: makeFile(csv),
+	});
+
+	await new Promise((resolve) => {
+		setTimeout(resolve, 100);
+	});
+
+	return wrapper;
+};
+
+describe('useUploadCsv', () => {
+	it('mounts a component with the composable', () => {
+		const wrapper = shallowMount(Component, {
+			props: {
+				file: {},
+			},
+		});
+
+		expect(wrapper.exists()).toBe(true);
+	});
+
+	it('parses and saves simple csv', async () => {
+		const csv = `
+      col1,col2
+      John,30
+      Jane,25
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+				{
+					name: 'age',
+					csv: 'col2',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				name: 'John',
+				age: '30',
+			},
+			{
+				name: 'Jane',
+				age: '25',
+			},
+		]);
+	});
+
+	it('parsing of csv with empty required throws error', async () => {
+		const csv = `
+      col1,col2
+      John,
+      Jane,25
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+					required: true,
+				},
+				{
+					name: 'age',
+					csv: 'col2',
+					required: true,
+				},
+			],
+		});
+
+		await expect(wrapper.vm.processCSV()).rejects.toBeTruthy();
+		expect(saveCallback).not.toHaveBeenCalled();
+	});
+
+	it('parsing of csv with multiple columns selected to required field', async () => {
+		const csv = `
+      col1,col2,col3
+      John,,30
+      Jane,25,
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+					required: true,
+				},
+				{
+					name: 'age',
+					csv: [
+						'col2',
+						'col3',
+					],
+					required: true,
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				name: 'John',
+				age: [
+					'',
+					'30',
+				],
+			},
+			{
+				name: 'Jane',
+				age: [
+					'25',
+					'',
+				],
+			},
+		]);
+	});
+
+	/*
+	WTEL-10058: guards the admin data that the parser never touched — queue
+	member variables, blacklist descriptions, device passwords. Type casting
+	lives in CRM now, so everything reaching a consumer is a string.
+	 */
+	it('keeps plain values as strings, so text columns are not coerced', async () => {
+		const csv = `
+      col1,col2
+      true,"[1,2]"
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: saveCallback,
+			mappingFields: [
+				{
+					name: 'flag',
+					csv: 'col1',
+				},
+				{
+					name: 'list',
+					csv: 'col2',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(saveCallback).toHaveBeenCalledWith([
+			{
+				flag: 'true',
+				list: '[1,2]',
+			},
+		]);
+	});
+
+	it('uploads the whole file in the upload handling mode', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const saveCallback = vi.fn();
+		const fileUploadHandler = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			handlingMode: HandlingCSVMode.UPLOAD,
+			addBulkItems: saveCallback,
+			fileUploadHandler,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await wrapper.vm.processCSV();
+
+		expect(fileUploadHandler).toHaveBeenCalled();
+		expect(saveCallback).not.toHaveBeenCalled();
+	});
+
+	/*
+	WTEL-10058: the popup owns the separator, so a consumer that ships the raw
+	file to the backend has no other way to learn which one the user picked.
+	 */
+	it('hands the chosen separator to the file upload handler', async () => {
+		const csv = 'col1;col2\nJohn;30';
+
+		const fileUploadHandler = vi.fn();
+
+		const wrapper = await mountWithFile(csv, {
+			handlingMode: HandlingCSVMode.UPLOAD,
+			fileUploadHandler,
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		wrapper.vm.separator = ';';
+		await wrapper.vm.processCSV();
+
+		expect(fileUploadHandler).toHaveBeenCalledWith({
+			separator: ';',
+		});
+	});
+
+	it('emits save and closes on a successful handleSave', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: vi.fn(),
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await wrapper.vm.handleSave();
+
+		expect(wrapper.emitted('save')).toHaveLength(1);
+		expect(wrapper.emitted('close')).toHaveLength(1);
+	});
+
+	it('does not close the popup when saving fails', async () => {
+		const csv = `
+      col1
+      John
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			addBulkItems: vi.fn(() => Promise.reject(new Error('nope'))),
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+			],
+		});
+
+		await expect(wrapper.vm.processCSV()).rejects.toThrow();
+		expect(wrapper.emitted('close')).toBeUndefined();
+	});
+
+	it('resets the mappings when the parse options change', async () => {
+		const csv = `
+      col1,col2
+      John,30
+      `.replaceAll(/ +?/g, ''); // replace all whitespaces, but not newlines
+
+		const wrapper = await mountWithFile(csv, {
+			mappingFields: [
+				{
+					name: 'name',
+					csv: 'col1',
+				},
+				{
+					name: 'tags',
+					csv: [
+						'col2',
+					],
+					multiple: true,
+				},
+			],
+		});
+
+		wrapper.vm.separator = ';';
+
+		// the parse options watcher is debounced by 1s
+		await new Promise((resolve) => {
+			setTimeout(resolve, 1200);
+		});
+
+		const emitted = wrapper.emitted('changeMappingFields');
+
+		expect(emitted).toBeTruthy();
+		expect(emitted.at(-1)[0]).toEqual([
+			{
+				name: 'name',
+				csv: '',
+			},
+			{
+				name: 'tags',
+				csv: [],
+				multiple: true,
+			},
+		]);
+	});
+});