fix: default to builder when user is already authenticated (#763)

* fix: default to builder when user is already authenticated * fix: translation for analytics select an item * fix: test expectation * fix: another test expectation * fix: selector in test
graasp · Jan 29, 2025 · af5ae6b · af5ae6b
1 parent 9689117
commit af5ae6b
Show file tree

Hide file tree

Showing 14 changed files with 64 additions and 53 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { I18nextProvider } from 'react-i18next';
-import 'react-quill-new/dist/quill.snow.css';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
 

diff --git a/cypress/e2e/account/redirection.cy.ts b/cypress/e2e/account/redirection.cy.ts
@@ -8,10 +8,12 @@ describe('Redirections', () => {
     cy.url().should('contain', `/auth/login?url=`);
   });
 
-  it('redirects to account when already logged in', () => {
+  it('redirects to builder when already logged in', () => {
+    // COMMENT: This has been changed from "/account" to "/builder" to not change too much for users.
+    // in the future we will redirect to a personalized home page for the user
     cy.setUpApi({});
     cy.visit(LOG_IN_PAGE_PATH);
     cy.wait('@getCurrentMember');
-    cy.url().should('contain', `/account`);
+    cy.url().should('contain', '/builder');
   });
 });
diff --git a/cypress/e2e/auth/logIn.cy.ts b/cypress/e2e/auth/logIn.cy.ts
@@ -24,9 +24,10 @@ describe('Already signed in', () => {
     cy.setUpApi({ currentMember: AUTH_MEMBERS.BOB });
   });
 
-  it('Should show account home', () => {
+  it('Should show builder home', () => {
     cy.visit('/auth');
-    cy.get(`h4`).should('contain', 'Welcome');
+    // COMMENT: We redirect to the builder for now until we have a better home page in account to show the users
+    cy.get(`h1`).should('contain', 'My Graasp');
   });
 });
 

diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,9 @@
+/* import quill styles */
+@import url(react-quill-new/dist/quill.snow.css);
+
+/* import katex styles */
+@import url(katex/dist/katex.min.css);
+
 /* nunito-latin-wght-normal */
 @font-face {
   font-family: 'Nunito';

diff --git a/src/locales/ar/analytics.json b/src/locales/ar/analytics.json
@@ -24,7 +24,9 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} العناصر الأكثر تفاعلاً حسب الإجراء",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} العناصر الأكثر تفاعلاً من قبل المستخدم",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "لا توجد إجراءات لإظهارها لهذا المستخدم",
-  "NO_ITEM_SELECTED": "يجب عليك اختيار عنصر لعرض التحليلات.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "يجب عليك اختيار عنصر لعرض التحليلات."
+  },
   "NO_USER_SELECTED": "لم يتم تحديد أي مستخدم",
   "OTHER_ACTION_TYPE": "أخرى",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "عرض إجراءات \"عرض {{view}}\" من الحد الأقصى لحجم العينة المطلوب لإجراءات {{requestedSampleSize}}.",

diff --git a/src/locales/de/analytics.json b/src/locales/de/analytics.json
@@ -24,7 +24,9 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} Am meisten interagierte Elemente nach Aktion",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} Am häufigsten interagierte Elemente nach Benutzer",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "Für diesen Benutzer können keine Aktionen angezeigt werden",
-  "NO_ITEM_SELECTED": "Sie müssen ein Element auswählen, um die Analysen anzuzeigen.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "Sie müssen ein Element auswählen, um die Analysen anzuzeigen."
+  },
   "NO_USER_SELECTED": "Kein Benutzer ausgewählt",
   "OTHER_ACTION_TYPE": "Andere",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "Anzeige von „{{view}} Ansicht“-Aktionen aus einer maximal angeforderten Stichprobengröße von {{requestedSampleSize}} Aktionen.",

diff --git a/src/locales/en/analytics.json b/src/locales/en/analytics.json
@@ -24,7 +24,10 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} Most Interacted Items by Action",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} Most Interacted Items by User",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "No actions to show for this user",
-  "NO_ITEM_SELECTED": "You have to select an item to view the analytics.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "You have to select an item to view the analytics.",
+    "SELECT_AN_ITEM": "Choose an item"
+  },
   "NO_USER_SELECTED": "No user selected",
   "OTHER_ACTION_TYPE": "Other",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "Displaying '{{view}} view' actions from a maximum requested sample size of {{requestedSampleSize}} actions.",

diff --git a/src/locales/es/analytics.json b/src/locales/es/analytics.json
@@ -24,7 +24,9 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} Elementos con mayor interacción por acción",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} Elementos con mayor interacción por usuario",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "No hay acciones para mostrar para este usuario",
-  "NO_ITEM_SELECTED": "Tienes que seleccionar un elemento para ver los análisis.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "Tienes que seleccionar un elemento para ver los análisis."
+  },
   "NO_USER_SELECTED": "Ningún usuario seleccionado",
   "OTHER_ACTION_TYPE": "Otro",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "Mostrando acciones '{{view}} view' de un tamaño de muestra máximo solicitado de {{requestedSampleSize}} acciones.",

diff --git a/src/locales/fr/analytics.json b/src/locales/fr/analytics.json
@@ -24,7 +24,10 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} éléments avec le plus d'interactions par action",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} éléments avec le plus d'interaction par utilisateur",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "Aucune action à afficher pour cet utilisateur",
-  "NO_ITEM_SELECTED": "Vous devez sélectionner un élément pour afficher les analyses.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "Vous devez sélectionner un élément pour afficher les analyses.",
+    "SELECT_AN_ITEM": "Choisissez un élément"
+  },
   "NO_USER_SELECTED": "Aucun utilisateur sélectionné",
   "OTHER_ACTION_TYPE": "Autre",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "Affichage des actions de la vue « {{view}} » à partir d'un échantillon maximal demandé de {{requestedSampleSize}} actions.",

diff --git a/src/locales/it/analytics.json b/src/locales/it/analytics.json
@@ -24,7 +24,9 @@
   "MOST_INTERACTED_ITEMS_BY_ACTION": "{{nb}} Elementi con più interazione per azione",
   "MOST_INTERACTED_ITEMS_BY_USER": "{{nb}} Elementi con più interazione per utente",
   "NO_ACTIONS_TO_SHOW_FOR_THIS_USER": "Nessuna azione da mostrare per questo utente",
-  "NO_ITEM_SELECTED": "È necessario selezionare un elemento per visualizzare l'analisi.",
+  "HOME": {
+    "NO_ITEM_SELECTED": "È necessario selezionare un elemento per visualizzare l'analisi."
+  },
   "NO_USER_SELECTED": "Nessun utente selezionato",
   "OTHER_ACTION_TYPE": "Altro",
   "SAMPLE_ACTIONS_CHARTS_MESSAGE": "Visualizzazione delle azioni '{{view}}' da un campione massimo richiesto di {{requestedSampleSize}} azioni.",

diff --git a/src/modules/analytics/HomeMessage.tsx b/src/modules/analytics/HomeMessage.tsx
diff --git a/src/routes/analytics/index.tsx b/src/routes/analytics/index.tsx
@@ -1,22 +1,47 @@
-import { Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Stack, Typography } from '@mui/material';
 
 import { createFileRoute } from '@tanstack/react-router';
+import { ChartNoAxesCombinedIcon } from 'lucide-react';
 
-import { HomeMessage } from '~analytics/HomeMessage';
+import { ButtonLink } from '@/components/ui/ButtonLink';
+import { NS } from '@/config/constants';
 
 export const Route = createFileRoute('/analytics/')({
   component: RouteComponent,
 });
 
 function RouteComponent() {
+  const { t } = useTranslation(NS.Analytics, { keyPrefix: 'HOME' });
   return (
     <Stack
       width="100%"
       alignItems="center"
       justifyContent="center"
       height="100vh"
     >
-      <HomeMessage />
+      <Box
+        display="flex"
+        flexDirection="column"
+        flexGrow={1}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Stack
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          gap={6}
+          p={6}
+        >
+          <ChartNoAxesCombinedIcon size={100} />
+          <Typography variant="h4" textAlign="center">
+            {t('NO_ITEM_SELECTED')}
+          </Typography>
+        </Stack>
+        <ButtonLink to="/account">{t('SELECT_AN_ITEM')}</ButtonLink>
+      </Box>
     </Stack>
   );
 }
diff --git a/src/routes/auth.tsx b/src/routes/auth.tsx
@@ -10,7 +10,9 @@ export const Route = createFileRoute('/auth')({
     // if already authenticated, redirect to `/account`
     if (context.auth.isAuthenticated) {
       throw redirect({
-        to: '/account',
+        // TODO: we redirect to the builder while we work on the home page.
+        // it should be changed once the home page is a bit more like the home of the builder.
+        to: '/builder',
       });
     }
   },

diff --git a/src/routes/builder.tsx b/src/routes/builder.tsx
@@ -1,8 +1,5 @@
-import 'react-quill-new/dist/quill.snow.css';
-
 import { Outlet, createFileRoute } from '@tanstack/react-router';
 import { zodValidator } from '@tanstack/zod-adapter';
-import 'katex/dist/katex.min.css';
 import { z } from 'zod';
 
 import { useAuth } from '@/AuthContext';