fix(Users/Groups): simpilfy CommaSeparatedListWithRestCounter compone…

…nt, now user always will be able to see all group members and all groups of specific user [#704]

packages/ui/src/ui/components/CommaSeparateListWithRestCounter/CommaSeparateListWithRestCounter.scss

@@ -3,43 +3,6 @@
     flex-direction: column;
     justify-content: center;
 
-    &__content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__row {
-        display: flex;
-        width: 100%;
-        align-items: center;
-
-        &-items {
-            flex-shrink: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        &-item {
-            white-space: nowrap;
-        }
-
-        &-counter {
-            padding-left: 1ex;
-            color: var(--secondary-text);
-            text-align: right;
-            cursor: default;
-
-            &_clickable {
-                cursor: pointer;
-            }
-        }
-    }
-
-    &__hover-tooltip {
-        flex-shrink: 0;
-    }
-
     &__tooltip {
         padding: 12px 8px;
     }

packages/ui/src/ui/components/CommaSeparateListWithRestCounter/CommaSeparateListWithRestCounter.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+
+import SimpleModal from '../../components/Modal/SimpleModal';
+
+import './CommaSeparateListWithRestCounter.scss';
+import {VisibleValues} from '../../components/VisibleValues/VisibleValues';
+
+const block = cn('comma-separated-list-with-rest-counter');
+
+const MAX_CHARACTERS_PER_ROW = 80;
+
+type Props = {
+    className?: string;
+    items?: string[];
+    itemRenderer?: (item: string) => React.ReactNode;
+    maxCharactersPerRow?: number;
+};
+
+type State = {
+    showDialog: boolean;
+};
+
+export default class CommaSeparatedListWithRestCounter extends React.Component<Props, State> {
+    state = {
+        showDialog: false,
+    };
+
+    renderItem = (item: string) => {
+        const {itemRenderer} = this.props;
+        return itemRenderer ? itemRenderer(item) : item;
+    };
+
+    closeDialog = () => {
+        this.setState({showDialog: false});
+    };
+
+    openDialog = () => {
+        this.setState({showDialog: true});
+    };
+
+    renderModalContent() {
+        const {items = []} = this.props;
+
+        return (
+            <div className={block('tooltip', 'yc-root')}>
+                {items.map((item) => {
+                    return <div key={item}>{this.renderItem(item)}</div>;
+                })}
+            </div>
+        );
+    }
+
+    render() {
+        const {className, maxCharactersPerRow, items = []} = this.props;
+        const maxTextLength = maxCharactersPerRow || MAX_CHARACTERS_PER_ROW;
+        const {showDialog} = this.state;
+
+        const value = items.length ? items : items.concat('');
+
+        return (
+            <div className={block(null, className)}>
+                <VisibleValues
+                    onCounterClick={this.openDialog}
+                    value={value}
+                    maxTextLength={maxTextLength}
+                    renderItem={this.renderItem}
+                    width="max"
+                    counter="missing-values"
+                />
+                <SimpleModal title={'All items'} visible={showDialog} onCancel={this.closeDialog}>
+                    {showDialog && this.renderModalContent()}
+                </SimpleModal>
+            </div>
+        );
+    }
+}

packages/ui/src/ui/components/VisibleValues/VisibleValues.scss

@@ -10,7 +10,7 @@
         display: flex;
         align-items: center;
         flex-shrink: 1;
-        overflow: hidden;
+        // overflow: hidden;
     }
 
     &__values-item {
@@ -34,6 +34,9 @@
 
     &__counter {
         padding-left: 2px;
+        &_clickable {
+            cursor: pointer;
+        }
     }
 
     &__counter-value {