Backport JS dependency updates (#4189)

web/src/App.vue

@@ -31,7 +31,7 @@ const apiClient = useApiClient();
 const { notify } = useNotifications();
 const i18n = useI18n();
 
-// TODO reenable with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+// eslint-disable-next-line promise/prefer-await-to-callbacks
 apiClient.setErrorHandler((err) => {
   if (err.status === 404) {
     notify({ title: i18n.t('errors.not_found'), type: 'error' });

web/src/components/atomic/SyntaxHighlight.ts

@@ -1,8 +1,8 @@
-import '~/style/prism.css';
-
 import Prism from 'prismjs';
 import { computed, defineComponent, h, toRef, type VNode } from 'vue';
 
+import '~/style/prism.css';
+
 declare type Data = Record<string, unknown>;
 
 export default defineComponent({

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

@@ -106,8 +106,6 @@
 </template>
 
 <script lang="ts" setup>
-import '~/style/console.css';
-
 import { useStorage } from '@vueuse/core';
 import { AnsiUp } from 'ansi_up';
 import { decode } from 'js-base64';
@@ -123,6 +121,8 @@ import useNotifications from '~/compositions/useNotifications';
 import type { Pipeline, Repo, RepoPermissions } from '~/lib/api/types';
 import { findStep, isStepFinished, isStepRunning } from '~/utils/helpers';
 
+import '~/style/console.css';
+
 interface LogLine {
   index: number;
   number: number;

web/src/compositions/useDate.ts

@@ -12,19 +12,24 @@ dayjs.extend(advancedFormat);
 dayjs.extend(relativeTime);
 dayjs.extend(duration);
 
+function toLocaleString(date: Date) {
+  return dayjs(date).format(useI18n().t('time.template'));
+}
+
+function timeAgo(date: Date | string | number) {
+  return dayjs().to(dayjs(date));
+}
+
+function prettyDuration(durationMs: number) {
+  return dayjs.duration(durationMs).humanize();
+}
+
+function durationAsNumber(durationMs: number): string {
+  const dur = dayjs.duration(durationMs);
+  return dur.format(dur.hours() > 1 ? 'HH:mm:ss' : 'mm:ss');
+}
+
 export function useDate() {
-  function toLocaleString(date: Date) {
-    return dayjs(date).format(useI18n().t('time.template'));
-  }
-
-  function timeAgo(date: Date | string | number) {
-    return dayjs().to(dayjs(date));
-  }
-
-  function prettyDuration(durationMs: number) {
-    return dayjs.duration(durationMs).humanize();
-  }
-
   const addedLocales = ['en'];
 
   async function setDayjsLocale(locale: string) {
@@ -36,11 +41,6 @@ export function useDate() {
     }
   }
 
-  function durationAsNumber(durationMs: number): string {
-    const dur = dayjs.duration(durationMs);
-    return dur.format(dur.hours() > 1 ? 'HH:mm:ss' : 'mm:ss');
-  }
-
   return {
     toLocaleString,
     timeAgo,

web/src/compositions/useInjectProvide.ts

@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue';
 import { inject as vueInject, provide as vueProvide } from 'vue';
+import type { InjectionKey, Ref } from 'vue';
 
 import type { Org, OrgPermissions, Repo } from '~/lib/api/types';
 

web/src/compositions/usePaginate.test.ts

@@ -18,11 +18,11 @@ async function waitForState<T>(ref: Ref<T>, expected: T): Promise<void> {
   });
 }
 
-// TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+// eslint-disable-next-line promise/prefer-await-to-callbacks
 export const mountComposition = (cb: () => void) => {
   const wrapper = shallowMount({
     setup() {
-      // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
       cb();
       return {};
     },
@@ -48,6 +48,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -63,6 +64,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -86,7 +88,7 @@ describe('usePaginate', () => {
           return orgSecrets[page - 1];
         },
         () => true,
-        { each: ['repo', 'org'] },
+        { each: ['repo', 'org'], pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -111,6 +113,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);
@@ -132,6 +135,7 @@ describe('usePaginate', () => {
       usePaginationComposition = usePagination<{ name: string }>(
         async (page) => repoSecrets[page - 1],
         () => true,
+        { pageSize: 3 },
       );
     });
     await waitForState(usePaginationComposition.loading, true);

web/src/compositions/usePipelineFeed.ts

@@ -7,20 +7,20 @@ import useAuthentication from './useAuthentication';
 
 const userConfig = useUserConfig();
 
+function toggle() {
+  userConfig.setUserConfig('isPipelineFeedOpen', !userConfig.userConfig.value.isPipelineFeedOpen);
+}
+
+function close() {
+  userConfig.setUserConfig('isPipelineFeedOpen', false);
+}
+
 export default () => {
   const pipelineStore = usePipelineStore();
   const { isAuthenticated } = useAuthentication();
 
   const isOpen = computed(() => userConfig.userConfig.value.isPipelineFeedOpen && !!isAuthenticated);
 
-  function toggle() {
-    userConfig.setUserConfig('isPipelineFeedOpen', !userConfig.userConfig.value.isPipelineFeedOpen);
-  }
-
-  function close() {
-    userConfig.setUserConfig('isPipelineFeedOpen', false);
-  }
-
   const sortedPipelines = toRef(pipelineStore, 'pipelineFeed');
   const activePipelines = toRef(pipelineStore, 'activePipelines');
 

web/src/lib/api/client.ts

@@ -52,14 +52,19 @@ export default class ApiClient {
     });
 
     if (!res.ok) {
+      let message = res.statusText;
+      const resText = await res.text();
+      if (resText) {
+        message = `${res.statusText}: ${resText}`;
+      }
       const error: ApiError = {
         status: res.status,
-        message: res.statusText,
+        message,
       };
       if (this.onerror) {
         this.onerror(error);
       }
-      throw new Error(res.statusText);
+      throw new Error(message);
     }
 
     const contentType = res.headers.get('Content-Type');
@@ -96,7 +101,7 @@ export default class ApiClient {
     const events = new EventSource(_path);
     events.onmessage = (event) => {
       const data = JSON.parse(event.data as string) as T;
-      // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
       callback(data);
     };
 

web/src/lib/api/index.ts

@@ -398,7 +398,7 @@ export default class WoodpeckerClient extends ApiClient {
     return this._post(`/api/repos/repair`);
   }
 
-  // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+  // eslint-disable-next-line promise/prefer-await-to-callbacks
   on(callback: (data: { pipeline?: Pipeline; repo?: Repo }) => void): EventSource {
     return this._subscribe('/api/stream/events', callback, {
       reconnect: true,
@@ -409,7 +409,7 @@ export default class WoodpeckerClient extends ApiClient {
     repoId: number,
     pipeline: number,
     step: number,
-    // TODO enable again with eslint-plugin-promise eslint-disable-next-line promise/prefer-await-to-callbacks
+    // eslint-disable-next-line promise/prefer-await-to-callbacks
     callback: (data: PipelineLog) => void,
   ): EventSource {
     return this._subscribe(`/api/stream/logs/${repoId}/${pipeline}/${step}`, callback, {

web/src/main.ts

@@ -1,7 +1,3 @@
-import 'windi.css';
-import '~/compositions/useFavicon';
-import '~/style.css';
-
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 
@@ -11,6 +7,10 @@ import { i18n } from '~/compositions/useI18n';
 import { notifications } from '~/compositions/useNotifications';
 import router from '~/router';
 
+import '~/compositions/useFavicon';
+import '~/style.css';
+import 'windi.css';
+
 // eslint-disable-next-line ts/no-unsafe-argument
 const app = createApp(App);
 

web/src/router.ts

@@ -107,7 +107,7 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: ':repoOwner/:repoName/:pathMatch(.*)*',
-        component: async () => import('~/views/repo/RepoDeprecatedRedirect.vue'),
+        component: (): Component => import('~/views/repo/RepoDeprecatedRedirect.vue'),
         props: true,
       },
     ],
@@ -161,7 +161,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: `${rootPath}/cli/auth`,
-    component: async () => import('~/views/cli/Auth.vue'),
+    component: (): Component => import('~/views/cli/Auth.vue'),
     meta: { authentication: 'required' },
   },
 
@@ -172,7 +172,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: `${rootPath}/:repoOwner/:repoName/:pathMatch(.*)*`,
-    component: async () => import('~/views/repo/RepoDeprecatedRedirect.vue'),
+    component: (): Component => import('~/views/repo/RepoDeprecatedRedirect.vue'),
     props: true,
   },
 

web/src/views/org/OrgWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <Scaffold v-if="org && orgPermissions && $route.meta.orgHeader">
+  <Scaffold v-if="org && orgPermissions && route.meta.orgHeader">
     <template #title>
       {{ org.name }}
     </template>
@@ -20,6 +20,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 
 import IconButton from '~/components/atomic/IconButton.vue';
 import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
@@ -33,6 +34,7 @@ const props = defineProps<{
 
 const orgId = computed(() => Number.parseInt(props.orgId, 10));
 const apiClient = useApiClient();
+const route = useRoute();
 
 const org = ref<Org>();
 const orgPermissions = ref<OrgPermissions>();

web/src/views/repo/RepoWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <Scaffold
-    v-if="repo && repoPermissions && $route.meta.repoHeader"
-    v-model:activeTab="activeTab"
+    v-if="repo && repoPermissions && route.meta.repoHeader"
+    v-model:active-tab="activeTab"
     enable-tabs
     disable-tab-url-hash-mode
   >

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

@@ -1,7 +1,7 @@
 <template>
   <Scaffold
     v-if="pipeline && repo"
-    v-model:activeTab="activeTab"
+    v-model:active-tab="activeTab"
     enable-tabs
     disable-tab-url-hash-mode
     :go-back="goBack"