Merge pull request #20443 from davelopez/25.0_fix_workflow_list_add_empty_tag_list

[25.0] Fix add button is enabled when empty tag list

Author: itisAliRH

client/src/components/BaseComponents/GModal.vue

@@ -33,6 +33,10 @@ const props = defineProps<{
     title?: string;
     /** Fixes the height of the modal to a pre-set height based on `size` */
     fixedHeight?: boolean;
+    /** Disables the Ok button */
+    okDisabled?: boolean;
+    /** Title to show when the Ok button is disabled */
+    okDisabledTitle?: string;
 }>();
 
 const emit = defineEmits<{
@@ -170,7 +174,13 @@ defineExpose({ showModal, hideModal });
 
                 <div v-if="props.confirm" class="g-modal-confirm-buttons">
                     <GButton @click="hideModal(false)"> {{ props.cancelText ?? "Cancel" }} </GButton>
-                    <GButton color="blue" @click="hideModal(true)"> {{ props.okText ?? "Ok" }} </GButton>
+                    <GButton
+                        :disabled="okDisabled"
+                        :disabled-title="okDisabledTitle"
+                        color="blue"
+                        @click="hideModal(true)">
+                        {{ props.okText ?? "Ok" }}
+                    </GButton>
                 </div>
             </footer>
         </section>

client/src/components/Common/TagsSelectionDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import GModal from "@/components/BaseComponents/GModal.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
@@ -17,6 +17,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const tags = ref(props.initialTags);
 
+const emptyTagList = computed(() => {
+    return tags.value.length === 0;
+});
+
 const emit = defineEmits<{
     (e: "cancel"): void;
     (e: "ok", tags: string[]): void;
@@ -42,7 +46,16 @@ function resetTags() {
 </script>
 
 <template>
-    <GModal :show="show" ok-text="Add" :confirm="true" size="small" :title="title" @ok="onOk" @cancel="onCancel">
+    <GModal
+        :show="show"
+        ok-text="Add"
+        :confirm="true"
+        size="small"
+        :title="title"
+        :ok-disabled="emptyTagList"
+        ok-disabled-title="Please select at least one tag"
+        @ok="onOk"
+        @cancel="onCancel">
         <StatelessTags :value="tags" @input="onTagsChange($event)" />
     </GModal>
 </template>