Allow drag and drop or copy and paste of properties in the extension editor (#5222)

GDevelop.js/Bindings/Bindings.idl

@@ -2627,6 +2627,7 @@ interface NamedPropertyDescriptorsList {
     void Remove([Const] DOMString name);
     void Move(unsigned long oldIndex, unsigned long newIndex);
     unsigned long GetCount();
+    unsigned long GetPosition([Const, Ref] NamedPropertyDescriptor item);
 
     unsigned long size();
     [Ref] NamedPropertyDescriptor at(unsigned long index);

GDevelop.js/types/gdnamedpropertydescriptorslist.js

@@ -9,6 +9,7 @@ declare class gdNamedPropertyDescriptorsList {
   remove(name: string): void;
   move(oldIndex: number, newIndex: number): void;
   getCount(): number;
+  getPosition(item: gdNamedPropertyDescriptor): number;
   size(): number;
   at(index: number): gdNamedPropertyDescriptor;
   delete(): void;

newIDE/app/src/UI/EmptyPlaceholder.js

@@ -3,8 +3,10 @@ import * as React from 'react';
 import { Trans } from '@lingui/macro';
 import Container from '@material-ui/core/Container';
 import { ColumnStackLayout } from './Layout';
+import { LineStackLayout } from '../UI/Layout';
 import RaisedButton from '../UI/RaisedButton';
-import { Column, LargeSpacer } from './Grid';
+import FlatButton from '../UI/FlatButton';
+import { Column, Line, LargeSpacer } from './Grid';
 import HelpButton from '../UI/HelpButton';
 import Text from '../UI/Text';
 import TutorialButton from './TutorialButton';
@@ -14,17 +16,31 @@ import Add from './CustomSvgIcons/Add';
 type Props = {|
   title: React.Node,
   description: React.Node,
-  actionLabel: React.Node,
   helpPagePath?: string,
+  helpPageAnchor?: string,
   tutorialId?: string,
-  actionButtonId?: string,
-  onAction: () => void,
   isLoading?: boolean,
+  actionButtonId?: string,
+  actionLabel: React.Node,
   actionIcon?: React.Node,
+  onAction: () => void,
+  secondaryActionLabel?: React.Node,
+  secondaryActionIcon?: React.Node,
+  onSecondaryAction?: () => void,
 |};
 
-const DefaultHelpButton = ({ helpPagePath }: { helpPagePath?: string }) => (
-  <HelpButton label={<Trans>Read the doc</Trans>} helpPagePath={helpPagePath} />
+const DefaultHelpButton = ({
+  helpPagePath,
+  helpPageAnchor,
+}: {
+  helpPagePath?: string,
+  helpPageAnchor?: string,
+}) => (
+  <HelpButton
+    label={<Trans>Read the doc</Trans>}
+    helpPagePath={helpPagePath}
+    anchor={helpPageAnchor}
+  />
 );
 
 /**
@@ -48,32 +64,49 @@ export const EmptyPlaceholder = (props: Props) => (
         </Text>
         <LargeSpacer />
         <ColumnStackLayout alignItems="center" noMargin>
-          <RaisedButton
-            label={props.actionLabel}
-            primary
-            onClick={props.onAction}
-            disabled={!!props.isLoading}
-            icon={
-              props.isLoading ? (
-                <CircularProgress size={24} />
-              ) : props.actionIcon ? (
-                props.actionIcon
-              ) : (
-                <Add />
-              )
-            }
-            id={props.actionButtonId}
-          />
+          <LineStackLayout noMargin>
+            {props.secondaryActionLabel && props.onSecondaryAction && (
+              <FlatButton
+                label={props.secondaryActionLabel}
+                primary
+                onClick={props.onSecondaryAction}
+                disabled={!!props.isLoading}
+                leftIcon={props.secondaryActionIcon}
+              />
+            )}
+            <RaisedButton
+              label={props.actionLabel}
+              primary
+              onClick={props.onAction}
+              disabled={!!props.isLoading}
+              icon={
+                props.isLoading ? (
+                  <CircularProgress size={24} />
+                ) : props.actionIcon ? (
+                  props.actionIcon
+                ) : (
+                  <Add />
+                )
+              }
+              id={props.actionButtonId}
+            />
+          </LineStackLayout>
           {props.tutorialId ? (
             <TutorialButton
               tutorialId={props.tutorialId}
               label={<Trans>Watch tutorial</Trans>}
               renderIfNotFound={
-                <DefaultHelpButton helpPagePath={props.helpPagePath} />
+                <DefaultHelpButton
+                  helpPagePath={props.helpPagePath}
+                  helpPageAnchor={props.helpPageAnchor}
+                />
               }
             />
           ) : (
-            <DefaultHelpButton helpPagePath={props.helpPagePath} />
+            <DefaultHelpButton
+              helpPagePath={props.helpPagePath}
+              helpPageAnchor={props.helpPageAnchor}
+            />
           )}
         </ColumnStackLayout>
       </Column>

newIDE/app/src/stories/componentStories/EventsBasedBehaviorEditor/EventsBasedBehaviorEditorDialog.stories.js

@@ -8,6 +8,7 @@ import { testProject } from '../../GDevelopJsInitializerDecorator';
 
 import muiDecorator from '../../ThemeDecorator';
 import EventsBasedBehaviorEditorDialog from '../../../EventsBasedBehaviorEditor/EventsBasedBehaviorEditorDialog';
+import DragAndDropContextProvider from '../../../UI/DragAndDrop/DragAndDropContextProvider';
 
 export default {
   title: 'EventsBasedBehaviorEditor/EventsBasedBehaviorEditorDialog',
@@ -16,23 +17,27 @@ export default {
 };
 
 export const Default = () => (
-  <EventsBasedBehaviorEditorDialog
-    project={testProject.project}
-    eventsFunctionsExtension={testProject.testEventsFunctionsExtension}
-    eventsBasedBehavior={testProject.testEventsBasedBehavior}
-    onApply={action('apply')}
-    onRenameProperty={action('property rename')}
-    onRenameSharedProperty={action('shared property rename')}
-  />
+  <DragAndDropContextProvider>
+    <EventsBasedBehaviorEditorDialog
+      project={testProject.project}
+      eventsFunctionsExtension={testProject.testEventsFunctionsExtension}
+      eventsBasedBehavior={testProject.testEventsBasedBehavior}
+      onApply={action('apply')}
+      onRenameProperty={action('property rename')}
+      onRenameSharedProperty={action('shared property rename')}
+    />
+  </DragAndDropContextProvider>
 );
 
 export const WithoutFunction = () => (
-  <EventsBasedBehaviorEditorDialog
-    project={testProject.project}
-    eventsFunctionsExtension={testProject.testEventsFunctionsExtension}
-    eventsBasedBehavior={testProject.testEmptyEventsBasedBehavior}
-    onApply={action('apply')}
-    onRenameProperty={action('property rename')}
-    onRenameSharedProperty={action('shared property rename')}
-  />
+  <DragAndDropContextProvider>
+    <EventsBasedBehaviorEditorDialog
+      project={testProject.project}
+      eventsFunctionsExtension={testProject.testEventsFunctionsExtension}
+      eventsBasedBehavior={testProject.testEmptyEventsBasedBehavior}
+      onApply={action('apply')}
+      onRenameProperty={action('property rename')}
+      onRenameSharedProperty={action('shared property rename')}
+    />
+  </DragAndDropContextProvider>
 );