feat: Serialize complete logo instead of just logo url and enable hre…

…f feature on logo click
Amsterdam-Music-Lab · Jun 13, 2024 · 0922317 · 0922317
1 parent bf8e4bc
commit 0922317
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 22 deletions.
diff --git a/backend/experiment/tests/test_views.py b/backend/experiment/tests/test_views.py
@@ -167,9 +167,13 @@ def test_serialize_experiment(self):
             name='Test Experiment',
             description='This is a test experiment',
             image=Image.objects.create(
+                title='Test',
+                description='',
                 file='test-image.jpg',
                 alt='Test',
-                href='https://www.example.com'
+                href='https://www.example.com',
+                rel='',
+                target='_self',
             ),
             theme_config=create_theme_config()
         )
@@ -193,7 +197,15 @@ def test_serialize_experiment(self):
         )
         self.assertEqual(
             serialized_experiment['image'], {
-                'file': f'{settings.BASE_URL}/upload/test-image.jpg', 'href': 'https://www.example.com', 'alt': 'Test'}
+                'title': 'Test',
+                'description': '',
+                'file': f'{settings.BASE_URL}/upload/test-image.jpg',
+                'href': 'https://www.example.com',
+                'alt': 'Test',
+                'rel': '',
+                'target': '_self',
+                'tags': []
+            }
         )
 
     def test_get_experiment(self):

diff --git a/backend/image/serializers.py b/backend/image/serializers.py
@@ -10,4 +10,9 @@ def serialize_image(image: Image) -> dict:
         'file': f'{settings.BASE_URL.strip("/")}/{settings.MEDIA_URL.strip("/")}/{image.file}',
         'href': image.href,
         'alt': image.alt,
+        'rel': image.rel,
+        'target': image.target,
+        'tags': image.tags,
+        'title': image.title,
+        'description': image.description,
     }
diff --git a/backend/theme/serializers.py b/backend/theme/serializers.py
@@ -39,7 +39,7 @@ def serialize_theme(theme: ThemeConfig) -> dict:
         'description': theme.description,
         'headingFontUrl': theme.heading_font_url,
         'bodyFontUrl': theme.body_font_url,
-        'logoUrl': f'{settings.BASE_URL.strip("/")}/{settings.MEDIA_URL.strip("/")}/{str(theme.logo_image.file)}' if theme.logo_image else None,
+        'logo': serialize_image(theme.logo_image) if theme.logo_image else None,
         'backgroundUrl': f'{settings.BASE_URL.strip("/")}/{settings.MEDIA_URL.strip("/")}/{str(theme.background_image.file)}' if theme.background_image else None,
         'footer': serialize_footer(theme.footer) if hasattr(theme, 'footer') else None,
         'header': serialize_header(theme.header) if hasattr(theme, 'header') else None

diff --git a/backend/theme/tests/test_serializers.py b/backend/theme/tests/test_serializers.py
@@ -12,14 +12,19 @@ class ThemeConfigSerializerTest(TestCase):
     @classmethod
     def setUpTestData(cls):
         logo_image = Image.objects.create(
+            title='Image',
+            description='',
             file='someimage.jpg',
-            href='someurl.com',
-            alt='Alt text'
+            href='https://example.com',
+            alt='Alt text',
+            target='_self',
+            rel='',
         )
         background_image = Image.objects.create(
             file='anotherimage.png',
-            href='another.url.com',
-            alt='Another alt text'
+            href='https://other.example.com',
+            alt='Another alt text',
+            target='',
         )
         cls.theme = ThemeConfig.objects.create(
             name='Default',
@@ -47,13 +52,23 @@ def test_footer_serializer(self):
             'logos': [
                 {
                     'file': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
-                    'href': 'someurl.com',
-                    'alt': 'Alt text'
+                    'href': 'https://example.com',
+                    'alt': 'Alt text',
+                    'title': 'Image',
+                    'description': '',
+                    'rel': '',
+                    'target': '_self',
+                    'tags': [],
                 },
                 {
                     'file': f'{settings.BASE_URL}{settings.MEDIA_URL}anotherimage.png',
-                    'href': 'another.url.com',
-                    'alt': 'Another alt text'
+                    'href': 'https://other.example.com',
+                    'alt': 'Another alt text',
+                    'title': '',
+                    'description': '',
+                    'rel': '',
+                    'tags': [],
+                    'target': '',
                 }
             ],
             'privacy': '<p>Some privacy message</p>'
@@ -78,7 +93,16 @@ def test_theme_config_serializer(self):
             'description': 'Default theme configuration',
             'headingFontUrl': 'https://example.com/heading_font',
             'bodyFontUrl': 'https://example.com/body_font',
-            'logoUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+            'logo': {
+                'file': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+                'href': 'https://example.com',
+                'alt': 'Alt text',
+                'title': 'Image',
+                'description': '',
+                'rel': '',
+                'tags': [],
+                'target': '_self',
+            },
             'backgroundUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}anotherimage.png',
             'footer': serialize_footer(self.footer),
             'header': serialize_header(self.header),
@@ -95,7 +119,7 @@ def test_theme_serialization_no_image(self):
             'description': 'Default theme configuration',
             'headingFontUrl': 'https://example.com/heading_font',
             'bodyFontUrl': 'https://example.com/body_font',
-            'logoUrl': None,
+            'logo': None,
             'backgroundUrl': None,
             'footer': serialize_footer(self.footer),
             'header': serialize_header(self.header),
@@ -109,7 +133,16 @@ def test_theme_serialization_no_footer(self):
             'description': 'Default theme configuration',
             'headingFontUrl': 'https://example.com/heading_font',
             'bodyFontUrl': 'https://example.com/body_font',
-            'logoUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+            'logo': {
+                'file': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+                'href': 'https://example.com',
+                'alt': 'Alt text',
+                'title': 'Image',
+                'description': '',
+                'rel': '',
+                'target': '_self',
+                'tags': [],
+            },
             'backgroundUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}anotherimage.png',
             'header': serialize_header(self.header),
             'footer': None,
@@ -123,7 +156,16 @@ def test_theme_serialization_no_header(self):
             'description': 'Default theme configuration',
             'headingFontUrl': 'https://example.com/heading_font',
             'bodyFontUrl': 'https://example.com/body_font',
-            'logoUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+            'logo': {
+                'file': f'{settings.BASE_URL}{settings.MEDIA_URL}someimage.jpg',
+                'href': 'https://example.com',
+                'alt': 'Alt text',
+                'title': 'Image',
+                'description': '',
+                'rel': '',
+                'target': '_self',
+                'tags': [],
+            },
             'backgroundUrl': f'{settings.BASE_URL}{settings.MEDIA_URL}anotherimage.png',
             'header': None,
             'footer': serialize_footer(self.footer),

diff --git a/frontend/src/components/ExperimentCollection/ExperimentCollection.test.tsx b/frontend/src/components/ExperimentCollection/ExperimentCollection.test.tsx
@@ -25,7 +25,15 @@ const theme = {
     bodyFontUrl: 'bodyFontUrl.com',
     description: 'Description of the theme',
     headingFontUrl: 'headingFontUrl.com',
-    logoUrl: 'logoUrl.com',
+    logo: {
+        title: 'Logo title',
+        description: 'Logo description',
+        file: 'logo.jpg',
+        alt: 'Logo alt',
+        href: 'https://www.example.com',
+        rel: 'noopener noreferrer',
+        target: '_blank'
+    },
     name: 'Awesome theme',
     footer: {
         disclaimer: 'disclaimer',

diff --git a/...ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx b/...ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx
@@ -42,7 +42,15 @@ const collectionWithTheme = {
         bodyFontUrl: 'font/url.com',
         description: 'description of the theme',
         headingFontUrl: 'another/font/url.com',
-        logoUrl: 'where/is/the/logo.jpg',
+        logo: {
+            title: 'Logo title',
+            description: 'Logo description',
+            file: 'logo.jpg',
+            alt: 'Logo alt',
+            href: 'https://www.example.com',
+            rel: 'noopener noreferrer',
+            target: '_blank'
+        },
         name: 'Collection name',
         header: header
     }

diff --git a/frontend/src/components/Logo/Logo.tsx b/frontend/src/components/Logo/Logo.tsx
@@ -6,7 +6,9 @@ import useBoundStore from "@/util/stores";
 const Logo: React.FC<{ logoClickConfirm: string | null }> = ({ logoClickConfirm = null }) => {
     const theme = useBoundStore((state) => state.theme);
 
-    const logoUrl = theme?.logoUrl ?? LOGO_URL;
+    const { alt, title, file, target, rel } = theme?.logo || {};
+    const href = theme?.logo?.href || URLS.AMLHome;
+    const logoUrl = file ?? LOGO_URL;
 
     // Handle click on logo, to optionally confirm navigating
     const onLogoClick = (e) => {
@@ -25,16 +27,21 @@ const Logo: React.FC<{ logoClickConfirm: string | null }> = ({ logoClickConfirm
         className: "aha__logo",
         "aria-label": "Logo",
         style: { backgroundImage: `url(${logoUrl})` },
+        href,
+        alt: alt || LOGO_TITLE,
+        title: title || LOGO_TITLE,
+        target: target || "_self",
+        rel: rel || "noopener noreferrer",
     };
 
     return (
         <>
             {URLS.AMLHome.startsWith("http") ? (
-                <a href={URLS.AMLHome} {...logoProps}>
+                <a {...logoProps}>
                     {LOGO_TITLE}
                 </a>
             ) : (
-                <Link to={URLS.AMLHome} {...logoProps}>
+                <Link to={href} {...logoProps}>
                     {LOGO_TITLE}
                 </Link>
             )}

diff --git a/frontend/src/types/Image.ts b/frontend/src/types/Image.ts
@@ -1,5 +1,9 @@
 export default interface Image {
+    title: string;
+    description: string;
     file: string;
-    href: string;
     alt: string;
+    href: string;
+    rel: string;
+    target: '_blank' | '_self' | '_parent' | '_top' | string;
 }
diff --git a/frontend/src/types/Theme.ts b/frontend/src/types/Theme.ts
@@ -1,3 +1,5 @@
+import Image from "./Image";
+
 export interface Header {
     nextExperimentButtonText: string;
     aboutButtonText: string;
@@ -20,7 +22,7 @@ export default interface Theme {
     bodyFontUrl: string;
     description: string;
     headingFontUrl: string;
-    logoUrl: string;
+    logo: Image;
     name: string;
     footer: Footer | null;
     header: Header | null;