Skip to content

Commit

Permalink
Revert pipeline list UI change (#3926)
Browse files Browse the repository at this point in the history
  • Loading branch information
@qwerty287
qwerty287 authored Jul 18, 2024
1 parent 49c2029 commit 1677385
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 61 deletions.
16 changes: 4 additions & 12 deletions web/src/assets/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,9 @@
"errors": "Errors ({count})",
"warnings": "Warnings ({count})",
"show_errors": "Show errors",
"we_got_some_errors": "Oh no, we got some errors!"
"we_got_some_errors": "Oh no, we got some errors!",
"duration": "Pipeline duration",
"created": "Created: {created}"
}
},
"org": {
Expand Down Expand Up @@ -467,15 +469,5 @@
"internal_error": "Some internal error occurred",
"registration_closed": "The registration is closed",
"access_denied": "You are not allowed to access this instance",
"invalid_state": "The OAuth state is invalid",
"by_user": "by {user}",
"pushed_to": "pushed to",
"closed": "closed",
"deployed_to": "deployed to",
"created": "created",
"triggered": "triggered",
"pipeline_duration": "Pipeline duration",
"pipeline_since": "Pipeline was created {created} minutes ago",
"pipeline_has_warnings": "The pipeline has warnings",
"pipeline_has_errors": "The pipeline has errors"
"invalid_state": "The OAuth state is invalid"
}
86 changes: 37 additions & 49 deletions web/src/components/repo/pipeline/PipelineItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<ListItem v-if="pipeline" class="p-0 w-full">
<div class="flex w-6 items-center md:mr-4">
<div class="flex w-11 items-center md:mr-4">
<div
class="h-full w-2 flex-shrink-0"
class="h-full w-3"
:class="{
'bg-wp-state-warn-100': pipeline.status === 'pending',
'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
Expand All @@ -11,67 +11,60 @@
'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
}"
/>
<div class="w-6 flex flex-wrap justify-between items-center h-full">
<div class="w-8 flex flex-wrap justify-between items-center h-full">
<PipelineRunningIcon v-if="pipeline.status === 'started' || pipeline.status === 'running'" />
<PipelineStatusIcon v-else class="mx-2 md:mx-3" :status="pipeline.status" />
</div>
</div>

<div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap gap-2">
<div class="flex flex-col min-w-0 justify-center gap-2">
<span class="text-wp-text-100 text-lg whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">
<div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
<div class="<md:hidden flex items-center flex-shrink-0">
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
<img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
</div>

<div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
<span
class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis"
:title="message"
>
{{ shortMessage }}
</span>
</div>

<div class="flex <md:flex-wrap gap-1 text-wp-text-alt-100">
<div class="flex items-center" :title="pipelineEventTitle">
<div
class="grid grid-rows-2 grid-cols-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
>
<div class="flex space-x-2 items-center min-w-0">
<span :title="pipelineEventTitle">
<Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
<Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
<Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
<Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
<Icon v-else-if="pipeline.event === 'cron'" name="push" />
<Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
<Icon v-else name="push" />
</div>

<a :href="pipeline.forge_url" target="_blank" class="underline" :title="pipeline.commit">
<Badge :label="pipeline.commit.slice(0, 7)" />
</a>

<span v-if="pipeline.event === 'pull_request' || pipeline.event === 'push'">{{ $t('pushed_to') }}</span>
<span v-if="pipeline.event === 'pull_request_closed'">{{ $t('closed') }}</span>
<span v-if="pipeline.event === 'deployment'">{{ $t('deployed_to') }}</span>
<span v-if="pipeline.event === 'tag' || pipeline.event === 'release'">{{ $t('created') }}</span>
<span v-if="pipeline.event === 'cron' || pipeline.event === 'manual'">{{ $t('triggered') }}</span>
<span v-else>{{ $t('triggered') }}</span>
<Badge
v-if="prettyRef"
:title="prTitleWithDescription"
:label="prTitle ? `${prettyRef} (${truncate(prTitle, 30)})` : prettyRef"
/>
<span class="truncate">{{ $t('by_user', { user: pipeline.author }) }}</span>
</span>
<span class="truncate">{{ prettyRef }}</span>
</div>
</div>

<div class="flex min-w-0 <md:w-full gap-2 justify-between items-center md:ml-auto relative">
<div class="flex flex-col gap-2 text-wp-text-alt-100">
<div class="flex gap-2 items-center min-w-0" :title="$t('pipeline_duration')">
<Icon name="duration" />
<span class="truncate">{{ duration }}</span>
</div>

<div class="flex gap-2 items-center min-w-0" :title="$t('pipeline_since', { created })">
<Icon name="since" />
<span>{{ since }}</span>
</div>
<div class="flex space-x-2 items-center min-w-0">
<Icon name="commit" />
<span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
</div>

<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
<img v-else class="rounded-md w-8 flex-shrink-0" :src="pipeline.author_avatar" :title="pipeline.author" />
<div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.duration')">
<Icon name="duration" />
<span class="truncate">{{ duration }}</span>
</div>

<div v-if="pipeline.errors" class="flex items-center absolute -top-1 -right-2">
<Icon v-if="hasErrors" name="attention" class="text-wp-state-error-100" :title="$t('pipeline_has_errors')" />
<Icon v-else name="warning" class="text-wp-state-warn-100" :title="$t('pipeline_has_warnings')" />
<div class="flex space-x-2 items-center min-w-0" :title="$t('repo.pipeline.created', { created })">
<Icon name="since" />
<span>{{ since }}</span>
</div>
</div>
</div>
Expand All @@ -82,15 +75,13 @@
import { computed, toRef } from 'vue';
import { useI18n } from 'vue-i18n';
import Badge from '~/components/atomic/Badge.vue';
import Icon from '~/components/atomic/Icon.vue';
import ListItem from '~/components/atomic/ListItem.vue';
import { pipelineStatusColors } from '~/components/repo/pipeline/pipeline-status';
import PipelineRunningIcon from '~/components/repo/pipeline/PipelineRunningIcon.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import usePipeline from '~/compositions/usePipeline';
import type { Pipeline } from '~/lib/api/types';
import { truncate } from '~/utils/locale';
const props = defineProps<{
pipeline: Pipeline;
Expand All @@ -99,10 +90,7 @@ const props = defineProps<{
const { t } = useI18n();
const pipeline = toRef(props, 'pipeline');
const { since, duration, message, shortMessage, prTitle, prTitleWithDescription, prettyRef, created } =
usePipeline(pipeline);
const hasErrors = computed(() => pipeline.value.errors?.some((e) => !e.is_warning));
const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
const pipelineEventTitle = computed(() => {
switch (pipeline.value.event) {
Expand Down

0 comments on commit 1677385

Please sign in to comment.