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

client/src/components/BaseComponents/GModal.vue

+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

client/src/components/Common/TagsSelectionDialog.vue

+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>

client/src/components/TagsMultiselect/HeadlessMultiselect.vue

+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"

client/src/components/Workflow/List/WorkflowList.vue

+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' : ''

            }`"