@bigbinary/neeto-team-members-frontend 2.4.1 → 2.4.2

package/README.md

@@ -18,7 +18,7 @@ command:
 2. Now install the latest **neetoTeamMembers** package using the below command:
 
     ```zsh
-    yarn add @bigbinary/neeto-team-members-frontend@2.4.0
+    yarn add @bigbinary/neeto-team-members-frontend@2.4.2
     ```
 
 ## Usage

package/dist/index.cjs.js

@@ -4318,6 +4318,12 @@ const getScrollBarWidth = () => {
   return w1 - w2;
 };
 const noop$2 = () => {};
+const slugify = string => string.toString().toLowerCase().replace(/\s+/g, "-") // Replace spaces with -
+.replace(/&/g, "-and-") // Replace & with 'and'
+.replace(/[^\w-]+/g, "") // Remove all non-word characters
+.replace(/--+/g, "-") // Replace multiple - with single -
+.replace(/^-+/, "") // Trim - from start of text
+.replace(/-+$/, ""); // Trim - from end of text
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -11196,14 +11202,15 @@ var dist = {exports: {}};
 } (dist));
 
 const renderSearchProps = (searchString, setSearchString) => ({
-  placeholder: instance.t("common.search_", {
-    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-  }),
-  value: searchString,
+  "data-cy": "ntm-search-roles-input",
   onChange: _ref => {
     let value = _ref.target.value;
     return setSearchString(value);
-  }
+  },
+  placeholder: instance.t("common.search_", {
+    what: instance.t("common.role", PLURAL).toLocaleLowerCase()
+  }),
+  value: searchString
 });
 const renderBreadcrumbs = (breadcrumbs, membersPageUrl) => breadcrumbs !== null && breadcrumbs !== void 0 ? breadcrumbs : [{
   text: instance.t("metaNames.member", PLURAL),
@@ -11221,12 +11228,12 @@ const AddRoleButton = _ref => {
     disabled: (_permissions$create = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create !== void 0 ? _permissions$create : hasPermission(MANAGE_MEMBER_PERMISSIONS),
     position: "bottom"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "ntm-add-role-button",
+    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
     label: t("common.add_", {
       what: t("common.role", SINGULAR).toLocaleLowerCase()
     }),
-    onClick: onClick,
-    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
-    "data-cy": "new-role-button"
+    onClick: onClick
   })));
 };
 
@@ -11302,10 +11309,11 @@ const Permissions = _ref => {
     className: "ntm-roles-permission",
     key: category
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h5",
-    weight: "bold",
+    className: "ntm-roles-permission__heading",
+    "data-cy": "ntm-roles-permission-category-title",
     lineHeight: "normal",
-    className: "ntm-roles-permission__heading"
+    style: "h5",
+    weight: "bold"
   }, category), groupedPermissions[category].map(_ref2 => {
     let id = _ref2.id,
       description = _ref2.description;
@@ -11314,12 +11322,14 @@ const Permissions = _ref => {
       onClick: () => handleTogglePermission(id),
       className: "ntm-roles-permission__card"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2",
+      "data-cy": "ntm-roles-permission-name",
       className: "ntm-roles-permission__card--description",
-      lineHeight: "normal"
+      lineHeight: "normal",
+      style: "body2"
     }, description), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-permission__card--checkbox"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+      "data-cy": "ntm-roles-permission-checkbox",
       checked: permissionIds.some(pid => pid === id),
       onChange: () => handleTogglePermission(id)
     })));
@@ -11351,6 +11361,7 @@ const New = _ref => {
     isOpen: isOpen,
     onClose: onClose
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "ntm-add-role-title",
     style: "h2"
   }, t("common.add_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
@@ -11370,15 +11381,17 @@ const New = _ref => {
       className: "ntm-roles-pane__body-wrapper"
     }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
+      "data-cy": "ntm-add-role-name-text-field",
+      label: t("common.name"),
       maxLength: 40,
       name: "name",
-      label: t("common.name"),
       placeholder: t("placeholders.enter_", {
         what: t("common.name").toLocaleLowerCase()
       })
     }), /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
-      name: "description",
+      "data-cy": "ntm-add-role-description-text-field",
       label: t("common.description"),
+      name: "description",
       placeholder: t("placeholders.enter_", {
         what: t("common.description").toLocaleLowerCase()
       })
@@ -11387,14 +11400,16 @@ const New = _ref => {
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-pane__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      label: t("buttons.saveChanges"),
+      "data-cy": "ntm-add-role-submit-button",
       disabled: !dirty || isSubmitting,
-      type: "submit",
-      loading: isSubmitting
+      label: t("buttons.saveChanges"),
+      loading: isSubmitting,
+      type: "submit"
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      style: "text",
+      "data-cy": "ntm-add-role-cancel-button",
       label: t("buttons.cancel"),
-      onClick: onClose
+      onClick: onClose,
+      style: "text"
     }))));
   }));
 };
@@ -11500,16 +11515,17 @@ const EmptyState = _ref => {
     _ref$actionBlock = _ref.actionBlock,
     actionBlock = _ref$actionBlock === void 0 ? null : _ref$actionBlock;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-cy": "empty-state-container",
-    className: classnames__default["default"](["ntm-empty-state", className])
+    className: classnames__default["default"](["ntm-empty-state", className]),
+    "data-cy": "ntm-empty-state-container"
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
-    "data-cy": "empty-state-image-container",
-    className: "ntm-empty-state__image"
+    className: "ntm-empty-state__image",
+    "data-cy": "ntm-empty-state-image-container"
   }, /*#__PURE__*/React__default["default"].createElement(EmptyStateSVG, null)), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    className: classnames__default["default"]([!!actionBlock && "ntm-empty-state__title--with-action-block"]),
     component: "h2",
+    "data-cy": "ntm-empty-state-title",
     style: "h2",
-    weight: "semibold",
-    className: classnames__default["default"]([!!actionBlock && "ntm-empty-state__title--with-action-block"])
+    weight: "semibold"
   }, title), !!actionBlock && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-empty-state__action-block"
   }, actionBlock)));
@@ -11561,17 +11577,15 @@ const Row = _ref => {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-table-cell__checkbox-wrapper"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Checkbox, {
+      checked: isCheckboxChecked(role),
       className: "ntm-roles-table-cell__checkbox",
+      "data-cy": "ntm-roles-table-permission-checkbox",
       disabled: ramda.identical(role.name, "Admin") || !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
-      checked: isCheckboxChecked(role),
       onChange: _ref2 => {
         let checked = _ref2.target.checked;
         return handleSubmit(role, checked);
       }
-    }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "body2",
-      lineHeight: "normal"
-    }, permission === null || permission === void 0 ? void 0 : permission.description));
+    }))));
   }));
 };
 
@@ -11607,15 +11621,17 @@ const TableHeader = _ref => {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-table-header-cell__container"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      style: "h4",
-      weight: "semibold",
+      className: "ntm-roles-table-header__role-name",
+      "data-cy": "ntm-roles-table-header-role-title",
       lineHeight: "normal",
-      className: "ntm-roles-table-header__role-name"
+      style: "h4",
+      weight: "semibold"
     }, role.name), !hasSystemRole && /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+      autoWidth: true,
       buttonProps: {
-        className: "ntm-roles-table-header__dropdown"
+        className: "ntm-roles-table-header__dropdown",
+        "data-cy": "ntm-roles-table-header-role-dropdown-button"
       },
-      autoWidth: true,
       buttonStyle: "text",
       icon: neetoIcons.MenuHorizontal
     }, /*#__PURE__*/React__default["default"].createElement(Menu, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
@@ -11623,27 +11639,29 @@ const TableHeader = _ref => {
       disabled: (_config$permissions$u = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.update) !== null && _config$permissions$u !== void 0 ? _config$permissions$u : DEFAULT_PERMISSION,
       position: "left"
     }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      size: "small",
+      className: "ntm-dropdown__button",
+      disabled: !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
+      "data-cy": "ntm-roles-table-edit-role-button",
       onClick: () => setManageRole({
         isEdit: true,
         selectedRole: role
       }),
-      disabled: !((_config$permissions$u2 = config === null || config === void 0 ? void 0 : (_config$permissions2 = config.permissions) === null || _config$permissions2 === void 0 ? void 0 : _config$permissions2.update) !== null && _config$permissions$u2 !== void 0 ? _config$permissions$u2 : DEFAULT_PERMISSION),
-      style: "text",
-      className: "ntm-dropdown__button"
+      size: "small",
+      style: "text"
     }, t("common.edit")))), /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
       content: t("tooltips.noPermissionToRemoveRoles"),
       disabled: (_config$permissions$d = config === null || config === void 0 ? void 0 : (_config$permissions3 = config.permissions) === null || _config$permissions3 === void 0 ? void 0 : _config$permissions3.delete) !== null && _config$permissions$d !== void 0 ? _config$permissions$d : DEFAULT_PERMISSION,
       position: "left"
     }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-      size: "small",
+      className: "ntm-dropdown__button",
+      "data-cy": "ntm-roles-table-delete-role-button",
+      disabled: !((_config$permissions$d2 = config === null || config === void 0 ? void 0 : (_config$permissions4 = config.permissions) === null || _config$permissions4 === void 0 ? void 0 : _config$permissions4.delete) !== null && _config$permissions$d2 !== void 0 ? _config$permissions$d2 : DEFAULT_PERMISSION),
       onClick: () => setManageRole({
         isDelete: true,
         selectedRole: role
       }),
-      disabled: !((_config$permissions$d2 = config === null || config === void 0 ? void 0 : (_config$permissions4 = config.permissions) === null || _config$permissions4 === void 0 ? void 0 : _config$permissions4.delete) !== null && _config$permissions$d2 !== void 0 ? _config$permissions$d2 : DEFAULT_PERMISSION),
-      style: "danger",
-      className: "ntm-dropdown__button"
+      size: "small",
+      style: "danger"
     }, t("common.delete"))))))));
   })));
 };
@@ -11727,6 +11745,7 @@ const Edit = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
       noValidate: true
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      "data-cy": "ntm-update-role-title",
       style: "h2"
     }, t("common.update_", {
       what: t("common.role", SINGULAR).toLocaleLowerCase()
@@ -11734,25 +11753,29 @@ const Edit = _ref => {
       className: "ntm-roles-modal__body"
     }, /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
       required: true,
-      name: "name",
+      "data-cy": "ntm-update-role-name-text-field",
       label: t("common.name"),
-      placeholder: t("placeholders.enterRoleName"),
-      maxLength: 40
+      maxLength: 40,
+      name: "name",
+      placeholder: t("placeholders.enterRoleName")
     }), /*#__PURE__*/React__default["default"].createElement(formik$1.Textarea, {
-      name: "description",
+      "data-cy": "ntm-update-role-description-text-field",
       label: t("common.description"),
+      name: "description",
       placeholder: t("placeholders.enterDescription")
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-modal__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      type: "submit",
+      "data-cy": "ntm-update-role-submit-button",
       disabled: !dirty || isSubmitting,
       label: t("buttons.saveChanges"),
-      loading: isSubmitting
+      loading: isSubmitting,
+      type: "submit"
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      style: "text",
+      "data-cy": "ntm-update-role-cancel-button",
       label: t("buttons.cancel"),
-      onClick: onClose
+      onClick: onClose,
+      style: "text"
     }))));
   }));
 };
@@ -11814,6 +11837,7 @@ const renderDescription = permissions => permissions === null || permissions ===
     key: id,
     className: "ntm-roles-table-sidebar__list-item"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "ntm-permission-category-description",
     style: "body2",
     lineHeight: "normal"
   }, description));
@@ -11830,15 +11854,17 @@ const ToggleDropdown = _ref => {
   let isVisible = _ref.isVisible,
     onClick = _ref.onClick;
   return isVisible ? /*#__PURE__*/React__default["default"].createElement(neetoIcons.Up, {
-    size: 16,
-    strokeWidth: 2,
+    "data-cy": "ntm-permission-category-hide-button",
     className: "ntm-roles-table-sidebar__drop-down-button",
-    onClick: onClick
-  }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.Down, {
+    onClick: onClick,
     size: 16,
-    strokeWidth: 2,
+    strokeWidth: 2
+  }) : /*#__PURE__*/React__default["default"].createElement(neetoIcons.Down, {
+    "data-cy": "ntm-permission-category-show-button",
     className: "ntm-roles-table-sidebar__drop-down-button",
-    onClick: onClick
+    onClick: onClick,
+    size: 16,
+    strokeWidth: 2
   });
 };
 
@@ -11858,16 +11884,17 @@ const Sidebar = _ref => {
     className: "ntm-roles-table-sidebar__search",
     style: searchWrapperStyle
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Input, {
-    type: "search",
-    placeholder: t("common.search_", {
-      what: t("common.permission", PLURAL).toLocaleLowerCase()
-    }),
-    value: searchTerm,
+    "data-cy": "ntm-search-permissions-input",
     onChange: _ref2 => {
       let value = _ref2.target.value;
       return setSearchTerm(value);
     },
-    prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null)
+    placeholder: t("common.search_", {
+      what: t("common.permission", PLURAL).toLocaleLowerCase()
+    }),
+    prefix: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Search, null),
+    type: "search",
+    value: searchTerm
   })), /*#__PURE__*/React__default["default"].createElement(dist.exports.ScrollSyncPane, {
     group: "vertical"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11880,9 +11907,10 @@ const Sidebar = _ref => {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-roles-table-sidebar__list-item ntm-roles-table-sidebar__list-item--highlighted"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      "data-cy": "ntm-permission-category-title",
+      lineHeight: "normal",
       style: "h4",
-      weight: "semibold",
-      lineHeight: "normal"
+      weight: "semibold"
     }, category), /*#__PURE__*/React__default["default"].createElement(ToggleDropdown, {
       isVisible: isPermissionsVisible,
       onClick: () => toggleDropdown(category)
@@ -12089,10 +12117,11 @@ const Header = _ref => {
     disabled: (_permissions$create = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create !== void 0 ? _permissions$create : hasPermission(MANAGE_MEMBER_PERMISSIONS),
     position: "bottom"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "ntm-add-member-button",
+    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
     label: instance.t("common.add_", {
       what: instance.t(metaName, SINGULAR).toLocaleLowerCase()
     }),
-    disabled: !((_permissions$create2 = permissions === null || permissions === void 0 ? void 0 : permissions.create) !== null && _permissions$create2 !== void 0 ? _permissions$create2 : hasPermission(MANAGE_MEMBER_PERMISSIONS)),
     onClick: onClick
   })));
 };
@@ -12101,8 +12130,9 @@ const Left = _ref => {
   let metaName = _ref.metaName,
     count = _ref.count;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h4",
-    component: "h4"
+    "data-cy": "ntm-filtered-members-count",
+    component: "h4",
+    style: "h4"
   }, count, " ", instance.t(metaName, {
     count
   }).toLocaleLowerCase());
@@ -12117,11 +12147,12 @@ const Right = _ref2 => {
   const permissions = window.globalProps.permissions;
   const hasRequiredPermissions = permissions && hasPermission(MANAGE_MEMBER_PERMISSIONS);
   return isVisible && hasRequiredPermissions ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends({
-    size: "small",
-    style: "secondary",
+    "data-cy": "ntm-manage-roles-button",
     label: instance.t("common.manage_", {
       what: instance.t("common.role", PLURAL).toLocaleLowerCase()
-    })
+    }),
+    size: "small",
+    style: "secondary"
   }, rolesButtonProps)) : null;
 };
 const SubHeader = {
@@ -12153,6 +12184,7 @@ const DEFAULT_MEMBER_FILTER = MEMBER_FILTER.ACTIVE.value;
 const DEFAULT_PAGE_NUMBER = 1;
 const DEFAULT_PAGE_SIZE = 10;
 const DROPDOWN_BUTTON_PROPS = {
+  "data-cy": "ntm-members-table-row-dropdown-button",
   size: "medium"
 };
 const DEFAULT_IS_OPEN_VALUES = {
@@ -12184,9 +12216,10 @@ const renderNameColumn = (_ref, diplayStatusTag) => {
     },
     size: "medium"
   }), displayName, diplayStatusTag && /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
-    type: "outline",
+    "data-cy": "ntm-member-status-tag",
+    label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label,
     style: active ? "primary" : "secondary",
-    label: active ? MEMBER_FILTER.ACTIVE.label : MEMBER_FILTER.DEACTIVATED.label
+    type: "outline"
   }));
 };
 const isDropDownButtonDisabled = permissions => {
@@ -12216,23 +12249,25 @@ const renderDropdownButton = (_ref2, handleUpdateStatus, handleUpdateRole, permi
     disabled: active,
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    size: "small",
     className: "ntm-dropdown__button",
+    "data-cy": "ntm-edit-member-button",
+    disabled: !active,
     onClick: () => active && handleUpdateRole({
       id,
       email,
       role
     }),
-    disabled: !active,
+    size: "small",
     style: "text"
   }, instance.t("common.edit")))), /*#__PURE__*/React__default["default"].createElement(MenuItem.Button, {
-    size: "small",
     className: "ntm-dropdown__button",
+    "data-cy": "ntm-deactivate-member-button",
     onClick: () => handleUpdateStatus({
       id,
       name: displayName,
       active
     }),
+    size: "small",
     style: active && "danger"
   }, active ? instance.t("common.deactivate") : instance.t("common.activate"))))));
 };
@@ -12401,10 +12436,12 @@ const ManageMember = _ref => {
   };
   const isSubmitting = isCreatingMember || isUpdatingMember;
   return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+    "data-cy": "ntm-manage-members-pane-wrapper",
     isOpen: isOpen,
     onClose: onPaneClose
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
     className: "ntm-members-pane__header",
+    "data-cy": "ntm-manage-members-pane-header",
     style: "h2",
     weight: "semibold"
   }, selectedMember ? instance.t("common.edit_", {
@@ -12431,29 +12468,26 @@ const ManageMember = _ref => {
     return /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "ntm-members-pane__body"
     }, selectedMember ? /*#__PURE__*/React__default["default"].createElement(formik$1.Input, {
+      "data-cy": "ntm-manage-member-email-input",
+      disabled: selectedMember,
+      label: instance.t("common.email", SINGULAR),
       name: "emails",
-      "data-cy": "add-member-email-text-field",
       size: "medium",
-      label: instance.t("common.email", SINGULAR),
-      value: ramda.head(emails).value,
-      disabled: selectedMember
+      value: ramda.head(emails).value
     }) : /*#__PURE__*/React__default["default"].createElement(formik$1.EmailInput, {
-      name: "emails",
-      "data-cy": "add-member-email-input",
       counter: COUNTER_PROPS,
-      filterInvalidEmails: FILTER_INVALID_EMAILS,
+      "data-cy": "ntm-manage-member-email-input",
       disabled: selectedMember,
+      filterInvalidEmails: FILTER_INVALID_EMAILS,
+      helpText: instance.t("helpers.enterMultipleEmails"),
       label: `${instance.t("common.email", PLURAL)}*`,
-      placeholder: instance.t("placeholders.email"),
-      helpText: instance.t("helpers.enterMultipleEmails")
+      name: "emails",
+      placeholder: instance.t("placeholders.email")
     }), /*#__PURE__*/React__default["default"].createElement(formik$1.Select, {
       required: true,
-      name: "role",
-      "data-cy": "add-member-role-select",
-      size: "medium",
+      "data-cy": "ntm-manage-member-role-select",
       label: instance.t("common.role", SINGULAR),
-      placeholder: instance.t("placeholders.role"),
-      value: roleValue,
+      name: "role",
       onChange: _ref3 => {
         let value = _ref3.value;
         return setFieldValue("role", value);
@@ -12461,22 +12495,25 @@ const ManageMember = _ref => {
       options: roles.map(role => ({
         label: role,
         value: role
-      }))
+      })),
+      placeholder: instance.t("placeholders.role"),
+      size: "medium",
+      value: roleValue
     }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
       className: "ntm-members-pane__footer"
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      type: "submit",
-      "data-cy": "add-member-submit-button",
-      style: "primary",
+      "data-cy": "ntm-manage-member-submit-button",
+      disabled: !dirty || isSubmitting,
       label: instance.t("buttons.saveChanges"),
+      loading: isSubmitting,
       onClick: () => setHasSubmitted(true),
-      disabled: !dirty || isSubmitting,
-      loading: isSubmitting
+      style: "primary",
+      type: "submit"
     }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-      "data-cy": "add-member-cancel-button",
-      style: "text",
+      "data-cy": "ntm-manage-member-cancel-button",
       label: instance.t("buttons.cancel"),
-      onClick: onPaneClose
+      onClick: onPaneClose,
+      style: "text"
     })));
   }));
 };
@@ -12489,13 +12526,15 @@ const Menu = _ref => {
     handleMemberFilterChange = _ref.handleMemberFilterChange;
   const memberFilterKeys = ramda.keys(MEMBER_FILTER);
   return /*#__PURE__*/React__default["default"].createElement(layouts.MenuBar, {
+    "data-cy": "ntm-members-menubar-heading",
     showMenu: isMenuOpen,
     title: instance.t(metaName, PLURAL)
   }, memberFilterKeys.map(filter => /*#__PURE__*/React__default["default"].createElement(layouts.MenuBar.Block, {
+    active: memberFilterKeys.includes(memberFilter) && ramda.identical(filter, memberFilter),
     count: getPerCategoryCount(filterCounts, filter),
+    "data-cy": `ntm-members-menubar-${slugify(filter)}-block`,
     key: filter,
     label: MEMBER_FILTER[filter].label,
-    active: memberFilterKeys.includes(memberFilter) && ramda.identical(filter, memberFilter),
     onClick: () => handleMemberFilterChange(filter)
   })));
 };
@@ -12543,17 +12582,18 @@ const TeamMembers = _ref => {
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
   const searchProps = {
-    placeholder: instance.t("common.search_", {
-      what: instance.t(metaName, PLURAL).toLocaleLowerCase()
-    }),
-    value: filters.search,
+    "data-cy": "ntm-search-members-input",
     onChange: _ref2 => {
       let value = _ref2.target.value;
       return setFilters(ramda.mergeLeft({
         search: value,
         page: DEFAULT_PAGE_NUMBER
       }));
-    }
+    },
+    placeholder: instance.t("common.search_", {
+      what: instance.t(metaName, PLURAL).toLocaleLowerCase()
+    }),
+    value: filters.search
   };
   const updateMemberAlertProps = {
     member: selectedMember,
@@ -12635,22 +12675,23 @@ const TeamMembers = _ref => {
     className: "ntm-members__table-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
     fixedHeight: true,
-    totalCount: team === null || team === void 0 ? void 0 : team.membersCount,
     allowRowClick: false,
-    rowSelection: false,
-    loading: isMembersFetching,
-    defaultPageSize: parseInt(filters.results, DEFAULT_RADIX),
-    rowData: team === null || team === void 0 ? void 0 : team.members,
     columnData: getColumnData({
       memberFilter: filters.category,
       handleUpdateStatus,
       handleUpdateRole,
       permissions: config === null || config === void 0 ? void 0 : config.permissions
     }),
-    onChange: (_, __, sorter) => handleTableChange(_, __, sorter),
     currentPageNumber: parseInt(filters.page, DEFAULT_RADIX),
+    "data-cy": "ntm-members-table",
+    defaultPageSize: parseInt(filters.results, DEFAULT_RADIX),
+    handlePageChange: handlePageChange(setFilters, filters.category),
+    loading: isMembersFetching,
+    onChange: (_, __, sorter) => handleTableChange(_, __, sorter),
     paginationProps: renderPaginationProps(filters.results),
-    handlePageChange: handlePageChange(setFilters, filters.category)
+    rowData: team === null || team === void 0 ? void 0 : team.members,
+    rowSelection: false,
+    totalCount: team === null || team === void 0 ? void 0 : team.membersCount
   })) : /*#__PURE__*/React__default["default"].createElement(EmptyState, {
     title: instance.t("common.notFound_", {
       what: instance.t(metaName, PLURAL).toLocaleLowerCase()