chore: integrate og/webapp into public/app (wip) (grafana#2169)

* chore: move code from `og/webapp` to `public/app`

.eslintignore

@@ -9,3 +9,11 @@ cypress.config.ts
 testSetupFile.js
 og/**
 examples/**
+public/app/util/**
+public/app/stories/**
+**.spec.ts*
+svg-transform.js
+setupAfterEnv.ts
+globalSetup.js
+globalTeardown.js
+jest-css-modules-transform-config.js

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  plugins: ['@typescript-eslint', 'css-modules'],
   extends: [
     '@grafana/eslint-config',
     'plugin:import/recommended',
@@ -9,6 +10,10 @@ module.exports = {
     'react/react-in-jsx-scope': 'error',
     'react-hooks/exhaustive-deps': 'error',
     'no-duplicate-imports': 'off',
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      { selector: 'function', format: ['PascalCase', 'camelCase'] },
+    ],
     '@typescript-eslint/no-duplicate-imports': 'error',
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 'error',
@@ -26,14 +31,16 @@ module.exports = {
       'error',
       {
         patterns: [
-          {
-            group: ['../*', './*'],
-            message:
-              'Usage of relative parent imports is not allowed. Please use absolute(use alias) imports instead.',
-          },
+          // Dialing back this restriction for now
+          // {
+          //   group: ['../*', './*'],
+          //   message:
+          //     'Usage of relative parent imports is not allowed. Please use absolute(use alias) imports instead.',
+          // },
         ],
       },
     ],
+    'react/prop-types': ['off'],
   },
   env: {
     browser: true,

.swcrc

@@ -0,0 +1,12 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    }
+  }
+}

jest.config.js

@@ -7,22 +7,27 @@ module.exports = {
   testEnvironment: 'jsdom',
   testMatch: ['**/?(*.)+(spec|test).+(ts|tsx|js)'],
   transform: {
-    '^.+\\.(t|j)sx?$': ['@swc/jest'],
     '\\.module\\.(css|scss)$': 'jest-css-modules-transform',
     '\\.(css|scss)$': 'jest-css-modules-transform',
+    '\\.svg$': path.join(__dirname, 'svg-transform.js'),
+    '^.+\\.(t|j)sx?$': ['@swc/jest'],
   },
-  setupFilesAfterEnv: ['<rootDir>/testSetupFile.js'],
 
   transformIgnorePatterns: [
     // force us to transpile these dependencies
     // https://stackoverflow.com/a/69150188
-    'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component|graphviz-react|pyroscope-oss))',
+    'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component|graphviz-react|@react-hook))',
   ],
 
   testPathIgnorePatterns: ['/node_modules/', '/og/'],
 
   // Reuse the same modules from typescript
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
     prefix: '<rootDir>',
+    '@phlare/(.*)$': path.join(__dirname, 'public/app/$1'),
   }),
+
+  globalSetup: '<rootDir>/globalSetup.js',
+  globalTeardown: '<rootDir>/globalTeardown.js',
+  setupFilesAfterEnv: [path.join(__dirname, 'setupAfterEnv.ts')],
 };

og/jest.config.js

@@ -20,7 +20,7 @@ module.exports = {
   transformIgnorePatterns: [
     // force us to not transpile these dependencies
     // https://stackoverflow.com/a/69150188
-    'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component|graphviz-react))',
+    'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component|graphviz-react|@react-hook))',
   ],
   globalSetup: '<rootDir>/globalSetup.js',
   globalTeardown: '<rootDir>/globalTeardown.js',

og/package.json

@@ -272,9 +272,5 @@
     "d3-graphviz": "5.0.2",
     "d3-selection": "3.0.0",
     "semver": "^7.5.2"
-  },
-  "workspaces": [
-    "packages/*",
-    "webapp"
-  ]
+  }
 }

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenu.spec.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MenuItem } from '@webapp/ui/Menu';
+import { MenuItem } from '@phlare/ui/Menu';
 import userEvent from '@testing-library/user-event';
 
 import ContextMenu, { ContextMenuProps } from './ContextMenu';

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/ContextMenu.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading, import/no-extraneous-dependencies */
 import React from 'react';
-import { ControlledMenu, useMenuState } from '@webapp/ui/Menu';
+import { ControlledMenu, useMenuState } from '@phlare/ui/Menu';
 import styles from './ContextMenu.module.scss';
 
 type xyToMenuItems = (x: number, y: number) => JSX.Element[];

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -10,9 +10,9 @@ import DiffLegend from './DiffLegend';
 import CheckIcon from './CheckIcon';
 // Until we migrate ui to its own package this should do it
 // eslint-disable-next-line
-import Dropdown, { MenuItem, MenuButton } from '@webapp/ui/Dropdown';
+import Dropdown, { MenuItem, MenuButton } from '@phlare/ui/Dropdown';
 // eslint-disable-next-line
-import dropdownStyles from '@webapp/ui/Dropdown.module.scss';
+import dropdownStyles from '@phlare/ui/Dropdown.module.scss';
 
 import styles from './DiffLegendPaletteDropdown.module.css';
 

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -6,7 +6,7 @@ import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
 import { faHighlighter } from '@fortawesome/free-solid-svg-icons/faHighlighter';
 import { faCompressAlt } from '@fortawesome/free-solid-svg-icons/faCompressAlt';
-import { MenuItem } from '@webapp/ui/Menu';
+import { MenuItem } from '@phlare/ui/Menu';
 import useResizeObserver from '@react-hook/resize-observer';
 import { Maybe } from 'true-myth';
 import debounce from 'lodash.debounce';

og/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphRenderer.tsx

@@ -10,7 +10,7 @@ import React, { Dispatch, SetStateAction, ReactNode, Component } from 'react';
 import clsx from 'clsx';
 import { Maybe } from 'true-myth';
 import { createFF, Flamebearer, Profile } from '@pyroscope/models/src';
-import NoData from '@pyroscope/webapp/javascript/ui/NoData';
+import NoData from '@phlare/ui/NoData';
 
 import Graph from './FlameGraphComponent';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

og/packages/pyroscope-flamegraph/src/ProfilerTable.tsx

@@ -9,7 +9,7 @@ import TableUI, {
   useTableSort,
   BodyRow,
   TableBodyType,
-} from '@webapp/ui/Table';
+} from '@phlare/ui/Table';
 import TableTooltip from './Tooltip/TableTooltip';
 import { getFormatter, ratioToPercent, diffPercent } from './format/format';
 import {

og/packages/pyroscope-flamegraph/src/SharedQueryInput.tsx

@@ -2,8 +2,8 @@
 import React, { useEffect, useMemo, ChangeEvent, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
-import Input from '@pyroscope/webapp/javascript/ui/Input';
-import { Tooltip } from '@pyroscope/webapp/javascript/ui/Tooltip';
+import Input from '@phlare/ui/Input';
+import { Tooltip } from '@phlare/ui/Tooltip';
 import styles from './SharedQueryInput.module.scss';
 import type { ProfileHeaderProps } from './Toolbar';
 

og/packages/pyroscope-flamegraph/src/Toolbar.tsx

@@ -17,9 +17,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import useResizeObserver from '@react-hook/resize-observer';
 // until ui is moved to its own package this should do it
 // eslint-disable-next-line import/no-extraneous-dependencies
-import Button from '@webapp/ui/Button';
+import Button from '@phlare/ui/Button';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Tooltip } from '@pyroscope/webapp/javascript/ui/Tooltip';
+import { Tooltip } from '@phlare/ui/Tooltip';
 import { FitModes } from './fitMode/fitMode';
 import SharedQueryInput from './SharedQueryInput';
 import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';

og/packages/pyroscope-flamegraph/src/format/format.ts

@@ -53,7 +53,7 @@ export class DurationFormatter {
 
   suffix = 'second';
 
-  durations: [number, string][] = [
+  durations: Array<[number, string]> = [
     [60, 'minute'],
     [60, 'hour'],
     [24, 'day'],
@@ -139,7 +139,7 @@ export class NanosecondsFormatter {
 
   suffix = 'second';
 
-  durations: [number, string][] = [
+  durations: Array<[number, string]> = [
     [60, 'minute'],
     [60, 'hour'],
     [24, 'day'],
@@ -193,7 +193,7 @@ export class ObjectsFormatter {
 
   suffix = '';
 
-  objects: [number, string][] = [
+  objects: Array<[number, string]> = [
     [1000, 'K'],
     [1000, 'M'],
     [1000, 'G'],
@@ -247,7 +247,7 @@ export class BytesFormatter {
 
   suffix = 'bytes';
 
-  bytes: [number, string][] = [
+  bytes: Array<[number, string]> = [
     [1024, 'KB'],
     [1024, 'MB'],
     [1024, 'GB'],

og/packages/pyroscope-flamegraph/src/index.node.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import Box from '@webapp/ui/Box';
+import Box from '@phlare/ui/Box';
 import Flamegraph from './FlameGraph/FlameGraphComponent/Flamegraph';
 import { DefaultPalette } from './FlameGraph/FlameGraphComponent/colorPalette';
 import { FlamegraphRenderer } from './FlamegraphRenderer';

og/packages/pyroscope-flamegraph/src/index.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import Box from '@webapp/ui/Box';
+import Box from '@phlare/ui/Box';
 import Flamegraph from './FlameGraph/FlameGraphComponent/Flamegraph';
 import { FlamegraphRenderer } from './FlamegraphRenderer';
 import { DefaultPalette } from './FlameGraph/FlameGraphComponent/colorPalette';

og/packages/pyroscope-flamegraph/src/sass/flamegraph.scss

@@ -1,11 +1,12 @@
-@import '../../../../webapp/sass/variables.css';
+@import '../../../../../public/app/sass/variables.css';
+
 // Scope all css rules, specially the global ones
 // It's important to use a html element (as opposed to a class)
 // So that classes generated by CSS modules still have higher specificity
 // And therefore overwrite these global rules (specially the reset ones)
 pyro-flamegraph {
-  @import '../../../../webapp/sass/common';
-  @import '../../../../webapp/sass/reset.scss';
+  @import '../../../../../public/app/sass/common';
+  @import '../../../../../public/app/sass/reset.scss';
 
   color: var(--ps-neutral-2);
   -webkit-font-smoothing: antialiased;

og/tsconfig.json

@@ -10,8 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "paths": {
-      "@webapp/*": ["./webapp/javascript/*"],
-      "@ui/*": ["./webapp/javascript/ui/*"]
+      "@phlare/*": ["../public/app/*"],
     },
     "types": ["node"],
     "plugins": [{ "name": "typescript-plugin-css-modules" }],

og/webapp/README.md

@@ -30,7 +30,7 @@ Linting, testing etc is assumed to be ran in a different CI step.
 # Using alias imports
 Alias imports allow importing as if it was an external package, for example:
 ```javascript
-import Button from '@ui/Button';
+import Button from '@phlare/ui/Button';
 ```
 
 To be able to do that, you need to add the alias to the following files: