Update CLI Panel helpers for Redis 6.2 and modules (#40)

* Refactoring

* Update commands

src/redis-cli-panel/components/auto-scrolling-text-area/auto-scrolling-text-area.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { TextArea } from '@grafana/ui';
+import { CLITextArea } from './auto-scrolling-text-area';
+
+/**
+ * CLI TextArea
+ */
+describe('CLITextArea', () => {
+  it('Should set scrollTop if autoScroll=true', () => {
+    const wrapper = shallow<typeof CLITextArea>(<CLITextArea value="123" autoScroll />);
+    jest.spyOn(wrapper.instance(), 'render');
+    const element = {
+      scrollHeight: 0,
+      scrollTop: 0,
+    };
+
+    expect(element.scrollTop).toEqual(element.scrollHeight);
+  });
+
+  it('Should pass props to Textarea', () => {
+    const onChangeMock = jest.fn();
+    const value = '1234';
+    const wrapper = shallow(<CLITextArea value={value} onChange={onChangeMock} />);
+    const testedComponent = wrapper.find(TextArea);
+    expect(testedComponent.exists()).toBeTruthy();
+    expect(testedComponent.prop('value')).toEqual(value);
+    expect(testedComponent.prop('onChange')).toEqual(onChangeMock);
+  });
+
+  it('Should set ref', () => {
+    const wrapper = mount<typeof CLITextArea>(<CLITextArea />);
+    expect(wrapper.instance()).toBeTruthy();
+  });
+});

src/redis-cli-panel/components/auto-scrolling-text-area.tsx → src/redis-cli-panel/components/auto-scrolling-text-area/auto-scrolling-text-area.tsx

@@ -9,7 +9,7 @@ type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 /**
  * Auto scrolling text area
  */
-export default class AutoScrollingTextArea extends React.Component<TextareaProps & { autoScroll?: boolean }, {}> {
+export class AutoScrollingTextArea extends React.Component<TextareaProps & { autoScroll?: boolean }, {}> {
   element: HTMLTextAreaElement | null | undefined;
 
   /**
@@ -40,3 +40,5 @@ export default class AutoScrollingTextArea extends React.Component<TextareaProps
     return <TextArea {...this.props} css="" ref={(element) => (this.element = element)} />;
   }
 }
+
+export const CLITextArea = AutoScrollingTextArea;

src/redis-cli-panel/components/auto-scrolling-text-area/index.ts

@@ -0,0 +1 @@
+export * from './auto-scrolling-text-area';

src/redis-cli-panel/components/redis-cli-panel/index.ts

@@ -0,0 +1 @@
+export * from './redis-cli-panel';

src/redis-cli-panel/components/redis-cli-panel.test.tsx → src/redis-cli-panel/components/redis-cli-panel/redis-cli-panel.test.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Observable } from 'rxjs';
-import { PanelData, LoadingState } from '@grafana/data';
+import { LoadingState, PanelData } from '@grafana/data';
 import { Button } from '@grafana/ui';
-import { PanelOptions, Help } from '../types';
+import { Help } from '../../constants';
+import { PanelOptions } from '../../types';
 import { RedisCLIPanel } from './redis-cli-panel';
-import AutoScrollingTextarea from './auto-scrolling-text-area';
+import { CLITextArea } from '../auto-scrolling-text-area';
 
+/**
+ * Override
+ */
 interface OverrideOptions {
   height?: number;
   query?: string;
@@ -29,6 +33,11 @@ const getOptions = ({ help = {}, ...overrideOptions }: OverrideOptions = {}): Pa
 
 type ShallowComponent = ShallowWrapper<typeof RedisCLIPanel>;
 
+/**
+ * Query result
+ *
+ * @param values
+ */
 const getDataSourceQueryResult = (values: string[]) => ({
   data: [
     {
@@ -46,8 +55,8 @@ const getDataSourceQueryResult = (values: string[]) => ({
   ],
 });
 
-/*
- DataSource
+/**
+ * DataSource
  */
 const dataSourceMock = {
   query: jest.fn().mockImplementation(
@@ -68,8 +77,8 @@ jest.mock('@grafana/runtime', () => ({
   }),
 }));
 
-/*
- RedisCLIPanel
+/**
+ * Redis CLI Panel
  */
 describe('RedisCLIPanel', () => {
   const width = 300;
@@ -90,8 +99,8 @@ describe('RedisCLIPanel', () => {
     dataSourceSrvGetMock.mockClear();
   });
 
-  /*
-   Rendering elements
+  /**
+   * Rendering elements
    */
   describe('Rendering elements', () => {
     it('Should show AutoScrollingTextarea', () => {
@@ -106,13 +115,13 @@ describe('RedisCLIPanel', () => {
           options={options}
         />
       );
-      const testedComponent = wrapper.find(AutoScrollingTextarea);
+      const testedComponent = wrapper.find(CLITextArea);
       expect(testedComponent.exists()).toBeTruthy();
       expect(testedComponent.prop('value')).toEqual(options.output);
     });
 
-    /*
-     Help
+    /**
+     * Help
      */
     describe('Help', () => {
       const getHelpComponent = (wrapper: ShallowComponent) => {
@@ -275,8 +284,8 @@ describe('RedisCLIPanel', () => {
     });
   });
 
-  /*
-   Query
+  /**
+   * Query
    */
   describe('Query', () => {
     const getTestedComponent = (wrapper: ShallowComponent) => {

src/redis-cli-panel/components/redis-cli-panel.tsx → src/redis-cli-panel/components/redis-cli-panel/redis-cli-panel.tsx

@@ -5,9 +5,10 @@ import { map as map$, switchMap as switchMap$ } from 'rxjs/operators';
 import { DataFrame, DataQueryRequest, DataQueryResponse, PanelProps } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { Button, LegacyForms } from '@grafana/ui';
-import { Styles } from '../styles';
-import { Help, HelpCommand, PanelOptions, RedisQuery } from '../types';
-import AutoScrollingTextarea from './auto-scrolling-text-area';
+import { Help } from '../../constants';
+import { Styles } from '../../styles';
+import { HelpCommand, PanelOptions, RedisQuery } from '../../types';
+import { CLITextArea } from '../auto-scrolling-text-area';
 
 /**
  * Legacy Forms
@@ -143,7 +144,7 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
       )}
     >
       <div className={cx('gf-form', styles.form)}>
-        <AutoScrollingTextarea className={cx(styles.textarea)} value={output} />
+        <CLITextArea className={cx(styles.textarea)} value={output} />
       </div>
 
       {query && help && (

src/redis-cli-panel/constants.ts

@@ -0,0 +1,25 @@
+import {
+  RedisAIHelp,
+  RedisBloomHelp,
+  RedisGearsHelp,
+  RedisGraphHelp,
+  RedisHelp,
+  RedisJSONHelp,
+  RedisSearchHelp,
+  RedisTimeSeriesHelp,
+} from './help';
+import { HelpCommand } from './types';
+
+/**
+ * Help for native redis commands and modules
+ */
+export const Help: { [key: string]: HelpCommand } = {
+  ...RedisHelp,
+  ...RedisAIHelp,
+  ...RedisBloomHelp,
+  ...RedisGearsHelp,
+  ...RedisGraphHelp,
+  ...RedisJSONHelp,
+  ...RedisSearchHelp,
+  ...RedisTimeSeriesHelp,
+};

src/redis-cli-panel/help/redis-ai.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisAI
+ *
  * @see https://oss.redislabs.com/redisai/
  */
 export const RedisAIHelp: { [key: string]: HelpCommand } = {

src/redis-cli-panel/help/redis-bloom.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisBloom
+ *
  * @see https://oss.redislabs.com/redisbloom/
  */
 export const RedisBloomHelp: { [key: string]: HelpCommand } = {

src/redis-cli-panel/help/redis-gears.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisGears
+ *
  * @see https://oss.redislabs.com/redisgears
  */
 export const RedisGearsHelp: { [key: string]: HelpCommand } = {

src/redis-cli-panel/help/redis-graph.ts

@@ -1,25 +1,26 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisGraph
+ *
  * @see https://oss.redislabs.com/redisgraph/
  */
 export const RedisGraphHelp: { [key: string]: HelpCommand } = {
   GRAPH: {
-    syntax: 'GRAPH.QUERY, GRAPH.PROFILE, GRAPH.DELETE, GRAPH.EXPLAIN, GRAPH SLOWLOG',
+    syntax: 'GRAPH.QUERY, GRAPH.PROFILE, GRAPH.DELETE, GRAPH.EXPLAIN, GRAPH.SLOWLOG, GRAPH.CONFIG',
     summary:
       'RedisGraph is the first queryable Property Graph database to use sparse matrices to represent the \
     adjacency matrix in graphs and linear algebra to query the graph.',
     url: 'https://oss.redislabs.com/redisgraph/',
   },
   'GRAPH QUERY': {
     syntax: 'GRAPH.QUERY <graph name> {query}',
-    summary: 'Execute the given query against a specified graph.',
+    summary: 'Executes the given query against a specified graph.',
     url: 'https://oss.redislabs.com/redisgraph/commands/#graphquery',
   },
   'GRAPH PROFILE': {
-    syntax: 'GRAPH.QUERY <graph name> {query}',
-    summary: "Execute a query and produces an execution plan augmented with metrics for each operation's execution.",
+    syntax: 'GRAPH.PROFILE <graph name> {query}',
+    summary: "Executes a query and produces an execution plan augmented with metrics for each operation's execution.",
     url: 'https://oss.redislabs.com/redisgraph/commands/#graphprofile',
   },
   'GRAPH DELETE': {
@@ -30,13 +31,18 @@ export const RedisGraphHelp: { [key: string]: HelpCommand } = {
   'GRAPH EXPLAIN': {
     syntax: 'GRAPH.EXPLAIN <graph name> {query}',
     summary:
-      'Construct a query execution plan but does not run it. Inspect this execution plan to better \
+      'Constructs a query execution plan but does not run it. Inspect this execution plan to better \
     understand how your query will get executed.',
     url: 'https://oss.redislabs.com/redisgraph/commands/#graphexplain',
   },
   'GRAPH SLOWLOG': {
-    syntax: 'GRAPH.SLOWLOG',
-    summary: 'Return a list containing up to 10 of the slowest queries issued against the given graph ID.',
+    syntax: 'GRAPH.SLOWLOG <graph name>',
+    summary: 'Returns a list containing up to 10 of the slowest queries issued against the given graph ID.',
     url: 'https://oss.redislabs.com/redisgraph/commands/#graphslowlog',
   },
+  'GRAPH CONFIG': {
+    syntax: 'GRAPH.CONFIG GET/SET <config name> [value] value',
+    summary: 'Retrieves or updates a RedisGraph configuration.',
+    url: 'https://oss.redislabs.com/redisgraph/commands/#graphconfig',
+  },
 };

src/redis-cli-panel/help/redis-json.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisJSON
+ *
  * @see https://oss.redislabs.com/redisjson/
  */
 export const RedisJSONHelp: { [key: string]: HelpCommand } = {

src/redis-cli-panel/help/redis-search.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RediSearch
+ *
  * @see https://oss.redislabs.com/redisearch/
  */
 export const RedisSearchHelp: { [key: string]: HelpCommand } = {

src/redis-cli-panel/help/redis-time-series.ts

@@ -1,7 +1,8 @@
-import { HelpCommand } from 'redis-cli-panel/types';
+import { HelpCommand } from '../types';
 
 /**
  * RedisTimeSeries
+ *
  * @see https://oss.redislabs.com/redistimeseries/
  */
 export const RedisTimeSeriesHelp: { [key: string]: HelpCommand } = {