add DARS view feature flag

src/app/core/header/header.component.html

@@ -33,13 +33,25 @@
       aria-label="degree planner"
       href="/degree-planner">
     </myuw-drawer-link>
-    <myuw-drawer-link
-      slot="myuw-drawer-links"
-      name="Degree Audit (DARS)"
-      icon=""
-      aria-label="degree audit"
-      href="/dars">
-    </myuw-drawer-link>
+    <ng-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
+    <ng-template #linkToNewDARSView>
+      <myuw-drawer-link
+        slot="myuw-drawer-links"
+        name="Degree Audit (DARS)"
+        icon=""
+        aria-label="degree audit"
+        href="/degree-planner/dars">
+      </myuw-drawer-link>
+    </ng-template>
+    <ng-template #linkToOldDARSView>
+      <myuw-drawer-link
+        slot="myuw-drawer-links"
+        name="Degree Audit (DARS)"
+        icon=""
+        aria-label="degree audit"
+        href="/dars">
+      </myuw-drawer-link>
+    </ng-template>
   </myuw-drawer>
 
   <myuw-help

src/app/core/header/header.component.ts

@@ -13,6 +13,7 @@ import {
   AddAcademicYear,
 } from '@app/degree-planner/store/actions/ui.actions';
 import { MediaMatcher } from '@angular/cdk/layout';
+import { environment } from './../../../environments/environment';
 
 const isntUndefined = <T>(anything: T | undefined): anything is T => {
   return anything !== undefined;
@@ -27,6 +28,7 @@ export class HeaderComponent implements OnInit {
   public activeRoadmapId$: Observable<number>;
   public mobileView: MediaQueryList;
   public isSidenavOpen$: Observable<boolean>;
+  public useNewDARSView?: boolean;
 
   constructor(
     private store: Store<GlobalState>,
@@ -35,6 +37,7 @@ export class HeaderComponent implements OnInit {
     public mediaMatcher: MediaMatcher,
   ) {
     this.mobileView = mediaMatcher.matchMedia('(max-width: 959px)');
+    this.useNewDARSView = environment['useNewDARSView'] === true;
   }
 
   ngOnInit() {

src/app/core/navigation/navigation.component.html

@@ -4,7 +4,13 @@
     <a mat-tab-link href="/my-courses">My Courses</a>
     <a mat-tab-link href="/scheduler">Scheduler</a>
     <a mat-tab-link class="active" href="/degree-planner">Degree Planner</a>
-    <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
+    <ng-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
+    <ng-template #linkToNewDARSView>
+      <a mat-tab-link href="/degree-planner/dars">Degree Audit (DARS)</a>
+    </ng-template>
+    <ng-template #linkToOldDARSView>
+      <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
+    </ng-template>
   </nav>
   <button class="btn-feedback" aria-describedby="feedback-dialog" (click)="onFeedbackClick()">Feedback</button>
 </div>

src/app/core/navigation/navigation.component.ts

 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material';
-
+import { environment } from './../../../environments/environment';
 import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
 
 @Component({
@@ -9,9 +9,12 @@ import { FeedbackDialogComponent } from '@app/degree-planner/dialogs/feedback-di
   styleUrls: ['./navigation.component.scss'],
 })
 export class NavigationComponent {
-  current = false;
+  public useNewDARSView?: boolean;
+
+  constructor(public dialog: MatDialog) {
+    this.useNewDARSView = environment['useNewDARSView'] === true;
+  }
 
-  constructor(public dialog: MatDialog) {}
   public onFeedbackClick() {
     this.dialog.open(FeedbackDialogComponent, {
       closeOnNavigation: true,

src/environments/environment.ts

@@ -10,6 +10,7 @@ export const environment = {
   apiSearchUrl: '/api/search/v1',
   apiEnrollUrl: '/api/enroll/v1',
   snackbarDuration: 4000,
+  useNewDARSView: true,
 };
 
 /*