GUI Tools: tools filter imkprovements

client/src/components/tools/DockerRegistriesGroupsDropdownContent.js

@@ -24,10 +24,11 @@ import styles from './Tools.css';
 
 @observer
 export default class DockerRegistriesGroupsDropdownContent extends React.Component {
-
   static propTypes = {
     isVisible: PropTypes.bool,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
+    filter: PropTypes.string,
+    filters: PropTypes.object
   };
 
   state = {
@@ -60,6 +61,8 @@ export default class DockerRegistriesGroupsDropdownContent extends React.Compone
         />
         <DockerRegistryGroupsList
           groups={this.props.groups}
+          filter={this.props.filter}
+          filters={this.props.filters}
           currentGroup={this.props.currentGroup}
           onNavigate={(id) => {
             this.setState({
@@ -82,5 +85,4 @@ export default class DockerRegistriesGroupsDropdownContent extends React.Compone
       });
     }
   }
-
 }

client/src/components/tools/DockerRegistriesGroupsList.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2019 EPAM Systems, Inc. (https://www.epam.com/)
+ * Copyright 2017-2023 EPAM Systems, Inc. (https://www.epam.com/)
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,20 +15,53 @@
  */
 
 import React from 'react';
-import {observer} from 'mobx-react/index';
-import {Button, Row} from 'antd';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+  Button,
+  Row,
+  Icon,
+  Tag,
+  Collapse
+} from 'antd';
+import {observer} from 'mobx-react/index';
+import styles from './DockerRegistryGroupsList.css';
+
+const MODES = {
+  groups: 'groups',
+  extended: 'extended'
+};
 
 @observer
 export default class DockerRegistryGroupsList extends React.Component {
-
   static propTypes = {
     groups: PropTypes.array,
     groupSearch: PropTypes.string,
-    onNavigate: PropTypes.func
+    onNavigate: PropTypes.func,
+    mode: PropTypes.string,
+    filter: PropTypes.string,
+    filters: PropTypes.object
+  };
+
+  static defaultProps = {
+    mode: MODES.extended
   };
 
+  get selectedLibraryGroup () {
+    const {filter, currentGroup = {}} = this.props;
+    if (filter) {
+      return undefined;
+    }
+    return currentGroup;
+  }
+
   groupsFilter = group => {
+    const {mode} = this.props;
+    if (
+      mode === MODES.extended && group.privateGroup
+    ) {
+      return true;
+    }
     if (!this.props.groupSearch || !this.props.groupSearch.length) {
       return true;
     }
@@ -40,46 +73,114 @@ export default class DockerRegistryGroupsList extends React.Component {
 
   getGroupName = (group) => {
     if (group.privateGroup) {
-      return 'personal';
+      return 'Personal';
     }
     return group.name;
   };
 
   onSelectGroup = (id) => {
-    this.props.onNavigate && this.props.onNavigate(id);
+    this.props.onNavigate && this.props.onNavigate(encodeURIComponent(id));
+  };
+
+  renderFilterCard = group => {
+    const {filter} = this.props;
+    const isActive = filter === group.id;
+    return (
+      <Button
+        className={classNames(styles.cardContainer, styles.button)}
+        id={`group-${group.id}-filter`}
+        onClick={() => this.onSelectGroup(group.id)}
+      >
+        <div className={styles.card}>
+          <span className={styles.heading}>
+            {group.title}
+          </span>
+          {group.description ? (
+            <span
+              className={classNames(
+                styles.comment,
+                'cp-text-not-important'
+              )}
+            >
+              {group.description}
+            </span>
+          ) : null}
+        </div>
+        {isActive ? (
+          <Icon
+            className={styles.activeGroupIcon}
+            type="check"
+          />
+        ) : null}
+      </Button>
+    );
+  }
+
+  renderGroupsSelector = () => {
+    const {groups} = this.props;
+    const filteredGroups = groups.filter(this.groupsFilter)
+      .map(group => {
+        return (
+          <Row key={group.id} type="flex">
+            <Button
+              id={`group-${group.id}-button`}
+              className={styles.button}
+              style={{
+                fontWeight: group.privateGroup ? 'bold' : 'normal',
+                fontStyle: group.privateGroup ? 'italic' : 'normal',
+                padding: 0
+              }}
+              onClick={() => this.onSelectGroup(group.id)}
+            >
+              {this.getGroupName(group)}
+            </Button>
+          </Row>
+        );
+      });
+    return (
+      <div className={styles.section}>
+        {filteredGroups}
+      </div>
+    );
   };
 
   render () {
+    const {mode, filters} = this.props;
+    if (mode === MODES.groups) {
+      return (
+        <div style={{overflowY: 'auto', flex: '1 1 auto'}}>
+          {this.renderGroupsSelector()}
+        </div>
+      );
+    }
     return (
       <div style={{overflowY: 'auto', flex: '1 1 auto'}}>
-        {
-          this.props.groups.filter(this.groupsFilter)
-            .map(group => {
-              return (
-                <Row key={group.id} type="flex">
-                  <Button
-                    id={`group-${group.id}-button`}
-                    style={{
-                      textAlign: 'left',
-                      width: '100%',
-                      border: 'none',
-                      fontWeight: group.privateGroup ? 'bold' : 'normal',
-                      fontStyle: group.privateGroup ? 'italic' : 'normal',
-                      backgroundColor: 'transparent'
-                    }}
-                    onClick={
-                      () => this.onSelectGroup(group.id)
-                    }>
-                    {
-                      this.getGroupName(group)
-                    }
-                  </Button>
-                </Row>
-              );
-            })
-        }
+        {filters.groups.map(group => (
+          <Row key={group.id} type="flex">
+            {this.renderFilterCard(group)}
+          </Row>
+        ))}
+        <Collapse bordered={false}>
+          <Collapse.Panel
+            className={styles.collapseContainer}
+            header={(
+              <div>
+                <span>Tool groups</span>
+                {this.selectedLibraryGroup ? (
+                  <Tag
+                    style={{marginLeft: 5}}
+                  >
+                    {this.getGroupName(this.selectedLibraryGroup)}
+                  </Tag>
+                ) : null}
+              </div>
+            )}
+            key="groups"
+          >
+            {this.renderGroupsSelector()}
+          </Collapse.Panel>
+        </Collapse>
       </div>
     );
   }
-
 }

client/src/components/tools/DockerRegistriesGroupsSearch.js

@@ -21,7 +21,6 @@ import PropTypes from 'prop-types';
 
 @observer
 export default class DockerRegistriesGroupsSearch extends React.Component {
-
   static propTypes = {
     groupSearch: PropTypes.string,
     onGroupSearch: PropTypes.func,
@@ -46,9 +45,9 @@ export default class DockerRegistriesGroupsSearch extends React.Component {
           onChange={this.onGroupSearch}
           style={{width: '100%'}}
           size="small"
+          placeholder="Search tool groups"
         />
       </div>
     );
   }
-
 }

client/src/components/tools/DockerRegistriesNavigation.js

@@ -24,7 +24,6 @@ import styles from './Tools.css';
 
 @observer
 export default class DockerRegistriesNavigation extends React.Component {
-
   state = {
     groupSearch: null,
     groupsDropDownVisible: false
@@ -58,7 +57,11 @@ export default class DockerRegistriesNavigation extends React.Component {
           trigger={['click']}
           overlayClassName="registry-dropdown-container"
           overlay={
-            <div id="registries-dropdown" className={styles.navigationDropdownContainer} style={{overflowY: 'auto'}}>
+            <div
+              id="registries-dropdown"
+              className={styles.navigationDropdownContainer}
+              style={{overflowY: 'auto'}}
+            >
               {
                 registries.map(registry => {
                   return (
@@ -88,17 +91,30 @@ export default class DockerRegistriesNavigation extends React.Component {
   };
 
   renderGroupSelector = () => {
-    if (this.props.currentGroup) {
-      const getGroupName = (group) => {
+    let group = this.props.currentGroup;
+    if (this.props.filter) {
+      group = {
+        name: this.props.filter.value || this.props.filter.filterBy
+      };
+    }
+    if (group) {
+      const getGroupName = (group, filter = '') => {
+        if (filter) {
+          const currentFilter = (this.props.filters.groups || [])
+            .find(group => group.id === filter);
+          return currentFilter
+            ? currentFilter.title
+            : filter;
+        }
         if (group.privateGroup) {
-          return 'personal';
+          return 'My tools';
         }
         return group.name;
       };
       const groups = this.props.groups.filter(
-        g => this.props.currentGroup.privateGroup
+        g => group.privateGroup
           ? !g.privateGroup
-          : g.id !== this.props.currentGroup.id
+          : g.id !== group.id
       ).sort((groupA, groupB) => {
         if (groupA.privateGroup && !groupB.privateGroup) {
           return -1;
@@ -120,8 +136,9 @@ export default class DockerRegistriesNavigation extends React.Component {
             id="current-group-button"
             className="single-group"
             size="small"
-            style={{border: 'none', fontWeight: 'bold'}}>
-            {getGroupName(this.props.currentGroup)}
+            style={{border: 'none', fontWeight: 'bold'}}
+          >
+            {getGroupName(group, this.props.filter)}
           </Button>
         );
       }
@@ -139,6 +156,8 @@ export default class DockerRegistriesNavigation extends React.Component {
           overlay={
             <DockerRegistriesGroupsDropdownContent
               groups={groups}
+              filter={this.props.filter}
+              filters={this.props.filters}
               isVisible={this.state.groupsDropDownVisible}
               currentGroup={this.props.currentGroup}
               onNavigate={(id) => {
@@ -160,7 +179,7 @@ export default class DockerRegistriesNavigation extends React.Component {
             id="current-group-button"
             size="small"
             style={{border: 'none', fontWeight: 'bold'}}>
-            {getGroupName(this.props.currentGroup)}
+            {getGroupName(this.props.currentGroup, this.props.filter)}
           </Button>
         </Dropdown>
       );
@@ -175,7 +194,9 @@ export default class DockerRegistriesNavigation extends React.Component {
         size="small"
         style={{flex: 1, marginLeft: 10}}
         value={this.props.searchString}
-        onChange={e => this.props.onSearch && this.props.onSearch(e.target.value)} />
+        onChange={e => this.props.onSearch && this.props.onSearch(e.target.value)}
+        placeholder="Global search"
+      />
     );
   };
 
@@ -199,7 +220,6 @@ export default class DockerRegistriesNavigation extends React.Component {
       );
     }
   }
-
 }
 
 DockerRegistriesNavigation.propTypes = {
@@ -209,5 +229,7 @@ DockerRegistriesNavigation.propTypes = {
   groups: PropTypes.array,
   currentGroup: PropTypes.object,
   onNavigate: PropTypes.func,
-  onSearch: PropTypes.func
+  onSearch: PropTypes.func,
+  filter: PropTypes.string,
+  filters: PropTypes.object
 };