chore: Make features, identities and audit search, closed/open change…

… requests filter based on URL (#3738)

frontend/common/dispatcher/app-actions.js

@@ -373,7 +373,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
     force,
     search,
     sort,
-    page,
     filter,
     pageSize,
   ) {
@@ -382,7 +381,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       environmentId,
       filter,
       force,
-      page,
       pageSize,
       projectId,
       search,

frontend/web/components/ExistingChangeRequestAlert.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { FC, useRef } from 'react'
 import { useGetChangeRequestsQuery } from 'common/services/useChangeRequest'
 import WarningMessage from './WarningMessage'
 import moment from 'moment'

frontend/web/components/pages/AuditLogPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react' // we need this to make JSX compile
+import React, { FC, useEffect, useState } from 'react' // we need this to make JSX compile
 import ConfigProvider from 'common/providers/ConfigProvider'
 import ToggleChip from 'components/ToggleChip'
 import Utils from 'common/utils/utils'
@@ -23,7 +23,17 @@ const AuditLogPage: FC<AuditLogType> = (props) => {
   const projectId = props.match.params.projectId
 
   const [environment, setEnvironment] = useState(Utils.fromParam().env)
-
+  useEffect(() => {
+    const currentParams = Utils.fromParam()
+    if (currentParams.env !== environment) {
+      props.router.history.replace(
+        `${document.location.pathname}?${Utils.toParam({
+          env: environment,
+          search: currentParams.search,
+        })}`,
+      )
+    }
+  }, [environment])
   const hasRbacPermission = Utils.getPlansPermission('AUDIT')
   if (!hasRbacPermission) {
     return (

frontend/web/components/pages/ChangeRequestsPage.js

@@ -12,6 +12,7 @@ import { Link } from 'react-router-dom'
 import PageTitle from 'components/PageTitle'
 import { timeOutline } from 'ionicons/icons'
 import { IonIcon } from '@ionic/react'
+import Utils from 'common/utils/utils'
 
 const ChangeRequestsPage = class extends Component {
   static displayName = 'ChangeRequestsPage'
@@ -25,6 +26,7 @@ const ChangeRequestsPage = class extends Component {
     this.state = {
       live_after: new Date().toISOString(),
       showArchived: false,
+      tab: Utils.fromParam().tab === 'closed' ? 1 : 0,
       tags: [],
     }
     ES6Component(this)
@@ -114,7 +116,13 @@ const ChangeRequestsPage = class extends Component {
               <Tabs
                 value={this.state.tab}
                 onChange={(tab) => {
-                  this.setState({ tab })
+                  this.setState({ tab }, (tab) => {
+                    this.props.router.history.replace(
+                      `${document.location.pathname}?${Utils.toParam({
+                        tab: this.state.tab ? 'closed' : 'open',
+                      })}`,
+                    )
+                  })
                 }}
               >
                 <TabItem

frontend/web/components/pages/FeaturesPage.js

@@ -18,6 +18,7 @@ import TableSearchFilter from 'components/tables/TableSearchFilter'
 import TableTagFilter from 'components/tables/TableTagFilter'
 import { getViewMode, setViewMode } from 'common/useViewMode'
 import TableFilterOptions from 'components/tables/TableFilterOptions'
+import Format from 'common/utils/format'
 import EnvironmentDocumentCodeHelp from 'components/EnvironmentDocumentCodeHelp'
 import TableOwnerFilter from 'components/tables/TableOwnerFilter'
 import TableGroupsFilter from 'components/tables/TableGroupsFilter'
@@ -32,17 +33,38 @@ const FeaturesPage = class extends Component {
 
   constructor(props, context) {
     super(props, context)
+    const params = Utils.fromParam()
     this.state = {
-      group_owners: [],
-      is_enabled: null,
+      group_owners:
+        typeof params.group_owners === 'string'
+          ? params.group_owners.split(',').map((v) => parseInt(v))
+          : [],
+      is_enabled:
+        params.is_enabled === 'true'
+          ? true
+          : params.is_enabled === 'false'
+          ? false
+          : null,
       loadedOnce: false,
-      owners: [],
-      search: null,
-      showArchived: false,
-      sort: { label: 'Name', sortBy: 'name', sortOrder: 'asc' },
-      tag_strategy: 'INTERSECTION',
-      tags: [],
-      value_search: null,
+      owners:
+        typeof params.owners === 'string'
+          ? params.owners.split(',').map((v) => parseInt(v))
+          : [],
+      page: params.page ? parseInt(params.page) - 1 : 1,
+      search: params.search || null,
+      showArchived: !!params.is_archived,
+      sort: {
+        label: Format.camelCase(params.sortBy || 'Name'),
+        sortBy: params.sortBy || 'name',
+        sortOrder: params.sortOrder || 'asc',
+      },
+      tag_strategy: params.tag_strategy || 'INTERSECTION',
+      tags:
+        typeof params.tags === 'string'
+          ? params.tags.split(',').map((v) => parseInt(v))
+          : [],
+      value_search:
+        typeof params.value_search === 'string' ? params.value_search : '',
     }
     ES6Component(this)
     getTags(getStore(), {
@@ -54,7 +76,7 @@ const FeaturesPage = class extends Component {
       true,
       this.state.search,
       this.state.sort,
-      0,
+      this.state.page,
       this.getFilter(),
     )
   }
@@ -71,15 +93,7 @@ const FeaturesPage = class extends Component {
       params.projectId !== oldParams.projectId
     ) {
       this.state.loadedOnce = false
-      AppActions.getFeatures(
-        params.projectId,
-        params.environmentId,
-        true,
-        this.state.search,
-        this.state.sort,
-        0,
-        this.getFilter(),
-      )
+      this.filter()
     }
   }
 
@@ -109,6 +123,17 @@ const FeaturesPage = class extends Component {
     )
   }
 
+  getURLParams = () => ({
+    ...this.getFilter(),
+    group_owners: (this.state.group_owners || [])?.join(',') || undefined,
+    owners: (this.state.owners || [])?.join(',') || undefined,
+    page: this.state.page || 1,
+    search: this.state.search || '',
+    sortBy: this.state.sort.sortBy,
+    sortOrder: this.state.sort.sortOrder,
+    tags: (this.state.tags || [])?.join(',') || undefined,
+  })
+
   getFilter = () => ({
     group_owners: this.state.group_owners?.length
       ? this.state.group_owners
@@ -142,16 +167,37 @@ const FeaturesPage = class extends Component {
     }
   }
 
-  filter = () => {
-    AppActions.searchFeatures(
-      this.props.match.params.projectId,
-      this.props.match.params.environmentId,
-      true,
-      this.state.search,
-      this.state.sort,
-      0,
-      this.getFilter(),
-    )
+  filter = (page) => {
+    const currentParams = Utils.fromParam()
+    // this.props.router.push()
+    this.setState({ page }, () => {
+      if (!currentParams.feature) {
+        // don't replace page if we are currently viewing a feature
+        this.props.router.history.replace(
+          `${document.location.pathname}?${Utils.toParam(this.getURLParams())}`,
+        )
+      }
+      if (page) {
+        AppActions.getFeatures(
+          this.props.match.params.projectId,
+          this.props.match.params.environmentId,
+          true,
+          this.state.search,
+          this.state.sort,
+          page,
+          this.getFilter(),
+        )
+      } else {
+        AppActions.searchFeatures(
+          this.props.match.params.projectId,
+          this.props.match.params.environmentId,
+          true,
+          this.state.search,
+          this.state.sort,
+          this.getFilter(),
+        )
+      }
+    })
   }
 
   createFeaturePermission(el) {
@@ -203,16 +249,17 @@ const FeaturesPage = class extends Component {
               totalFeatures,
               maxFeaturesAllowed,
             )
-            if (projectFlags?.length && !this.state.loadedOnce) {
+            if (FeatureListStore.hasLoaded && !this.state.loadedOnce) {
               this.state.loadedOnce = true
             }
             return (
               <div className='features-page'>
-                {isLoading && (!projectFlags || !projectFlags.length) && (
-                  <div className='centered-container'>
-                    <Loader />
-                  </div>
-                )}
+                {(isLoading || !this.state.loadedOnce) &&
+                  (!projectFlags || !projectFlags.length) && (
+                    <div className='centered-container'>
+                      <Loader />
+                    </div>
+                  )}
                 {(!isLoading || this.state.loadedOnce) && (
                   <div>
                     {this.state.loadedOnce ||
@@ -306,19 +353,7 @@ const FeaturesPage = class extends Component {
                                               search:
                                                 Utils.safeParseEventValue(e),
                                             },
-                                            () => {
-                                              AppActions.searchFeatures(
-                                                this.props.match.params
-                                                  .projectId,
-                                                this.props.match.params
-                                                  .environmentId,
-                                                true,
-                                                this.state.search,
-                                                this.state.sort,
-                                                0,
-                                                this.getFilter(),
-                                              )
-                                            },
+                                            this.filter,
                                           )
                                         }}
                                         value={this.state.search}
@@ -331,7 +366,10 @@ const FeaturesPage = class extends Component {
                                           className='me-4'
                                           title='Tags'
                                           tagStrategy={this.state.tag_strategy}
-                                          onChangeStrategy={(tag_strategy) => {
+                                          onChangeStrategy={(
+                                            tag_strategy,
+                                            isAutomated,
+                                          ) => {
                                             this.setState(
                                               {
                                                 tag_strategy,
@@ -362,7 +400,7 @@ const FeaturesPage = class extends Component {
                                               this.filter,
                                             )
                                           }}
-                                          onChange={(tags) => {
+                                          onChange={(tags, isAutomated) => {
                                             FeatureListStore.isLoading = true
                                             if (
                                               tags.includes('') &&
@@ -391,10 +429,6 @@ const FeaturesPage = class extends Component {
                                                 this.filter,
                                               )
                                             }
-                                            AsyncStorage.setItem(
-                                              `${projectId}tags`,
-                                              JSON.stringify(tags),
-                                            )
                                           }}
                                         />
                                         {enabledStateFilter && (
@@ -503,38 +537,12 @@ const FeaturesPage = class extends Component {
                                   </Row>
                                 }
                                 nextPage={() =>
-                                  AppActions.getFeatures(
-                                    this.props.match.params.projectId,
-                                    this.props.match.params.environmentId,
-                                    true,
-                                    this.state.search,
-                                    this.state.sort,
-                                    FeatureListStore.paging.next,
-                                    this.getFilter(),
-                                  )
+                                  this.filter(FeatureListStore.paging.next)
                                 }
                                 prevPage={() =>
-                                  AppActions.getFeatures(
-                                    this.props.match.params.projectId,
-                                    this.props.match.params.environmentId,
-                                    true,
-                                    this.state.search,
-                                    this.state.sort,
-                                    FeatureListStore.paging.previous,
-                                    this.getFilter(),
-                                  )
-                                }
-                                goToPage={(page) =>
-                                  AppActions.getFeatures(
-                                    this.props.match.params.projectId,
-                                    this.props.match.params.environmentId,
-                                    true,
-                                    this.state.search,
-                                    this.state.sort,
-                                    page,
-                                    this.getFilter(),
-                                  )
+                                  this.filter(FeatureListStore.paging.previous)
                                 }
+                                goToPage={(page) => this.filter(page)}
                                 items={projectFlags?.filter((v) => !v.ignore)}
                                 renderFooter={() => (
                                   <>
@@ -602,7 +610,8 @@ const FeaturesPage = class extends Component {
                         </FormGroup>
                       </div>
                     ) : (
-                      !isLoading && (
+                      !isLoading &&
+                      this.state.loadedOnce && (
                         <div>
                           <h3>Brilliant! Now create your features.</h3>
                           <FormGroup>