Convert application from Angular to React/Next.js with MUI

.github/workflows/CI.yml

@@ -85,7 +85,7 @@ jobs:
         category: "/language:javascript-typescript"
 
     - name: Copy staticwebapp.config.json
-      run: cp src/staticwebapp.config.json src/dist/dive-intelligence/browser/staticwebapp.config.json
+      run: cp src/staticwebapp.config.json src/out/staticwebapp.config.json
 
     # deploy PR to preview site
     - name: Find PR comment to update
@@ -168,13 +168,13 @@ jobs:
       if: github.ref == 'refs/heads/master'
       uses: jossef/action-set-json-field@v2.2
       with:
-        file: src/dist/dive-intelligence/browser/assets/config.json
+        file: src/out/config.json
         field: instrumentationKey
         value: ${{ vars.INSTRUMENTATION_KEY }}
 
     - name: Upload Source Maps
       if: github.ref == 'refs/heads/master'
-      run: az storage blob upload-batch --connection-string "${{ secrets.SOURCE_MAPS_CONNECTION_STRING}}" --source src/dist/dive-intelligence/browser --destination sourcemaps --overwrite true
+      run: az storage blob upload-batch --connection-string "${{ secrets.SOURCE_MAPS_CONNECTION_STRING}}" --source src/out --destination sourcemaps --overwrite true
 
     - name: Deploy to Azure Static Web Apps
       if: github.ref == 'refs/heads/master'

.gitignore

@@ -405,6 +405,11 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+test-results/
+
+# Next.js
+.next/
+out/
 
 # System files
 .DS_Store

src/e2e/components/current-stats.component.ts

@@ -1,67 +1,54 @@
-import { Locator } from '@playwright/test';
+import { Locator, Page } from '@playwright/test';
 
 export class CurrentStatsComponent {
-  constructor(private host: Locator) {}
+  constructor(private page: Page, private host: Locator) {}
 
   async getCurrentDepth(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Current Depth: ').textContent();
-    content = content ?? '';
-    return content.replace('Current Depth: ', '').trim();
+    const content = await this.host.getByText(/^Current Depth:/).textContent();
+    return (content ?? '').replace('Current Depth:', '').trim();
   }
 
   async getNoDecoLimit(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('No Deco Limit: ').textContent();
-    content = content ?? '';
-    return content.replace('No Deco Limit: ', '').trim();
+    const content = await this.host.getByText(/^No Deco Limit:/).textContent();
+    return (content ?? '').replace('No Deco Limit:', '').trim();
   }
 
   async getCurrentCeiling(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Current Ceiling: ').textContent();
-    content = content ?? '';
-    return content.replace('Current Ceiling: ', '').trim();
+    const content = await this.host.getByText(/^Current Ceiling:/).textContent();
+    return (content ?? '').replace('Current Ceiling:', '').trim();
   }
 
   async getCurrentGas(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Current Gas: ').textContent();
-    content = content ?? '';
-    return content.replace('Current Gas: ', '').trim();
+    const content = await this.host.getByText(/^Current Gas:/).textContent();
+    return (content ?? '').replace('Current Gas:', '').trim();
   }
 
   async getCurrentMaxDepthPO2(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Max Depth (PO2): ').textContent();
-    content = content ?? '';
-    return content.replace('Max Depth (PO2): ', '').trim();
+    const content = await this.host.getByText(/^Max Depth \(PO2\):/).textContent();
+    return (content ?? '').replace('Max Depth (PO2):', '').trim();
   }
 
   async getCurrentMaxDepthEND(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Max Depth (END): ').textContent();
-    content = content ?? '';
-    return content.replace('Max Depth (END): ', '').trim();
+    const content = await this.host.getByText(/^Max Depth \(END\):/).textContent();
+    return (content ?? '').replace('Max Depth (END):', '').trim();
   }
 
   async getCurrentMinDepthHypoxia(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('Min Depth (Hypoxia): ').textContent();
-    content = content ?? '';
-    return content.replace('Min Depth (Hypoxia): ', '').trim();
+    const content = await this.host.getByText(/^Min Depth \(Hypoxia\):/).textContent();
+    return (content ?? '').replace('Min Depth (Hypoxia):', '').trim();
   }
 
   async getCurrentPO2(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('PO2: ').textContent();
-    content = content ?? '';
-    return content.replace('PO2: ', '').trim();
+    const content = await this.host.getByText(/^PO2:/).textContent();
+    return (content ?? '').replace('PO2:', '').trim();
   }
 
   async isCurrentPO2Warning(): Promise<boolean> {
-    return this.host
-      .locator('.current-stats div.dive-stat', { has: this.host.page().getByText(/\s*PO2:/) })
-      .locator('mat-icon')
-      .getByText('warning')
-      .isVisible();
+    return this.host.locator('[data-testid="WarningIcon"]').isVisible();
   }
 
   async getCurrentEND(): Promise<string> {
-    let content = await this.host.locator('.current-stats .dive-stat').getByText('END: ').textContent();
-    content = content ?? '';
-    return content.replace('END: ', '').trim();
+    const content = await this.host.getByText(/^END:/).textContent();
+    return (content ?? '').replace('END:', '').trim();
   }
 }