@griddo/ax 10.1.96 → 10.2.0

package/src/__tests__/modules/Users/UserList/UserList.test.tsx

@@ -0,0 +1,310 @@
+import React from "react";
+import axios from "axios";
+import { ThemeProvider } from "styled-components";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { Router } from "react-router-dom";
+import { mock } from "jest-mock-extended";
+import "@testing-library/jest-dom";
+import { render, cleanup, screen, act, fireEvent } from "./../../../../../config/jest/test-utils";
+import userEvent from "@testing-library/user-event";
+import { createMemoryHistory } from "history";
+import MockAdapter from "axios-mock-adapter";
+import { Middleware } from "redux";
+
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+import UserList, { IUserListProps } from "./../../../../modules/Users/UserList";
+
+import {
+  appStoreMock,
+  usersStoreMock,
+  usersSiteStoreMock,
+  sitesStoreGlobalMock,
+  sitesStoreMock,
+} from "../../../../__mocks__/store/UserList";
+
+import {
+  rolesResponse,
+  userResponse,
+  usersResponse,
+  deletedUserResponse,
+  removeUserResponse,
+  usersSiteResponse,
+  removeUserSiteResponse,
+} from "./../../../../__mocks__/axios/UserList";
+
+const middlewares: Middleware[] = [thunk];
+const mockStore = configureStore(middlewares);
+
+const defaultProps = mock<IUserListProps>();
+
+const user = userEvent.setup();
+
+const history = createMemoryHistory();
+
+let mockedAxios: MockAdapter;
+
+beforeAll(() => {
+  mockedAxios = new MockAdapter(axios);
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+});
+
+afterEach(() => {
+  cleanup();
+  jest.clearAllMocks();
+  mockedAxios.reset();
+});
+
+describe("UserList module rendering", () => {
+  it("should render the componet with 3 global users", async () => {
+    const initialStore = {
+      users: usersStoreMock,
+      sites: sitesStoreGlobalMock,
+      app: appStoreMock,
+    };
+
+    const store = mockStore(initialStore);
+
+    mockedAxios.onGet(`undefined/site/global/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/users`).reply(200, usersResponse.data);
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    expect(screen.getByTestId("users-wrapper")).toBeTruthy();
+    expect(screen.queryAllByTestId("user-item").length).toBe(3);
+  });
+
+  it("should render the componet with 2 site user", async () => {
+    const initialStore = {
+      users: usersSiteStoreMock,
+      sites: sitesStoreMock,
+      app: appStoreMock,
+    };
+
+    const initialState = { ...initialStore, ...defaultProps };
+    const store = mockStore(initialStore);
+
+    mockedAxios.onGet(`undefined/site/2/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/site/2/users`).reply(200, usersSiteResponse.data);
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    expect(screen.getByTestId("users-wrapper")).toBeTruthy();
+    expect(screen.queryAllByTestId("user-item").length).toBe(2);
+  });
+
+  it("should render the componet with no users", async () => {
+    const initialStore = {
+      users: { users: [], roles: [] },
+      sites: sitesStoreGlobalMock,
+      app: appStoreMock,
+    };
+
+    const store = mockStore(initialStore);
+
+    mockedAxios.onGet(`undefined/site/global/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/users`).reply(200, usersResponse.data);
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    expect(screen.getByTestId("users-wrapper")).toBeTruthy();
+    expect(screen.getByTestId("empty-wrapper")).toBeTruthy();
+    expect(screen.queryAllByTestId("user-item").length).toBe(0);
+  });
+});
+
+describe("UserList module events", () => {
+  it("should call action when user click on user", async () => {
+    const initialStore = {
+      users: usersStoreMock,
+      sites: sitesStoreGlobalMock,
+      app: appStoreMock,
+    };
+
+    const store = mockStore(initialStore);
+
+    mockedAxios.onGet(`undefined/site/global/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/users`).reply(200, usersResponse.data);
+    mockedAxios.onGet(`undefined/user/171`).reply(200, userResponse.data);
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    const users = screen.queryAllByTestId("user-cell");
+    expect(users.length).toBe(3);
+
+    await act(async () => {
+      fireEvent.click(users[0]);
+    });
+
+    expect(store.getActions()).toContainEqual({
+      payload: { userForm: userResponse.data },
+      type: "users/SET_USER_FORM",
+    });
+  });
+
+  it("should delete an user with bulk", async () => {
+    const getMockStore = (actions: any[]) => {
+      const setUsers = actions.filter((action: any) => action.type === "users/SET_USERS");
+      if (setUsers.length >= 2) {
+        return {
+          users: { ...usersStoreMock, users: deletedUserResponse.data },
+          sites: sitesStoreGlobalMock,
+          app: appStoreMock,
+        };
+      } else {
+        return {
+          users: usersStoreMock,
+          sites: sitesStoreGlobalMock,
+          app: appStoreMock,
+        };
+      }
+    };
+
+    const store = mockStore(getMockStore);
+
+    mockedAxios.onGet(`undefined/site/global/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/users`).reply(200, usersResponse.data);
+    mockedAxios.onGet(`undefined/users?order=dateCreated`).reply(200, deletedUserResponse.data);
+    mockedAxios.onDelete("undefined/user/bulk").reply(200, {});
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+
+    expect(screen.queryAllByTestId("user-item").length).toBe(3);
+
+    await user.click(screen.getByLabelText("Prueba Prueba"));
+    await user.click(screen.getByText("delete"));
+
+    expect(screen.getByTestId("user-delete-bulk-modal")).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Delete Users"));
+    });
+
+    expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+    expect(screen.queryAllByTestId("user-item").length).toBe(2);
+
+    expect(store.getActions()).toContainEqual({
+      payload: { users: deletedUserResponse.data },
+      type: "users/SET_USERS",
+    });
+  });
+
+  it("should remove an user from site with bulk", async () => {
+    const getMockStore = (actions: any[]) => {
+      const setUsers = actions.filter((action: any) => action.type === "users/SET_USERS");
+      if (setUsers.length >= 2) {
+        return {
+          users: { ...usersStoreMock, users: removeUserSiteResponse.data },
+          sites: sitesStoreMock,
+          app: appStoreMock,
+        };
+      } else {
+        return {
+          users: usersSiteStoreMock,
+          sites: sitesStoreMock,
+          app: appStoreMock,
+        };
+      }
+    };
+
+    const store = mockStore(getMockStore);
+
+    mockedAxios.onGet(`undefined/site/2/roles`).reply(200, rolesResponse.data);
+    mockedAxios.onGet(`undefined/site/2/users`).reply(200, usersSiteResponse.data);
+    mockedAxios.onGet(`undefined/site/2/users?order=dateCreated`).reply(200, removeUserSiteResponse.data);
+    mockedAxios.onPut("undefined/site/2/restrict").reply(200, {});
+    mockedAxios.onGet(`undefined/sites?recentSitesNumber=0`).reply(200, {});
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <UserList {...defaultProps} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    await act(async () => {
+      render(Component, { store });
+    });
+
+    expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+
+    expect(screen.queryAllByTestId("user-item").length).toBe(2);
+
+    await user.click(screen.getByLabelText("Admin"));
+    await user.click(screen.getByText("Remove from this site"));
+
+    expect(screen.getByTestId("user-delete-bulk-modal")).toBeTruthy();
+
+    await act(async () => {
+      const button = screen.getAllByText("Remove from this site");
+      fireEvent.click(button[1]);
+    });
+
+    expect(screen.queryByTestId("user-delete-bulk-modal")).toBeFalsy();
+    expect(screen.queryAllByTestId("user-item").length).toBe(1);
+
+    expect(store.getActions()).toContainEqual({
+      payload: { users: removeUserSiteResponse.data },
+      type: "users/SET_USERS",
+    });
+  });
+});

package/src/api/index.tsx

@@ -16,6 +16,7 @@ import users from "./users";
 import domains from "./domains";
 import redirects from "./redirects";
 import analytics from "./analytics";
+import roles from "./roles";
 import integrations from "./integrations";
 
 export {
@@ -37,5 +38,6 @@ export {
   domains,
   redirects,
   analytics,
+  roles,
   integrations,
 };

package/src/api/roles.tsx

@@ -0,0 +1,77 @@
+import { IGetRoles, IActivateRole } from "@ax/types";
+import { AxiosResponse } from "axios";
+import { template } from "./config";
+import { IServiceConfig, sendInitialRequest, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_ROLES: {
+    ...template,
+    endpoint: "/roles",
+    method: "GET",
+  },
+  GET_SITE_ROLES: {
+    ...template,
+    endpoint: ["/site/", "/roles"],
+    method: "GET",
+  },
+  ACTIVATE_ROLE: {
+    ...template,
+    endpoint: ["/role/", "/site"],
+    method: "PUT",
+  },
+  ACTIVATE_ROLE_BULK: {
+    ...template,
+    endpoint: ["/site/", "/role/activate/bulk"],
+    method: "POST",
+  },
+};
+
+const getRoles = async (params: IGetRoles, token?: string): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_SITE_ROLES;
+  const { siteId, order } = params;
+
+  const BASE_URL = `${host}${prefix}${siteId}${suffix}`;
+
+  SERVICES.GET_SITE_ROLES.dynamicUrl = order ? `${BASE_URL}/?order=${order}` : `${BASE_URL}`;
+
+  if (token) {
+    return sendInitialRequest(SERVICES.GET_SITE_ROLES, token);
+  } else {
+    return sendRequest(SERVICES.GET_SITE_ROLES);
+  }
+};
+
+const activateRole = async (params: IActivateRole): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.ACTIVATE_ROLE;
+  const { id, siteId, active } = params;
+
+  SERVICES.ACTIVATE_ROLE.dynamicUrl = `${host}${prefix}${id}${suffix}/${siteId}/activate`;
+  const data = { active };
+
+  return sendRequest(SERVICES.ACTIVATE_ROLE, { ...data });
+};
+
+const activateRolesBulk = async (params: IActivateRole): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.ACTIVATE_ROLE_BULK;
+  const { id, siteId, active } = params;
+
+  SERVICES.ACTIVATE_ROLE_BULK.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+  const data = { active, roles: id };
+
+  return sendRequest(SERVICES.ACTIVATE_ROLE_BULK, { ...data });
+};
+
+export default {
+  getRoles,
+  activateRole,
+  activateRolesBulk,
+};

package/src/api/users.tsx

@@ -7,6 +7,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/users",
     method: "GET",
   },
+  GET_SITE_USERS: {
+    ...template,
+    endpoint: ["/site/", "/users"],
+    method: "GET",
+  },
   GET_USER: {
     ...template,
     endpoint: "/user/",
@@ -58,6 +63,20 @@ const getUsers = async (params: any) => {
   return sendRequest(SERVICES.GET_USERS);
 };
 
+const getSiteUsers = async (params: any, siteID: number) => {
+  const { host, endpoint: [prefix, suffix], } = SERVICES.GET_SITE_USERS;
+
+  const { query, filterQuery } = params;
+
+  SERVICES.GET_SITE_USERS.dynamicUrl = `${host}${prefix}${siteID}${suffix}${filterQuery}`;
+
+  if (query && query.trim() !== "") {
+    SERVICES.GET_SITE_USERS.dynamicUrl = `${SERVICES.GET_USERS.dynamicUrl}${query}`;
+  }
+
+  return sendRequest(SERVICES.GET_SITE_USERS);
+};
+
 const getUser = async (id: string | number, token?: string) => {
   const { host, endpoint } = SERVICES.GET_USER;
 
@@ -74,7 +93,7 @@ const updateUser = async (id: number, data: any) => {
   return sendRequest(SERVICES.UPDATE_USER, data);
 };
 
-const updatePassword = async (id: string, data: any) => {
+const updatePassword = async (id: number, data: any) => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -113,6 +132,7 @@ const resendInvitation = async (id: number) => {
 
 export default {
   getUsers,
+  getSiteUsers,
   getUser,
   updateUser,
   updatePassword,
@@ -120,4 +140,4 @@ export default {
   deleteUser,
   deleteUserBulk,
   resendInvitation,
-};
+};

package/src/components/ActionMenu/index.tsx

@@ -7,6 +7,8 @@ import * as S from "./style";
 const ActionMenu = (props: IActionMenuProps): JSX.Element => {
   const { options, icon, className, tooltip } = props;
 
+  const filteredOptions = options.filter((option: IOption | undefined | null) => !!option);
+
   const MoreInfoButton = () => (
     <S.IconActionWrapper data-testid="more-info-button">
       <IconAction icon={icon} />
@@ -33,11 +35,15 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
 
   return options.length > 0 ? (
     <S.Wrapper className={className} data-testid="action-menu-wrapper">
-      <Tooltip content={tooltip} hideOnClick>
-        <FloatingMenu Button={MoreInfoButton}>
-          <S.ActionMenu>{options.map((item: IOption) => ActionMenuItem(item))}</S.ActionMenu>
-        </FloatingMenu>
-      </Tooltip>
+      {filteredOptions.length > 0 && (
+        <Tooltip content={tooltip} hideOnClick>
+          <FloatingMenu Button={MoreInfoButton}>
+            <S.ActionMenu>
+              {filteredOptions.map((item: IOption | undefined | null) => item && ActionMenuItem(item))}
+            </S.ActionMenu>
+          </FloatingMenu>
+        </Tooltip>
+      )}
     </S.Wrapper>
   ) : (
     <></>
@@ -54,7 +60,7 @@ interface IOption {
 }
 
 export interface IActionMenuProps {
-  options: IOption[];
+  options: (IOption | undefined | null)[];
   icon: string;
   className?: string;
   tooltip?: string;

package/src/components/Avatar/index.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { getInitials } from "@ax/helpers";
+
 import * as S from "./style";
 
 const Avatar = (props: IAvatarProps): JSX.Element => {
-  const { image, name } = props;
+  const { image, name, size } = props;
 
   return (
-    <S.AvatarWrapper data-testid="avatar-wrapper">
-      <S.Avatar image={image} initials={getInitials(name)} data-testid="avatar" />
+    <S.AvatarWrapper data-testid="avatar-wrapper" size={size}>
+      <S.Avatar image={image} initials={getInitials(name)} data-testid="avatar" size={size} />
     </S.AvatarWrapper>
   );
 };
@@ -15,6 +16,7 @@ const Avatar = (props: IAvatarProps): JSX.Element => {
 export interface IAvatarProps {
   image?: string | null;
   name?: string;
+  size?: string;
 }
 
 export default Avatar;

package/src/components/Avatar/style.tsx

@@ -1,16 +1,15 @@
 import styled from "styled-components";
 
-const AvatarWrapper = styled.div`
-  width: 32px;
-  height: 32px;
+const AvatarWrapper = styled.div<{ size?: string }>`
+  width: ${(p) => (p.size === "s" ? " 24px" : "32px")};
+  height: ${(p) => (p.size === "s" ? " 24px" : "32px")};
 `;
 
-const Avatar = styled.div<{image?: string | null, initials: string}>`
+const Avatar = styled.span<{ image?: string | null; initials: string; size?: string }>`
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  background: ${(p) => `url(${p.image})`},
-    ${(p) => p.theme.colors.uiBackground03};
+  width: ${(p) => (p.size === "s" ? " 24px" : "32px")};
+  height: ${(p) => (p.size === "s" ? " 24px" : "32px")};
+  background: ${(p) => `url(${p.image})`}, ${(p) => p.theme.colors.uiBackground03};
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
@@ -25,4 +24,4 @@ const Avatar = styled.div<{image?: string | null, initials: string}>`
   }
 `;
 
-export { AvatarWrapper, Avatar };
+export { AvatarWrapper, Avatar };

package/src/components/BulkSelectionOptions/index.tsx

@@ -4,11 +4,13 @@ import { Button, CheckField, TableCounter } from "@ax/components";
 
 import * as S from "./style";
 
-const BulkSelectionOptions = (props: IBulkSelectionProps) => {
+const BulkSelectionOptions = (props: IBulkSelectionProps): JSX.Element => {
   const { isScrolling, checkState, actions, selectItems, totalItems } = props;
 
+  const filteredActions = actions.filter((action: IBulkAction | undefined | null) => !!action);
+
   return (
-    <S.BulkHeader data-testid="bulk-header-wrapper" isScrolling={isScrolling}>
+    <S.BulkHeader isScrolling={isScrolling} data-testid="bulk-header-wrapper">
       <S.BulkActionsWrapper>
         <S.SelectAllCheckField>
           <CheckField
@@ -23,11 +25,14 @@ const BulkSelectionOptions = (props: IBulkSelectionProps) => {
           />
         </S.SelectAllCheckField>
         <S.BulkActions>
-          {actions.map((item: any) => (
-            <Button key={item.text} type="button" buttonStyle="text" icon={item.icon} onClick={item.action}>
-              {item.text}
-            </Button>
-          ))}
+          {filteredActions.map(
+            (item: IBulkAction | undefined | null) =>
+              item && (
+                <Button key={item.text} type="button" buttonStyle="text" icon={item.icon} onClick={item.action}>
+                  {item.text}
+                </Button>
+              )
+          )}
         </S.BulkActions>
         <S.Counter>
           <TableCounter totalItems={totalItems} />
@@ -37,13 +42,15 @@ const BulkSelectionOptions = (props: IBulkSelectionProps) => {
   );
 };
 
+interface IBulkAction {
+  icon?: string;
+  text: string;
+  action: () => void;
+}
+
 interface IBulkSelectionProps {
   checkState: any;
-  actions: {
-    icon: string;
-    text: string;
-    action: () => void;
-  }[];
+  actions: (IBulkAction | undefined | null)[];
   selectItems: () => void;
   totalItems: number;
   isScrolling?: boolean;

package/src/components/BulkSelectionOptions/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const BulkHeader = styled.div<{isScrolling?: boolean}>`
+const BulkHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -17,15 +17,16 @@ const BulkActionsWrapper = styled.div`
 const BulkActions = styled.div`
   display: flex;
   margin-top: 2px;
+  min-height: 32px;
   button {
     margin-right: ${(p) => p.theme.spacing.xs};
   }
 `;
 
 const SelectAllCheckField = styled.span`
-   width: ${(p) => p.theme.spacing.s};
-   margin-right: ${(p) => p.theme.spacing.s};
-   margin-left: ${(p) => p.theme.spacing.m};
+  width: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.s};
+  margin-left: ${(p) => p.theme.spacing.m};
 `;
 
 const Counter = styled.div`
@@ -34,10 +35,4 @@ const Counter = styled.div`
   align-items: center;
 `;
 
-export {
-  BulkHeader,
-  BulkActionsWrapper,
-  BulkActions,
-  SelectAllCheckField,
-  Counter
-}
+export { BulkHeader, BulkActionsWrapper, BulkActions, SelectAllCheckField, Counter };