@webitel/ui-sdk 23.12.24 → 23.12.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.24",
+  "version": "23.12.26",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

package/src/locale/en/en.js

@@ -257,6 +257,7 @@ export default {
     searchBar: {
       placeholder: 'Search',
       settingsHint: 'Search mode',
+      variableSearchHint: 'Query format: "key=value"',
     },
     timepicker: {
       hour: 'Hour:',
@@ -339,8 +340,7 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',
-      askingAlert: 'Are you sure you want to delete {count} item? | Are you sure you want to delete {count} items?',
-      undoneActionAlert: 'This action cannot be undone.',
+      askingAlert: 'Are you sure you want\n to delete {count} records? | Are you sure you want\n to delete {count} records?',
       deleteAll: 'ALL',
     },
     dummy: {

package/src/locale/ru/ru.js

@@ -255,6 +255,7 @@ export default {
     searchBar: {
       placeholder: 'Поиск',
       settingsHint: 'Настройки поиска',
+      variableSearchHint: 'Формат запроса: "ключ=значение"',
     },
     timepicker: {
       hour: 'Час:',
@@ -337,8 +338,7 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',
-      askingAlert: 'Вы уверенны, что хотите удалить {count} запись? | Вы уверенны, что хотите удалить {count} записей?',
-      undoneActionAlert: 'Это действие не может быть отменено.',
+      askingAlert: 'Вы уверенны, что хотите\n удалить {count} запись? | Вы уверенны, что хотите\n удалить {count} записей?',
       deleteAll: 'ВСЕ',
     },
     dummy: {

package/src/locale/ua/ua.js

@@ -255,6 +255,7 @@ export default {
     searchBar: {
       placeholder: 'Пошук',
       settingsHint: 'Налаштування пошуку',
+      variableSearchHint: 'Формат запиту: "ключ=значення"',
     },
     timepicker: {
       hour: 'Год:',
@@ -337,8 +338,7 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',
-      askingAlert: 'Ви впевнені, що хочете видалити {count} запис? | Ви впевнені, що хочете видалити {count} записів?',
-      undoneActionAlert: 'Дана дія не може бути скасована.',
+      askingAlert: 'Ви впевнені, що хочете\n видалити {count} запис? | Ви впевнені, що хочете\n видалити {count} записів?',
       deleteAll: 'ВСІ',
     },
     dummy: {

package/src/mixins/validationMixin/__tests__/validationMixin.spec.js

@@ -30,7 +30,7 @@ describe('Validation mixin', () => {
         },
       },
     });
-    expect(wrapper.vm.validationText).toBe('validation.email');
+    expect(wrapper.vm.validationText).toBe('Should look like email');
   });
 
   it('prioritizes error messages', () => {
@@ -42,6 +42,6 @@ describe('Validation mixin', () => {
         },
       },
     });
-    expect(wrapper.vm.validationText).toBe('validation.required');
+    expect(wrapper.vm.validationText).toBe('Field is required');
   });
 });

package/src/modules/DeleteConfirmationPopup/__tests__/delete-confirmation-popup.spec.js

@@ -0,0 +1,77 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
+import DeleteConfirmationPopup from '../components/delete-confirmation-popup.vue';
+
+jest.mock('../../../mixins/validationMixin/useValidation');
+
+useValidation.mockImplementation(() => ({
+  isValidation: ref(false),
+  invalid: ref(false),
+  validationText: ref(''),
+}));
+
+describe('DeleteConfirmationPopup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: jest.fn(),
+      },
+    });
+    expect(wrapper.classes('delete-confirmation-popup')).toBe(true);
+  });
+
+  it('yes button called props callback', async () => {
+    const callback = jest.fn();
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback,
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
+    expect(button.text()).toContain('Yes');
+    await button.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('popup message block have delete count', () => {
+    const deleteCount = 123;
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount,
+        callback: jest.fn(),
+      },
+    });
+    expect(wrapper.find('.delete-confirmation-popup__content').text())
+      .toContain(deleteCount.toString());
+  });
+
+  it('yes button emitted close', async () => {
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: jest.fn(),
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
+    await button.vm.$emit('close');
+    await wrapper.vm.$nextTick();
+    expect(button.emitted('close')).toBeTruthy();
+  });
+
+  it('no button emitted close', async () => {
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: jest.fn(),
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('No'));
+    await button.vm.$emit('close');
+    await wrapper.vm.$nextTick();
+    expect(button.emitted('close')).toBeTruthy();
+  });
+});

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -1,28 +1,29 @@
 <template>
   <wt-popup
     class="delete-confirmation-popup"
-    min-width="480"
+    width="500"
     @close="close"
   >
     <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
     <template v-slot:main>
-      <p>
-        {{ deleteMessage }}
-        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
-      </p>
+      <div class="delete-confirmation-popup__content">
+        <wt-icon icon="attention" color="error"/>
+        <p class="delete-confirmation-popup__message">
+          {{ deleteMessage }}
+        </p>
+      </div>
     </template>
     <template v-slot:actions>
       <wt-button
-        color="secondary"
-        :disabled="isDeleting"
-        @click="close"
-      >{{ $t('reusable.cancel') }}
-      </wt-button>
-      <wt-button
-        color="danger"
         :loading="isDeleting"
         @click="confirm"
-      >{{ $t('reusable.delete') }}
+      >{{ $t('vocabulary.yes') }}
+      </wt-button>
+      <wt-button
+        :disabled="isDeleting"
+        color="secondary"
+        @click="close"
+      >{{ $t('vocabulary.no') }}
       </wt-button>
     </template>
   </wt-popup>
@@ -44,7 +45,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'close',
+ 'close',
 ]);
 
 const { t } = useI18n();
@@ -83,5 +84,15 @@ async function confirm() {
 </script>
 
 <style scoped>
+.delete-confirmation-popup__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.delete-confirmation-popup__message {
+  text-align: center;
+}
 
 </style>

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -12,7 +12,9 @@ const router = createRouter({
 describe('Abstract Api Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
-  const filterSchema = new ApiFilterSchema({ locale: {} });
+  const filterSchema = new ApiFilterSchema({
+    locale: { label: '' }
+  });
   const searchMock = jest.fn();
   const fetchSelectedMock = jest.fn(() => ({ items: [] }));
   jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -12,7 +12,9 @@ const router = createRouter({
 describe('Abstract Enum Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
-  const filterSchema = new EnumFilterSchema({ locale: {} });
+  const filterSchema = new EnumFilterSchema({
+    locale: { label: ''}
+  });
   const store = createStore({
     modules: {
       [namespace]: {

package/src/validators/variableSearchValidator.js

@@ -0,0 +1,4 @@
+export default function variableSearchValidator(value) {
+  const isValid = /^(?!.*\s)[^\s=]+=[^\s=]+$/.test(value);
+  return !value || isValid;
+};