chore: add an option to hide the metrics browser in a PromQueryField (#108718)

packages/grafana-prometheus/src/components/PromQueryField.test.tsx

@@ -80,6 +80,19 @@ describe('PromQueryField', () => {
     expect(bcButton).toBeDisabled();
   });
 
+  it('renders no metrics chooser if hidden by props', async () => {
+    const props = {
+      ...defaultProps,
+      hideMetricsBrowser: true,
+    };
+    const queryField = render(<PromQueryField {...props} />);
+
+    // wait for component to render
+    await screen.findByTestId('dummy-code-input');
+
+    expect(queryField.queryByRole('button')).not.toBeInTheDocument();
+  });
+
   it('renders an initial hint if no data and initial hint provided', async () => {
     const props = defaultProps;
     props.datasource.lookupsDisabled = true;

packages/grafana-prometheus/src/components/PromQueryField.tsx

@@ -25,6 +25,7 @@ import { MonacoQueryFieldWrapper } from './monaco-query-field/MonacoQueryFieldWr
 
 interface PromQueryFieldProps extends QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions> {
   ExtraFieldElement?: ReactNode;
+  hideMetricsBrowser?: boolean;
   'data-testid'?: string;
 }
 
@@ -40,6 +41,7 @@ export const PromQueryField = (props: PromQueryFieldProps) => {
     range,
     onChange,
     onRunQuery,
+    hideMetricsBrowser = false,
   } = props;
 
   const theme = useTheme2();
@@ -111,20 +113,22 @@ export const PromQueryField = (props: PromQueryFieldProps) => {
         className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1"
         data-testid={props['data-testid']}
       >
-        <button
+        {!hideMetricsBrowser && (
-          className="gf-form-label query-keyword pointer"
+          <button
-          onClick={onClickChooserButton}
+            className="gf-form-label query-keyword pointer"
-          disabled={datasource.lookupsDisabled}
+            onClick={onClickChooserButton}
-          type="button"
+            disabled={datasource.lookupsDisabled}
-          data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.openButton}
+            type="button"
-        >
+            data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.openButton}
-          {datasource.lookupsDisabled ? (
+          >
-            <Trans i18nKey="grafana-prometheus.metrics-browser.disabled-label">(Disabled)</Trans>
+            {datasource.lookupsDisabled ? (
-          ) : (
+              <Trans i18nKey="grafana-prometheus.metrics-browser.disabled-label">(Disabled)</Trans>
-            <Trans i18nKey="grafana-prometheus.metrics-browser.enabled-label">Metrics browser</Trans>
+            ) : (
-          )}
+              <Trans i18nKey="grafana-prometheus.metrics-browser.enabled-label">Metrics browser</Trans>
-          <Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />
+            )}
-        </button>
+            <Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />
+          </button>
+        )}
 
         <div className="flex-grow-1 min-width-15">
           <MonacoQueryFieldWrapper