feat(ui): add data-component attribute

ui/src/components/BaseComponents.vue

@@ -0,0 +1,13 @@
+<script>
+    import useDataComponent from "../composables/useDataComponent"
+
+    export default {
+        data() {
+            const file = useDataComponent();
+
+            return {
+                dataComponent: file
+            }
+        },
+    };
+</script>

ui/src/components/Drawer.vue

@@ -1,5 +1,6 @@
 <template>
     <el-drawer
+        :data-component="dataComponent"
         :model-value="props.modelValue"
         @update:model-value="emit('update:modelValue', $event)"
         destroy-on-close
@@ -32,6 +33,7 @@
 <script setup>
     import {ref} from "vue";
     import Fullscreen from "vue-material-design-icons/Fullscreen.vue"
+    import useDataComponent from "../composables/useDataComponent";
 
     const props = defineProps({
         modelValue: {
@@ -50,6 +52,7 @@
         }
     });
 
+    const dataComponent = useDataComponent();
     const emit = defineEmits(["update:modelValue"])
 
     const fullScreen = ref(props.fullScreen);

ui/src/components/EnterpriseTooltip.vue

@@ -1,5 +1,13 @@
 <template>
-    <el-tooltip :visible="visible" :persistent="false" :focus-on-show="true" popper-class="ee-tooltip" :disabled="!disabled" :placement="placement">
+    <el-tooltip
+        :data-component="dataComponent"
+        :visible="visible"
+        :persistent="false"
+        :focus-on-show="true"
+        popper-class="ee-tooltip"
+        :disabled="!disabled"
+        :placement="placement"
+    >
         <template #content v-if="link">
             <el-button circle class="ee-tooltip-close" @click="changeVisibility(false)">
                 <Close />
@@ -28,8 +36,10 @@
 <script>
     import Close from "vue-material-design-icons/Close.vue";
     import Lock from "vue-material-design-icons/Lock.vue";
+    import BaseComponents from "../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         components: {Close, Lock},
         props: {
             top: {

ui/src/components/Kicon.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="kicon">
+    <span :data-component="dataComponent" class="kicon">
         <el-tooltip
             effect="light"
             v-if="tooltip"
@@ -16,7 +16,10 @@
     </span>
 </template>
 <script>
+    import BaseComponents from "../components/BaseComponents.vue"
+
     export default {
+        extends: BaseComponents,
         props:{
             tooltip: {
                 type: String,

ui/src/components/ListPreview.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-table :data="value" stripe>
+    <el-table :data-component="dataComponent" :data="value" stripe>
         <el-table-column v-for="(column, index) in generateTableColumns" :key="index" :prop="column" :label="column">
             <template #default="scope">
                 <template v-if="isComplex(scope.row[column])">
@@ -21,8 +21,10 @@
 </template>
 <script>
     import Editor from "./inputs/Editor.vue";
+    import BaseComponents from "../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         name: "ListPreview",
         components: {Editor},
         props: {

ui/src/components/Status.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-button data-test-id="execution-status" @click="$emit('click', $event)" class="status" :icon="icon" :size="size" :class="cls">
+    <el-button :data-component="dataComponent" data-test-id="execution-status" @click="$emit('click', $event)" class="status" :icon="icon" :size="size" :class="cls">
         <template v-if="label">
             {{ title || $filters.cap($filters.lower(status)) }}
         </template>
@@ -8,8 +8,10 @@
 
 <script>
     import State from "../utils/state";
+    import BaseComponents from "../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         props: {
             status: {
                 type: String,

ui/src/components/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-tabs class="router-link" :class="{top: top}" v-model="activeName">
+    <el-tabs :data-component="dataComponent + '#tab'" class="router-link" :class="{top: top}" v-model="activeName">
         <el-tab-pane
             v-for="tab in tabs.filter(t => !t.hidden)"
             :key="tab.name"
@@ -18,7 +18,7 @@
         </el-tab-pane>
     </el-tabs>
 
-    <section ref="container" v-bind="$attrs" :class="{...containerClass, 'd-flex flex-row': isEditorActiveTab}">
+    <section :data-component="dataComponent + '#container'" ref="container" v-bind="$attrs" :class="{...containerClass, 'd-flex flex-row': isEditorActiveTab}">
         <EditorSidebar v-if="isEditorActiveTab" ref="sidebar" :style="`flex: 0 0 calc(${explorerWidth}% - 11px);`" />
         <div v-if="isEditorActiveTab && explorerVisible" @mousedown.prevent.stop="dragSidebar" class="slider" />
         <div :style="`flex: 1 1 ${100 - (isEditorActiveTab && explorerVisible ? explorerWidth : 0)}%;`">
@@ -36,10 +36,12 @@
 <script>
     import {mapState, mapMutations} from "vuex";
 
+    import BaseComponents from "./BaseComponents.vue";
     import EditorSidebar from "./inputs/EditorSidebar.vue";
     import EnterpriseTooltip from "./EnterpriseTooltip.vue";
 
     export default {
+        extends: BaseComponents,
         components: {EditorSidebar, EnterpriseTooltip},
         props: {
             tabs: {

ui/src/components/admin/Triggers.vue

@@ -1,6 +1,6 @@
 <template>
     <top-nav-bar :title="routeInfo.title" />
-    <section class="container" v-if="ready">
+    <section :data-component="dataComponent" class="container" v-if="ready">
         <div>
             <data-table
                 @page-changed="onPageChanged"
@@ -247,8 +247,10 @@
     import {mapState} from "vuex";
     import SelectTableActions from "../../mixins/selectTableActions";
     import _merge from "lodash/merge";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
         components: {
             RefreshButton,

ui/src/components/errors/Errors.vue

@@ -1,6 +1,6 @@
 <template>
     <top-nav-bar :title="routeInfo.title" />
-    <section class="container errors">
+    <section :data-component="dataComponent" class="container errors">
         <div class="img" />
         <h2>{{ $t("errors." + code + ".title") }}</h2>
 
@@ -17,8 +17,10 @@
 <script>
     import RouteContext from "../../mixins/routeContext";
     import TopNavBar from "../../components/layout/TopNavBar.vue";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         mixins: [RouteContext],
         components: {TopNavBar},
         props: {

ui/src/components/executions/Executions.vue

@@ -29,7 +29,7 @@
             </ul>
         </template>
     </top-nav-bar>
-    <section :class="{'container padding-bottom': topbar}" v-if="ready">
+    <section :data-component="dataComponent" :class="{'container padding-bottom': topbar}" v-if="ready">
         <data-table
             @page-changed="onPageChanged"
             ref="dataTable"
@@ -424,8 +424,10 @@
     import LabelInput from "../../components/labels/LabelInput.vue";
     import {ElMessageBox, ElSwitch, ElFormItem, ElAlert} from "element-plus";
     import {h, ref} from "vue";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
         components: {
             Status,

ui/src/components/executions/Logs.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :data-component="dataComponent">
         <collapse>
             <el-form-item>
                 <el-input
@@ -58,8 +58,10 @@
     import Collapse from "../layout/Collapse.vue";
     import State from "../../utils/state";
     import Utils from "../../utils/utils";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         components: {
             TaskRunDetails,
             LogLevelSelector,

ui/src/components/executions/Outputs.vue

@@ -8,6 +8,7 @@
     </el-dropdown-item>
 
     <drawer
+        :data-component="dataComponent"
         v-if="isOpen"
         v-model="isOpen"
         :title="$t('outputs')"
@@ -27,8 +28,10 @@
 <script>
     import Vars from "../executions/Vars.vue";
     import Drawer from "../Drawer.vue";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: {BaseComponents},
         components: {
             Vars,
             Drawer,

ui/src/components/flows/Flows.vue

@@ -36,7 +36,7 @@
             </ul>
         </template>
     </top-nav-bar>
-    <section class="container" v-if="ready">
+    <section :data-component="dataComponent" class="container" v-if="ready">
         <div>
             <data-table
                 @page-changed="onPageChanged"
@@ -244,8 +244,10 @@
     import Upload from "vue-material-design-icons/Upload.vue";
     import LabelFilter from "../labels/LabelFilter.vue";
     import {storageKeys} from "../../utils/constants";
+    import BaseComponents from "../../components/BaseComponents.vue"
 
     export default {
+        extends: {BaseComponents},
         mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
         components: {
             NamespaceSelect,

ui/src/components/layout/BulkSelect.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bulk-select">
+    <div :data-component="dataComponent" class="bulk-select">
         <el-checkbox
             :model-value="selections.length > 0"
             @change="toggle"
@@ -20,7 +20,10 @@
     </div>
 </template>
 <script>
+    import BaseComponents from "../BaseComponents.vue"
+
     export default {
+        extends: BaseComponents,
         props: {
             total: {type: Number, required: true},
             selections: {type: Array, required: true},

ui/src/components/layout/Collapse.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="collapse mb-sm-4 mb-md-0">
+    <div :data-component="dataComponent" class="collapse mb-sm-4 mb-md-0">
         <div class="button mb-2">
             <el-button @click="isNavbarVisible = !isNavbarVisible">
                 <menu-icon />
@@ -13,7 +13,10 @@
 
 <script>
     import MenuIcon from "vue-material-design-icons/Menu.vue";
+    import BaseComponents from "../BaseComponents.vue"
+
     export default {
+        extends: BaseComponents,
         components: {MenuIcon},
         data() {
             return {

ui/src/components/layout/DataTable.vue

@@ -1,21 +1,21 @@
 <template>
     <div>
-        <nav v-if="hasNavBar">
+        <nav :data-component="dataComponent + '#nav'" v-if="hasNavBar">
             <collapse>
                 <slot name="navbar" />
             </collapse>
         </nav>
 
-        <el-container direction="vertical" v-loading="isLoading">
-            <slot name="top" />
+        <el-container :data-component="dataComponent + '#container'" direction="vertical" v-loading="isLoading">
+            <slot name="top" :data-component="dataComponent + '#top'" />
 
             <pagination v-if="!embed" :size="size" :top="true" :page="page" :total="total" :max="max" @page-changed="onPageChanged">
                 <template #search>
                     <slot name="search" />
                 </template>
             </pagination>
 
-            <slot name="table" />
+            <slot name="table" :data-component="dataComponent + '#table'" />
 
             <pagination v-if="total > 0" :size="size" :page="page" :total="total" :max="max" @page-changed="onPageChanged" />
         </el-container>
@@ -25,8 +25,10 @@
 <script>
     import Pagination from "./Pagination.vue";
     import Collapse from "./Collapse.vue";
+    import BaseComponents from "../BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         components: {Pagination, Collapse},
         emits: ["page-changed"],
         computed: {

ui/src/components/layout/DateAgo.vue

@@ -1,12 +1,23 @@
 <template>
-    <el-tooltip :key="uid('tooltip')" v-if="date" :content="inverted ? from : full" :persistent="false" transition="" :hide-after="0" effect="light">
+    <el-tooltip
+        :data-component="dataComponent"
+        :key="uid('tooltip')"
+        v-if="date"
+        :content="inverted ? from : full"
+        :persistent="false"
+        transition=""
+        :hide-after="0"
+        effect="light"
+    >
         <span :class="className">{{ inverted ? full : from }}</span>
     </el-tooltip>
 </template>
 <script>
     import Utils from "../../utils/utils";
+    import BaseComponents from "../BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         props: {
             date: {
                 type: String,

ui/src/components/layout/DateRange.vue

@@ -1,5 +1,6 @@
 <template>
     <el-date-picker
+        :data-component="dataComponent"
         :model-value="date"
         @update:model-value="onDate"
         type="datetimerange"
@@ -10,8 +11,10 @@
 </template>
 <script>
     import moment from "moment";
+    import BaseComponents from "../BaseComponents.vue"
 
     export default {
+        extends: BaseComponents,
         emits: ["update:modelValue"],
         data() {
             return {

ui/src/components/layout/Duration.vue

@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span :data-component="dataComponent">
         <el-tooltip v-if="histories" popper-class="duration-tt" :persistent="false" transition="" :hide-after="0" effect="light">
             <template #content>
                 <span v-for="(history, index) in histories" :key="'tt-' + index">
@@ -16,10 +16,12 @@
 <script>
     import State from "../../utils/state";
     import Utils from "../../utils/utils";
+    import BaseComponents from "../BaseComponents.vue"
 
     const ts = date => new Date(date).getTime();
 
     export default {
+        extends: BaseComponents,
         props: {
             histories: {
                 type: Array,