feat: Responsive features page (#5809)

Author: kyle-ssg

frontend/common/useDebouncedSearch.ts

@@ -4,10 +4,10 @@ import useDebounce from './useDebounce'
 export default function useDebouncedSearch(initialValue = '') {
   const [searchInput, setSearchInput] = useState(initialValue)
   const [search, setSearch] = useState(initialValue)
-  const [debounceTime, setDebounceTime] = useState(500);
+  const [debounceTime, setDebounceTime] = useState(500)
 
   useEffect(() => {
-    setDebounceTime(searchInput.length < 1 ? 0 : 500);
+    setDebounceTime(searchInput.length < 1 ? 0 : 500)
   }, [searchInput])
 
   const debouncedSearch = useDebounce((value: string) => {
@@ -23,7 +23,7 @@ export default function useDebouncedSearch(initialValue = '') {
   return {
     search,
     searchInput,
-    setSearchInput: handleSearchInput
+    setSearchInput: handleSearchInput,
   }
 }
 

frontend/e2e/init.cafe.js

@@ -96,7 +96,7 @@ fixture`E2E Tests`.requestHooks(logger).before(async () => {
     await logResults(logger.requests, t)
   })
 
-test('Segment-part-1', async () => await testSegment1(flagsmith)).meta({ autoLogout: true, category: 'oss' })
+test('Segment-part-1', async () => await testSegment1(flagsmith)).meta({ category: 'oss' })
 
 test('Segment-part-2', testSegment2).meta({ autoLogout: true, category: 'oss' })
 

frontend/web/components/CompareEnvironments.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import EnvironmentSelect from './EnvironmentSelect'
 import data from 'common/data/base/_data'
 import ProjectStore from 'common/stores/project-store'
-import FeatureRow from './FeatureRow'
+import FeatureRow from './feature-summary/FeatureRow'
 import FeatureListStore from 'common/stores/feature-list-store'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'

frontend/web/components/CompareFeatures.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import FlagSelect from './FlagSelect'
 import ProjectStore from 'common/stores/project-store'
 import data from 'common/data/base/_data'
-import FeatureRow from './FeatureRow'
+import FeatureRow from './feature-summary/FeatureRow'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import { withRouter } from 'react-router-dom'

frontend/web/components/CompareIdentities.tsx

@@ -12,7 +12,7 @@ import PanelSearch from './PanelSearch'
 import { IdentityFeatureState } from 'common/types/responses'
 import Icon from './Icon'
 import Switch from './Switch'
-import FeatureValue from './FeatureValue'
+import FeatureValue from './feature-summary/FeatureValue'
 import { sortBy } from 'lodash'
 import { useHasPermission } from 'common/providers/Permission'
 import Constants from 'common/constants'

frontend/web/components/CondensedFeatureRow.tsx

@@ -1,27 +1,18 @@
 import classNames from 'classnames'
 import Switch from './Switch'
-import {
-  FeatureListProviderData,
-  FeatureState,
-  ProjectFlag,
-} from 'common/types/responses'
-import FeatureValue from './FeatureValue'
+import { FeatureListProviderData, ProjectFlag } from 'common/types/responses'
+import FeatureValue from './feature-summary/FeatureValue'
 import SegmentOverridesIcon from './SegmentOverridesIcon'
 import IdentityOverridesIcon from './IdentityOverridesIcon'
 import Constants from 'common/constants'
-import Utils from 'common/utils/utils'
 
 export interface CondensedFeatureRowProps {
   disableControls?: boolean
   readOnly: boolean
   projectFlag: ProjectFlag
   environmentFlags: FeatureListProviderData['environmentFlags']
   permission?: boolean
-  editFeature: (
-    projectFlag: ProjectFlag,
-    environmentFlag?: FeatureState,
-    tab?: string,
-  ) => void
+  editFeature: (tab?: string) => void
   onChange: () => void
   style?: React.CSSProperties
   className?: string
@@ -58,8 +49,6 @@ const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
         if (disableControls) return
         !readOnly &&
           editFeature(
-            projectFlag,
-            environmentFlags?.[id],
             hasUnhealthyEvents
               ? Constants.featurePanelTabs.FEATURE_HEALTH
               : undefined,
@@ -86,11 +75,7 @@ const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
       <Flex className='table-column clickable'>
         <Row>
           <div
-            onClick={() =>
-              permission &&
-              !readOnly &&
-              editFeature(projectFlag, environmentFlags?.[id])
-            }
+            onClick={() => permission && !readOnly && editFeature()}
             style={{ flex: 1 }}
             className={`overflow-hidden ${fadeValue ? 'faded' : ''}`}
           >
@@ -103,22 +88,14 @@ const CondensedFeatureRow: React.FC<CondensedFeatureRowProps> = ({
           <SegmentOverridesIcon
             onClick={(e) => {
               e.stopPropagation()
-              editFeature(
-                projectFlag,
-                environmentFlags?.[id],
-                Constants.featurePanelTabs.SEGMENT_OVERRIDES,
-              )
+              editFeature(Constants.featurePanelTabs.SEGMENT_OVERRIDES)
             }}
             count={projectFlag.num_segment_overrides}
           />
           <IdentityOverridesIcon
             onClick={(e) => {
               e.stopPropagation()
-              editFeature(
-                projectFlag,
-                environmentFlags?.[id],
-                Constants.featurePanelTabs.IDENTITY_OVERRIDES,
-              )
+              editFeature(Constants.featurePanelTabs.IDENTITY_OVERRIDES)
             }}
             count={projectFlag.num_identity_overrides}
             showPlusIndicator={showPlusIndicator}