wip

4ian · Sep 13, 2024 · c569009 · c569009
1 parent cea3433
commit c569009
Show file tree

Hide file tree

Showing 9 changed files with 364 additions and 219 deletions.
diff --git a/newIDE/app/src/AssetStore/AssetSwappingDialog.js b/newIDE/app/src/AssetStore/AssetSwappingDialog.js
@@ -1,21 +1,18 @@
 // @flow
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { I18n } from '@lingui/react';
 import * as React from 'react';
 import Dialog from '../UI/Dialog';
 import FlatButton from '../UI/FlatButton';
 import { AssetStore, type AssetStoreInterface } from '.';
 import { type ResourceManagementProps } from '../ResourcesList/ResourceSource';
-import RaisedButton from '../UI/RaisedButton';
 import { AssetStoreContext } from './AssetStoreContext';
-import Window from '../Utils/Window';
 import ErrorBoundary from '../UI/ErrorBoundary';
 import LoaderModal from '../UI/LoaderModal';
 import { useInstallAsset } from './NewObjectDialog';
 import { swapAsset } from './AssetSwapper';
 import PixiResourcesLoader from '../ObjectsRendering/PixiResourcesLoader';
-
-const isDev = Window.isDev();
+import useAlertDialog from '../UI/Alert/useAlertDialog';
 
 type Props = {|
   project: gdProject,
@@ -36,9 +33,7 @@ function AssetSwappingDialog({
   resourceManagementProps,
   onClose,
 }: Props) {
-  const { shopNavigationState, environment, setEnvironment } = React.useContext(
-    AssetStoreContext
-  );
+  const { shopNavigationState } = React.useContext(AssetStoreContext);
   const { openedAssetShortHeader } = shopNavigationState.getCurrentPage();
 
   const [
@@ -50,33 +45,45 @@ function AssetSwappingDialog({
     objectsContainer,
     resourceManagementProps,
   });
+  const { showAlert } = useAlertDialog();
 
-  const onInstallOpenedAsset = React.useCallback(
+  const installOpenedAsset = React.useCallback(
     async (): Promise<void> => {
       if (!openedAssetShortHeader) return;
 
       setIsAssetBeingInstalled(true);
-      const installAssetOutput = await installAsset(openedAssetShortHeader);
-      if (!installAssetOutput) {
-        setIsAssetBeingInstalled(false);
-        return;
-      }
+      try {
+        console.log('installAsset', openedAssetShortHeader);
+        const installAssetOutput = await installAsset(openedAssetShortHeader);
+        if (!installAssetOutput) {
+          throw new Error('Failed to install asset');
+        }
 
-      if (installAssetOutput.createdObjects.length > 0) {
-        swapAsset(
-          project,
-          PixiResourcesLoader,
-          object,
-          installAssetOutput.createdObjects[0],
-          openedAssetShortHeader
-        );
-      }
-      for (const createdObject of installAssetOutput.createdObjects) {
-        objectsContainer.removeObject(createdObject.getName());
-      }
+        if (installAssetOutput.createdObjects.length > 0) {
+          swapAsset(
+            project,
+            PixiResourcesLoader,
+            object,
+            installAssetOutput.createdObjects[0],
+            openedAssetShortHeader
+          );
+        }
+        for (const createdObject of installAssetOutput.createdObjects) {
+          objectsContainer.removeObject(createdObject.getName());
+        }
 
-      setIsAssetBeingInstalled(false);
-      onClose({ swappingDone: true });
+        onClose({ swappingDone: true });
+      } catch (err) {
+        showAlert({
+          title: t`Could not swap asset`,
+          message: t`Something went wrong while swapping the asset. Please try again.`,
+        });
+        console.error('Error while installing asset:', err);
+      } finally {
+        // Always go back to the previous page so the asset is unselected.
+        shopNavigationState.backToPreviousPage();
+        setIsAssetBeingInstalled(false);
+      }
     },
     [
       installAsset,
@@ -85,35 +92,22 @@ function AssetSwappingDialog({
       objectsContainer,
       openedAssetShortHeader,
       onClose,
+      shopNavigationState,
+      showAlert,
     ]
   );
 
-  const mainAction = openedAssetShortHeader ? (
-    <RaisedButton
-      key="add-asset"
-      primary
-      label={
-        isAssetBeingInstalled ? <Trans>Adding...</Trans> : <Trans>Swap</Trans>
-      }
-      onClick={onInstallOpenedAsset}
-      disabled={isAssetBeingInstalled}
-      id="swap-asset-button"
-    />
-  ) : isDev ? (
-    <RaisedButton
-      key="show-dev-assets"
-      label={
-        environment === 'staging' ? (
-          <Trans>Show live assets</Trans>
-        ) : (
-          <Trans>Show staging assets</Trans>
-        )
+  // Try to install the asset as soon as selected.
+  React.useEffect(
+    () => {
+      if (openedAssetShortHeader && !isAssetBeingInstalled) {
+        installOpenedAsset();
       }
-      onClick={() => {
-        setEnvironment(environment === 'staging' ? 'live' : 'staging');
-      }}
-    />
-  ) : null;
+    },
+    // Only run when the asset is selected and not already being installed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isAssetBeingInstalled, openedAssetShortHeader]
+  );
 
   const assetStore = React.useRef<?AssetStoreInterface>(null);
   const handleClose = React.useCallback(
@@ -130,22 +124,22 @@ function AssetSwappingDialog({
         <>
           <Dialog
             title={<Trans>Swap {object.getName()} with another asset</Trans>}
-            actions={[
+            secondaryActions={[
               <FlatButton
                 key="close"
                 label={<Trans>Back</Trans>}
-                primary={false}
                 onClick={handleClose}
                 id="close-button"
+                fullWidth
+                primary
               />,
-              mainAction,
             ]}
             onRequestClose={handleClose}
-            onApply={onInstallOpenedAsset}
             open
             flexBody
             fullHeight
             id="asset-swapping-dialog"
+            actionsFullWidthOnMobile
           >
             <AssetStore
               ref={assetStore}

diff --git a/newIDE/app/src/AssetStore/AssetsList.js b/newIDE/app/src/AssetStore/AssetsList.js
@@ -48,7 +48,6 @@ import Breadcrumbs from '../UI/Breadcrumbs';
 import { getFolderTagsFromAssetShortHeaders } from './TagsHelper';
 import { PrivateGameTemplateStoreContext } from './PrivateGameTemplates/PrivateGameTemplateStoreContext';
 import { type AssetStorePageState } from './AssetStoreNavigator';
-import RaisedButton from '../UI/RaisedButton';
 import FlatButton from '../UI/FlatButton';
 import HelpIcon from '../UI/HelpIcon';
 import { OwnedProductLicense } from './ProductLicense/ProductLicenseOptions';
@@ -203,9 +202,8 @@ const PageBreakNavigation = ({
           }}
           disabled={pageBreakIndex <= 0}
         />
-        <RaisedButton
+        <FlatButton
           key="next-assets"
-          primary
           label={<Trans>Show next assets</Trans>}
           onClick={() => {
             currentPage.pageBreakIndex = (currentPage.pageBreakIndex || 0) + 1;

diff --git a/newIDE/app/src/AssetStore/index.js b/newIDE/app/src/AssetStore/index.js
@@ -600,72 +600,76 @@ export const AssetStore = React.forwardRef<Props, AssetStoreInterface>(
 
     return (
       <Column expand noMargin useFullHeight noOverflowParent id="asset-store">
-        <LineStackLayout>
-          <IconButton
-            id="home-button"
-            key="back-discover"
-            tooltip={t`Back to discover`}
-            onClick={() => {
-              setSearchText('');
-              const page = assetSwappedObject
-                ? shopNavigationState.openAssetSwapping()
-                : shopNavigationState.openHome();
-              setScrollUpdateIsNeeded(page);
-              clearAllAssetStoreFilters();
-              setIsFiltersPanelOpen(false);
-            }}
-            size="small"
-          >
-            <Home />
-          </IconButton>
-          <Column expand useFullHeight noMargin>
-            <SearchBar
-              placeholder={
-                hideGameTemplates ? t`Search assets` : `Search the shop`
-              }
-              value={searchText}
-              onChange={(newValue: string) => {
-                if (searchText === newValue) {
-                  return;
-                }
-                setSearchText(newValue);
-                if (isOnSearchResultPage) {
-                  // An existing search is already being done: just move to the
-                  // top search results.
-                  shopNavigationState.openSearchResultPage();
-                  const assetsListInterface = assetsList.current;
-                  if (assetsListInterface) {
-                    assetsListInterface.scrollToPosition(0);
-                    assetsListInterface.setPageBreakIndex(0);
-                  }
-                } else {
-                  // A new search is being initiated: navigate to the search page,
-                  // and clear the history as a new search was launched.
-                  if (!!newValue) {
-                    shopNavigationState.clearHistory();
-                    shopNavigationState.openSearchResultPage();
-                    openFiltersPanelIfAppropriate();
+        {!assetSwappedObject && (
+          <>
+            <LineStackLayout>
+              <IconButton
+                id="home-button"
+                key="back-discover"
+                tooltip={t`Back to discover`}
+                onClick={() => {
+                  setSearchText('');
+                  const page = assetSwappedObject
+                    ? shopNavigationState.openAssetSwapping()
+                    : shopNavigationState.openHome();
+                  setScrollUpdateIsNeeded(page);
+                  clearAllAssetStoreFilters();
+                  setIsFiltersPanelOpen(false);
+                }}
+                size="small"
+              >
+                <Home />
+              </IconButton>
+              <Column expand useFullHeight noMargin>
+                <SearchBar
+                  placeholder={
+                    hideGameTemplates ? t`Search assets` : `Search the shop`
                   }
-                }
-              }}
-              onRequestSearch={() => {}}
-              ref={searchBar}
-              id="asset-store-search-bar"
-            />
-          </Column>
-          <IconButton
-            onClick={() => setIsFiltersPanelOpen(!isFiltersPanelOpen)}
-            disabled={!canShowFiltersPanel}
-            selected={canShowFiltersPanel && isFiltersPanelOpen}
-            size="small"
-          >
-            <Tune />
-          </IconButton>
-        </LineStackLayout>
-        <Spacer />
+                  value={searchText}
+                  onChange={(newValue: string) => {
+                    if (searchText === newValue) {
+                      return;
+                    }
+                    setSearchText(newValue);
+                    if (isOnSearchResultPage) {
+                      // An existing search is already being done: just move to the
+                      // top search results.
+                      shopNavigationState.openSearchResultPage();
+                      const assetsListInterface = assetsList.current;
+                      if (assetsListInterface) {
+                        assetsListInterface.scrollToPosition(0);
+                        assetsListInterface.setPageBreakIndex(0);
+                      }
+                    } else {
+                      // A new search is being initiated: navigate to the search page,
+                      // and clear the history as a new search was launched.
+                      if (!!newValue) {
+                        shopNavigationState.clearHistory();
+                        shopNavigationState.openSearchResultPage();
+                        openFiltersPanelIfAppropriate();
+                      }
+                    }
+                  }}
+                  onRequestSearch={() => {}}
+                  ref={searchBar}
+                  id="asset-store-search-bar"
+                />
+              </Column>
+              <IconButton
+                onClick={() => setIsFiltersPanelOpen(!isFiltersPanelOpen)}
+                disabled={!canShowFiltersPanel}
+                selected={canShowFiltersPanel && isFiltersPanelOpen}
+                size="small"
+              >
+                <Tune />
+              </IconButton>
+            </LineStackLayout>
+            <Spacer />
+          </>
+        )}
         <Column noMargin>
           <Line justifyContent="space-between" noMargin alignItems="center">
-            {(!isOnHomePage || !!openedShopCategory) && (
+            {(!isOnHomePage || !!openedShopCategory) && !assetSwappedObject && (
               <>
                 {shopNavigationState.isRootPage ? null : (
                   <Column expand alignItems="flex-start" noMargin>
@@ -792,7 +796,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 ? (
             <AssetDetails
               ref={assetDetails}
               onTagSelection={selectTag}

diff --git a/newIDE/app/src/MainFrame/index.js b/newIDE/app/src/MainFrame/index.js
@@ -3839,12 +3839,11 @@ const MainFrame = (props: Props) => {
           }
           onClose={options => {
             setQuickCustomizationDialogOpenedFromGameId(null);
-            if (options && options.tryAnotherGame) {
-              // Close the project so the user is back at where they can chose a game to customize
-              // which is probably the home page.
-              closeProject();
-              openHomePage();
-            }
+            // Always close the project and open the homepage, for the
+            // user to either try another game, or see that their game
+            // is saved.
+            closeProject();
+            openHomePage();
           }}
           onlineWebExporter={quickPublishOnlineWebExporter}
           onSaveProject={saveProject}