fix: add promql placeholder text (#53321)

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -303,6 +303,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
                     onChange={this.onChangeQuery}
                     onRunQuery={this.props.onRunQuery}
                     initialValue={query.expr ?? ''}
+                    placeholder="Enter a PromQL query…"
                   />
                 </div>
               </div>

public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryField.tsx

@@ -70,12 +70,19 @@ function ensurePromQL(monaco: Monaco) {
   }
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
   return {
     container: css`
       border-radius: ${theme.shape.borderRadius()};
       border: 1px solid ${theme.components.input.borderColor};
     `,
+    placeholder: css`
+      ::after {
+        content: '${placeholder}';
+        font-family: ${theme.typography.fontFamilyMonospace};
+        opacity: 0.3;
+      }
+    `,
   };
 };
 
@@ -83,7 +90,7 @@ const MonacoQueryField = (props: Props) => {
   // we need only one instance of `overrideServices` during the lifetime of the react component
   const overrideServicesRef = useRef(getOverrideServices());
   const containerRef = useRef<HTMLDivElement>(null);
-  const { languageProvider, history, onBlur, onRunQuery, initialValue } = props;
+  const { languageProvider, history, onBlur, onRunQuery, initialValue, placeholder } = props;
 
   const lpRef = useLatest(languageProvider);
   const historyRef = useLatest(history);
@@ -93,7 +100,7 @@ const MonacoQueryField = (props: Props) => {
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
 
   const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, placeholder);
 
   useEffect(() => {
     // when we unmount, we unregister the autocomplete-function, if it was registered
@@ -200,12 +207,40 @@ const MonacoQueryField = (props: Props) => {
             onRunQueryRef.current(editor.getValue());
           });
 
-          /* Something in this configuration of monaco doesn't bubble up [mod]+K, which the 
+          /* Something in this configuration of monaco doesn't bubble up [mod]+K, which the
           command palette uses. Pass the event out of monaco manually
           */
           editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, function () {
             global.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
           });
+
+          if (placeholder) {
+            const placeholderDecorators = [
+              {
+                range: new monaco.Range(1, 1, 1, 1),
+                options: {
+                  className: styles.placeholder,
+                  isWholeLine: true,
+                },
+              },
+            ];
+
+            let decorators: string[] = [];
+
+            const checkDecorators: () => void = () => {
+              const model = editor.getModel();
+
+              if (!model) {
+                return;
+              }
+
+              const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
+              decorators = model.deltaDecorations(decorators, newDecorators);
+            };
+
+            checkDecorators();
+            editor.onDidChangeModelContent(checkDecorators);
+          }
         }}
       />
     </div>

public/app/plugins/datasource/prometheus/components/monaco-query-field/MonacoQueryFieldProps.ts

@@ -11,6 +11,7 @@ export type Props = {
   initialValue: string;
   languageProvider: PromQlLanguageProvider;
   history: Array<HistoryItem<PromQuery>>;
+  placeholder: string;
   onRunQuery: (value: string) => void;
   onBlur: (value: string) => void;
 };