WEB-606 Add the columns Username and Is Self Service in the User Page (#3035)

src/app/users/view-user/view-user.component.html

@@ -61,11 +61,13 @@
         <div class="content-row">
           <div class="label">{{ 'labels.buttons.Is Self Service' | translate }}</div>
           <div class="value">
-            <span
-              [ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
-              class="self-service-indicator"
-            ></span>
-            {{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+            <span class="self-service-container">
+              <span
+                [ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
+                class="self-service-indicator"
+              ></span>
+              {{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+            </span>
           </div>
         </div>
       </div>

src/app/users/view-user/view-user.component.scss

@@ -106,6 +106,12 @@
     border: 1px solid #b71c1c;
   }
 
+  .self-service-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   button {
     transition: all 0.2s ease;