Persist tag filters (#166)

Flagsmith · Jul 5, 2021 · 76a0700 · 76a0700
1 parent 4dd3325
commit 76a0700
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 16 deletions.
diff --git a/frontend/web/components/TagSelect.js b/frontend/web/components/TagSelect.js
@@ -17,20 +17,32 @@ class TagSelect extends PureComponent {
 
     render() {
         const projectTags = (this.props.tags && this.props.tags[this.props.projectId]) || [];
+        const showUntagged = this.props.showUntagged && { color: '#666', label: 'Untagged', id:"" };
         return (
             <Row className="tag-filter mx-2 mt-3">
                 <div className="ml-1">
                     <Row>
+                        {showUntagged && (
+                            <div className="mr-1 mb-2">
+                                <Tag
+                                  key={showUntagged.id}
+                                  selected={this.isSelected(showUntagged)}
+                                  onClick={this.onSelect}
+                                  className="px-2 py-2 mr-2"
+                                  tag={showUntagged}
+                                />
+                            </div>
+                        )}
                         {projectTags.map(tag => (
-                          <div className="mr-1 mb-2">
-                              <Tag
-                                key={tag.id}
-                                selected={this.isSelected(tag)}
-                                onClick={this.onSelect}
-                                className="px-2 py-2 mr-2"
-                                tag={tag}
-                              />
-                          </div>
+                            <div className="mr-1 mb-2">
+                                <Tag
+                                  key={tag.id}
+                                  selected={this.isSelected(tag)}
+                                  onClick={this.onSelect}
+                                  className="px-2 py-2 mr-2"
+                                  tag={tag}
+                                />
+                            </div>
 
                         ))}
                     </Row>

diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
@@ -24,10 +24,10 @@ const FeaturesPage = class extends Component {
         };
         ES6Component(this);
         this.listenTo(TagStore, 'loaded', () => {
-            // const tags = TagStore.model && TagStore.model[parseInt(this.props.match.params.projectId)];
-            // if (this.state.tags.length === 0 && tags && tags.length > 0) {
-            //     this.setState({ tags: tags.map(v => v.id) });
-            // }
+            const tags = TagStore.model && TagStore.model[parseInt(this.props.match.params.projectId)];
+            if (this.state.tags.length === 0 && tags && tags.length > 0) {
+                this.setState({ tags: tags.map(v => v.id).concat('') });
+            }
         });
         AppActions.getFeatures(this.props.match.params.projectId, this.props.match.params.environmentId);
     }
@@ -36,14 +36,15 @@ const FeaturesPage = class extends Component {
         const { match: { params } } = newProps;
         const { match: { params: oldParams } } = this.props;
         if (params.environmentId != oldParams.environmentId || params.projectId != oldParams.projectId) {
+            this.getTags(params.projectId);
             AppActions.getFeatures(params.projectId, params.environmentId);
         }
     }
 
     componentDidMount = () => {
         API.trackPage(Constants.pages.FEATURES);
         const { match: { params } } = this.props;
-        AppActions.getTags(params.projectId);
+        this.getTags(params.projectId);
         AsyncStorage.setItem('lastEnv', JSON.stringify({
             orgId: AccountStore.getOrganisation().id,
             projectId: params.projectId,
@@ -60,6 +61,17 @@ const FeaturesPage = class extends Component {
     };
 
 
+    getTags = (projectId) => {
+        AppActions.getTags(projectId);
+        AsyncStorage.getItem(`${projectId}tags`).then((res) => {
+            if (res) {
+                this.setState({
+                    tags: JSON.parse(res),
+                });
+            }
+        });
+    }
+
     editFlag = (projectFlag, environmentFlag) => {
         API.trackEvent(Constants.events.VIEW_FEATURE);
         openModal(`Edit Feature: ${projectFlag.name}`, <CreateFlagModal
@@ -138,7 +150,12 @@ const FeaturesPage = class extends Component {
 
     filter = (flags) => {
         if (this.state.tags.length) {
-            return _.filter(flags, flag => _.intersection(flag.tags || [], this.state.tags).length) || [];
+            return _.filter(flags, (flag) => {
+                if (this.state.tags.includes('') && (!flag.tags || !flag.tags.length)) {
+                    return true;
+                }
+                return _.intersection(flag.tags || [], this.state.tags).length;
+            }) || [];
         }
         return flags;
     }
@@ -212,7 +229,13 @@ const FeaturesPage = class extends Component {
                                                           ]}
                                                           items={this.filter(projectFlags, this.state.tags)}
                                                           header={(
-                                                              <TagSelect projectId={projectId} value={this.state.tags} onChange={tags => this.setState({ tags })}/>
+                                                              <TagSelect
+                                                                  showUntagged
+                                                                projectId={projectId} value={this.state.tags} onChange={(tags) => {
+                                                                    this.setState({ tags });
+                                                                    AsyncStorage.setItem(`${projectId}tags`, JSON.stringify(tags));
+                                                                }}
+                                                              />
                                                           )}
                                                           renderRow={(projectFlag, i) => {
                                                               const { name, id, enabled, created_date, description, type } = projectFlag;