fix(frontend): chart in MkInstanceCardMini is no longer displayed (#13932)

* fix(frontend): chart in `MkInstanceCardMini` is no longer displayed

* Update CHANGELOG.md

* test: add `MkInstanceCardMini` story

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
zyoshoka 2024-06-15 10:32:51 +09:00 committed by GitHub
parent 1a82a41f92
commit d4e2be68ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 98 additions and 3 deletions

View File

@ -5,6 +5,7 @@
- Fix: 配信停止したインスタンス一覧が見れなくなる問題を修正 - Fix: 配信停止したインスタンス一覧が見れなくなる問題を修正
### Client ### Client
- `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
- Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968) - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
### Server ### Server

View File

@ -125,6 +125,35 @@ export function file(isSensitive = false) {
}; };
} }
export function federationInstance(): entities.FederationInstance {
return {
id: 'someinstanceid',
firstRetrievedAt: '2021-01-01T00:00:00.000Z',
host: 'misskey-hub.net',
usersCount: 10,
notesCount: 20,
followingCount: 5,
followersCount: 15,
isNotResponding: false,
isSuspended: false,
suspensionState: 'none',
isBlocked: false,
softwareName: 'misskey',
softwareVersion: '2024.5.0',
openRegistrations: false,
name: 'Misskey Hub',
description: '',
maintainerName: '',
maintainerEmail: '',
isSilenced: false,
iconUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
faviconUrl: '',
themeColor: '',
infoUpdatedAt: '',
latestRequestReceivedAt: '',
};
}
export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed { export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
return { return {
id, id,

View File

@ -403,6 +403,7 @@ function toStories(component: string): Promise<string> {
glob('src/components/MkSignupServerRules.vue'), glob('src/components/MkSignupServerRules.vue'),
glob('src/components/MkUserSetupDialog.vue'), glob('src/components/MkUserSetupDialog.vue'),
glob('src/components/MkUserSetupDialog.*.vue'), glob('src/components/MkUserSetupDialog.*.vue'),
glob('src/components/MkInstanceCardMini.vue'),
glob('src/components/MkInviteCode.vue'), glob('src/components/MkInviteCode.vue'),
glob('src/pages/user/home.vue'), glob('src/pages/user/home.vue'),
]); ]);

View File

@ -29,7 +29,7 @@ function getChartArray(seed: string, limit: number, option?: { accumulate?: bool
return array; return array;
} }
function getChartResolver(fields: string[], option?: { accumulate?: boolean, mulMap?: Record<string, number> }): HttpResponseResolver<PathParams, DefaultBodyType, JsonBodyType> { export function getChartResolver(fields: string[], option?: { accumulate?: boolean, mulMap?: Record<string, number> }): HttpResponseResolver<PathParams, DefaultBodyType, JsonBodyType> {
return ({ request }) => { return ({ request }) => {
action(`GET ${request.url}`)(); action(`GET ${request.url}`)();
const limitParam = new URL(request.url).searchParams.get('limit'); const limitParam = new URL(request.url).searchParams.get('limit');

View File

@ -0,0 +1,64 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { HttpResponse, http } from 'msw';
import { federationInstance } from '../../.storybook/fakes.js';
import { commonHandlers } from '../../.storybook/mocks.js';
import MkInstanceCardMini from './MkInstanceCardMini.vue';
import { getChartResolver } from './MkChart.stories.impl.js';
export const Default = {
render(args) {
return {
components: {
MkInstanceCardMini,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkInstanceCardMini v-bind="props" />',
};
},
args: {
instance: federationInstance(),
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
http.get('/undefined/preview.webp', async ({ request }) => {
const urlStr = new URL(request.url).searchParams.get('url');
if (urlStr == null) {
return new HttpResponse(null, { status: 404 });
}
const url = new URL(urlStr);
if (url.href.startsWith('https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/')) {
const image = await (await fetch(`client-assets/${url.pathname.split('/').pop()}`)).blob();
return new HttpResponse(image, {
headers: {
'Content-Type': 'image/jpeg',
},
});
} else {
return new HttpResponse(null, { status: 404 });
}
}),
http.get('/api/charts/instance', getChartResolver(['requests.received'])),
],
},
},
} satisfies StoryObj<typeof MkInstanceCardMini>;

View File

@ -29,8 +29,8 @@ const chartValues = ref<number[] | null>(null);
misskeyApiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => { misskeyApiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
// //
res['requests.received'].splice(0, 1); res.requests.received.splice(0, 1);
chartValues.value = res['requests.received']; chartValues.value = res.requests.received;
}); });
function getInstanceIcon(instance): string { function getInstanceIcon(instance): string {