lfx-v2-ui/apps/lfx-one/src/app/layouts/dev-toolbar/dev-toolbar.component.html at bb46c166cb70d950eed79f8669d3965049ed637a · 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
86
87
88
89
90
91
92
93
94
95
<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

@if (showDevToolbar()) {
  <div class="fixed top-0 left-0 right-0 z-[100] bg-gray-900 text-white px-4 py-2" data-testid="dev-tools-bar">
    <div class="flex items-center gap-4 max-w-full">
      <!-- Persona Selector (left side) -->
      <div class="flex items-center gap-2" data-testid="dev-tools-bar-persona">
        <lfx-select-button
          [form]="form"
          control="persona"
          [options]="personaOptions"
          optionLabel="label"
          optionValue="value"
          size="small"
          styleClass="dev-tools-select-button"
          data-testid="dev-tools-bar-persona-selector">
        </lfx-select-button>
      </div>

      <!-- Board Member Project Override -->
      @if (isBoardMember()) {
        <div class="flex items-center gap-2" data-testid="dev-tools-bar-project-override">
          <label for="project-override-select" class="text-sm">Project:</label>
          <lfx-select
            [form]="form"
            control="selectedProjectUid"
            [options]="projectContextService.availableProjects"
            optionLabel="name"
            optionValue="uid"
            [filter]="true"
            filterPlaceholder="Search projects..."
            placeholder="Select a project"
            [showClear]="false"
            styleClass="min-w-[250px] dev-tools-select"
            inputId="project-override-select"
            data-testid="dev-tools-bar-project-override-select" />
        </div>
      }

      <!-- Org User Type Selector (visible in org lens) -->
      @if (showOrgUserTypeSelector()) {
        <div class="flex items-center gap-2" data-testid="dev-tools-bar-org-user-type">
          <label for="org-user-type-select" class="text-sm">User Type:</label>
          <lfx-select
            [form]="form"
            control="orgUserType"
            [options]="orgUserTypeOptions"
            optionLabel="label"
            optionValue="value"
            [filter]="false"
            placeholder="Select user type"
            [showClear]="false"
            styleClass="min-w-[200px] dev-tools-select"
            inputId="org-user-type-select"
            data-testid="dev-tools-bar-org-user-type-select" />
        </div>
      }

      <!-- Organization Selector (visible in org lens or board dashboard) -->
      @if (showOrgSelector()) {
        <div class="flex items-center gap-2" data-testid="dev-tools-bar-organization">
          <label for="organization-select" class="text-sm">Organization:</label>
          <lfx-select
            [form]="form"
            control="selectedAccountId"
            [options]="availableAccounts"
            optionLabel="accountName"
            optionValue="accountId"
            [filter]="true"
            filterPlaceholder="Search organizations..."
            placeholder="Select an organization"
            [showClear]="false"
            styleClass="min-w-[250px] dev-tools-select"
            inputId="organization-select"
            data-testid="dev-tools-bar-organization-select" />
        </div>
      }

      <!-- Spacer -->
      <div class="flex-1"></div>

      <lfx-button
        icon="fa-solid fa-trash-can"
        label="Clear Cache"
        severity="secondary"
        size="small"
        [text]="true"
        styleClass="!text-gray-300 hover:!text-white hover:!bg-gray-800"
        (onClick)="clearCache()"
        data-testid="dev-tools-bar-clear-cache">
      </lfx-button>
    </div>
  </div>
}