chore: lint updates (#705)

* Make rules more strict
* Add some documentation to explain what the imports mean

---------
Co-authored-by: 二手掉包工程师 <rustin.liu@gmail.com>

Author: eh-am

.eslintrc.js

@@ -6,13 +6,14 @@ module.exports = {
   ],
   plugins: ['unused-imports'],
   rules: {
-    'react-hooks/exhaustive-deps': 'warn',
+    'react/react-in-jsx-scope': 'error',
+    'react-hooks/exhaustive-deps': 'error',
     'no-duplicate-imports': 'off',
     '@typescript-eslint/no-duplicate-imports': 'error',
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 'error',
     'unused-imports/no-unused-vars': [
-      'warn',
+      'error',
       {
         vars: 'all',
         varsIgnorePattern: '^_',

public/README.md

@@ -0,0 +1,25 @@
+# Frontend
+
+## tl;dr
+```
+yarn install
+yarn dev
+```
+
+## Overrides
+This repository currently uses `grafana/pyroscope` components, which then are overridden as necessary,
+using typescript's alias and webpack alias configuration. See `tsconfig.json` and `webpack.common.js`
+for more info.
+
+
+### Guidelines for imports
+
+It may be confusing to see different imports, so let's go over the most common examples:
+
+`@webapp` -> Refers to `pyroscope-oss`, aka `grafana/pyroscope` repo.
+`@pyroscope/webapp` -> Refers to `pyroscope-oss`, aka `grafana/pyroscope` repo.
+`@phlare` -> Refers to code in this repository. Note that this is needed since other
+downstream repositories may use this repository, and they also may want to override specific files.
+
+In the future, once both `grafana/pyroscope` and `grafana/phlare` are merged, there will
+be no need for `@webapp` and similar to happen, since there will be no `grafana/pyroscope` repo anymore.

public/app/components/Sidebar.tsx

@@ -37,7 +37,7 @@ export function Sidebar() {
 
   React.useLayoutEffect(() => {
     dispatch(recalculateSidebar());
-  }, [windowWidth]);
+  }, [dispatch, windowWidth]);
 
   const toggleCollapse = () => {
     const action = collapsed ? uncollapseSidebar : collapseSidebar;

public/app/components/SidebarTenant.tsx

@@ -10,7 +10,7 @@ import {
   selectIsMultiTenant,
   selectTenantID,
   actions,
-} from '@webapp/redux/reducers/tenant';
+} from '@phlare/redux/reducers/tenant';
 import { useAppSelector, useAppDispatch } from '@webapp/redux/hooks';
 import styles from '@phlare/components/SidebarTenant.module.css';
 import cx from 'classnames';

public/app/components/TenantWall.tsx

@@ -13,7 +13,7 @@ import {
   selectTenancy,
   actions,
   selectTenantID,
-} from '@webapp/redux/reducers/tenant';
+} from '@phlare/redux/reducers/tenant';
 
 export function TenantWall({ children }: { children: React.ReactNode }) {
   const dispatch = useAppDispatch();
@@ -26,7 +26,7 @@ export function TenantWall({ children }: { children: React.ReactNode }) {
 
   // Don't rerender all the children when this component changes
   // For example, when user wants to change the tenant ID
-  const memoedChildren = React.useMemo(() => children, []);
+  const memoedChildren = React.useMemo(() => children, [children]);
 
   switch (tenancy) {
     case 'unknown':

public/app/overrides/components/ExportData.tsx

@@ -10,6 +10,6 @@ interface ExportDataProps {
   exportFlamegraphDotComFn?: unknown;
 }
 
-export default function ExportData(props: ExportDataProps) {
+export default function ExportData(_props: ExportDataProps) {
   return <></>;
 }

public/app/overrides/services/tags.ts

@@ -51,7 +51,7 @@ async function fetchLabelsSeries<T>(
   );
 }
 
-export async function fetchTags(query: string, from: number, until: number) {
+export async function fetchTags(query: string, _from: number, _until: number) {
   return fetchLabelsSeries(query, function (t) {
     const labelNames = t.map((a) => a.name);
     return Array.from(new Set(labelNames));
@@ -61,8 +61,8 @@ export async function fetchTags(query: string, from: number, until: number) {
 export async function fetchLabelValues(
   label: string,
   query: string,
-  from: number,
-  until: number
+  _from: number,
+  _until: number
 ) {
   return fetchLabelsSeries(query, function (t) {
     const labelValues = t.filter((l) => label === l.name).map((a) => a.value);

public/app/overrides/util/baseurl.spec.ts

@@ -1,4 +1,4 @@
-import baseurlForAPI, { baseurl } from '@webapp/util/baseurl';
+import { baseurl, baseurlForAPI } from '@webapp/util/baseurl';
 
 function mockSelector(href: string) {
   const base = document.createElement('base');

public/app/redux/store.ts

@@ -21,7 +21,7 @@ import uiStore, {
 } from '@webapp/redux/reducers/ui';
 import tenantReducer, {
   persistConfig as tenantPersistConfig,
-} from '@webapp/redux/reducers/tenant';
+} from '@phlare/redux/reducers/tenant';
 
 const reducer = combineReducers({
   continuous: continuousReducer,

scripts/webpack/webpack.common.js

@@ -65,10 +65,6 @@ module.exports = {
         __dirname,
         '../../public/app/redux/hooks'
       ),
-      '@webapp/redux/reducers/tenant': path.resolve(
-        __dirname,
-        '../../public/app/redux/reducers/tenant'
-      ),
       '@webapp/services/apps': path.resolve(
         __dirname,
         '../../public/app/overrides/services/appNames'