Add switch to display only player best entry

newIDE/app/src/GameDashboard/LeaderboardAdmin/index.js

@@ -24,11 +24,13 @@ import { useOnlineStatus } from '../../Utils/OnlineStatus';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import {
   Divider,
+  Switch,
   Table,
   TableBody,
   TableCell,
   TableRow,
   Tooltip,
+  Typography,
 } from '@material-ui/core';
 import { textEllipsisStyle } from '../../UI/TextEllipsis';
 import PlaceholderLoader from '../../UI/PlaceholderLoader';
@@ -45,7 +47,7 @@ type ContainerProps = {| ...Props, gameId: string |};
 
 const styles = {
   leftColumn: { display: 'flex', flexDirection: 'column', flex: 1 },
-  rightColumn: { display: 'flex', flex: 2 },
+  rightColumn: { display: 'flex', flexDirection: 'column', flex: 2 },
 };
 
 const LeaderboardAdmin = ({ onLoading }: Props) => {
@@ -65,6 +67,8 @@ const LeaderboardAdmin = ({ onLoading }: Props) => {
     updateLeaderboard,
     resetLeaderboard,
     deleteLeaderboardEntry,
+    displayOnlyBestEntry,
+    setDisplayOnlyBestEntry,
     browsing: { entries },
   } = React.useContext(LeaderboardContext);
 
@@ -360,6 +364,22 @@ const LeaderboardAdmin = ({ onLoading }: Props) => {
           </div>
           <Divider orientation="vertical" />
           <div style={styles.rightColumn}>
+            <Line alignItems="center" justifyContent="flex-end">
+              <Tooltip
+                title={i18n._(
+                  t`When checked, will only display the best score of each player`
+                )}
+              >
+                <Typography variant="body2">
+                  <Trans>Player best entry</Trans>
+                </Typography>
+              </Tooltip>
+              <Switch
+                size="small"
+                checked={displayOnlyBestEntry}
+                onClick={() => setDisplayOnlyBestEntry(!displayOnlyBestEntry)}
+              />
+            </Line>
             <LeaderboardEntriesTable
               entries={entries}
               onDeleteEntry={entryId => _deleteEntry(i18n, entryId)}

newIDE/app/src/Leaderboard/LeaderboardContext.js

@@ -9,6 +9,7 @@ import {
 export type LeaderboardState = {|
   leaderboards: ?Array<Leaderboard>,
   currentLeaderboardId: ?string,
+  displayOnlyBestEntry: boolean,
   browsing: {|
     entries: ?Array<LeaderboardDisplayData>,
     currentUrl: ?string,
@@ -20,6 +21,7 @@ export type LeaderboardState = {|
   |}) => Promise<?Leaderboard>,
   listLeaderboards: () => Promise<void>,
   selectLeaderboard: (id: string) => void,
+  setDisplayOnlyBestEntry: boolean => void,
   updateLeaderboard: ({|
     name?: string,
     sort?: LeaderboardSortOption,
@@ -31,6 +33,7 @@ export type LeaderboardState = {|
 export const initialLeaderboardState = {
   leaderboards: null,
   currentLeaderboardId: null,
+  displayOnlyBestEntry: false,
   browsing: {
     entries: null,
     currentUrl: null,
@@ -39,6 +42,7 @@ export const initialLeaderboardState = {
   createLeaderboard: async () => null,
   listLeaderboards: async () => {},
   selectLeaderboard: () => {},
+  setDisplayOnlyBestEntry: () => {},
   updateLeaderboard: async () => {},
   resetLeaderboard: async () => {},
   deleteLeaderboardEntry: async entryId => {},

newIDE/app/src/Leaderboard/LeaderboardProvider.js

@@ -153,7 +153,9 @@ const LeaderboardProvider = ({ gameId, children }: Props) => {
       value={{
         leaderboards,
         currentLeaderboardId,
+        displayOnlyBestEntry,
         browsing: { entries, currentUrl, nextUrl },
+        setDisplayOnlyBestEntry,
         createLeaderboard,
         listLeaderboards,
         selectLeaderboard,