feat(core): Toggle to show or hide many filter tags (#8869)

spinnaker · Feb 5, 2021 · b458468 · b458468
1 parent 4c66174
commit b458468
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 49 deletions.
diff --git a/app/scripts/modules/core/src/application/application.less b/app/scripts/modules/core/src/application/application.less
@@ -37,6 +37,19 @@
       color: var(--color-dovegray);
     }
   }
+  .filter-toggle {
+    background-color: var(--color-accent);
+    border-radius: 2px;
+    color: var(--color-white);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 90%;
+    font-weight: 600;
+    margin-bottom: 5px;
+    margin-right: 10px;
+    padding: 3px 5px;
+    text-transform: uppercase;
+  }
   .clear-filters {
     display: inline-block;
     margin-left: 5px;

diff --git a/app/scripts/modules/core/src/filterModel/FilterTags.tsx b/app/scripts/modules/core/src/filterModel/FilterTags.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactGA from 'react-ga';
+import { CollapsibleSectionStateCache } from 'core/cache';
 
 export interface IFilter {
   label: string;
@@ -21,59 +22,56 @@ export interface IFilterTagsState {
   tags: IFilterTag[];
 }
 
-export class FilterTags extends React.Component<IFilterTagsProps, IFilterTagsState> {
-  public static defaultProps: Partial<IFilterTagsProps> = {
-    tagCleared: () => {},
-  };
-
-  constructor(props: IFilterTagsProps) {
-    super(props);
-    this.state = {
-      tags: props.tags,
-    };
-  }
+export const FilterTags = ({ clearFilters, tags, tagCleared }: IFilterTagsProps) => {
+  const hasExtraTags = tags.length > 5;
+  const [showExtraTags, setShowExtraTags] = React.useState(
+    hasExtraTags && CollapsibleSectionStateCache.isExpanded('filterTags'),
+  );
+  const visibleTags = !hasExtraTags || showExtraTags ? tags : tags.slice(0, 5);
 
-  public componentWillReceiveProps(newProps: IFilterTagsProps) {
-    this.setState({ tags: newProps.tags });
-  }
+  const toggleExtraTags = () => {
+    CollapsibleSectionStateCache.setExpanded('filterTags', !showExtraTags);
+    setShowExtraTags(!showExtraTags);
+  };
 
-  private clearAllFilters = (): void => {
-    this.props.clearFilters();
+  const clearAllFilters = (): void => {
+    if (clearFilters) {
+      clearFilters();
+    }
     ReactGA.event({ category: 'Filter Tags', action: 'Clear All clicked' });
   };
 
-  private generateTag(tag: IFilterTag) {
-    const clearFilter = (): void => {
-      tag.clear();
-      this.props.tagCleared();
-      ReactGA.event({ category: 'Filter Tags', action: 'Individual tag removed' });
-    };
-    return (
-      <span className="filter-tag" key={[tag.label, tag.value].join(':')}>
-        <strong>{tag.label}</strong>: {tag.value}
-        <a className="clickable clear-filters" onClick={clearFilter}>
-          <span className="glyphicon glyphicon-remove-sign" />
-        </a>
-      </span>
-    );
-  }
+  const clearIndividualFilter = (tag: IFilterTag): void => {
+    tag.clear();
+    tagCleared();
+    ReactGA.event({ category: 'Filter Tags', action: 'Individual tag removed' });
+  };
 
-  public render() {
-    const { tags } = this.state;
-    return (
-      <div className="col-md-12 filter-tags">
-        {tags && tags.length > 0 && (
-          <span>
-            <span>Filtered by: </span>
-            {tags.map((tag) => this.generateTag(tag))}
-            {tags.length > 1 && (
-              <a className="clickable clear-filters" onClick={this.clearAllFilters}>
-                Clear All
+  return (
+    <div className="col-md-12 filter-tags">
+      {visibleTags && visibleTags.length > 0 && (
+        <span>
+          <span>Filtered by: </span>
+          {visibleTags.map((tag) => (
+            <span className="filter-tag" key={[tag.label, tag.value].join(':')}>
+              <strong>{tag.label}</strong>: {tag.value}
+              <a className="clickable clear-filters" onClick={() => clearIndividualFilter(tag)}>
+                <span className="glyphicon glyphicon-remove-sign" />
               </a>
-            )}
-          </span>
-        )}
-      </div>
-    );
-  }
-}
+            </span>
+          ))}
+          {hasExtraTags && (
+            <span className="filter-toggle" onClick={toggleExtraTags}>
+              {showExtraTags ? 'Hide List' : `See all ${tags.length} current filters`}
+            </span>
+          )}
+          {visibleTags.length > 1 && (
+            <a className="clickable clear-filters" onClick={clearAllFilters}>
+              Clear All
+            </a>
+          )}
+        </span>
+      )}
+    </div>
+  );
+};