feat(perf-detector-threshold-configuration) Added frontend changes for more threshold configurations. (#52262)

- Frontend changes rely on backend changes from this PR:
[link](#52239) for issues other
than n+1 db queries and slow db queries.
- Adds detection enabled toggles and sliders for configuring thresholds
covering the following issues:
<img width="1024" alt="Screenshot 2023-07-05 at 9 54 41 AM"
src="https://github.com/getsentry/sentry/assets/60121741/cebc729e-bac4-4b27-ae58-3dd7d5377355">

- Will be handling n+1 api calls and consecutive http spans separately
- Added tests.

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/components/forms/formPanel.tsx

@@ -29,6 +29,7 @@ type Props = {
    * The name of the field that should be highlighted
    */
   highlighted?: string;
+  initiallyCollapsed?: boolean;
   /**
    * Renders inside of PanelBody before PanelBody close
    */
@@ -52,9 +53,10 @@ function FormPanel({
   renderFooter,
   renderHeader,
   collapsible,
+  initiallyCollapsed = false,
   ...otherProps
 }: Props) {
-  const [collapsed, setCollapse] = useState(false);
+  const [collapsed, setCollapse] = useState(initiallyCollapsed);
   const handleCollapseToggle = useCallback(() => setCollapse(current => !current), []);
 
   return (
@@ -64,7 +66,11 @@ function FormPanel({
           {title}
           {collapsible && (
             <Collapse onClick={handleCollapseToggle}>
-              <IconChevron direction={collapsed ? 'down' : 'up'} size="xs" />
+              <IconChevron
+                data-test-id="form-panel-collapse-chevron"
+                direction={collapsed ? 'down' : 'up'}
+                size="xs"
+              />
             </Collapse>
           )}
         </PanelHeader>

static/app/components/forms/jsonForm.tsx

@@ -130,6 +130,7 @@ class JsonForm extends Component<Props, State> {
     const {
       access,
       collapsible,
+      initiallyCollapsed,
       fields,
       title,
       forms,
@@ -154,6 +155,7 @@ class JsonForm extends Component<Props, State> {
       renderHeader,
       highlighted: this.state.highlighted,
       collapsible,
+      initiallyCollapsed,
     };
 
     return (

static/app/views/settings/projectPerformance/projectPerformance.spec.tsx

@@ -9,6 +9,9 @@ import {
 import * as utils from 'sentry/utils/isActiveSuperuser';
 import ProjectPerformance, {
   allowedDurationValues,
+  allowedPercentageValues,
+  allowedSizeValues,
+  DetectorConfigCustomer,
 } from 'sentry/views/settings/projectPerformance/projectPerformance';
 
 describe('projectPerformance', function () {
@@ -191,7 +194,7 @@ describe('projectPerformance', function () {
   it.each([
     {
       title: 'N+1 DB Queries',
-      threshold: 'n_plus_one_db_duration_threshold',
+      threshold: DetectorConfigCustomer.N_PLUS_DB_DURATION,
       allowedValues: allowedDurationValues,
       defaultValue: 100,
       newValue: 500,
@@ -200,13 +203,76 @@ describe('projectPerformance', function () {
     },
     {
       title: 'Slow DB Queries',
-      threshold: 'slow_db_query_duration_threshold',
+      threshold: DetectorConfigCustomer.SLOW_DB_DURATION,
       allowedValues: allowedDurationValues.slice(1),
       defaultValue: 1000,
       newValue: 3000,
       newValueIndex: 7,
       sliderIndex: 2,
     },
+    {
+      title: 'Large Render Blocking Asset',
+      threshold: DetectorConfigCustomer.RENDER_BLOCKING_ASSET_RATIO,
+      allowedValues: allowedPercentageValues,
+      defaultValue: 0.33,
+      newValue: 0.5,
+      newValueIndex: 6,
+      sliderIndex: 3,
+    },
+    {
+      title: 'Large HTTP Payload',
+      threshold: DetectorConfigCustomer.LARGE_HTT_PAYLOAD_SIZE,
+      allowedValues: allowedSizeValues.slice(1),
+      defaultValue: 1000000,
+      newValue: 5000000,
+      newValueIndex: 13,
+      sliderIndex: 4,
+    },
+    {
+      title: 'DB on Main Thread',
+      threshold: DetectorConfigCustomer.DB_ON_MAIN_THREAD_DURATION,
+      allowedValues: [10, 16, 33, 50],
+      defaultValue: 16,
+      newValue: 33,
+      newValueIndex: 2,
+      sliderIndex: 5,
+    },
+    {
+      title: 'File I/O on Main Thread',
+      threshold: DetectorConfigCustomer.FILE_IO_MAIN_THREAD_DURATION,
+      allowedValues: [10, 16, 33, 50],
+      defaultValue: 16,
+      newValue: 50,
+      newValueIndex: 3,
+      sliderIndex: 6,
+    },
+    {
+      title: 'Consecutive DB Queries',
+      threshold: DetectorConfigCustomer.CONSECUTIVE_DB_MIN_TIME_SAVED,
+      allowedValues: allowedDurationValues.slice(0, 11),
+      defaultValue: 100,
+      newValue: 5000,
+      newValueIndex: 10,
+      sliderIndex: 7,
+    },
+    {
+      title: 'Uncompressed Asset',
+      threshold: DetectorConfigCustomer.UNCOMPRESSED_ASSET_SIZE,
+      allowedValues: allowedSizeValues.slice(1),
+      defaultValue: 512000,
+      newValue: 700000,
+      newValueIndex: 6,
+      sliderIndex: 8,
+    },
+    {
+      title: 'Uncompressed Asset',
+      threshold: DetectorConfigCustomer.UNCOMPRESSED_ASSET_DURATION,
+      allowedValues: allowedDurationValues.slice(1),
+      defaultValue: 500,
+      newValue: 400,
+      newValueIndex: 3,
+      sliderIndex: 9,
+    },
   ])(
     'renders detector thresholds settings for $title issue',
     async ({
@@ -247,6 +313,12 @@ describe('projectPerformance', function () {
       ).toBeInTheDocument();
       expect(screen.getByText(title)).toBeInTheDocument();
 
+      // Open collapsed panels
+      const chevrons = screen.getAllByTestId('form-panel-collapse-chevron');
+      for (const chevron of chevrons) {
+        await userEvent.click(chevron);
+      }
+
       const slider = screen.getAllByRole('slider')[sliderIndex];
       const indexOfValue = allowedValues.indexOf(defaultValue);