Merge pull request #144 from github-copilot-resources/feature/nuxt

Updated code to use Nuxt3.
Resolved all old dependencies.

I tried to keep as much backward compatibility as possible:
- kept old port
- kept environment variable names

>[!WARNING]
> One breaking change is required to have `NUXT_SESSION_PASSWORD` (at least 32 characters long) which is used to encrypt session cookies.

This pull request includes several changes to improve the deployment process, update environment variables, and streamline the Docker configuration. The most important changes include modifications to `.env` variables, Dockerfile updates, and workflow adjustments.

### Environment Variables Update:
* Updated environment variables in `.env` to use `NUXT_PUBLIC` prefix instead of `VUE_APP`, and added new variables for GitHub OAuth and session password.

### Docker Configuration:
* Updated `Dockerfile` to support different build modes (`prod` and `playwright`) and re-mapped environment variables for backwards compatibility.

### Workflow Adjustments:
* Simplified GitHub workflows by removing redundant steps and adding new steps for building and testing the application. Changes include removing `push_proxy_to_ghcr` job and updating metadata-action configurations. [[1]](diffhunk://#diff-5af7c79204beb4acab8f83732bff158a2634f096816a28de30abc47991ff12beL35-R38) [[2]](diffhunk://#diff-5af7c79204beb4acab8f83732bff158a2634f096816a28de30abc47991ff12beL55-L95) [[3]](diffhunk://#diff-6df416bddea2a269641d3989e10ddfeb271585b3cb02478c48d019783a8c92a3L36-R38) [[4]](diffhunk://#diff-6df416bddea2a269641d3989e10ddfeb271585b3cb02478c48d019783a8c92a3L56-L99) [[5]](diffhunk://#diff-280f7f21d8a181010de13b86b88749532922230de2930048cf4642c0e315fab6L41-L43) [[6]](diffhunk://#diff-280f7f21d8a181010de13b86b88749532922230de2930048cf4642c0e315fab6L83-R82) [[7]](diffhunk://#diff-280f7f21d8a181010de13b86b88749532922230de2930048cf4642c0e315fab6L102-L143)
* Updated Playwright workflow to include a build step and consolidated Docker-based Playwright tests. [[1]](diffhunk://#diff-7afcd2d8f7b49bda74843f209eefb7b2da45f7e7803bf2e4bd636699b76aa2d3R35-R50) [[2]](diffhunk://#diff-7afcd2d8f7b49bda74843f209eefb7b2da45f7e7803bf2e4bd636699b76aa2d3L89-R73)

### Documentation:
* Updated `DEPLOYMENT.md` to reflect changes in environment variables and deployment options, and removed references to the legacy `-with-proxy` image. [[1]](diffhunk://#diff-04615394c116398fb5fcb0aa2d880df854202e4c94907dc81cd2647101ad3306L7-R19) [[2]](diffhunk://#diff-04615394c116398fb5fcb0aa2d880df854202e4c94907dc81cd2647101ad3306L30-R39) [[3]](diffhunk://#diff-04615394c116398fb5fcb0aa2d880df854202e4c94907dc81cd2647101ad3306L92-R107) [[4]](diffhunk://#diff-04615394c116398fb5fcb0aa2d880df854202e4c94907dc81cd2647101ad3306L110-R145)

### Miscellaneous:
* Added `.vscode/launch.json` for debugging configurations in Visual Studio Code.

Author: karpikpl

.browserslistrc

@@ -24,3 +24,8 @@ infra/
 /test-results-docker/
 test-results-docker-ent/
 test-results-docker-org/
+
+.nuxt/
+.output/
+.vscode/
+dist/

.dockerignore

@@ -1,25 +1,26 @@
 # Determines if mocked data should be used instead of making API calls.
-VUE_APP_MOCKED_DATA=true
+NUXT_PUBLIC_IS_DATA_MOCKED=true
 
 # Determines the scope of the API calls. 
 # Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
-VUE_APP_SCOPE=organization
+NUXT_PUBLIC_SCOPE=organization
 
 # Determines the enterprise or organization name to target API calls.
-VUE_APP_GITHUB_ORG=octodemo
+NUXT_PUBLIC_GITHUB_ORG=octodemo
 
-VUE_APP_GITHUB_ENT=
+NUXT_PUBLIC_GITHUB_ENT=
 
 # Determines the team name if exists to target API calls.
-VUE_APP_GITHUB_TEAM=
+NUXT_PUBLIC_GITHUB_TEAM=
+
+NUXT_PUBLIC_USING_GITHUB_AUTH=false
 
 # Determines the GitHub Personal Access Token to use for API calls.
 # Create with scopes copilot, manage_billing:copilot or manage_billing:enterprise, read:enterprise AND read:org
-VUE_APP_GITHUB_TOKEN=
+# NUXT_GITHUB_TOKEN=<TOKEN>
 
-# GitHub Api Url
-# for proxy api - set to /api/github defaults to https://api.github.com
-VUE_APP_GITHUB_API=
+NUXT_SESSION_PASSWORD=something_long_and_random_thats_at_least_32_characters
 
-# Random string used in API to secure session, use when VUE_APP_GITHUB_API=/api/github
-#SESSION_SECRET=randomstring
+# for Github OAuth
+NUXT_OAUTH_GITHUB_CLIENT_ID=
+NUXT_OAUTH_GITHUB_CLIENT_SECRET=

.env

@@ -32,7 +32,10 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/${{ github.repository }}
+          # this is back a single image, `-with-proxy` is legacy and will be removed
+          images: |
+            ghcr.io/${{ github.repository }}
+            ghcr.io/${{ github.repository }}-with-proxy
           labels: |
             org.opencontainers.image.title=copilot-metrics-viewer
             org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
@@ -52,47 +55,6 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           push: true
 
-  push_proxy_to_ghcr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout GitHub Action
-        uses: actions/checkout@v4
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      # Adding below tag any push to main as "latest"
-      # To deploy latest, create a release with a semver tag
-      # type=raw,value=latest,enable={{is_default_branch}}
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}-with-proxy
-          labels: |
-            org.opencontainers.image.title=copilot-metrics-viewer-with-proxy
-            org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
-            org.opencontainers.image.source=${{ github.repository }}
-          tags: |
-            type=sha
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push api
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: api.Dockerfile
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          push: true
-
   deploy:
     runs-on: ubuntu-latest
     needs: push_to_ghcr

.eslintrc.js

@@ -37,7 +37,9 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/${{ github.repository }}
+          images: |
+            ghcr.io/${{ github.repository }}
+            ghcr.io/${{ github.repository }}-with-proxy
           labels: |
             org.opencontainers.image.title=copilot-metrics-viewer
             org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
@@ -58,48 +60,3 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           push: true
-
-  push_proxy_to_ghcr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout GitHub Action
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0  # Fetch all history for all tags and branches
-          ref: ${{ github.event.inputs.tag }}
-
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}-with-proxy
-          labels: |
-            org.opencontainers.image.title=copilot-metrics-viewer-with-proxy
-            org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
-            org.opencontainers.image.source=${{ github.repository }}
-          tags: |
-            type=raw,enable=true,priority=1,value=${{ github.event.inputs.tag }}
-            type=raw,enable=${{ github.event.inputs.include_latest }},priority=2,value=latest
-            type=sha
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push api
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: api.Dockerfile
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          push: true
-        

.github/workflows/deploy_to_ghcr.yml

@@ -15,57 +15,54 @@ permissions:
   pull-requests: write
 
 jobs:
-  version_update:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout GitHub Action
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
+  # version_update:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout GitHub Action
+  #       uses: actions/checkout@v4
+  #       with:
+  #         fetch-depth: 0
 
-      - uses: actions4git/setup-git@v1
+  #     - uses: actions4git/setup-git@v1
 
-      - name: Update version in package.json
-        id: version
-        run: |
-          git checkout main
-          version=$(npm version from-git --no-git-tag-version)
-          echo "version=$version" >> $GITHUB_OUTPUT
-          echo "NPM version is $version"
+  #     - name: Update version in package.json
+  #       id: version
+  #       run: |
+  #         git checkout main
+  #         version=$(npm version from-git --no-git-tag-version)
+  #         echo "version=$version" >> $GITHUB_OUTPUT
+  #         echo "NPM version is $version"
 
-          if [ "${{ github.event.release.tag_name }}" != "$version" ]; then
-            echo "Release tag does not match the expected version."
-            exit 1
-          fi
+  #         if [ "${{ github.event.release.tag_name }}" != "$version" ]; then
+  #           echo "Release tag does not match the expected version."
+  #           exit 1
+  #         fi
 
-          cd api
-          npm version from-git --no-git-tag-version
-          cd ..
-          git add .
-          git commit --signoff --message $version
+  #         git add .
+  #         git commit --signoff --message $version
 
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
-        continue-on-error: true
-        with:
-          title: '🚀Update version to ${{ steps.version.outputs.version }}'
-          body: |
-            This PR updates the version to ${{ steps.version.outputs.version }}. 
-            Use **merge commit** strategy for this PR!
-          branch: 'version-update-${{ steps.version.outputs.version }}'
-          delete-branch: true
-          labels: 'version-update'
-          base: 'main'
+  #     - name: Create Pull Request
+  #       uses: peter-evans/create-pull-request@v7
+  #       continue-on-error: true
+  #       with:
+  #         title: '🚀Update version to ${{ steps.version.outputs.version }}'
+  #         body: |
+  #           This PR updates the version to ${{ steps.version.outputs.version }}. 
+  #           Use **merge commit** strategy for this PR!
+  #         branch: 'version-update-${{ steps.version.outputs.version }}'
+  #         delete-branch: true
+  #         labels: 'version-update'
+  #         base: 'main'
 
-      - name: Move tag ${{ steps.version.outputs.version }} to PR
-        run: |
-          echo "moving tag ${{ steps.version.outputs.version }}"
-          git tag --force ${{ steps.version.outputs.version }}
-          git push origin ${{ steps.version.outputs.version }} --force
+  #     - name: Move tag ${{ steps.version.outputs.version }} to PR
+  #       run: |
+  #         echo "moving tag ${{ steps.version.outputs.version }}"
+  #         git tag --force ${{ steps.version.outputs.version }}
+  #         git push origin ${{ steps.version.outputs.version }} --force
 
   push_to_ghcr:
     runs-on: ubuntu-latest
-    needs: version_update
+    # needs: version_update
     steps:
       - name: Checkout GitHub Action
         uses: actions/checkout@v4
@@ -83,7 +80,9 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ghcr.io/${{ github.repository }}
+          images: |
+            ghcr.io/${{ github.repository }}
+            ghcr.io/${{ github.repository }}-with-proxy
           labels: |
             org.opencontainers.image.title=copilot-metrics-viewer
             org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
@@ -103,46 +102,3 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           push: true
-
-  push_proxy_to_ghcr:
-    runs-on: ubuntu-latest
-    needs: version_update
-    steps:
-      - name: Checkout GitHub Action
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.release.tag_name }}
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-          
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}-with-proxy
-          labels: |
-            org.opencontainers.image.title=copilot-metrics-viewer-with-proxy
-            org.opencontainers.image.description=Metrics viewer for GitHub Copilot usage
-            org.opencontainers.image.source=${{ github.repository }}
-          tags: |
-            type=raw,value=latest,enable=true
-            type=sha
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push api
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: api.Dockerfile
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          push: true
-