From 3ee637c57cdf342310cdf07dab2a3bf629782c39 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Wed, 30 Sep 2020 15:45:04 +0530
Subject: [PATCH] Datasource explorer fixes (#789)

- Expand datasource by default
- Let column/key name take more space.
- Show column popup on hover instead of click
---
 .../Explorer/Datasources/DatasourceField.tsx  | 32 ++++++++++++-------
 .../Explorer/Datasources/DatasourcesGroup.tsx |  6 +---
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
index 85b9131dc8..67c5a7f373 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceField.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Popover, Position } from "@blueprintjs/core";
+import { Popover, Position, PopoverInteractionKind } from "@blueprintjs/core";
 import {
   DATASOURCE_FIELD_ICONS_MAP,
   datasourceColumnIcon,
@@ -22,7 +22,7 @@ const Wrapper = styled.div<{ step: number }>`
   cursor: pointer;
 `;
 
-const Value = styled.div`
+const FieldName = styled.div`
   color: ${Colors.ALTO};
   flex: 1;
   font-size: 12px;
@@ -30,13 +30,15 @@ const Value = styled.div`
   overflow: hidden;
   line-height: 13px;
   text-overflow: ellipsis;
-  :nth-child(2) {
-    text-align: right;
-    font-size: 10px;
-    line-height: 12px;
-    color: #777777;
-    font-weight: 300;
-  }
+  padding-right: 30px;
+`;
+
+const FieldValue = styled.div`
+  text-align: right;
+  font-size: 10px;
+  line-height: 12px;
+  color: #777777;
+  font-weight: 300;
 `;
 
 const Content = styled.div`
@@ -93,14 +95,20 @@ export const DatabaseColumns = (props: DatabaseFieldProps) => {
     <Wrapper step={props.step + 1} className="t--datasource-column">
       {icon}
       <Content>
-        <Value>{fieldName}</Value>
-        <Value>{fieldType}</Value>
+        <FieldName>{fieldName}</FieldName>
+        <FieldValue>{fieldType}</FieldValue>
       </Content>
     </Wrapper>
   );
 
   return (
-    <Popover minimal position={Position.RIGHT_TOP} boundary={"viewport"}>
+    <Popover
+      minimal
+      position={Position.RIGHT_TOP}
+      boundary={"viewport"}
+      hoverCloseDelay={0}
+      interactionKind={PopoverInteractionKind.HOVER}
+    >
       {content}
       <Container>
         {icon}
diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourcesGroup.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourcesGroup.tsx
index bc3af46367..187e12e985 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourcesGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourcesGroup.tsx
@@ -60,11 +60,7 @@ export const ExplorerDatasourcesGroup = (
           DATA_SOURCES_EDITOR_URL(params.applicationId, params.pageId),
         ) > -1
       }
-      isDefaultExpanded={
-        window.location.pathname.indexOf(
-          DATA_SOURCES_EDITOR_URL(params.applicationId, params.pageId),
-        ) > -1 || !!props.searchKeyword
-      }
+      isDefaultExpanded
       disabled={disableDatasourceGroup}
       onCreate={() => {
         history.push(