@platforma-sdk/ui-vue 1.84.9 → 1.84.14

package/src/components/PlAnnotations/components/FilterSidebar.vue

@@ -125,10 +125,11 @@ const supportedFilters = [
 </script>
 
 <template>
-  <PlSidebarItem v-if="props.step">
+  <PlSidebarItem v-if="props.step" data-testid="pl-annotations-step">
     <template #header-content>
       <PlEditableTitle
         :key="props.step.id"
+        data-testid="pl-annotations-step-label"
         :model-value="props.step.label"
         :class="{ [$commonStyle.flashing]: props.step.label.length === 0 }"
         :max-length="40"
@@ -151,10 +152,17 @@ const supportedFilters = [
         :enable-add-group-button="true"
       >
         <template #add-group-buttons>
-          <div :class="$style.actions">
-            <PlBtnSecondary icon="add" @click="addFilterPlaceholder"> Add Filter </PlBtnSecondary>
+          <div data-testid="pl-annotations-filter-actions" :class="$style.actions">
+            <PlBtnSecondary
+              data-testid="pl-annotations-add-filter"
+              icon="add"
+              @click="addFilterPlaceholder"
+            >
+              Add Filter
+            </PlBtnSecondary>
             <PlBtnSecondary
               v-if="withSelection"
+              data-testid="pl-annotations-add-from-selection"
               icon="add"
               :disabled="props.hasSelectedColumns !== true"
               @click="addFilterFromSelected"

package/src/components/PlAnnotations/components/PlAnnotations.vue

@@ -65,7 +65,7 @@ function updateSelectedStep(step: Filter) {
 </script>
 
 <template>
-  <PlSidebarGroup>
+  <PlSidebarGroup data-testid="pl-annotations">
     <template #item-0>
       <AnnotationsSidebar
         :annotation="props.annotation"

package/src/components/PlAnnotations/components/PlAnnotationsModal.vue

@@ -19,6 +19,7 @@ async function handleDeleteSchema() {
 
 <template>
   <PlPureSlideModal
+    data-testid="pl-annotations-modal"
     :model-value="props.opened"
     :class="$style.modal"
     width="768px"

package/src/components/PlAppErrorNotificationAlert/PlAppErrorNotificationAlert.vue

@@ -36,14 +36,31 @@ watch(
 );
 </script>
 <template>
-  <div class="pl-app-notification-alert">
-    <PlDialogModal v-model="isModalOpen" width="720px" style="max-height: 100vh">
+  <div data-testid="pl-app-error-notification-alert" class="pl-app-notification-alert">
+    <PlDialogModal
+      v-model="isModalOpen"
+      data-testid="pl-app-error-notification-alert-modal"
+      width="720px"
+      style="max-height: 100vh"
+    >
       <template #title> Errors </template>
-      <div class="pl-app-notification-alert__content">
+      <div
+        data-testid="pl-app-error-notification-alert-content"
+        class="pl-app-notification-alert__content"
+      >
         <template v-for="item in existingErrors" :key="item[0]">
-          <div class="pl-app-notification-alert__item">
-            <div class="pl-app-notification-alert__title">Block output: {{ item[0] }}</div>
+          <div
+            data-testid="pl-app-error-notification-alert-item"
+            class="pl-app-notification-alert__item"
+          >
+            <div
+              data-testid="pl-app-error-notification-alert-item-title"
+              class="pl-app-notification-alert__title"
+            >
+              Block output: {{ item[0] }}
+            </div>
             <PlLogView
+              data-testid="pl-app-error-notification-alert-log"
               :value="item[1]?.message"
               :valueToCopy="
                 'fullMessage' in (item[1] ?? {})
@@ -57,10 +74,20 @@ watch(
       </div>
     </PlDialogModal>
 
-    <PlNotificationAlert v-model="isAlertOpen" type="error" closable>
+    <PlNotificationAlert
+      v-model="isAlertOpen"
+      data-testid="pl-app-error-notification-alert-message"
+      type="error"
+      closable
+    >
       Some outputs have errors.
       <template #actions>
-        <PlBtnPrimary icon="arrow-right" @click="showErrors">See errors</PlBtnPrimary>
+        <PlBtnPrimary
+          data-testid="pl-app-error-notification-alert-show-errors"
+          icon="arrow-right"
+          @click="showErrors"
+          >See errors</PlBtnPrimary
+        >
         <PlSpacer />
       </template>
     </PlNotificationAlert>

package/src/components/PlBtnExportArchive/Item.vue

@@ -8,20 +8,36 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="$style.item">
-    <div :class="$style.name">{{ item.fileName }}</div>
-    <div v-if="item.status === 'in-progress'" :class="$style.details">
+  <div data-testid="pl-btn-export-archive-item" :class="$style.item">
+    <div data-testid="pl-btn-export-archive-item-name" :class="$style.name">
+      {{ item.fileName }}
+    </div>
+    <div
+      v-if="item.status === 'in-progress'"
+      data-testid="pl-btn-export-archive-item-status"
+      :class="$style.details"
+    >
       <span>{{ prettyBytes(item.current, {}) }}</span>
       <span>/</span>
       <span>{{ prettyBytes(item.size, {}) }}</span>
     </div>
-    <div v-else-if="item.status === 'completed'" :class="$style.details">
+    <div
+      v-else-if="item.status === 'completed'"
+      data-testid="pl-btn-export-archive-item-status"
+      :class="$style.details"
+    >
       Done <span>{{ prettyBytes(item.size, {}) }}</span>
     </div>
-    <div v-else-if="item.status === 'error'" :class="$style.error">
+    <div
+      v-else-if="item.status === 'error'"
+      data-testid="pl-btn-export-archive-item-error"
+      :class="$style.error"
+    >
       <span>{{ item.error }}</span>
     </div>
-    <div v-else :class="$style.details">Pending</div>
+    <div v-else data-testid="pl-btn-export-archive-item-status" :class="$style.details">
+      Pending
+    </div>
   </div>
 </template>
 

package/src/components/PlBtnExportArchive/PlBtnExportArchive.vue

@@ -189,6 +189,7 @@ useClickOutside([progressesRef], () => {
 
 <template>
   <PlBtnGhost
+    data-testid="pl-btn-export-archive"
     :disabled="!isReadyToExport"
     :loading="data.loading"
     :class="{ [$style['has-exports']]: data.exports }"
@@ -200,10 +201,24 @@ useClickOutside([progressesRef], () => {
     </template>
   </PlBtnGhost>
   <Teleport to="body">
-    <div v-if="data.exports && data.showExports" ref="progressesRef" :class="$style.progresses">
-      <PlIcon16 :class="$style.close" name="close" @click.stop="data.showExports = false" />
+    <div
+      v-if="data.exports && data.showExports"
+      ref="progressesRef"
+      data-testid="pl-btn-export-archive-progress"
+      :class="$style.progresses"
+    >
+      <PlIcon16
+        data-testid="pl-btn-export-archive-progress-close"
+        :class="$style.close"
+        name="close"
+        @click.stop="data.showExports = false"
+      />
       <Summary :item="archive" />
-      <div :class="$style.itemsContainer" class="pl-scrollable-y">
+      <div
+        data-testid="pl-btn-export-archive-items"
+        :class="$style.itemsContainer"
+        class="pl-scrollable-y"
+      >
         <Item v-for="item in data.exports?.values()" :key="item.fileName" :item="item" />
       </div>
     </div>

package/src/components/PlBtnExportArchive/Summary.vue

@@ -12,19 +12,29 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div :class="$style.summary">
-    <div :class="$style.name">
+  <div data-testid="pl-btn-export-archive-summary" :class="$style.summary">
+    <div data-testid="pl-btn-export-archive-summary-name" :class="$style.name">
       {{ item.fileName }}<span v-if="false" @click.stop="emit('cancel')">[TODO: Cancel]</span>
     </div>
-    <div v-if="item.status === 'in-progress'" :class="$style.details">
+    <div
+      v-if="item.status === 'in-progress'"
+      data-testid="pl-btn-export-archive-summary-status"
+      :class="$style.details"
+    >
       <span>{{ prettyBytes(item.current, {}) }}</span>
       <span>/</span>
       <span>{{ prettyBytes(item.size, {}) }}</span>
     </div>
-    <div v-else-if="item.status === 'completed'" :class="$style.details">
+    <div
+      v-else-if="item.status === 'completed'"
+      data-testid="pl-btn-export-archive-summary-status"
+      :class="$style.details"
+    >
       Done <span>{{ prettyBytes(item.size, {}) }}</span>
     </div>
-    <div v-else :class="$style.details">Pending</div>
+    <div v-else data-testid="pl-btn-export-archive-summary-status" :class="$style.details">
+      Pending
+    </div>
   </div>
 </template>
 

package/src/components/PlDatasetSelector/PlDatasetSelector.vue

@@ -125,6 +125,7 @@ function onChange(selection: Selection | undefined) {
 
 <template>
   <PlDropdown
+    data-testid="pl-dataset-selector"
     :model-value="selectionValue"
     :options="dropdownOptions"
     :label="label"

package/src/components/PlTableFastSearch/PlTableFastSearch.vue

@@ -5,7 +5,12 @@ const model = defineModel<string>({ required: true });
 </script>
 
 <template>
-  <PlSearchField v-model="model" clearable placeholder="Search...">
+  <PlSearchField
+    v-model="model"
+    data-testid="pl-table-fast-search"
+    clearable
+    placeholder="Search..."
+  >
     <template #helper>
       <b>How table search works:</b>
       <br />

package/src/components/PlTableFilters/PlTableFiltersV2.vue

@@ -146,6 +146,7 @@ function handleSuggestOptions(params: {
 <template>
   <Teleport v-if="teleportTarget" :to="teleportTarget">
     <PlBtnGhost
+      data-testid="pl-table-filters"
       :icon="hasFilters || hasDefaultFilters ? 'filter-on' : 'filter'"
       @click.stop="showManager = true"
     >
@@ -153,10 +154,14 @@ function handleSuggestOptions(params: {
     </PlBtnGhost>
   </Teleport>
 
-  <PlSlideModal v-model="showManager" :close-on-outside-click="false">
+  <PlSlideModal
+    v-model="showManager"
+    data-testid="pl-table-filters-panel"
+    :close-on-outside-click="false"
+  >
     <template #title>Manage Filters</template>
 
-    <div :class="$style.root">
+    <div data-testid="pl-table-filters-content" :class="$style.root">
       <PlAdvancedFilterComponent
         :filters="filters as PlAdvancedFilter"
         :options="options"
@@ -171,16 +176,21 @@ function handleSuggestOptions(params: {
         @update-filters="onUpdateFilters"
       >
         <template #group-title="{ index }">
-          <div v-if="hasDefaultFilters && index === 0" :class="$style.defaultGroupTitle">
+          <div
+            v-if="hasDefaultFilters && index === 0"
+            data-testid="pl-table-filters-default-group-title"
+            :class="$style.defaultGroupTitle"
+          >
             Default Group
             <PlBtnGhost
               v-if="isFunction(props.onResetDefaultFilters)"
+              data-testid="pl-table-filters-reset-default"
               icon="restart"
               :class="$style.restartBtn"
               @click.stop="props.onResetDefaultFilters()"
             />
           </div>
-          <div v-else>Custom Group</div>
+          <div v-else data-testid="pl-table-filters-custom-group-title">Custom Group</div>
         </template>
       </PlAdvancedFilterComponent>
     </div>