refactor: update useParagonTheme when some variables are missing

openedx · May 23, 2024 · f4556a3 · f4556a3
1 parent 6b26820
commit f4556a3
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 13 deletions.
diff --git a/src/react/hooks/paragon/useParagonThemeUrls.js b/src/react/hooks/paragon/useParagonThemeUrls.js
@@ -54,24 +54,34 @@ const useParagonThemeUrls = (config) => useMemo(() => {
     themeVariantsCss[themeVariant] = themeVariantMetadata;
   });
 
-  const hasMissingCssUrls = !coreCss.default || Object.keys(themeVariantsCss).length === 0;
-  if (hasMissingCssUrls) {
-    if (!PARAGON_THEME) {
+  // If we don't have  the core default or any theme variants, use the PARAGON_THEME
+  if (!coreCss.default || Object.keys(themeVariantsCss).length === 0) {
+    const localCoreUrl = PARAGON_THEME.paragon?.themeUrls?.core;
+    const localThemeVariants = PARAGON_THEME.paragon?.themeUrls?.variants;
+
+    if (!localCoreUrl || Object.keys(localCoreUrl).length === 0
+      || !localThemeVariants || Object.keys(localThemeVariants).length === 0) {
       return undefined;
     }
-    const themeVariants = {};
-    const baseUrl = config.BASE_URL || window.location?.origin;
-    const prependBaseUrl = (url) => `${baseUrl}/${url}`;
-    themeVariantsEntries.forEach(([themeVariant, { fileName, ...rest }]) => {
-      themeVariants[themeVariant] = {
-        url: prependBaseUrl(fileName),
-        ...rest,
-      };
-    });
+
+    if (!coreCss.default) {
+      coreCss.default = PARAGON_THEME?.paragon?.themeUrls?.core?.fileName;
+    }
+
+    if (Object.keys(themeVariantsCss).length === 0) {
+      const baseUrl = config.BASE_URL || window.location?.origin;
+      const prependBaseUrl = (url) => `${baseUrl}/${url}`;
+      Object.entries(localThemeVariants).forEach(([themeVariant, { fileName, ...rest }]) => {
+        themeVariantsCss[themeVariant] = {
+          url: prependBaseUrl(fileName),
+          ...rest,
+        };
+      });
+    }
     return {
       core: { urls: coreCss },
       defaults: defaultThemeVariants,
-      variants: themeVariants,
+      variants: themeVariantsCss,
     };
   }
 

diff --git a/src/react/hooks/paragon/useParagonThemeUrls.test.js b/src/react/hooks/paragon/useParagonThemeUrls.test.js
@@ -97,5 +97,39 @@ describe('useParagonThemeUrls', () => {
         }),
       );
     });
+    it('returns expected object when core default and variants are not present, fallback to PARAGON_THEME', () => {
+      const config = {
+        PARAGON_THEME_URLS: {
+          core: {
+            urls: {
+              brandOverride: 'brand-core.css',
+            },
+          },
+          defaults: {
+            light: 'light',
+          },
+          variants: {},
+        },
+      };
+      const { result } = renderHook(() => useParagonThemeUrls(config));
+      expect(result.current).toEqual(
+        expect.objectContaining({
+          core: {
+            urls: {
+              default: 'core.min.css',
+              brandOverride: 'brand-core.css',
+            },
+          },
+          defaults: {
+            light: 'light',
+          },
+          variants: {
+            light: {
+              url: 'http://localhost/light.min.css',
+            },
+          },
+        }),
+      );
+    });
   });
 });