fix: should not register duplicate HTML5 backends

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 <DndProvider manager={manager.current.dragDropManager}>{props.children}</DndProvider>;
+}
+
+export default function DragAndDrop(props) {
+    const DNDElement = useDNDProviderElement(props);
+    return <React.Fragment>{DNDElement}</React.Fragment>;
+}

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,

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 (
-        <DndProvider backend={HTML5Backend}>
+        <DragAndDrop>
             <div className={styles.strategyListAdd}>
                 <HeaderTitle
                     title="Activation strategies"
@@ -82,7 +80,7 @@ const StrategiesList = props => {
                     )}
                 </div>
             </div>
-        </DndProvider>
+        </DragAndDrop>
     );
 };
 

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 (
-        <DndProvider backend={HTML5Backend}>
+        <DragAndDrop>
             {editable && (
                 <HeaderTitle
                     title="Activation strategies"
@@ -147,7 +146,7 @@ const StrategiesList = props => {
                     Clear all
                 </Button>
             </div>
-        </DndProvider>
+        </DragAndDrop>
     );
 };