Action items populate as soon as they are available + Removing Servic…

…e Worker Requirement (#3857)

fixes #3853 and #3849
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
Features

## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
1. Action items do not show at all until all tests are done running
2. You are required to have a service worker to package.

## Describe the new behavior?
1. Action items populate the todo list as they come in from their
respective tests completing.
2. The service worker doesn't need to be present to package.

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.


## Additional Information

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Justin Willis <[email protected]>
Co-authored-by: Justin Willis (HE / HIM) <[email protected]>
Co-authored-by: Zach Teutsch <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Nikola Metulev <[email protected]>
Co-authored-by: Amrutha Srinivasan <[email protected]>
Co-authored-by: Judah Gabriel Himango <[email protected]>

.github/workflows/pwabuilder-preview

@@ -0,0 +1,45 @@
+name: PWABuilder Preview CI/CD
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - dev
+
+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/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_GLACIER_097FE8710 }}
+          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/pwabuilder/" # 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/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_POLITE_GLACIER_097FE8710 }}
+          action: "close"

apps/pwabuilder/src/script/components/todo-list-item.ts

@@ -51,10 +51,15 @@ export class TodoItem extends LitElement {
       ${smallBreakPoint(css`
 
       `)}
+
       /* 480px - 639px */
       ${mediumBreakPoint(css`
 
       `)}
+
+
+      
+
       /* 640px - 1023px */
       ${largeBreakPoint(css`
 
@@ -90,7 +95,7 @@ export class TodoItem extends LitElement {
   render() {
     return html`
       <div id="item-wrapper" @click=${() => this.bubbleEvent()}>
-        ${this.status === "red" ? html`<img src=${stop_src} alt="yield result icon"/>` : this.status === "retest" ? html`<img src=${retest_src} style="color: black" alt="retest site icon"/>` : html`<img src=${yield_src} alt="yield result icon"/>`}
+        ${this.status === "required" ? html`<img src=${stop_src} alt="yield result icon"/>` : this.status === "retest" ? html`<img src=${retest_src} style="color: black" alt="retest site icon"/>` : html`<img src=${yield_src} alt="yield result icon"/>`}
 
         <p>${this.fix.split("~").length > 1 ? 
             this.fix.split("~").join(" "+ this.field + " ") :