diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/FeatureOverviewEnvironmentBody.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/FeatureOverviewEnvironmentBody.tsx index 1988e83b5a3e..5cea19c55552 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/FeatureOverviewEnvironmentBody.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/FeatureOverviewEnvironmentBody.tsx @@ -21,6 +21,7 @@ import usePagination from 'hooks/usePagination'; import type { IFeatureStrategy } from 'interfaces/strategy'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useUiFlag } from 'hooks/useUiFlag'; +import isEqual from 'lodash/isEqual'; interface IEnvironmentAccordionBodyProps { isDisabled: boolean; @@ -65,9 +66,17 @@ export const FeatureOverviewEnvironmentBody = ({ index: number; height: number; } | null>(null); + + const [isReordering, setIsReordering] = useState(false); + useEffect(() => { - // Use state to enable drag and drop, but switch to API output when it arrives - setStrategies(featureEnvironment?.strategies || []); + if (isReordering) { + if (isEqual(featureEnvironment?.strategies, strategies)) { + setIsReordering(false); + } + } else { + setStrategies(featureEnvironment?.strategies || []); + } }, [featureEnvironment?.strategies]); useEffect(() => { @@ -139,6 +148,7 @@ export const FeatureOverviewEnvironmentBody = ({ index: number, ): DragEventHandler => (event) => { + setIsReordering(true); setDragItem({ id: strategies[index].id, index, @@ -197,11 +207,15 @@ export const FeatureOverviewEnvironmentBody = ({ ); }; + const strategiesToDisplay = isReordering + ? strategies + : featureEnvironment.strategies; + return ( 0 && isDisabled} + condition={strategiesToDisplay.length > 0 && isDisabled} show={() => ( This environment is disabled, which means that none @@ -210,34 +224,38 @@ export const FeatureOverviewEnvironmentBody = ({ )} /> 0} + condition={strategiesToDisplay.length > 0} show={ - {strategies.map((strategy, index) => ( - - ))} + {strategiesToDisplay.map( + (strategy, index) => ( + + ), + )} } elseShow={ diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment.tsx index 6bc7cdccc877..ff2e6ba32fca 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/NewFeatureOverviewEnvironment/NewFeatureOverviewEnvironment.tsx @@ -17,13 +17,13 @@ const StyledFeatureOverviewEnvironment = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.background.paper, })); -const StyledEnvironmentAccordionBody = styled(FeatureOverviewEnvironmentBody)( - ({ theme }) => ({ - width: '100%', - position: 'relative', - paddingBottom: theme.spacing(2), - }), -); +const StyledFeatureOverviewEnvironmentBody = styled( + FeatureOverviewEnvironmentBody, +)(({ theme }) => ({ + width: '100%', + position: 'relative', + paddingBottom: theme.spacing(2), +})); const StyledHeader = styled('div')(({ theme }) => ({ display: 'flex', @@ -124,7 +124,7 @@ export const NewFeatureOverviewEnvironment = ({ /> -