Link exercises in the routine detail view to their detail page

src/components/Routines/widgets/RoutineDetailsCard.test.tsx

@@ -5,6 +5,7 @@ import { RoutineDetailsCard } from "@/components/Routines/widgets/RoutineDetails
 import React from 'react';
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { testRoutine1 } from "@/tests/workoutRoutinesTestData";
+import { Routine } from "@/components/Routines/models/Routine";
 import type { Mock } from 'vitest';
 
 vi.mock("@/components/Exercises/api/language");
@@ -59,4 +60,34 @@ describe("Test the RoutineDetail component", () => {
         expect(screen.getByText('Pull day')).toBeInTheDocument();
         expect(screen.getByText('routines.restDay')).toBeInTheDocument();
     });
+
+    test.each([
+        ['with sequence data', testRoutine1],
+        ['without sequence data', new Routine({ ...testRoutine1, dayData: [] })],
+    ])('links the exercises to their detail page (%s)', async (_, routine) => {
+
+        // Arrange
+        (useRoutineDetailQuery as Mock).mockImplementation(() => ({
+            isSuccess: true,
+            isLoading: false,
+            data: routine
+        }));
+
+        // Act
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter initialEntries={['/routine/101']}>
+                    <Routes>
+                        <Route path="routine/:routineId" element={<RoutineDetailsCard />} />
+                    </Routes>
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        // Assert
+        expect(screen.getByRole('link', { name: 'Squats' })).toHaveAttribute(
+            'href',
+            expect.stringMatching(/\/exercise\/345\/view\/squats$/)
+        );
+    });
 });

src/components/Routines/widgets/RoutineDetailsCard.tsx

@@ -1,4 +1,4 @@
-import { ExerciseImageAvatar, getLanguageByShortName, Language, useLanguageQuery } from "@/components/Exercises";
+import { Exercise, ExerciseImageAvatar, getLanguageByShortName, Language, useLanguageQuery } from "@/components/Exercises";
 import { Day, getDayName } from "@/components/Routines/models/Day";
 import { RoutineDayData } from "@/components/Routines/models/RoutineDayData";
 import { SetConfigData } from "@/components/Routines/models/SetConfigData";
@@ -19,6 +19,7 @@ import {
     Container,
     Divider,
     IconButton,
+    Link,
     Stack,
     Typography,
     useTheme
@@ -61,6 +62,26 @@ export const RoutineDetailsCard = () => {
 };
 
 
+/*
+ * Name of an exercise, linking to its detail page
+ */
+function ExerciseNameLink(props: { exercise: Exercise, language?: Language }) {
+    const { i18n } = useTranslation();
+    const translation = props.exercise.getTranslation(props.language);
+
+    return <Link
+        href={makeLink(WgerLink.EXERCISE_DETAIL, i18n.language, {
+            id: props.exercise.id!,
+            slug: translation.nameSlug
+        })}
+        color="inherit"
+        underline="hover"
+    >
+        {translation.name}
+    </Link>;
+}
+
+
 export function SetConfigDataDetails(props: {
     setConfigData: SetConfigData,
     rowHeight?: undefined | string,
@@ -91,7 +112,7 @@ export function SetConfigDataDetails(props: {
                 <Stack spacing={0}>
                     <Typography variant={"h6"}>
                         {props.showExercise && (props.setConfigData.exercise
-                            ? props.setConfigData.exercise.getTranslation(language).name
+                            ? <ExerciseNameLink exercise={props.setConfigData.exercise} language={language} />
                             : t('routines.exerciseNotAvailable'))}
                     </Typography>
                     <div>
@@ -200,7 +221,7 @@ function SlotEntryList(props: { slot: Slot }) {
                 {props.slot.entries.map((entry) =>
                     <Typography variant={"h6"} key={entry.id}>
                         {entry.exercise
-                            ? entry.exercise.getTranslation(language).name
+                            ? <ExerciseNameLink exercise={entry.exercise} language={language} />
                             : t('routines.exerciseNotAvailable')}
                     </Typography>
                 )}