Fix a few issues with displaying projects correctly in the create section (#7349)

Author: ClementPasteau

newIDE/app/src/GameDashboard/GamesList.js

@@ -146,13 +146,7 @@ const getDashboardItemsToDisplay = ({
   orderBy: GamesDashboardOrderBy,
 |}): ?Array<DashboardItem> => {
   if (!allDashboardItems) return null;
-  let itemsToDisplay: DashboardItem[] = allDashboardItems.filter(
-    item =>
-      // First, filter out unsaved games, unless they are the opened project.
-      !item.game ||
-      item.game.savedStatus !== 'draft' ||
-      (project && item.game.id === project.getProjectUuid())
-  );
+  let itemsToDisplay: DashboardItem[] = [...allDashboardItems];
 
   if (searchText) {
     // If there is a search, just return those items, ordered by the search relevance.
@@ -165,14 +159,15 @@ const getDashboardItemsToDisplay = ({
     itemsToDisplay = searchResults.map(result => result.item);
   } else {
     // If there is no search, sort the items by the selected order.
-    itemsToDisplay =
-      orderBy === 'totalSessions'
-        ? itemsToDisplay.sort(totalSessionsSort)
-        : orderBy === 'weeklySessions'
-        ? itemsToDisplay.sort(lastWeekSessionsSort)
-        : orderBy === 'lastModifiedAt'
-        ? itemsToDisplay.sort(lastModifiedAtSort)
-        : itemsToDisplay;
+    if (orderBy) {
+      itemsToDisplay.sort(
+        orderBy === 'totalSessions'
+          ? totalSessionsSort
+          : orderBy === 'weeklySessions'
+          ? lastWeekSessionsSort
+          : lastModifiedAtSort
+      );
+    }
 
     // If a project is opened, no search is done, and sorted by last modified date,
     // then the opened project should be displayed first.
@@ -325,9 +320,19 @@ const GamesList = ({
           file => !games.find(game => game.id === file.fileMetadata.gameId)
         )
         .map(file => ({ projectFiles: [file] }));
-      return [...projectFilesWithGame, ...projectFilesWithoutGame];
+      const allItems = [...projectFilesWithGame, ...projectFilesWithoutGame];
+
+      return allItems.filter(
+        item =>
+          // Filter out draft games which are not the current opened project.
+          !(
+            item.game &&
+            item.game.savedStatus === 'draft' &&
+            (!project || item.game.id !== project.getProjectUuid())
+          )
+      );
     },
-    [games, allRecentProjectFiles]
+    [games, allRecentProjectFiles, project]
   );
 
   const totalNumberOfPages = allDashboardItems

newIDE/app/src/MainFrame/EditorContainers/HomePage/CreateSection/index.js

@@ -166,8 +166,9 @@ const CreateSection = ({
     authenticatedUser
   );
   const allRecentProjectFiles = useProjectsListFor(null);
-  const hasAProjectOpenedOrSavedOrGameRegistered =
-    !!project || (!!games && games.length) || !!allRecentProjectFiles.length;
+  const savedGames = (games || []).filter(game => game.savedStatus !== 'draft');
+  const hasAProjectOpenedNowOrRecentlyOrGameSaved =
+    !!project || savedGames.length || !!allRecentProjectFiles.length;
   const hidePerformanceDashboard =
     !!limits &&
     !!limits.capabilities.classrooms &&
@@ -460,7 +461,7 @@ const CreateSection = ({
           <SectionRow expand>
             {!!profile || loginState === 'done' ? (
               <ColumnStackLayout noMargin>
-                {hidePerformanceDashboard ? null : hasAProjectOpenedOrSavedOrGameRegistered ? (
+                {hidePerformanceDashboard ? null : hasAProjectOpenedNowOrRecentlyOrGameSaved ? (
                   <ColumnStackLayout noMargin>
                     <Grid container spacing={2}>
                       <UserEarningsWidget
@@ -559,7 +560,7 @@ const CreateSection = ({
                     />
                   </ColumnStackLayout>
                 )}
-                {!hasAProjectOpenedOrSavedOrGameRegistered && (
+                {!hasAProjectOpenedNowOrRecentlyOrGameSaved && (
                   <ColumnStackLayout noMargin>
                     <Line noMargin justifyContent="space-between">
                       <Text size="block-title" noMargin>

newIDE/app/src/MainFrame/Preferences/PreferencesContext.js

@@ -274,7 +274,9 @@ export type Preferences = {|
     name: EditorMosaicName,
     node: ?EditorMosaicNode
   ) => void,
-  getRecentProjectFiles: () => Array<FileMetadataAndStorageProviderName>,
+  getRecentProjectFiles: (
+    options: ?{| limit: number |}
+  ) => Array<FileMetadataAndStorageProviderName>,
   insertRecentProjectFile: (
     fileMetadata: FileMetadataAndStorageProviderName
   ) => void,
@@ -423,7 +425,7 @@ export const initialPreferences = {
     name: EditorMosaicName,
     node: ?EditorMosaicNode
   ) => {},
-  getRecentProjectFiles: () => [],
+  getRecentProjectFiles: options => [],
   insertRecentProjectFile: () => {},
   removeRecentProjectFile: () => {},
   getAutoOpenMostRecentProject: () => true,

newIDE/app/src/MainFrame/Preferences/PreferencesProvider.js

@@ -39,7 +39,6 @@ type Props = {|
 type State = Preferences;
 
 const localStorageItem = 'gd-preferences';
-const MAX_RECENT_FILES_COUNT = 20;
 
 export const loadPreferencesFromLocalStorage = (): ?PreferencesValues => {
   try {
@@ -85,7 +84,7 @@ export const getInitialPreferences = () => {
   return { ...initialPreferences.values, language: languageOrLocale };
 };
 
-const getPreferences = () => {
+const getPreferences = (): PreferencesValues => {
   const preferences =
     loadPreferencesFromLocalStorage() || getInitialPreferences();
   setLanguageInDOM(preferences.language);
@@ -718,8 +717,12 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     );
   }
 
-  _getRecentProjectFiles() {
-    return this.state.values.recentProjectFiles;
+  _getRecentProjectFiles(
+    options: ?{| limit: number |}
+  ): Array<FileMetadataAndStorageProviderName> {
+    const limit = options ? options.limit : undefined;
+    const recentProjectFiles = this.state.values.recentProjectFiles;
+    return limit ? recentProjectFiles.slice(0, limit) : recentProjectFiles;
   }
 
   _setRecentProjectFiles(recents: Array<FileMetadataAndStorageProviderName>) {
@@ -742,24 +745,19 @@ export default class PreferencesProvider extends React.Component<Props, State> {
     const isNotNewRecentFile = recentFile =>
       recentFile.fileMetadata.fileIdentifier !==
       newRecentFile.fileMetadata.fileIdentifier;
-    this._setRecentProjectFiles(
-      [newRecentFile, ...recentProjectFiles.filter(isNotNewRecentFile)].slice(
-        0,
-        MAX_RECENT_FILES_COUNT
-      )
-    );
+    this._setRecentProjectFiles([
+      newRecentFile,
+      ...recentProjectFiles.filter(isNotNewRecentFile),
+    ]);
   }
 
   _removeRecentProjectFile(recentFile: FileMetadataAndStorageProviderName) {
     const isNotRemovedRecentFile = recentFileItem =>
       recentFileItem.fileMetadata.fileIdentifier !==
       recentFile.fileMetadata.fileIdentifier;
-    this._setRecentProjectFiles(
-      [...this._getRecentProjectFiles().filter(isNotRemovedRecentFile)].slice(
-        0,
-        MAX_RECENT_FILES_COUNT
-      )
-    );
+    this._setRecentProjectFiles([
+      ...this._getRecentProjectFiles().filter(isNotRemovedRecentFile),
+    ]);
   }
 
   _getAutoOpenMostRecentProject() {

newIDE/app/src/MainFrame/index.js

@@ -3523,7 +3523,7 @@ const MainFrame = (props: Props) => {
     i18n: i18n,
     project: state.currentProject,
     canSaveProjectAs,
-    recentProjectFiles: preferences.getRecentProjectFiles(),
+    recentProjectFiles: preferences.getRecentProjectFiles({ limit: 20 }),
     shortcutMap,
     isApplicationTopLevelMenu: false,
   };