From 33ddda1070ca0f930a87b9e8c8dcb01b8548791d Mon Sep 17 00:00:00 2001
From: Fannie Yan <81410437+fannieyan@users.noreply.github.com>
Date: Wed, 25 May 2022 10:37:28 +0200
Subject: [PATCH] Remove "Create functions or behavior" from project manager
 tab (#3953)

* Move "+ Create functions or behavior" button in extension search dialog
---
 .../ExtensionStore/ExtensionsSearchDialog.js  | 11 ++++++
 newIDE/app/src/ProjectManager/index.js        | 37 ++++++++++---------
 .../ExtensionsSearchDialog.stories.js         |  3 +-
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/newIDE/app/src/AssetStore/ExtensionStore/ExtensionsSearchDialog.js b/newIDE/app/src/AssetStore/ExtensionStore/ExtensionsSearchDialog.js
index 2f30c7de11..1495cfca9f 100644
--- a/newIDE/app/src/AssetStore/ExtensionStore/ExtensionsSearchDialog.js
+++ b/newIDE/app/src/AssetStore/ExtensionStore/ExtensionsSearchDialog.js
@@ -17,12 +17,14 @@ import {
   addCreateBadgePreHookIfNotClaimed,
   TRIVIAL_FIRST_EXTENSION,
 } from '../../Utils/GDevelopServices/Badge';
+import Add from '@material-ui/icons/Add';
 
 type Props = {|
   project: gdProject,
   onClose: () => void,
   onInstallExtension: ExtensionShortHeader => void,
   onExtensionInstalled?: (extensionShortHeader?: ExtensionShortHeader) => void,
+  onCreateNew?: () => void,
 |};
 
 /**
@@ -33,6 +35,7 @@ export default function ExtensionsSearchDialog({
   onClose,
   onInstallExtension,
   onExtensionInstalled,
+  onCreateNew,
 }: Props) {
   const [isInstalling, setIsInstalling] = React.useState(false);
   const [extensionWasInstalled, setExtensionWasInstalled] = React.useState(
@@ -114,6 +117,14 @@ export default function ExtensionsSearchDialog({
                 disabled={isInstalling}
               />
             ) : null,
+            onCreateNew ? (
+              <FlatButton
+                key="create-new"
+                onClick={onCreateNew}
+                label={<Trans>Create a new extension</Trans>}
+                icon={<Add />}
+              />
+            ) : null,
           ]}
           cannotBeDismissed={true}
           flexBody
diff --git a/newIDE/app/src/ProjectManager/index.js b/newIDE/app/src/ProjectManager/index.js
index 352d83d6af..77650c427b 100644
--- a/newIDE/app/src/ProjectManager/index.js
+++ b/newIDE/app/src/ProjectManager/index.js
@@ -315,6 +315,7 @@ export default class ProjectManager extends React.Component<Props, State> {
     );
     project.insertNewEventsFunctionsExtension(newName, index + 1);
     this._onProjectItemModified();
+    return newName;
   };
 
   _moveUpLayout = (index: number) => {
@@ -635,6 +636,15 @@ export default class ProjectManager extends React.Component<Props, State> {
     this.forceUpdate();
   };
 
+  _onCreateNewExtension = (project: gdProject, i18n: I18nType) => {
+    const newExtensionName = this._addEventsFunctionsExtension(
+      project.getEventsFunctionsExtensionsCount(),
+      i18n
+    );
+    this.props.onOpenEventsFunctionsExtension(newExtensionName);
+    this.setState({ extensionsSearchDialogOpen: false });
+  };
+
   render() {
     const {
       project,
@@ -991,9 +1001,9 @@ export default class ProjectManager extends React.Component<Props, State> {
                               eventsFunctionsExtension
                             )
                           }
-                          onAdd={() =>
-                            this._addEventsFunctionsExtension(i, i18n)
-                          }
+                          onAdd={() => {
+                            this._addEventsFunctionsExtension(i, i18n);
+                          }}
                           onRename={newName => {
                             this.props.onRenameEventsFunctionsExtension(
                               name,
@@ -1040,24 +1050,12 @@ export default class ProjectManager extends React.Component<Props, State> {
                         />
                       );
                     })
-                    .concat(
-                      <AddListItem
-                        key={'add-events-functions-extension'}
-                        primaryText={
-                          <Trans>Click to add functions and behaviors</Trans>
-                        }
-                        onClick={() =>
-                          this._addEventsFunctionsExtension(
-                            project.getEventsFunctionsExtensionsCount(),
-                            i18n
-                          )
-                        }
-                      />
-                    )
                     .concat(
                       <SearchListItem
                         key={'extensions-search'}
-                        primaryText={<Trans>Search for new extensions</Trans>}
+                        primaryText={
+                          <Trans>Create or search for new extensions</Trans>
+                        }
                         onClick={this._openSearchExtensionDialog}
                       />
                     )
@@ -1167,6 +1165,9 @@ export default class ProjectManager extends React.Component<Props, State> {
                   this.setState({ extensionsSearchDialogOpen: false })
                 }
                 onInstallExtension={onInstallExtension}
+                onCreateNew={() => {
+                  this._onCreateNewExtension(project, i18n);
+                }}
               />
             )}
             {openedExtensionShortHeader && openedExtensionName && (
diff --git a/newIDE/app/src/stories/componentStories/AssetStore/ExtensionStore/ExtensionsSearchDialog.stories.js b/newIDE/app/src/stories/componentStories/AssetStore/ExtensionStore/ExtensionsSearchDialog.stories.js
index 4327a17e9d..8b827e46c4 100644
--- a/newIDE/app/src/stories/componentStories/AssetStore/ExtensionStore/ExtensionsSearchDialog.stories.js
+++ b/newIDE/app/src/stories/componentStories/AssetStore/ExtensionStore/ExtensionsSearchDialog.stories.js
@@ -28,8 +28,9 @@ export const Default = () => (
         <ExtensionStoreStateProvider>
           <ExtensionsSearchDialog
             project={testProject.project}
-            onClose={action('on close')}
+            onClose={action('onClose')}
             onInstallExtension={action('onInstallExtension')}
+            onCreateNew={action('onCreateNew')}
           />
         </ExtensionStoreStateProvider>
       </EventsFunctionsExtensionsProvider>