docs(stackblitz): provide stackblitz button in live-previewer #3797
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Build and Test | |
| on: | |
| workflow_call: | |
| secrets: | |
| SIEMENS_NPM_TOKEN: | |
| required: true | |
| SIEMENS_NPM_USER: | |
| required: true | |
| MAPTILER_KEY: | |
| required: true | |
| pull_request: | |
| # Stops the workflow run if the PR is updated | |
| # https://stackoverflow.com/a/72408109 | |
| concurrency: | |
| group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} | |
| cancel-in-progress: true | |
| env: | |
| MAPTILER_KEY: ${{ secrets.MAPTILER_KEY }} | |
| MAPTILER_URL: https://api.maptiler.com/maps/voyager/style.json?key=${{ secrets.MAPTILER_KEY }} | |
| jobs: | |
| build: | |
| runs-on: ubuntu-24.04 | |
| steps: | |
| - uses: actions/checkout@v5 | |
| with: | |
| fetch-depth: 0 # We need this for commit-lint | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| cache: 'npm' | |
| - run: npm config set //code.siemens.com/api/v4/packages/npm/:_authToken $SIEMENS_NPM_TOKEN | |
| env: | |
| SIEMENS_NPM_TOKEN: ${{ secrets.SIEMENS_NPM_TOKEN }} | |
| - run: npm ci --prefer-offline --no-audit --include=optional | |
| - run: npm run lint:commit | |
| - run: npm run build:all | |
| - run: npm run prepare-brand | |
| - run: npm run build:all:update-translatable-keys # Output is needed in dist for providing default translations | |
| - run: git diff --exit-code "projects/**/*-translatable-keys.interface.ts" | |
| - run: npm run build:examples -- --define="maptilerKey='$MAPTILER_KEY'" --define="maptilerUrl='$MAPTILER_URL'" | |
| - run: npm run dashboards-demo:build:demo -- --progress=false | |
| - run: npm run dashboards-demo:build:webcomponents -- --progress=false | |
| - run: npm run dashboards-demo:build:mfe -- --progress=false | |
| - uses: actions/upload-artifact@v5 | |
| with: | |
| name: dist | |
| path: dist | |
| test: | |
| runs-on: ubuntu-24.04 | |
| # We use playwright browser to run karma tests | |
| container: mcr.microsoft.com/playwright:v1.56.1-noble | |
| env: | |
| # See: https://github.com/microsoft/playwright/issues/27620 | |
| HOME: /root | |
| needs: | |
| - build | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| cache: 'npm' | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: dist | |
| path: dist | |
| - run: npm ci --prefer-offline --no-audit | |
| - run: npm run lint:format | |
| - run: npm run lint:scss | |
| - run: npm run lint:ng | |
| - run: npm run lint:playwright:eslint | |
| - run: npm run translate:test -- --watch=false --progress=false --code-coverage | |
| - run: npm run lib:test -- --watch=false --progress=false --code-coverage | |
| - run: npm run schematics:test | |
| - run: npm run charts:test -- --watch=false --progress=false | |
| - run: npm run dashboards:test -- --watch=false --progress=false | |
| - run: npm run maps:test -- --watch=false --progress=false | |
| - uses: actions/upload-artifact@v5 | |
| with: | |
| name: coverage-reports | |
| path: dist/coverage | |
| retention-days: 30 | |
| coverage: | |
| if: ${{ !cancelled() }} | |
| runs-on: ubuntu-24.04 | |
| permissions: | |
| pull-requests: write | |
| contents: read | |
| needs: | |
| - test | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - name: Download coverage reports | |
| uses: actions/download-artifact@v6 | |
| with: | |
| name: coverage-reports | |
| path: dist/coverage | |
| - name: Generate coverage summary | |
| uses: irongut/[email protected] | |
| with: | |
| filename: 'dist/coverage/*/cobertura-coverage.xml' | |
| badge: true | |
| format: markdown | |
| output: both | |
| hide_branch_rate: true | |
| hide_complexity: true | |
| indicators: false | |
| file_coverage_mode: changes | |
| - name: Extract coverage badge for PR comment | |
| if: github.event_name == 'pull_request' | |
| run: | | |
| # Extract only the badge line and total coverage line | |
| head -n 2 code-coverage-results.md > coverage-badge.md | |
| - name: Add coverage badge to PR comment | |
| uses: marocchino/sticky-pull-request-comment@v2 | |
| if: github.event_name == 'pull_request' | |
| with: | |
| recreate: true | |
| header: coverage | |
| path: coverage-badge.md | |
| - name: Generate coverage summary JSON | |
| run: | | |
| # Extract coverage percentage from markdown and create JSON badge | |
| TOTAL_COVERAGE=$(grep -E "(Summary|Total)" code-coverage-results.md | grep -oE '[0-9]+(\.[0-9]+)?%' | head -1 | sed 's/%//') | |
| echo "Extracted coverage: $TOTAL_COVERAGE%" | |
| echo "{\"schemaVersion\": 1, \"label\": \"coverage\", \"message\": \"$TOTAL_COVERAGE%\", \"color\": \"brightgreen\"}" > coverage-summary.json | |
| - name: Upload coverage summary | |
| uses: actions/upload-artifact@v5 | |
| with: | |
| name: coverage-summary | |
| path: coverage-summary.json | |
| retention-days: 1 | |
| aot: | |
| runs-on: ubuntu-24.04 | |
| needs: | |
| - build | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| cache: 'npm' | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: dist | |
| path: dist | |
| - run: npm config set //code.siemens.com/api/v4/packages/npm/:_authToken $SIEMENS_NPM_TOKEN | |
| env: | |
| SIEMENS_NPM_TOKEN: ${{ secrets.SIEMENS_NPM_TOKEN }} | |
| - run: npm ci --prefer-offline --no-audit --include=optional | |
| - run: npm run prepare-brand | |
| - run: npm run build:examples:aot -- --define="maptilerKey='$MAPTILER_KEY'" --define="maptilerUrl='$MAPTILER_URL'" | |
| - run: npm run api-goldens:test | |
| e2e: | |
| runs-on: ubuntu-24.04 | |
| container: mcr.microsoft.com/playwright:v1.56.1-noble | |
| needs: | |
| - build | |
| strategy: | |
| fail-fast: false | |
| matrix: | |
| shardIndex: [1, 2] | |
| shardTotal: [2] | |
| steps: | |
| # As we are in another container, we need to install LFS manually. | |
| # See: https://github.com/orgs/community/discussions/160433 | |
| - name: Install LFS | |
| run: | | |
| git config --global --add safe.directory "$GITHUB_WORKSPACE" | |
| curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | bash | |
| apt install git-lfs | |
| - uses: actions/checkout@v5 | |
| with: | |
| lfs: true | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| cache: 'npm' | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: dist | |
| path: dist | |
| # Not injecting the token will exclude the brand packages, but this is fine for e2e tests. | |
| - run: npm ci --prefer-offline --no-audit --include=optional | |
| - run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} | |
| - uses: actions/upload-artifact@v5 | |
| if: ${{ !cancelled() }} | |
| with: | |
| name: blob-report-${{ matrix.shardIndex }} | |
| path: blob-report | |
| retention-days: 1 | |
| e2e-merge-reports: | |
| if: ${{ !cancelled() }} | |
| needs: [e2e] | |
| runs-on: ubuntu-latest | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| path: all-blob-reports | |
| pattern: blob-report-* | |
| merge-multiple: true | |
| - run: npx playwright merge-reports --reporter html ./all-blob-reports | |
| - uses: actions/upload-artifact@v5 | |
| with: | |
| name: html-report--attempt-${{ github.run_attempt }} | |
| path: playwright-report | |
| retention-days: 2 | |
| documentation: | |
| runs-on: ubuntu-24.04 | |
| needs: | |
| - build | |
| - coverage | |
| - test | |
| steps: | |
| - uses: actions/checkout@v5 | |
| - uses: astral-sh/setup-uv@v7 | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: dist | |
| path: dist | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: coverage-summary | |
| path: . | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: coverage-reports | |
| path: dist/coverage | |
| - uses: actions/setup-node@v6 | |
| with: | |
| node-version: lts/krypton | |
| cache: 'npm' | |
| - run: npm config set //code.siemens.com/api/v4/packages/npm/:_authToken $SIEMENS_NPM_TOKEN | |
| env: | |
| SIEMENS_NPM_TOKEN: ${{ secrets.SIEMENS_NPM_TOKEN }} | |
| - run: npm ci --prefer-offline --no-audit --include=optional | |
| - run: cp dist/element-examples/favicon.png docs/_src/favicon.png | |
| - run: uv sync | |
| env: | |
| UV_INDEX_CODE_DOCS_THEME_USERNAME: ${{ secrets.SIEMENS_NPM_USER }} | |
| UV_INDEX_CODE_DOCS_THEME_PASSWORD: ${{ secrets.SIEMENS_NPM_TOKEN }} | |
| - run: npm run docs:build:generate | |
| env: | |
| EXAMPLES_BASE: /element-examples | |
| if: ${{ github.ref == 'refs/heads/main' }} | |
| - run: npm run docs:build:api | |
| env: | |
| EXAMPLES_BASE: /element-examples | |
| if: ${{ github.ref != 'refs/heads/main' }} | |
| - run: mv dist/element-examples/ dist/design/ | |
| - run: mv dist/dashboards-demo/ dist/design/ | |
| - run: mv coverage-summary.json dist/design/ | |
| - run: mv dist/coverage/ dist/design/ | |
| - uses: actions/upload-artifact@v5 | |
| with: | |
| name: pages | |
| path: dist/design | |
| preview: | |
| if: ${{ !cancelled() && github.event_name == 'pull_request' }} # This must be skipped for releases and documentation builds | |
| runs-on: ubuntu-24.04 | |
| permissions: | |
| id-token: write | |
| contents: read | |
| pull-requests: write | |
| env: | |
| BUCKET_NAME: simpl-element-preview | |
| needs: | |
| - e2e-merge-reports | |
| - documentation | |
| - coverage | |
| steps: | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: pages | |
| path: pages | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: html-report--attempt-${{ github.run_attempt }} | |
| path: playwright-report | |
| - uses: actions/download-artifact@v6 | |
| with: | |
| name: coverage-reports | |
| path: coverage-reports | |
| - uses: aws-actions/[email protected] | |
| with: | |
| role-to-assume: arn:aws:iam::974483672234:role/simpl-element-preview | |
| role-session-name: element-preview | |
| aws-region: eu-west-1 | |
| - run: | | |
| aws s3 cp --quiet --no-progress --recursive ./pages s3://${{ env.BUCKET_NAME }}/pr-${{ github.event.pull_request.number }}/pages | |
| aws s3 cp --quiet --no-progress --recursive ./playwright-report s3://${{ env.BUCKET_NAME }}/pr-${{ github.event.pull_request.number }}/playwright-report | |
| - uses: marocchino/sticky-pull-request-comment@v2 | |
| with: | |
| message: | | |
| [Documentation](https://simpl-element-preview.s3-eu-west-1.amazonaws.com/pr-${{ github.event.pull_request.number }}/pages/index.html). | |
| [Examples](https://simpl-element-preview.s3-eu-west-1.amazonaws.com/pr-${{ github.event.pull_request.number }}/pages/element-examples/index.html). | |
| [Playwright report](https://simpl-element-preview.s3-eu-west-1.amazonaws.com/pr-${{ github.event.pull_request.number }}/playwright-report/index.html). | |
| **Coverage Reports:** | |
| - [element-ng](https://simpl-element-preview.s3-eu-west-1.amazonaws.com/pr-${{ github.event.pull_request.number }}/pages/coverage/element-ng/index.html) | |
| - [element-translate-ng](https://simpl-element-preview.s3-eu-west-1.amazonaws.com/pr-${{ github.event.pull_request.number }}/pages/coverage/element-translate-ng/index.html) |