woodpecker-ci · 6543 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/components/admin/settings/AdminAgentsTab.vue
@@ -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"

diff --git a/web/src/components/admin/settings/AdminOrgsTab.vue b/web/src/components/admin/settings/AdminOrgsTab.vue
@@ -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"

diff --git a/web/src/components/admin/settings/AdminQueueTab.vue b/web/src/components/admin/settings/AdminQueueTab.vue
@@ -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

diff --git a/web/src/components/admin/settings/AdminRegistriesTab.vue b/web/src/components/admin/settings/AdminRegistriesTab.vue
@@ -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';

diff --git a/web/src/components/admin/settings/AdminReposTab.vue b/web/src/components/admin/settings/AdminReposTab.vue
@@ -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"

diff --git a/web/src/components/admin/settings/AdminSecretsTab.vue b/web/src/components/admin/settings/AdminSecretsTab.vue
@@ -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';

diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/components/admin/settings/AdminUsersTab.vue
@@ -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')"

diff --git a/web/src/components/agent/AgentManager.vue b/web/src/components/agent/AgentManager.vue
@@ -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>;

diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
@@ -1,18 +1,18 @@
 <template>
   <Panel>
-    <h1 class="text-xl text-wp-text-100">{{ title }}</h1>
-    <div class="flex flex-col gap-4 border-b mb-4 pb-4">
-      <div class="flex flex-col sm:flex-row gap-4 sm:gap-12 md:justify-between dark:border-wp-background-100">
-        <div v-if="desc" class="flex items-center gap-x-2 text-sm text-wp-text-alt-100">
-          <span class="flex flex-grow-0">{{ desc }}</span>
-          <DocsLink v-if="docsUrl" class="flex flex-grow-0" :topic="title" :url="docsUrl" />
-        </div>
+    <div class="flex flex-col border-b mb-4 pb-4 justify-center dark:border-wp-background-100">
+      <h1 class="text-xl text-wp-text-100 flex items-center gap-1">
+        {{ title }}
+        <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
+      </h1>
 
-        <div>
-          <slot v-if="$slots.titleActions" name="titleActions" />
+      <div class="flex flex-wrap gap-x-4 gap-y-2 items-center justify-between">
+        <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-1" :text="warning" />
+      <slot name="headerEnd" />
     </div>
 
     <slot />
@@ -21,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>
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
@@ -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>
diff --git a/web/src/components/layout/scaffold/Scaffold.vue b/web/src/components/layout/scaffold/Scaffold.vue
@@ -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>
 

diff --git a/web/src/components/org/settings/OrgAgentsTab.vue b/web/src/components/org/settings/OrgAgentsTab.vue
@@ -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"

diff --git a/web/src/components/org/settings/OrgRegistriesTab.vue b/web/src/components/org/settings/OrgRegistriesTab.vue
@@ -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')"

diff --git a/web/src/components/org/settings/OrgSecretsTab.vue b/web/src/components/org/settings/OrgSecretsTab.vue
@@ -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>

diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
@@ -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>

diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/components/repo/settings/CronTab.vue
@@ -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"

diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
@@ -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')"

diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
@@ -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>

diff --git a/web/src/components/user/UserAgentsTab.vue b/web/src/components/user/UserAgentsTab.vue
@@ -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"

diff --git a/web/src/components/user/UserCLIAndAPITab.vue b/web/src/components/user/UserCLIAndAPITab.vue
@@ -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`"

diff --git a/web/src/components/user/UserRegistriesTab.vue b/web/src/components/user/UserRegistriesTab.vue
@@ -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')"

diff --git a/web/src/components/user/UserSecretsTab.vue b/web/src/components/user/UserSecretsTab.vue
@@ -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>

diff --git a/web/src/views/Repos.vue b/web/src/views/Repos.vue
@@ -4,7 +4,7 @@
       {{ $t('repositories') }}
     </template>
 
-    <template #titleActions>
+    <template #headerActions>
       <Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
     </template>
 

diff --git a/web/src/views/User.vue b/web/src/views/User.vue
@@ -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>

diff --git a/web/src/views/org/OrgRepos.vue b/web/src/views/org/OrgRepos.vue
@@ -4,7 +4,7 @@
       {{ org.name }}
     </template>
 
-    <template #titleActions>
+    <template #headerActions>
       <IconButton
         v-if="orgPermissions.admin"
         icon="settings"

diff --git a/web/src/views/org/OrgWrapper.vue b/web/src/views/org/OrgWrapper.vue
@@ -4,7 +4,7 @@
       {{ org.name }}
     </template>
 
-    <template #titleActions>
+    <template #headerActions>
       <IconButton
         v-if="orgPermissions.admin"
         :to="{ name: org.is_user ? 'user' : 'repo-settings' }"

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