render()

in src/VariableQueryEditor.tsx [33:88]
49 lines of code
6 McCabe index (conditional complexity)

  render() {
    const { query } = this.props.query;

    return (
      <>
        <div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
          {/* <FormField
            style={{ fontFamily: 'Menlo, monospace' }}
            labelWidth={6}
            inputWidth={30}
            value={query}
            onChange={this.onQueryTextChange}
            label="query"
          /> */}
          <InlineFormLabel width={6} className="query-keyword">
            Query
          </InlineFormLabel>
          {version === '' ||
          version.startsWith('8.0') ||
          version.startsWith('8.1') ||
          version.startsWith('8.2') ||
          version.startsWith('7') ? (
            // <input
            //   className="gf-form-input"
            //   value={query}
            //   onChange={this.onQueryTextChange}
            //   onBlur={this.onQueryTextChange}
            //   style={{ fontFamily: 'Menlo, monospace' }}
            // ></input>
            <div style={{ width: "100%" }}>
              <MonacoQueryFieldOld
                onChange={this.onQueryTextChangeWithRunQuery}
                onRunQuery={this.onQueryTextChangeWithRunQuery}
                onBlur={this.onQueryTextChangeString}
                initialValue={query ?? ''}
                languageProvider={{} as any}
                history={[]}
                placeholder={''}
                disableMultiLine={true}
              />
            </div>
          ) : (
            <MonacoQueryField
              onChange={this.onQueryTextChangeString}
              onRunQuery={this.onQueryTextChangeWithRunQuery}
              onBlur={this.onQueryTextChangeString}
              initialValue={query ?? ''}
              languageProvider={{} as any}
              history={[]}
              placeholder={''}
            />
          )}
        </div>
      </>
    );
  }