import Button from 'antd/lib/button';
import Drawer from 'antd/lib/drawer';
import Icon from 'antd/lib/icon';
import List from 'antd/lib/list';
import Popconfirm from 'antd/lib/popconfirm';
import React, { useState, useContext, useEffect } from 'react';
import ConnectionEditDrawer from './ConnectionEditDrawer';
import { ConnectionsContext } from './ConnectionsStore';
import AppContext from '../containers/AppContext';

function ConnectionListDrawer({ visible, onClose }) {
  const [connectionId, setConnectionId] = useState(null);
  const [showEdit, setShowEdit] = useState(false);
  const appContext = useContext(AppContext);
  const connectionsContext = useContext(ConnectionsContext);

  const { currentUser } = appContext;
  const {
    selectConnection,
    selectedConnectionId,
    connections,
    deleteConnection
  } = connectionsContext;

  useEffect(() => {
    connectionsContext.loadConnections();
  }, []);

  useEffect(() => {
    if (!showEdit) {
      onClose();
    }
  }, [showEdit]);

  const editConnection = connection => {
    setConnectionId(connection._id);
    setShowEdit(true);
  };

  const newConnection = () => {
    setConnectionId(null);
    setShowEdit(true);
  };

  const handleEditDrawerClose = () => {
    setConnectionId(null);
    setShowEdit(false);
  };

  const handleConnectionSaved = connection => {
    const { addUpdateConnection, selectConnection } = connectionsContext;
    addUpdateConnection(connection);
    setConnectionId(null);
    setShowEdit(false);
    // If there was not a connectionId previously passed to edit drawer
    // this is a new connection
    // New connections can be selected and then all the drawer closed
    if (!connectionId) {
      selectConnection(connection._id);
    }
  };

  // TODO - server driver implementations should implement functions
  // that get decorated normalized display values
  const decoratedConnections = connections.map(connection => {
    connection.key = connection._id;
    connection.displayDatabase = connection.database;
    connection.displaySchema = '';
    let displayPort = connection.port ? ':' + connection.port : '';

    if (connection.driver === 'hdb') {
      connection.displayDatabase = connection.hanadatabase;
      connection.displaySchema = connection.hanaSchema;
      displayPort = connection.hanaport ? ':' + connection.hanaport : '';
    } else if (connection.driver === 'presto') {
      connection.displayDatabase = connection.prestoCatalog;
      connection.displaySchema = connection.prestoSchema;
    }

    connection.displayHost = (connection.host || '') + displayPort;
    return connection;
  });

  // The last "connection" list item will be an input to add a connection
  // This is just something simple to branch off of in List.renderItem prop
  if (currentUser.role === 'admin') {
    decoratedConnections.push('ADD_BUTTON');
  }

  return (
    <Drawer
      title="Connections"
      visible={visible}
      width={600}
      destroyOnClose={true}
      onClose={onClose}
      placement="left"
      style={{
        height: 'calc(100% - 55px)',
        overflow: 'auto'
      }}
    >
      <List
        itemLayout="horizontal"
        dataSource={decoratedConnections}
        renderItem={item => {
          if (item === 'ADD_BUTTON') {
            return (
              <List.Item>
                <Button size="large" className="w-100" onClick={newConnection}>
                  <Icon type="plus" /> Add connection
                </Button>
              </List.Item>
            );
          }

          let description = '';
          if (item.user) {
            description = item.user + '@';
          }
          description += [
            item.displayHost,
            item.displayDatabase,
            item.displaySchema
          ]
            .filter(part => part && part.trim())
            .join(' / ');

          const actions = [];

          if (selectedConnectionId === item._id) {
            actions.push(
              <Button className="w4" disabled>
                selected
              </Button>
            );
          } else {
            actions.push(
              <Button
                className="w4"
                onClick={() => {
                  selectConnection(item._id);
                  onClose();
                }}
              >
                select
              </Button>
            );
          }

          if (currentUser.role === 'admin') {
            actions.push(
              <Button onClick={() => editConnection(item)}>edit</Button>
            );
            actions.push(
              <Popconfirm
                title="Delete connection?"
                onConfirm={e => deleteConnection(item._id)}
                onCancel={() => {}}
                okText="Yes"
                cancelText="No"
              >
                <Button icon="delete" type="danger" />
              </Popconfirm>
            );
          }

          return (
            <List.Item actions={actions}>
              <List.Item.Meta
                title={item.name}
                description={
                  <div>
                    {item.driver}
                    <br />
                    {description}
                  </div>
                }
              />
            </List.Item>
          );
        }}
      />
      <ConnectionEditDrawer
        connectionId={connectionId}
        visible={showEdit}
        onClose={handleEditDrawerClose}
        onConnectionSaved={handleConnectionSaved}
        placement="left"
      />
    </Drawer>
  );
}

export default ConnectionListDrawer;

@@ -736,77 +736,21 @@
 st %7B
-%0A    selectConnection,%0A    selectedConnectionId,%0A    connections,%0A   
+ connections,
  del
@@ -762,18 +762,16 @@
 nnection
-%0A 
  %7D = con
@@ -3848,512 +3848,8 @@
 %5D;%0A%0A
-          if (selectedConnectionId === item._id) %7B%0A            actions.push(%0A              %3CButton className=%22w4%22 disabled%3E%0A                selected%0A              %3C/Button%3E%0A            );%0A          %7D else %7B%0A            actions.push(%0A              %3CButton%0A                className=%22w4%22%0A                onClick=%7B() =%3E %7B%0A                  selectConnection(item._id);%0A                  onClose();%0A                %7D%7D%0A              %3E%0A                select%0A              %3C/Button%3E%0A            );%0A          %7D%0A%0A
     

Remove query select button from connections list drawer