RED-5386: Added marker for users without roles.

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -59,8 +59,9 @@
             ></mat-slide-toggle>
         </div>
 
-        <div class="cell">
+        <div class="cell" [ngClass]="!user.hasAnyRole && 'no-role-alignment'">
-            <span class="small-label">{{ getDisplayRoles(user) }}</span>
+            <mat-icon *ngIf="!user.hasAnyRole" [svgIcon]="'red:alert-circle'" class="icon"></mat-icon>
+            <span class="small-label opacity-1">{{ getDisplayRoles(user) }}</span>
         </div>
 
         <div class="cell">

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss

@@ -1,3 +1,5 @@
+@use 'variables';
+
 .right-container {
     display: flex;
     width: 353px;
@@ -20,3 +22,23 @@
 .action-buttons > div {
     display: flex;
 }
+
+.cell {
+    &.no-role-alignment {
+        flex-direction: row;
+        justify-content: start;
+        align-items: center;
+        color: variables.$primary;
+    }
+}
+
+.opacity-1 {
+    opacity: 1;
+}
+
+.icon {
+    font-size: 12px;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+}

apps/red-ui/src/app/modules/icons/icons.module.ts

@@ -12,6 +12,7 @@ export class IconsModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
         const icons = [
             'ai',
+            'alert-circle',
             'approved',
             'archive',
             'arrow-up',

apps/red-ui/src/assets/icons/general/alert-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <circle cx="12" cy="12" r="9"></circle>
+    <line x1="12" y1="8" x2="12" y2="11"></line>
+    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+</svg>