Upgrade to Flow 0.120.1

2025-10-15 10:19:04 +00:00 · 2020-03-09 22:23:27 +00:00
parent 765295fc5d
commit cb43eb7780
21 changed files with 6292 additions and 6166 deletions
--- a/newIDE/app/.flowconfig
+++ b/newIDE/app/.flowconfig
@@ -1,12 +1,15 @@
 [ignore]
 <PROJECT_ROOT>/resources/.*
-<PROJECT_ROOT>/node_modules/auth0-lock/node_modules/fbjs/flow/include/PromiseMap.js
 <PROJECT_ROOT>/node_modules/protobufjs/src/bower.json
 <PROJECT_ROOT>/node_modules/GDJS-for-web-app-only/Runtime/Cocos2d/project.json

+[declarations]
+# lingui-js triggers some Flow errors
+<PROJECT_ROOT>/node_modules/@lingui/core/.*
+
 [include]

 [libs]

 [options]
-module.ignore_non_literal_requires=true
+module.ignore_non_literal_requires=true
--- a/newIDE/app/flow-typed/npm/lodash_v4.x.x.js
+++ b/newIDE/app/flow-typed/npm/lodash_v4.x.x.js
--- a/newIDE/app/flow-typed/npm/react-color_v2.x.x.js
+++ b/newIDE/app/flow-typed/npm/react-color_v2.x.x.js
@@ -1,7 +1,8 @@
-// flow-typed signature: ad7630ebca7749193fedebd877d186a5
-// flow-typed version: 9bf16da660/react-color_v2.x.x/flow_>=v0.56.x
+// flow-typed signature: 98b1053ec9133ce831207195fb1239cb
+// flow-typed version: b5454b8595/react-color_v2.x.x/flow_>=v0.104.x

 declare module "react-color" {
+  import type { ComponentType, Component } from 'react';
  declare export type HexColor = string;

  declare export type HSLColor = {|
@@ -48,7 +49,7 @@ declare module "react-color" {
    height?: string,
    direction?: "horizontal" | "vertical",
    renderers?: Object,
-    pointer?: React$ComponentType<any>
+    pointer?: ComponentType<any>
  |};

  declare export type BlockPickerProps = {|
@@ -93,7 +94,7 @@ declare module "react-color" {
    width?: string,
    height?: string,
    direction?: "horizontal" | "vertical",
-    pointer?: React$ComponentType<any>
+    pointer?: ComponentType<any>
  |};

  declare export type MaterialPickerProps = {|
@@ -118,7 +119,7 @@ declare module "react-color" {

  declare export type SliderPickerProps = {|
    ...ColorPickerProps,
-    pointer?: React$ComponentType<any>
+    pointer?: ComponentType<any>
  |};

  declare export type SwatchesPickerProps = {|
@@ -148,29 +149,34 @@ declare module "react-color" {
    rgb: RGBColor,
    oldHue: number,
    onChange?: ColorWrapChangeHandler,
-    source: string
+    source: string,
+    ...
  };

-  declare export class AlphaPicker extends React$Component<AlphaPickerProps> {}
-  declare export class BlockPicker extends React$Component<BlockPickerProps> {}
-  declare export class ChromePicker extends React$Component<ChromePickerProps> {}
-  declare export class CirclePicker extends React$Component<CirclePickerProps> {}
-  declare export class CompactPicker extends React$Component<CompactPickerProps> {}
-  declare export class GithubPicker extends React$Component<GithubPickerProps> {}
-  declare export class HuePicker extends React$Component<HuePickerProps> {}
-  declare export class MaterialPicker extends React$Component<MaterialPickerProps> {}
-  declare export class PhotoshopPicker extends React$Component<PhotoshopPickerProps> {}
-  declare export class SketchPicker extends React$Component<SketchPickerProps> {}
-  declare export class SliderPicker extends React$Component<SliderPickerProps> {}
-  declare export class SwatchesPicker extends React$Component<SwatchesPickerProps> {}
-  declare export class TwitterPicker extends React$Component<TwitterPickerProps> {}
+  declare export var AlphaPicker: Class<Component<AlphaPickerProps>>;
+  declare export var BlockPicker: Class<Component<BlockPickerProps>>;
+  declare export var ChromePicker: Class<Component<ChromePickerProps>>;
+  declare export var CirclePicker: Class<Component<CirclePickerProps>>;
+  declare export var CompactPicker: Class<Component<CompactPickerProps>>;
+  declare export var GithubPicker: Class<Component<GithubPickerProps>>;
+  declare export var HuePicker: Class<Component<HuePickerProps>>;
+  declare export var MaterialPicker: Class<Component<MaterialPickerProps>>;
+  declare export var PhotoshopPicker: Class<Component<PhotoshopPickerProps>>;
+  declare export var SketchPicker: Class<Component<SketchPickerProps>>;
+  declare export var SliderPicker: Class<Component<SliderPickerProps>>;
+  declare export var SwatchesPicker: Class<Component<SwatchesPickerProps>>;
+  declare export var TwitterPicker: Class<Component<TwitterPickerProps>>;

-  declare export function CustomPicker<Props: {}>(
-    Component: React$ComponentType<InjectedColorProps & $Supertype<Props>>
-  ): React$ComponentType<Props>;
+  declare export function CustomPicker<
+    Props: InjectedColorProps,
+    Comp: ComponentType<Props>,
+  >(
+    Component: Comp
+  ): ComponentType<$Diff<React$ElementConfig<Comp>, InjectedColorProps>>;
 }

 declare module "react-color/lib/components/common" {
+  import type { ComponentType, Component } from 'react';
  import type {
    HexColor,
    RGBColor,
@@ -188,7 +194,7 @@ declare module "react-color/lib/components/common" {

  declare export type AlphaProps = {|
    ...PartialColorResult,
-    pointer?: React$ComponentType<any>,
+    pointer?: ComponentType<any>,
    onChange?: ColorChangeHandler
  |};

@@ -205,14 +211,14 @@ declare module "react-color/lib/components/common" {

  declare export type HueProps = {|
    ...PartialColorResult,
-    pointer?: React$ComponentType<any>,
+    pointer?: ComponentType<any>,
    onChange?: ColorChangeHandler,
    direction?: "horizontal" | "vertical"
  |};

  declare export type SaturationProps = {|
    ...PartialColorResult,
-    pointer?: React$ComponentType<any>,
+    pointer?: ComponentType<any>,
    onChange?: ColorChangeHandler
  |};

@@ -222,9 +228,9 @@ declare module "react-color/lib/components/common" {
    grey?: string
  |};

-  declare export class Alpha extends React$Component<AlphaProps> {}
-  declare export class EditableInput extends React$Component<EditableInputProps> {}
-  declare export class Hue extends React$Component<HueProps> {}
-  declare export class Saturation extends React$Component<SaturationProps> {}
-  declare export class Checkboard extends React$Component<CheckboardProps> {}
+  declare export var Alpha: Class<Component<AlphaProps>>;
+  declare export var EditableInput: Class<Component<EditableInputProps>>;
+  declare export var Hue: Class<Component<HueProps>>;
+  declare export var Saturation: Class<Component<SaturationProps>>;
+  declare export var Checkboard: Class<Component<CheckboardProps>>;
 }
--- a/newIDE/app/flow-typed/npm/react-dnd_v2.x.x.js
+++ b/newIDE/app/flow-typed/npm/react-dnd_v2.x.x.js
@@ -1,23 +1,22 @@
-// flow-typed signature: cf6cf392ef13583af7c89327c319a5a5
-// flow-typed version: 45acb9a3f7/react-dnd_v2.x.x/flow_>=v0.53.x
+// flow-typed signature: 0df5fbd2d164ee9c137293cbb8debfeb
+// flow-typed version: 4618dcebd8/react-dnd_v2.x.x/flow_>=v0.98.x

 declare module "react-dnd" {
  declare type Identifier = string;

  declare type ClientOffset = {
    x: number,
-    y: number
+    y: number,
+    ...
  };

  declare type ElementOrNode = React$Element<any> | HTMLElement;

-  declare type DndOptions<P> = {
-    arePropsEqual?: (props: P, otherProps: P) => boolean
-  };
+  declare type DndOptions<P> = { arePropsEqual?: (props: P, otherProps: P) => boolean, ... };

-  declare type ComponentClassWithDefaultProps<D: {}, P: {}, S> = Class<
+  declare type ComponentClassWithDefaultProps<D: {...}, P: {...}, S> = Class<
    React$Component<P, S>
-  > & { defaultProps: D };
+  > & { defaultProps: D, ... };

  declare type _InstanceOf<I, C: Class<I>> = I;
  declare type InstanceOf<C> = _InstanceOf<*, C>;
@@ -30,7 +29,7 @@ declare module "react-dnd" {
    state: void;
  }

-  declare type Connector<SP: {}, CP: {}> = (<
+  declare type Connector<SP: {...}, CP: {...}> = (<
    P: SP,
    D,
    S,
@@ -38,16 +37,16 @@ declare module "react-dnd" {
  >(
    component: C
  ) => Class<
-    ConnectedComponent<C, InstanceOf<C>, { ...CP } & $Diff<$Diff<P, D>, CP>>
+    ConnectedComponent<C, InstanceOf<C>, { ...CP, ... } & $Diff<$Diff<P, D>, CP>>
  >) &
    (<P: SP, S, C: Class<React$Component<P, S>>>(
      component: C
    ) => Class<
-      ConnectedComponent<C, InstanceOf<C>, { ...CP } & $Diff<P, CP>>
+      ConnectedComponent<C, InstanceOf<C>, { ...CP, ... } & $Diff<P, CP>>
    >) &
    (<P: SP, C: React$ComponentType<P>>(
      component: C
-    ) => Class<ConnectedComponent<C, void, { ...CP } & $Diff<P, CP>>>);
+    ) => Class<ConnectedComponent<C, void, { ...CP, ... } & $Diff<P, CP>>>);

  // Drag Source
  // ----------------------------------------------------------------------
@@ -60,16 +59,14 @@ declare module "react-dnd" {
      monitor: DragSourceMonitor,
      component: React$Component<P, any>
    ) => Object,
-
    endDrag?: (
      props: P,
      monitor: DragSourceMonitor,
      component: ?React$Component<P, any>
    ) => void,
-
    canDrag?: (props: P, monitor: DragSourceMonitor) => boolean,
-
-    isDragging?: (props: P, monitor: DragSourceMonitor) => boolean
+    isDragging?: (props: P, monitor: DragSourceMonitor) => boolean,
+    ...
  };

  declare type DragSourceMonitor = {
@@ -83,22 +80,23 @@ declare module "react-dnd" {
    getInitialSourceClientOffset: () => ClientOffset,
    getClientOffset: () => ClientOffset,
    getDifferenceFromInitialOffset: () => ClientOffset,
-    getSourceClientOffset: () => ClientOffset
+    getSourceClientOffset: () => ClientOffset,
+    ...
  };

  declare type DragSourceConnector = {
    dragSource: () => ConnectDragSource,
-    dragPreview: () => ConnectDragPreview
+    dragPreview: () => ConnectDragPreview,
+    ...
  };

-  declare type DragSourceOptions = {
-    dropEffect?: string
-  };
+  declare type DragSourceOptions = { dropEffect?: string, ... };

  declare type DragPreviewOptions = {
    captureDraggingState?: boolean,
    anchorX?: number,
-    anchorY?: number
+    anchorY?: number,
+    ...
  };

  declare type ConnectDragSource = <T: ElementOrNode>(
@@ -116,12 +114,12 @@ declare module "react-dnd" {
    monitor: DragSourceMonitor
  ) => T;

-  declare function DragSource<OP: {}, CP: {}>(
+  declare function DragSource<OP: {...}, CP: {...}>(
    type: DragSourceType<OP>,
    spec: DragSourceSpec<OP>,
    collect: DragSourceCollector<CP>,
    options?: DndOptions<OP>
-  ): Connector<$Supertype<OP & CP>, CP>;
+  ): Connector<$Shape<OP & CP>, CP>;

  // Drop Target
  // ----------------------------------------------------------------------
@@ -137,19 +135,18 @@ declare module "react-dnd" {
      monitor: DropTargetMonitor,
      component: React$Component<P, any>
    ) => ?Object,
-
    hover?: (
      props: P,
      monitor: DropTargetMonitor,
      component: React$Component<P, any>
    ) => void,
-
-    canDrop?: (props: P, monitor: DropTargetMonitor) => boolean
+    canDrop?: (props: P, monitor: DropTargetMonitor) => boolean,
+    ...
  };

  declare type DropTargetMonitor = {
    canDrop: () => boolean,
-    isOver: (options?: { shallow: boolean }) => boolean,
+    isOver: (options?: { shallow: boolean, ... }) => boolean,
    getItemType: () => Identifier,
    getItem: () => Object,
    getDropResult: () => Object,
@@ -158,12 +155,11 @@ declare module "react-dnd" {
    getInitialSourceClientOffset: () => ClientOffset,
    getClientOffset: () => ClientOffset,
    getDifferenceFromInitialOffset: () => ClientOffset,
-    getSourceClientOffset: () => ClientOffset
+    getSourceClientOffset: () => ClientOffset,
+    ...
  };

-  declare type DropTargetConnector = {
-    dropTarget: () => ConnectDropTarget
-  };
+  declare type DropTargetConnector = { dropTarget: () => ConnectDropTarget, ... };

  declare type ConnectDropTarget = <T: ElementOrNode>(elementOrNode: T) => ?T;

@@ -172,12 +168,12 @@ declare module "react-dnd" {
    monitor: DropTargetMonitor
  ) => T;

-  declare function DropTarget<OP: {}, CP: {}>(
+  declare function DropTarget<OP: {...}, CP: {...}>(
    types: DropTargetTypes<OP>,
    spec: DropTargetSpec<OP>,
    collect: DropTargetCollector<CP>,
    options?: DndOptions<OP>
-  ): Connector<$Supertype<OP & CP>, CP>;
+  ): Connector<$Shape<OP & CP>, CP>;

  // Drag Layer
  // ----------------------------------------------------------------------
@@ -190,13 +186,14 @@ declare module "react-dnd" {
    getInitialSourceClientOffset: () => ClientOffset,
    getClientOffset: () => ClientOffset,
    getDifferenceFromInitialOffset: () => ClientOffset,
-    getSourceClientOffset: () => ClientOffset
+    getSourceClientOffset: () => ClientOffset,
+    ...
  };

-  declare function DragLayer<OP: {}, CP: {}>(
+  declare function DragLayer<OP: {...}, CP: {...}>(
    collect: (monitor: DragLayerMonitor) => CP,
    options?: DndOptions<OP>
-  ): Connector<$Supertype<OP & CP>, CP>;
+  ): Connector<$Shape<OP & CP>, CP>;

  // Drag Drop Context
  // ----------------------------------------------------------------------
@@ -204,7 +201,8 @@ declare module "react-dnd" {
  declare type ProviderProps = {
    backend: mixed,
    children: React$Element<any>,
-    window?: Object
+    window?: Object,
+    ...
  };

  declare class DragDropContextProvider<ProviderProps> extends React$Component<
@@ -213,7 +211,7 @@ declare module "react-dnd" {
    props: ProviderProps;
  }

-  declare function DragDropContext<OP: {}, CP: {}>(
+  declare function DragDropContext<OP: {...}, CP: {...}>(
    backend: mixed
-  ): Connector<$Supertype<OP & CP>, CP>;
+  ): Connector<$Shape<OP & CP>, CP>;
 }
--- a/newIDE/app/package-lock.json
+++ b/newIDE/app/package-lock.json
@@ -8298,9 +8298,9 @@
      }
    },
    "flow-bin": {
-      "version": "0.92.1",
-      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.92.1.tgz",
-      "integrity": "sha512-F5kC5oQOR2FXROAeybJHFqgZP+moKV9fa/53QK4Q4WayTQHdA0KSl48KD1gP0A9mioRLiKUegTva/7I15cX3Iw==",
+      "version": "0.120.1",
+      "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.120.1.tgz",
+      "integrity": "sha512-KgE+d+rKzdXzhweYVJty1QIOOZTTbtnXZf+4SLnmArLvmdfeLreQOZpeLbtq5h79m7HhDzX/HkUkoyu/fmSC2A==",
      "dev": true
    },
    "flow-coverage-report": {
--- a/newIDE/app/package.json
+++ b/newIDE/app/package.json
@@ -13,7 +13,7 @@
    "@storybook/react": "5.1.9",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "8.0.5",
-    "flow-bin": "^0.92.0",
+    "flow-bin": "0.120.1",
    "flow-coverage-report": "^0.4.0",
    "folder-hash": "^3.0.0",
    "follow-redirects": "^1.2.3",
--- a/newIDE/app/src/EventsSheet/EventsTree/Instruction.js
+++ b/newIDE/app/src/EventsSheet/EventsTree/Instruction.js
@@ -207,70 +207,72 @@ const Instruction = (props: Props) => {
        // the subinstructions list inside the connectDropTarget/connectDragSource
        // as otherwise this can confuse react-dnd ("Expected to find a valid target")
        // (surely due to components re-mounting/rerendering ?).
-        const instructionElement = connectDropTarget(
-          connectDragSource(
-            <div
-              style={styles.container}
-              className={classNames({
-                [selectableArea]: true,
-                [selectedArea]: props.selected,
-              })}
-              onClick={e => {
-                e.stopPropagation();
+        const instructionDragSourceElement = connectDragSource(
+          <div
+            style={styles.container}
+            className={classNames({
+              [selectableArea]: true,
+              [selectedArea]: props.selected,
+            })}
+            onClick={e => {
+              e.stopPropagation();

-                if (props.screenType === 'touch' && props.selected) {
-                  // On touch screens, tapping again a selected instruction should edit it.
-                  props.onDoubleClick();
-                } else {
-                  props.onClick();
-                }
-              }}
-              onDoubleClick={e => {
-                e.stopPropagation();
+              if (props.screenType === 'touch' && props.selected) {
+                // On touch screens, tapping again a selected instruction should edit it.
                props.onDoubleClick();
-              }}
-              onContextMenu={e => {
-                e.stopPropagation();
-                props.onContextMenu(e.clientX, e.clientY);
-              }}
-              onKeyPress={event => {
-                if (event.key === 'Enter') {
-                  props.onDoubleClick();
-                  event.stopPropagation();
-                  event.preventDefault();
-                } else if (event.key === ' ') {
-                  props.onClick();
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              }}
-              tabIndex={0}
-            >
-              {instruction.isInverted() && (
-                <img
-                  className={classNames({
-                    [icon]: true,
-                  })}
-                  src="res/contraire.png"
-                  alt="Condition is negated"
-                />
-              )}
+              } else {
+                props.onClick();
+              }
+            }}
+            onDoubleClick={e => {
+              e.stopPropagation();
+              props.onDoubleClick();
+            }}
+            onContextMenu={e => {
+              e.stopPropagation();
+              props.onContextMenu(e.clientX, e.clientY);
+            }}
+            onKeyPress={event => {
+              if (event.key === 'Enter') {
+                props.onDoubleClick();
+                event.stopPropagation();
+                event.preventDefault();
+              } else if (event.key === ' ') {
+                props.onClick();
+                event.stopPropagation();
+                event.preventDefault();
+              }
+            }}
+            tabIndex={0}
+          >
+            {instruction.isInverted() && (
              <img
                className={classNames({
                  [icon]: true,
                })}
-                src={metadata.getSmallIconFilename()}
-                alt=""
+                src="res/contraire.png"
+                alt="Condition is negated"
              />
-              {renderInstructionText(metadata)}
-            </div>
-          )
+            )}
+            <img
+              className={classNames({
+                [icon]: true,
+              })}
+              src={metadata.getSmallIconFilename()}
+              alt=""
+            />
+            {renderInstructionText(metadata)}
+          </div>
        );

+        const instructionDragSourceDropTargetElement = instructionDragSourceElement
+          ? connectDropTarget(instructionDragSourceElement)
+          : null;
+
        return (
          <React.Fragment>
            {isOver && <DropIndicator canDrop={canDrop} />}
-            {instructionElement}
+            {instructionDragSourceDropTargetElement}
            {metadata.canHaveSubInstructions() && (
              <InstructionsList
                style={
--- a/newIDE/app/src/InstancesEditor/ScrollbarContainer.js
+++ b/newIDE/app/src/InstancesEditor/ScrollbarContainer.js
@@ -29,18 +29,18 @@ type ScrollableComponent = {
  getViewPosition: () => ?ViewPosition,
 };

-type Props = {
+type Props = {|
  wrappedEditorRef: ?(?ScrollableComponent) => void,
-};
+|};

-type State = {
+type State = {|
  xValue: number,
  yValue: number,
  xMin: number,
  xMax: number,
  yMin: number,
  yMax: number,
-};
+|};

 const noop = () => {};

--- a/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
+++ b/newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js
@@ -235,6 +235,7 @@ export default class PreferencesProvider extends React.Component<Props, State> {
          ...state.values,
          hiddenAlertMessages: {
            ...state.values.hiddenAlertMessages,
+            // $FlowFixMe - Flow won't typecheck this because of https://medium.com/flow-type/spreads-common-errors-fixes-9701012e9d58
            [identifier]: !show,
          },
        },
--- a/newIDE/app/src/ProjectsStorage/GoogleDriveStorageProvider/index.js
+++ b/newIDE/app/src/ProjectsStorage/GoogleDriveStorageProvider/index.js
@@ -393,7 +393,7 @@ export default ({
                closeDialog();
                resolve({ wasSaved: false, fileMetadata });
              }}
-              onSave={({ selectedFileOrFolder, newFileName, onError }) => {
+              onSave={({ selectedFileOrFolder, newFileName }) => {
                const content = serializeToJSON(project);

                if (selectedFileOrFolder.type === 'FOLDER') {
--- a/newIDE/app/src/ProjectsStorage/SaveToStorageProviderDialog.js
+++ b/newIDE/app/src/ProjectsStorage/SaveToStorageProviderDialog.js
@@ -13,12 +13,7 @@ type Props = {|
  onClose: () => void,
 |};

-export default ({
-  onClose,
-  storageProviders,
-  onChooseProvider,
-  onCreateNewProject,
-}: Props) => {
+export default ({ onClose, storageProviders, onChooseProvider }: Props) => {
  return (
    <I18n>
      {({ i18n }) => (
--- a/newIDE/app/src/ResourcesList/LocalJfxrBridge.js
+++ b/newIDE/app/src/ResourcesList/LocalJfxrBridge.js
@@ -19,7 +19,6 @@ export const openJfxr = ({
  resourcesLoader,
  resourceNames,
  onChangesSaved,
-  resourcePath,
  extraOptions,
 }: ExternalEditorOpenOptions) => {
  if (!electron || !ipcRenderer) return;
--- a/newIDE/app/src/ResourcesList/LocalYarnBridge.js
+++ b/newIDE/app/src/ResourcesList/LocalYarnBridge.js
@@ -19,7 +19,6 @@ export const openYarn = ({
  resourcesLoader,
  resourceNames,
  onChangesSaved,
-  resourcePath,
  extraOptions,
 }: ExternalEditorOpenOptions) => {
  if (!electron || !ipcRenderer) return;
--- a/newIDE/app/src/UI/Dialog/index.js
+++ b/newIDE/app/src/UI/Dialog/index.js
@@ -55,6 +55,14 @@ type Props = {|
  noTitleMargin?: boolean,
 |};

+// Help Flow to understand the type of the dialog content style.
+type DialogContentStyle = {
+  padding?: 0,
+  overflowX?: 'hidden',
+  display?: 'flex',
+  flexDirection?: 'row',
+};
+
 /**
 * A enhanced material-ui Dialog that can have optional secondary actions
 * and no margins if required.
@@ -82,6 +90,12 @@ export default (props: Props) => {
    actions
  );

+  const dialogContentStyle: DialogContentStyle = {
+    ...(noMargin ? styles.noMarginBody : styles.defaultBody),
+    ...((flexRowBody ? styles.flexRowBody : {}): DialogContentStyle),
+    ...((flexBody ? styles.flexBody : {}): DialogContentStyle),
+  };
+
  return (
    <ResponsiveWindowMeasurer>
      {size => (
@@ -100,15 +114,7 @@ export default (props: Props) => {
              {title}
            </DialogTitle>
          )}
-          <DialogContent
-            style={{
-              ...(noMargin ? styles.noMarginBody : styles.defaultBody),
-              ...(flexRowBody ? styles.flexRowBody : {}),
-              ...(flexBody ? styles.flexBody : {}),
-            }}
-          >
-            {children}
-          </DialogContent>
+          <DialogContent style={dialogContentStyle}>{children}</DialogContent>
          <DialogActions
            style={
              secondaryActions
--- a/newIDE/app/src/UI/DragAndDrop/DragSourceAndDropTarget.js
+++ b/newIDE/app/src/UI/DragAndDrop/DragSourceAndDropTarget.js
@@ -17,9 +17,9 @@ type Props<DraggedItemType> = {|
    connectDropTarget: ConnectDropTarget,
    isOver: boolean,
    canDrop: boolean,
-  }) => React.Node,
+  }) => ?React.Node,
  beginDrag: () => DraggedItemType,
-  canDrag: (item: DraggedItemType) => boolean,
+  canDrag?: (item: DraggedItemType) => boolean,
  canDrop: (item: DraggedItemType) => boolean,
  drop: () => void,
 |};
--- a/newIDE/app/src/UI/DragAndDrop/DropTarget.js
+++ b/newIDE/app/src/UI/DragAndDrop/DropTarget.js
@@ -12,7 +12,7 @@ type Props<DraggedItemType> = {|
    connectDropTarget: ConnectDropTarget,
    isOver: boolean,
    canDrop: boolean,
-  }) => React.Node,
+  }) => ?React.Node,
  canDrop: (item: DraggedItemType) => boolean,
  hover?: (monitor: DropTargetMonitor) => void,
  drop: (monitor: DropTargetMonitor) => void,
--- a/newIDE/app/src/UI/List.js
+++ b/newIDE/app/src/UI/List.js
@@ -28,7 +28,7 @@ type ListItemRightButtonProps =
  | {|
      displayReloadButton: boolean,
      reloadButtonTooltip: string,
-      onReload: () => void,
+      onReload?: () => void,
    |}
  | {|
      displayMenuButton: boolean,
--- a/newIDE/app/src/UI/RaisedButton.js
+++ b/newIDE/app/src/UI/RaisedButton.js
@@ -22,10 +22,10 @@ export type RaisedButtonPropsWithoutOnClick = {|
  labelPosition?: 'before',
 |};

-type Props = {
+type Props = {|
  ...RaisedButtonPropsWithoutOnClick,
  onClick: ?() => void,
-};
+|};

 /**
 * A raised button based on Material-UI button.
--- a/newIDE/app/src/UI/SortableVirtualizedItemList/ItemRow.js
+++ b/newIDE/app/src/UI/SortableVirtualizedItemList/ItemRow.js
@@ -31,7 +31,7 @@ type Props<Item> = {
  buildMenuTemplate: () => Array<any>,
  onEdit?: ?(Item) => void,
  hideMenuButton: boolean,
-  connectIconDragSource?: ?(React.Node) => React.Node,
+  connectIconDragSource?: ?(React.Element<any>) => ?React.Node,
 };

 class ItemRow<Item> extends React.Component<Props<Item>> {
--- a/newIDE/app/src/UI/SortableVirtualizedItemList/index.js
+++ b/newIDE/app/src/UI/SortableVirtualizedItemList/index.js
@@ -47,7 +47,7 @@ export default class SortableVirtualizedItemList<Item> extends React.Component<
    item: Item,
    index: number,
    windowWidth: WidthType,
-    connectIconDragSource?: ?(React.Node) => React.Node
+    connectIconDragSource?: ?(React.Element<any>) => ?React.Node
  ) {
    const {
      selectedItems,
@@ -140,6 +140,8 @@ export default class SortableVirtualizedItemList<Item> extends React.Component<
                      <DragSourceAndDropTarget
                        beginDrag={() => {
                          this.props.onItemSelected(item);
+
+                          // $FlowFixMe
                          return {};
                        }}
                        canDrag={() => !nameBeingEdited}
@@ -174,6 +176,8 @@ export default class SortableVirtualizedItemList<Item> extends React.Component<
                            </div>
                          );

+                          if (!dropTarget) return null;
+
                          return screenType === 'touch'
                            ? dropTarget
                            : connectDragSource(dropTarget);
--- a/newIDE/app/src/stories/DragAndDropTestBed.js
+++ b/newIDE/app/src/stories/DragAndDropTestBed.js
@@ -23,24 +23,26 @@ const DragSourceAndDropTargetBox = ({ name }: {| name: string |}) => (
      console.log('Selection to be dropped on' + name);
    }}
  >
-    {({ connectDragSource, connectDropTarget, isOver, canDrop }) =>
-      connectDropTarget(
-        connectDragSource(
-          <div
-            style={{
-              backgroundColor: 'blue',
-              color: 'white',
-              height: 100,
-              width: 100,
-              margin: 20,
-            }}
-          >
-            This is a box called {name}.{isOver && <div>Hovered</div>}
-            {canDrop && <div>Can drop here</div>}
-          </div>
-        )
-      )
-    }
+    {({ connectDragSource, connectDropTarget, isOver, canDrop }) => {
+      const connectedDragSource = connectDragSource(
+        <div
+          style={{
+            backgroundColor: 'blue',
+            color: 'white',
+            height: 100,
+            width: 100,
+            margin: 20,
+          }}
+        >
+          This is a box called {name}.{isOver && <div>Hovered</div>}
+          {canDrop && <div>Can drop here</div>}
+        </div>
+      );
+
+      return connectedDragSource
+        ? connectDropTarget(connectedDragSource)
+        : null;
+    }}
  </DragSourceAndDropTarget>
 );