Show secrets from org and global level

cmd/server/docs/docs.go

@@ -4233,6 +4233,12 @@ const docTemplate = `{
                 "name": {
                     "type": "string"
                 },
+                "org_id": {
+                    "type": "integer"
+                },
+                "repo_id": {
+                    "type": "integer"
+                },
                 "value": {
                     "type": "string"
                 }

server/model/secret.go

@@ -70,8 +70,8 @@ type SecretStore interface {
 // Secret represents a secret variable, such as a password or token.
 type Secret struct {
 	ID     int64          `json:"id"              xorm:"pk autoincr 'secret_id'"`
-	OrgID  int64          `json:"-"               xorm:"NOT NULL DEFAULT 0 UNIQUE(s) INDEX 'secret_org_id'"`
-	RepoID int64          `json:"-"               xorm:"NOT NULL DEFAULT 0 UNIQUE(s) INDEX 'secret_repo_id'"`
+	OrgID  int64          `json:"org_id"          xorm:"NOT NULL DEFAULT 0 UNIQUE(s) INDEX 'secret_org_id'"`
+	RepoID int64          `json:"repo_id"         xorm:"NOT NULL DEFAULT 0 UNIQUE(s) INDEX 'secret_repo_id'"`
 	Name   string         `json:"name"            xorm:"NOT NULL UNIQUE(s) INDEX 'secret_name'"`
 	Value  string         `json:"value,omitempty" xorm:"TEXT 'secret_value'"`
 	Images []string       `json:"images"          xorm:"json 'secret_images'"`
@@ -98,6 +98,11 @@ func (s Secret) Organization() bool {
 	return s.RepoID == 0 && s.OrgID != 0
 }
 
+// Repository secret.
+func (s Secret) Repository() bool {
+	return s.RepoID != 0 && s.OrgID == 0
+}
+
 // Match returns true if an image and event match the restricted list.
 func (s *Secret) Match(event WebhookEvent) bool {
 	if len(s.Events) == 0 {

web/src/assets/locales/en.json

@@ -140,7 +140,7 @@
         "saved": "Secret saved",
         "images": {
           "images": "Available for following images",
-          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+          "desc": "List of images where this secret is available, leave empty to allow all images"
         },
         "events": {
           "events": "Available at following events",
@@ -305,7 +305,7 @@
         "saved": "Organization secret saved",
         "images": {
           "images": "Available for following images",
-          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+          "desc": "List of images where this secret is available, leave empty to allow all images"
         },
         "plugins_only": "Only available for plugins",
         "events": {
@@ -334,7 +334,7 @@
         "saved": "Global secret saved",
         "images": {
           "images": "Available for following images",
-          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+          "desc": "List of images where this secret is available, leave empty to allow all images"
         },
         "plugins_only": "Only available for plugins",
         "events": {
@@ -476,7 +476,7 @@
         "saved": "User secret saved",
         "images": {
           "images": "Available for following images",
-          "desc": "Comma separated list of images where this secret is available, leave empty to allow all images"
+          "desc": "List of images where this secret is available, leave empty to allow all images"
         },
         "plugins_only": "Only available for plugins",
         "events": {
@@ -504,5 +504,7 @@
   "default": "default",
   "info": "Info",
   "running_version": "You are running Woodpecker {0}",
-  "update_woodpecker": "Please update your Woodpecker instance to {0}"
+  "update_woodpecker": "Please update your Woodpecker instance to {0}",
+  "global_level_secret": "global secret",
+  "org_level_secret": "organization secret"
 }

web/src/components/atomic/Button.vue

@@ -16,7 +16,7 @@
   >
     <slot>
       <Icon v-if="startIcon" :name="startIcon" class="!w-6 !h-6" :class="{ invisible: isLoading, 'mr-1': text }" />
-      <span :class="{ invisible: isLoading }">{{ text }}</span>
+      <span :class="{ invisible: isLoading }" class="flex-shrink-0">{{ text }}</span>
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
       <div
         v-if="isLoading"

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

@@ -64,15 +64,53 @@ const repo = inject<Ref<Repo>>('repo');
 const selectedSecret = ref<Partial<Secret>>();
 const isEditingSecret = computed(() => !!selectedSecret.value?.id);
 
-async function loadSecrets(page: number): Promise<Secret[] | null> {
+async function loadSecrets(page: number, level: 'repo' | 'org' | 'global'): Promise<Secret[] | null> {
   if (!repo?.value) {
     throw new Error("Unexpected: Can't load repo");
   }
 
-  return apiClient.getSecretList(repo.value.id, page);
+  switch (level) {
+    case 'org':
+      return apiClient.getOrgSecretList(repo.value.org_id, page);
+    case 'global':
+      return apiClient.getGlobalSecretList(page);
+    default:
+      return apiClient.getSecretList(repo.value.id, page);
+  }
 }
 
-const { resetPage, data: secrets } = usePagination(loadSecrets, () => !selectedSecret.value);
+const { resetPage, data: _secrets } = usePagination(loadSecrets, () => !selectedSecret.value, {
+  each: ['repo', 'org', 'global'],
+  name: 'secrets',
+});
+const secrets = computed(() => {
+  const secretsList: Record<string, Secret & { edit?: boolean; level: 'repo' | 'org' | 'global' }> = {};
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const level of ['repo', 'org', 'global']) {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const secret of _secrets.value) {
+      if (
+        ((level === 'repo' && secret.repo_id !== 0 && secret.org_id === 0) ||
+          (level === 'org' && secret.repo_id === 0 && secret.org_id !== 0) ||
+          (level === 'global' && secret.repo_id === 0 && secret.org_id === 0)) &&
+        !secretsList[secret.name]
+      ) {
+        secretsList[secret.name] = { ...secret, edit: secret.repo_id !== 0, level };
+      }
+    }
+  }
+
+  const levelsOrder = {
+    global: 0,
+    org: 1,
+    repo: 2,
+  };
+
+  return Object.values(secretsList)
+    .toSorted((a, b) => a.name.localeCompare(b.name))
+    .toSorted((a, b) => levelsOrder[b.level] - levelsOrder[a.level]);
+});
 
 const { doSubmit: createSecret, isLoading: isSaving } = useAsyncAction(async () => {
   if (!repo?.value) {

web/src/components/secrets/SecretEdit.vue

@@ -11,11 +11,27 @@
       </InputField>
 
       <InputField :label="$t(i18nPrefix + 'value')">
-        <TextField v-model="innerValue.value" :placeholder="$t(i18nPrefix + 'value')" :lines="5" />
+        <TextField
+          v-model="innerValue.value"
+          :placeholder="$t(i18nPrefix + 'value')"
+          :lines="5"
+          :required="!isEditingSecret"
+        />
       </InputField>
 
       <InputField :label="$t(i18nPrefix + 'images.images')">
-        <TextField v-model="images" :placeholder="$t(i18nPrefix + 'images.desc')" />
+        <span class="ml-1 mb-2 text-wp-text-alt-100">{{ $t(i18nPrefix + 'images.desc') }}</span>
+
+        <div class="flex flex-col gap-2">
+          <div v-for="image in innerValue.images" :key="image" class="flex gap-2">
+            <TextField :model-value="image" disabled />
+            <Button type="button" color="gray" start-icon="trash" @click="removeImage(image)" />
+          </div>
+          <div class="flex gap-2">
+            <TextField v-model="newImage" @keydown.enter.prevent="addNewImage" />
+            <Button type="button" color="gray" start-icon="plus" @click="addNewImage" />
+          </div>
+        </div>
       </InputField>
 
       <InputField :label="$t(i18nPrefix + 'events.events')">
@@ -36,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from '~/components/atomic/Button.vue';
@@ -67,21 +83,20 @@ const innerValue = computed({
     emit('update:modelValue', value);
   },
 });
-const images = computed<string>({
-  get() {
-    return innerValue.value?.images?.join(',') || '';
-  },
-  set(value) {
-    if (innerValue.value) {
-      innerValue.value.images = value
-        .split(',')
-        .map((s) => s.trim())
-        .filter((s) => s !== '');
-    }
-  },
-});
 const isEditingSecret = computed(() => !!innerValue.value?.id);
 
+const newImage = ref('');
+function addNewImage() {
+  if (!newImage.value) {
+    return;
+  }
+  innerValue.value.images?.push(newImage.value);
+  newImage.value = '';
+}
+function removeImage(image: string) {
+  innerValue.value.images = innerValue.value.images?.filter((i) => i !== image);
+}
+
 const secretEventsOptions: CheckboxOption[] = [
   { value: WebhookEvents.Push, text: i18n.t('repo.pipeline.event.push') },
   { value: WebhookEvents.Tag, text: i18n.t('repo.pipeline.event.tag') },
@@ -99,6 +114,11 @@ function save() {
   if (!innerValue.value) {
     return;
   }
+
+  if (newImage.value) {
+    innerValue.value.images?.push(newImage.value);
+  }
+
   emit('save', innerValue.value);
 }
 </script>

web/src/components/secrets/SecretList.vue

@@ -6,22 +6,29 @@
       class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
     >
       <span>{{ secret.name }}</span>
+      <Badge
+        v-if="secret.edit === false"
+        class="ml-2"
+        :label="secret.org_id === 0 ? $t('global_level_secret') : $t('org_level_secret')"
+      />
       <div class="ml-auto space-x-2 <md:hidden">
         <Badge v-for="event in secret.events" :key="event" :label="event" />
       </div>
-      <IconButton
-        icon="edit"
-        class="ml-2 <md:ml-auto w-8 h-8"
-        :title="$t('repo.settings.secrets.edit')"
-        @click="editSecret(secret)"
-      />
-      <IconButton
-        icon="trash"
-        class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
-        :is-loading="isDeleting"
-        :title="$t('repo.settings.secrets.delete')"
-        @click="deleteSecret(secret)"
-      />
+      <template v-if="secret.edit !== false">
+        <IconButton
+          icon="edit"
+          class="ml-2 <md:ml-auto w-8 h-8"
+          :title="$t('repo.settings.secrets.edit')"
+          @click="editSecret(secret)"
+        />
+        <IconButton
+          icon="trash"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+          :is-loading="isDeleting"
+          :title="$t('repo.settings.secrets.delete')"
+          @click="deleteSecret(secret)"
+        />
+      </template>
     </ListItem>
 
     <div v-if="secrets?.length === 0" class="ml-2">{{ $t(i18nPrefix + 'none') }}</div>
@@ -32,12 +39,13 @@
 import { toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import Badge from '~/components/atomic/Badge.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import ListItem from '~/components/atomic/ListItem.vue';
 import { Secret } from '~/lib/api/types';
 
 const props = defineProps<{
-  modelValue: Secret[];
+  modelValue: (Secret & { edit?: boolean })[];
   isDeleting: boolean;
   i18nPrefix: string;
 }>();

web/src/compositions/usePaginate.ts

@@ -15,32 +15,42 @@ export async function usePaginate<T>(getSingle: (page: number) => Promise<T[]>):
   return result;
 }
 
-export function usePagination<T>(
-  _loadData: (page: number) => Promise<T[] | null>,
-  isActive: () => boolean = () => true,
-  scrollElement = ref(document.getElementById('scroll-component')),
+export function usePagination<T, S = unknown>(
+  _loadData: (page: number, args: S) => Promise<T[] | null>,
+  isActive: () => boolean,
+  {
+    scrollElement: _scrollElement,
+    each: _each,
+    name,
+  }: { scrollElement?: Ref<HTMLElement | null>; each?: S[]; name?: string } = {},
 ) {
+  const scrollElement = _scrollElement ?? ref(document.getElementById('scroll-component'));
   const page = ref(1);
   const pageSize = ref(0);
   const hasMore = ref(true);
   const data = ref<T[]>([]) as Ref<T[]>;
   const loading = ref(false);
+  const each = ref<S[]>(_each || []);
 
   async function loadData() {
+    if (hasMore.value === false || loading.value === true) {
+      return;
+    }
+
     loading.value = true;
-    const newData = await _loadData(page.value);
-    hasMore.value = newData !== null && newData.length >= pageSize.value;
-    if (newData !== null && newData.length !== 0) {
-      if (page.value === 1) {
-        pageSize.value = newData.length;
-        data.value = newData;
-      } else {
-        data.value.push(...newData);
-      }
-    } else if (page.value === 1) {
-      data.value = [];
-    } else {
-      hasMore.value = false;
+    name === 'secrets' && console.log('loadData', page.value, each.value?.[0] as S);
+    const newData = await _loadData(page.value, each.value?.[0] as S);
+    hasMore.value = (newData !== null && newData.length >= pageSize.value) || each.value.length > 0;
+    if (newData && newData.length > 0) {
+      data.value.push(...newData);
+      pageSize.value = newData.length;
+    } else if (each.value.length > 0) {
+      // use next each element
+      each.value.shift();
+      page.value = 1;
+      pageSize.value = 0;
+      hasMore.value = each.value.length > 0;
+      name === 'secrets' && console.log('loadData', 'next', each.value?.[0] as S, hasMore.value);
     }
     loading.value = false;
   }
@@ -51,7 +61,7 @@ export function usePagination<T>(
   useInfiniteScroll(
     scrollElement,
     () => {
-      if (isActive() && !loading.value && hasMore.value) {
+      if (isActive() && hasMore.value && !loading.value) {
         // load more
         page.value += 1;
       }
@@ -60,6 +70,7 @@ export function usePagination<T>(
   );
 
   const resetPage = () => {
+    hasMore.value = true;
     if (page.value !== 1) {
       // just set page = 1, will be handled by watcher
       page.value = 1;

web/src/lib/api/types/secret.ts

@@ -2,6 +2,8 @@ import { WebhookEvents } from './webhook';
 
 export type Secret = {
   id: string;
+  repo_id: number;
+  org_id: number;
   name: string;
   value: string;
   events: WebhookEvents[];