chore: ESLint config for sorting imports

.changeset/warm-bags-lick.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Set up ESLint rule for sorting imports

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

packages/app/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'prettier'],
+  plugins: ['simple-import-sort', '@typescript-eslint', 'prettier'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -20,5 +20,26 @@ module.exports = {
     'react/display-name': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+      rules: {
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              ['^react$', '^next', '^[a-z]', '^@'],
+              ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+              ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+              ['^.+\\.s?css$'],
+              ['^\\u0000'],
+            ],
+          },
+        ],
+      },
+    },
+  ],
 };

packages/app/package.json

@@ -110,6 +110,7 @@
     "eslint-config-next": "^12.3.3",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.7",
     "typescript": "^4.9.5"

packages/app/pages/_app.tsx

@@ -1,26 +1,24 @@
-import Head from 'next/head';
 import React, { useEffect } from 'react';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import { NextAdapter } from 'next-query-params';
+import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { ToastContainer } from 'react-toastify';
-import { NextAdapter } from 'next-query-params';
 import { QueryParamProvider } from 'use-query-params';
-import { useConfirmModal } from '../src/useConfirm';
 
 import * as config from '../src/config';
+import { useConfirmModal } from '../src/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '../src/useQueryParam';
 import { UserPreferencesProvider } from '../src/useUserPreferences';
 
 import 'react-toastify/dist/ReactToastify.css';
-
 import '../styles/globals.css';
 import '../styles/app.scss';
 import '../src/LandingPage.scss';
 
 const queryClient = new QueryClient();
-
 import HyperDX from '@hyperdx/browser';
 
 export default function MyApp({ Component, pageProps }: AppProps) {

packages/app/setup-jest.ts

@@ -1,4 +1,5 @@
-import '@testing-library/jest-dom';
 import setup from '@deploysentinel/jest-rtl-debugger/setup';
 
+import '@testing-library/jest-dom';
+
 setup();

packages/app/src/Alert.tsx

@@ -1,7 +1,8 @@
 import { sub } from 'date-fns';
 import { Form, FormSelectProps } from 'react-bootstrap';
+
 import api from './api';
-import type { AlertInterval, AlertChannelType } from './types';
+import type { AlertChannelType, AlertInterval } from './types';
 
 export function intervalToGranularity(interval: AlertInterval) {
   if (interval === '1m') return '1 minute' as const;

packages/app/src/AppNav.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import Router, { useRouter } from 'next/router';
 import cx from 'classnames';
+import { Button } from 'react-bootstrap';
 import { useQueryClient } from 'react-query';
-import Router, { useRouter } from 'next/router';
 import {
   NumberParam,
   StringParam,
@@ -10,15 +12,13 @@ import {
   withDefault,
 } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
-import { useEffect, useState } from 'react';
 
 import api from './api';
-import Logo from './Logo';
+import AuthLoadingBlocker from './AuthLoadingBlocker';
 import { API_SERVER_URL } from './config';
-import { useWindowSize } from './utils';
-import { Button } from 'react-bootstrap';
 import Icon from './Icon';
-import AuthLoadingBlocker from './AuthLoadingBlocker';
+import Logo from './Logo';
+import { useWindowSize } from './utils';
 
 const APP_PERFORMANCE_DASHBOARD_CONFIG = {
   id: '',

packages/app/src/AuthPage.tsx

@@ -1,16 +1,16 @@
-import { useForm, SubmitHandler } from 'react-hook-form';
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
-import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
 import cx from 'classnames';
+import { Button, Form } from 'react-bootstrap';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { PasswordCheck, CheckOrX } from './PasswordCheck';
-import LandingHeader from './LandingHeader';
-import * as config from './config';
 import api from './api';
+import { API_SERVER_URL } from './config';
+import * as config from './config';
+import LandingHeader from './LandingHeader';
+import { CheckOrX, PasswordCheck } from './PasswordCheck';
 
 type FormData = {
   email: string;

packages/app/src/AutocompleteInput.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 import Fuse from 'fuse.js';
+import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 
 import { useDebounce } from './utils';
 

packages/app/src/ChartPage.tsx

@@ -1,24 +1,22 @@
-import Head from 'next/head';
-import { Button } from 'react-bootstrap';
-import { useQueryParam, StringParam, withDefault } from 'use-query-params';
 import { useCallback, useEffect, useState } from 'react';
-import { encodeArray, decodeArray } from 'serialize-query-params';
+import Head from 'next/head';
 import produce from 'immer';
+import { Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import type { QueryParamConfig } from 'serialize-query-params';
+import { decodeArray, encodeArray } from 'serialize-query-params';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { useQueryParam as useHDXQueryParam } from './useQueryParam';
-import SearchTimeRangePicker, {
-  parseTimeRangeInput,
-} from './SearchTimeRangePicker';
-import DSSelect from './DSSelect';
 import AppNav from './AppNav';
-
+import { AggFn, ChartSeries, ChartSeriesForm } from './ChartUtils';
+import DSSelect from './DSSelect';
 import HDXLineChart from './HDXLineChart';
-import { ChartSeries, AggFn, ChartSeriesForm } from './ChartUtils';
-
-import type { QueryParamConfig } from 'serialize-query-params';
 import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import SearchTimeRangePicker, {
+  parseTimeRangeInput,
+} from './SearchTimeRangePicker';
 import { parseTimeQuery, useTimeQuery } from './timeQuery';
-import { toast } from 'react-toastify';
+import { useQueryParam as useHDXQueryParam } from './useQueryParam';
 
 export const ChartSeriesParam: QueryParamConfig<ChartSeries[] | undefined> = {
   encode: (

packages/app/src/ChartUtils.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useRef } from 'react';
+import { add } from 'date-fns';
 import Select from 'react-select';
 import AsyncSelect from 'react-select/async';
 
 import api from './api';
-import { add } from 'date-fns';
-import SearchInput from './SearchInput';
-import MetricTagFilterInput from './MetricTagFilterInput';
 import Checkbox from './Checkbox';
+import MetricTagFilterInput from './MetricTagFilterInput';
+import SearchInput from './SearchInput';
 
 export const SORT_ORDER = [
   { value: 'asc' as const, label: 'Ascending' },

packages/app/src/Clipboard.tsx

@@ -1,7 +1,7 @@
+import { useState } from 'react';
 import cx from 'classnames';
 import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useState } from 'react';
 
 export default function Clipboard({
   text,

packages/app/src/ControllerSelect.tsx

@@ -1,8 +1,7 @@
+import type { Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import Select from 'react-select';
 
-import type { Control } from 'react-hook-form';
-
 export default function ControllerSelect<
   Option extends { value: string | undefined; label: React.ReactNode },
 >({

packages/app/src/CreateLogAlertModal.tsx

@@ -1,28 +1,27 @@
+import { useEffect, useMemo, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
-import { useEffect, useMemo, useState } from 'react';
 
-import HDXLineChart from './HDXLineChart';
-import TabBar from './TabBar';
+import {
+  ALERT_CHANNEL_OPTIONS,
+  ALERT_INTERVAL_OPTIONS,
+  intervalToDateRange,
+  intervalToGranularity,
+  SlackChannelForm,
+} from './Alert';
 import api from './api';
 import { FieldSelect } from './ChartUtils';
-import { capitalizeFirstLetter } from './utils';
+import HDXLineChart from './HDXLineChart';
 import { genEnglishExplanation } from './queryv2';
-
+import TabBar from './TabBar';
 import type {
   AlertChannelType,
   AlertInterval,
   AlertType,
   LogView,
 } from './types';
-import {
-  intervalToGranularity,
-  intervalToDateRange,
-  ALERT_INTERVAL_OPTIONS,
-  ALERT_CHANNEL_OPTIONS,
-  SlackChannelForm,
-} from './Alert';
+import { capitalizeFirstLetter } from './utils';
 
 function AlertForm({
   alertId,

packages/app/src/DOMPlayer.tsx

@@ -1,8 +1,8 @@
-import throttle from 'lodash/throttle';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import throttle from 'lodash/throttle';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Replayer } from 'rrweb';
-import cx from 'classnames';
 
 import { useSearchEventStream } from './search';
 import { useDebugMode } from './utils';

packages/app/src/DashboardPage.tsx

@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import {
   ForwardedRef,
   forwardRef,
@@ -8,12 +7,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import RGL, { WidthProvider } from 'react-grid-layout';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
 import produce from 'immer';
-import HDXMarkdownChart from './HDXMarkdownChart';
 import { Button, Form, Modal } from 'react-bootstrap';
+import RGL, { WidthProvider } from 'react-grid-layout';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useRouter } from 'next/router';
 import { useQueryClient } from 'react-query';
 import { toast } from 'react-toastify';
 import {
@@ -23,37 +22,37 @@ import {
   withDefault,
 } from 'use-query-params';
 
-import HDXLineChart from './HDXLineChart';
-import AppNav from './AppNav';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
-import { Granularity, convertDateRangeToGranularityString } from './ChartUtils';
-import { FloppyIcon, Histogram } from './SVGIcons';
-import SearchInput from './SearchInput';
-import { hashCode } from './utils';
-import TabBar from './TabBar';
-import HDXHistogramChart from './HDXHistogramChart';
 import api from './api';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
-import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
-import type { Alert } from './types';
+import AppNav from './AppNav';
+import { convertDateRangeToGranularityString, Granularity } from './ChartUtils';
+import type { Chart } from './EditChartForm';
 import {
-  EditSearchChartForm,
-  EditMarkdownChartForm,
   EditHistogramChartForm,
   EditLineChartForm,
+  EditMarkdownChartForm,
   EditNumberChartForm,
+  EditSearchChartForm,
   EditTableChartForm,
 } from './EditChartForm';
-import HDXNumberChart from './HDXNumberChart';
 import GranularityPicker from './GranularityPicker';
+import HDXHistogramChart from './HDXHistogramChart';
+import HDXLineChart from './HDXLineChart';
+import HDXMarkdownChart from './HDXMarkdownChart';
+import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import SearchInput from './SearchInput';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import { FloppyIcon, Histogram } from './SVGIcons';
+import TabBar from './TabBar';
+import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
+import type { Alert } from './types';
 import { useConfirm } from './useConfirm';
-
-import type { Chart } from './EditChartForm';
+import { hashCode } from './utils';
+import { ZIndexContext } from './zIndex';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { ZIndexContext } from './zIndex';
 
 const makeId = () => Math.floor(100000000 * Math.random()).toString(36);