PromQuery: Show exemplars in collapsed view (#52767)

* add Examplars: false in collapsed view

* assign defaut value - false to switch

* add 3 tests for 3 possible cases

Co-authored-by: Taewoo Kim <taewookim@Taewoos-MacBook-Pro.local>

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.test.tsx

@@ -68,6 +68,21 @@ describe('PromQueryBuilderOptions', () => {
 
     expect(screen.getByText('Type: Instant')).toBeInTheDocument();
   });
+
+  it('Should show "Exemplars: false" by default', async () => {
+    setup();
+    expect(screen.getByText('Exemplars: false')).toBeInTheDocument();
+  });
+
+  it('Should show "Exemplars: false" when query has "Exemplars: false"', async () => {
+    setup({ exemplar: false });
+    expect(screen.getByText('Exemplars: false')).toBeInTheDocument();
+  });
+
+  it('Should show "Exemplars: true" when query has "Exemplars: true"', async () => {
+    setup({ exemplar: true });
+    expect(screen.getByText('Exemplars: true')).toBeInTheDocument();
+  });
 });
 
 function setup(queryOverrides: Partial<PromQuery> = {}) {

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderOptions.tsx

@@ -57,7 +57,10 @@ export const PromQueryBuilderOptions = React.memo<Props>(({ query, app, onChange
 
   return (
     <EditorRow>
-      <QueryOptionGroup title="Options" collapsedInfo={getCollapsedInfo(query, formatOption.label!, queryTypeLabel)}>
+      <QueryOptionGroup
+        title="Options"
+        collapsedInfo={getCollapsedInfo(query, formatOption.label!, queryTypeLabel, app)}
+      >
         <PromQueryLegendEditor
           legendFormat={query.legendFormat}
           onChange={(legendFormat) => onChange({ ...query, legendFormat })}
@@ -89,7 +92,7 @@ export const PromQueryBuilderOptions = React.memo<Props>(({ query, app, onChange
         </EditorField>
         {shouldShowExemplarSwitch(query, app) && (
           <EditorField label="Exemplars">
-            <EditorSwitch value={query.exemplar} onChange={onExemplarChange} />
+            <EditorSwitch value={query.exemplar || false} onChange={onExemplarChange} />
           </EditorField>
         )}
         {query.intervalFactor && query.intervalFactor > 1 && (
@@ -120,7 +123,7 @@ function getQueryTypeValue(query: PromQuery) {
   return query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range';
 }
 
-function getCollapsedInfo(query: PromQuery, formatOption: string, queryType: string): string[] {
+function getCollapsedInfo(query: PromQuery, formatOption: string, queryType: string, app?: CoreApp): string[] {
   const items: string[] = [];
 
   items.push(`Legend: ${getLegendModeLabel(query.legendFormat)}`);
@@ -128,10 +131,13 @@ function getCollapsedInfo(query: PromQuery, formatOption: string, queryType: str
   items.push(`Step: ${query.interval ?? 'auto'}`);
   items.push(`Type: ${queryType}`);
 
-  if (query.exemplar) {
-    items.push(`Exemplars: true`);
+  if (shouldShowExemplarSwitch(query, app)) {
+    if (query.exemplar) {
+      items.push(`Exemplars: true`);
+    } else {
+      items.push(`Exemplars: false`);
+    }
   }
-
   return items;
 }