@@ -223,7 +227,7 @@ exports[`renders correctly with one feature without permissions 1`] = `
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
- placeholder="Search…"
+ placeholder="Search..."
type="text"
value=""
/>
@@ -247,29 +251,29 @@ exports[`renders correctly with one feature without permissions 1`] = `
}
>
Features
({
searchBarContainer: {
marginBottom: '2rem',
display: 'flex',
+ gap: '1rem',
justifyContent: 'space-between',
alignItems: 'center',
[theme.breakpoints.down('xs')]: {
diff --git a/frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx b/frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
index 38fc7d70a6..0c8afb086c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
@@ -15,7 +15,6 @@ import { Tooltip } from '@material-ui/core';
import ConditionallyRender from '../../../../../common/ConditionallyRender';
import { useStyles } from './FeatureStrategyEditable.styles';
import { Delete } from '@material-ui/icons';
-import { PRODUCTION } from '../../../../../../constants/environmentTypes';
import {
DELETE_STRATEGY_ID,
STRATEGY_ACCORDION_ID,
diff --git a/frontend/src/hooks/useEventSettings.ts b/frontend/src/hooks/useEventSettings.ts
index 21478a8bc6..d7c7c2ea95 100644
--- a/frontend/src/hooks/useEventSettings.ts
+++ b/frontend/src/hooks/useEventSettings.ts
@@ -1,5 +1,5 @@
import { getBasePath } from '../utils/format-path';
-import { createPersistentGlobalState } from './usePersistentGlobalState';
+import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
import React from 'react';
export interface IEventSettings {
@@ -21,7 +21,7 @@ const createInitialValue = (): IEventSettings => {
return { showData: false };
};
-const useGlobalState = createPersistentGlobalState(
+const useGlobalState = createPersistentGlobalStateHook(
`${getBasePath()}:useEventSettings:v1`,
createInitialValue()
);
diff --git a/frontend/src/hooks/useFeaturesFilter.ts b/frontend/src/hooks/useFeaturesFilter.ts
index 452f73911a..085d13622b 100644
--- a/frontend/src/hooks/useFeaturesFilter.ts
+++ b/frontend/src/hooks/useFeaturesFilter.ts
@@ -1,7 +1,6 @@
-import { IFeatureToggle } from '../interfaces/featureToggle';
+import { IFeatureToggle } from 'interfaces/featureToggle';
import React, { useMemo } from 'react';
-import { getBasePath } from '../utils/format-path';
-import { createPersistentGlobalState } from './usePersistentGlobalState';
+import { createGlobalStateHook } from 'hooks/useGlobalState';
export interface IFeaturesFilter {
query?: string;
@@ -16,8 +15,8 @@ export interface IFeaturesSortOutput {
// Store the features filter state globally, and in localStorage.
// When changing the format of IFeaturesFilter, change the version as well.
-const useFeaturesFilterState = createPersistentGlobalState(
- `${getBasePath()}:useFeaturesFilter:v1`,
+const useFeaturesFilterState = createGlobalStateHook(
+ 'useFeaturesFilterState',
{ project: '*' }
);
diff --git a/frontend/src/hooks/useFeaturesSort.ts b/frontend/src/hooks/useFeaturesSort.ts
index 282916671a..a72c2fc295 100644
--- a/frontend/src/hooks/useFeaturesSort.ts
+++ b/frontend/src/hooks/useFeaturesSort.ts
@@ -1,7 +1,7 @@
import { IFeatureToggle } from '../interfaces/featureToggle';
import React, { useMemo } from 'react';
import { getBasePath } from '../utils/format-path';
-import { createPersistentGlobalState } from './usePersistentGlobalState';
+import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
type FeaturesSortType =
| 'name'
@@ -29,7 +29,7 @@ export interface IFeaturesFilterSortOption {
// Store the features sort state globally, and in localStorage.
// When changing the format of IFeaturesSort, change the version as well.
-const useFeaturesSortState = createPersistentGlobalState(
+const useFeaturesSortState = createPersistentGlobalStateHook(
`${getBasePath()}:useFeaturesSort:v1`,
{ type: 'name' }
);
diff --git a/frontend/src/hooks/useGlobalState.ts b/frontend/src/hooks/useGlobalState.ts
new file mode 100644
index 0000000000..37469ebd6a
--- /dev/null
+++ b/frontend/src/hooks/useGlobalState.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+import { createGlobalState } from 'react-hooks-global-state';
+
+type UseGlobalState = () => [
+ value: T,
+ setValue: React.Dispatch>
+];
+
+// Create a hook that stores global state (shared across all hook instances).
+export const createGlobalStateHook = (
+ key: string,
+ initialValue: T
+): UseGlobalState => {
+ const container = createGlobalState<{ [key: string]: T }>({
+ [key]: initialValue,
+ });
+
+ const setGlobalState = (value: React.SetStateAction) => {
+ container.setGlobalState(key, value);
+ };
+
+ return () => [container.useGlobalState(key)[0], setGlobalState];
+};
diff --git a/frontend/src/hooks/useLocationSettings.ts b/frontend/src/hooks/useLocationSettings.ts
index 5ffa2d18de..5e74ff0240 100644
--- a/frontend/src/hooks/useLocationSettings.ts
+++ b/frontend/src/hooks/useLocationSettings.ts
@@ -1,5 +1,5 @@
import { getBasePath } from '../utils/format-path';
-import { createPersistentGlobalState } from './usePersistentGlobalState';
+import { createPersistentGlobalStateHook } from './usePersistentGlobalState';
import React from 'react';
export interface ILocationSettings {
@@ -23,7 +23,7 @@ const createInitialValue = (): ILocationSettings => {
return { locale: navigator.language };
};
-const useGlobalState = createPersistentGlobalState(
+const useGlobalState = createPersistentGlobalStateHook(
`${getBasePath()}:useLocationSettings:v1`,
createInitialValue()
);
diff --git a/frontend/src/hooks/usePersistentGlobalState.ts b/frontend/src/hooks/usePersistentGlobalState.ts
index 1a06da3ffe..1f743a23ea 100644
--- a/frontend/src/hooks/usePersistentGlobalState.ts
+++ b/frontend/src/hooks/usePersistentGlobalState.ts
@@ -10,7 +10,7 @@ type UsePersistentGlobalState = () => [
// Create a hook that stores global state (shared across all hook instances).
// The state is also persisted to localStorage and restored on page load.
// The localStorage state is not synced between tabs.
-export const createPersistentGlobalState = (
+export const createPersistentGlobalStateHook = (
key: string,
initialValue: T
): UsePersistentGlobalState => {