Web:People:Components: refactoring group selector

products/ASC.People/Client/src/components/GroupSelector/index.js

@@ -90,13 +90,23 @@ class GroupSelector extends React.Component {
       onCancel,
       t,
       searchPlaceHolderLabel,
-      displayType,
+      headerLabel,
+      onArrowClick,
       withoutAside,
       embeddedComponent,
       showCounter,
       theme,
     } = this.props;
 
+    const groups = [
+      {
+        key: "all",
+        id: "all",
+        label: t("AllGroups"),
+        total: 0,
+      },
+    ];
+
     return (
       <AdvancedSelector
         theme={theme}
@@ -104,11 +114,11 @@ class GroupSelector extends React.Component {
         className={className}
         style={style}
         options={options}
+        groups={groups}
         hasNextPage={hasNextPage}
         isNextPageLoading={isNextPageLoading}
         loadNextPage={this.loadNextPage}
         size={"compact"}
-        displayType={displayType}
         selectedOptions={selectedOptions}
         isOpen={isOpen}
         isMultiSelect={isMultiSelect}
@@ -129,13 +139,15 @@ class GroupSelector extends React.Component {
         withoutAside={withoutAside}
         embeddedComponent={embeddedComponent}
         showCounter={showCounter}
+        headerLabel={headerLabel ? headerLabel : t("AddDepartmentsButtonLabel")}
+        onArrowClick={onArrowClick}
       />
     );
   }
 }
 
 GroupSelector.propTypes = {
-  className: PropTypes.oneOf([PropTypes.string, PropTypes.array]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   id: PropTypes.string,
   isDisabled: PropTypes.bool,
   isMultiSelect: PropTypes.bool,
@@ -147,14 +159,12 @@ GroupSelector.propTypes = {
   style: PropTypes.object,
   t: PropTypes.func,
   useFake: PropTypes.bool,
-  displayType: PropTypes.oneOf(["auto", "aside", "dropdown"]),
   withoutAside: PropTypes.bool,
   embeddedComponent: PropTypes.any,
 };
 
 GroupSelector.defaultProps = {
   useFake: false,
-  displayType: "auto",
   withoutAside: false,
 };