Add a header with the gmae thumbnail to the confirmDeleteDialog

4ian · Feb 5, 2025 · 5425962 · 5425962
1 parent 4cfd5aa
commit 5425962
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/newIDE/app/src/GameDashboard/GameDashboardCard.js b/newIDE/app/src/GameDashboard/GameDashboardCard.js
@@ -51,12 +51,14 @@ import PreferencesContext from '../MainFrame/Preferences/PreferencesContext';
 import { textEllipsisStyle } from '../UI/TextEllipsis';
 import FileWithLines from '../UI/CustomSvgIcons/FileWithLines';
 import TextButton from '../UI/TextButton';
+import { MarkdownText } from '../UI/MarkdownText';
 import { getRelativeOrAbsoluteDisplayDate } from '../Utils/DateDisplay';
 import { formatISO, subDays } from 'date-fns';
 import {
   type GameMetrics,
   getGameMetricsFrom,
 } from '../Utils/GDevelopServices/Analytics';
+import ImageThumbnail from '../ResourcesList/ResourceThumbnail/ImageThumbnail';
 
 // It's important to use remote and not electron for folder actions,
 // otherwise they will be opened in the background.
@@ -539,18 +541,35 @@ const GameDashboardCard = ({
               click: async () => {
                 // Extract word translation to ensure it is not wrongly translated in the sentence.
                 const translatedConfirmText = i18n._(t`delete`);
-                let message = t`Your game and this project will be deleted. This action is irreversible. Do you want to continue?`;
 
-                if (isPublishedOnGdGames) {
-                  message = t`You're deleting a game that has:${'\n\n'}
-                    - ${countOfSessionsLastWeek} views on the last 7 days${'\n'}
-                    - Is published on gd.games${'\n\n'}                  
-                    If you continue the game and this project will be deleted. This action is irreversible. Do you want to continue?`;
-                }
+                const hasPlayerMessage = countOfSessionsLastWeek
+                  ? t`${countOfSessionsLastWeek} views on the last 7 days`
+                  : t`No players`;
+                const hasBeenPublished = isPublishedOnGdGames
+                  ? t`Is published on gd.games`
+                  : t`Not published`;
+
+                const message = t`You're deleting a game that has:${'\n\n'}
+                    - ${i18n._(hasPlayerMessage)}
+                    ${'\n'}
+                    - ${i18n._(hasBeenPublished)}
+                    ${'\n\n'}
+                    If you continue the game and this project will be deleted.${'\n\n'}
+                    This action is irreversible. Do you want to continue?`;
 
                 const answer = await showDeleteConfirmation({
                   title: t`Delete game`,
+                  header: (
+                    <GameThumbnail
+                      gameName={gameName || 'unknown game'}
+                      gameId={game ? game.id : undefined}
+                      thumbnailUrl={gameThumbnailUrl}
+                      background="light"
+                      width={getThumbnailWidth({ isMobile })}
+                    />
+                  ),
                   message: message,
+
                   confirmButtonLabel: t`Delete game`,
                   fieldMessage: t`To confirm, type "${translatedConfirmText}"`,
                   confirmText: translatedConfirmText,

diff --git a/newIDE/app/src/UI/Alert/AlertContext.js b/newIDE/app/src/UI/Alert/AlertContext.js
@@ -38,6 +38,7 @@ export type ShowConfirmDeleteDialogOptions = {|
   message: MessageDescriptor,
   fieldMessage?: MessageDescriptor,
   confirmText?: string,
+  header?: React.Node,
 |};
 export type ShowConfirmDeleteDialogOptionsWithCallback = {|
   ...ShowConfirmDeleteDialogOptions,

diff --git a/newIDE/app/src/UI/Alert/AlertProvider.js b/newIDE/app/src/UI/Alert/AlertProvider.js
@@ -140,6 +140,7 @@ function ConfirmProvider({ children }: Props) {
           message={confirmDeleteDialogConfig.message}
           fieldMessage={confirmDeleteDialogConfig.fieldMessage}
           confirmText={confirmDeleteDialogConfig.confirmText}
+          header={confirmDeleteDialogConfig.header}
         />
       )}
       {yesNoCancelDialogConfig && (

diff --git a/newIDE/app/src/UI/Alert/ConfirmDeleteDialog.js b/newIDE/app/src/UI/Alert/ConfirmDeleteDialog.js
@@ -11,6 +11,7 @@ import { LargeSpacer } from '../Grid';
 import Text from '../Text';
 import TextField from '../TextField';
 import { useShouldAutofocusInput } from '../Responsive/ScreenTypeMeasurer';
+import { MarkdownText } from '../MarkdownText';
 
 type Props = {|
   open: boolean,
@@ -22,6 +23,7 @@ type Props = {|
   onDismiss: () => void,
   confirmButtonLabel?: MessageDescriptor,
   dismissButtonLabel?: MessageDescriptor,
+  header?: React.Node,
 |};
 
 function ConfirmDeleteDialog(props: Props) {
@@ -98,8 +100,9 @@ function ConfirmDeleteDialog(props: Props) {
           ]}
           fullscreen="never-even-on-mobile"
         >
+          {props.header}
           <Text size="body" style={{ userSelect: 'text' }}>
-            {i18n._(props.message)}
+            <MarkdownText translatableSource={props.message} allowParagraphs />
           </Text>
           {props.confirmText && props.fieldMessage && (
             <>