Redesign: Standardise User Management Screens for Admin and Super Admin

public/locales/en/common.json

@@ -63,3 +63,5 @@
   "Plugin Store": "Plugin Store",
   "Settings": "Settings"
 }
+
+

public/locales/en/translation.json

@@ -111,6 +111,21 @@
     "manage": "Manage",
     "sampleOrganization": "Sample Organization"
   },
+  "orgPeopleOrganizationsCard": {
+    "admins": "Admins",
+    "members": "Members",
+    "manage": "Manage",
+    "notMember": "User is not a member",
+    "unblock": "UnBlock",
+    "block": "Block",
+    "blockedSuccessfully": "User blocked successfully",
+    "unBlockedSuccessfully": "User Un-Blocked successfully",
+    "blockedUser": "User is blocked",
+    "roleUpdated": "Role Updated.",
+    "no": "No",
+    "yes": "Yes",
+    "memberRemoved": "The Member is removed"
+  },
   "paginationList": {
     "rowsPerPage": "rows per page",
     "all": "All"
@@ -179,7 +194,8 @@
     "noMembershipRequests": "No Membership requests present"
   },
   "organizationPeople": {
-    "title": "Talawa Members",
+    "title": "Members",
+    "title_superadmin": "Users",
     "filterByName": "Filter by Name",
     "filterByLocation": "Filter by Location",
     "filterByEvent": "Filter by Event",
@@ -580,6 +596,13 @@
     "installMsg": "This feature is now enabled in your organization"
   },
   "memberDetail": {
+    "overview": "Overview",
+    "organizations": "Organizations",
+    "events": "Events",
+    "tags": "Tags",
+    "title": "User Details"
+  },
+  "orgMemberDetail": {
     "title": "User Details",
     "addAdmin": "Add Admin",
     "alreadyIsAdmin": "Member is already an Admin",
@@ -614,6 +637,14 @@
     "addedAsAdmin": "User is added as admin.",
     "userType": "User Type"
   },
+  "memberOrganization": {
+    "sort": "Sort",
+    "noOrgError": "Organizations not found, please create an organization through dashboard",
+    "noOrgErrorTitle": "Organizations Not Found",
+    "noOrgErrorDescription": "Please create an organization through dashboard",
+    "noResultsFoundFor": "No results found for",
+    "endOfResults": "End of results"
+  },
   "userLogin": {
     "login": "Login",
     "loginIntoYourAccount": "Login into your account",

public/locales/sp/translation.json

@@ -123,6 +123,21 @@
     "noNotifications": "No Notificaciones",
     "close": "Cerca"
   },
+  "orgPeopleOrganizationsCard": {
+    "admins": "Administradores",
+    "members": "Miembros",
+    "manage": "Gestionar",
+    "notMember": "El usuario no es miembro",
+    "unblock": "Desbloquear",
+    "block": "Bloquear",
+    "blockedUser": "Usuario bloqueado",
+    "blockedSuccessfully": "Usuario bloqueado exitosamente",
+    "unBlockedSuccessfully": "Usuario desbloqueado exitosamente",
+    "roleUpdated": "Rol actualizado.",
+    "no": "No",
+    "yes": "Sí",
+    "memberRemoved": "El miembro ha sido eliminado"
+  },
   "orgList": {
     "title": "Organizaciones Talawa",
     "you": "Tú",
@@ -261,7 +276,8 @@
     "talawaApiUnavailable": "El servicio Talawa-API no está disponible. ¿Está funcionando? Compruebe también la conectividad de su red."
   },
   "organizationPeople": {
-    "title": "Miembros Talawa",
+    "title": "Miembros",
+    "title_superadmin": "Usuarios",
     "filterByName": "Filtrar por nombre",
     "filterByLocation": "Filtrar por Ubicación",
     "filterByEvent": "Filtrar por Evento",
@@ -766,6 +782,21 @@
     "uninstall": "Desinstalar"
   },
   "memberDetail": {
+    "overview": "Resumen",
+    "organizations": "Organizaciones",
+    "events": "Eventos",
+    "tags": "Etiquetas",
+    "title": "Detalles del Usuario"
+  },
+  "memberOrganization": {
+    "sort": "Ordenar",
+    "noOrgError": "Organizaciones no encontradas, por favor crea una organización a través del panel de control",
+    "noOrgErrorTitle": "Organizaciones no encontradas",
+    "noOrgErrorDescription": "Por favor, crea una organización a través del panel de control",
+    "noResultsFoundFor": "No se encontraron resultados para",
+    "endOfResults": "Fin de los resultados"
+  },
+  "orgMemberDetail": {
     "title": "Detalles del usuario",
     "addAdmin": "Agregar administrador",
     "alreadyIsAdmin": "El Miembro ya es Administrador",

src/GraphQl/Queries/Queries.ts

@@ -97,6 +97,13 @@ export const ORGANIZATION_CONNECTION_LIST = gql`
         sortingCode
         state
       }
+      blockedUsers {
+        _id
+        firstName
+        lastName
+        email
+      }
+      description
     }
   }
 `;

src/components/LeftDrawerOrg/LeftDrawerOrg.test.tsx

@@ -216,9 +216,20 @@ const MOCKS_EMPTY = [
   },
 ];
 
+const defaultScreensForSuperadmin = [
+  'Dashboard',
+  'Users',
+  'Events',
+  'Posts',
+  'Block/Unblock',
+  'Plugins',
+  'Settings',
+  'All Organizations',
+];
+
 const defaultScreens = [
   'Dashboard',
-  'People',
+  'Members',
   'Events',
   'Posts',
   'Block/Unblock',
@@ -269,7 +280,7 @@ const linkEmpty = new StaticMockLink(MOCKS_EMPTY, true);
 describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
   test('Component should be rendered properly', async () => {
     setItem('UserImage', '');
-    setItem('SuperAdmin', true);
+    setItem('SuperAdmin', false);
     setItem('FirstName', 'John');
     setItem('LastName', 'Doe');
     render(
@@ -289,6 +300,28 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     });
   });
 
+  test('Component should be rendered properly for superadmin', async () => {
+    setItem('UserImage', '');
+    setItem('SuperAdmin', true);
+    setItem('FirstName', 'John');
+    setItem('LastName', 'Doe');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <LeftDrawerOrg {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+    await wait();
+    defaultScreensForSuperadmin.map((screenName) => {
+      expect(screen.getByText(screenName)).toBeInTheDocument();
+    });
+  });
+
   test('Testing Profile Page & Organization Detail Modal', async () => {
     setItem('UserImage', '');
     setItem('SuperAdmin', true);
@@ -330,7 +363,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     expect(global.window.location.pathname).toContain('/orgdash/id=123');
   });
 
-  test('Testing when screen size is less than 820px', async () => {
+  test('Testing when screen size is less than 820px for superadmins', async () => {
     setItem('SuperAdmin', true);
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -346,7 +379,7 @@ describe('Testing LeftDrawerOrg component for SUPERADMIN', () => {
     await wait();
     resizeWindow(800);
     expect(screen.getByText(/Dashboard/i)).toBeInTheDocument();
-    expect(screen.getByText(/People/i)).toBeInTheDocument();
+    expect(screen.getByText(/Users/i)).toBeInTheDocument();
 
     const peopelBtn = screen.getByTestId(/People/i);
     userEvent.click(peopelBtn);

src/components/LeftDrawerOrg/LeftDrawerOrg.tsx

@@ -13,6 +13,7 @@ import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawerOrg.module.css';
 import Avatar from 'components/Avatar/Avatar';
+import useLocalStorage from 'utils/useLocalstorage';
 
 export interface InterfaceLeftDrawerProps {
   orgId: string;
@@ -28,6 +29,9 @@ const leftDrawerOrg = ({
   setHideDrawer,
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const { t: tCommon } = useTranslation('common');
+  const { getItem } = useLocalStorage();
+  const isSuperAdmin = getItem('SuperAdmin');
+
   const [showDropdown, setShowDropdown] = React.useState(false);
 
   const [organization, setOrganization] =
@@ -43,7 +47,6 @@ const leftDrawerOrg = ({
   } = useQuery(ORGANIZATIONS_LIST, {
     variables: { id: orgId },
   });
-  // Set organization data
   useEffect(() => {
     let isMounted = true;
     if (data && isMounted) {
@@ -151,7 +154,13 @@ const leftDrawerOrg = ({
                         }
                       />
                     </div>
-                    {tCommon(name)}
+
+                    {name == 'People'
+                      ? isSuperAdmin
+                        ? 'Users'
+                        : 'Members'
+                      : tCommon(name)}
+
                   </Button>
                 )}
               </NavLink>