Create settings-panel vue component and use InputFields

web/components.d.ts

@@ -98,6 +98,7 @@ declare module '@vue/runtime-core' {
     SecretList: typeof import('./src/components/secrets/SecretList.vue')['default']
     SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
     SelectField: typeof import('./src/components/form/SelectField.vue')['default']
+    Settings: typeof import('./src/components/layout/Settings.vue')['default']
     Tab: typeof import('./src/components/layout/scaffold/Tab.vue')['default']
     Tabs: typeof import('./src/components/layout/scaffold/Tabs.vue')['default']
     TextField: typeof import('./src/components/form/TextField.vue')['default']

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -1,19 +1,14 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
-      </div>
+  <Settings :title="$t('admin.settings.agents.agents')" :desc="$t('admin.settings.agents.desc')">
+    <template #titleActions>
       <Button
         v-if="selectedAgent"
-        class="ml-auto"
         :text="$t('admin.settings.agents.show')"
         start-icon="back"
         @click="selectedAgent = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
-    </div>
+      <Button v-else :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
+    </template>
 
     <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -122,7 +117,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -137,7 +132,7 @@ import ListItem from '~/components/atomic/ListItem.vue';
 import Checkbox from '~/components/form/Checkbox.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';

web/src/components/admin/settings/AdminQueueTab.vue

@@ -1,35 +1,25 @@
 <template>
-  <Panel>
-    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p>
+  <Settings :title="$t('admin.settings.queue.queue')" :desc="$t('admin.settings.queue.desc')">
+    <template #titleActions>
+      <div v-if="queueInfo">
+        <div class="flex items-center gap-2">
+          <Button
+            v-if="queueInfo.paused"
+            :text="$t('admin.settings.queue.resume')"
+            start-icon="play"
+            @click="resumeQueue"
+          />
+          <Button v-else :text="$t('admin.settings.queue.pause')" start-icon="pause" @click="pauseQueue" />
+          <Icon
+            :name="queueInfo.paused ? 'pause' : 'play'"
+            :class="{
+              'text-wp-state-error-100': queueInfo.paused,
+              'text-wp-state-ok-100': !queueInfo.paused,
+            }"
+          />
+        </div>
       </div>
-
-      <div class="ml-auto flex items-center gap-2">
-        <Button
-          v-if="queueInfo.paused"
-          class="ml-auto"
-          :text="$t('admin.settings.queue.resume')"
-          start-icon="play"
-          @click="resumeQueue"
-        />
-        <Button
-          v-else
-          class="ml-auto"
-          :text="$t('admin.settings.queue.pause')"
-          start-icon="pause"
-          @click="pauseQueue"
-        />
-        <Icon
-          :name="queueInfo.paused ? 'pause' : 'play'"
-          :class="{
-            'text-wp-state-error-100': queueInfo.paused,
-            'text-wp-state-ok-100': !queueInfo.paused,
-          }"
-        />
-      </div>
-    </div>
+    </template>
 
     <div class="flex flex-col">
       <AdminQueueStats :stats="queueInfo?.stats" />
@@ -81,7 +71,7 @@
         </ListItem>
       </div>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -92,7 +82,7 @@ import Badge from '~/components/atomic/Badge.vue';
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import { QueueInfo } from '~/lib/api/types/queue';

web/src/components/admin/settings/AdminSecretsTab.vue

@@ -1,29 +1,19 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('admin.settings.secrets.desc') }}
-          <DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-        <Warning :text="$t('admin.settings.secrets.warning')" />
-      </div>
+  <Settings
+    :title="$t('admin.settings.secrets.secrets')"
+    :desc="$t('admin.settings.secrets.desc')"
+    docs-url="docs/usage/secrets"
+    :warning="$t('admin.settings.secrets.warning')"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedSecret"
-        class="ml-auto"
         :text="$t('admin.settings.secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button
-        v-else
-        class="ml-auto"
-        :text="$t('admin.settings.secrets.add')"
-        start-icon="plus"
-        @click="showAddSecret"
-      />
-    </div>
+      <Button v-else :text="$t('admin.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -42,7 +32,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -51,9 +41,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Warning from '~/components/atomic/Warning.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';

web/src/components/admin/settings/AdminUsersTab.vue

@@ -1,19 +1,14 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.users.users') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.users.desc') }}</p>
-      </div>
+  <Settings :title="$t('admin.settings.users.users')" :desc="$t('admin.settings.users.desc')">
+    <template #titleActions>
       <Button
         v-if="selectedUser"
-        class="ml-auto"
         :text="$t('admin.settings.users.show')"
         start-icon="back"
         @click="selectedUser = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
-    </div>
+      <Button v-else :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
+    </template>
 
     <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
       <ListItem
@@ -83,7 +78,7 @@
         </div>
       </form>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -97,7 +92,7 @@ import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import InputField from '~/components/form/InputField.vue';
 import TextField from '~/components/form/TextField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';

web/src/components/form/InputField.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-wp-text-100 font-bold mb-2">
-      <label v-bind="$attrs">{{ label }}</label>
+    <div class="flex items-center mb-2">
+      <label class="text-wp-text-100 font-bold" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
+      <slot v-else-if="$slots['titleActions']" name="titleActions" />
     </div>
     <slot />
     <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">

web/src/components/layout/Settings.vue

@@ -0,0 +1,33 @@
+<template>
+  <Panel>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <div class="ml-2">
+        <h1 class="text-xl text-wp-text-100">{{ title }}</h1>
+        <p v-if="desc" class="text-sm text-wp-text-alt-100">
+          {{ desc }}
+          <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
+        </p>
+        <Warning v-if="warning" class="mt-1" :text="warning" />
+      </div>
+
+      <div class="ml-auto">
+        <slot v-if="$slots.titleActions" name="titleActions" />
+      </div>
+    </div>
+
+    <slot />
+  </Panel>
+</template>
+
+<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;
+  docsUrl?: string;
+  warning?: string;
+}>();
+</script>

web/src/components/org/settings/OrgSecretsTab.vue

@@ -1,22 +1,18 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <div class="ml-2">
-        <h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-wp-text-alt-100">
-          {{ $t('org.settings.secrets.desc') }}
-          <DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
-        </p>
-      </div>
+  <Settings
+    :title="$t('org.settings.secrets.secrets')"
+    :desc="$t('org.settings.secrets.desc')"
+    docs-url="docs/usage/secrets"
+  >
+    <template #titleActions>
       <Button
         v-if="selectedSecret"
-        class="ml-auto"
         :text="$t('org.settings.secrets.show')"
         start-icon="back"
         @click="selectedSecret = undefined"
       />
-      <Button v-else class="ml-auto" :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
-    </div>
+      <Button v-else :text="$t('org.settings.secrets.add')" start-icon="plus" @click="showAddSecret" />
+    </template>
 
     <SecretList
       v-if="!selectedSecret"
@@ -35,7 +31,7 @@
       @save="createSecret"
       @cancel="selectedSecret = undefined"
     />
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -44,8 +40,7 @@ import { computed, inject, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
-import DocsLink from '~/components/atomic/DocsLink.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import SecretEdit from '~/components/secrets/SecretEdit.vue';
 import SecretList from '~/components/secrets/SecretList.vue';
 import useApiClient from '~/compositions/useApiClient';

web/src/components/repo/settings/ActionsTab.vue

@@ -1,9 +1,5 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.actions.actions') }}</h1>
-    </div>
-
+  <Settings :title="$t('repo.settings.actions.actions')">
     <div class="flex flex-wrap items-center">
       <Button
         class="mr-4 my-1"
@@ -42,7 +38,7 @@
         @click="deleteRepo"
       />
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -51,7 +47,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useNotifications from '~/compositions/useNotifications';

web/src/components/repo/settings/BadgeTab.vue

@@ -1,11 +1,10 @@
 <template>
-  <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
-      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1>
-      <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
+  <Settings :title="$t('repo.settings.badge.badge')">
+    <template #titleActions>
+      <a v-if="badgeUrl" :href="badgeUrl" target="_blank">
         <img :src="badgeUrl" />
       </a>
-    </div>
+    </template>
 
     <InputField :label="$t('repo.settings.badge.type')">
       <SelectField
@@ -36,7 +35,7 @@
         <pre class="code-box">{{ badgeContent }}</pre>
       </div>
     </div>
-  </Panel>
+  </Settings>
 </template>
 
 <script lang="ts" setup>
@@ -46,7 +45,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from 'vue';
 import { SelectOption } from '~/components/form/form.types';
 import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
-import Panel from '~/components/layout/Panel.vue';
+import Settings from '~/components/layout/Settings.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useConfig from '~/compositions/useConfig';
 import { usePaginate } from '~/compositions/usePaginate';