lfx-v2-ui/apps/lfx-one/src/app/modules/dashboards/components/pending-actions/pending-actions.component.html at 8193e2132fff23497a2504d5f8066255276e4fa0 · linuxfoundation/lfx-v2-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

<section class="flex flex-col flex-1" data-testid="dashboard-pending-actions-section">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4 px-2 h-8">
    <h2 class="flex items-center gap-2">
      <i class="fa-light fa-list-check text-lg"></i>
      <span>My Pending Actions</span>
    </h2>
  </div>

  <!-- Scrollable Content -->
  <div class="flex flex-col flex-1 max-h-[30rem] overflow-y-auto px-2 py-2 -mt-2">
    @if (pendingActions().length > 0) {
      <div class="flex flex-col gap-3" data-testid="dashboard-pending-actions-list">
        @for (item of pendingActions(); track $index) {
          <div
            class="p-4 space-y-3 border rounded-xl shadow-md transition-all"
            [ngClass]="{
              'bg-yellow-50 hover:border-yellow-300': item.severity === 'warn',
              'bg-blue-200 hover:border-blue-300': item.severity === 'info',
              'bg-green-200 hover:border-green-300': item.severity === 'success',
              'bg-purple-200 hover:border-purple-300': item.severity === 'secondary',
            }"
            [attr.data-testid]="'dashboard-pending-actions-item-' + item.type">
            <!-- Header with Type -->
            <div class="flex items-center gap-2 flex-wrap">
              <lfx-tag [value]="item.type" [severity]="item.severity" [icon]="item.icon" />
            </div>

            <!-- Action Text -->
            <div class="flex items-start justify-between gap-2">
              <div class="flex flex-col gap-1 truncate max-w-full">
                <h4
                  class="line-clamp-2 text-sm leading-tight font-medium text-gray-900 truncate"
                  data-testid="dashboard-pending-actions-title"
                  [pTooltip]="item.text">
                  {{ item.text }}
                </h4>
                @if (item.date) {
                  <div class="flex items-center gap-2 flex-wrap mt-0.5 h-4">
                    <span class="text-xs text-gray-600 whitespace-nowrap" data-testid="dashboard-pending-actions-date">{{ item.date }}</span>
                  </div>
                }
              </div>
            </div>

            <!-- Action Button -->
            <div class="flex gap-2">
              @if (item.buttonLink) {
                <lfx-button
                  size="small"
                  class="w-full"
                  styleClass="w-full text-sm h-8"
                  severity="secondary"
                  rel="noopener noreferrer"
                  [link]="true"
                  [href]="item.buttonLink"
                  target="_blank"
                  (onClick)="handleActionClick(item)"
                  [label]="item.buttonText">
                </lfx-button>
              } @else {
                <lfx-button
                  size="small"
                  class="w-full text-sm"
                  styleClass="w-full text-sm h-8"
                  severity="secondary"
                  (onClick)="handleActionClick(item)"
                  [label]="item.buttonText">
                </lfx-button>
              }
            </div>
          </div>
        }
      </div>
    } @else {
      <!-- Empty state - shows when no pending actions -->
      <div class="text-xs text-gray-500 py-8 text-center border-2 border-dashed border-gray-300 rounded-lg" data-testid="dashboard-pending-actions-empty">
        No pending actions
      </div>
    }
  </div>
</section>