sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UserWebhook/SystemWebhookのテスト送信機能を追加 (#14489)

Browse Source 
* feat: UserWebhook/SystemWebhookのテスト送信機能を追加

* fix CHANGELOG.md

* 一部設定をパラメータから上書き出来るように修正

* remove async

* regenerate autogen
This commit is contained in:
おさむのひと
2024-09-19 17:20:50 +09:00
committed by GitHub
parent ceb4640669
commit 4ac8aad50a
27 changed files with 1477 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/MkSystemWebhookEditor.impl.ts
View File

@@ -4,9 +4,10 @@
*/
import { defineAsyncComponent } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os.js';
export type SystemWebhookEventType = 'abuseReport' | 'abuseReportResolved';
export type SystemWebhookEventType = Misskey.entities.SystemWebhook['on'][number];
export type MkSystemWebhookEditorProps = {
mode: 'create' | 'edit';

76
packages/frontend/src/components/MkSystemWebhookEditor.vue
View File

@@ -35,16 +35,31 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts._webhookSettings.trigger }}</template>
<div class="_gaps_s">
<MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template>
</MkSwitch>
<MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template>
</MkSwitch>
<MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template>
</MkSwitch>
<div class="_gaps">
<div class="_gaps_s">
<div :class="$style.switchBox">
<MkSwitch v-model="events.abuseReport" :disabled="disabledEvents.abuseReport">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReport }}</template>
</MkSwitch>
<MkButton v-show="mode === 'edit'" transparent :class="$style.testButton" :disabled="!(isActive && events.abuseReport)" @click="test('abuseReport')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="events.abuseReportResolved" :disabled="disabledEvents.abuseReportResolved">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.abuseReportResolved }}</template>
</MkSwitch>
<MkButton v-show="mode === 'edit'" transparent :class="$style.testButton" :disabled="!(isActive && events.abuseReportResolved)" @click="test('abuseReportResolved')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="events.userCreated" :disabled="disabledEvents.userCreated">
<template #label>{{ i18n.ts._webhookSettings._systemEvents.userCreated }}</template>
</MkSwitch>
<MkButton v-show="mode === 'edit'" transparent :class="$style.testButton" :disabled="!(isActive && events.userCreated)" @click="test('userCreated')"><i class="ti ti-send"></i></MkButton>
</div>
</div>
<div v-show="mode === 'edit'" :class="$style.description">
{{ i18n.ts._webhookSettings.testRemarks }}
</div>
</div>
</MkFolder>
@@ -66,6 +81,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script setup lang="ts">
import { computed, onMounted, ref, shallowRef, toRefs } from 'vue';
import * as Misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import {
@@ -180,6 +196,21 @@ async function loadingScope<T>(fn: () => Promise<T>): Promise<T> {
}
}
async function test(type: Misskey.entities.SystemWebhook['on'][number]): Promise<void> {
if (!id.value) {
return Promise.resolve();
}
await os.apiWithDialog('admin/system-webhook/test', {
webhookId: id.value,
type,
override: {
secret: secret.value,
url: url.value,
},
});
}
onMounted(async () => {
await loadingScope(async () => {
switch (mode.value) {
@@ -235,4 +266,29 @@ onMounted(async () => {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
.switchBox {
display: flex;
align-items: center;
justify-content: start;
.testButton {
$buttonSize: 28px;
padding: 0;
width: $buttonSize;
min-width: $buttonSize;
max-width: $buttonSize;
height: $buttonSize;
margin-left: auto;
line-height: normal;
font-size: 90%;
border-radius: 9999px;
}
}
.description {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
}
</style>

88
packages/frontend/src/pages/settings/webhook.edit.vue
View File

@@ -21,14 +21,41 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormSection>
<template #label>{{ i18n.ts._webhookSettings.trigger }}</template>
<div class="_gaps_s">
<MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch>
<MkSwitch v-model="event_followed">{{ i18n.ts._webhookSettings._events.followed }}</MkSwitch>
<MkSwitch v-model="event_note">{{ i18n.ts._webhookSettings._events.note }}</MkSwitch>
<MkSwitch v-model="event_reply">{{ i18n.ts._webhookSettings._events.reply }}</MkSwitch>
<MkSwitch v-model="event_renote">{{ i18n.ts._webhookSettings._events.renote }}</MkSwitch>
<MkSwitch v-model="event_reaction">{{ i18n.ts._webhookSettings._events.reaction }}</MkSwitch>
<MkSwitch v-model="event_mention">{{ i18n.ts._webhookSettings._events.mention }}</MkSwitch>
<div class="_gaps">
<div class="_gaps_s">
<div :class="$style.switchBox">
<MkSwitch v-model="event_follow">{{ i18n.ts._webhookSettings._events.follow }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_follow)" @click="test('follow')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_followed">{{ i18n.ts._webhookSettings._events.followed }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_followed)" @click="test('followed')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_note">{{ i18n.ts._webhookSettings._events.note }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_note)" @click="test('note')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_reply">{{ i18n.ts._webhookSettings._events.reply }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_reply)" @click="test('reply')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_renote">{{ i18n.ts._webhookSettings._events.renote }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_renote)" @click="test('renote')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_reaction">{{ i18n.ts._webhookSettings._events.reaction }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_reaction)" @click="test('reaction')"><i class="ti ti-send"></i></MkButton>
</div>
<div :class="$style.switchBox">
<MkSwitch v-model="event_mention">{{ i18n.ts._webhookSettings._events.mention }}</MkSwitch>
<MkButton transparent :class="$style.testButton" :disabled="!(active && event_mention)" @click="test('mention')"><i class="ti ti-send"></i></MkButton>
</div>
</div>
<div :class="$style.description">
{{ i18n.ts._webhookSettings.testRemarks }}
</div>
</div>
</FormSection>
@@ -43,6 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref, computed } from 'vue';
import * as Misskey from 'misskey-js';
import MkInput from '@/components/MkInput.vue';
import FormSection from '@/components/form/section.vue';
import MkSwitch from '@/components/MkSwitch.vue';
@@ -76,8 +104,8 @@ const event_renote = ref(webhook.on.includes('renote'));
const event_reaction = ref(webhook.on.includes('reaction'));
const event_mention = ref(webhook.on.includes('mention'));
async function save(): Promise<void> {
const events = [];
function save() {
const events: Misskey.entities.UserWebhook['on'] = [];
if (event_follow.value) events.push('follow');
if (event_followed.value) events.push('followed');
if (event_note.value) events.push('note');
@@ -110,8 +138,21 @@ async function del(): Promise<void> {
router.push('/settings/webhook');
}
async function test(type: Misskey.entities.UserWebhook['on'][number]): Promise<void> {
await os.apiWithDialog('i/webhooks/test', {
webhookId: props.webhookId,
type,
override: {
secret: secret.value,
url: url.value,
},
});
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const headerActions = computed(() => []);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const headerTabs = computed(() => []);
definePageMetadata(() => ({
@@ -119,3 +160,30 @@ definePageMetadata(() => ({
icon: 'ti ti-webhook',
}));
</script>
<style module lang="scss">
.switchBox {
display: flex;
align-items: center;
justify-content: start;
.testButton {
$buttonSize: 28px;
padding: 0;
width: $buttonSize;
min-width: $buttonSize;
max-width: $buttonSize;
height: $buttonSize;
margin-left: auto;
line-height: inherit;
font-size: 90%;
border-radius: 9999px;
}
}
.description {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
}
</style>