Untangle settings / header slots (#4403)

This commit is contained in:
Anbraten 2024-11-18 15:16:30 +01:00 committed by GitHub
parent 5e2fa8164b
commit d0927e37dc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 73 additions and 58 deletions

View file

@ -1,6 +1,6 @@
<template>
<AgentManager
:desc="$t('admin.settings.agents.desc')"
:description="$t('admin.settings.agents.desc')"
:load-agents="loadAgents"
:create-agent="createAgent"
:update-agent="updateAgent"

View file

@ -1,5 +1,5 @@
<template>
<Settings :title="$t('admin.settings.orgs.orgs')" :desc="$t('admin.settings.orgs.desc')">
<Settings :title="$t('admin.settings.orgs.orgs')" :description="$t('admin.settings.orgs.desc')">
<div class="space-y-4 text-wp-text-100">
<ListItem
v-for="org in orgs"

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('admin.settings.queue.queue')" :desc="$t('admin.settings.queue.desc')">
<template #titleActions>
<Settings :title="$t('admin.settings.queue.queue')" :description="$t('admin.settings.queue.desc')">
<template #headerActions>
<div v-if="queueInfo">
<div class="flex items-center gap-2">
<Button

View file

@ -1,11 +1,10 @@
<template>
<Settings
:title="$t('registries.registries')"
:desc="$t('admin.settings.registries.desc')"
:description="$t('admin.settings.registries.desc')"
docs-url="docs/usage/registries"
:warning="$t('admin.settings.registries.warning')"
>
<template #titleActions>
<template #headerActions>
<Button
v-if="selectedRegistry"
:text="$t('registries.show')"
@ -15,6 +14,10 @@
<Button v-else :text="$t('registries.add')" start-icon="plus" @click="showAddRegistry" />
</template>
<template #headerEnd>
<Warning class="text-sm mt-4" :text="$t('admin.settings.registries.warning')" />
</template>
<RegistryList
v-if="!selectedRegistry"
v-model="registries"
@ -39,6 +42,7 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue';
import Warning from '~/components/atomic/Warning.vue';
import Settings from '~/components/layout/Settings.vue';
import RegistryEdit from '~/components/registry/RegistryEdit.vue';
import RegistryList from '~/components/registry/RegistryList.vue';

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('admin.settings.repos.repos')" :desc="$t('admin.settings.repos.desc')">
<template #titleActions>
<Settings :title="$t('admin.settings.repos.repos')" :description="$t('admin.settings.repos.desc')">
<template #headerActions>
<Button
start-icon="heal"
:is-loading="isRepairingRepos"

View file

@ -1,15 +1,18 @@
<template>
<Settings
:title="$t('secrets.secrets')"
:desc="$t('admin.settings.secrets.desc')"
:description="$t('admin.settings.secrets.desc')"
docs-url="docs/usage/secrets"
:warning="$t('admin.settings.secrets.warning')"
>
<template #titleActions>
<template #headerActions>
<Button v-if="selectedSecret" :text="$t('secrets.show')" start-icon="back" @click="selectedSecret = undefined" />
<Button v-else :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
</template>
<template #headerEnd>
<Warning class="text-sm mt-4" :text="$t('admin.settings.secrets.warning')" />
</template>
<SecretList
v-if="!selectedSecret"
v-model="secrets"
@ -34,6 +37,7 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import Button from '~/components/atomic/Button.vue';
import Warning from '~/components/atomic/Warning.vue';
import Settings from '~/components/layout/Settings.vue';
import SecretEdit from '~/components/secrets/SecretEdit.vue';
import SecretList from '~/components/secrets/SecretList.vue';

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('admin.settings.users.users')" :desc="$t('admin.settings.users.desc')">
<template #titleActions>
<Settings :title="$t('admin.settings.users.users')" :description="$t('admin.settings.users.desc')">
<template #headerActions>
<Button
v-if="selectedUser"
:text="$t('admin.settings.users.show')"

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('admin.settings.agents.agents')" :desc="desc">
<template #titleActions>
<Settings :title="$t('admin.settings.agents.agents')" :description>
<template #headerActions>
<Button
v-if="selectedAgent"
:text="$t('admin.settings.agents.show')"
@ -46,7 +46,7 @@ import AgentForm from './AgentForm.vue';
import AgentList from './AgentList.vue';
const props = defineProps<{
desc: string;
description: string;
loadAgents: (page: number) => Promise<Agent[] | null>;
createAgent: (agent: Partial<Agent>) => Promise<Agent>;
updateAgent: (agent: Agent) => Promise<Agent | void>;

View file

@ -7,13 +7,12 @@
</h1>
<div class="flex flex-wrap gap-x-4 gap-y-2 items-center justify-between">
<p v-if="desc" class="text-sm text-wp-text-alt-100">{{ desc }}</p>
<div v-if="$slots.titleActions">
<slot name="titleActions" />
<p v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</p>
<div v-if="$slots.headerActions">
<slot name="headerActions" />
</div>
</div>
<Warning v-if="warning" class="text-sm mt-4" :text="warning" />
<slot name="headerEnd" />
</div>
<slot />
@ -22,13 +21,11 @@
<script setup lang="ts">
import DocsLink from '~/components/atomic/DocsLink.vue';
import Warning from '~/components/atomic/Warning.vue';
import Panel from '~/components/layout/Panel.vue';
defineProps<{
title: string;
desc?: string;
description?: string;
docsUrl?: string;
warning?: string;
}>();
</script>

View file

@ -24,26 +24,26 @@
</div>
<TextField
v-if="searchBoxPresent"
class="w-auto <md:w-full <md:order-3"
class="w-auto <md:w-full flex-grow <md:order-3"
:aria-label="$t('search')"
:placeholder="$t('search')"
:model-value="search"
@update:model-value="(value: string) => $emit('update:search', value)"
/>
<div
v-if="$slots.titleActions"
v-if="$slots.headerActions"
class="flex items-center md:justify-end gap-x-2 min-w-0"
:class="{
'md:flex-1': searchBoxPresent,
}"
>
<slot name="titleActions" />
<slot name="headerActions" />
</div>
</div>
<div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
<Tabs class="<md:order-2" />
<div v-if="$slots.titleActions" class="flex content-start md:justify-end">
<div v-if="$slots.headerActions" class="flex content-start md:justify-end">
<slot name="tabActions" />
</div>
</div>
@ -52,6 +52,8 @@
</template>
<script setup lang="ts">
import { computed } from 'vue';
import IconButton from '~/components/atomic/IconButton.vue';
import TextField from '~/components/form/TextField.vue';
import Container from '~/components/layout/Container.vue';
@ -69,5 +71,5 @@ defineEmits<{
(event: 'update:search', query: string): void;
}>();
const searchBoxPresent = props.search !== undefined;
const searchBoxPresent = computed(() => props.search !== undefined);
</script>

View file

@ -7,7 +7,7 @@
@update:search="(value) => $emit('update:search', value)"
>
<template #title><slot name="title" /></template>
<template v-if="$slots.titleActions" #titleActions><slot name="titleActions" /></template>
<template v-if="$slots.headerActions" #headerActions><slot name="headerActions" /></template>
<template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
</Header>

View file

@ -1,6 +1,6 @@
<template>
<AgentManager
:desc="$t('org.settings.agents.desc')"
:description="$t('org.settings.agents.desc')"
:load-agents="loadAgents"
:create-agent="createAgent"
:update-agent="updateAgent"

View file

@ -1,10 +1,10 @@
<template>
<Settings
:title="$t('registries.registries')"
:desc="$t('org.settings.registries.desc')"
:description="$t('org.settings.registries.desc')"
docs-url="docs/usage/registries"
>
<template #titleActions>
<template #headerActions>
<Button
v-if="selectedRegistry"
:text="$t('registries.show')"

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('secrets.secrets')" :desc="$t('org.settings.secrets.desc')" docs-url="docs/usage/secrets">
<template #titleActions>
<Settings :title="$t('secrets.secrets')" :description="$t('org.settings.secrets.desc')" docs-url="docs/usage/secrets">
<template #headerActions>
<Button v-if="selectedSecret" :text="$t('secrets.show')" start-icon="back" @click="selectedSecret = undefined" />
<Button v-else :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
</template>

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('repo.settings.badge.badge')">
<template #titleActions>
<template #headerActions>
<a v-if="badgeUrl" :href="badgeUrl" target="_blank">
<img :src="badgeUrl" />
</a>

View file

@ -1,6 +1,10 @@
<template>
<Settings :title="$t('repo.settings.crons.crons')" :desc="$t('repo.settings.crons.desc')" docs-url="docs/usage/cron">
<template #titleActions>
<Settings
:title="$t('repo.settings.crons.crons')"
:description="$t('repo.settings.crons.desc')"
docs-url="docs/usage/cron"
>
<template #headerActions>
<Button
v-if="selectedCron"
start-icon="back"

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('registries.credentials')" :desc="$t('registries.desc')" docs-url="docs/usage/registries">
<template #titleActions>
<Settings :title="$t('registries.credentials')" :description="$t('registries.desc')" docs-url="docs/usage/registries">
<template #headerActions>
<Button
v-if="selectedRegistry"
:text="$t('registries.show')"

View file

@ -1,6 +1,6 @@
<template>
<Settings :title="$t('secrets.secrets')" :desc="$t('secrets.desc')" docs-url="docs/usage/secrets">
<template #titleActions>
<Settings :title="$t('secrets.secrets')" :description="$t('secrets.desc')" docs-url="docs/usage/secrets">
<template #headerActions>
<Button v-if="selectedSecret" :text="$t('secrets.show')" start-icon="back" @click="selectedSecret = undefined" />
<Button v-else :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
</template>

View file

@ -1,6 +1,6 @@
<template>
<AgentManager
:desc="$t('user.settings.agents.desc')"
:description="$t('user.settings.agents.desc')"
:load-agents="loadAgents"
:create-agent="createAgent"
:update-agent="updateAgent"

View file

@ -1,7 +1,7 @@
<template>
<Settings :title="$t('user.settings.cli_and_api.cli_and_api')" :desc="$t('user.settings.cli_and_api.desc')">
<Settings :title="$t('user.settings.cli_and_api.cli_and_api')" :description="$t('user.settings.cli_and_api.desc')">
<InputField :label="$t('user.settings.cli_and_api.cli_usage')">
<template #titleActions>
<template #headerActions>
<a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
$t('user.settings.cli_and_api.download_cli')
}}</a>
@ -10,14 +10,14 @@
</InputField>
<InputField :label="$t('user.settings.cli_and_api.token')">
<template #titleActions>
<template #headerActions>
<Button class="ml-auto" :text="$t('user.settings.cli_and_api.reset_token')" @click="resetToken" />
</template>
<pre class="code-box">{{ token }}</pre>
</InputField>
<InputField :label="$t('user.settings.cli_and_api.api_usage')">
<template #titleActions>
<template #headerActions>
<a
v-if="enableSwagger"
:href="`${address}/swagger/index.html`"

View file

@ -1,10 +1,10 @@
<template>
<Settings
:title="$t('registries.registries')"
:desc="$t('user.settings.registries.desc')"
:description="$t('user.settings.registries.desc')"
docs-url="docs/usage/registries"
>
<template #titleActions>
<template #headerActions>
<Button
v-if="selectedRegistry"
:text="$t('registries.show')"

View file

@ -1,6 +1,10 @@
<template>
<Settings :title="$t('secrets.secrets')" :desc="$t('user.settings.secrets.desc')" docs-url="docs/usage/secrets">
<template #titleActions>
<Settings
:title="$t('secrets.secrets')"
:description="$t('user.settings.secrets.desc')"
docs-url="docs/usage/secrets"
>
<template #headerActions>
<Button v-if="selectedSecret" :text="$t('secrets.show')" start-icon="back" @click="selectedSecret = undefined" />
<Button v-else :text="$t('secrets.add')" start-icon="plus" @click="showAddSecret" />
</template>

View file

@ -4,7 +4,7 @@
{{ $t('repositories') }}
</template>
<template #titleActions>
<template #headerActions>
<Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
</template>

View file

@ -1,7 +1,7 @@
<template>
<Scaffold enable-tabs>
<template #title>{{ $t('user.settings.settings') }}</template>
<template #titleActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
<template #headerActions><Button :text="$t('logout')" :to="`${address}/logout`" /></template>
<Tab id="general" :title="$t('user.settings.general.general')">
<UserGeneralTab />
</Tab>

View file

@ -4,7 +4,7 @@
{{ org.name }}
</template>
<template #titleActions>
<template #headerActions>
<IconButton
v-if="orgPermissions.admin"
icon="settings"

View file

@ -4,7 +4,7 @@
{{ org.name }}
</template>
<template #titleActions>
<template #headerActions>
<IconButton
v-if="orgPermissions.admin"
:to="{ name: org.is_user ? 'user' : 'repo-settings' }"

View file

@ -15,7 +15,7 @@
{{ repo.name }}
</span>
</template>
<template #titleActions>
<template #headerActions>
<a v-if="badgeUrl" :href="badgeUrl" target="_blank">
<img :src="badgeUrl" />
</a>

View file

@ -19,7 +19,7 @@
</span>
</template>
<template #titleActions>
<template #headerActions>
<div class="flex md:items-center flex-col gap-2 md:flex-row md:justify-between min-w-0">
<div class="flex content-start gap-2 min-w-0">
<PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />