@bigbinary/neeto-team-members-frontend 2.10.5 → 2.10.7

package/README.md

@@ -2,22 +2,27 @@
 
 The `neeto-team-members-nano` facilitates the administration of team members within neeto applications. The nano exports the `@bigbinary/neeto-team-members-frontend` NPM package and `neeto-team-members-engine` Rails engine for development.
 
-# Contents
+## Contents
+
 1. [Development with Host Application](#development-with-host-application)
     - [Engine](#engine)
-      * [Installation](#installation)
-      * [Usage](#usage)
+      - [Installation](#installation)
+      - [Usage](#usage)
     - [Frontend package](#frontend-package)
-      * [Installation](#installation-1)
-      * [Components](#components)
+      - [Installation](#installation-1)
+      - [Components](#components)
 2. [Instructions for Publishing](#instructions-for-publishing)
 
-# Development with Host Application
-## Engine
+## Development with Host Application
+
+### Engine
+
 The engine is used to seed the roles and permissions for the organization. It also provides concerns to handle common logic related to `User` model.
 
-### Installation
+#### Installation
+
 1. Add this line to your application's Gemfile:
+
    ```ruby
     source "NEETO_GEM_SERVER_URL" do
       # ..existing gems
@@ -25,51 +30,75 @@ The engine is used to seed the roles and permissions for the organization. It al
       gem 'neeto-team-members-engine'
     end
    ```
+
 2. And then execute:
+
    ```shell
    bundle install
    ```
+
 3. Add this line to your application's `config/routes.rb` file:
+
    ```ruby
     mount NeetoTeamMembersEngine::Engine => "/neeto_team_members_engine"
    ```
+
 4. Run the command to bring in all migrations required from the engine to the host application:
+
    ```shell
    bundle exec rails neeto_team_members_engine:install:migrations
    ```
+
 5. Add the migrations to the database:
+
    ```shell
    bundle exec rails db:migrate
    ```
+
 6. Now, run the generator which will copy the required files.
+
    ```shell
    bundle exec rails g neeto_team_members_engine:install
    ```
+
    This command will try to inject the engine's route as well as create a `config/permissions.yml` file to add the permissions required.
 
-### Usage
+#### Usage
+
 You can learn more about the setup and usage here:
+
 1. [Permissions](./docs/engine/permissions.md)
 2. [Roles](./docs/engine/roles.md)
 3. [Concerns](./docs/engine/concerns.md)
 
-## Frontend package
+### Frontend package
+
 The package exports the four components: `Roles`, `TeamMembers`, `Permissions`, and `ManageRole`.
 
-### Installation
-Install the latest `NeetoTeamMembersnano` package using the below command:
+#### Installation
+
+Install the latest `NeetoTeamMembersNano` package using the below command:
 
 ```shell
 yarn add @bigbinary/neeto-team-members-frontend
 ```
-### Components
-#### `Roles`
+
+#### Components
+
+##### `Roles`
+
 This component manages team roles. It includes functionalities such as adding roles and allowing updates to roles with associated permissions.
-##### Props
+
+###### Props
+
 - `config`: Configuration object that includes mandatory specifications for header breadcrumbs and role permissions. It also allows optional configurations for help articles and permission hierarchy.
-##### Configuration
+
+###### Configuration
+
 Refer to the [Roles](./docs/frontend/roles.md) section for detailed information on the available configurations for the `Roles` component.
-##### Usage
+
+###### Usage
+
 ```jsx
 import React from "react";
 
@@ -95,13 +124,21 @@ const App = () => (
 
 export default App;
 ```
-#### `TeamMembers`
+
+##### `TeamMembers`
+
 The component offers functionalities for adding, updating and viewing team members and their roles in a tabular format. Additionally, it provides filtering options based on email, name, and role.
-##### Props
+
+###### Props
+
 - `config`: Configuration object that allows customization of role management, member operation permissions, UI elements like buttons and headers, callback functions, table structure, dropdown actions, and various display aspects.
-##### Configuration
+
+###### Configuration
+
 Refer to the [TeamMembers](./docs/frontend/team_members.md) section for detailed information on the available configurations for the `TeamMembers` component.
-##### Usage
+
+###### Usage
+
 ```jsx
 import React from "react";
 
@@ -128,15 +165,22 @@ const App = () => (
 export default App;
 ```
 
-#### `Permissions`
+##### `Permissions`
+
 The component handles the rendering and management of permissions for team members. It organizes permissions into categories, provides checkboxes for selection, and supports hierarchical structures with parent-child relationships.
-##### Props
+
+###### Props
+
 - `permissions`: An array of permissions.
 - `isDisabled`: A boolean indicating whether the component is disabled. By default, it is false.
 - `permissionRelationConfig`: Configuration for managing parent-child relationships and unchecking permissions on select.
-##### Configuration
+
+###### Configuration
+
 Refer to the [Permissions](./docs/frontend/permissions.md) section for detailed information on the available configurations for the `TeamMembers` component.
-##### Usage
+
+###### Usage
+
 ```jsx
 import React from "react";
 
@@ -166,18 +210,24 @@ const App = () => (
 export default App;
 ```
 
-#### `ManageMembers`
+##### `ManageMembers`
+
 The component is a form-based interface for adding or editing team members.
-##### Props
+
+###### Props
+
 - `config`: Configuration object with various options for customizing the behavior of the component.
 - `onComplete`: Callback function to be executed when the component is closed or the form is submitted.
 - `roles`: An array of roles available for team members.
 - `selectedMember`: The team member object being edited, if applicable.
 - `componentConfig`: Configuration specific to the component, including the type of pane, initial focus reference, etc.
 
-##### Configuration
+###### Configuration
+
 Refer to the [ManageMembers](./docs/frontend/manage_members.md) section for detailed information on the available configurations for the `ManageMembers` component.
-##### Usage
+
+###### Usage
+
 ```jsx
 import React from "react";
 
@@ -207,6 +257,40 @@ const App = () => (
 
 export default App;
 ```
-# Instructions for Publishing
+
+## Instructions for Publishing
 
 Consult the [building and releasing packages](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) guide for details on how to publish.
+
+## Integrations
+
+| Projects       | TeamMembers        | Roles              | Permissions        |
+|----------------| :----------------: | :----------------: | :----------------: |
+| neetoAuth      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoCal       | :white_check_mark: | :white_check_mark: |         -          |
+| neetoChangelog | :white_check_mark: | :white_check_mark: |         -          |
+| neetoChat      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoChatify   | :white_check_mark: | :white_check_mark: |         -          |
+| neetoCI        | :white_check_mark: | :white_check_mark: |         -          |
+| neetoCourse    | :white_check_mark: | :white_check_mark: |         -          |
+| neetoCRM       | :white_check_mark: | :white_check_mark: |         -          |
+| neetoDeploy    | :white_check_mark: | :white_check_mark: | :white_check_mark: |
+| neetoDesk      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoForm      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoGit       | :white_check_mark: | :white_check_mark: |         -          |
+| neetoInvisible | :white_check_mark: | :white_check_mark: |         -          |
+| neetoInvoice   | :white_check_mark: | :white_check_mark: |         -          |
+| neetoKB        | :white_check_mark: | :white_check_mark: |         -          |
+| neetoMonitor   | :white_check_mark: | :white_check_mark: |         -          |
+| neetoPlanner   | :white_check_mark: | :white_check_mark: |         -          |
+| neetoQuiz      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoRecord    | :white_check_mark: | :white_check_mark: |         -          |
+| neetoReplay    | :white_check_mark: | :white_check_mark: |         -          |
+| neetoRunner    | :white_check_mark: | :white_check_mark: |         -          |
+| neetoSign      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoSite      | :white_check_mark: | :white_check_mark: |         -          |
+| neetoTestify   | :white_check_mark: | :white_check_mark: |         -          |
+| neetoTower     | :white_check_mark: | :white_check_mark: |         -          |
+| neetoTrail     | :white_check_mark: | :white_check_mark: |         -          |
+| neetoWheel     | :white_check_mark: | :white_check_mark: |         -          |
+| neetoWireframe | :white_check_mark: | :white_check_mark: |         -          |

package/dist/index.cjs.js

@@ -2792,7 +2792,7 @@ var Roles = function Roles(_ref) {
     roles = _useFetchRoles.data,
     isRolesLoading = _useFetchRoles.isLoading;
   var _useQueryParams = reactUtils.useQueryParams(),
-    _useQueryParams$searc = _useQueryParams.search_term,
+    _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var _useFetchPermissions = useFetchPermissions({
       enabled: isViewPermissionGranted
@@ -5388,7 +5388,7 @@ var useFilters = function useFilters(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useQueryParams = reactUtils.useQueryParams(),
-    _useQueryParams$searc = _useQueryParams.search_term,
+    _useQueryParams$searc = _useQueryParams.searchTerm,
     searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
   var _useState = React.useState(""),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5466,8 +5466,10 @@ var useTeams = function useTeams(_ref) {
     selectedRows = _useState6[0],
     setSelectedRows = _useState6[1];
   var handleUpdateMember = function handleUpdateMember() {
+    var _globalProps$user;
     var id = selectedMember.id,
-      active = selectedMember.active;
+      active = selectedMember.active,
+      email = selectedMember.email;
     var payload = {
       active: !active
     };
@@ -5475,6 +5477,9 @@ var useTeams = function useTeams(_ref) {
       id: id,
       payload: payload
     });
+    if (((_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email) === email) {
+      window.location.pathname = "/";
+    }
   };
   var handleUpdateStatus = function handleUpdateStatus(user) {
     setSelectedMember(user);
@@ -5488,8 +5493,13 @@ var useTeams = function useTeams(_ref) {
     setIsOpen(ramda.assoc("alert", false));
     setSelectedMember(null);
   };
-  var handleModalClose = function handleModalClose() {
+  var handlePaneClose = function handlePaneClose(_ref2) {
+    var _globalProps$user2;
+    var submitted = _ref2.submitted;
     setIsOpen(ramda.assoc("manageMember", false));
+    if (submitted && ((_globalProps$user2 = initializers.globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.email) === (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.email)) {
+      window.location.pathname = "/";
+    }
     setSelectedMember(null);
   };
   var resetSelectedRows = function resetSelectedRows() {
@@ -5524,7 +5534,7 @@ var useTeams = function useTeams(_ref) {
   return {
     handleAlertClose: handleAlertClose,
     handleMemberFilterChange: handleMemberFilterChange,
-    handleModalClose: handleModalClose,
+    handlePaneClose: handlePaneClose,
     handleRowSelect: handleRowSelect,
     handleTableChange: handleTableChange,
     handleUpdateMember: handleUpdateMember,
@@ -5733,12 +5743,16 @@ var Left = function Left(_ref) {
     }),
     bulkUpdateMember = _useBulkUpdateMembers.mutate;
   var handleDeactivateMembers = function handleDeactivateMembers() {
-    return bulkUpdateMember({
+    var _selectedRows$emails, _globalProps$user;
+    bulkUpdateMember({
       users: {
         active: false,
         emails: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.emails
       }
     });
+    if (selectedRows !== null && selectedRows !== void 0 && (_selectedRows$emails = selectedRows.emails) !== null && _selectedRows$emails !== void 0 && _selectedRows$emails.includes((_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email)) {
+      window.location.pathname = "/";
+    }
   };
   var handleActivateMembers = function handleActivateMembers() {
     return bulkUpdateMember({
@@ -5749,6 +5763,7 @@ var Left = function Left(_ref) {
     });
   };
   var handleRoleChange = function handleRoleChange(role) {
+    var _selectedRows$emails2, _globalProps$user2;
     bulkUpdateMember({
       users: {
         active: true,
@@ -5756,6 +5771,9 @@ var Left = function Left(_ref) {
         organization_role: role
       }
     });
+    if (selectedRows !== null && selectedRows !== void 0 && (_selectedRows$emails2 = selectedRows.emails) !== null && _selectedRows$emails2 !== void 0 && _selectedRows$emails2.includes((_globalProps$user2 = initializers.globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.email)) {
+      window.location.pathname = "/";
+    }
   };
   var alertTypes = [{
     message: "neetoTeamMembers.alerts.messages.deactivateMember",
@@ -5826,11 +5844,11 @@ var Left = function Left(_ref) {
       return setAlertType("activate");
     }
   }, t("neetoTeamMembers.common.activate")), !(config !== null && config !== void 0 && (_config$hiddenBulkAct = config.hiddenBulkActions) !== null && _config$hiddenBulkAct !== void 0 && _config$hiddenBulkAct.includes("role")) && /*#__PURE__*/React__default["default"].createElement(RolesDropdown, {
-    disabled: hasDeactivateMembers,
-    hasUpdatePermission: isUpdatePermissionGranted,
     roles: roles,
     setAlertType: setAlertType,
-    setBulkUpdateRole: setBulkUpdateRole
+    setBulkUpdateRole: setBulkUpdateRole,
+    disabled: hasDeactivateMembers,
+    hasUpdatePermission: isUpdatePermissionGranted
   }), config === null || config === void 0 || (_config$otherBulkActi = config.otherBulkActions) === null || _config$otherBulkActi === void 0 ? void 0 : _config$otherBulkActi.call(config))))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: selectedAlert,
     submitButtonLabel: getButtonLabel(selectedAlert === null || selectedAlert === void 0 ? void 0 : selectedAlert.type),
@@ -6422,6 +6440,7 @@ var ManageMember = function ManageMember(_ref) {
     isAppListEnabled: true
   });
   var shouldSkipAppListPage = React.useRef(false);
+  var formikValues = React.useRef(null);
   var manageMemberComponentConfig = _objectSpread$1(_objectSpread$1({}, DEFAULT_COMPONENT_CONFIG), {}, {
     initialFocusRef: inputReference
   }, componentConfig);
@@ -6461,14 +6480,25 @@ var ManageMember = function ManageMember(_ref) {
   var _useUpdateMember = useUpdateMember({
       onSuccess: function onSuccess() {
         var _config$updateMember;
-        handleClose();
+        handleClose(true);
         config === null || config === void 0 || (_config$updateMember = config.updateMember) === null || _config$updateMember === void 0 || (_config$updateMember = _config$updateMember.onSuccess) === null || _config$updateMember === void 0 ? void 0 : _config$updateMember.callback();
       }
     }),
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
+  var hasRoleChanged = function hasRoleChanged(_ref2) {
+    var submitted = _ref2.submitted,
+      values = _ref2.values;
+    return submitted && (values === null || values === void 0 ? void 0 : values.role) !== (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.role);
+  };
   var handleClose = function handleClose() {
-    onComplete();
+    var submitted = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    onComplete({
+      submitted: hasRoleChanged({
+        submitted: submitted,
+        values: formikValues.current
+      })
+    });
     setCurrentPage(FORM_PAGES.MAIN);
     appListSavedStateReference.current = {
       isAppListEnabled: true
@@ -6539,7 +6569,9 @@ var ManageMember = function ManageMember(_ref) {
     "data-cy": "ntm-manage-members-pane-wrapper",
     initialFocusRef: manageMemberComponentConfig.initialFocusRef,
     isOpen: manageMemberComponentConfig.isOpen,
-    onClose: handleClose
+    onClose: function onClose() {
+      return handleClose(false);
+    }
   }, /*#__PURE__*/React__default["default"].createElement(Component.Header, _extends({}, manageMemberComponentConfig.headerProps, {
     className: classnames__default["default"]([{
       "ntm-manage-members__header": currentPage !== FORM_PAGES.MAIN
@@ -6565,12 +6597,13 @@ var ManageMember = function ManageMember(_ref) {
       initialValues: renderInitialValues(selectedMember, filteredRoles, globalRoles),
       onSubmit: handleOnSubmit
     })
-  }, function (_ref2) {
+  }, function (_ref3) {
     var _manageMemberComponen2, _manageMemberComponen3;
-    var values = _ref2.values,
-      dirty = _ref2.dirty;
+    var values = _ref3.values,
+      dirty = _ref3.dirty;
     var emails = values.emails,
       role = values.role;
+    formikValues.current = values;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/React__default["default"].createElement(Component.Body, _extends({}, manageMemberComponentConfig.bodyProps, {
@@ -6588,7 +6621,9 @@ var ManageMember = function ManageMember(_ref) {
       "data-cy": "ntm-manage-member-cancel-button",
       label: t("neetoTeamMembers.buttons.cancel"),
       style: "text",
-      onClick: handleClose
+      onClick: function onClick() {
+        return handleClose(false);
+      }
     })));
   }));
 };
@@ -6684,7 +6719,7 @@ var TeamMembers = function TeamMembers(_ref) {
     }),
     handleAlertClose = _useTeams.handleAlertClose,
     handleMemberFilterChange = _useTeams.handleMemberFilterChange,
-    handleModalClose = _useTeams.handleModalClose,
+    handlePaneClose = _useTeams.handlePaneClose,
     handleRowSelect = _useTeams.handleRowSelect,
     handleTableChange = _useTeams.handleTableChange,
     handleUpdateMember = _useTeams.handleUpdateMember,
@@ -6754,8 +6789,8 @@ var TeamMembers = function TeamMembers(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "ntm-members-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(Menu, {
-    filterCounts: team === null || team === void 0 ? void 0 : team.perCategoryCount,
     handleMemberFilterChange: handleMemberFilterChange,
+    filterCounts: team === null || team === void 0 ? void 0 : team.perCategoryCount,
     isMenuOpen: isOpen.menuBar,
     memberFilter: filters.category
   }), /*#__PURE__*/React__default["default"].createElement(Container__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Header$1, {
@@ -6765,10 +6800,10 @@ var TeamMembers = function TeamMembers(_ref) {
     filterCategory: filters.category
   }), /*#__PURE__*/React__default["default"].createElement(SubHeaderMolecule__default["default"], {
     leftActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader.Left, {
-      filteredCount: team === null || team === void 0 ? void 0 : team.membersCount,
       config: config,
       selectedRows: selectedRows,
       setSelectedRows: setSelectedRows,
+      filteredCount: team === null || team === void 0 ? void 0 : team.membersCount,
       roles: filteredRoles
     }),
     rightActionBlock: /*#__PURE__*/React__default["default"].createElement(SubHeader.Right, {
@@ -6806,13 +6841,13 @@ var TeamMembers = function TeamMembers(_ref) {
     primaryButtonProps: noDataButtonProps,
     title: noDataTitle
   })))), /*#__PURE__*/React__default["default"].createElement(ManageMember, {
+    config: config,
+    selectedMember: selectedMember,
     componentConfig: {
       isOpen: isOpen.manageMember
     },
-    config: config,
-    selectedMember: selectedMember,
     roles: filteredRoles,
-    onComplete: handleModalClose
+    onComplete: handlePaneClose
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     cancelButtonLabel: t("neetoTeamMembers.buttons.cancel"),
     isOpen: isOpen.alert,