Browse Source

feat(browser-starfish): persist "only show links" selection in resource module (#63022)

The "only show links" selection will persist with local storage so that
refreshes doesn't result in the same message.

Maybe its a good idea to store this selection somewhere in the future so
that new users don't have the same message?

<img width="797" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/28ea0fbe-8dbe-4adb-9f43-c7f4ab0897a8">
Dominik Buszowiecki 1 year ago
parent
commit
44756e6668

+ 12 - 3
static/app/views/performance/browser/resources/resourceSummaryPage/sampleImages.tsx

@@ -10,6 +10,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {safeURL} from 'sentry/utils/url/safeURL';
+import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
@@ -21,12 +22,15 @@ import {SpanIndexedField} from 'sentry/views/starfish/types';
 
 type Props = {groupId: string; projectId?: number};
 
+export const LOCAL_STORAGE_SHOW_LINKS = 'performance-resources-images-showLinks';
+
 const {SPAN_GROUP, SPAN_DESCRIPTION, HTTP_RESPONSE_CONTENT_LENGTH} = SpanIndexedField;
 const imageWidth = '200px';
 const imageHeight = '180px';
 
 function SampleImages({groupId, projectId}: Props) {
-  const [showImages, setShowImages] = useState(false);
+  const [showLinks, setShowLinks] = useLocalStorageState(LOCAL_STORAGE_SHOW_LINKS, false);
+  const [showImages, setShowImages] = useState(showLinks);
   const {data: settings} = usePerformanceGeneralProjectSettings(projectId);
   const isImagesEnabled = settings?.enable_images ?? false;
 
@@ -49,14 +53,19 @@ function SampleImages({groupId, projectId}: Props) {
     })
     .splice(0, 5);
 
+  const handleClickOnlyShowLinks = () => {
+    setShowLinks(true);
+    setShowImages(true);
+  };
+
   return (
     <ChartPanel title={showImages ? t('Largest Images') : undefined}>
       <SampleImagesChartPanelBody
-        onClickShowLinks={() => setShowImages(true)}
+        onClickShowLinks={handleClickOnlyShowLinks}
         images={filteredResources}
         isLoadingImages={isLoadingImages}
         isImagesEnabled={isImagesEnabled}
-        showImages={showImages}
+        showImages={showImages || isImagesEnabled}
       />
     </ChartPanel>
   );