add back linting prettier via eslint (#1463)

Author: brandon-pereira

.vscode/settings.json

@@ -7,6 +7,13 @@
     "source.fixAll.eslint": "always",
     "source.fixAll.stylelint": "always"
   },
+  "eslint.useFlatConfig": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
   "[scss]": {
     "editor.defaultFormatter": "stylelint.vscode-stylelint"
   },

packages/app/eslint.config.mjs

@@ -6,11 +6,13 @@ import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import prettierConfig from 'eslint-config-prettier';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
 
 export default [
   js.configs.recommended,
   ...tseslint.configs.recommended,
   prettierConfig,
+  prettierPlugin,
   {
     ignores: [
       'playwright-report/**',

packages/app/src/DBDashboardPage.tsx

@@ -699,7 +699,9 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
             dateRange={searchedTimeRange}
             onEditClick={() => setEditedTile(chart)}
             granularity={
-              isRefreshEnabled ? granularityOverride : granularity ?? undefined
+              isRefreshEnabled
+                ? granularityOverride
+                : (granularity ?? undefined)
             }
             filters={[
               {

packages/app/src/ServicesDashboardPage.tsx

@@ -631,9 +631,7 @@ function HttpTab({
                 selectGroupBy: false,
                 groupBy: expressions.endpoint,
                 orderBy: '"Total (ms)" DESC',
-                filters: [
-                  ...getScopedFilters({ appliedConfig, expressions }),
-                ],
+                filters: [...getScopedFilters({ appliedConfig, expressions })],
                 dateRange: searchedTimeRange,
                 numberFormat: MS_NUMBER_FORMAT,
                 limit: { limit: 20 },

packages/app/src/components/DBListBarChart.tsx

@@ -122,7 +122,7 @@ function ListBar({
                       </Text>
                       <Text size="xs" span>
                         {column.numberFormat != null
-                          ? formatNumber(value, column.numberFormat) ?? 'N/A'
+                          ? (formatNumber(value, column.numberFormat) ?? 'N/A')
                           : value}
                       </Text>
                     </Box>