From d0927e37dc54e5f3d0c507f11ed9ee667cb3d230 Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:16:30 +0100
Subject: [PATCH] Untangle settings / header slots (#4403)

---
 .../components/admin/settings/AdminAgentsTab.vue    |  2 +-
 web/src/components/admin/settings/AdminOrgsTab.vue  |  2 +-
 web/src/components/admin/settings/AdminQueueTab.vue |  4 ++--
 .../admin/settings/AdminRegistriesTab.vue           | 10 +++++++---
 web/src/components/admin/settings/AdminReposTab.vue |  4 ++--
 .../components/admin/settings/AdminSecretsTab.vue   | 10 +++++++---
 web/src/components/admin/settings/AdminUsersTab.vue |  4 ++--
 web/src/components/agent/AgentManager.vue           |  6 +++---
 web/src/components/layout/Settings.vue              | 13 +++++--------
 web/src/components/layout/scaffold/Header.vue       | 12 +++++++-----
 web/src/components/layout/scaffold/Scaffold.vue     |  2 +-
 web/src/components/org/settings/OrgAgentsTab.vue    |  2 +-
 .../components/org/settings/OrgRegistriesTab.vue    |  4 ++--
 web/src/components/org/settings/OrgSecretsTab.vue   |  4 ++--
 web/src/components/repo/settings/BadgeTab.vue       |  2 +-
 web/src/components/repo/settings/CronTab.vue        |  8 ++++++--
 web/src/components/repo/settings/RegistriesTab.vue  |  4 ++--
 web/src/components/repo/settings/SecretsTab.vue     |  4 ++--
 web/src/components/user/UserAgentsTab.vue           |  2 +-
 web/src/components/user/UserCLIAndAPITab.vue        |  8 ++++----
 web/src/components/user/UserRegistriesTab.vue       |  4 ++--
 web/src/components/user/UserSecretsTab.vue          |  8 ++++++--
 web/src/views/Repos.vue                             |  2 +-
 web/src/views/User.vue                              |  2 +-
 web/src/views/org/OrgRepos.vue                      |  2 +-
 web/src/views/org/OrgWrapper.vue                    |  2 +-
 web/src/views/repo/RepoWrapper.vue                  |  2 +-
 web/src/views/repo/pipeline/PipelineWrapper.vue     |  2 +-
 28 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/components/admin/settings/AdminAgentsTab.vue
index 53cd48f17..82f8c8808 100644
--- 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
index de7d34f27..2ce9e3f80 100644
--- 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
index b11f8d509..4469fb3b0 100644
--- 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
index 8c7ae8d31..255e30535 100644
--- 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
index 570002606..325a6dec6 100644
--- 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
index be65549ee..4b62c6056 100644
--- 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
index a73eeb33c..31ef3b1e9 100644
--- 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
index db7fa423f..e3a0ab53a 100644
--- 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
index 5b15df95f..9b916996b 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -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>
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 22a30eb13..aa9b7209a 100644
--- 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
index f211b1662..ba04c7e6a 100644
--- 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
index 6eaec1c0b..37811d42a 100644
--- 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
index dd173cc9f..328c36a89 100644
--- 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
index f088e904d..e2d0b8a97 100644
--- 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
index 2df69ee44..0ace5d1bb 100644
--- 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
index e19c9f0a0..29540c127 100644
--- 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
index bfbbddcb1..654d8de53 100644
--- 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
index d13189a4d..858ebbffc 100644
--- 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
index 43ca05999..1311c202e 100644
--- 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
index dea79cb2f..55feba35b 100644
--- 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
index fbb5df312..79fb0bd36 100644
--- 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
index 7df13a14f..4e481f1db 100644
--- 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
index 91af613de..f70ea1941 100644
--- 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
index 9a2f618ae..14a5ad934 100644
--- 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
index c46de3791..84aeec8b9 100644
--- 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
index ffbc9b30a..3ba7bfc86 100644
--- 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
index 9bc951250..a6a798566 100644
--- 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>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 5cbf6f7b2..1f2c625a9 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -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" />