diff --git a/frontend/src/component/common/drag-and-drop.jsx b/frontend/src/component/common/drag-and-drop.jsx
new file mode 100644
index 0000000000..97f6e3f61f
--- /dev/null
+++ b/frontend/src/component/common/drag-and-drop.jsx
@@ -0,0 +1,18 @@
+import { DndProvider, createDndContext } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import React, { useRef } from 'react';
+
+const RNDContext = createDndContext(HTML5Backend);
+
+function useDNDProviderElement(props) {
+ const manager = useRef(RNDContext);
+
+ if (!props.children) return null;
+
+ return {props.children};
+}
+
+export default function DragAndDrop(props) {
+ const DNDElement = useDNDProviderElement(props);
+ return {DNDElement};
+}
diff --git a/frontend/src/component/feature/create/add-feature-container.jsx b/frontend/src/component/feature/create/add-feature-container.jsx
index 0204dee4b6..7003785b5c 100644
--- a/frontend/src/component/feature/create/add-feature-container.jsx
+++ b/frontend/src/component/feature/create/add-feature-container.jsx
@@ -29,6 +29,7 @@ class WrapperComponent extends Component {
name,
description: '',
type: 'release',
+ stale: false,
strategies: [],
variants: [],
enabled: true,
diff --git a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
index 6838b38380..0a28ea4497 100644
--- a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
+++ b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
@@ -1,13 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
-
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
import arrayMove from 'array-move';
import ConfigureStrategy from './strategy-configure-container';
import AddStrategy from './strategies-add';
import { HeaderTitle } from '../../common';
+import DragAndDrop from '../../common/drag-and-drop';
import { updateIndexInArray } from '../../common/util';
import styles from './strategy.module.scss';
@@ -57,7 +55,7 @@ const StrategiesList = props => {
/>
));
return (
-
+
{
)}
-
+
);
};
diff --git a/frontend/src/component/feature/strategy/strategies-list-component.jsx b/frontend/src/component/feature/strategy/strategies-list-component.jsx
index 5eb4285569..0b8c5b169b 100644
--- a/frontend/src/component/feature/strategy/strategies-list-component.jsx
+++ b/frontend/src/component/feature/strategy/strategies-list-component.jsx
@@ -1,12 +1,11 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
import { cloneDeep } from 'lodash';
import arrayMove from 'array-move';
import { Button, Icon } from 'react-mdl';
+import DragAndDrop from '../../common/drag-and-drop';
import ConfigureStrategy from './strategy-configure-container';
import AddStrategy from './strategies-add';
import { HeaderTitle } from '../../common';
@@ -123,7 +122,7 @@ const StrategiesList = props => {
/>
));
return (
-
+
{editable && (
{
Clear all
-
+
);
};