Merge branch 'main' into renovate/easyops-cn-docusaurus-search-local-0.x

web/components.d.ts

@@ -83,6 +83,7 @@ declare module '@vue/runtime-core' {
  Panel: typeof import('./src/components/layout/Panel.vue')['default']
  PipelineFeedItem: typeof import('./src/components/pipeline-feed/PipelineFeedItem.vue')['default']
  PipelineFeedSidebar: typeof import('./src/components/pipeline-feed/PipelineFeedSidebar.vue')['default']
+ PipelineInfo: typeof import('./src/components/repo/pipeline/PipelineInfo.vue')['default']
  PipelineItem: typeof import('./src/components/repo/pipeline/PipelineItem.vue')['default']
  PipelineList: typeof import('./src/components/repo/pipeline/PipelineList.vue')['default']
  PipelineLog: typeof import('./src/components/repo/pipeline/PipelineLog.vue')['default']

web/src/assets/locales/en.json

@@ -255,7 +255,8 @@
  "log_auto_scroll_off": "Turn off automatic scrolling"
  },
  "protected": {
- "awaits": "This pipeline is awaiting approval by some maintainer!",
+ "review": "Review changes",
+ "awaits": "This pipeline is awaiting approval by a maintainer!",
  "approve": "Approve",
  "decline": "Decline",
  "declined": "This pipeline has been declined!",

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

@@ -0,0 +1,9 @@
+<template>
+ <div class="w-full md:px-4 text-wp-text-100">
+ <div
+ class="flex flex-col px-4 py-8 gap-4 justify-center items-center text-center flex-shrink-0 rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
+ >
+ <slot />
+ </div>
+ </div>
+</template>

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

@@ -9,15 +9,26 @@
  />
 
  <div class="flex flex-grow relative">
- <div v-if="error" class="flex flex-col p-4">
- <span class="text-wp-state-error-100 font-bold text-xl mb-2">{{ $t('repo.pipeline.execution_error') }}</span>
- <span class="text-wp-state-error-100">{{ error }}</span>
- </div>
-
- <div v-else-if="pipeline.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center p-2">
- <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
- <p class="text-xl text-wp-text-100 mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
- <div v-if="repoPermissions.push" class="flex space-x-4">
+ <PipelineInfo v-if="error">
+ <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" />
+ <div class="flex flex-wrap items-center justify-center gap-2 text-xl">
+ <span class="capitalize">{{ $t('repo.pipeline.execution_error') }}:</span>
+ <span>{{ error }}</span>
+ </div>
+ </PipelineInfo>
+
+ <PipelineInfo v-else-if="pipeline.status === 'blocked'">
+ <Icon name="status-blocked" class="w-16 h-16" />
+ <span class="text-xl">{{ $t('repo.pipeline.protected.awaits') }}</span>
+ <div v-if="repoPermissions.push" class="flex gap-2 flex-wrap items-center justify-center">
+ <Button
+ color="blue"
+ :start-icon="forge ?? 'repo'"
+ :text="$t('repo.pipeline.protected.review')"
+ :is-loading="isApprovingPipeline"
+ :to="pipeline.link_url"
+ :title="message"
+ />
  <Button
  color="green"
  :text="$t('repo.pipeline.protected.approve')"
@@ -31,12 +42,12 @@
  @click="declinePipeline"
  />
  </div>
- </div>
+ </PipelineInfo>
 
- <div v-else-if="pipeline.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
- <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
- <p class="text-xl text-wp-text-100">{{ $t('repo.pipeline.protected.declined') }}</p>
- </div>
+ <PipelineInfo v-else-if="pipeline.status === 'declined'">
+ <Icon name="status-blocked" class="w-16 h-16" />
+ <p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
+ </PipelineInfo>
 
  <PipelineLog
  v-else-if="selectedStepId"
@@ -61,7 +72,9 @@ import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
 import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
 import useApiClient from '~/compositions/useApiClient';
 import { useAsyncAction } from '~/compositions/useAsyncAction';
+import useConfig from '~/compositions/useConfig';
 import useNotifications from '~/compositions/useNotifications';
+import usePipeline from '~/compositions/usePipeline';
 import { Pipeline, PipelineStep, Repo, RepoPermissions } from '~/lib/api/types';
 import { findStep } from '~/utils/helpers';
 
@@ -125,6 +138,9 @@ const selectedStepId = computed({
  },
 });
 
+const { forge } = useConfig();
+const { message } = usePipeline(pipeline);
+
 const selectedStep = computed(() => findStep(pipeline.value.workflows || [], selectedStepId.value || -1));
 const error = computed(() => pipeline.value?.error || selectedStep.value?.error);
 

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

@@ -11,8 +11,8 @@
  <template #title>{{ repo.full_name }}</template>
 
  <template #titleActions>
- <div class="flex md:items-center flex-col gap-x-2 md:flex-row md:justify-between min-w-0">
- <div class="flex content-start gap-x-2 py-2 md:mr-2 min-w-0">
+ <div class="flex md:items-center flex-col gap-2 md:flex-row md:justify-between min-w-0">
+ <div class="flex content-start gap-2 min-w-0">
  <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
  <span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
  <span class="hidden md:inline-block">-</span>
@@ -21,7 +21,7 @@
  }}</span>
  </div>
 
- <template v-if="repoPermissions.push">
+ <template v-if="repoPermissions.push && pipeline.status !== 'declined' && pipeline.status !== 'blocked'">
  <div class="flex content-start gap-x-2">
  <Button
  v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
@@ -31,7 +31,6 @@
  @click="cancelPipeline"
  />
  <Button
- v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
  class="flex-shrink-0"
  :text="$t('repo.pipeline.actions.restart')"
  :is-loading="isRestartingPipeline"