fix: remove tinro dependency from SettingsNavItem component (#7280)

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
This commit is contained in:
axel7083 2024-05-27 11:46:33 +02:00 committed by GitHub
parent e257a755e1
commit 466bebdd55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 27 deletions

View file

@ -49,17 +49,9 @@ onMount(async () => {
</div>
</div>
<div class="h-full overflow-hidden hover:overflow-y-auto" style="margin-bottom:auto">
<SettingsNavItem title="Resources" href="/preferences/resources" bind:meta="{meta}" />
<SettingsNavItem title="Proxy" href="/preferences/proxies" bind:meta="{meta}" />
<SettingsNavItem title="Registries" href="/preferences/registries" bind:meta="{meta}" />
<SettingsNavItem title="Authentication" href="/preferences/authentication-providers" bind:meta="{meta}" />
<SettingsNavItem title="CLI Tools" href="/preferences/cli-tools" bind:meta="{meta}" />
<SettingsNavItem title="Kubernetes" href="/preferences/kubernetes-contexts" bind:meta="{meta}" />
{#each [{ title: 'Resources', href: '/preferences/resources' }, { title: 'Proxy', href: '/preferences/proxies' }, { title: 'Registries', href: '/preferences/registries' }, { title: 'Authentication', href: '/preferences/authentication-providers' }, { title: 'CLI Tools', href: '/preferences/cli-tools' }, { title: 'Kubernetes', href: '/preferences/kubernetes-contexts' }] as navItem}
<SettingsNavItem title="{navItem.title}" href="{navItem.href}" selected="{meta.url === navItem.href}" />
{/each}
<!-- Default configuration properties start -->
{#each Object.entries(configProperties) as [configSection, configItems]}
@ -67,7 +59,7 @@ onMount(async () => {
title="{configSection}"
href="/preferences/default/{configSection}"
section="{configItems.length > 0}"
bind:meta="{meta}"
selected="{meta.url === `/preferences/default/${configSection}`}"
bind:expanded="{sectionExpanded[configSection]}" />
{#if sectionExpanded[configSection]}
{#each sortItems(configItems) as configItem}
@ -75,7 +67,7 @@ onMount(async () => {
title="{configItem.title}"
href="/preferences/default/{configItem.id}"
child="{true}"
bind:meta="{meta}" />
selected="{meta.url === `/preferences/default/${configItem.id}`}" />
{/each}
{/if}
{/each}

View file

@ -25,14 +25,14 @@ import { expect, test } from 'vitest';
import SettingsNavItem from './SettingsNavItem.svelte';
function renderIt(title: string, href: string, meta: any, section?: boolean, child?: boolean): void {
render(SettingsNavItem, { title: title, href: href, meta: meta, section: section, child: child });
function renderIt(title: string, href: string, selected?: boolean, section?: boolean, child?: boolean): void {
render(SettingsNavItem, { title: title, href: href, selected: selected, section: section, child: child });
}
test('Expect correct role and href', async () => {
const title = 'Resources';
const href = '/test';
renderIt(title, href, { url: href });
renderIt(title, href, true);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();
@ -42,7 +42,7 @@ test('Expect correct role and href', async () => {
test('Expect selection styling', async () => {
const title = 'Resources';
const href = '/test';
renderIt(title, href, { url: href });
renderIt(title, href, true);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();
@ -52,7 +52,7 @@ test('Expect selection styling', async () => {
test('Expect not to have selection styling', async () => {
const title = 'Resources';
renderIt(title, '/test', { url: '/elsewhere' });
renderIt(title, '/test', false);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();
@ -64,7 +64,7 @@ test('Expect not to have selection styling', async () => {
test('Expect child styling', async () => {
const title = 'Resources';
const href = '/test';
renderIt(title, href, { url: href }, false, true);
renderIt(title, href, true, false, true);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();
@ -75,7 +75,7 @@ test('Expect child styling', async () => {
test('Expect section styling', async () => {
const title = 'Extensions';
const href = '/test';
renderIt(title, href, { url: href }, true, false);
renderIt(title, href, true, true, false);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();
@ -88,7 +88,7 @@ test('Expect section styling', async () => {
test('Expect sections expand', async () => {
const title = 'Extensions';
const href = '/test';
renderIt(title, href, { url: href }, true, false);
renderIt(title, href, true, true, false);
const element = screen.getByLabelText(title);
expect(element).toBeInTheDocument();

View file

@ -1,15 +1,10 @@
<script lang="ts">
import type { TinroRouteMeta } from 'tinro';
export let title: string;
export let href: string;
export let meta: TinroRouteMeta;
export let section = false;
export let expanded = false;
export let child = false;
let selected: boolean;
$: selected = meta.url === href;
export let selected: boolean = false;
function rotate(node: unknown, { clockwise = true }) {
return {