feat(perf-detector-threshold-configuration) Added frontend changes addressing bug bash points. (#52632)

1. Changed label for settings button from Span Evidence.
 2. Improved descriptions and threshold labels.
3. Pressing on slider thumb triggers request, even when value didn't
change. Fixed here: [PR](https://github.com/getsentry/sentry/pull/52602)
 4. Made use of new range slider functionality.
5. Added toast for case where admin ui is visible but super user cookie
in the backend has expired. Causes 403s.
<img width="524" alt="Screenshot 2023-07-11 at 12 36 32 PM"
src="https://github.com/getsentry/sentry/assets/60121741/3ee94925-edb6-4181-b9a9-d10886439740">

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/events/interfaces/performance/spanEvidence.tsx

@@ -67,7 +67,7 @@ export function SpanEvidenceSection({event, organization, projectSlug}: Props) {
             size="xs"
           >
             <StyledSettingsIcon size="xs" />
-            Settings
+            Threshold Settings
           </LinkButton>
         )
       }

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

@@ -2,6 +2,7 @@ import {Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
+import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import Access from 'sentry/components/acl/access';
 import Feature from 'sentry/components/acl/feature';
 import {Button} from 'sentry/components/button';
@@ -427,16 +428,19 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.N_PLUS_DB_DURATION,
             type: 'range',
-            label: t('Duration'),
+            label: t('Minimum Total Duration'),
             defaultValue: 100, // ms
             help: t(
-              'Setting the value to 200ms, means that an eligible event will be stored as a N+1 DB Query Issue only if the total duration of the involved spans exceeds 200ms'
+              'Setting the value to 100ms, means that an eligible event will be stored as a N+1 DB Query Issue only if the total duration of the involved spans exceeds 100ms'
             ),
             allowedValues: allowedDurationValues,
             disabled: !(
               hasAccess && performanceSettings[DetectorConfigAdmin.N_PLUS_DB_ENABLED]
             ),
+            tickValues: [0, allowedDurationValues.length - 1],
+            showTickLabels: true,
             formatLabel: formatDuration,
+            flexibleControlStateSize: true,
             disabledReason,
           },
         ],
@@ -447,11 +451,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.SLOW_DB_DURATION,
             type: 'range',
-            label: t('Duration'),
+            label: t('Minimum Duration'),
             defaultValue: 1000, // ms
             help: t(
-              'Setting the value to 2s, means that an eligible event will be stored as a Slow DB Query Issue only if the duration of the involved span exceeds 2s.'
+              'Setting the value to 1s, means that an eligible event will be stored as a Slow DB Query Issue only if the duration of the involved db span exceeds 1s.'
             ),
+            tickValues: [0, allowedDurationValues.slice(1).length - 1],
+            showTickLabels: true,
             allowedValues: allowedDurationValues.slice(1),
             disabled: !(
               hasAccess && performanceSettings[DetectorConfigAdmin.SLOW_DB_ENABLED]
@@ -467,12 +473,14 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.RENDER_BLOCKING_ASSET_RATIO,
             type: 'range',
-            label: t('FCP Ratio'),
+            label: t('Minimum FCP Ratio'),
             defaultValue: 0.33,
             help: t(
-              'Setting the value to 50%, means that an eligible event will be stored as a Large Render Blocking Asset Issue only if the duration of the involved span is at least 50% of First Contentful Paint (FCP).'
+              'Setting the value to 33%, means that an eligible event will be stored as a Large Render Blocking Asset Issue only if the duration of the involved span is at least 33% of First Contentful Paint (FCP).'
             ),
             allowedValues: allowedPercentageValues,
+            tickValues: [0, allowedPercentageValues.length - 1],
+            showTickLabels: true,
             disabled: !(
               hasAccess &&
               performanceSettings[DetectorConfigAdmin.RENDER_BLOCK_ASSET_ENABLED]
@@ -488,11 +496,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.LARGE_HTT_PAYLOAD_SIZE,
             type: 'range',
-            label: t('Size'),
+            label: t('Minimum Size'),
             defaultValue: 1000000, // 1MB in bytes
             help: t(
-              'Setting the value to 200KB, means that an eligible event will be stored as a Large HTTP Payload Issue only if the involved HTTP span has a payload size that exceeds 200KB.'
+              'Setting the value to 1MB, means that an eligible event will be stored as a Large HTTP Payload Issue only if the involved HTTP span has a payload size that exceeds 1MB.'
             ),
+            tickValues: [0, allowedSizeValues.slice(1).length - 1],
+            showTickLabels: true,
             allowedValues: allowedSizeValues.slice(1),
             disabled: !(
               hasAccess &&
@@ -509,11 +519,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.DB_ON_MAIN_THREAD_DURATION,
             type: 'range',
-            label: t('Duration'),
+            label: t('Frame Rate Drop'),
             defaultValue: 16, // ms
             help: t(
-              'Setting the value to 20fps, means that an eligible event will be stored as a DB on Main Thread Issue only if database spans on the main thread cause frame rate to drop below 20fps.'
+              'Setting the value to 60fps, means that an eligible event will be stored as a DB on Main Thread Issue only if database spans on the main thread cause frame rate to drop below 60fps.'
             ),
+            tickValues: [0, 3],
+            showTickLabels: true,
             allowedValues: [10, 16, 33, 50], // representation of 100 to 20 fps in milliseconds
             disabled: !(
               hasAccess && performanceSettings[DetectorConfigAdmin.DB_MAIN_THREAD_ENABLED]
@@ -529,11 +541,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.FILE_IO_MAIN_THREAD_DURATION,
             type: 'range',
-            label: t('Duration'),
+            label: t('Frame Rate Drop'),
             defaultValue: 16, // ms
             help: t(
-              'Setting the value to 20fps, means that an eligible event will be stored as a DB on Main Thread Issue only if File I/O spans on the main thread cause frame rate to drop below 20fps.'
+              'Setting the value to 60fps, means that an eligible event will be stored as a File I/O on Main Thread Issue only if File I/O spans on the main thread cause frame rate to drop below 60fps.'
             ),
+            tickValues: [0, 3],
+            showTickLabels: true,
             allowedValues: [10, 16, 33, 50], // representation of 100, 60, 30, 20 fps in milliseconds
             disabled: !(
               hasAccess && performanceSettings[DetectorConfigAdmin.FILE_IO_ENABLED]
@@ -552,8 +566,10 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
             label: t('Minimum Time Saved'),
             defaultValue: 100, // ms
             help: t(
-              'Setting the value to 500ms, means that an eligible event will be stored as a Consecutive DB Queries Issue only if the time saved by parallelizing the queries exceeds 500ms.'
+              'Setting the value to 100ms, means that an eligible event will be stored as a Consecutive DB Queries Issue only if the time saved by parallelizing the queries exceeds 100ms.'
             ),
+            tickValues: [0, allowedDurationValues.slice(0, 11).length - 1],
+            showTickLabels: true,
             allowedValues: allowedDurationValues.slice(0, 11),
             disabled: !(
               hasAccess && performanceSettings[DetectorConfigAdmin.CONSECUTIVE_DB_ENABLED]
@@ -569,11 +585,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.UNCOMPRESSED_ASSET_SIZE,
             type: 'range',
-            label: t('Size'),
+            label: t('Minimum Size'),
             defaultValue: 512000, // in kilobytes
             help: t(
-              'Setting the value to 1MB, means that an eligible event will be stored as an Uncompressed Asset Issue only if the size of the uncompressed asset being transferred exceeds 1MB.'
+              'Setting the value to 512KB, means that an eligible event will be stored as an Uncompressed Asset Issue only if the size of the uncompressed asset being transferred exceeds 512KB.'
             ),
+            tickValues: [0, allowedSizeValues.slice(1).length - 1],
+            showTickLabels: true,
             allowedValues: allowedSizeValues.slice(1),
             disabled: !(
               hasAccess &&
@@ -585,11 +603,13 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
           {
             name: DetectorConfigCustomer.UNCOMPRESSED_ASSET_DURATION,
             type: 'range',
-            label: t('Duration'),
+            label: t('Minimum Duration'),
             defaultValue: 500, // in ms
             help: t(
-              'Setting the value to 200ms, means that an eligible event will be stored as an Uncompressed Asset Issue only if the duration of the span responsible for transferring the uncompressed asset exceeds 200ms.'
+              'Setting the value to 500ms, means that an eligible event will be stored as an Uncompressed Asset Issue only if the duration of the span responsible for transferring the uncompressed asset exceeds 500ms.'
             ),
+            tickValues: [0, allowedDurationValues.slice(1).length - 1],
+            showTickLabels: true,
             allowedValues: allowedDurationValues.slice(1),
             disabled: !(
               hasAccess &&
@@ -778,6 +798,15 @@ class ProjectPerformance extends DeprecatedAsyncView<Props, State> {
                 allowUndo
                 initialData={this.state.performance_issue_settings}
                 apiMethod="PUT"
+                onSubmitError={error => {
+                  if (error.status === 403) {
+                    addErrorMessage(
+                      t(
+                        'This action requires active super user access. Please re-authenticate to make changes.'
+                      )
+                    );
+                  }
+                }}
                 apiEndpoint={performanceIssuesEndpoint}
               >
                 <JsonForm