Repository: louislam/uptime-kuma
File: src/pages/EditMonitor.vue (Vue)

Code before:
                                        :taggable="true"
                                    ></VueMultiselect>

                                    <div class="form-text">
                                        {{ $t("acceptedStatusCodesDescription") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="forceIp" class="form-label">{{ $t("Force Ip") }}</label>

                                    <select id="forceIp" v-model="monitor.forceIp" class="form-select">
                                        <option :value="null">
                                            {{ $t("None") }}
                                        </option>
                                        <option value="ipv4">
                                            IPv4
                                        </option>
                                        <option value="ipv6">
                                            IPv6
                                        </option>
                                    </select>

                                    <div class="form-text">
                                        {{ $t("forceIpDescription") }}
                                    </div>
                                </div>
                            </template>

                            <!-- Parent Monitor -->
                            <div class="my-3">
                                <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
                                <ActionSelect
                                    id="monitorGroupSelector"
                                    v-model="monitor.parent"
                                    :action-aria-label="$t('openModalTo', 'setup a new monitor group')"
                                    :options="parentMonitorOptionsList"
                                    :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null"
                                    :icon="'plus'"
                                    :action="() => $refs.createGroupDialog.show()"
                                />
                            </div>

                            <!-- Description -->
                            <div class="my-3">
                                <label for="description" class="form-label">{{ $t("Description") }}</label>
                                <input id="description" v-model="monitor.description" type="text" class="form-control">
                            </div>

                            <div class="my-3">
                                <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>

Review comment (suggestion):
I am going over this again.
I would like for the UX here to be slightly improved:

- using a multiselector (ipv4, ipv6) like in https://github.com/louislam/uptime-kuma/pull/3885
  - no third state which can be confusing
  - make sure that at least one is always selected ^^
- if both ipv4 + ipv6 are selected a help message that the happy eyeballs enhancement from https://github.com/louislam/uptime-kuma/pull/5880/files#r2138339162 is used

Code after:
                                        :taggable="true"
                                    ></VueMultiselect>

                                    <div class="form-text">
                                        {{ $t("acceptedStatusCodesDescription") }}
                                    </div>
                                </div>

                                <div class="my-3">
                                    <label for="ipFamily" class="form-label">{{ $t("Ip Family") }}</label>
                                    <select id="ipFamily" v-model="monitor.ipFamily" class="form-select">
                                        <option :value="null">{{ $t("auto-select") }}</option>
                                        <option value="ipv4">IPv4</option>
                                        <option value="ipv6">IPv6</option>
                                    </select>
                                    <i18n-t v-if="monitor.ipFamily == null" keypath="ipFamilyDescriptionAutoSelect" tag="div" class="form-text">
                                        <template #happyEyeballs>
                                            <a href="https://en.wikipedia.org/wiki/Happy_Eyeballs" target="_blank">{{ $t("Happy Eyeballs algorithm") }}</a>
                                        </template>
                                    </i18n-t>
                                </div>
                            </template>

                            <!-- Parent Monitor -->
                            <div class="my-3">
                                <label for="monitorGroupSelector" class="form-label">{{ $t("Monitor Group") }}</label>
                                <ActionSelect
                                    id="monitorGroupSelector"
                                    v-model="monitor.parent"
                                    :action-aria-label="$t('openModalTo', 'setup a new monitor group')"
                                    :options="parentMonitorOptionsList"
                                    :disabled="sortedGroupMonitorList.length === 0 && draftGroupName == null"
                                    :icon="'plus'"
                                    :action="() => $refs.createGroupDialog.show()"
                                />
                            </div>

                            <!-- Description -->
                            <div class="my-3">
                                <label for="description" class="form-label">{{ $t("Description") }}</label>
                                <input id="description" v-model="monitor.description" type="text" class="form-control">
                            </div>

                            <div class="my-3">
                                <tags-manager ref="tagsManager" :pre-selected-tags="monitor.tags"></tags-manager>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div v-if="$root.isMobile" class="mt-3" />