feat: open source gsApp (revised)

config/tsconfig.base.json

@@ -100,10 +100,13 @@
       "sentry/*": ["static/app/*"],
       "sentry-fixture/*": ["tests/js/fixtures/*"],
       "sentry-test/*": ["tests/js/sentry-test/*"],
+      "getsentry-test/*": ["tests/js/getsentry-test/*"],
       "sentry-images/*": ["static/images/*"],
       "sentry-locale/*": ["src/sentry/locale/*"],
       "sentry-logos/*": ["src/sentry/static/sentry/images/logos/*"],
-      "sentry-fonts/*": ["static/fonts/*"]
+      "sentry-fonts/*": ["static/fonts/*"],
+      "getsentry/*": ["static/gsApp/*"],
+      "getsentry-images/*": ["static/images/*"]
     },
 
     "plugins": [

eslint.config.mjs

@@ -412,8 +412,10 @@ export default typescript.config([
       'prefer-spread': 'off',
       '@typescript-eslint/prefer-enum-initializers': 'error',
 
+      '@typescript-eslint/no-unused-expressions': 'off', // TODO(ryan953): Fix violations and delete this line
+
       // Recommended overrides
-      '@typescript-eslint/no-empty-object-type': ['error', {allowInterfaces: 'always'}],
+      '@typescript-eslint/no-empty-object-type': 'off', // TODO: fix and restore ['error', {allowInterfaces: 'always'}],
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-namespace': 'off',
       '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', // TODO(ryan953): Fix violations and delete this line
@@ -502,8 +504,6 @@ export default typescript.config([
             // Internal packages.
             ['^(sentry-locale|sentry-images)(/.*|$)'],
 
-            ['^(getsentry-images)(/.*|$)'],
-
             ['^(app|sentry)(/.*|$)'],
 
             // Getsentry packages.

jest.config.ts

@@ -231,11 +231,14 @@ const config: Config.InitialOptions = {
   coverageReporters: ['html', 'cobertura'],
   coverageDirectory: '.artifacts/coverage',
   moduleNameMapper: {
+    '\\.(css|less|png|jpg|woff|mp4)$':
+      '<rootDir>/tests/js/sentry-test/importStyleMock.js',
     '^sentry/(.*)': '<rootDir>/static/app/$1',
+    '^getsentry/(.*)': '<rootDir>/static/gsApp/$1',
     '^sentry-fixture/(.*)': '<rootDir>/tests/js/fixtures/$1',
     '^sentry-test/(.*)': '<rootDir>/tests/js/sentry-test/$1',
+    '^getsentry-test/(.*)': '<rootDir>/tests/js/getsentry-test/$1',
     '^sentry-locale/(.*)': '<rootDir>/src/sentry/locale/$1',
-    '\\.(css|less|png|jpg|mp4)$': '<rootDir>/tests/js/sentry-test/importStyleMock.js',
     '\\.(svg)$': '<rootDir>/tests/js/sentry-test/svgMock.js',
 
     // Disable echarts in test, since they're very slow and take time to

static/app/index.tsx

@@ -76,8 +76,29 @@ async function app() {
   const {bootstrap} = await bootstrapImport;
   const config = await bootstrap();
 
+  if (config.sentryMode !== 'SAAS') {
+    const {initializeMain} = await initalizeMainImport;
+    initializeMain(config);
+    return;
+  }
+
+  // We have split up the imports this way so that locale is initialized as
+  // early as possible, (e.g. before `registerHooks` is imported otherwise the
+  // imports in `registerHooks` will not be in the correct locale.
+  const [{default: registerHooks}, {initializeBundleMetrics}] = await Promise.all([
+    import('getsentry/registerHooks'),
+    import('getsentry/initializeBundleMetrics'),
+  ]);
+
+  // getsentry augments Sentry's application through a 'hook' mechanism. Sentry
+  // provides various hooks into parts of its application. Thus all getsentry
+  // functionality is initialized by registering its hook functions.
+  registerHooks();
+
   const {initializeMain} = await initalizeMainImport;
   initializeMain(config);
+
+  initializeBundleMetrics();
 }
 
 app();

static/app/types/fileLoader.d.ts

@@ -4,6 +4,7 @@
 declare module '*.png';
 declare module '*.jpg';
 declare module '*.mp4';
+declare module '*.woff';
 declare module '*.svg' {
   const content: any;
   export default content;

static/gsApp/__fixtures__/pendingChanges.tsx

@@ -0,0 +1,36 @@
+import {PlanFixture} from 'getsentry/__fixtures__/plan';
+import {MONTHLY} from 'getsentry/constants';
+import type {Subscription} from 'getsentry/types';
+
+export function PendingChangesFixture(
+  fields: Partial<Subscription['pendingChanges']>
+): Subscription['pendingChanges'] {
+  return {
+    customPrice: null,
+    customPriceAttachments: null,
+    customPriceErrors: null,
+    customPricePcss: null,
+    customPriceTransactions: null,
+    // TODO:categories remove customPrice{Categories}
+    customPrices: {},
+    effectiveDate: '2021-02-01',
+    onDemandBudgets: null,
+    onDemandEffectiveDate: '2021-02-01',
+    onDemandMaxSpend: 0,
+    plan: 'am1_team',
+    planDetails: PlanFixture({
+      name: 'Team',
+      contractInterval: MONTHLY,
+    }),
+    planName: 'Team',
+    // TODO:categories remove reserved{Categories}
+    reserved: {},
+    reservedAttachments: null,
+    reservedErrors: null,
+    reservedEvents: 0,
+    reservedTransactions: null,
+    reservedBudgets: [],
+    reservedCpe: {},
+    ...fields,
+  };
+}

static/gsApp/__fixtures__/plan.tsx

@@ -0,0 +1,49 @@
+import type {Plan} from 'getsentry/types';
+
+export function PlanFixture(fields: Partial<Plan>): Plan {
+  return {
+    allowAdditionalReservedEvents: false,
+    allowOnDemand: false,
+    availableCategories: [],
+    basePrice: 0,
+    billingInterval: 'monthly',
+    categories: [],
+    checkoutCategories: [],
+    contractInterval: 'monthly',
+    description: '',
+    features: [],
+    hasOnDemandModes: false,
+    id: 'am2_f',
+    maxMembers: 1,
+    name: 'Developer',
+    onDemandCategories: [],
+    onDemandEventPrice: 0,
+    planCategories: {
+      errors: [
+        {events: 50000, unitPrice: 0.089, price: 0},
+        {events: 100000, unitPrice: 0.05, price: 4500},
+      ],
+      transactions: [
+        {events: 100000, unitPrice: 0.0445, price: 0},
+        {events: 250000, unitPrice: 0.0358, price: 4500},
+      ],
+      replays: [
+        {events: 500, unitPrice: 0.2925, price: 0},
+        {events: 10000, unitPrice: 0.288, price: 2900},
+      ],
+      attachments: [
+        {events: 1, unitPrice: 25, price: 0},
+        {events: 25, unitPrice: 25, price: 600},
+      ],
+      monitorSeats: [{events: 1, unitPrice: 60, price: 0, onDemandPrice: 78}],
+    },
+    price: 0,
+    reservedMinimum: 0,
+    retentionDays: 0,
+    totalPrice: 0,
+    trialPlan: null,
+    userSelectable: true,
+    categoryDisplayNames: {},
+    ...fields,
+  };
+}

static/gsApp/__fixtures__/previewData.tsx

@@ -0,0 +1,26 @@
+import type {PreviewData} from 'getsentry/types';
+import {InvoiceItemType} from 'getsentry/types';
+
+export function PreviewDataFixture(fields: Partial<PreviewData>): PreviewData {
+  return {
+    atPeriodEnd: false,
+    balanceChange: 0,
+    billedAmount: 0,
+    creditApplied: 0,
+    effectiveAt: '2023-01-01T00:00:00Z',
+    invoiceItems: [
+      {
+        amount: 8900,
+        type: InvoiceItemType.SUBSCRIPTION,
+        description: 'Subscription to Business',
+        data: {},
+        period_end: '',
+        period_start: '',
+      },
+    ],
+    newBalance: -10000,
+    previewToken: '1:2023-01-01T00:00:00',
+    proratedAmount: 0,
+    ...fields,
+  };
+}

static/gsApp/__mocks__/@amplitude/analytics-browser.tsx

@@ -0,0 +1,12 @@
+const identifyInstance: any = {
+  set: jest.fn(() => identifyInstance),
+};
+
+export const Identify = jest.fn(() => identifyInstance);
+export const setUserId = jest.fn();
+export const identify = jest.fn();
+export const init = jest.fn();
+export const track = jest.fn();
+export const setGroup = jest.fn();
+
+export const _identifyInstance = identifyInstance;