Unverified Commit 8c2a2885 authored by Marius van den Beek's avatar Marius van den Beek Committed by GitHub
Browse files

Merge pull request #20362 from davelopez/25.0_fix_workflow_bulk_add_tags

[25.0] Fix selection issue when adding tags to workflows in bulk
parents 51c9bddd 5a08babc
Loading
Loading
Loading
Loading
+6 −1
Original line number Diff line number Diff line
@@ -9,12 +9,14 @@ import { faXmark } from "font-awesome-6";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

import { type ComponentSize, type ComponentSizeClassList, prefix } from "@/components/BaseComponents/componentVariants";
import { useUid } from "@/composables/utils/uid";
import { match } from "@/utils/utils";

import GButton from "@/components/BaseComponents/GButton.vue";
import Heading from "@/components/Common/Heading.vue";

const props = defineProps<{
    id?: string;
    /** Controls if the modal is showing. Syncable */
    show?: boolean;
    /** Controls the modals size. If unset, size can be controlled via css `width` and `height` */
@@ -128,13 +130,16 @@ const headingSize = computed(() =>
    })
);

const uid = useUid("g-modal");
const currentId = computed(() => props.id ?? uid.value);

defineExpose({ showModal, hideModal });
</script>

<template>
    <!-- This is a convenience shortcut for mouse-users to close the dialog, so disabling this warning is fine here -->
    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events -->
    <dialog ref="dialog" class="g-dialog" :class="sizeClass" @click="onClickDialog">
    <dialog :id="currentId" ref="dialog" class="g-dialog" :class="sizeClass" @click="onClickDialog">
        <section>
            <header>
                <Heading
+18 −3
Original line number Diff line number Diff line
<script setup lang="ts">
import { BModal } from "bootstrap-vue";
import { ref } from "vue";

import GModal from "@/components/BaseComponents/GModal.vue";
import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";

interface Props {
    show?: boolean;
    title?: string;
    initialTags?: string[];
}
@@ -24,10 +25,24 @@ const emit = defineEmits<{
function onTagsChange(newTags: string[]) {
    tags.value = newTags;
}

function onOk() {
    emit("ok", tags.value);
    resetTags();
}

function onCancel() {
    emit("cancel");
    resetTags();
}

function resetTags() {
    tags.value = props.initialTags;
}
</script>

<template>
    <BModal visible centered size="lg" :title="title" @ok="emit('ok', tags)" @hide="emit('cancel')">
    <GModal :show="show" ok-text="Add" :confirm="true" size="small" :title="title" @ok="onOk" @cancel="onCancel">
        <StatelessTags :value="tags" @input="onTagsChange($event)" />
    </BModal>
    </GModal>
</template>
+11 −1
Original line number Diff line number Diff line
@@ -266,6 +266,15 @@ watch(
    }
);

function getPopupLayerId() {
    if (root.value) {
        const closestDialog = root.value.closest("dialog");
        return closestDialog?.id ?? "app";
    } else {
        return "app";
    }
}

whenever(isOpen, async () => {
    await nextTick();
    bounds.update();
@@ -273,6 +282,7 @@ whenever(isOpen, async () => {
</script>

<template>
    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions  -->
    <div ref="root" class="headless-multiselect" @mousedown="onMouseDownInside" @focusout="onFocusOut">
        <fieldset v-if="isOpen" @focusout="onFocusOut">
            <input
@@ -307,7 +317,7 @@ whenever(isOpen, async () => {
            <FontAwesomeIcon icon="fa-tags" />
        </button>

        <Vue2Teleport v-if="isOpen" to="#app">
        <Vue2Teleport v-if="isOpen" :to="`#${getPopupLayerId()}`">
            <div
                :id="`${props.id}-options`"
                aria-expanded="true"
+1 −1
Original line number Diff line number Diff line
@@ -535,7 +535,7 @@ onMounted(() => {
        </div>

        <TagsSelectionDialog
            v-if="showBulkAddTagsModal"
            :show="showBulkAddTagsModal"
            :title="`Add tags to ${selectedWorkflowIds.length} selected workflow${
                selectedWorkflowIds.length > 1 ? 's' : ''
            }`"