Prometheus: Fix empty query string (expr) breaking dashboard panel (#69938)

* empty string if query.expr is undefined or null

public/app/plugins/datasource/prometheus/querybuilder/QueryPatternsModal.tsx

@@ -32,7 +32,7 @@ export const QueryPatternsModal = (props: Props) => {
   const styles = useStyles2(getStyles);
   const hasNewQueryOption = !!onAddQuery;
   const hasPreviousQuery = useMemo(() => {
-    const visualQuery = buildVisualQueryFromString(query.expr);
+    const visualQuery = buildVisualQueryFromString(query.expr ?? '');
     // has anything entered in the query, metric, labels, operations, or binary queries
     const hasOperations = visualQuery.query.operations.length > 0,
       hasMetric = visualQuery.query.metric,

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

@@ -93,7 +93,7 @@ const stateSlice = createSlice({
     exprChanged: (state, action: PayloadAction<string>) => {
       if (!state.visQuery || state.expr !== action.payload) {
         state.expr = action.payload;
-        const parseResult = buildVisualQueryFromString(action.payload);
+        const parseResult = buildVisualQueryFromString(action.payload ?? '');
 
         state.visQuery = parseResult.query;
       }

public/app/plugins/datasource/prometheus/querybuilder/parsing.test.ts

@@ -293,6 +293,22 @@ describe('buildVisualQueryFromString', () => {
     );
   });
 
+  it('Throws error when undefined', () => {
+    expect(() => buildVisualQueryFromString(undefined as unknown as string)).toThrow(
+      "Cannot read properties of undefined (reading 'replace')"
+    );
+  });
+
+  it('Works with empty string', () => {
+    expect(buildVisualQueryFromString('')).toEqual(
+      noErrors({
+        metric: '',
+        labels: [],
+        operations: [],
+      })
+    );
+  });
+
   it('fails to parse variable for function', () => {
     expect(buildVisualQueryFromString('${func_var}(metric{bar="foo"})')).toEqual({
       errors: [