Merge pull request #114 from aliraza556/disable-icon-user-side

Display Block Icon on Disabled User Action Buttons `settings and delete`

src/people/widgetViews/__tests__/UsersList.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Users from '../organization/UsersList.tsx';
+
+jest.mock('store', () => ({
+  useStores: () => ({
+    main: {
+      bountyRoles: []
+    },
+    ui: {
+      meInfo: {
+        owner_pubkey: 'mocked_pubkey'
+      }
+    }
+  })
+}));
+
+const mockedUsers = [
+  {
+    owner_pubkey: 'user1_pubkey',
+    owner_alias: 'User 1',
+    img: ''
+  },
+  {
+    owner_pubkey: 'mocked_pubkey',
+    owner_alias: 'User 2',
+    img: ''
+  }
+];
+
+const props = {
+  users: mockedUsers,
+  userRoles: ['VIEW'],
+  handleDeleteClick: jest.fn(),
+  handleSettingsClick: jest.fn(),
+  org: { owner_pubkey: 'org_pubkey' }
+};
+
+describe('Users Component', () => {
+  test('displays not-allowed cursor over disabled settings button', () => {
+    // @ts-ignore
+    const { getAllByTestId } = render(<Users {...props} />);
+    const settingsIcons = getAllByTestId('settings-icon');
+    // eslint-disable-next-line @typescript-eslint/typedef
+    settingsIcons.forEach((icon) => {
+      expect(icon).toHaveStyle('cursor: not-allowed');
+    });
+  });
+
+  test('displays not-allowed cursor over disabled delete button', () => {
+    // @ts-ignore
+    const { getAllByTestId } = render(<Users {...props} />);
+    const deleteIcons = getAllByTestId('delete-icon');
+    // eslint-disable-next-line @typescript-eslint/typedef
+    deleteIcons.forEach((icon) => {
+      expect(icon).toHaveStyle('cursor: not-allowed');
+    });
+  });
+});

src/people/widgetViews/organization/UsersList.tsx

@@ -46,10 +46,11 @@ const Users = (props: UserListProps) => {
                 <ActionBtn disabled={settingsDisabled}>
                   <MaterialIcon
                     disabled={settingsDisabled}
+                    data-testid="settings-icon"
                     icon={'settings'}
                     style={{
                       fontSize: 24,
-                      cursor: 'pointer',
+                      cursor: settingsDisabled ? 'not-allowed' : 'pointer',
                       color: settingsDisabled ? '#b0b7bc' : '#5f6368'
                     }}
                     onClick={() => handleSettingsClick(user)}
@@ -59,10 +60,11 @@ const Users = (props: UserListProps) => {
               <IconWrap>
                 <ActionBtn disabled={deleteUserDisabled}>
                   <MaterialIcon
+                    data-testid="delete-icon"
                     icon={'delete'}
                     style={{
                       fontSize: 24,
-                      cursor: 'pointer',
+                      cursor: deleteUserDisabled ? 'not-allowed' : 'pointer',
                       color: deleteUserDisabled ? '#b0b7bc' : '#5f6368'
                     }}
                     onClick={() => {