UsersTable: Display Disabled flag in Organizations' Users table (#53656)

* Add disabled column to Org's Users table

* fix typo

* Change column order

* Add test for testing whether GetOrgUsers populates the DTO correctly
* Remove type assertion

public/app/features/users/UsersTable.test.tsx

@@ -40,6 +40,14 @@ describe('Render', () => {
       expect(screen.getByText(user.name)).toBeInTheDocument();
     });
   });
+
+  it('should render disabled flag when any of the Users are disabled', () => {
+    const usersData = getMockUsers(5);
+    usersData[0].isDisabled = true;
+    setup({ users: usersData });
+
+    expect(screen.getByText('Disabled')).toBeInTheDocument();
+  });
 });
 
 describe('Remove modal', () => {

public/app/features/users/UsersTable.tsx

@@ -58,6 +58,7 @@ const UsersTable: FC<Props> = (props) => {
             <th>Seen</th>
             <th>Role</th>
             <th style={{ width: '34px' }} />
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -108,8 +109,12 @@ const UsersTable: FC<Props> = (props) => {
                   )}
                 </td>
 
+                <td className="width-1 text-center">
+                  {user.isDisabled && <span className="label label-tag label-tag--gray">Disabled</span>}
+                </td>
+
                 {contextSrv.hasPermissionInMetadata(AccessControlAction.OrgUsersRemove, user) && (
-                  <td>
+                  <td className="text-right">
                     <Button
                       size="sm"
                       variant="destructive"

public/app/features/users/__mocks__/userMocks.ts

@@ -14,6 +14,7 @@ export const getMockUsers = (amount: number) => {
       orgId: 1,
       role: 'Admin',
       userId: i,
+      isDisabled: false,
     });
   }