Redesign repo list and include last pipeline (#4386)

web/src/assets/locales/en.json

@@ -67,6 +67,21 @@
       "success": "Repository enabled"
     },
     "open_in_forge": "Open repository in forge",
+    "visibility": {
+      "visibility": "Project visibility",
+      "public": {
+        "public": "Public",
+        "desc": "Every user can see your project without being logged in."
+      },
+      "private": {
+        "private": "Private",
+        "desc": "Only you and other owners of the repository can see this project."
+      },
+      "internal": {
+        "internal": "Internal",
+        "desc": "Only authenticated users of the Woodpecker instance can see this project."
+      }
+    },
     "settings": {
       "not_allowed": "You are not allowed to access this repository's settings",
       "general": {
@@ -107,21 +122,6 @@
             "desc": "Underlying pipeline containers get access to security privileges."
           }
         },
-        "visibility": {
-          "visibility": "Project visibility",
-          "public": {
-            "public": "Public",
-            "desc": "Every user can see your project without being logged in."
-          },
-          "private": {
-            "private": "Private",
-            "desc": "Only you and other owners of the repository can see this project."
-          },
-          "internal": {
-            "internal": "Internal",
-            "desc": "Only authenticated users of the Woodpecker instance can see this project."
-          }
-        },
         "timeout": {
           "timeout": "Timeout",
           "minutes": "minutes"
@@ -509,5 +509,7 @@
     "pull_requests": "All pull requests",
     "all_events": "All events from forge",
     "desc": "Prevent malicious pipelines from exposing secrets or running harmful tasks by approving them before execution."
-  }
+  },
+  "all_repositories": "All repositories",
+  "no_search_results": "No results found"
 }

web/src/components/repo/RepoItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <router-link
+    v-if="repo"
+    :to="{ name: 'repo', params: { repoId: repo.id } }"
+    class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
+  >
+    <div class="grid grid-cols-[auto,1fr] gap-y-1 items-center">
+      <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+      <div class="ml-auto">
+        <Badge v-if="repo.visibility === RepoVisibility.Public" :label="$t('repo.visibility.public.public')" />
+      </div>
+
+      <div class="col-span-2 text-wp-text-100 mt-4 flex w-full">
+        <template v-if="lastPipeline">
+          <div class="flex gap-x-1 items-center">
+            <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
+            <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
+          </div>
+
+          <div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
+            <Icon name="since" size="20" />
+            <span>{{ since }}</span>
+          </div>
+        </template>
+
+        <div v-else class="flex gap-x-2">
+          <span>{{ $t('repo.pipeline.no_pipelines') }}</span>
+        </div>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import Badge from '~/components/atomic/Badge.vue';
+import Icon from '~/components/atomic/Icon.vue';
+import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
+import usePipeline from '~/compositions/usePipeline';
+import type { Repo } from '~/lib/api/types';
+import { RepoVisibility } from '~/lib/api/types';
+
+const props = defineProps<{
+  repo: Repo;
+}>();
+
+const lastPipeline = computed(() => props.repo.last_pipeline_item);
+const { since, shortMessage } = usePipeline(lastPipeline);
+</script>

web/src/components/repo/pipeline/PipelineLog.vue

@@ -163,7 +163,7 @@ const hasLogs = computed(
     // we do not have logs for skipped steps
     repo?.value && pipeline.value && step.value && step.value.state !== 'skipped',
 );
-const autoScroll = useStorage('log-auto-scroll', false);
+const autoScroll = useStorage('woodpecker:log-auto-scroll', false);
 const showActions = ref(false);
 const downloadInProgress = ref(false);
 const ansiUp = ref(new AnsiUp());

web/src/compositions/useRepos.ts

@@ -0,0 +1,55 @@
+import { useStorage } from '@vueuse/core';
+import { ref } from 'vue';
+
+import type { Repo } from '~/lib/api/types';
+import { usePipelineStore } from '~/store/pipelines';
+
+export default function useRepos() {
+  const pipelineStore = usePipelineStore();
+  const lastAccess = useStorage('woodpecker:repo-last-access', new Map<number, number>());
+
+  function repoWithLastPipeline(repo: Repo): Repo {
+    if (repo.last_pipeline === undefined) {
+      return repo;
+    }
+
+    if (repo.last_pipeline_item?.number === repo.last_pipeline) {
+      return repo;
+    }
+
+    const lastPipeline = pipelineStore.getPipeline(ref(repo.id), ref(repo.last_pipeline)).value;
+
+    return {
+      ...repo,
+      last_pipeline_item: lastPipeline,
+    };
+  }
+
+  function sortReposByLastAccess(repos: Repo[]): Repo[] {
+    return repos.sort((a, b) => {
+      const aLastAccess = lastAccess.value.get(a.id) ?? 0;
+      const bLastAccess = lastAccess.value.get(b.id) ?? 0;
+
+      return bLastAccess - aLastAccess;
+    });
+  }
+
+  function sortReposByLastActivity(repos: Repo[]): Repo[] {
+    return repos.sort((a, b) => {
+      const aLastActivity = a.last_pipeline_item?.created ?? 0;
+      const bLastActivity = b.last_pipeline_item?.created ?? 0;
+      return bLastActivity - aLastActivity;
+    });
+  }
+
+  function updateLastAccess(repoId: number) {
+    lastAccess.value.set(repoId, Date.now());
+  }
+
+  return {
+    sortReposByLastAccess,
+    sortReposByLastActivity,
+    repoWithLastPipeline,
+    updateLastAccess,
+  };
+}

web/src/compositions/useUserConfig.ts

@@ -1,32 +1,19 @@
-import { computed, ref } from 'vue';
+import { useStorage } from '@vueuse/core';
-
+import { computed } from 'vue';
-const USER_CONFIG_KEY = 'woodpecker-user-config';
 
 interface UserConfig {
   isPipelineFeedOpen: boolean;
   redirectUrl: string;
 }
 
-const defaultUserConfig: UserConfig = {
+const config = useStorage<UserConfig>('woodpecker:user-config', {
   isPipelineFeedOpen: false,
   redirectUrl: '',
-};
+});
-
-function loadUserConfig(): UserConfig {
-  const lsData = localStorage.getItem(USER_CONFIG_KEY);
-  if (lsData === null) {
-    return defaultUserConfig;
-  }
-
-  return JSON.parse(lsData) as UserConfig;
-}
-
-const config = ref<UserConfig>(loadUserConfig());
 
 export default () => ({
   setUserConfig<T extends keyof UserConfig>(key: T, value: UserConfig[T]): void {
     config.value = { ...config.value, [key]: value };
-    localStorage.setItem(USER_CONFIG_KEY, JSON.stringify(config.value));
   },
   userConfig: computed(() => config.value),
 });

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

@@ -1,3 +1,5 @@
+import type { Pipeline } from './pipeline';
+
 // A version control repository.
 export interface Repo {
   // Is the repo currently active or not
@@ -65,7 +67,9 @@ export interface Repo {
 
   visibility: RepoVisibility;
 
-  last_pipeline: number;
+  last_pipeline?: number;
+
+  last_pipeline_item?: Pipeline;
 
   require_approval: RepoRequireApproval;
 

web/src/store/pipelines.ts

@@ -18,6 +18,14 @@ export const usePipelineStore = defineStore('pipelines', () => {
       ...(repoPipelines.get(pipeline.number) || {}),
       ...pipeline,
     });
+
+    // Update last pipeline number for the repo
+    const repo = repoStore.repos.get(repoId);
+    if (repo?.last_pipeline !== undefined && repo.last_pipeline < pipeline.number) {
+      repo.last_pipeline = pipeline.number;
+      repoStore.setRepo(repo);
+    }
+
     pipelines.set(repoId, repoPipelines);
   }
 
@@ -25,10 +33,14 @@ export const usePipelineStore = defineStore('pipelines', () => {
     return computed(() => Array.from(pipelines.get(repoId.value)?.values() || []).sort(comparePipelines));
   }
 
-  function getPipeline(repoId: Ref<number>, _pipelineNumber: Ref<string>) {
+  function getPipeline(repoId: Ref<number>, _pipelineNumber: Ref<string | number>) {
     return computed(() => {
+      if (typeof _pipelineNumber.value === 'string') {
         const pipelineNumber = Number.parseInt(_pipelineNumber.value, 10);
         return pipelines.get(repoId.value)?.get(pipelineNumber);
+      }
+
+      return pipelines.get(repoId.value)?.get(_pipelineNumber.value);
     });
   }
 

web/src/store/repos.ts

@@ -4,8 +4,11 @@ import { computed, reactive, ref, type Ref } from 'vue';
 import useApiClient from '~/compositions/useApiClient';
 import type { Repo } from '~/lib/api/types';
 
+import { usePipelineStore } from './pipelines';
+
 export const useRepoStore = defineStore('repos', () => {
   const apiClient = useApiClient();
+  const pipelineStore = usePipelineStore();
 
   const repos: Map<number, Repo> = reactive(new Map());
   const ownedRepoIds = ref<number[]>([]);
@@ -21,20 +24,30 @@ export const useRepoStore = defineStore('repos', () => {
   }
 
   function setRepo(repo: Repo) {
-    repos.set(repo.id, repo);
+    repos.set(repo.id, {
+      ...repos.get(repo.id),
+      ...repo,
+    });
   }
 
   async function loadRepo(repoId: number) {
     const repo = await apiClient.getRepo(repoId);
-    repos.set(repo.id, repo);
+    setRepo(repo);
     return repo;
   }
 
   async function loadRepos() {
     const _ownedRepos = await apiClient.getRepoList();
-    _ownedRepos.forEach((repo) => {
+    await Promise.all(
-      repos.set(repo.id, repo);
+      _ownedRepos.map(async (repo) => {
-    });
+        const lastPipeline = await apiClient.getPipelineList(repo.id, { page: 1, perPage: 1 });
+        if (lastPipeline.length === 1) {
+          pipelineStore.setPipeline(repo.id, lastPipeline[0]);
+          repo.last_pipeline = lastPipeline[0].number;
+        }
+        setRepo(repo);
+      }),
+    );
     ownedRepoIds.value = _ownedRepos.map((repo) => repo.id);
   }
 

web/src/utils/locale.ts

@@ -1,8 +1,8 @@
-import { useLocalStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 
 export function getUserLanguage(): string {
   const browserLocale = navigator.language.split('-')[0];
-  const selectedLocale = useLocalStorage('woodpecker:locale', browserLocale).value;
+  const selectedLocale = useStorage('woodpecker:locale', browserLocale).value;
 
   return selectedLocale;
 }

web/src/views/Repos.vue

@@ -8,11 +8,26 @@
       <Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
     </template>
 
-    <div class="space-y-4">
+    <Transition name="fade" mode="out-in">
-      <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
+      <div v-if="search === '' && repos.length > 0" class="gap-8 grid">
-        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <div v-if="reposLastAccess.length > 0" class="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
-      </ListItem>
+          <RepoItem v-for="repo in reposLastAccess" :key="repo.id" :repo="repo" />
         </div>
+
+        <div class="flex flex-col gap-4">
+          <h2 class="text-wp-text-100 text-lg">{{ $t('all_repositories') }}</h2>
+          <div class="flex flex-col gap-4">
+            <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
+          </div>
+        </div>
+      </div>
+      <div v-else class="flex flex-col">
+        <div v-if="reposLastActivity.length > 0" class="flex flex-col gap-4">
+          <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
+        </div>
+        <span v-else class="text-wp-text-100 text-lg text-center">{{ $t('no_search_results') }}</span>
+      </div>
+    </Transition>
   </Scaffold>
 </template>
 
@@ -20,18 +35,36 @@
 import { computed, onMounted, ref } from 'vue';
 
 import Button from '~/components/atomic/Button.vue';
-import ListItem from '~/components/atomic/ListItem.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import RepoItem from '~/components/repo/RepoItem.vue';
+import useRepos from '~/compositions/useRepos';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
 import { useRepoStore } from '~/store/repos';
 
 const repoStore = useRepoStore();
-const repos = computed(() => Object.values(repoStore.ownedRepos));
-const search = ref('');
 
+const { sortReposByLastAccess, sortReposByLastActivity, repoWithLastPipeline } = useRepos();
+const repos = computed(() => Object.values(repoStore.ownedRepos).map((r) => repoWithLastPipeline(r)));
+
+const reposLastAccess = computed(() => sortReposByLastAccess(repos.value || []).slice(0, 4));
+
+const search = ref('');
 const { searchedRepos } = useRepoSearch(repos, search);
+const reposLastActivity = computed(() => sortReposByLastActivity(searchedRepos.value || []));
 
 onMounted(async () => {
   await repoStore.loadRepos();
 });
 </script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

web/src/views/org/OrgRepos.vue

@@ -13,10 +13,8 @@
       />
     </template>
 
-    <div class="space-y-4">
+    <div class="flex flex-col gap-4">
-      <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
+      <RepoItem v-for="repo in searchedRepos" :key="repo.id" :repo="repo" />
-        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
-      </ListItem>
     </div>
     <div v-if="(searchedRepos || []).length <= 0" class="text-center">
       <span class="text-wp-text-100 m-auto">{{ $t('repo.user_none') }}</span>
@@ -28,19 +26,25 @@
 import { computed, onMounted, ref } from 'vue';
 
 import IconButton from '~/components/atomic/IconButton.vue';
-import ListItem from '~/components/atomic/ListItem.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
+import RepoItem from '~/components/repo/RepoItem.vue';
 import { inject } from '~/compositions/useInjectProvide';
+import useRepos from '~/compositions/useRepos';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
 import { useRepoStore } from '~/store/repos';
 
 const repoStore = useRepoStore();
+const { repoWithLastPipeline } = useRepos();
 
 const org = inject('org');
 const orgPermissions = inject('org-permissions');
 
 const search = ref('');
-const repos = computed(() => Array.from(repoStore.repos.values()).filter((repo) => repo.org_id === org.value?.id));
+const repos = computed(() =>
+  Array.from(repoStore.repos.values())
+    .filter((repo) => repo.org_id === org.value?.id)
+    .map(repoWithLastPipeline),
+);
 const { searchedRepos } = useRepoSearch(repos, search);
 
 onMounted(async () => {

web/src/views/repo/RepoWrapper.vue

@@ -67,6 +67,7 @@ import useAuthentication from '~/compositions/useAuthentication';
 import useConfig from '~/compositions/useConfig';
 import { useForgeStore } from '~/compositions/useForgeStore';
 import useNotifications from '~/compositions/useNotifications';
+import useRepos from '~/compositions/useRepos';
 import type { Forge, RepoPermissions } from '~/lib/api/types';
 import { usePipelineStore } from '~/store/pipelines';
 import { useRepoStore } from '~/store/repos';
@@ -87,6 +88,7 @@ const router = useRouter();
 const i18n = useI18n();
 const config = useConfig();
 const forgeStore = useForgeStore();
+const { updateLastAccess } = useRepos();
 
 const repo = repoStore.getRepo(repositoryId);
 const repoPermissions = ref<RepoPermissions>();
@@ -121,6 +123,7 @@ async function loadRepo() {
   if (repo.value) {
     forge.value = (await forgeStore.getForge(repo.value?.forge_id)).value;
   }
+  updateLastAccess(repositoryId.value);
 }
 
 onMounted(() => {

web/src/views/repo/settings/Badge.vue

@@ -55,7 +55,7 @@ import type { Repo } from '~/lib/api/types';
 const apiClient = useApiClient();
 const repo = inject<Ref<Repo>>('repo');
 
-const badgeType = useStorage('last-badge-type', 'markdown');
+const badgeType = useStorage('woodpecker:last-badge-type', 'markdown');
 
 if (!repo) {
   throw new Error('Unexpected: "repo" should be provided at this place');

web/src/views/repo/settings/General.vue

@@ -74,10 +74,7 @@
         </template>
       </InputField>
 
-      <InputField
+      <InputField docs-url="docs/usage/project-settings#project-visibility" :label="$t('repo.visibility.visibility')">
-        docs-url="docs/usage/project-settings#project-visibility"
-        :label="$t('repo.settings.general.visibility.visibility')"
-      >
         <RadioField v-model="repoSettings.visibility" :options="projectVisibilityOptions" />
       </InputField>
 
@@ -215,18 +212,18 @@ onMounted(() => {
 const projectVisibilityOptions: RadioOption[] = [
   {
     value: RepoVisibility.Public,
-    text: i18n.t('repo.settings.general.visibility.public.public'),
+    text: i18n.t('repo.visibility.public.public'),
-    description: i18n.t('repo.settings.general.visibility.public.desc'),
+    description: i18n.t('repo.visibility.public.desc'),
   },
   {
     value: RepoVisibility.Internal,
-    text: i18n.t('repo.settings.general.visibility.internal.internal'),
+    text: i18n.t('repo.visibility.internal.internal'),
-    description: i18n.t('repo.settings.general.visibility.internal.desc'),
+    description: i18n.t('repo.visibility.internal.desc'),
   },
   {
     value: RepoVisibility.Private,
-    text: i18n.t('repo.settings.general.visibility.private.private'),
+    text: i18n.t('repo.visibility.private.private'),
-    description: i18n.t('repo.settings.general.visibility.private.desc'),
+    description: i18n.t('repo.visibility.private.desc'),
   },
 ];
 

web/src/views/user/UserGeneral.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useLocalStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 import { SUPPORTED_LOCALES } from 'virtual:vue-i18n-supported-locales';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -39,7 +39,7 @@ const localeOptions = computed(() =>
   })),
 );
 
-const storedLocale = useLocalStorage('woodpecker:locale', locale.value);
+const storedLocale = useStorage('woodpecker:locale', locale.value);
 const selectedLocale = computed<string>({
   async set(_selectedLocale) {
     await setI18nLanguage(_selectedLocale);