From daa4fe532b23bc91b72cf895ce60f31b9a2b5389 Mon Sep 17 00:00:00 2001
From: DonOmalVindula <omalvindula@live.com>
Date: Wed, 13 Nov 2024 14:51:03 +0530
Subject: [PATCH] Add locked status for locked users in user list

---
 .../admin.users.v1/components/users-list.tsx  | 39 ++++++++++++++++++-
 .../themes/default/elements/icon.overrides    | 15 ++++++-
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/features/admin.users.v1/components/users-list.tsx b/features/admin.users.v1/components/users-list.tsx
index 9640c588173..f09a68fa68e 100644
--- a/features/admin.users.v1/components/users-list.tsx
+++ b/features/admin.users.v1/components/users-list.tsx
@@ -55,7 +55,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Dispatch } from "redux";
 import { Header, Icon, Label, ListItemProps, SemanticICONS } from "semantic-ui-react";
 import { deleteUser } from "../api";
-import { UserManagementConstants } from "../constants";
+import { ACCOUNT_LOCK_REASON_MAP, UserManagementConstants } from "../constants";
 import { UserBasicInterface, UserListInterface } from "../models";
 import { UserManagementUtils } from "../utils/user-management-utils";
 
@@ -251,6 +251,40 @@ export const UsersList: React.FunctionComponent<UsersListProps> = (props: UsersL
         }
     };
 
+    /**
+     * Returns a locked icon if the account is locked.
+     *
+     * @param user - each admin user belonging to a row of the table.
+     * @returns the locked icon.
+     */
+    const resolveAccountLockStatus = (user: UserBasicInterface): ReactNode => {
+        const accountLocked: boolean = user[userConfig.userProfileSchema]?.accountLocked === "true" ||
+            user[userConfig.userProfileSchema]?.accountLocked === true;
+        const accountLockedReason: string = user[userConfig.userProfileSchema]?.lockedReason;
+
+        const accountLockedReasonContent: string = ACCOUNT_LOCK_REASON_MAP[accountLockedReason]
+            ?? ACCOUNT_LOCK_REASON_MAP["DEFAULT"];
+
+        if (accountLocked) {
+            return (
+                <Popup
+                    trigger={ (
+                        <Icon
+                            className="locked-icon"
+                            name="lock"
+                            size="small"
+                            color="grey"
+                        />
+                    ) }
+                    content={ t(accountLockedReasonContent) }
+                    inverted
+                />
+            );
+        }
+
+        return null;
+    };
+
     /**
      * Resolves data table columns.
      *
@@ -284,7 +318,8 @@ export const UsersList: React.FunctionComponent<UsersListProps> = (props: UsersL
                                 spaced="right"
                                 data-suppress=""
                             />
-                            <Header.Content>
+                            { resolveAccountLockStatus(user) }
+                            <Header.Content className="pl-0">
                                 <div>
                                     { header as ReactNode }
                                     {
diff --git a/modules/theme/src/themes/default/elements/icon.overrides b/modules/theme/src/themes/default/elements/icon.overrides
index 13ffa47c4fb..21e467498e2 100644
--- a/modules/theme/src/themes/default/elements/icon.overrides
+++ b/modules/theme/src/themes/default/elements/icon.overrides
@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2019-2024, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -54,6 +54,17 @@ i.icon {
         font-size: .74em!important;
     }
 
+    &.locked-icon {
+        position: absolute;
+        z-index: 1;
+        top: 25px;
+        left: 25px;
+        font-size: 12px !important;
+        background-color: white;
+        padding: 0px;
+        border-radius: 50%;
+    }
+
     &.map-icon {
         margin: 18px 0 0 0;
     }
@@ -61,7 +72,7 @@ i.icon {
     &.padded-icon{
         padding-top: 0.7em;
     }
-    
+
     &.primary {
         color: @primaryColor;
     }