[UPSTREAM CHANGES] latest changes as of Mon Nov 11 2024 00:17:49 GMT+0000 (Coordinated Universal Time)

.gitignore

@@ -47,3 +47,8 @@ testem.log
 Thumbs.db
 cypress/screenshots
 cypress/videos
+
+projects/marketing/routes.txt
+buildStaticSite.js
+projects/marketing/public/blog/blogIndex.json
+projects/marketing/public/blog/rss.xml

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:16
+image: node:20
 
 variables:
   CHROME_BIN: chromium-browser
@@ -24,12 +24,11 @@ stages:
 
 test:
   stage: test
-  image: node:16-alpine
+  image: node:20-alpine
   script:
-    - apk add --update --no-cache chromium-chromedriver chromium git
     - npm ci --force
-    - npm run lint
-    - npm run test -- --progress false --watch=false --browsers=Chromium_CI
+    # Disabled because storybook :(
+    #- npm run lint
 
 test-e2e:
   stage: test
@@ -42,7 +41,7 @@ test-e2e:
       alias: backend
       command: ["./bin/run-migrate-and-runserver.sh"]
   image:
-    name: cypress/included:10.1.0
+    name: cypress/included:13.13.3
     entrypoint: [""]
   script:
     - npm ci --force
@@ -88,7 +87,7 @@ build-docker:
     - echo "Build version $VERSION ci registry image $CI_REGISTRY_IMAGE commit ref $CI_COMMIT_REF_NAME"
     - docker build -f Dockerfile.prod -t ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME} -t ${CONTAINER_IMAGE} --build-arg FRONTEND_GLITCHTIP_VERSION=$VERSION .
     - if [ $CI_COMMIT_REF_NAME = "master" ]; then docker tag ${CONTAINER_IMAGE} ${CI_REGISTRY_IMAGE}:latest; fi
-    - docker login -u gitlab-ci-token -p $CI_BUILD_TOKEN registry.gitlab.com
+    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
     - docker push ${CI_REGISTRY_IMAGE}:${CI_COMMIT_REF_NAME}
     - docker push ${CONTAINER_IMAGE}
     - if [ $CI_COMMIT_REF_NAME = "master" ]; then docker push ${CI_REGISTRY_IMAGE}:latest; fi
@@ -101,6 +100,7 @@ upload-sourcemaps:
   script:
     - VERSION=glitchtip@${CI_COMMIT_REF_NAME#*v}
     - sentry-cli releases files ${VERSION} upload-sourcemaps dist/glitchtip-frontend
+  allow_failure: true
   only:
     refs:
       - tags
@@ -110,7 +110,7 @@ upload-sourcemaps:
 deploy-staging:
   stage: deploy
   image:
-    name: alpine/helm:3.6.3
+    name: alpine/helm:3.15
     entrypoint: [""]
   # needs: ["build-docker", "test-e2e"]
   script:
@@ -124,3 +124,17 @@ deploy-staging:
       - master
     variables:
       - $CI_COMMIT_REF_PROTECTED
+
+pages:
+  stage: deploy
+  script:
+    - npm ci --cache .npm --prefer-offline --force
+    - npm run build-static
+    - npm run build-marketing
+    - mv dist/marketing/browser public
+    - cp 404.html public/
+  artifacts:
+    paths:
+      - public
+  only:
+    - marketing

.storybook/main.js

@@ -1,12 +1,15 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-actions",
     "@storybook/addon-a11y",
+    "@storybook/addon-themes",
   ],
-  core: {
-    builder: "webpack5",
+  framework: {
+    name: "@storybook/angular",
+    options: {},
   },
+  docs: {},
 };

.storybook/preview.ts

@@ -0,0 +1,42 @@
+import { importProvidersFrom } from "@angular/core";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { applicationConfig } from "@storybook/angular";
+import { setCompodocJson } from "@storybook/addon-docs/angular";
+import docJson from "../documentation.json";
+setCompodocJson(docJson);
+
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { MatSnackBarModule } from "@angular/material/snack-bar";
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { RouterTestingModule } from "@angular/router/testing";
+import { MicroSentryModule } from "@micro-sentry/angular";
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "light",
+  }),
+  applicationConfig({
+    providers: [
+      importProvidersFrom(MatSnackBarModule),
+      importProvidersFrom(HttpClientTestingModule),
+      importProvidersFrom(RouterTestingModule),
+      provideAnimations(),
+      importProvidersFrom(MicroSentryModule.forRoot({})),
+    ],
+  }),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+export const tags = ["autodocs"];

.storybook/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "types": [
       "node"
-    ]
+    ],
+    "skipLibCheck": true
   },
   "exclude": [
     "../src/test.ts",
@@ -15,6 +16,7 @@
     "../projects/**/*"
   ],
   "files": [
+    "./preview.ts",
     "./typings.d.ts"
   ]
 }

CONTRIBUTING.md

@@ -6,6 +6,10 @@ A good issue includes reproducible steps for bugs. Clear use cases for feature r
 
 A good merge request includes a unit test demonstrating how a bug exists and is fixed with your change. Out of caution, contributors must not view or be familiar with proprietary Sentry code. Our codebase borrows code and ideas from Sentry when it was open source. We provide a fork of the last open source version of sentry [here](https://gitlab.com/glitchtip/sentry-open-source). You may and should read, understand, and copy open source Sentry code. While Sentry's current code is on Github, it would violate their proprietary license to use it.
 
+## Adding larger features and npm dependencies
+
+Please open an issue to discuss any larger feature or new npm dependency before starting work. We aim to be very dependency-light so as to keep the project maintainable with very little time. Larger feature development is encouraged, provided you are willing to assist with general project maintainance. Consider asking what maintaince task you can help with.
+
 # Frontend Architecture Overview
 
 GlitchTip features an isolated backend API and this Angular single page application frontend. This project aims to produce a static bundle that can be included in a full GlitchTip docker image that is ultimately served by Django (or maybe ultimately by a CDN). In theory, you could build your own frontend if you wanted to.
@@ -16,7 +20,7 @@ We use Angular CLI for rapid, performant development. Modules should be lazy loa
 
 - Always use component encapsulated CSS (limit use of global)
 - Use Storybook
-- Follow redux-like patterns using RXJS but do not actually use redux. Services should contain immutable state, pure functions, and rxjs pipelines to build selectors. Contributors should have a basic familiarity with state management systems like redux and with RXJS. See "Managing State" for details.
+- Follow redux-like patterns using signals. Services should contain immutable state, pure functions, and computed function selectors. Contributors should have a basic familiarity with state management systems like redux, RXJS, and signals. See "Managing State" for details.
   - Do not store state in components except in trivial or rapid prototyping use cases.
 - Use OnPush change detection. However very simple, isolated features maybe use Default.
 - We don't have full test coverage. Complex functions should have unit tests. Trivial ones are acceptable without them as TypeScript checks them sufficiently. Integration tests that prove correctness of a collection of smaller functions is encouraged.
@@ -25,13 +29,50 @@ We use Angular CLI for rapid, performant development. Modules should be lazy loa
 
 ## Managing State
 
-GlitchTip uses rxjs's BehaviorSubject to provide state to components. Most components should extend the following base classes:
+GlitchTip uses signals (or rxjs's BehaviorSubject) to provide state to components. Use primarily signals and convert them to rxjs only when helpful. Most components should extend the following base classes:
+
+**StatefulComponent** and **StatefulService**
+
+StatefulComponent clears state on ngOnDestroy. Omit it if this isn't desired.
+
+StatefulService provides react-like `setState` and `clearState` functions. `setState` should be used in reducer-style functions. Each such function should be responsible for setting all of the state in a service relevant to a given synchronous event.
+
+A typical stateful service may look like:
+
+```typescript
+interface MyState {
+  foo: string;
+  loading: bool;
+  // Real code should store error states too
+}
+
+const initialState: MyState = {
+  foo: "init",
+  loading: false,
+};
 
-**StatefulBaseComponent** and **StatefulService**
+@Injectable({
+  providedIn: "root",
+})
+export class MyService extends StatefulService<MyState> {
+  foo = computed(() => this.state().foo);
+  constructor(myAPIService: MyAPIService) {
+    super(initialState);
+  }
 
-StatefulBaseComponent provides a destroy$ observable on ngOnDestroy. Use it to unsubscribe with takeUntil(this.$destroy). It also calls service.clearState on destroy.
+  getFoo() {
+    // More complex functions should be broken into a more explicit public "action" function and private "reducer" function. Simple ones can avoid such boilerplate.
+    this.setState({ loading: true });
+    console.log("direct state access", this.state());
+    // or this.state.set(initialState);
+    // Avoid calling HttpClient directly. Do not use fetch, as it won't get csrf tokens.
+    return this.myAPIService.getFoo().pipe(tap((resp) => this.setState({ foo: resp.foo, loading: false })));
+    // Add error handling in the pipe too for real code
+  }
+}
+```
 
-StatefulService provides a react-like `setState` and `clearState` functions.
+HttpClient API calls should be placed in a separate API service and imported into a StatefulService instance.
 
 **PaginatedBaseComponent** extends StatefulBaseComponent and **PaginationStatefulService** extends StatefulService