Merge pull request #442 from cmu-sei/CWDOE-178-theme-with-other-param…

…eters correctly handle adding theme parameter to url when url contains othe…
cmu-sei · Nov 30, 2021 · e9684c9 · e9684c9
2 parents bb02b28 + a22a3b8
commit e9684c9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node as builder
+FROM node:16-alpine as builder
 
 COPY package.json package-lock.json ./
 
@@ -14,7 +14,7 @@ WORKDIR /ng-app
 
 COPY . .
 
-RUN $(npm bin)/ng build --resources-output-path=assets/fonts --aot --configuration production 
+RUN $(npm bin)/ng build --resources-output-path=assets/fonts --aot --configuration production
 
 ### Stage 2: Setup ###
 

diff --git a/src/app/components/player/application-list/application-list.component.ts b/src/app/components/player/application-list/application-list.component.ts
@@ -62,9 +62,7 @@ export class ApplicationListComponent implements OnInit, OnChanges, OnDestroy {
 
   // Local Component functions
   openInTab(app: ApplicationData) {
-    const url = app.url.includes('{theme}')
-      ? app.url.replace('{theme}', '?theme=' + this.currentTheme)
-      : app.url;
+    const url = this.insertThemeToUrl(app.url);
     window.open(url, '_blank');
   }
 
@@ -105,14 +103,25 @@ export class ApplicationListComponent implements OnInit, OnChanges, OnDestroy {
         );
         window.location.reload();
       } else {
-        const url = app.url.includes('{theme}')
-          ? app.url.replace('{theme}', '?theme=' + this.currentTheme)
-          : app.url;
+        const url = this.insertThemeToUrl(app.url);
         this.focusedAppService.focusedAppUrl.next(url);
       }
     });
   }
 
+  insertThemeToUrl(url: string) {
+    if (url.includes('{theme}')) {
+      if (url.includes('?')) {
+        url = url.replace('?{theme}', '?theme=' + this.currentTheme);
+        url = url.replace('&{theme}', '&theme=' + this.currentTheme);
+        url = url.replace('{theme}', '&theme=' + this.currentTheme);
+      } else {
+        url = url.replace('{theme}', '?theme=' + this.currentTheme);
+      }
+    }
+    return url;
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();

diff --git a/src/app/components/player/focused-app/focused-app.component.ts b/src/app/components/player/focused-app/focused-app.component.ts
@@ -33,10 +33,18 @@ export class FocusedAppComponent implements OnDestroy {
     ]).pipe(
       map(([url, theme]) => {
         let themedUrl = url;
-        const themeIndex = url.indexOf('?theme=');
+        let themeText = '?theme=';
+        let themeIndex = url.indexOf(themeText);
+        if (themeIndex < 0) {
+          themeText = '&theme=';
+          themeIndex = url.indexOf(themeText);
+        }
         if (themeIndex >= 0) {
           // Only add the theme query param if it already exists
-          themedUrl = url.substring(0, themeIndex) + '?theme=' + theme;
+          let urlEnding = url.substring(themeIndex + 7);
+          const endingIndex = urlEnding.indexOf('&');
+          urlEnding = endingIndex < 0 ? '' : urlEnding.substring(endingIndex);
+          themedUrl = url.substring(0, themeIndex) + '?theme=' + theme + urlEnding;
         }
         return this.sanitizer.bypassSecurityTrustResourceUrl(themedUrl);
       }),