Only show commit title (#2361)

https://github.com/woodpecker-ci/woodpecker/issues/2359

web/src/components/pipeline-feed/PipelineFeedItem.vue

@@ -3,7 +3,7 @@
     <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
     <div class="flex flex-col ml-4 min-w-0">
       <span class="underline">{{ repo?.owner }} / {{ repo?.name }}</span>
-      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
+      <span class="whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">{{ title }}</span>
       <div class="flex flex-col mt-2">
         <div class="flex space-x-2 items-center" :title="created">
           <Icon name="since" />
@@ -36,5 +36,5 @@ const repoStore = useRepoStore();
 const pipeline = toRef(props, 'pipeline');
 const repo = repoStore.getRepo(computed(() => pipeline.value.repo_id));
 
-const { since, duration, message, created } = usePipeline(pipeline);
+const { since, duration, message, title, created } = usePipeline(pipeline);
 </script>

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

@@ -26,9 +26,11 @@
       <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
         <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
         <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">{{
-          message
-        }}</span>
+        <span
+          class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis"
+          :title="message"
+          >{{ title }}</span
+        >
       </div>
 
       <div
@@ -79,5 +81,5 @@ const props = defineProps<{
 }>();
 
 const pipeline = toRef(props, 'pipeline');
-const { since, duration, message, prettyRef, created } = usePipeline(pipeline);
+const { since, duration, message, title, prettyRef, created } = usePipeline(pipeline);
 </script>

web/src/compositions/usePipeline.ts

@@ -84,6 +84,8 @@ export default (pipeline: Ref<Pipeline | undefined>) => {
     return convertEmojis(pipeline.value.message);
   });
 
+  const title = computed(() => message.value.split('\n')[0]);
+
   const prettyRef = computed(() => {
     if (pipeline.value?.event === 'push') {
       return pipeline.value.branch;
@@ -118,5 +120,5 @@ export default (pipeline: Ref<Pipeline | undefined>) => {
     return toLocaleString(new Date(start * 1000));
   });
 
-  return { since, duration, message, prettyRef, created };
+  return { since, duration, message, title, prettyRef, created };
 };

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

@@ -16,7 +16,9 @@
             <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>
-            <span class="min-w-0 whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
+            <span class="min-w-0 whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">{{
+              title
+            }}</span>
           </div>
 
           <template v-if="repoPermissions.push">
@@ -122,11 +124,9 @@ if (!repo || !repoPermissions) {
 }
 
 const pipeline = pipelineStore.getPipeline(repositoryId, pipelineId);
-const { since, duration, created } = usePipeline(pipeline);
+const { since, duration, created, message, title } = usePipeline(pipeline);
 provide('pipeline', pipeline);
 
-const { message } = usePipeline(pipeline);
-
 const showDeployPipelinePopup = ref(false);
 
 async function loadPipeline(): Promise<void> {