Improve Quick Customization flow #6978

ClementPasteau · 2024-09-19T14:43:42Z

Mainly simplify the flow, with fewer objects, fewer behavior props to modify, a title to update and a simple save/publish end screen.

Todo:

fix a bug where trying to swap an asset after having navigated through the store on another page creates an error. -> should reset the store

ClementPasteau · 2024-09-19T16:01:28Z

newIDE/app/src/AssetStore/AssetsList.js

@@ -202,9 +201,8 @@ const PageBreakNavigation = ({
          }}
          disabled={pageBreakIndex <= 0}
        />
-        <RaisedButton
+        <FlatButton


that button was too visible in the shop, where it's only to navigate pages. I think it's better this way

ClementPasteau · 2024-09-19T16:02:11Z

newIDE/app/src/AssetStore/index.js

+              </IconButton>
+            )}
+            <Column expand useFullHeight noMargin>
+              <SearchBar


only show searchbar when swapping asset

ClementPasteau · 2024-09-19T16:04:01Z

newIDE/app/src/AssetStore/index.js

@@ -792,7 +798,8 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
              hideGameTemplates={hideGameTemplates}
              hideDetails={!!assetSwappedObject}
            />
-          ) : openedAssetShortHeader ? (
+          ) : // Do not show the asset details if we're swapping an asset.
+          openedAssetShortHeader && !assetSwappedObject ? (


that logic is both for asset swapping in the objects list & asset swapping in the quick customization.
I'm wondering if we should differentiate both.
-> quick custom, keep it simple
-> objects list, give all the search options, including seeing the details page

ClementPasteau · 2024-09-19T16:04:50Z

newIDE/app/src/AssetStore/index.js

-                  if (assetsListInterface) {
-                    assetsListInterface.scrollToPosition(0);
-                    assetsListInterface.setPageBreakIndex(0);
+                value={searchText}


we should probably initiate the searchText to something similar to the object being swapped, to get better results.
Though, some names may not give results at all

ClementPasteau · 2024-09-19T16:06:18Z

newIDE/app/src/BehaviorsEditor/index.js

+        <QuickCustomizationPropertiesVisibilityDialog
+          open={!!selectedQuickCustomizationPropertiesBehavior}
+          onClose={() => setSelectedQuickCustomizationPropertiesBehavior(null)}
+          propertyNames={selectedQuickCustomizationPropertiesBehavior


for some reason, passing the gdMapStringPropertyDescriptor to that dialog was not working properly. when getting the keys in the dialog, the result was not the one excepted. I couldn't figure out what was wrong & ended up passing the names directly from there.

ClementPasteau · 2024-09-19T16:07:06Z

newIDE/app/src/CompactPropertiesEditor/index.js

@@ -229,8 +228,6 @@ const styles = {
  },
  container: { flex: 1, minWidth: 0 },
  separator: {
-    marginRight: -marginsSize,


this was causing a nasty horizontal scroll

ClementPasteau · 2024-09-19T16:07:55Z

newIDE/app/src/EventsFunctionsExtensionEditor/OptionsEditorDialog/ExtensionOptionsEditor.js

@@ -118,7 +118,7 @@ export const ExtensionOptionsEditor = ({
  return (
    <I18n>
      {({ i18n }: { i18n: I18nType }) => (
-        <ColumnStackLayout noMargin>
+        <ColumnStackLayout noMargin expand>


for some reason, the fields in that dialog were not full width, but it doesn't seem to have changed recently so maybe we just never noticed?

ClementPasteau · 2024-09-19T16:08:44Z

newIDE/app/src/ExportAndShare/GenericExporters/OnlineWebExport/OnlineGameLink.js

@@ -177,10 +179,12 @@ const OnlineGameLink = ({
    () => {
      if (exportStep === 'done') {
        setTimeBeforeExportFinished(timeForExport); // reset.
-        setIsShareDialogOpen(true);
+        if (shouldShowShareDialog) {
+          setIsShareDialogOpen(true);


allow not opening the dialog when in quick customization and let the quickPublish component display the link themselves

ClementPasteau · 2024-09-19T16:10:26Z

newIDE/app/src/MainFrame/index.js

+              getStorageProviderOperations(CloudStorageProvider);
+              saveProjectAsWithStorageProvider({
+                requestedStorageProvider: CloudStorageProvider,
+                forcedSavedAsLocation: {


I went for a new prop here to force the name of the project and skip the "Select the Cloud Project name" dialog. There is no unicity on the name of a cloud project, so I think we're fine

ClementPasteau · 2024-09-19T16:11:21Z

newIDE/app/src/MainFrame/index.js

+            // Automatically save project to the cloud if no provider is set.
+            const storageProvider = getStorageProvider();
+            console.log('storageProvider', storageProvider);
+            if (


should we always save in cloud and not look at the current storage provider?

ClementPasteau · 2024-09-19T16:12:17Z

newIDE/app/src/Profile/AuthenticatedUserProvider.js

-      await this._fetchUserProfileWithoutThrowingErrors();
+      await this._fetchUserProfileWithoutThrowingErrors({
+        // When creating an account, avoid showing the email verification dialog right away.
+        dontNotifyAboutEmailVerification: true,


I think this is fine, because most users use a SignUpProvider now + when opening the Profile Dialog that popup will then show (or next time the app is launched)

ClementPasteau · 2024-09-19T16:16:44Z

newIDE/app/src/QuickCustomization/QuickCustomizationPropertiesVisibilityDialog.js

+                  return;
+                }
+
+                propertiesQuickCustomizationVisibilities.set(


I went for a set prop by prop, maybe we'd rather:
store the values in state & have a "Save" button in the Dialog that clears the Map & sets again all the props.
This would avoid possible values in the future not being removed if they change name

ClementPasteau · 2024-09-19T16:23:20Z

newIDE/app/src/UI/Accordion.js

@@ -135,7 +135,7 @@ type AccordionProps = {|
 */
 export const Accordion = React.forwardRef<AccordionProps, MUIAccordion>(
  (props, ref) => {
-    const { costlyBody, ...otherProps } = props;
+    const { costlyBody, noMargin, ...otherProps } = props;


react complaining that this props was passed to the MUIComponent which didn't support it

ClementPasteau requested a review from 4ian as a code owner September 19, 2024 14:43

ClementPasteau commented Sep 19, 2024

View reviewed changes

Improve Quick Customization Flow

e4fa979

ClementPasteau force-pushed the improve-quick-customization branch from 0804cc6 to e4fa979 Compare September 19, 2024 16:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Quick Customization flow #6978

Improve Quick Customization flow #6978

ClementPasteau commented Sep 19, 2024 •

edited

Loading

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024 •

edited

Loading

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024 •

edited

Loading

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

ClementPasteau Sep 19, 2024

Improve Quick Customization flow #6978

Are you sure you want to change the base?

Improve Quick Customization flow #6978

Conversation

ClementPasteau commented Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ClementPasteau Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ClementPasteau Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ClementPasteau commented Sep 19, 2024 •

edited

Loading

ClementPasteau Sep 19, 2024 •

edited

Loading

ClementPasteau Sep 19, 2024 •

edited

Loading