Repository: louislam/uptime-kuma
File: src/components/TagsManager.vue (Vue)

Code before:
                                data-testid="tag-value-input"
                                @keydown.enter.prevent="onEnter"
                            />
                        </div>

                        <!-- General feedback area for tag input validation messages -->
                        <div v-if="validateDraftTag.invalid && validateDraftTag.messageKey && (newDraftTag.select != null || canStageMoreNewSystemTags || validateDraftTag.messageKey !== 'tagLimitReached')" class="form-text text-danger mb-2">
                            {{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
                        </div>
                        <!-- End Validation Feedback -->

                        <!-- Add Another Tag Button -->
                        <!-- This button will be moved to the footer -->

                        <!-- Action Buttons: Clear current form and Stage current tag -->
                        <!-- Removed original action buttons here -->
                        <div v-if="newDraftTag.select == null && !canStageMoreNewSystemTags && validateDraftTag.invalid && validateDraftTag.messageKey === 'tagLimitReached'" class="form-text text-danger text-end mt-1">
                            {{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
                        </div>
                    </div>
                    <!-- Modal Footer: Cancel batch or Confirm and Add all staged tags -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary me-2" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
                            {{ $t("Add Another Tag") }}
                        </button>
                        <button type="button" class="btn btn-secondary" @click.stop="clearStagingAndCloseModal">{{ $t("Cancel") }}</button>
                        <button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="add-tags-final-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Add Tags") }}</button>
                    </div>
                    <!-- End Modal Footer -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const MAX_NEW_SYSTEM_TAGS_PER_BATCH = 10; // Example limit

import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect";
import { colorOptions } from "../util-frontend";
import Tag from "../components/Tag.vue";

/**
 * @typedef Tag
 * @type {object}
 * @property {number | undefined} id ID of tag assignment
 * @property {number | undefined} monitor_id ID of monitor tag is
 * assigned to
 * @property {number | undefined} tag_id ID of tag
 * @property {string} value Value given to tag

Review comment (suggestion):
(bikeshedding moment)

not sure, but I think if we order it cancel, add another´, add all this seems more "natural" to me.
Not sure why, likely just being used to this.

```suggestion
                        <button type="button" class="btn btn-secondary" @click.stop="clearStagingAndCloseModal">{{ $t("Cancel") }}</button>
                        <button type="button" class="btn btn-outline-primary me-2" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
                            {{ $t("Add Another Tag") }}
                        </button>
```

Code after:
                            />
                        </div>

                        <div v-if="validateDraftTag.invalid && validateDraftTag.messageKey" class="form-text text-danger mb-2">
                            {{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click.stop="clearStagingAndCloseModal">{{ $t("Cancel") }}</button>
                        <button type="button" class="btn btn-outline-primary me-2" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
                            {{ $t("Add Another Tag") }}
                        </button>
                        <button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="add-tags-final-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Done") }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from "bootstrap";
import VueMultiselect from "vue-multiselect";
import { colorOptions } from "../util-frontend";
import Tag from "../components/Tag.vue";

/**
 * @typedef Tag
 * @type {object}
 * @property {number | undefined} id ID of tag assignment
 * @property {number | undefined} monitor_id ID of monitor tag is
 * assigned to
 * @property {number | undefined} tag_id ID of tag
 * @property {string} value Value given to tag
 * @property {string} name Name of tag
 * @property {string} color Colour of tag
 * @property {boolean | undefined} new Should a new tag be created?
 */

export default {
    components: {
        Tag,
        VueMultiselect,
    },
    props: {
        /**
         * Array of tags to be pre-selected
         * @type {Tag[]}
         */
        preSelectedTags: {
            type: Array,