create open gitlab icon component

src/app/groups/group-tabs/feature-tabs/components/download-artifacts-icon/download-artifacts-icon.component.html

@@ -13,19 +13,19 @@
 <nz-dropdown-menu #menu>
   <ul nz-menu>
     @for (job of jobs(); track job.id) {
-    <li nz-menu-item>
-      <button
-        [nzLoading]="loading()"
-        (click)="download(job)"
-        [style.color]="job.status | statusColor"
-        nz-button
-        nzType="link"
-        nzSize="small"
-      >
-        <nz-icon nzType="download" />
-        {{ job.name }}
-      </button>
-    </li>
+      <li nz-menu-item>
+        <button
+          [nzLoading]="loading()"
+          (click)="download(job)"
+          [style.color]="job.status | statusColor"
+          nz-button
+          nzType="link"
+          nzSize="small"
+        >
+          <nz-icon nzType="download" />
+          {{ job.name }}
+        </button>
+      </li>
     }
   </ul>
 </nz-dropdown-menu>

src/app/groups/group-tabs/feature-tabs/components/download-artifacts-icon/download-artifacts-icon.component.ts

@@ -9,22 +9,13 @@ import FileSaver from 'file-saver'
 import { NzButtonModule } from 'ng-zorro-antd/button'
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown'
 import { NzIconModule } from 'ng-zorro-antd/icon'
-import { NzSpaceModule } from 'ng-zorro-antd/space'
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
 import { combineLatest, switchMap } from 'rxjs'
 import { StatusColorPipe } from '../../pipes/status-color.pipe'
 
 @Component({
   selector: 'gcd-download-artifacts-icon',
-  imports: [
-    CommonModule,
-    NzSpaceModule,
-    NzButtonModule,
-    NzIconModule,
-    NzDropDownModule,
-    NzToolTipModule,
-    StatusColorPipe
-  ],
+  imports: [CommonModule, NzButtonModule, NzIconModule, NzDropDownModule, NzToolTipModule, StatusColorPipe],
   templateUrl: './download-artifacts-icon.component.html',
   styleUrls: ['./download-artifacts-icon.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/groups/group-tabs/feature-tabs/components/open-gitlab-icon/open-gitlab-icon.component.html

@@ -0,0 +1,3 @@
+<button (click)="onClick($event)" nz-tooltip nzTooltipTitle="Open in Gitlab" nz-button>
+  <span nz-icon nzType="gitlab"></span>
+</button>

src/app/groups/group-tabs/feature-tabs/components/open-gitlab-icon/open-gitlab-icon.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+import { NzIconModule } from 'ng-zorro-antd/icon'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
+
+@Component({
+  selector: 'gcd-open-gitlab-icon',
+  imports: [CommonModule, NzButtonModule, NzIconModule, NzToolTipModule],
+  templateUrl: './open-gitlab-icon.component.html',
+  styleUrls: ['./open-gitlab-icon.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OpenGitlabIconComponent {
+  url = input.required<string>()
+
+  onClick(e: MouseEvent) {
+    e.stopPropagation()
+    window.open(this.url(), '_blank')
+  }
+}

src/app/groups/group-tabs/feature-tabs/components/write-actions-icon/cancel-pipeline-action/cancel-pipeline-action.component.html

@@ -17,4 +17,4 @@
 </button>
 } -->
 
-<div>Cancel pipeline</div>
+<div>Cancel pipeline</div>

src/app/groups/group-tabs/feature-tabs/components/write-actions-icon/retry-pipeline-action/retry-pipeline-action.component.html

@@ -11,4 +11,4 @@
 </button>
 } -->
 
-<div>Retry pipeline</div>
+<div>Retry pipeline</div>

src/app/groups/group-tabs/feature-tabs/components/write-actions-icon/write-actions-icon.component.ts

@@ -5,7 +5,6 @@ import { ChangeDetectionStrategy, Component, computed, HostBinding, HostListener
 import { NzButtonModule } from 'ng-zorro-antd/button'
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown'
 import { NzIconModule } from 'ng-zorro-antd/icon'
-import { NzSpaceModule } from 'ng-zorro-antd/space'
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
 import { StartPipelineActionComponent } from './start-pipeline-action/start-pipeline-action.component'
 import { PipelineId } from '$groups/model/pipeline'
@@ -16,7 +15,6 @@ import { RetryPipelineActionComponent } from './retry-pipeline-action/retry-pipe
   selector: 'gcd-write-actions-icon',
   imports: [
     CommonModule,
-    NzSpaceModule,
     NzButtonModule,
     NzIconModule,
     NzDropDownModule,

src/app/groups/group-tabs/feature-tabs/latest-pipelines/pipeline-status-tabs/pipeline-table/pipeline-table-branch/pipeline-table-branch.component.html

@@ -17,48 +17,59 @@
     <thead>
       <tr>
         @for (header of headers; track header.title) {
-        <th [nzSortFn]="header.compare" [nzShowSort]="header.sortable">
-          {{ header.title }}
-        </th>
+          <th [nzSortFn]="header.compare" [nzShowSort]="header.sortable">
+            {{ header.title }}
+          </th>
         }
         <th>Jobs</th>
         <th>Action</th>
       </tr>
     </thead>
     <tbody>
       @for (data of nzTable.data; track trackByBranchName(data)) {
-      <tr [attr.data-pipeline-id]="data.pipeline?.id">
-        <td>{{ data.branch.name }}</td>
-        <td>
-          @if (data.pipeline; as pipeline) {
-          <nz-badge [nzColor]="pipeline.status | statusColor" [nzText]="pipeline.status"></nz-badge>
-          } @else { - }
-        </td>
-        <td>{{ data.pipeline?.source || '-' }}</td>
-        <td>
-          @if (data.pipeline; as pipeline) {
-          {{ pipeline.updated_at | date : 'medium' : timeZone : locale }}
-          } @else { - }
-        </td>
-        <td>
-          @if (data.pipeline; as pipeline) {
-          <gcd-jobs [projectId]="pipeline.project_id" [pipelineId]="pipeline.id" [scope]="getScope(pipeline.status)" />
-          } @else { - }
-        </td>
-        <td>
-          @if (data.pipeline; as pipeline) { @if(showWriteActions()) {
-          <gcd-write-actions-icon
-            [projectId]="pipeline.project_id"
-            [pipelineId]="pipeline.id"
-            [branch]="data.branch.name"
-          />
-          }
-          <button (click)="onActionClick($event, pipeline)" nz-tooltip nzTooltipTitle="Open in Gitlab" nz-button>
-            <span nz-icon nzType="gitlab"></span>
-          </button>
-          } @else { - }
-        </td>
-      </tr>
+        <tr [attr.data-pipeline-id]="data.pipeline?.id">
+          <td>{{ data.branch.name }}</td>
+          <td>
+            @if (data.pipeline; as pipeline) {
+              <nz-badge [nzColor]="pipeline.status | statusColor" [nzText]="pipeline.status"></nz-badge>
+            } @else {
+              -
+            }
+          </td>
+          <td>{{ data.pipeline?.source || '-' }}</td>
+          <td>
+            @if (data.pipeline; as pipeline) {
+              {{ pipeline.updated_at | date: 'medium' : timeZone : locale }}
+            } @else {
+              -
+            }
+          </td>
+          <td>
+            @if (data.pipeline; as pipeline) {
+              <gcd-jobs
+                [projectId]="pipeline.project_id"
+                [pipelineId]="pipeline.id"
+                [scope]="getScope(pipeline.status)"
+              />
+            } @else {
+              -
+            }
+          </td>
+          <td>
+            @if (data.pipeline; as pipeline) {
+              @if (showWriteActions()) {
+                <gcd-write-actions-icon
+                  [projectId]="pipeline.project_id"
+                  [pipelineId]="pipeline.id"
+                  [branch]="data.branch.name"
+                />
+              }
+              <gcd-open-gitlab-icon [url]="pipeline.web_url" />
+            } @else {
+              -
+            }
+          </td>
+        </tr>
       }
     </tbody>
   </nz-table>

src/app/groups/group-tabs/feature-tabs/latest-pipelines/pipeline-status-tabs/pipeline-table/pipeline-table-branch/pipeline-table-branch.component.ts

@@ -1,12 +1,14 @@
 import { JobsComponent } from '$groups/group-tabs/feature-tabs/components/jobs/jobs.component'
+import { OpenGitlabIconComponent } from '$groups/group-tabs/feature-tabs/components/open-gitlab-icon/open-gitlab-icon.component'
+import { WriteActionsIconComponent } from '$groups/group-tabs/feature-tabs/components/write-actions-icon/write-actions-icon.component'
 import { StatusColorPipe } from '$groups/group-tabs/feature-tabs/pipes/status-color.pipe'
 import { BranchPipeline } from '$groups/model/branch'
-import { Pipeline } from '$groups/model/pipeline'
 import { Status } from '$groups/model/status'
 import { compareString, compareStringDate } from '$groups/util/compare'
 import { filterString } from '$groups/util/filter'
 import { statusToScope } from '$groups/util/status-scope'
 import { Header } from '$groups/util/table'
+import { ConfigService } from '$service/config.service'
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, computed, inject, input, Signal, signal } from '@angular/core'
 import { NzBadgeModule } from 'ng-zorro-antd/badge'
@@ -15,9 +17,7 @@ import { NzI18nService } from 'ng-zorro-antd/i18n'
 import { NzIconModule } from 'ng-zorro-antd/icon'
 import { NzTableModule } from 'ng-zorro-antd/table'
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
-import { WriteActionsIconComponent } from '../../../../components/write-actions-icon/write-actions-icon.component'
 import { LatestBranchFilterComponent } from './latest-branch-filter/latest-branch-filter.component'
-import { ConfigService } from '$service/config.service'
 
 const headers: Header<BranchPipeline>[] = [
   { title: 'Branch', sortable: true, compare: (a, b) => compareString(a.branch.name, b.branch.name) },
@@ -50,7 +50,8 @@ const headers: Header<BranchPipeline>[] = [
     NzButtonModule,
     NzIconModule,
     NzBadgeModule,
-    WriteActionsIconComponent
+    WriteActionsIconComponent,
+    OpenGitlabIconComponent
   ],
   templateUrl: './pipeline-table-branch.component.html',
   styleUrls: ['./pipeline-table-branch.component.scss'],
@@ -94,11 +95,6 @@ export class PipelineTableBranchComponent {
     return statusToScope(status)
   }
 
-  onActionClick(e: Event, { web_url }: Pipeline): void {
-    e.stopPropagation()
-    window.open(web_url, '_blank')
-  }
-
   trackByBranchName({ branch: { name } }: BranchPipeline): string {
     return name
   }

src/app/groups/group-tabs/feature-tabs/latest-pipelines/pipeline-status-tabs/pipeline-table/pipeline-table.component.html

@@ -2,56 +2,65 @@
   <thead>
     <tr>
       @for (header of headers; track header.title) {
-      <th [nzSortFn]="header.compare" [nzShowSort]="header.sortable">
-        {{ header.title }}
-      </th>
+        <th [nzSortFn]="header.compare" [nzShowSort]="header.sortable">
+          {{ header.title }}
+        </th>
       }
       <th>Jobs</th>
       <th>Action</th>
     </tr>
   </thead>
   <tbody>
     @for (data of nzTable.data; track trackByProjectId(data)) {
-    <tr
-      class="pointer"
-      [attr.data-project-id]="data.project.id"
-      [attr.data-pipeline-id]="data.pipeline?.id"
-      (click)="onRowClick(data.project)"
-    >
-      <td>{{ data.project.name }}</td>
-      <td>{{ data.project.default_branch }}</td>
-      <td class="lowercase">{{ data.project.topics.length ? data.project.topics.join(',') : '-' }}</td>
-      <td>{{ data.pipeline?.source || '-' }}</td>
-      <td>
-        @if (data.pipeline; as pipeline) {
-        {{ pipeline.updated_at | date : 'medium' : timeZone : locale }}
-        } @else { - }
-      </td>
-      <td>
-        @if (data.pipeline; as pipeline) {
-        <gcd-jobs [projectId]="data.project.id" [pipelineId]="pipeline.id" [scope]="scope" />
-        } @else { - }
-      </td>
-      <td>
-        @if (data.pipeline; as pipeline) { @if(showWriteActions()) {
-        <gcd-write-actions-icon [projectId]="data.project.id" [pipelineId]="pipeline.id" [branch]="pipeline.ref" />
-        }
+      <tr
+        class="pointer"
+        [attr.data-project-id]="data.project.id"
+        [attr.data-pipeline-id]="data.pipeline?.id"
+        (click)="onRowClick(data.project)"
+      >
+        <td>{{ data.project.name }}</td>
+        <td>{{ data.project.default_branch }}</td>
+        <td class="lowercase">{{ data.project.topics.length ? data.project.topics.join(',') : '-' }}</td>
+        <td>{{ data.pipeline?.source || '-' }}</td>
+        <td>
+          @if (data.pipeline; as pipeline) {
+            {{ pipeline.updated_at | date: 'medium' : timeZone : locale }}
+          } @else {
+            -
+          }
+        </td>
+        <td>
+          @if (data.pipeline; as pipeline) {
+            <gcd-jobs [projectId]="data.project.id" [pipelineId]="pipeline.id" [scope]="scope" />
+          } @else {
+            -
+          }
+        </td>
+        <td>
+          @if (data.pipeline; as pipeline) {
+            @if (showWriteActions()) {
+              <gcd-write-actions-icon
+                [projectId]="data.project.id"
+                [pipelineId]="pipeline.id"
+                [branch]="pipeline.ref"
+              />
+            }
 
-        <button (click)="onActionClick($event, pipeline)" nz-tooltip nzTooltipTitle="Open in Gitlab" nz-button>
-          <span nz-icon nzType="gitlab"></span>
-        </button>
+            <gcd-open-gitlab-icon [url]="pipeline.web_url" />
 
-        <gcd-favorites-icon [groupId]="data.group_id" [projectId]="data.project.id" />
+            <gcd-favorites-icon [groupId]="data.group_id" [projectId]="data.project.id" />
 
-        <gcd-download-artifacts-icon [projectId]="data.project.id" [pipelineId]="pipeline.id" />
-        } @else { - }
-      </td>
-    </tr>
-    <tr [nzExpand]="data.project.id === selectedProjectId()">
-      @if (data.project.id === selectedProjectId()) {
-      <gcd-pipeline-table-branch [loading]="branchesLoading()" [branchPipelines]="branchPipelines()" />
-      }
-    </tr>
+            <gcd-download-artifacts-icon [projectId]="data.project.id" [pipelineId]="pipeline.id" />
+          } @else {
+            -
+          }
+        </td>
+      </tr>
+      <tr [nzExpand]="data.project.id === selectedProjectId()">
+        @if (data.project.id === selectedProjectId()) {
+          <gcd-pipeline-table-branch [loading]="branchesLoading()" [branchPipelines]="branchPipelines()" />
+        }
+      </tr>
     }
   </tbody>
 </nz-table>