Update Redis CLI auto-scrolling textarea to autosize (#26)

* Add auto resizing for redis cli textarea * Update Icon * Update styles Co-authored-by: Mikhail <[email protected]>
RedisGrafana · Dec 29, 2020 · edffd91 · edffd91
1 parent edf9ec9
commit edffd91
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 36 deletions.
diff --git a/src/redis-cli-panel/components/redis-cli-panel.test.tsx b/src/redis-cli-panel/components/redis-cli-panel.test.tsx
@@ -109,7 +109,6 @@ describe('RedisCLIPanel', () => {
       const testedComponent = wrapper.find(AutoScrollingTextarea);
       expect(testedComponent.exists()).toBeTruthy();
       expect(testedComponent.prop('value')).toEqual(options.output);
-      expect(testedComponent.prop('rows')).toEqual(options.height);
     });
 
     /*

diff --git a/src/redis-cli-panel/components/redis-cli-panel.tsx b/src/redis-cli-panel/components/redis-cli-panel.tsx
@@ -123,8 +123,8 @@ export const RedisCLIPanel: React.FC<PanelProps<PanelOptions>> = ({
         `
       )}
     >
-      <div className="gf-form">
-        <AutoScrollingTextarea className={cx(styles.textarea)} value={output} rows={options.height} />
+      <div className={cx('gf-form', styles.form)}>
+        <AutoScrollingTextarea className={cx(styles.textarea)} value={output} />
       </div>
 
       {query && help && (

diff --git a/src/redis-cli-panel/img/logo.svg b/src/redis-cli-panel/img/logo.svg
diff --git a/src/redis-cli-panel/module.test.ts b/src/redis-cli-panel/module.test.ts
@@ -8,12 +8,4 @@ describe('plugin', () => {
   it('should be instance of PanelPlugin', () => {
     expect(plugin).toBeInstanceOf(PanelPlugin);
   });
-
-  it('Should add textarea height input', () => {
-    const builder = {
-      addNumberInput: jest.fn(),
-    };
-    plugin['registerOptionEditors'](builder);
-    expect(builder.addNumberInput).toHaveBeenCalledWith({ path: 'height', name: 'Textarea height', defaultValue: 12 });
-  });
 });
diff --git a/src/redis-cli-panel/module.ts b/src/redis-cli-panel/module.ts
@@ -5,10 +5,4 @@ import { PanelOptions } from './types';
 /**
  * Panel Plugin
  */
-export const plugin = new PanelPlugin<PanelOptions>(RedisCLIPanel).setPanelOptions((builder) => {
-  return builder.addNumberInput({
-    path: 'height',
-    name: 'Textarea height',
-    defaultValue: 12,
-  });
-});
+export const plugin = new PanelPlugin<PanelOptions>(RedisCLIPanel);
diff --git a/src/redis-cli-panel/styles.ts b/src/redis-cli-panel/styles.ts
@@ -13,14 +13,19 @@ export const Styles = stylesFactory(() => {
   return {
     wrapper: css`
       position: relative;
+      min-height: 100px;
     `,
     textarea: css`
       font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
         Courier New, monospace;
+      height: 100%;
+    `,
+    form: css`
+      height: calc(100% - 40px);
     `,
     help: css`
       position: absolute;
-      bottom: 100px;
+      bottom: 80px;
       left: 10px;
       width: calc(100% - 22px);
       min-height: 124px;

diff --git a/src/redis-cli-panel/types.ts b/src/redis-cli-panel/types.ts
@@ -14,13 +14,6 @@ import {
  * Panel Options
  */
 export interface PanelOptions {
-  /**
-   * TextArea Height
-   *
-   * @type {number}
-   */
-  height: number;
-
   /**
    * Query command
    *