@bigbinary/neeto-team-members-frontend 2.13.2 → 2.13.3

package/dist/index.cjs.js

@@ -26,6 +26,7 @@ var NeetoHeader = require('@bigbinary/neeto-molecules/Header');
 var formik$1 = require('formik');
 var classnames = require('classnames');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
 var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
 var Columns$1 = require('@bigbinary/neeto-molecules/Columns');
 var SubHeaderMolecule = require('@bigbinary/neeto-molecules/SubHeader');
@@ -2074,7 +2075,7 @@ var organizationRolesApi = {
   update: update$1
 };
 
-var _excluded$2 = ["onSuccess"],
+var _excluded$3 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"],
   _excluded4 = ["onSuccess"];
@@ -2094,7 +2095,7 @@ var useFetchGlobalRoles = function useFetchGlobalRoles() {
 };
 var useCreateRole = function useCreateRole(_ref) {
   var _onSuccess = _ref.onSuccess,
-    options = _objectWithoutProperties(_ref, _excluded$2);
+    options = _objectWithoutProperties(_ref, _excluded$3);
   return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$d({
     onSuccess: function onSuccess() {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5312,7 +5313,7 @@ var teamsApi = {
   update: update
 };
 
-var _excluded$1 = ["onSuccess"],
+var _excluded$2 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -5331,7 +5332,7 @@ var useFetchMembers = function useFetchMembers() {
 };
 var useCreateMember = function useCreateMember(_ref) {
   var _onSuccess = _ref.onSuccess,
-    options = _objectWithoutProperties(_ref, _excluded$1);
+    options = _objectWithoutProperties(_ref, _excluded$2);
   return reactQuery.useMutation(teamsApi.create, _objectSpread$9({
     onSuccess: function onSuccess(response) {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
@@ -5385,8 +5386,10 @@ var useFetchFilterOptions = function useFetchFilterOptions(_ref5) {
   }));
 };
 
-var _URLSearchParams$get;
-var URL_PARAMS = new URLSearchParams(window.location.search);
+var _getQueryParams = utils$3.getQueryParams(),
+  page = _getQueryParams.page,
+  pageSize = _getQueryParams.pageSize,
+  filter = _getQueryParams.filter;
 var MEMBER_FILTER = {
   ACTIVE: {
     label: "neetoTeamMembers.common.active",
@@ -5411,11 +5414,10 @@ var DEFAULT_IS_OPEN_VALUES = {
   manageMember: false,
   alert: false
 };
-var URL_CATEGORY_FILTER_VALUE = (_URLSearchParams$get = new URLSearchParams(window.location.search).get("filter")) === null || _URLSearchParams$get === void 0 ? void 0 : _URLSearchParams$get.toUpperCase();
 var DEFAULT_FILTER_VALUES = {
-  page: ramda.clamp(1, Infinity, parseInt(URL_PARAMS.get("page"))) || constants.DEFAULT_PAGE_INDEX,
-  pageSize: ramda.clamp(10, 100, parseInt(URL_PARAMS.get("pageSize"))) || constants.DEFAULT_PAGE_SIZE,
-  category: URL_CATEGORY_FILTER_VALUE || DEFAULT_MEMBER_FILTER,
+  page: ramda.clamp(1, Infinity, parseInt(page)) || constants.DEFAULT_PAGE_INDEX,
+  pageSize: ramda.clamp(10, 100, parseInt(pageSize)) || constants.DEFAULT_PAGE_SIZE,
+  category: (filter === null || filter === void 0 ? void 0 : filter.toUpperCase()) || DEFAULT_MEMBER_FILTER,
   sortBy: "",
   orderBy: "",
   neetoFilters: []
@@ -5564,25 +5566,16 @@ var getDefaultColumns = function getDefaultColumns(_ref5) {
     title: i18next__default["default"].t("neetoTeamMembers.common.role", constants.SINGULAR)
   }];
 };
-var getSearchParams = function getSearchParams(_ref6, filter) {
-  var page = _ref6.page,
-    pageSize = _ref6.pageSize;
-  var searchParams = new URLSearchParams(window.location.search);
-  searchParams.set("page", page);
-  searchParams.set("pageSize", pageSize);
-  searchParams.set("filter", filter.toLowerCase());
-  return searchParams.toString();
-};
 var removeExcludedRole = ramda.curry(function (excludedRoles, role) {
   return !(excludedRoles !== null && excludedRoles !== void 0 && excludedRoles.includes(role === null || role === void 0 ? void 0 : role.name));
 });
-var getColumnData = function getColumnData(_ref7) {
+var getColumnData = function getColumnData(_ref6) {
   var _config$otherColumns;
-  var config = _ref7.config,
-    handleUpdateRole = _ref7.handleUpdateRole,
-    handleUpdateStatus = _ref7.handleUpdateStatus,
-    memberFilter = _ref7.memberFilter,
-    isSize = _ref7.isSize;
+  var config = _ref6.config,
+    handleUpdateRole = _ref6.handleUpdateRole,
+    handleUpdateStatus = _ref6.handleUpdateStatus,
+    memberFilter = _ref6.memberFilter,
+    isSize = _ref6.isSize;
   var displayStatusTag = ramda.identical(memberFilter, MEMBER_FILTER.ALL.value);
   var otherColumns = (_config$otherColumns = config === null || config === void 0 ? void 0 : config.otherColumns) !== null && _config$otherColumns !== void 0 ? _config$otherColumns : [];
   var defaultColumns = getDefaultColumns({
@@ -5594,15 +5587,15 @@ var getColumnData = function getColumnData(_ref7) {
     isSize: isSize
   });
   var columns = defaultColumns.map(function (column) {
-    var otherColumn = otherColumns.find(function (_ref8) {
-      var dataIndex = _ref8.dataIndex;
+    var otherColumn = otherColumns.find(function (_ref7) {
+      var dataIndex = _ref7.dataIndex;
       return ramda.identical(dataIndex, column.dataIndex);
     });
     return otherColumn || column;
   });
   otherColumns.forEach(function (otherColumn) {
-    var column = columns.find(function (_ref9) {
-      var dataIndex = _ref9.dataIndex;
+    var column = columns.find(function (_ref8) {
+      var dataIndex = _ref8.dataIndex;
       return ramda.identical(dataIndex, otherColumn.dataIndex);
     });
     if (!column) columns.push(otherColumn);
@@ -5628,14 +5621,20 @@ var renderUpdateAlert = function renderUpdateAlert(field, props) {
   }
   return field === "title" ? getDefaultAlertTitle(props) : getDefaultAlertMessage(props);
 };
-var handlePageChange = function handlePageChange(setFilters, filter) {
+var handlePageChange = function handlePageChange(setFilters, filter, history) {
   return function (page, pageSize) {
-    var pageParams = {
+    var searchParams = utils$3.getQueryParams({
+      toCamelCase: false
+    });
+    history.replace(utils$3.buildUrl(window.location.pathname, ramda.mergeLeft({
+      page: page,
+      page_size: pageSize,
+      filter: filter.toLowerCase()
+    }, searchParams)));
+    setFilters(ramda.mergeLeft({
       page: page,
       pageSize: pageSize
-    };
-    window.history.replaceState({}, "", "?".concat(getSearchParams(pageParams, filter)));
-    setFilters(ramda.mergeLeft(pageParams));
+    }));
   };
 };
 var renderPaginationProps = function renderPaginationProps(size) {
@@ -5673,15 +5672,15 @@ var defaultNeetoFiltersColumns = function defaultNeetoFiltersColumns() {
     values: []
   }];
 };
-var buildFilterColumns = function buildFilterColumns(_ref10) {
-  var _ref10$options = _ref10.options,
-    _ref10$options$emails = _ref10$options.emails,
-    emails = _ref10$options$emails === void 0 ? [] : _ref10$options$emails,
-    _ref10$options$organi = _ref10$options.organizationRoles,
-    organizationRoles = _ref10$options$organi === void 0 ? [] : _ref10$options$organi,
-    _ref10$emailConfig = _ref10.emailConfig,
-    setSearchTerm = _ref10$emailConfig.setSearchTerm,
-    isLoading = _ref10$emailConfig.isLoading;
+var buildFilterColumns = function buildFilterColumns(_ref9) {
+  var _ref9$options = _ref9.options,
+    _ref9$options$emails = _ref9$options.emails,
+    emails = _ref9$options$emails === void 0 ? [] : _ref9$options$emails,
+    _ref9$options$organiz = _ref9$options.organizationRoles,
+    organizationRoles = _ref9$options$organiz === void 0 ? [] : _ref9$options$organiz,
+    _ref9$emailConfig = _ref9.emailConfig,
+    setSearchTerm = _ref9$emailConfig.setSearchTerm,
+    isLoading = _ref9$emailConfig.isLoading;
   var columnValues = {
     email: emails.map(neetoCist.toLabelAndValue),
     role: organizationRoles.map(neetoCist.toLabelAndValue)
@@ -5699,32 +5698,19 @@ var buildFilterColumns = function buildFilterColumns(_ref10) {
 };
 var getValidCategory = function getValidCategory(category) {
   var defaultCategory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MEMBER_FILTER.ACTIVE.value;
-  return Object.values(MEMBER_FILTER).some(function (_ref11) {
-    var value = _ref11.value;
+  return Object.values(MEMBER_FILTER).some(function (_ref10) {
+    var value = _ref10.value;
     return ramda.identical(value, category);
   }) ? category : defaultCategory;
 };
-var addUrlSearchParams = function addUrlSearchParams(history) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return Object.entries(params).forEach(function (_ref12) {
-    var _ref13 = _slicedToArray(_ref12, 2),
-      key = _ref13[0],
-      value = _ref13[1];
-    var searchParams = new URLSearchParams(window.location.search);
-    searchParams.set(key, value);
-    history.push({
-      search: searchParams.toString()
-    });
-  });
-};
 var getFilteredRoles = function getFilteredRoles() {
   var roles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return ramda.filter(removeExcludedRole(config === null || config === void 0 ? void 0 : config.excludedRoles), roles);
 };
-var generateNoDataContent = function generateNoDataContent(_ref14) {
-  var filterCategory = _ref14.filterCategory,
-    buttonProps = _ref14.buttonProps;
+var generateNoDataContent = function generateNoDataContent(_ref11) {
+  var filterCategory = _ref11.filterCategory,
+    buttonProps = _ref11.buttonProps;
   var disabled = buttonProps.disabled,
     onClick = buttonProps.onClick;
   var kind = MEMBER_FILTER[filterCategory].value.toLowerCase();
@@ -5756,7 +5742,8 @@ var useFilters = function useFilters(_ref) {
     t = _useTranslation.t;
   var _useQueryParams = reactUtils.useQueryParams(),
     _useQueryParams$searc = _useQueryParams.searchTerm,
-    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
+    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc,
+    filter = _useQueryParams.filter;
   var searchKeywordProps = {
     node: "first_name,last_name,email",
     value: searchTerm,
@@ -5769,7 +5756,7 @@ var useFilters = function useFilters(_ref) {
   var defaultNeetoFilters = neetoFiltersFrontend.buildFiltersFromURL([].concat(_toConsumableArray((_config$filterColumns = config === null || config === void 0 ? void 0 : config.filterColumns) !== null && _config$filterColumns !== void 0 ? _config$filterColumns : defaultNeetoFiltersColumns()), [searchKeywordProps]));
   var _useState3 = React.useState(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, DEFAULT_FILTER_VALUES), config === null || config === void 0 ? void 0 : config.defaultFilterValues), {}, {
       neetoFilters: defaultNeetoFilters,
-      category: getValidCategory(URL_CATEGORY_FILTER_VALUE, config === null || config === void 0 || (_config$defaultFilter = config.defaultFilterValues) === null || _config$defaultFilter === void 0 ? void 0 : _config$defaultFilter.category)
+      category: getValidCategory(filter === null || filter === void 0 ? void 0 : filter.toUpperCase(), config === null || config === void 0 || (_config$defaultFilter = config.defaultFilterValues) === null || _config$defaultFilter === void 0 ? void 0 : _config$defaultFilter.category)
     })),
     _useState4 = _slicedToArray(_useState3, 2),
     filters = _useState4[0],
@@ -5824,6 +5811,7 @@ var useTeams = function useTeams(_ref) {
     filters = _ref.filters,
     setFilters = _ref.setFilters,
     updateMember = _ref.updateMember;
+  var history = reactRouterDom.useHistory();
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedMember = _useState2[0],
@@ -5879,7 +5867,7 @@ var useTeams = function useTeams(_ref) {
   var handleMemberFilterChange = function handleMemberFilterChange(filter) {
     setFilters(ramda.assoc("category", filter));
     clearSelectedMembers(filters.category, filter) && setSelectedRows(DEFAULT_SELECTED_ROWS);
-    handlePageChange(setFilters, filter)(constants.DEFAULT_PAGE_INDEX, filters.pageSize);
+    handlePageChange(setFilters, filter, history)(constants.DEFAULT_PAGE_INDEX, filters.pageSize);
   };
   var handleTableChange = function handleTableChange(_, __, sorter) {
     setFilters(ramda.mergeLeft({
@@ -6402,6 +6390,7 @@ var AppList = function AppList(_ref) {
   })));
 };
 
+var _excluded$1 = ["appRoles", "emails", "firstName", "lastName", "role"];
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getProductName = function getProductName(activeAppRoles) {
@@ -6444,9 +6433,14 @@ var generateAppsRolesInitialValue = function generateAppsRolesInitialValue(globa
 var isAdminRole = function isAdminRole(role) {
   return ramda.includes(role, ADMIN_ROLES) ? ramda.equals(ADMIN_ROLE_NAME) : neetoCist.notEquals(ADMIN_ROLE_NAME);
 };
-var renderInitialValues = function renderInitialValues(selectedMember, roles, globalRoles) {
+var renderInitialValues = function renderInitialValues(_ref) {
   var _roles$, _roles$2;
-  return _objectSpread$3({
+  var _ref$additionalValues = _ref.additionalValues,
+    additionalValues = _ref$additionalValues === void 0 ? {} : _ref$additionalValues,
+    globalRoles = _ref.globalRoles,
+    roles = _ref.roles,
+    selectedMember = _ref.selectedMember;
+  return _objectSpread$3(_objectSpread$3({
     firstName: (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.firstName) || "",
     lastName: (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.lastName) || "",
     emails: selectedMember ? [{
@@ -6457,33 +6451,34 @@ var renderInitialValues = function renderInitialValues(selectedMember, roles, gl
     role: (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.role) || ((_roles$ = roles[1]) === null || _roles$ === void 0 ? void 0 : _roles$.name) || ""
   }, !selectedMember && {
     appRoles: generateAppsRolesInitialValue(globalRoles, (_roles$2 = roles[1]) === null || _roles$2 === void 0 ? void 0 : _roles$2.name)
-  });
+  }), additionalValues);
 };
-var renderPayload = function renderPayload(_ref) {
-  var appRoles = _ref.appRoles,
-    emails = _ref.emails,
-    firstName = _ref.firstName,
-    lastName = _ref.lastName,
-    role = _ref.role;
+var renderPayload = function renderPayload(_ref2) {
+  var appRoles = _ref2.appRoles,
+    emails = _ref2.emails,
+    firstName = _ref2.firstName,
+    lastName = _ref2.lastName,
+    role = _ref2.role,
+    otherValues = _objectWithoutProperties(_ref2, _excluded$1);
   var selectedMember = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  return selectedMember ? {
+  return selectedMember ? _objectSpread$3({
     active: true,
     firstName: firstName.trim(),
     lastName: lastName.trim(),
     organizationRole: role,
     email: emails[0].value
-  } : {
-    user: {
+  }, otherValues) : {
+    user: _objectSpread$3({
       emails: ramda.pluck("value", emails),
       organizationRole: role,
       appRoles: appRoles
-    }
+    }, otherValues)
   };
 };
-var getSingleInvitationTranslationProps = function getSingleInvitationTranslationProps(_ref2) {
-  var activeAppRoles = _ref2.activeAppRoles,
-    role = _ref2.role,
-    selectedEmail = _ref2.selectedEmail;
+var getSingleInvitationTranslationProps = function getSingleInvitationTranslationProps(_ref3) {
+  var activeAppRoles = _ref3.activeAppRoles,
+    role = _ref3.role,
+    selectedEmail = _ref3.selectedEmail;
   return {
     count: selectedEmail.length,
     emails: selectedEmail,
@@ -6752,7 +6747,7 @@ var RolesRadioGroup = function RolesRadioGroup(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(formik.Radio, {
     stacked: true,
-    className: "ntm-members-radio-group",
+    className: "ntm-members-radio-group flex-grow-0",
     "data-cy": "ntm-manage-member-roles-group",
     name: "role",
     label: /*#__PURE__*/React__default["default"].createElement(LabelWithIcon, {
@@ -6929,7 +6924,7 @@ var ManageMember = function ManageMember(_ref) {
           role: role,
           isEdit: !!selectedMember,
           roles: filteredRoles
-        }));
+        }), config.additionalFieldsComponents);
       case FORM_PAGES.APP_LIST:
         return /*#__PURE__*/React__default["default"].createElement(AppList, {
           globalRoles: globalRoles,
@@ -6971,7 +6966,12 @@ var ManageMember = function ManageMember(_ref) {
   }, getTitle())), /*#__PURE__*/React__default["default"].createElement(formik.Form, {
     ref: formReference,
     formikProps: _objectSpread$1(_objectSpread$1({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
-      initialValues: renderInitialValues(selectedMember, filteredRoles, globalRoles),
+      initialValues: renderInitialValues({
+        additionalValues: config.additionalFieldsInitialValues,
+        globalRoles: globalRoles,
+        roles: filteredRoles,
+        selectedMember: selectedMember
+      }),
       onSubmit: handleOnSubmit
     })
   }, function (_ref3) {
@@ -7039,9 +7039,11 @@ var TeamMembers = function TeamMembers(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
-  var location = reactRouterDom.useLocation();
   var _useBreakpoints = reactUtils.useBreakpoints(),
     isSize = _useBreakpoints.isSize;
+  var queryParams = reactUtils.useQueryParams();
+  var _queryParams$filter = queryParams.filter,
+    category = _queryParams$filter === void 0 ? MEMBER_FILTER.ACTIVE.value.toLowerCase() : _queryParams$filter;
   var isViewPermissionGranted = config.permissions.view;
   var isCreatePermissionGranted = config.permissions.create;
   var _useState = React.useState(false),
@@ -7049,11 +7051,8 @@ var TeamMembers = function TeamMembers(_ref) {
     isFiltersPaneOpen = _useState2[0],
     setIsFiltersPaneOpen = _useState2[1];
   React.useEffect(function () {
-    if (ramda.isEmpty(location.search)) return;
-    var category = new URLSearchParams(location.search).get("filter");
-    if (ramda.isNil(category)) return;
     handleMemberFilterChange(category === null || category === void 0 ? void 0 : category.toUpperCase());
-  }, [location.search]);
+  }, [category]);
   var _useFilters = useFilters({
       config: config
     }),
@@ -7139,9 +7138,9 @@ var TeamMembers = function TeamMembers(_ref) {
       page: constants.DEFAULT_PAGE_INDEX
     }));
     clearSelectedMembers(filters.category, filters) && setSelectedRows(DEFAULT_SELECTED_ROWS);
-    addUrlSearchParams(history, {
-      page: constants.DEFAULT_PAGE_INDEX.toString()
-    });
+    history.push(utils$3.buildUrl(window.location.pathname, ramda.mergeLeft({
+      page: constants.DEFAULT_PAGE_INDEX
+    }, queryParams)));
   };
   var _generateNoDataConten = generateNoDataContent({
       filterCategory: filters.category,
@@ -7210,7 +7209,7 @@ var TeamMembers = function TeamMembers(_ref) {
     },
     selectedRowKeys: selectedRows.keys,
     totalCount: team === null || team === void 0 ? void 0 : team.membersCount,
-    handlePageChange: handlePageChange(setFilters, filters.category),
+    handlePageChange: handlePageChange(setFilters, filters.category, history),
     onChange: handleTableChange,
     onColumnHide: function onColumnHide(_ref2) {
       var dataIndex = _ref2.dataIndex;