Monaco: option to hide line numbers (#25920)

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

 import React from 'react';
 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 { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './CodeEditor.mdx';
 import mdx from './CodeEditor.mdx';
@@ -24,6 +24,9 @@ const getKnobs = () => {
     containerWidth,
     containerWidth,
     text: text('Body', 'SELECT * FROM table LIMIT 10'),
     text: text('Body', 'SELECT * FROM table LIMIT 10'),
     language: text('Language', 'sql'),
     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 = () => {
 export const basic = () => {
-  const { containerWidth, text, language } = getKnobs();
+  const { containerWidth, text, language, showLineNumbers, showMiniMap, readOnly } = getKnobs();
   return (
   return (
     <CodeEditor
     <CodeEditor
       width={containerWidth}
       width={containerWidth}
@@ -52,6 +55,9 @@ export const basic = () => {
       onSave={(text: string) => {
       onSave={(text: string) => {
         action('code saved')(text);
         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;
   readOnly?: boolean;
   showMiniMap?: boolean;
   showMiniMap?: boolean;
+  showLineNumbers?: boolean;
 
 
   /**
   /**
    * Callback after the editor has mounted that gives you raw access to monaco
    * Callback after the editor has mounted that gives you raw access to monaco
@@ -56,10 +57,31 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
   };
   };
 
 
   render() {
   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 value = this.props.value ?? '';
     const longText = value.length > 100;
     const longText = value.length > 100;
 
 
+    const options: editor.IEditorConstructionOptions = {
+      wordWrap: 'off',
+      codeLens: false, // not included in the bundle
+      minimap: {
+        enabled: longText && showMiniMap,
+        renderCharacters: false,
+      },
+      readOnly,
+      lineNumbersMinChars: 4,
+      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 (
     return (
       <div onBlur={this.onBlur}>
       <div onBlur={this.onBlur}>
         <ReactMonaco
         <ReactMonaco
@@ -68,19 +90,7 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
           language={language}
           language={language}
           theme={theme.isDark ? 'vs-dark' : 'vs-light'}
           theme={theme.isDark ? 'vs-dark' : 'vs-light'}
           value={value}
           value={value}
-          options={{
-            wordWrap: 'off',
-            codeLens: false, // not included in the bundle
-            minimap: {
-              enabled: longText && showMiniMap,
-              renderCharacters: false,
-            },
-            readOnly,
-            lineNumbersMinChars: 4,
-            lineDecorationsWidth: 0,
-            overviewRulerBorder: false,
-            automaticLayout: true,
-          }}
+          options={options}
           editorDidMount={this.editorDidMount}
           editorDidMount={this.editorDidMount}
         />
         />
       </div>
       </div>

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

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

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

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