Merge pull request #21 from github/improve/overview-pages-workflow

Refresh billing preview views and Pages workflow

Author: asizikov

.github/workflows/deploy.yml

@@ -0,0 +1,104 @@
+name: CI / Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: github-pages-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  CI: true
+  NODE_VERSION: '20'
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  build:
+    name: Validate and build site
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+
+      - name: Set up Node.js
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint source
+        run: npm run lint
+
+      - name: Run test suite
+        run: npm run test
+
+      - name: Configure GitHub Pages
+        run: npm run build
+
+  pages-artifact:
+    name: Prepare Pages artifact
+    if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 15
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+
+      - name: Set up Node.js
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5
+
+      - name: Build production bundle
+        run: npm run build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
+        with:
+          path: dist
+
+  deploy:
+    name: Deploy site
+    if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: pages-artifact
+    timeout-minutes: 10
+    permissions:
+      pages: write
+      id-token: write
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

.github/workflows/pages.yml

@@ -24,3 +24,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.tmp-heap

.gitignore

@@ -826,6 +826,46 @@
   gap: 20px;
 }
 
+.cost-centers-view__tableControls {
+  display: flex;
+  gap: 0;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #d1d9e0;
+}
+
+.cost-centers-view__tableButton {
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  border-radius: 0;
+  background: transparent;
+  color: #636c76;
+  padding: 8px 16px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: color 0.1s ease, border-color 0.1s ease;
+}
+
+.cost-centers-view__tableButton:hover {
+  color: #1f2328;
+  background: transparent;
+}
+
+.cost-centers-view__tableButton:focus-visible {
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+  border-radius: 3px;
+}
+
+.cost-centers-view__tableButton--active {
+  color: #1f2328;
+  font-weight: 600;
+  border-bottom-color: #fd8c73;
+  background: transparent;
+}
+
 .cost-centers-view__tableWrap {
   overflow: hidden;
 }
@@ -841,6 +881,12 @@
   background: #f6f8fa;
 }
 
+.cost-centers-view__tableHint {
+  padding: 12px 16px 0;
+  font-size: 13px;
+  color: #636c76;
+}
+
 .cost-centers-view__num {
   text-align: right;
   font-variant-numeric: tabular-nums;