feat: Diagnostic Report Enhancements

newIDE/README.md

@@ -76,6 +76,10 @@ npm run format # or yarn format
 
 It's pretty easy to create new themes. Check the [README about themes](./README-themes.md)
 
+### Diagnostic Report
+
+The Diagnostic Report helps identify issues in your project (missing instructions, invalid parameters). Press **F7** to open it. Check the [Diagnostic Report documentation](./docs/Diagnostic-Report.md) for more details.
+
 ### Development of the game engine or extensions
 
 - If you want to create/modify _extensions_, check the [README about extensions](./README-extensions.md) for step-by-step explanations to get started in 5 minutes.

newIDE/app/src/CommandPalette/CommandsList.js

@@ -10,6 +10,7 @@ export type CommandName =
   | 'LAUNCH_NETWORK_PREVIEW'
   | 'HOT_RELOAD_PREVIEW'
   | 'LAUNCH_PREVIEW_WITH_DIAGNOSTIC_REPORT'
+  | 'OPEN_DIAGNOSTIC_REPORT'
   | 'OPEN_HOME_PAGE'
   | 'CREATE_NEW_PROJECT'
   | 'OPEN_PROJECT'
@@ -118,6 +119,10 @@ const commandsList: { [CommandName]: CommandMetadata } = {
     area: 'PROJECT',
     displayText: t`Launch preview with diagnostic report`,
   },
+  OPEN_DIAGNOSTIC_REPORT: {
+    area: 'PROJECT',
+    displayText: t`Show diagnostic report`,
+  },
   OPEN_HOME_PAGE: { area: 'IDE', displayText: t`Show Home` },
   CREATE_NEW_PROJECT: {
     area: 'GENERAL',

newIDE/app/src/EventsSheet/index.js

@@ -120,6 +120,7 @@ import LocalVariablesDialog from '../VariablesList/LocalVariablesDialog';
 import GlobalAndSceneVariablesDialog from '../VariablesList/GlobalAndSceneVariablesDialog';
 import { type HotReloadPreviewButtonProps } from '../HotReload/HotReloadPreviewButton';
 import { useHighlightedAiGeneratedEvent } from './UseHighlightedAiGeneratedEvent';
+import { findEventByPath } from '../Utils/EventsValidationScanner';
 
 const gd: libGDevelop = global.gd;
 
@@ -212,6 +213,7 @@ type State = {|
   showSearchPanel: boolean,
   searchResults: ?Array<gdBaseEvent>,
   searchFocusOffset: ?number,
+  navigationHighlightEvent: ?gdBaseEvent,
 
   layoutVariablesDialogOpen: boolean,
 
@@ -307,6 +309,7 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
     showSearchPanel: false,
     searchResults: null,
     searchFocusOffset: null,
+    navigationHighlightEvent: null,
 
     layoutVariablesDialogOpen: false,
 
@@ -381,6 +384,33 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
     );
   };
 
+  scrollToEventPath = (eventPath: Array<number>) => {
+    const eventsTree = this._eventsTree;
+    if (!eventsTree || eventPath.length === 0) return;
+
+    // Find the event at the path
+    const event = findEventByPath(this.props.events, eventPath);
+    if (!event) return;
+
+    // Unfold and scroll to the event
+    eventsTree.unfoldForEvent(event);
+
+    // Highlight the event like search results
+    this.setState({ navigationHighlightEvent: event });
+
+    setTimeout(() => {
+      const row = eventsTree.getEventRow(event);
+      if (row !== -1) {
+        eventsTree.scrollToRow(row);
+      }
+    }, 100);
+
+    // Clear the highlight after a few seconds
+    setTimeout(() => {
+      this.setState({ navigationHighlightEvent: null });
+    }, 3000);
+  };
+
   updateToolbar() {
     if (!this.props.setToolbar) return;
 
@@ -2022,8 +2052,14 @@ export class EventsSheetComponentWithoutHandle extends React.Component<
                   }}
                   onOpenExternalEvents={onOpenExternalEvents}
                   onOpenLayout={onOpenLayout}
-                  searchResults={eventsSearchResultEvents}
-                  searchFocusOffset={searchFocusOffset}
+                  searchResults={
+                    this.state.navigationHighlightEvent
+                      ? [this.state.navigationHighlightEvent]
+                      : eventsSearchResultEvents
+                  }
+                  searchFocusOffset={
+                    this.state.navigationHighlightEvent ? 0 : searchFocusOffset
+                  }
                   onEventMoved={this._onEventMoved}
                   onEndEditingEvent={this._onEndEditingStringEvent}
                   showObjectThumbnails={
@@ -2243,6 +2279,7 @@ export type EventsSheetInterface = {|
   updateToolbar: () => void,
   onResourceExternallyChanged: ({| identifier: string |}) => void,
   onEventsModifiedOutsideEditor: (changes: OutOfEditorChanges) => void,
+  scrollToEventPath: (eventPath: Array<number>) => void,
 |};
 
 // EventsSheet is a wrapper so that the component can use multiple
@@ -2252,6 +2289,7 @@ const EventsSheet = (props, ref) => {
     updateToolbar,
     onResourceExternallyChanged,
     onEventsModifiedOutsideEditor,
+    scrollToEventPath,
   }));
 
   const {
@@ -2271,6 +2309,9 @@ const EventsSheet = (props, ref) => {
     addNewAiGeneratedEventIds(changes.newOrChangedAiGeneratedEventIds);
     if (component.current) component.current.onEventsModifiedOutsideEditor();
   };
+  const scrollToEventPath = (eventPath: Array<number>) => {
+    if (component.current) component.current.scrollToEventPath(eventPath);
+  };
 
   const authenticatedUser = React.useContext(AuthenticatedUserContext);
   const preferences = React.useContext(PreferencesContext);