ronantakizawa/codereview-bench huggingface dataset:
Repository: louislam/uptime-kuma
File: src/components/MonitorListItem.vue (Vue)

Code before:
}

.select-input-wrapper {
    float: left;
    margin-top: 15px;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 3px dashed $primary;
    border-radius: 0.5rem;
    margin-right: 5px;
    background-color: $highlight-white;
}
.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}
/* Overiding the right padding to move the border of the drag over a few pixels to the left */
.monitor-list .drag-over .item {
    padding-right: 10px 7px 7px 12px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    &.dragging {
        cursor: grabbing;
    }
}

</style>


Review comment (suggestion):
```suggestion
    padding: 10px 7px 7px 12px;
```

Code after:
.animated {
    transition: all 0.2s $easing-in;
}

.select-input-wrapper {
    float: left;
    margin-top: 15px;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    /* We don't want the padding change due to the border animated */
    .item {
        transition: none !important;
    }

    &.dragging {
        cursor: grabbing;
    }
}

</style>
Repository: louislam/uptime-kuma
File: src/components/MonitorListItem.vue (Vue)

Code before:
}

.select-input-wrapper {
    float: left;
    margin-top: 15px;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 3px dashed $primary;
    border-radius: 0.5rem;
    margin-right: 5px;
    background-color: $highlight-white;
}
.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}
/* right-padding -5px due to margin and moving the border -3px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 10px 7px 7px 12px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    &.dragging {
        cursor: grabbing;
    }
}

</style>


Review comment (suggestion):
on second thought, maybe rather like this

```suggestion
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}
.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}
/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
```

Code after:
.animated {
    transition: all 0.2s $easing-in;
}

.select-input-wrapper {
    float: left;
    margin-top: 15px;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    /* We don't want the padding change due to the border animated */
    .item {
        transition: none !important;
    }

    &.dragging {
        cursor: grabbing;
    }
}

</style>
Repository: louislam/uptime-kuma
File: src/components/MonitorListItem.vue (Vue)

Code before:
                event.dataTransfer.setData("text/monitor-id", String(this.monitor.id));
                event.dataTransfer.effectAllowed = "move";
            } catch (e) {
                // ignore
            }
        },

        onDragEnter(event) {
            if (this.monitor.type !== "group") {
                return;
            }

            this.dragOverCount++;
            this.dragOver = true;
        },

        onDragLeave(event) {
            if (this.monitor.type !== "group") {
                return;
            }

            this.dragOverCount--;
            if (this.dragOverCount <= 0) {
                this.dragOverCount = 0;
                this.dragOver = false;
            }
        },

        async onDrop(event) {
            event.preventDefault();
            this.dragOverCount = 0;
            this.dragOver = false;

            // Only groups accept drops
            if (this.monitor.type !== "group") {
                return;
            }

            const draggedId = event.dataTransfer.getData("text/monitor-id");
            if (!draggedId) {
                return;
            }

            const draggedMonitorId = parseInt(draggedId);
            if (isNaN(draggedMonitorId) || draggedMonitorId === this.monitor.id) {
                return;
            }

            const draggedMonitor = this.$root.monitorList[draggedMonitorId];
            if (!draggedMonitor) {
                return;

Review comment (suggestion):
```suggestion
            this.dragOverCount = Math.min(0, this.dragOverCount - 1);
```

Code after:
            } catch (e) {
                // ignore
            }
        },

        onDragEnter(event) {
            if (this.monitor.type !== "group") {
                return;
            }

            this.dragOverCount++;
        },

        onDragLeave(event) {
            if (this.monitor.type !== "group") {
                return;
            }

            this.dragOverCount = Math.max(0, this.dragOverCount - 1);
        },

        async onDrop(event) {
            this.dragOverCount = 0;

            // Only groups accept drops
            if (this.monitor.type !== "group") {
                return;
            }

            const draggedId = event.dataTransfer.getData("text/monitor-id");
            if (!draggedId) {
                return;
            }

            const draggedMonitorId = parseInt(draggedId);
            if (isNaN(draggedMonitorId) || draggedMonitorId === this.monitor.id) {
                return;
            }

            const draggedMonitor = this.$root.monitorList[draggedMonitorId];
            if (!draggedMonitor) {
                return;
            }

            // Save original parent so we can revert locally if server returns error
            const originalParent = draggedMonitor.parent;

            // Prepare a full monitor object (clone) and set new parent
            const monitorToSave = JSON.parse(JSON.stringify(draggedMonitor));
            monitorToSave.parent = this.monitor.id;
Repository: louislam/uptime-kuma
File: src/components/MonitorListItem.vue (Vue)

Code before:
    margin-top: 15px;
    margin-left: 3px;
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    &.dragging {
        cursor: grabbing;
    }
}

</style>


Review comment (suggestion):
```suggestion
    position: relative;
    /* We don't want the padding change due to the border animated */
    transition: none !important;
```

Code after:
    margin-right: 10px;
    padding-left: 4px;
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    /* We don't want the padding change due to the border animated */
    .item {
        transition: none !important;
    }

    &.dragging {
        cursor: grabbing;
    }
}

</style>
Repository: louislam/uptime-kuma
File: src/components/MonitorListItem.vue (Vue)

Code before:
    position: relative;
    z-index: 15;
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;
    /* We don't want the padding change due to the border animated */
    transition: none !important;

    &.dragging {
        cursor: grabbing;
    }
}

</style>


Review comment (suggestion):
```suggestion
    /* We don't want the padding change due to the border animated */
    .item {
        transition: none !important;
    }
```

Code after:
}

.drag-over {
    border: 4px dashed $primary;
    border-radius: 0.5rem;
    background-color: $highlight-white;
}

.dark {
    .drag-over {
        background-color: $dark-bg2;
    }
}

/* -4px on all due to border-width */
.monitor-list .drag-over .item {
    padding: 9px 11px 6px 11px;
}

.draggable-item {
    cursor: grab;
    position: relative;

    /* We don't want the padding change due to the border animated */
    .item {
        transition: none !important;
    }

    &.dragging {
        cursor: grabbing;
    }
}

</style>
Repository: louislam/uptime-kuma
File: server/monitor-types/group.js (JavaScript)

Code before:
                }
                pendingChildren.push(label);
            }
        }

        if (worstStatus === UP) {
            heartbeat.status = UP;
            heartbeat.msg = "All children up and running";
            return;
        }

        if (worstStatus === PENDING) {
            heartbeat.status = PENDING;
            heartbeat.msg = pendingChildren.length > 0 ? `Pending child monitors: ${pendingChildren.join(", ")}` : "Child monitor pending";
            return;
        }

        heartbeat.status = DOWN;

        const downList = downChildren.join(", ");
        const pendingList = pendingChildren.join(", ");
        let message = downList ? `Child monitors down: ${downList}` : "Child monitor down";

        if (pendingChildren.length > 0) {
            message += `; pending: ${pendingList}`;
        }

        // Throw to leverage the generic retry handling and notification flow
        throw new Error(message);
    }
}

module.exports = {
    GroupMonitorType,
};



Review comment (suggestion):
I think this can be simplified, right?

```suggestion
        let message = `Child monitors down: ${downChildren.join(", ")}`;

        if (pendingChildren.length > 0) {
            message += `; pending: ${pendingChildren.join(", ")}`;
        }
```

Code after:
                }
                pendingChildren.push(label);
            }
        }

        if (worstStatus === UP) {
            heartbeat.status = UP;
            heartbeat.msg = "All children up and running";
            return;
        }

        if (worstStatus === PENDING) {
            heartbeat.status = PENDING;
            heartbeat.msg = `Pending child monitors: ${pendingChildren.join(", ")}`;
            return;
        }

        heartbeat.status = DOWN;

        let message = `Child monitors down: ${downChildren.join(", ")}`;

        if (pendingChildren.length > 0) {
            message += `; pending: ${pendingChildren.join(", ")}`;
        }

        // Throw to leverage the generic retry handling and notification flow
        throw new Error(message);
    }
}

module.exports = {
    GroupMonitorType,
};
Repository: louislam/uptime-kuma
File: server/notification-providers/smsir.js (JavaScript)

Code before:
            config = this.getAxiosConfigWithProxy(config);

            /**
             * @type {string}
             */
            let formattedMobile = notification.smsirNumber;

            if (formattedMobile.length === 10 && formattedMobile.startsWith("9") && String(parseInt(formattedMobile)) === formattedMobile) {
                // 9xxxxxxxxx Format
                formattedMobile = notification.smsirNumber; // Same as before
            } else if (formattedMobile.length === 11 && formattedMobile.startsWith("09") && String(parseInt(formattedMobile)) === formattedMobile.substring(1)) {
                // 09xxxxxxxxx Format
                formattedMobile = formattedMobile.substring(1);
            } else {
                // Invalid/Unsupported Format
                // FIXME Throw an error or something
            }

            await axios.post(
                url,
                {
                    mobile: formattedMobile,
                    templateId: parseInt(notification.smsirTemplate),
                    parameters: [
                        {
                            name: "uptimestatus",
                            value: msg
                        }
                    ]
                },
                config
            );

            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = SMSIR;


Review comment (suggestion):
lets be closer to what we do

```suggestion
                            name: "msg",
```

Code after:
            config = this.getAxiosConfigWithProxy(config);

            let formattedMobile = notification.smsirNumber;
            if (formattedMobile.length === 11 && formattedMobile.startsWith("09") && String(parseInt(formattedMobile)) === formattedMobile.substring(1)) {
                // 09xxxxxxxxx Format
                formattedMobile = formattedMobile.substring(1);
            }

            await axios.post(
                url,
                {
                    mobile: formattedMobile,
                    templateId: parseInt(notification.smsirTemplate),
                    parameters: [
                        {
                            name: "uptkumaalert",
                            value: msg
                        }
                    ]
                },
                config
            );

            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = SMSIR;
Repository: louislam/uptime-kuma
File: src/components/notifications/SMSIR.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="smsir-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smsir-key" v-model="$parent.notification.smsirApiKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="smsir-number" class="form-label">{{ $t("Recipient Number") }}</label>
        <input id="smsir-number" v-model="$parent.notification.smsirNumber" placeholder="9123456789" type="text" maxlength="11" minlength="10" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="smsir-template" class="form-label">{{ $t("Template ID") }}</label>
        <input id="smsir-template" v-model="$parent.notification.smsirTemplate" placeholder="12345" type="text" class="form-control" required>
        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSMSIRTemplateID">
            <a href="https://app.sms.ir/fast-send/template" target="_blank">{{ $t("here") }}</a>
        </i18n-t>
    </div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>


Review comment (refactor):
lets simplify things for our translators a bit

```suggestion
            <template #uptkumaalert>
                <code>#uptkumaalert#</code>
            </template>
            <template #here>
                <a href="https://app.sms.ir/fast-send/template" target="_blank">{{ $t("here") }}</a>
            </template>
```

Code after:
<template>
    <div class="mb-3">
        <label for="smsir-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smsir-key" v-model="$parent.notification.smsirApiKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="smsir-number" class="form-label">{{ $t("Recipient Number") }}</label>
        <input id="smsir-number" v-model="$parent.notification.smsirNumber" placeholder="9123456789" type="text" maxlength="11" minlength="10" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="smsir-template" class="form-label">{{ $t("Template ID") }}</label>
        <input id="smsir-template" v-model="$parent.notification.smsirTemplate" placeholder="12345" type="text" class="form-control" required>
        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSMSIRTemplateID">
            <template #uptkumaalert>
                <code>#uptkumaalert#</code>
            </template>
            <template #here>
                <a href="https://app.sms.ir/fast-send/template" target="_blank">{{ $t("here") }}</a>
            </template>
        </i18n-t>
    </div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>
Repository: louislam/uptime-kuma
File: src/components/notifications/SMSIR.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="smsir-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smsir-key" v-model="$parent.notification.smsirApiKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="smsir-number" class="form-label">{{ $t("Recipient Number") }}</label>
        <input id="smsir-number" v-model="$parent.notification.smsirNumber" placeholder="9123456789" type="text" maxlength="11" minlength="10" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="smsir-template" class="form-label">{{ $t("Template ID") }}</label>
        <input id="smsir-template" v-model="$parent.notification.smsirTemplate" placeholder="12345" type="text" class="form-control" required>
        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSMSIRTemplateID">
            <a href="https://app.sms.ir/fast-send/template" target="_blank">{{ $t("here") }}</a>
        </i18n-t>
    </div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>


Review comment (suggestion):
just to be sure, this is literal `msg` in the template, not something like `{msg}`?

If it is the later, lets change the text to reflect this and avoid confusion 😉 

Code after:
<template>
    <div class="mb-3">
        <label for="smsir-key" class="form-label">{{ $t("API Key") }}</label>
        <HiddenInput id="smsir-key" v-model="$parent.notification.smsirApiKey" :required="true" autocomplete="new-password"></HiddenInput>
    </div>
    <div class="mb-3">
        <label for="smsir-number" class="form-label">{{ $t("Recipient Number") }}</label>
        <input id="smsir-number" v-model="$parent.notification.smsirNumber" placeholder="9123456789" type="text" maxlength="11" minlength="10" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="smsir-template" class="form-label">{{ $t("Template ID") }}</label>
        <input id="smsir-template" v-model="$parent.notification.smsirTemplate" placeholder="12345" type="text" class="form-control" required>
        <i18n-t tag="div" class="form-text" keypath="wayToGetClickSMSIRTemplateID">
            <template #uptkumaalert>
                <code>#uptkumaalert#</code>
            </template>
            <template #here>
                <a href="https://app.sms.ir/fast-send/template" target="_blank">{{ $t("here") }}</a>
            </template>
        </i18n-t>
    </div>
</template>
<script>
import HiddenInput from "../HiddenInput.vue";

export default {
    components: {
        HiddenInput,
    },
};
</script>
Repository: louislam/uptime-kuma
File: server/notification-providers/twilio.js (JavaScript)

Code before:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Twilio extends NotificationProvider {
    name = "twilio";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        let apiKey = notification.twilioApiKey ? notification.twilioApiKey : notification.twilioAccountSID;
        let twilioMessagingServiceSID = notification.twilioMessagingServiceSID ? notification.twilioMessagingServiceSID : null;

        try {
            let config = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    "Authorization": "Basic " + Buffer.from(apiKey + ":" + notification.twilioAuthToken).toString("base64"),
                }
            };
            config = this.getAxiosConfigWithProxy(config);

            let data = new URLSearchParams();
            data.append("To", notification.twilioToNumber);
            data.append("From", notification.twilioFromNumber);
            data.append("Body", msg);

            if (twilioMessagingServiceSID !== null) {
                data.append("MessagingServiceSid", twilioMessagingServiceSID);
            }

            await axios.post(`https://api.twilio.com/2010-04-01/Accounts/${(notification.twilioAccountSID)}/Messages.json`, data, config);

            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }

Review comment (suggestion):
Not sure why this check exists

```suggestion
```

Code after:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Twilio extends NotificationProvider {
    name = "twilio";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        let apiKey = notification.twilioApiKey ? notification.twilioApiKey : notification.twilioAccountSID;

        try {
            let config = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    "Authorization": "Basic " + Buffer.from(apiKey + ":" + notification.twilioAuthToken).toString("base64"),
                }
            };
            config = this.getAxiosConfigWithProxy(config);

            let data = new URLSearchParams();
            data.append("To", notification.twilioToNumber);
            data.append("From", notification.twilioFromNumber);
            data.append("Body", msg);
            if (notification.twilioMessagingServiceSID) {
                data.append("MessagingServiceSid", notification.twilioMessagingServiceSID);
            }

            await axios.post(`https://api.twilio.com/2010-04-01/Accounts/${(notification.twilioAccountSID)}/Messages.json`, data, config);

            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }