[back][front] feat: add a setting to control the weekly col. goal on …

…mobile (#1977)

backend/core/serializers/user_settings.py

@@ -44,6 +44,7 @@ class GenericPollUserSettingsSerializer(serializers.Serializer):
     comparison_ui__weekly_collective_goal_display = serializers.ChoiceField(
         choices=COMPONENT_DISPLAY_STATE, allow_blank=True, required=False
     )
+    comparison_ui__weekly_collective_goal_mobile = serializers.BooleanField(required=False)
 
     rate_later__auto_remove = serializers.IntegerField(required=False)
 

backend/core/tests/test_api_user_settings.py

@@ -48,6 +48,8 @@ def test_auth_200_get(self):
             "videos": {
                 "comparison__auto_select_entities": True,
                 "comparison__criteria_order": ["reliability"],
+                "comparison_ui__weekly_collective_goal_display": "WEBSITE_ONLY",
+                "comparison_ui__weekly_collective_goal_mobile": True,
                 "extension__search_reco": True,
                 "rate_later__auto_remove": 99,
                 "recommendations__default_languages": ["en"],

frontend/public/locales/en/translation.json

@@ -510,6 +510,7 @@
     "preferencesUpdatedSuccessfully": "Preferences updated successfully.",
     "updatePreferences": "Update preferences",
     "comparisonPage": "Comparison page",
+    "displayCollectiveGoalOnMobile": "Display the weekly collective goal on mobile devices.",
     "letTournesolSuggestElements": "Let Tournesol suggest elements to compare when opening the comparison interface.",
     "extensionYoutube": "Extension (YouTube)",
     "rateLater": "Rate-later list",

frontend/public/locales/fr/translation.json

@@ -519,6 +519,7 @@
     "preferencesUpdatedSuccessfully": "Préférences mises à jour avec succès.",
     "updatePreferences": "Mettre à jour les préférences",
     "comparisonPage": "Comparaison (page)",
+    "displayCollectiveGoalOnMobile": "Afficher l'objectif collectif hebdomadaire sur les périphériques mobiles.",
     "letTournesolSuggestElements": "Laisser Tournesol suggérer des éléments à comparer lors de l'ouverture de l'interface de comparaison.",
     "extensionYoutube": "Extension (YouTube)",
     "rateLater": "Liste à comparer plus tard",

frontend/scripts/openapi.yaml

@@ -4945,6 +4945,8 @@ components:
           oneOf:
           - $ref: '#/components/schemas/ComparisonUi_weeklyCollectiveGoalDisplayEnum'
           - $ref: '#/components/schemas/BlankEnum'
+        comparison_ui__weekly_collective_goal_mobile:
+          type: boolean
         rate_later__auto_remove:
           type: integer
         extension__search_reco:
@@ -4981,6 +4983,8 @@ components:
           oneOf:
           - $ref: '#/components/schemas/ComparisonUi_weeklyCollectiveGoalDisplayEnum'
           - $ref: '#/components/schemas/BlankEnum'
+        comparison_ui__weekly_collective_goal_mobile:
+          type: boolean
         rate_later__auto_remove:
           type: integer
         extension__search_reco:

frontend/src/features/settings/preferences/TournesolUserSettingsForm.tsx

@@ -29,6 +29,7 @@ import {
   DEFAULT_RATE_LATER_AUTO_REMOVAL,
   YOUTUBE_POLL_NAME,
   YT_DEFAULT_AUTO_SELECT_ENTITIES,
+  YT_DEFAULT_UI_WEEKLY_COL_GOAL_MOBILE,
 } from 'src/utils/constants';
 import {
   initRecommendationsLanguages,
@@ -106,6 +107,11 @@ const TournesolUserSettingsForm = () => {
       ComparisonUi_weeklyCollectiveGoalDisplayEnum.ALWAYS
   );
 
+  const [compUiWeeklyColGoalMobile, setCompUiWeeklyColGoalMobile] = useState(
+    pollSettings?.comparison_ui__weekly_collective_goal_mobile ??
+      YT_DEFAULT_UI_WEEKLY_COL_GOAL_MOBILE
+  );
+
   // Rate-later settings
   const [rateLaterAutoRemoval, setRateLaterAutoRemoval] = useState(
     pollSettings?.rate_later__auto_remove ?? DEFAULT_RATE_LATER_AUTO_REMOVAL
@@ -159,6 +165,14 @@ const TournesolUserSettingsForm = () => {
       );
     }
 
+    if (
+      pollSettings?.comparison_ui__weekly_collective_goal_mobile != undefined
+    ) {
+      setCompUiWeeklyColGoalMobile(
+        pollSettings?.comparison_ui__weekly_collective_goal_mobile
+      );
+    }
+
     if (pollSettings?.comparison__auto_select_entities != undefined) {
       setAutoSelectEntities(pollSettings?.comparison__auto_select_entities);
     }
@@ -216,6 +230,8 @@ const TournesolUserSettingsForm = () => {
             comparison__auto_select_entities: autoSelectEntities,
             comparison_ui__weekly_collective_goal_display:
               compUiWeeklyColGoalDisplay,
+            comparison_ui__weekly_collective_goal_mobile:
+              compUiWeeklyColGoalMobile,
             extension__search_reco: extSearchRecommendation,
             rate_later__auto_remove: rateLaterAutoRemoval,
             recommendations__default_languages: recoDefaultLanguages,
@@ -276,6 +292,8 @@ const TournesolUserSettingsForm = () => {
             setCompAutoSelectEntities={setAutoSelectEntities}
             compUiWeeklyColGoalDisplay={compUiWeeklyColGoalDisplay}
             setCompUiWeeklyColGoalDisplay={setCompUiWeeklyColGoalDisplay}
+            compUiWeeklyColGoalMobile={compUiWeeklyColGoalMobile}
+            setCompUiWeeklyColGoalMobile={setCompUiWeeklyColGoalMobile}
             displayedCriteria={displayedCriteria}
             setDisplayedCriteria={setDisplayedCriteria}
             rateLaterAutoRemoval={rateLaterAutoRemoval}

frontend/src/features/settings/preferences/VideosPollUserSettingsForm.tsx

@@ -30,6 +30,8 @@ interface VideosPollUserSettingsFormProps {
   setCompUiWeeklyColGoalDisplay: (
     target: ComparisonUi_weeklyCollectiveGoalDisplayEnum | BlankEnum
   ) => void;
+  compUiWeeklyColGoalMobile: boolean;
+  setCompUiWeeklyColGoalMobile: (target: boolean) => void;
   displayedCriteria: string[];
   setDisplayedCriteria: (target: string[]) => void;
   rateLaterAutoRemoval: number;
@@ -57,6 +59,8 @@ const VideosPollUserSettingsForm = ({
   setCompAutoSelectEntities,
   compUiWeeklyColGoalDisplay,
   setCompUiWeeklyColGoalDisplay,
+  compUiWeeklyColGoalMobile,
+  setCompUiWeeklyColGoalMobile,
   displayedCriteria,
   setDisplayedCriteria,
   rateLaterAutoRemoval,
@@ -89,14 +93,25 @@ const VideosPollUserSettingsForm = ({
           pollName={pollName}
         />
       </Grid>
-      <Grid item>
-        <BooleanField
-          scope={pollName}
-          name="comparison__auto_select_entities"
-          label={t('pollUserSettingsForm.letTournesolSuggestElements')}
-          value={compAutoSelectEntities}
-          onChange={setCompAutoSelectEntities}
-        />
+      <Grid item container spacing={1} direction="column" alignItems="stretch">
+        <Grid item>
+          <BooleanField
+            scope={pollName}
+            name="comparison_ui__weekly_collective_goal_mobile"
+            label={t('pollUserSettingsForm.displayCollectiveGoalOnMobile')}
+            value={compUiWeeklyColGoalMobile}
+            onChange={setCompUiWeeklyColGoalMobile}
+          />
+        </Grid>
+        <Grid item>
+          <BooleanField
+            scope={pollName}
+            name="comparison__auto_select_entities"
+            label={t('pollUserSettingsForm.letTournesolSuggestElements')}
+            value={compAutoSelectEntities}
+            onChange={setCompAutoSelectEntities}
+          />
+        </Grid>
       </Grid>
       {/*
           Ideally the following field could be displayed under the title

frontend/src/pages/comparisons/Comparison.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 
 import { ContentBox, ContentHeader } from 'src/components';
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
@@ -16,6 +16,7 @@ import {
   ComparisonUi_weeklyCollectiveGoalDisplayEnum,
 } from 'src/services/openapi';
 import { getUserComparisonsRaw } from 'src/utils/api/comparisons';
+import { YT_DEFAULT_UI_WEEKLY_COL_GOAL_MOBILE } from 'src/utils/constants';
 import { PollUserSettingsKeys } from 'src/utils/types';
 
 const displayTutorial = (
@@ -28,8 +29,14 @@ const displayTutorial = (
 
 const displayWeeklyCollectiveGoal = (
   userPreference: ComparisonUi_weeklyCollectiveGoalDisplayEnum | BlankEnum,
-  isEmbedded: boolean
+  isEmbedded: boolean,
+  userPrefDisplayOnMobile: boolean,
+  isSmallScreen: boolean
 ) => {
+  if (isSmallScreen) {
+    return userPrefDisplayOnMobile;
+  }
+
   const displayWhenEembedded = [
     ComparisonUi_weeklyCollectiveGoalDisplayEnum.ALWAYS,
     ComparisonUi_weeklyCollectiveGoalDisplayEnum.EMBEDDED_ONLY,
@@ -74,6 +81,9 @@ const ComparisonPage = () => {
     name: pollName,
   } = useCurrentPoll();
 
+  const theme = useTheme();
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const isEmbedded = Boolean(searchParams.get('embed'));
@@ -141,6 +151,11 @@ const ComparisonPage = () => {
       ?.comparison_ui__weekly_collective_goal_display ??
     ComparisonUi_weeklyCollectiveGoalDisplayEnum.ALWAYS;
 
+  const weeklyCollectiveGoalMobile =
+    userSettings?.[pollName as PollUserSettingsKeys]
+      ?.comparison_ui__weekly_collective_goal_mobile ??
+    YT_DEFAULT_UI_WEEKLY_COL_GOAL_MOBILE;
+
   const autoSelectEntities =
     userSettings?.[pollName as PollUserSettingsKeys]
       ?.comparison__auto_select_entities ??
@@ -202,7 +217,9 @@ const ComparisonPage = () => {
               <>
                 {displayWeeklyCollectiveGoal(
                   weeklyCollectiveGoalDisplay,
-                  isEmbedded
+                  isEmbedded,
+                  weeklyCollectiveGoalMobile,
+                  smallScreen
                 ) && <CollectiveGoalWeeklyProgress />}
                 <ComparisonsCountContext.Provider
                   value={{ comparisonsCount: comparisonsCount }}

frontend/src/utils/constants.tsx

@@ -164,6 +164,8 @@ export const DEFAULT_RATE_LATER_AUTO_REMOVAL = 4;
 
 export const YT_DEFAULT_AUTO_SELECT_ENTITIES = true;
 
+export const YT_DEFAULT_UI_WEEKLY_COL_GOAL_MOBILE = false;
+
 /*
   The most specific paths should be listed first,
   to be routed correctly.