From f6584ab8dd5f4806533be0d7b31ae81c11b56244 Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Thu, 18 May 2023 13:44:01 +0530
Subject: [PATCH] mgr/dashboard: more visibility for keys

Fixes: https://tracker.ceph.com/issues/61239
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 5ac61e925145154c6616a7630b3fc9643311ed7b)
---
 .../rgw-user-details.component.html           | 311 +++++++++---------
 .../rgw-user-details.component.spec.ts        |  27 +-
 2 files changed, 150 insertions(+), 188 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
index 992a98ac83f..27162404a62 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.html
@@ -1,162 +1,14 @@
 <ng-container *ngIf="selection">
-  <nav ngbNav
-       #nav="ngbNav"
-       class="nav-tabs"
-       cdStatefulTab="rgw-user-details">
-    <ng-container ngbNavItem="details">
-      <a ngbNavLink
-         i18n>Details</a>
-      <ng-template ngbNavContent>
-        <div *ngIf="user">
-          <table class="table table-striped table-bordered">
-            <tbody>
-              <tr>
-                <td i18n
-                    class="bold w-25">Tenant</td>
-                <td class="w-75">{{ user.tenant }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold w-25">User ID</td>
-                <td class="w-75">{{ user.user_id }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold w-25">Username</td>
-                <td class="w-75">{{ user.uid }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Full name</td>
-                <td>{{ user.display_name }}</td>
-              </tr>
-              <tr *ngIf="user.email?.length">
-                <td i18n
-                    class="bold">Email address</td>
-                <td>{{ user.email }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Suspended</td>
-                <td>{{ user.suspended | booleanText }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">System</td>
-                <td>{{ user.system === 'true' | booleanText }}</td>
-              </tr>
-              <tr>
-                <td i18n
-                    class="bold">Maximum buckets</td>
-                <td>{{ user.max_buckets | map:maxBucketsMap }}</td>
-              </tr>
-              <tr *ngIf="user.subusers && user.subusers.length">
-                <td i18n
-                    class="bold">Subusers</td>
-                <td>
-                  <div *ngFor="let subuser of user.subusers">
-                    {{ subuser.id }} ({{ subuser.permissions }})
-                  </div>
-                </td>
-              </tr>
-              <tr *ngIf="user.caps && user.caps.length">
-                <td i18n
-                    class="bold">Capabilities</td>
-                <td>
-                  <div *ngFor="let cap of user.caps">
-                    {{ cap.type }} ({{ cap.perm }})
-                  </div>
-                </td>
-              </tr>
-              <tr *ngIf="user.mfa_ids?.length">
-                <td i18n
-                    class="bold">MFAs(Id)</td>
-                <td>{{ user.mfa_ids | join}}</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <!-- User quota -->
-          <div *ngIf="user.user_quota">
-            <legend i18n>User quota</legend>
-            <table class="table table-striped table-bordered">
-              <tbody>
-                <tr>
-                  <td i18n
-                      class="bold w-25">Enabled</td>
-                  <td class="w-75">{{ user.user_quota.enabled | booleanText }}</td>
-                </tr>
-                <tr>
-                  <td i18n
-                      class="bold">Maximum size</td>
-                  <td *ngIf="!user.user_quota.enabled">-</td>
-                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_size <= -1"
-                      i18n>Unlimited</td>
-                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_size > -1">
-                    {{ user.user_quota.max_size | dimlessBinary }}
-                  </td>
-                </tr>
-                <tr>
-                  <td i18n
-                      class="bold">Maximum objects</td>
-                  <td *ngIf="!user.user_quota.enabled">-</td>
-                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects <= -1"
-                      i18n>Unlimited</td>
-                  <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects > -1">
-                    {{ user.user_quota.max_objects }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-
-          <!-- Bucket quota -->
-          <div *ngIf="user.bucket_quota">
-            <legend i18n>Bucket quota</legend>
-            <table class="table table-striped table-bordered">
-              <tbody>
-                <tr>
-                  <td i18n
-                      class="bold w-25">Enabled</td>
-                  <td class="w-75">{{ user.bucket_quota.enabled | booleanText }}</td>
-                </tr>
-                <tr>
-                  <td i18n
-                      class="bold">Maximum size</td>
-                  <td *ngIf="!user.bucket_quota.enabled">-</td>
-                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size <= -1"
-                      i18n>Unlimited</td>
-                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size > -1">
-                    {{ user.bucket_quota.max_size | dimlessBinary }}
-                  </td>
-                </tr>
-                <tr>
-                  <td i18n
-                      class="bold">Maximum objects</td>
-                  <td *ngIf="!user.bucket_quota.enabled">-</td>
-                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects <= -1"
-                      i18n>Unlimited</td>
-                  <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects > -1">
-                    {{ user.bucket_quota.max_objects }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </ng-template>
-    </ng-container>
-    <ng-container ngbNavItem="keys"
-                  *ngIf="keys.length">
-      <a ngbNavLink
-         i18n>Keys</a>
-      <ng-template ngbNavContent>
-        <cd-table [data]="keys"
-                  [columns]="keysColumns"
-                  columnMode="flex"
-                  selectionType="multi"
-                  forceIdentifier="true"
-                  (updateSelection)="updateKeysSelection($event)">
+  <div *ngIf="user">
+    <div *ngIf="keys.length">
+      <legend i18n>Keys</legend>
+        <div>
+          <cd-table [data]="keys"
+                    [columns]="keysColumns"
+                    columnMode="flex"
+                    selectionType="multi"
+                    forceIdentifier="true"
+                    (updateSelection)="updateKeysSelection($event)">
           <div class="table-actions">
             <div class="btn-group"
                  dropdown>
@@ -170,9 +22,144 @@
             </div>
           </div>
         </cd-table>
-      </ng-template>
-    </ng-container>
-  </nav>
+      </div>
+    </div>
+
+    <legend i18n>Details</legend>
+    <table class="table table-striped table-bordered">
+      <tbody>
+        <tr>
+          <td i18n
+              class="bold w-25">Tenant</td>
+          <td class="w-75">{{ user.tenant }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold w-25">User ID</td>
+          <td class="w-75">{{ user.user_id }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold w-25">Username</td>
+          <td class="w-75">{{ user.uid }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Full name</td>
+          <td>{{ user.display_name }}</td>
+        </tr>
+        <tr *ngIf="user.email?.length">
+          <td i18n
+              class="bold">Email address</td>
+          <td>{{ user.email }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Suspended</td>
+          <td>{{ user.suspended | booleanText }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">System</td>
+          <td>{{ user.system === 'true' | booleanText }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold">Maximum buckets</td>
+          <td>{{ user.max_buckets | map:maxBucketsMap }}</td>
+        </tr>
+        <tr *ngIf="user.subusers && user.subusers.length">
+          <td i18n
+              class="bold">Subusers</td>
+          <td>
+            <div *ngFor="let subuser of user.subusers">
+              {{ subuser.id }} ({{ subuser.permissions }})
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="user.caps && user.caps.length">
+          <td i18n
+              class="bold">Capabilities</td>
+          <td>
+            <div *ngFor="let cap of user.caps">
+              {{ cap.type }} ({{ cap.perm }})
+            </div>
+          </td>
+        </tr>
+        <tr *ngIf="user.mfa_ids?.length">
+          <td i18n
+              class="bold">MFAs(Id)</td>
+          <td>{{ user.mfa_ids | join}}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <!-- User quota -->
+    <div *ngIf="user.user_quota">
+      <legend i18n>User quota</legend>
+      <table class="table table-striped table-bordered">
+        <tbody>
+          <tr>
+            <td i18n
+                class="bold w-25">Enabled</td>
+            <td class="w-75">{{ user.user_quota.enabled | booleanText }}</td>
+          </tr>
+          <tr>
+            <td i18n
+                class="bold">Maximum size</td>
+            <td *ngIf="!user.user_quota.enabled">-</td>
+            <td *ngIf="user.user_quota.enabled && user.user_quota.max_size <= -1"
+                i18n>Unlimited</td>
+            <td *ngIf="user.user_quota.enabled && user.user_quota.max_size > -1">
+              {{ user.user_quota.max_size | dimlessBinary }}
+            </td>
+          </tr>
+          <tr>
+            <td i18n
+                class="bold">Maximum objects</td>
+            <td *ngIf="!user.user_quota.enabled">-</td>
+            <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects <= -1"
+                i18n>Unlimited</td>
+            <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects > -1">
+              {{ user.user_quota.max_objects }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-  <div [ngbNavOutlet]="nav"></div>
+    <!-- Bucket quota -->
+    <div *ngIf="user.bucket_quota">
+      <legend i18n>Bucket quota</legend>
+      <table class="table table-striped table-bordered">
+        <tbody>
+          <tr>
+            <td i18n
+                class="bold w-25">Enabled</td>
+            <td class="w-75">{{ user.bucket_quota.enabled | booleanText }}</td>
+          </tr>
+          <tr>
+            <td i18n
+                class="bold">Maximum size</td>
+            <td *ngIf="!user.bucket_quota.enabled">-</td>
+            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size <= -1"
+                i18n>Unlimited</td>
+            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size > -1">
+              {{ user.bucket_quota.max_size | dimlessBinary }}
+            </td>
+          </tr>
+          <tr>
+            <td i18n
+                class="bold">Maximum objects</td>
+            <td *ngIf="!user.bucket_quota.enabled">-</td>
+            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects <= -1"
+                i18n>Unlimited</td>
+            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects > -1">
+              {{ user.bucket_quota.max_objects }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
 </ng-container>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.spec.ts
index 62519cdf478..7b203eb9cca 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-details/rgw-user-details.component.spec.ts
@@ -5,8 +5,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { SharedModule } from '~/app/shared/shared.module';
-import { configureTestBed, TabHelper } from '~/testing/unit-test-helper';
-import { RgwUserS3Key } from '../models/rgw-user-s3-key';
+import { configureTestBed } from '~/testing/unit-test-helper';
 import { RgwUserDetailsComponent } from './rgw-user-details.component';
 
 describe('RgwUserDetailsComponent', () => {
@@ -27,30 +26,6 @@ describe('RgwUserDetailsComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
-
-    const tabs = TabHelper.getTextContents(fixture);
-    expect(tabs).toContain('Details');
-    expect(tabs).not.toContain('Keys');
-  });
-
-  it('should show "Details" tab', () => {
-    component.selection = { uid: 'myUsername' };
-    fixture.detectChanges();
-
-    const tabs = TabHelper.getTextContents(fixture);
-    expect(tabs).toContain('Details');
-    expect(tabs).not.toContain('Keys');
-  });
-
-  it('should show "Keys" tab', () => {
-    const s3Key = new RgwUserS3Key();
-    component.selection = { keys: [s3Key] };
-    component.ngOnChanges();
-    fixture.detectChanges();
-
-    const tabs = TabHelper.getTextContents(fixture);
-    expect(tabs).toContain('Details');
-    expect(tabs).toContain('Keys');
   });
 
   it('should show correct "System" info', () => {
-- 
2.39.5