Merge branch 'staging' into main

.github/workflows/blog-preview.yml

@@ -0,0 +1,52 @@
+name: Blog Preview CI/CD
+
+on:
+  push:
+    branches:
+      - staging
+    paths:
+      - "apps/blog/**"
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - staging
+    paths:
+      - "apps/blog/**"
+  workflow_dispatch:
+    branches:
+      - staging
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/[email protected]
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.BLOG_PREVIEW_TOKEN }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "apps/blog/" # App source code path
+          api_location: "api" # Api source code path - optional
+          output_location: "dist" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/[email protected]
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.BLOG_PREVIEW_TOKEN }}
+          action: "close"

.github/workflows/pwabuilder-main.yml

@@ -46,6 +46,7 @@ jobs:
       - name: Make envfile
         uses: SpicyPizza/[email protected]
         with:
+          envkey_NODE_ENV: "production"
           envkey_VITE_CLIENT_ID: ${{ secrets.MSAL_CLIENT_ID }}
           file_name: .env
           directory: apps/pwabuilder

.github/workflows/pwabuilder-preview.yml

@@ -46,6 +46,7 @@ jobs:
       - name: Make envfile
         uses: SpicyPizza/[email protected]
         with:
+          envkey_NODE_ENV: "development"
           envkey_VITE_CLIENT_ID: ${{ secrets.MSAL_CLIENT_ID }}
           file_name: .env
           directory: apps/pwabuilder

apps/pwabuilder/src/script/components/test-publish-pane.ts

@@ -537,7 +537,7 @@ export class TestPublishPane extends LitElement {
           <div id="pp-frame-content">
             <div id="pp-frame-header">
               <h1>Download Test Package</h1>
-              <p>If you want to see what your app would look like in its current state, use the test package buttons below!</p>
+              <p>If you want to see what your app would look like in its current state, use the test package button below!</p>
             </div>
             <div id="store-cards">
               ${this.renderContentCards()}

apps/pwabuilder/src/script/components/windows-form.ts

@@ -25,6 +25,7 @@ export class WindowsForm extends AppPackageFormBase {
   @state() packageOptions: WindowsPackageOptions = emptyWindowsPackageOptions();
   @state() activeLanguages: string[] = [];
   @state() activeLanguageCodes: string[] = [];
+  @state() userBackgroundColor: string = "";
 
   static get styles() {
     return [
@@ -202,15 +203,20 @@ export class WindowsForm extends AppPackageFormBase {
     if (manifestContext.isGenerated) {
       manifestContext = await fetchOrCreateManifest();
     }
-
+    
     this.packageOptions = createWindowsPackageOptionsFromManifest(
       manifestContext!.manifest
     );
 
     this.packageOptions.targetDeviceFamilies = ['Desktop', 'Holographic'];
 
     this.customSelected = this.packageOptions.images?.backgroundColor != 'transparent';
-    this.initialBgColor = this.currentSelectedColor = (this.packageOptions.images?.backgroundColor as string);
+    this.currentSelectedColor = this.packageOptions.images?.backgroundColor!;
+    if(manifestContext?.manifest.background_color){
+      this.initialBgColor = manifestContext!.manifest.background_color;
+    } else {
+      this.initialBgColor = "#000000;"
+    }
   }
 
   toggleSettings(settingsToggleValue: 'basic' | 'advanced') {
@@ -327,7 +333,7 @@ export class WindowsForm extends AppPackageFormBase {
           <p class="sub-multi">Select your Windows icons background color</p>
           <sl-radio-group 
             id="icon-bg-radio-group" 
-            .value=${this.packageOptions!.images!.backgroundColor === 'transparent' ? 'transparent' : 'custom'}
+            .value=${'transparent'}
             @sl-change=${() => this.toggleIconBgRadios()}
           >
             <sl-radio class="color-radio" size="small" value="transparent">Transparent</sl-radio>
@@ -344,13 +350,17 @@ export class WindowsForm extends AppPackageFormBase {
   toggleIconBgRadios(){
     let input = (this.shadowRoot?.getElementById("icon-bg-radio-group") as any);
     let selected = input.value;
-    this.customSelected = selected !== 'transparent';
-    if(!this.customSelected){
+
+    // update values
+    if(this.customSelected){
       this.packageOptions.images!.backgroundColor = 'transparent';
     } else {
       this.packageOptions.images!.backgroundColor = this.initialBgColor;
       this.currentSelectedColor = this.initialBgColor;
     }
+
+    // switch flag which will trigger update
+    this.customSelected = selected !== 'transparent';
   }
 
   render() {
@@ -524,7 +534,7 @@ export class WindowsForm extends AppPackageFormBase {
                     'https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design#color-contrast',
                   inputId: 'icon-bg-color-input',
                   type: 'color',
-                  value: this.packageOptions.images!.backgroundColor || 'transparent',
+                  value: this.packageOptions.images?.backgroundColor!,
                   placeholder: 'transparent',
                   inputHandler: (val: string) => this.packageOptions.images!.backgroundColor = val,
                 })}

apps/pwabuilder/src/script/pages/app-report.ts

@@ -3416,7 +3416,7 @@ export class AppReport extends LitElement {
                       ` :
                       html`
                         <p class="card-desc">
-                          PWABuilder has analysesd your PWA and has identified some app capabilities that could enhance your PWA
+                          PWABuilder has analyzed your PWA and has identified some app capabilities that could enhance your PWA
                         </p>
                       `
                         }

apps/pwabuilder/src/script/services/publish/windows-publish.ts

@@ -140,7 +140,7 @@ export function createWindowsPackageOptionsFromManifest(
     manifest: manifest,
     images: {
       baseImage: icon?.src || '',
-      backgroundColor: manifest.background_color || 'transparent',
+      backgroundColor: 'transparent',
       padding: 0.0,
     },
     resourceLanguage: languages,

apps/pwabuilder/src/script/utils/environment.ts

@@ -11,7 +11,7 @@ export const env = {
   webPackageGeneratorFormUrl: '',
   zipCreatorUrl: '',
   validateGiveawayUrl: '',
-  tokensCampaignRunning: false
+  tokensCampaignRunning: false,
 };
 
 //@ts-ignore
@@ -21,7 +21,7 @@ if (import.meta.env.PROD) {
   env.manifestCreatorUrl =
     'https://pwabuilder-manifest-creator.azurewebsites.net/api/create';
   env.windowsPackageGeneratorUrl =
-    'https://pwabuilder-winserver.centralus.cloudapp.azure.com/msix/generatezip';
+    'https://pwabuilder-windows-docker.azurewebsites.net/msix/generatezip';
   env.androidPackageGeneratorUrl =
     'https://pwabuilder-cloudapk.azurewebsites.net';
   env.iosPackageGeneratorUrl =
@@ -35,24 +35,27 @@ if (import.meta.env.PROD) {
   env.webPackageGeneratorFormUrl =
     'https://pwabuilder-web-platform.azurewebsites.net/form';
   env.zipCreatorUrl = 'https://azure-express-zip-creator.azurewebsites.net/api';
-  env.validateGiveawayUrl = 'https://pwabuilder-tokens-giveaway.azurewebsites.net/api';
+  env.validateGiveawayUrl =
+    'https://pwabuilder-tokens-giveaway.azurewebsites.net/api';
 } else {
   env.api = 'https://pwabuilder-apiv2-node.azurewebsites.net/api';
   env.manifestCreatorUrl =
     'https://pwabuilder-manifest-creator.azurewebsites.net/api/create';
   env.windowsPackageGeneratorUrl =
-    'https://pwabuilder-winserver.centralus.cloudapp.azure.com/msix/generatezip';
+    'https://pwabuilder-windows-docker-dev.azurewebsites.net/msix/generatezip';
   env.androidPackageGeneratorUrl =
     'https://pwabuilder-cloudapk.azurewebsites.net';
   env.iosPackageGeneratorUrl =
     'https://pwabuilder-ios.azurewebsites.net/packages/create';
   env.oculusPackageGeneratorUrl =
     'https://pwabuilder-oculus-linux-docker-app.azurewebsites.net/packages/create';
-  env.imageGeneratorUrl = 'https://appimagegenerator-prod-dev.azurewebsites.net';
+  env.imageGeneratorUrl =
+    'https://appimagegenerator-prod-dev.azurewebsites.net';
   env.safeUrlFetcher =
     'https://pwabuilder-safe-url.azurewebsites.net/api/getsafeurl';
   env.webPackageGeneratorFormUrl =
     'https://pwabuilder-web-platform.azurewebsites.net/form';
   env.zipCreatorUrl = 'https://azure-express-zip-creator.azurewebsites.net/api';
-  env.validateGiveawayUrl = 'https://pwabuilder-tokens-giveaway.azurewebsites.net/api';
+  env.validateGiveawayUrl =
+    'https://pwabuilder-tokens-giveaway.azurewebsites.net/api';
 }

apps/pwabuilder/tests/packaging.spec.ts

@@ -5,110 +5,111 @@ let currentPage: Page | undefined;
 const url = 'https://preview.pwabuilder.com/';
 // before each test
 test.beforeEach(async ({ page }) => {
-    currentPage = page;
-    await page.goto(url);
+  currentPage = page;
+  await page.goto(url);
 });
 
-
 // only run this test once
 test('Ensure demo app can be packaged for Windows', async ({ page }) => {
-    test.slow();
+  test.slow();
 
-    const demoButton = page.locator('id=demo-action');
+  const demoButton = page.locator('id=demo-action');
 
-    // click demo button to start new test
-    await demoButton.click();
+  // click demo button to start new test
+  await demoButton.click();
 
-    // wait for network to be done
-    await page.waitForLoadState('networkidle');
+  // wait for network to be done
+  await page.waitForLoadState('networkidle');
 
-    // our url should contain /reportcard
-    await expect(page.url()).toContain('/reportcard');
+  // our url should contain /reportcard
+  await expect(page.url()).toContain('/reportcard');
 
-    // wait for tests to end
-    await page.waitForLoadState('networkidle');
+  // wait for tests to end
+  await page.waitForLoadState('networkidle');
 
-    const packageButton = page.locator('id=pfs');
+  const packageButton = page.locator('id=pfs');
 
-    // click package button
-    await packageButton.click();
+  // click package button
+  await packageButton.click();
 
-    const windowsPackageButton = page.locator('id=windows-package-button');
+  const windowsPackageButton = page.locator('id=windows-package-button');
 
-    // click windows package button
-    await windowsPackageButton.click();
+  // click windows package button
+  await windowsPackageButton.click();
 
-    // fill out form
-    await page.fill('id=package-id-input', 'com.webboard.pwa');
+  // fill out form
+  await page.fill('id=package-id-input', 'com.webboard.pwa');
 
-    await page.fill('id=publisher-display-name-input', 'Contoso Inc.');
+  await page.fill('id=publisher-display-name-input', 'Contoso Inc.');
 
-    await page.fill('id=publisher-id-input', 'CN=asdfasdfasdflkjlkjhlkjh');
+  await page.fill('id=publisher-id-input', 'CN=asdfasdfasdflkjlkjhlkjh');
 
-    const generateButton = page.locator('id=generate-submit');
-    // await generateButton.click();
+  const generateButton = page.locator('id=generate-submit');
+  // await generateButton.click();
 
-    await expect(generateButton).toBeVisible();
+  await expect(generateButton).toBeVisible();
 
-    // wait on request to https://pwabuilder-winserver.centralus.cloudapp.azure.com/msix/generatezip to finish
-    const pageRequest = page.waitForRequest('https://pwabuilder-winserver.centralus.cloudapp.azure.com/msix/generatezip');
-    await generateButton.click();
-    const request = await pageRequest;
+  // wait on request to https://pwabuilder-windows-docker.azurewebsites.net/msix/generatezip to finish
+  const pageRequest = page.waitForRequest(
+    'https://pwabuilder-windows-docker.azurewebsites.net/msix/generatezip'
+  );
+  await generateButton.click();
+  const request = await pageRequest;
 
-    // wait for response to https://pwabuilder-winserver.centralus.cloudapp.azure.com/msix/generatezip to finish
+  // wait for response to https://pwabuilder-windows-docker.azurewebsites.net/msix/generatezip to finish
 
-    const response = await request.response();
+  const response = await request.response();
 
-    if (response) {
-        expect(response.status()).toBe(200);
-    }
-    else {
-        throw new Error('Response was undefined');
-    }
-})
+  if (response) {
+    expect(response.status()).toBe(200);
+  } else {
+    throw new Error('Response was undefined');
+  }
+});
 
 test('Ensure demo app can be packaged for Android', async ({ page }) => {
-    test.slow();
-    test.setTimeout(120000)
+  test.slow();
+  test.setTimeout(120000);
 
-    const demoButton = page.locator('id=demo-action');
+  const demoButton = page.locator('id=demo-action');
 
-    // click demo button to start new test
-    await demoButton.click();
+  // click demo button to start new test
+  await demoButton.click();
 
-    // wait for network to be done
-    await page.waitForLoadState('networkidle');
+  // wait for network to be done
+  await page.waitForLoadState('networkidle');
 
-    // our url should contain /reportcard
-    await expect(page.url()).toContain('/reportcard');
+  // our url should contain /reportcard
+  await expect(page.url()).toContain('/reportcard');
 
-    // wait for tests to end
-    await page.waitForLoadState('networkidle');
+  // wait for tests to end
+  await page.waitForLoadState('networkidle');
 
-    const packageButton = page.locator('id=pfs');
+  const packageButton = page.locator('id=pfs');
 
-    // click package button
-    await packageButton.click();
+  // click package button
+  await packageButton.click();
 
-    const androidPackageButton = page.locator('id=android-package-button');
+  const androidPackageButton = page.locator('id=android-package-button');
 
-    // click windows package button
-    await androidPackageButton.click();
+  // click windows package button
+  await androidPackageButton.click();
 
-    const generateButton = page.locator('id=generate-submit');
+  const generateButton = page.locator('id=generate-submit');
 
-    await expect(generateButton).toBeVisible();
+  await expect(generateButton).toBeVisible();
 
-    const pageRequest = page.waitForRequest('https://pwabuilder-cloudapk.azurewebsites.net/generateAppPackage');
-    await generateButton.click();
-    const request = await pageRequest;
+  const pageRequest = page.waitForRequest(
+    'https://pwabuilder-cloudapk.azurewebsites.net/generateAppPackage'
+  );
+  await generateButton.click();
+  const request = await pageRequest;
 
-    const response = await request.response();
+  const response = await request.response();
 
-    if (response) {
-        expect(response.status()).toBe(200);
-    }
-    else {
-        throw new Error('Response was undefined');
-    }
-})
+  if (response) {
+    expect(response.status()).toBe(200);
+  } else {
+    throw new Error('Response was undefined');
+  }
+});