mirror of
https://github.com/immich-app/immich
synced 2025-10-17 18:19:27 +00:00
refactor: server-about-modal (#22138)
* refactor: server-about-modal * fix: bits-ui scroll lock cleanup
This commit is contained in:
Jason Rasmussen
GitHub
parent
53c67f4d71
commit
98ea3847e5
3 changed files with 74 additions and 118 deletions
24
web/src/lib/components/ServerAboutItem.svelte
Normal file
24
web/src/lib/components/ServerAboutItem.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { Label, Link, Text } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
id: string;
|
||||
title: string;
|
||||
version?: string;
|
||||
versionHref?: string;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
const { id, title, version, versionHref, class: className }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={className}>
|
||||
<Label size="small" color="primary" for={id}>{title}</Label>
|
||||
<Text size="small" color="muted" {id}>
|
||||
{#if versionHref}
|
||||
<Link external href={versionHref}>{version}</Link>
|
||||
{:else}
|
||||
{version}
|
||||
{/if}
|
||||
</Text>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
|
||||
import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
|
||||
import { fireEvent, render, screen } from '@testing-library/svelte';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { DateTime } from 'luxon';
|
||||
import ChangeDate from './change-date.svelte';
|
||||
|
|
@ -30,6 +30,13 @@ describe('ChangeDate component', () => {
|
|||
vi.resetAllMocks();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await waitFor(() => {
|
||||
// check that bits-ui body scroll-lock class is gone
|
||||
expect(document.body.style.pointerEvents).not.toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
test('should render correct values', () => {
|
||||
render(ChangeDate, { initialDate, initialTimeZone, onCancel, onConfirm });
|
||||
expect(getDateInput().value).toBe('2024-01-01T00:00');
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script lang="ts">
|
||||
import ServerAboutItem from '$lib/components/ServerAboutItem.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { type ServerAboutResponseDto, type ServerVersionHistoryResponseDto } from '@immich/sdk';
|
||||
import { Icon, Modal, ModalBody } from '@immich/ui';
|
||||
import { mdiAlert } from '@mdi/js';
|
||||
import { Alert, Label, Modal, ModalBody } from '@immich/ui';
|
||||
import { DateTime } from 'luxon';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
|
|
@ -17,136 +17,61 @@
|
|||
|
||||
<Modal title={$t('about')} {onClose}>
|
||||
<ModalBody>
|
||||
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-1 text-primary">
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="version-desc">Immich</label>
|
||||
<div>
|
||||
<a
|
||||
href={info.versionUrl}
|
||||
class="underline text-sm immich-form-label"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
id="version-desc"
|
||||
>
|
||||
{info.version}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-4">
|
||||
{#if info.sourceRef === 'main' && info.repository === 'immich-app/immich'}
|
||||
<Alert color="warning" title={$t('main_branch_warning')} class="col-span-full" size="small" />
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="ffmpeg-desc">ExifTool</label>
|
||||
<p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
|
||||
{info.exiftool}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="nodejs-desc">Node.js</label>
|
||||
<p class="immich-form-label pb-2 text-sm" id="nodejs-desc">
|
||||
{info.nodejs}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="vips-desc">Libvips</label>
|
||||
<p class="immich-form-label pb-2 text-sm" id="vips-desc">
|
||||
{info.libvips}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}>
|
||||
<label class="font-medium text-primary text-sm" for="imagemagick-desc">ImageMagick</label>
|
||||
<p class="immich-form-label pb-2 text-sm" id="imagemagick-desc">
|
||||
{info.imagemagick}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}>
|
||||
<label class="font-medium text-primary text-sm" for="ffmpeg-desc">FFmpeg</label>
|
||||
<p class="immich-form-label pb-2 text-sm" id="ffmpeg-desc">
|
||||
{info.ffmpeg}
|
||||
</p>
|
||||
</div>
|
||||
<ServerAboutItem id="immich" title="Immich" version={info.version} versionHref={info.versionUrl} />
|
||||
<ServerAboutItem id="exif" title="ExifTool" version={info.exiftool} />
|
||||
<ServerAboutItem id="nodejs" title="Node.js" version={info.nodejs} />
|
||||
<ServerAboutItem id="libvips" title="Libvips" version={info.libvips} />
|
||||
<ServerAboutItem
|
||||
id="imagemagick"
|
||||
title="ImageMagick"
|
||||
version={info.imagemagick}
|
||||
class={(info.imagemagick?.length || 0) > 10 ? 'col-span-2' : ''}
|
||||
/>
|
||||
<ServerAboutItem
|
||||
id="ffmpeg"
|
||||
title="FFmpeg"
|
||||
version={info.ffmpeg}
|
||||
class={(info.ffmpeg?.length || 0) > 10 ? 'col-span-2' : ''}
|
||||
/>
|
||||
|
||||
{#if info.repository && info.repositoryUrl}
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="version-desc">{$t('repository')}</label>
|
||||
<div>
|
||||
<a
|
||||
href={info.repositoryUrl}
|
||||
class="underline text-sm immich-form-label"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
id="version-desc"
|
||||
>
|
||||
{info.repository}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ServerAboutItem
|
||||
id="repository"
|
||||
title={$t('repository')}
|
||||
version={info.repository}
|
||||
versionHref={info.repositoryUrl}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if info.sourceRef && info.sourceCommit && info.sourceUrl}
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="git-desc">{$t('source')}</label>
|
||||
<div>
|
||||
<a
|
||||
href={info.sourceUrl}
|
||||
class="underline text-sm immich-form-label"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
id="git-desc"
|
||||
>
|
||||
{info.sourceRef}@{info.sourceCommit.slice(0, 9)}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ServerAboutItem
|
||||
id="source"
|
||||
title={$t('source')}
|
||||
version="{info.sourceRef}@{info.sourceCommit.slice(0, 9)}"
|
||||
versionHref={info.sourceUrl}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if info.build && info.buildUrl}
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="build-desc">{$t('build')}</label>
|
||||
<div>
|
||||
<a
|
||||
href={info.buildUrl}
|
||||
class="underline text-sm immich-form-label"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
id="build-desc"
|
||||
>
|
||||
{info.build}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<ServerAboutItem id="build" title={$t('build')} version={info.build} versionHref={info.buildUrl} />
|
||||
{/if}
|
||||
|
||||
{#if info.buildImage && info.buildImage}
|
||||
<div>
|
||||
<label class="font-medium text-primary text-sm" for="build-image-desc">{$t('build_image')}</label>
|
||||
<div>
|
||||
<a
|
||||
href={info.buildImageUrl}
|
||||
class="underline text-sm immich-form-label"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
id="build-image-desc"
|
||||
>
|
||||
{info.buildImage}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if info.sourceRef === 'main' && info.repository === 'immich-app/immich'}
|
||||
<div class="col-span-full p-4 flex gap-1">
|
||||
<Icon icon={mdiAlert} size="2em" color="#ffcc4d" />
|
||||
<p class="immich-form-label text-sm" id="main-warning">
|
||||
{$t('main_branch_warning')}
|
||||
</p>
|
||||
</div>
|
||||
<ServerAboutItem
|
||||
id="build-image"
|
||||
title={$t('build_image')}
|
||||
version={info.buildImage}
|
||||
versionHref={info.buildImageUrl}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="col-span-full">
|
||||
<label class="font-medium text-primary text-sm" for="version-history">{$t('version_history')}</label>
|
||||
<Label size="small" color="primary" for="version-history">{$t('version_history')}</Label>
|
||||
<ul id="version-history" class="list-none">
|
||||
{#each versions.slice(0, 5) as item (item.id)}
|
||||
{@const createdAt = DateTime.fromISO(item.createdAt)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue