Added dialog to create/edit new connection

- added layout components
- added connection reducer

.eslintrc.js

@@ -12,5 +12,13 @@ module.exports = {
         config: require.resolve('./configs/webpack.config.eslint.js')
       }
     }
-  }
+  },
+  overrides: [
+    {
+      files: ['**/*.tsx'],
+      rules: {
+        'react/prop-types': 'off'
+      }
+    }
+  ]
 };

app/actions/connection.ts

@@ -0,0 +1,10 @@
+import { RedisConnection } from '../types';
+
+export const SET_ACTIVE_CONNECTION = 'SET_ACTIVE_CONNECTION';
+
+export const setActiveConnection = (connection: RedisConnection) => {
+  return {
+    type: SET_ACTIVE_CONNECTION,
+    payload: connection
+  };
+};

app/app.global.css

@@ -15,3 +15,49 @@ body {
   overflow-y: hidden;
   margin: 0;
 }
+
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+
+.Resizer.disabled:hover {
+  border-color: transparent;
+}

app/components/Main.css

@@ -21,3 +21,7 @@
 .resultViewer {
   flex: 3;
 }
+
+.editorHeader {
+  height: 80px;
+}

app/components/Main.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@blueprintjs/core';
+import SplitPane from 'react-split-pane';
 import Sidebar from './sidebar/Sidebar';
 import styles from './Main.css';
 import Editor from './editor/Editor';
@@ -11,19 +11,25 @@ const Main: React.FC = () => {
   console.log(hello());
 
   return (
-    <div className={styles.container}>
+    <SplitPane split="vertical" minSize={250} maxSize={300} defaultSize={300}>
       <div className={styles.sidebar}>
         <Sidebar />
       </div>
-      <div className={styles.content}>
-        <div className={styles.editor}>
+      <SplitPane
+        split="horizontal"
+        pane1Style={styles.editorHeader.valueOf}
+        allowResize={false}
+      >
+        <div>horizontal</div>
+        <SplitPane split="horizontal">
           <Editor />
-        </div>
-        <div className={styles.resultViewer}>
-          <ResultViewer />
-        </div>
-      </div>
-    </div>
+
+          <div className={styles.resultViewer}>
+            <ResultViewer />
+          </div>
+        </SplitPane>
+      </SplitPane>
+    </SplitPane>
   );
 };
 

app/components/connection-dialog/ConnectionDialog.tsx

@@ -1,25 +1,126 @@
-import React from 'react';
-import { Dialog, FormGroup, InputGroup } from '@blueprintjs/core';
+import React, { useState } from 'react';
+import {
+  Dialog,
+  FormGroup,
+  InputGroup,
+  Classes,
+  Button,
+  Intent
+} from '@blueprintjs/core';
+import { RedisConnection } from '../../types';
 
-type Props = {
+interface Props {
   isOpen: boolean;
-};
+  onClose: () => null;
+  addConnection: () => null;
+  connection?: RedisConnection;
+}
+
+const ConnectionDialog: React.FC<Props> = ({
+  isOpen,
+  onClose,
+  addConnection,
+  connection: connectionProp
+}) => {
+  const [connection, setConnection] = useState<RedisConnection>(
+    connectionProp || {}
+  );
 
-const ConnectionDialog = () => {
   return (
-    <Dialog icon="info-sign">
-      <FormGroup
-        helperText="Helper text with details..."
-        label="Label A"
-        labelFor="text-input"
-        labelInfo="(required)"
-        inline
-        canEscapeKeyClose
-        canOutsideClickClose
-        enforceFocus
-      >
-        <InputGroup id="text-input" placeholder="Placeholder text" />
-      </FormGroup>
+    <Dialog
+      icon="info-sign"
+      isOpen={isOpen}
+      isCloseButtonShown
+      onClose={onClose}
+      canEscapeKeyClose
+      canOutsideClickClose
+      title="Add new connection"
+    >
+      <div className={Classes.DIALOG_BODY}>
+        <FormGroup
+          label="Connection name"
+          labelFor="name-input"
+          labelInfo="(required)"
+          inline
+        >
+          <InputGroup
+            id="name-input"
+            value={connection.name}
+            onChange={({ target: { value } }) =>
+              setConnection(prevState => ({ ...prevState, name: value }))
+            }
+          />
+        </FormGroup>
+
+        <FormGroup
+          label="Host"
+          labelFor="host-input"
+          labelInfo="(required)"
+          inline
+        >
+          <InputGroup
+            id="host-input"
+            value={connection.host}
+            onChange={({ target: { value } }) =>
+              setConnection(prevState => ({ ...prevState, host: value }))
+            }
+          />
+        </FormGroup>
+
+        <FormGroup
+          helperText="default 6379"
+          label="Port"
+          labelFor="port-input"
+          labelInfo="(required)"
+          inline
+        >
+          <InputGroup
+            id="port-input"
+            value={connection.port}
+            type="number"
+            onChange={({ target: { value } }) =>
+              setConnection(prevState => ({ ...prevState, port: value }))
+            }
+          />
+        </FormGroup>
+
+        <FormGroup
+          label="Password"
+          labelFor="password-input"
+          labelInfo="(optional)"
+          inline
+        >
+          <InputGroup
+            id="password-input"
+            value={connection.password}
+            onChange={({ target: { value } }) =>
+              setConnection(prevState => ({ ...prevState, password: value }))
+            }
+          />
+        </FormGroup>
+
+        <FormGroup label="DB" labelFor="db-input" labelInfo="(optional)" inline>
+          <InputGroup
+            id="db-input"
+            value={connection.db}
+            onChange={({ target: { value } }) =>
+              setConnection(prevState => ({ ...prevState, db: value }))
+            }
+          />
+        </FormGroup>
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={onClose}>Close</Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            onClick={() => addConnection(connection)}
+          >
+            Add connection
+          </Button>
+        </div>
+      </div>
     </Dialog>
   );
 };

app/components/editor/Editor.tsx

@@ -6,9 +6,24 @@ import styles from './Editor.css';
 const Editor: React.FC = () => {
   const [code, setCode] = useState('');
 
-  const options: MonacoEditor.IEditorConstructionOptions = {};
+  const options: MonacoEditor.IEditorConstructionOptions = {
+    automaticLayout: true,
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    cursorBlinking: 'smooth'
+  };
 
-  return <div>editor</div>;
+  return (
+    <div>
+      <MonacoEditorReact
+        language="redis"
+        value={code}
+        width="1000"
+        height="600"
+        options={options}
+      />
+    </div>
+  );
 };
 
 export default Editor;

app/components/sidebar/ConnectionList.css

@@ -0,0 +1,9 @@
+.listItemContainer {
+  margin: 8px;
+  display: inline-flex;
+}
+
+.connectionName {
+  font-size: 1rem;
+  margin-left: 8px;
+}

app/components/sidebar/ConnectionList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Icon } from '@blueprintjs/core';
+import styles from './ConnectionList.css';
+import { RedisConnection } from '../../types';
+
+interface ListItemProps {
+  connection: RedisConnection;
+}
+
+const ListItem: React.FC<ListItemProps> = ({ connection }) => {
+  return (
+    <div className={styles.listItemContainer}>
+      <Icon icon="chevron-down" iconSize={20} />
+      <div className={styles.connectionName}>{connection.name}</div>
+    </div>
+  );
+};
+
+interface Props {
+  dataSource: Array<RedisConnection>;
+}
+
+const ConnectionList: React.FC<Props> = ({ dataSource }) => {
+  const renderList = () =>
+    dataSource.map((item, index) => <ListItem connection={item} key={index} />);
+
+  return <div>{renderList()}</div>;
+};
+
+export default ConnectionList;

app/components/sidebar/Header.tsx

@@ -5,9 +5,14 @@ import styles from './Header.css';
 type Props = {
   searchTerm: string;
   onChangeSearch: (searchTerm: string) => null;
+  showConnectionDialog: () => null;
 };
 
-const Header: React.FC<Props> = ({ onChangeSearch, searchTerm }) => {
+const Header: React.FC<Props> = ({
+  searchTerm,
+  onChangeSearch,
+  showConnectionDialog
+}) => {
   return (
     <div className={styles.container}>
       <div className="bp3-input-group .modifier">
@@ -20,7 +25,7 @@ const Header: React.FC<Props> = ({ onChangeSearch, searchTerm }) => {
           onChange={({ target: { value } }) => onChangeSearch(value)}
         />
       </div>
-      <Button icon="plus" />
+      <Button icon="plus" onClick={showConnectionDialog} />
     </div>
   );
 };

app/components/sidebar/Sidebar.css

@@ -4,13 +4,15 @@
   flex-direction: column;
   flex: 1;
   height: 100vh;
-  margin: 8px;
 }
 
 .header {
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 .connectionlist {
   display: flex;
   flex: 1;
+  margin: 8px;
 }