Monaco: option to hide line numbers (#25920)

packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { number, text } from '@storybook/addon-knobs';
+import { number, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './CodeEditor.mdx';
@@ -24,6 +24,9 @@ const getKnobs = () => {
     containerWidth,
     text: text('Body', 'SELECT * FROM table LIMIT 10'),
     language: text('Language', 'sql'),
+    showLineNumbers: boolean('Show line numbers', false),
+    showMiniMap: boolean('Show mini map', false),
+    readOnly: boolean('readonly', false),
   };
 };
 
@@ -39,7 +42,7 @@ export default {
 };
 
 export const basic = () => {
-  const { containerWidth, text, language } = getKnobs();
+  const { containerWidth, text, language, showLineNumbers, showMiniMap, readOnly } = getKnobs();
   return (
     <CodeEditor
       width={containerWidth}
@@ -52,6 +55,9 @@ export const basic = () => {
       onSave={(text: string) => {
         action('code saved')(text);
       }}
+      showLineNumbers={showLineNumbers}
+      showMiniMap={showMiniMap}
+      readOnly={readOnly}
     />
   );
 };

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -12,6 +12,7 @@ export interface CodeEditorProps {
 
   readOnly?: boolean;
   showMiniMap?: boolean;
+  showLineNumbers?: boolean;
 
   /**
    * Callback after the editor has mounted that gives you raw access to monaco
@@ -56,19 +57,11 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
   };
 
   render() {
-    const { theme, language, width, height, showMiniMap, readOnly } = this.props;
+    const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly } = this.props;
     const value = this.props.value ?? '';
     const longText = value.length > 100;
 
-    return (
+    const options: editor.IEditorConstructionOptions = {
-      <div onBlur={this.onBlur}>
-        <ReactMonaco
-          width={width}
-          height={height}
-          language={language}
-          theme={theme.isDark ? 'vs-dark' : 'vs-light'}
-          value={value}
-          options={{
       wordWrap: 'off',
       codeLens: false, // not included in the bundle
       minimap: {
@@ -80,7 +73,24 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
       lineDecorationsWidth: 0,
       overviewRulerBorder: false,
       automaticLayout: true,
-          }}
+    };
+    if (!showLineNumbers) {
+      options.glyphMargin = false;
+      options.folding = false;
+      options.lineNumbers = 'off';
+      options.lineDecorationsWidth = 5; // left margin when not showing line numbers
+      options.lineNumbersMinChars = 0;
+    }
+
+    return (
+      <div onBlur={this.onBlur}>
+        <ReactMonaco
+          width={width}
+          height={height}
+          language={language}
+          theme={theme.isDark ? 'vs-dark' : 'vs-light'}
+          value={value}
+          options={options}
           editorDidMount={this.editorDidMount}
         />
       </div>

public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx

@@ -116,7 +116,7 @@ export class InspectJSONTab extends PureComponent<Props, State> {
 
   render() {
     const { dashboard } = this.props;
-    const { show } = this.state;
+    const { show, text } = this.state;
     const selected = options.find(v => v.value === show);
     const isPanelJSON = show === ShowContent.PanelJSON;
     const canEdit = dashboard.meta.canEdit;
@@ -141,7 +141,9 @@ export class InspectJSONTab extends PureComponent<Props, State> {
                 width="100%"
                 height={height}
                 language="json"
-                value={this.state.text}
+                showLineNumbers={true}
+                showMiniMap={text && text.length > 100}
+                value={text || ''}
                 readOnly={!isPanelJSON}
                 onBlur={this.onTextChanged}
               />

public/app/plugins/panel/text/TextPanelEditor.tsx

@@ -26,6 +26,7 @@ export const TextPanelEditor: FC<StandardEditorProps<string, any, TextOptions>>
               language={language}
               width={width}
               showMiniMap={false}
+              showLineNumbers={false}
               height="200px"
             />
           );