Hide not owned repos from sidebar and repo list (#1453)

Co-authored-by: Lukas <lukas@slucky.de>

web/.eslintrc.js

@@ -49,6 +49,26 @@ module.exports = {
     '@typescript-eslint/no-explicit-any': 'error',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-non-null-assertion': 'error',
+    // SOURCE: https://github.com/iamturns/eslint-config-airbnb-typescript/blob/4aec5702be5b4e74e0e2f40bc78b4bc961681de1/lib/shared.js#L41
+    '@typescript-eslint/naming-convention': [
+      'error',
+      // Allow camelCase variables (23.2), PascalCase variables (23.8), and UPPER_CASE variables (23.10)
+      {
+        selector: 'variable',
+        format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+        leadingUnderscore: 'allow',
+      },
+      // Allow camelCase functions (23.2), and PascalCase functions (23.8)
+      {
+        selector: 'function',
+        format: ['camelCase', 'PascalCase'],
+      },
+      // Airbnb recommends PascalCase for classes (23.3), and although Airbnb does not make TypeScript recommendations, we are assuming this rule would similarly apply to anything "type like", including interfaces, type aliases, and enums
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+      },
+    ],
 
     'import/no-unresolved': 'off', // disable as this is handled by tsc itself
     'import/first': 'error',

web/components.d.ts

@@ -22,51 +22,9 @@ declare module '@vue/runtime-core' {
     FluidContainer: typeof import('./src/components/layout/FluidContainer.vue')['default']
     GeneralTab: typeof import('./src/components/repo/settings/GeneralTab.vue')['default']
     Header: typeof import('./src/components/layout/scaffold/Header.vue')['default']
-    IBiCheckCircleFill: typeof import('~icons/bi/check-circle-fill')['default']
-    IBiCircle: typeof import('~icons/bi/circle')['default']
-    IBiPlayCircleFill: typeof import('~icons/bi/play-circle-fill')['default']
-    IBiSlashCircleFill: typeof import('~icons/bi/slash-circle-fill')['default']
-    IBiStopCircleFill: typeof import('~icons/bi/stop-circle-fill')['default']
-    IBiXCircleFill: typeof import('~icons/bi/x-circle-fill')['default']
-    IBxBxPowerOff: typeof import('~icons/bx/bx-power-off')['default']
-    ICarbonCloseOutline: typeof import('~icons/carbon/close-outline')['default']
-    ICarbonInProgress: typeof import('~icons/carbon/in-progress')['default']
-    IClarityDeployLine: typeof import('~icons/clarity/deploy-line')['default']
-    IClaritySettingsSolid: typeof import('~icons/clarity/settings-solid')['default']
     Icon: typeof import('./src/components/atomic/Icon.vue')['default']
     IconButton: typeof import('./src/components/atomic/IconButton.vue')['default']
-    IGgTrash: typeof import('~icons/gg/trash')['default']
-    IIcBaselineDarkMode: typeof import('~icons/ic/baseline-dark-mode')['default']
-    IIcBaselineDownloadForOffline: typeof import('~icons/ic/baseline-download-for-offline')['default']
-    IIcBaselineEdit: typeof import('~icons/ic/baseline-edit')['default']
-    IIcBaselineFileDownload: typeof import('~icons/ic/baseline-file-download')['default']
-    IIcBaselineFileDownloadOff: typeof import('~icons/ic/baseline-file-download-off')['default']
-    IIcBaselineHealing: typeof import('~icons/ic/baseline-healing')['default']
-    IIcBaselinePlayArrow: typeof import('~icons/ic/baseline-play-arrow')['default']
-    IIconoirArrowLeft: typeof import('~icons/iconoir/arrow-left')['default']
-    IIconParkOutlineAlarmClock: typeof import('~icons/icon-park-outline/alarm-clock')['default']
-    IIcRoundLightMode: typeof import('~icons/ic/round-light-mode')['default']
-    IIcSharpTimelapse: typeof import('~icons/ic/sharp-timelapse')['default']
-    IIcTwotoneAdd: typeof import('~icons/ic/twotone-add')['default']
-    ILaTimes: typeof import('~icons/la/times')['default']
-    IMdiBitbucket: typeof import('~icons/mdi/bitbucket')['default']
-    IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
-    IMdiClockTimeEightOutline: typeof import('~icons/mdi/clock-time-eight-outline')['default']
-    IMdiFormatListBulleted: typeof import('~icons/mdi/format-list-bulleted')['default']
-    IMdiGestureTap: typeof import('~icons/mdi/gesture-tap')['default']
-    IMdiGithub: typeof import('~icons/mdi/github')['default']
-    IMdiLoading: typeof import('~icons/mdi/loading')['default']
-    IMdiSync: typeof import('~icons/mdi/sync')['default']
-    IMdiSourceBranch: typeof import('~icons/mdi/source-branch')['default']
-    IMdisourceCommit: typeof import('~icons/mdi/source-commit')['default']
-    IMdiSourcePull: typeof import('~icons/mdi/source-pull')['default']
-    IMdiTagOutline: typeof import('~icons/mdi/tag-outline')['default']
     InputField: typeof import('./src/components/form/InputField.vue')['default']
-    IPhGitlabLogoSimpleFill: typeof import('~icons/ph/gitlab-logo-simple-fill')['default']
-    ISimpleIconsGitea: typeof import('~icons/simple-icons/gitea')['default']
-    ITeenyiconsGitSolid: typeof import('~icons/teenyicons/git-solid')['default']
-    ITeenyiconsRefreshOutline: typeof import('~icons/teenyicons/refresh-outline')['default']
-    IVaadinQuestionCircleO: typeof import('~icons/vaadin/question-circle-o')['default']
     ListItem: typeof import('./src/components/atomic/ListItem.vue')['default']
     ManualPipelinePopup: typeof import('./src/components/layout/popups/ManualPipelinePopup.vue')['default']
     Navbar: typeof import('./src/components/layout/header/Navbar.vue')['default']

web/src/components/layout/header/ActivePipelines.vue

@@ -14,26 +14,18 @@
   </IconButton>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted } from 'vue';
+import { onMounted, toRef } from 'vue';
 
 import IconButton from '~/components/atomic/IconButton.vue';
 import usePipelineFeed from '~/compositions/usePipelineFeed';
 
-export default defineComponent({
+const pipelineFeed = usePipelineFeed();
-  name: 'ActivePipelines',
+const activePipelines = toRef(pipelineFeed, 'activePipelines');
+const { toggle } = pipelineFeed;
 
-  components: { IconButton },
+onMounted(async () => {
-
+  await pipelineFeed.load();
-  setup() {
-    const pipelineFeed = usePipelineFeed();
-
-    onMounted(() => {
-      pipelineFeed.load();
-    });
-
-    return pipelineFeed;
-  },
 });
 </script>
 

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

@@ -100,7 +100,7 @@ import { useAsyncAction } from '~/compositions/useAsyncAction';
 import useAuthentication from '~/compositions/useAuthentication';
 import useNotifications from '~/compositions/useNotifications';
 import { Repo, RepoSettings, RepoVisibility, WebhookEvents } from '~/lib/api/types';
-import RepoStore from '~/store/repos';
+import { useRepoStore } from '~/store/repos';
 
 export default defineComponent({
   name: 'GeneralTab',
@@ -111,7 +111,7 @@ export default defineComponent({
     const apiClient = useApiClient();
     const notifications = useNotifications();
     const { user } = useAuthentication();
-    const repoStore = RepoStore();
+    const repoStore = useRepoStore();
     const i18n = useI18n();
 
     const repo = inject<Ref<Repo>>('repo');

web/src/compositions/useEvents.ts

@@ -1,6 +1,5 @@
-import PipelineStore from '~/store/pipelines';
+import { usePipelineStore } from '~/store/pipelines';
-import RepoStore from '~/store/repos';
+import { useRepoStore } from '~/store/repos';
-import { repoSlug } from '~/utils/helpers';
 
 import useApiClient from './useApiClient';
 
@@ -11,8 +10,8 @@ export default () => {
   if (initialized) {
     return;
   }
-  const repoStore = RepoStore();
+  const repoStore = useRepoStore();
-  const pipelineStore = PipelineStore();
+  const pipelineStore = usePipelineStore();
 
   initialized = true;
 
@@ -30,7 +29,6 @@ export default () => {
     }
     const { pipeline } = data;
     pipelineStore.setPipeline(repo.owner, repo.name, pipeline);
-    pipelineStore.setPipelineFeedItem({ ...pipeline, name: repo.name, owner: repo.owner, full_name: repoSlug(repo) });
 
     // contains step update
     if (!data.step) {

web/src/compositions/usePipelineFeed.ts

@@ -1,14 +1,14 @@
 import { computed, toRef } from 'vue';
 
 import useUserConfig from '~/compositions/useUserConfig';
-import PipelineStore from '~/store/pipelines';
+import { usePipelineStore } from '~/store/pipelines';
 
 import useAuthentication from './useAuthentication';
 
 const { userConfig, setUserConfig } = useUserConfig();
 
 export default () => {
-  const pipelineStore = PipelineStore();
+  const pipelineStore = usePipelineStore();
   const { isAuthenticated } = useAuthentication();
 
   const isOpen = computed(() => userConfig.value.isPipelineFeedOpen && !!isAuthenticated);
@@ -17,7 +17,7 @@ export default () => {
     setUserConfig('isPipelineFeedOpen', !userConfig.value.isPipelineFeedOpen);
   }
 
-  const sortedPipelines = toRef(pipelineStore, 'sortedPipelineFeed');
+  const sortedPipelines = toRef(pipelineStore, 'pipelineFeed');
   const activePipelines = toRef(pipelineStore, 'activePipelines');
 
   return {

web/src/lib/api/client.ts

@@ -108,7 +108,6 @@ export default class ApiClient {
     const query = encodeQueryString({
       access_token: this.token || undefined,
     });
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     let _path = this.server ? this.server + path : path;
     _path = this.token ? `${path}?${query}` : path;
 

web/src/store/pipelines.ts

@@ -1,99 +1,105 @@
 import { defineStore } from 'pinia';
-import { computed, Ref, ref, toRef } from 'vue';
+import { computed, reactive, Ref, ref } from 'vue';
 
 import useApiClient from '~/compositions/useApiClient';
 import { Pipeline, PipelineFeed, PipelineStep } from '~/lib/api/types';
+import { useRepoStore } from '~/store/repos';
 import { comparePipelines, isPipelineActive, repoSlug } from '~/utils/helpers';
 
-const apiClient = useApiClient();
+export const usePipelineStore = defineStore('pipelines', () => {
+  const apiClient = useApiClient();
+  const repoStore = useRepoStore();
 
-export default defineStore({
+  const pipelines: Map<string, Map<number, Pipeline>> = reactive(new Map());
-  id: 'pipelines',
 
-  state: () => ({
+  function setPipeline(owner: string, repo: string, pipeline: Pipeline) {
-    pipelines: {} as Record<string, Record<number, Pipeline>>,
+    const _repoSlug = repoSlug(owner, repo);
-    pipelineFeed: [] as PipelineFeed[],
+    const repoPipelines = pipelines.get(_repoSlug) || new Map();
-  }),
+    repoPipelines.set(pipeline.number, pipeline);
+    pipelines.set(_repoSlug, repoPipelines);
+  }
 
-  getters: {
+  function getRepoPipelines(owner: Ref<string>, repo: Ref<string>) {
-    sortedPipelineFeed(state) {
+    return computed(() => {
-      return state.pipelineFeed.sort(comparePipelines);
+      const slug = repoSlug(owner.value, repo.value);
-    },
+      return Array.from(pipelines.get(slug)?.values() || []).sort(comparePipelines);
-    activePipelines(state) {
+    });
-      return state.pipelineFeed.filter(isPipelineActive);
+  }
-    },
-  },
 
-  actions: {
+  function getPipeline(owner: Ref<string>, repo: Ref<string>, _pipelineNumber: Ref<string>) {
-    // setters
+    return computed(() => {
-    setPipeline(owner: string, repo: string, pipeline: Pipeline) {
+      const slug = repoSlug(owner.value, repo.value);
-      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const pipelineNumber = parseInt(_pipelineNumber.value, 10);
-      const _repoSlug = repoSlug(owner, repo);
+      return pipelines.get(slug)?.get(pipelineNumber);
-      if (!this.pipelines[_repoSlug]) {
+    });
-        this.pipelines[_repoSlug] = {};
+  }
-      }
 
-      const repoPipelines = this.pipelines[_repoSlug];
+  function setStep(owner: string, repo: string, pipelineNumber: number, step: PipelineStep) {
+    const pipeline = getPipeline(ref(owner), ref(repo), ref(pipelineNumber.toString())).value;
+    if (!pipeline) {
+      throw new Error("Can't find pipeline");
+    }
 
-      // merge with available data
+    if (!pipeline.steps) {
-      repoPipelines[pipeline.number] = { ...(repoPipelines[pipeline.number] || {}), ...pipeline };
+      pipeline.steps = [];
+    }
 
-      this.pipelines = {
+    pipeline.steps = [...pipeline.steps.filter((p) => p.pid !== step.pid), step];
-        ...this.pipelines,
+    setPipeline(owner, repo, pipeline);
-        [_repoSlug]: repoPipelines,
+  }
-      };
-    },
-    setStep(owner: string, repo: string, pipelineNumber: number, step: PipelineStep) {
-      const pipeline = this.getPipeline(ref(owner), ref(repo), ref(pipelineNumber.toString())).value;
-      if (!pipeline) {
-        throw new Error("Can't find pipeline");
-      }
 
-      if (!pipeline.steps) {
+  async function loadRepoPipelines(owner: string, repo: string) {
-        pipeline.steps = [];
+    const _pipelines = await apiClient.getPipelineList(owner, repo);
-      }
+    _pipelines.forEach((pipeline) => {
+      setPipeline(owner, repo, pipeline);
+    });
+  }
 
-      pipeline.steps = [...pipeline.steps.filter((p) => p.pid !== step.pid), step];
+  async function loadPipeline(owner: string, repo: string, pipelinesNumber: number) {
-      this.setPipeline(owner, repo, pipeline);
+    const pipeline = await apiClient.getPipeline(owner, repo, pipelinesNumber);
-    },
+    setPipeline(owner, repo, pipeline);
-    setPipelineFeedItem(pipeline: PipelineFeed) {
+  }
-      const pipelineFeed = this.pipelineFeed.filter((b) => b.id !== pipeline.id);
-      this.pipelineFeed = [...pipelineFeed, pipeline];
-    },
 
-    // getters
+  const pipelineFeed = computed(() =>
-    getPipelines(owner: Ref<string>, repo: Ref<string>) {
+    Array.from(pipelines.entries())
-      return computed(() => {
+      .reduce<PipelineFeed[]>((acc, [_repoSlug, repoPipelines]) => {
-        const slug = repoSlug(owner.value, repo.value);
+        const repoPipelinesArray = Array.from(repoPipelines.entries()).map(
-        return toRef(this.pipelines, slug).value;
+          ([_pipelineNumber, pipeline]) =>
-      });
+            <PipelineFeed>{
-    },
+              ...pipeline,
-    getSortedPipelines(owner: Ref<string>, repo: Ref<string>) {
+              full_name: _repoSlug,
-      return computed(() => Object.values(this.getPipelines(owner, repo).value || []).sort(comparePipelines));
+              owner: _repoSlug.split('/')[0],
-    },
+              name: _repoSlug.split('/')[1],
-    getActivePipelines(owner: Ref<string>, repo: Ref<string>) {
+              number: _pipelineNumber,
-      const pipelines = this.getPipelines(owner, repo);
+            },
-      return computed(() => Object.values(pipelines.value).filter(isPipelineActive));
+        );
-    },
+        return [...acc, ...repoPipelinesArray];
-    getPipeline(owner: Ref<string>, repo: Ref<string>, pipelineNumber: Ref<string>) {
+      }, [])
-      const pipelines = this.getPipelines(owner, repo);
+      .sort(comparePipelines)
-      return computed(() => (pipelines.value || {})[parseInt(pipelineNumber.value, 10)]);
+      .filter((pipeline) => repoStore.ownedRepoSlugs.includes(pipeline.full_name)),
-    },
+  );
 
-    // loading
+  const activePipelines = computed(() => pipelineFeed.value.filter(isPipelineActive));
-    async loadPipelines(owner: string, repo: string) {
+
-      const pipelines = await apiClient.getPipelineList(owner, repo);
+  async function loadPipelineFeed() {
-      pipelines.forEach((pipeline) => {
+    await repoStore.loadRepos();
-        this.setPipeline(owner, repo, pipeline);
+
-      });
+    const _pipelines = await apiClient.getPipelineFeed();
-    },
+    _pipelines.forEach((pipeline) => {
-    async loadPipeline(owner: string, repo: string, pipelinesNumber: number) {
+      setPipeline(pipeline.owner, pipeline.name, pipeline);
-      const pipelines = await apiClient.getPipeline(owner, repo, pipelinesNumber);
+    });
-      this.setPipeline(owner, repo, pipelines);
+  }
-    },
+
-    async loadPipelineFeed() {
+  return {
-      const pipelines = await apiClient.getPipelineFeed();
+    pipelines,
-      this.pipelineFeed = pipelines;
+    setPipeline,
-    },
+    setStep,
-  },
+    getRepoPipelines,
+    getPipeline,
+    loadRepoPipelines,
+    loadPipeline,
+    activePipelines,
+    pipelineFeed,
+    loadPipelineFeed,
+  };
 });

web/src/store/repos.ts

@@ -1,44 +1,54 @@
 import { defineStore } from 'pinia';
-import { computed, Ref, toRef } from 'vue';
+import { computed, reactive, Ref, ref } from 'vue';
 
 import useApiClient from '~/compositions/useApiClient';
 import { Repo } from '~/lib/api/types';
 import { repoSlug } from '~/utils/helpers';
 
-const apiClient = useApiClient();
+export const useRepoStore = defineStore('repos', () => {
+  const apiClient = useApiClient();
 
-export default defineStore({
+  const repos: Map<string, Repo> = reactive(new Map());
-  id: 'repos',
+  const ownedRepoSlugs = ref<string[]>([]);
 
-  state: () => ({
+  const ownedRepos = computed(() =>
-    repos: {} as Record<string, Repo>,
+    Array.from(repos.entries())
-  }),
+      .filter(([slug]) => ownedRepoSlugs.value.includes(slug))
+      .map(([, repo]) => repo),
+  );
 
-  actions: {
+  function getRepo(owner: Ref<string>, name: Ref<string>) {
-    // getter
+    return computed(() => {
-    getRepo(owner: Ref<string>, name: Ref<string>) {
+      const slug = repoSlug(owner.value, name.value);
-      return computed(() => {
+      return repos.get(slug);
-        const slug = repoSlug(owner.value, name.value);
+    });
-        return toRef(this.repos, slug).value;
+  }
-      });
-    },
 
-    // setter
+  function setRepo(repo: Repo) {
-    setRepo(repo: Repo) {
+    repos.set(repoSlug(repo), repo);
-      this.repos[repoSlug(repo)] = repo;
+  }
-    },
 
-    // loading
+  async function loadRepo(owner: string, name: string) {
-    async loadRepo(owner: string, name: string) {
+    const repo = await apiClient.getRepo(owner, name);
-      const repo = await apiClient.getRepo(owner, name);
+    repos.set(repoSlug(repo), repo);
-      this.repos[repoSlug(repo)] = repo;
+    return repo;
-      return repo;
+  }
-    },
+
-    async loadRepos() {
+  async function loadRepos() {
-      const repos = await apiClient.getRepoList();
+    const _ownedRepos = await apiClient.getRepoList();
-      repos.forEach((repo) => {
+    _ownedRepos.forEach((repo) => {
-        this.repos[repoSlug(repo.owner, repo.name)] = repo;
+      repos.set(repoSlug(repo), repo);
-      });
+    });
-    },
+    ownedRepoSlugs.value = _ownedRepos.map((repo) => repoSlug(repo));
-  },
+  }
+
+  return {
+    repos,
+    ownedRepos,
+    ownedRepoSlugs,
+    getRepo,
+    setRepo,
+    loadRepo,
+    loadRepos,
+  };
 });

web/src/views/Repos.vue

@@ -20,36 +20,22 @@
   </Scaffold>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, onMounted, ref } from 'vue';
+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 { useRepoSearch } from '~/compositions/useRepoSearch';
-import RepoStore from '~/store/repos';
+import { useRepoStore } from '~/store/repos';
 
-export default defineComponent({
+const repoStore = useRepoStore();
-  name: 'Repos',
+const repos = computed(() => Object.values(repoStore.ownedRepos));
+const search = ref('');
 
-  components: {
+const { searchedRepos } = useRepoSearch(repos, search);
-    Button,
-    ListItem,
-    Scaffold,
-  },
 
-  setup() {
+onMounted(async () => {
-    const repoStore = RepoStore();
+  await repoStore.loadRepos();
-    const repos = computed(() => Object.values(repoStore.repos));
-    const search = ref('');
-
-    const { searchedRepos } = useRepoSearch(repos, search);
-
-    onMounted(async () => {
-      await repoStore.loadRepos();
-    });
-
-    return { searchedRepos, search };
-  },
 });
 </script>

web/src/views/ReposOwner.vue

@@ -37,7 +37,7 @@ import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
 import { OrgPermissions } from '~/lib/api/types';
-import RepoStore from '~/store/repos';
+import { useRepoStore } from '~/store/repos';
 
 export default defineComponent({
   name: 'ReposOwner',
@@ -57,9 +57,9 @@ export default defineComponent({
 
   setup(props) {
     const apiClient = useApiClient();
-    const repoStore = RepoStore();
+    const repoStore = useRepoStore();
     // TODO: filter server side
-    const repos = computed(() => Object.values(repoStore.repos).filter((v) => v.owner === props.repoOwner));
+    const repos = computed(() => Array.from(repoStore.repos.values()).filter((repo) => repo.owner === props.repoOwner));
     const search = ref('');
     const orgPermissions = ref<OrgPermissions>({ member: false, admin: false });
 

web/src/views/repo/RepoWrapper.vue

@@ -64,8 +64,8 @@ import useAuthentication from '~/compositions/useAuthentication';
 import useConfig from '~/compositions/useConfig';
 import useNotifications from '~/compositions/useNotifications';
 import { RepoPermissions } from '~/lib/api/types';
-import PipelineStore from '~/store/pipelines';
+import { usePipelineStore } from '~/store/pipelines';
-import RepoStore from '~/store/repos';
+import { useRepoStore } from '~/store/repos';
 
 const props = defineProps({
   repoOwner: {
@@ -81,8 +81,8 @@ const props = defineProps({
 
 const repoOwner = toRef(props, 'repoOwner');
 const repoName = toRef(props, 'repoName');
-const repoStore = RepoStore();
+const repoStore = useRepoStore();
-const pipelineStore = PipelineStore();
+const pipelineStore = usePipelineStore();
 const apiClient = useApiClient();
 const notifications = useNotifications();
 const { isAuthenticated } = useAuthentication();
@@ -93,7 +93,7 @@ const i18n = useI18n();
 const { forge } = useConfig();
 const repo = repoStore.getRepo(repoOwner, repoName);
 const repoPermissions = ref<RepoPermissions>();
-const pipelines = pipelineStore.getSortedPipelines(repoOwner, repoName);
+const pipelines = pipelineStore.getRepoPipelines(repoOwner, repoName);
 provide('repo', repo);
 provide('repo-permissions', repoPermissions);
 provide('pipelines', pipelines);
@@ -121,7 +121,7 @@ async function loadRepo() {
     });
     return;
   }
-  await pipelineStore.loadPipelines(repoOwner.value, repoName.value);
+  await pipelineStore.loadRepoPipelines(repoOwner.value, repoName.value);
 }
 
 onMounted(() => {
@@ -132,7 +132,7 @@ watch([repoOwner, repoName], () => {
   loadRepo();
 });
 
-const badgeUrl = computed(() => `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`);
+const badgeUrl = computed(() => repo.value && `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`);
 
 const activeTab = computed({
   get() {

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -92,7 +92,7 @@ import useNotifications from '~/compositions/useNotifications';
 import usePipeline from '~/compositions/usePipeline';
 import { useRouteBackOrDefault } from '~/compositions/useRouteBackOrDefault';
 import { Repo, RepoPermissions } from '~/lib/api/types';
-import PipelineStore from '~/store/pipelines';
+import { usePipelineStore } from '~/store/pipelines';
 
 export default defineComponent({
   name: 'PipelineWrapper',
@@ -130,7 +130,7 @@ export default defineComponent({
     const favicon = useFavicon();
     const i18n = useI18n();
 
-    const pipelineStore = PipelineStore();
+    const pipelineStore = usePipelineStore();
     const pipelineId = toRef(props, 'pipelineId');
     const repoOwner = toRef(props, 'repoOwner');
     const repoName = toRef(props, 'repoName');
@@ -155,7 +155,7 @@ export default defineComponent({
 
       await pipelineStore.loadPipeline(repo.value.owner, repo.value.name, parseInt(pipelineId.value, 10));
 
-      favicon.updateStatus(pipeline.value.status);
+      favicon.updateStatus(pipeline.value?.status);
     }
 
     const { doSubmit: cancelPipeline, isLoading: isCancelingPipeline } = useAsyncAction(async () => {
@@ -163,7 +163,7 @@ export default defineComponent({
         throw new Error('Unexpected: Repo is undefined');
       }
 
-      if (!pipeline.value.steps) {
+      if (!pipeline.value?.steps) {
         throw new Error('Unexpected: Pipeline steps not loaded');
       }