Block deliver by software (#15727)

* feat(backend): suspend instance by software

* feat(frontend): suspend instance by software

* docs(chaangelog): 連合先のソフトウェア及びバージョン名により配信停止を行えるようになりました

* chore: 例で使うバージョン名を変える

* fix: broken lockfile

* fix: broken lock file

* fix broken lock file

* update changelog

* fix dependencies

* Update CHANGELOG.md

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

packages/frontend/src/pages/admin/settings.vue

@@ -230,6 +230,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts.federationAllowedHosts }}<span v-if="federationForm.modifiedStates.federationHosts" class="_modified">{{ i18n.ts.modified }}</span></template>
 						<template #caption>{{ i18n.ts.federationAllowedHostsDescription }}</template>
 					</MkTextarea>
+
+					<MkFolder>
+						<template #icon><i class="ti ti-list"></i></template>
+						<template #label><SearchLabel>{{ i18n.ts._serverSettings.deliverSuspendedSoftware }}</SearchLabel></template>
+						<template #footer>
+							<div class="_buttons">
+								<MkButton @click="federationForm.state.deliverSuspendedSoftware.push({software: '', versionRange: ''})"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+							</div>
+						</template>
+
+						<div :class="$style.metadataRoot" class="_gaps_s">
+							<MkInfo>{{ i18n.ts._serverSettings.deliverSuspendedSoftwareDescription }}</MkInfo>
+							<div v-for="(element, index) in federationForm.state.deliverSuspendedSoftware" :key="index" v-panel :class="$style.fieldDragItem">
+								<button class="_button" :class="$style.dragItemRemove" @click="federationForm.state.deliverSuspendedSoftware.splice(index, 1)"><i class="ti ti-x"></i></button>
+								<div :class="$style.dragItemForm">
+									<FormSplit :minWidth="200">
+										<MkInput v-model="element.software" small :placeholder="i18n.ts.softwareName">
+										</MkInput>
+										<MkInput v-model="element.versionRange" small :placeholder="i18n.ts.version">
+										</MkInput>
+									</FormSplit>
+								</div>
+							</div>
+						</div>
+					</MkFolder>
 				</div>
 			</MkFolder>
 
@@ -368,10 +393,12 @@ const urlPreviewForm = useForm({
 const federationForm = useForm({
 	federation: meta.federation,
 	federationHosts: meta.federationHosts.join('\n'),
+	deliverSuspendedSoftware: meta.deliverSuspendedSoftware,
 }, async (state) => {
 	await os.apiWithDialog('admin/update-meta', {
 		federation: state.federation,
 		federationHosts: state.federationHosts.split('\n'),
+		deliverSuspendedSoftware: state.deliverSuspendedSoftware,
 	});
 	fetchInstance(true);
 });
@@ -398,4 +425,53 @@ definePage(() => ({
 	font-size: 0.85em;
 	color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
 }
+
+.metadataRoot {
+	container-type: inline-size;
+}
+
+.fieldDragItem {
+	display: flex;
+	padding: 10px;
+	align-items: flex-end;
+	border-radius: 6px;
+
+	/* (drag button) 32px + (drag button margin) 8px + (input width) 200px * 2 + (input gap) 12px = 452px */
+	@container (max-width: 452px) {
+		align-items: center;
+	}
+}
+
+.dragItemHandle {
+	cursor: grab;
+	width: 32px;
+	height: 32px;
+	margin: 0 8px 0 0;
+	opacity: 0.5;
+	flex-shrink: 0;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.dragItemRemove {
+	@extend .dragItemHandle;
+
+	color: #ff2a2a;
+	opacity: 1;
+	cursor: pointer;
+
+	&:hover, &:focus {
+		opacity: .7;
+	}
+
+	&:active {
+		cursor: pointer;
+	}
+}
+
+.dragItemForm {
+	flex-grow: 1;
+}
 </style>

packages/frontend/src/pages/instance-info.vue

@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</template>
 					</MkKeyValue>
 					<MkButton v-if="suspensionState === 'none'" :disabled="!instance" danger @click="stopDelivery">{{ i18n.ts._delivery.stop }}</MkButton>
-					<MkButton v-if="suspensionState !== 'none'" :disabled="!instance" @click="resumeDelivery">{{ i18n.ts._delivery.resume }}</MkButton>
+					<MkButton v-if="suspensionState !== 'none'" :disabled="!instance || suspensionState == 'softwareSuspended'" @click="resumeDelivery">{{ i18n.ts._delivery.resume }}</MkButton>
 					<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
 					<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
 					<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
@@ -164,7 +164,7 @@ const tab = ref('overview');
 const chartSrc = ref<ChartSrc>('instance-requests');
 const meta = ref<Misskey.entities.AdminMetaResponse | null>(null);
 const instance = ref<Misskey.entities.FederationInstance | null>(null);
-const suspensionState = ref<'none' | 'manuallySuspended' | 'goneSuspended' | 'autoSuspendedForNotResponding'>('none');
+const suspensionState = ref<'none' | 'manuallySuspended' | 'goneSuspended' | 'autoSuspendedForNotResponding' | 'softwareSuspended'>('none');
 const isBlocked = ref(false);
 const isSilenced = ref(false);
 const isMediaSilenced = ref(false);

packages/frontend/src/use/use-form.ts

@@ -5,6 +5,7 @@
 
 import { computed, reactive, watch } from 'vue';
 import type { Reactive } from 'vue';
+import { deepEqual } from '@/utility/deep-equal';
 
 function copy<T>(v: T): T {
 	return JSON.parse(JSON.stringify(v));
@@ -27,7 +28,7 @@ export function useForm<T extends Record<string, any>>(initialState: T, save: (n
 
 	watch([currentState, previousState], () => {
 		for (const key in modifiedStates) {
-			modifiedStates[key] = currentState[key] !== previousState[key];
+			modifiedStates[key] = !deepEqual(currentState[key], previousState[key]);
 		}
 	}, { deep: true });