frontend.yml 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. name: frontend
  2. on:
  3. push:
  4. branches:
  5. - master
  6. pull_request:
  7. # Cancel in progress workflows on pull_requests.
  8. # https://docs.github.com/en/actions/using-jobs/using-concurrency#example-using-a-fallback-value
  9. concurrency:
  10. group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
  11. cancel-in-progress: true
  12. # hack for https://github.com/actions/cache/issues/810#issuecomment-1222550359
  13. env:
  14. SEGMENT_DOWNLOAD_TIMEOUT_MINS: 3
  15. jobs:
  16. files-changed:
  17. name: detect what files changed
  18. runs-on: ubuntu-20.04
  19. timeout-minutes: 3
  20. # Map a step output to a job output
  21. outputs:
  22. eslint_config: ${{ steps.changes.outputs.eslint_config }}
  23. frontend: ${{ steps.changes.outputs.frontend_all }}
  24. frontend_components_modified_lintable: ${{ steps.changes.outputs.frontend_components_modified_lintable }}
  25. frontend_components_modified_lintable_files: ${{ steps.changes.outputs.frontend_components_modified_lintable_files }}
  26. frontend_modified_lintable_files: ${{ steps.changes.outputs.frontend_modified_lintable_files }}
  27. yarn_lockfile: ${{ steps.changes.outputs.yarn_lockfile }}
  28. steps:
  29. - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
  30. - name: Check for frontend file changes
  31. uses: getsentry/paths-filter@4512585405083f25c027a35db413c2b3b9006d50 # v2.11.1
  32. id: changes
  33. with:
  34. token: ${{ github.token }}
  35. filters: .github/file-filters.yml
  36. list-files: shell
  37. typescript-and-lint:
  38. if: needs.files-changed.outputs.frontend == 'true'
  39. needs: files-changed
  40. name: typescript and lint
  41. runs-on: ubuntu-20.04
  42. steps:
  43. - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
  44. - name: Internal github app token
  45. id: token
  46. uses: getsentry/action-github-app-token@97c9e23528286821f97fba885c1b1123284b29cc # v2.0.0
  47. continue-on-error: true
  48. with:
  49. app_id: ${{ vars.SENTRY_INTERNAL_APP_ID }}
  50. private_key: ${{ secrets.SENTRY_INTERNAL_APP_PRIVATE_KEY }}
  51. - uses: getsentry/action-setup-volta@54775a59c41065f54ecc76d1dd5f2cdc7a1550cb # v1.1.0
  52. - name: Install dependencies
  53. id: dependencies
  54. run: yarn install --frozen-lockfile
  55. # Setup custom tsc matcher, see https://github.com/actions/setup-node/issues/97
  56. - name: setup matchers
  57. run: |
  58. echo "::remove-matcher owner=masters::"
  59. echo "::add-matcher::.github/tsc.json"
  60. echo "::add-matcher::.github/eslint-stylish.json"
  61. - name: eslint logic
  62. id: eslint
  63. if: (github.ref == 'refs/heads/master' || needs.files-changed.outputs.eslint_config == 'true' || needs.files-changed.outputs.yarn_lockfile == 'true')
  64. run: echo "all-files=true" >> "$GITHUB_OUTPUT"
  65. # Lint entire frontend if:
  66. # - this is on main branch
  67. # - eslint configuration in repo has changed
  68. # - yarn lockfile has changed (i.e. we bump our eslint config)
  69. - name: eslint
  70. if: steps.eslint.outputs.all-files == 'true'
  71. env:
  72. # Run relax config on main branch (and stricter config for changed files)
  73. SENTRY_ESLINT_RELAXED: 1
  74. run: |
  75. yarn lint
  76. yarn lint:css
  77. # Otherwise... only lint modified files
  78. # Note `eslint --fix` will not fail when it auto fixes files
  79. - name: eslint (changed files only)
  80. if: steps.eslint.outputs.all-files != 'true'
  81. run: |
  82. yarn eslint --fix ${{ needs.files-changed.outputs.frontend_modified_lintable_files }}
  83. - name: stylelint (changed files only)
  84. if: github.ref != 'refs/heads/master' && needs.files-changed.outputs.frontend_components_modified_lintable == 'true'
  85. run: |
  86. yarn stylelint ${{ needs.files-changed.outputs.frontend_components_modified_lintable_files }}
  87. # Check (and error) for dirty working tree for forks
  88. # Reason being we need a different token to auto commit changes and
  89. # forks do not have access to said token
  90. - name: Check for dirty git working tree (forks)
  91. if: steps.token.outcome != 'success' && github.ref != 'refs/heads/master'
  92. run: |
  93. git diff --quiet || (echo '::error ::lint produced file changes, run linter locally and try again' && exit 1)
  94. # If working tree is dirty, commit and update if we have a token
  95. - name: Commit any eslint fixed files
  96. if: steps.token.outcome == 'success' && github.ref != 'refs/heads/master'
  97. uses: getsentry/action-github-commit@bec0adb2924f8c19a9f84c18c83d375caf02ca38 # main
  98. with:
  99. github-token: ${{ steps.token.outputs.token }}
  100. message: ':hammer_and_wrench: apply eslint style fixes'
  101. - name: tsc
  102. id: tsc
  103. if: steps.dependencies.outcome == 'success'
  104. run: yarn tsc -p config/tsconfig.ci.json
  105. frontend-jest-tests:
  106. if: needs.files-changed.outputs.frontend == 'true'
  107. needs: files-changed
  108. name: Jest
  109. # If you change the runs-on image, you must also change the runner in jest-balance.yml
  110. # so that the balancer runs in the same environment as the tests.
  111. runs-on: ubuntu-20.04
  112. timeout-minutes: 30
  113. strategy:
  114. # This helps not having to run multiple jobs because one fails, thus, reducing resource usage
  115. # and reducing the risk that one of many runs would turn red again (read: intermittent tests)
  116. fail-fast: false
  117. matrix:
  118. # XXX: When updating this, make sure you also update CI_NODE_TOTAL.
  119. instance: [0, 1, 2, 3]
  120. env:
  121. VISUAL_HTML_ENABLE: 1
  122. steps:
  123. - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
  124. name: Checkout sentry
  125. with:
  126. # Avoid codecov error message related to SHA resolution:
  127. # https://github.com/codecov/codecov-bash/blob/7100762afbc822b91806a6574658129fe0d23a7d/codecov#L891
  128. fetch-depth: '2'
  129. - uses: getsentry/action-setup-volta@54775a59c41065f54ecc76d1dd5f2cdc7a1550cb # v1.1.0
  130. - name: node_modules cache
  131. uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
  132. id: nodemodulescache
  133. with:
  134. path: node_modules
  135. key: ${{ runner.os }}-node-modules-${{ hashFiles('yarn.lock', 'api-docs/yarn.lock') }}
  136. - name: Install Javascript Dependencies
  137. if: steps.nodemodulescache.outputs.cache-hit != 'true'
  138. run: yarn install --frozen-lockfile
  139. - name: Build CSS
  140. run: NODE_ENV=production yarn build-css
  141. - name: jest
  142. env:
  143. GITHUB_PR_SHA: ${{ github.event.pull_request.head.sha || github.sha }}
  144. GITHUB_PR_REF: ${{ github.event.pull_request.head.ref || github.ref }}
  145. # XXX: CI_NODE_TOTAL must be hardcoded to the length of strategy.matrix.instance.
  146. # Otherwise, if there are other things in the matrix, using strategy.job-total
  147. # wouldn't be correct. Also, if this increases, make sure to also increase
  148. # `flags.frontend.after_n_builds` in `codecov.yml`.
  149. CI_NODE_TOTAL: 4
  150. CI_NODE_INDEX: ${{ matrix.instance }}
  151. # Disable testing-library from printing out any of of the DOM to
  152. # stdout. No one actually looks through this in CI, they're just
  153. # going to run it locally.
  154. #
  155. # This quiets up the logs quite a bit.
  156. DEBUG_PRINT_LIMIT: 0
  157. run: |
  158. JEST_TESTS=$(yarn -s jest --listTests --json) yarn test-ci --forceExit
  159. - name: Save HTML artifacts
  160. uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
  161. with:
  162. retention-days: 14
  163. name: jest-html
  164. path: .artifacts/visual-snapshots/jest
  165. - name: Create Images from HTML
  166. uses: getsentry/action-html-to-image@dc153dae538e6e1138f77156d8e62e3b2b897f41 # main
  167. with:
  168. base-path: .artifacts/visual-snapshots/jest
  169. css-path: src/sentry/static/sentry/dist/entrypoints/sentry.css
  170. # We only upload coverage data for FE changes since it conflicts with
  171. # codecov's carry forward functionality.
  172. # Upload coverage data even if running the tests step fails since
  173. # it reduces large coverage fluctuations.
  174. - name: Handle artifacts
  175. uses: ./.github/actions/artifacts
  176. if: ${{ always() && needs.files-changed.outputs.frontend_all == 'true' }}
  177. with:
  178. files: .artifacts/coverage/*
  179. type: frontend
  180. token: ${{ secrets.CODECOV_TOKEN }}
  181. # This check runs once all dependant jobs have passed
  182. # It symbolizes that all required Frontend checks have succesfully passed (Or skipped)
  183. # This check is the only required Github check
  184. frontend-required-check:
  185. needs: [files-changed, frontend-jest-tests, typescript-and-lint]
  186. name: Frontend
  187. # This is necessary since a failed/skipped dependent job would cause this job to be skipped
  188. if: always()
  189. runs-on: ubuntu-20.04
  190. steps:
  191. # If any jobs we depend on fail, we will fail since this is a required check
  192. # NOTE: A timeout is considered a failure
  193. - name: Check for failures
  194. if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')
  195. run: |
  196. echo "One of the dependent jobs have failed. You may need to re-run it." && exit 1