From fbfcfeed2ae4e9e3d16ff12d52e1c8622b293c00 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Mon, 2 Nov 2020 14:24:54 +0530
Subject: [PATCH] Show template menu on click of datasource table (#1410)

---
 .../Datasources/DatasourceStructure.tsx       | 81 ++++++++++---------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
index 215142f0b1..8c2ad179b1 100644
--- a/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
+++ b/app/client/src/pages/Editor/Explorer/Datasources/DatasourceStructure.tsx
@@ -50,7 +50,10 @@ export const DatasourceStructure = (props: DatasourceStructureProps) => {
   const [active, setActive] = useState(false);
 
   const lightningMenu = (
-    <Wrapper className="t--template-menu-trigger">
+    <Wrapper
+      className={`t--template-menu-trigger ${EntityClassNames.CONTEXT_MENU}`}
+      onClick={() => setActive(!active)}
+    >
       <IconWrapper {...iconProps}>
         <LightningIcon />
       </IconWrapper>
@@ -58,48 +61,48 @@ export const DatasourceStructure = (props: DatasourceStructureProps) => {
     </Wrapper>
   );
 
-  if (dbStructure.templates)
-    templateMenu = (
-      <Popover
-        canEscapeKeyClose={true}
-        onOpened={() => setActive(true)}
-        onClosed={() => {
-          setActive(false);
-        }}
-        className={`${EntityClassNames.CONTEXT_MENU} t--structure-template-menu`}
-        minimal
-        position={Position.RIGHT_TOP}
-        boundary={"viewport"}
-      >
-        {lightningMenu}
-        <QueryTemplates
-          datasourceId={props.datasourceId}
-          templates={dbStructure.templates}
-        />
-      </Popover>
-    );
+  if (dbStructure.templates) templateMenu = lightningMenu;
   const columnsAndKeys = dbStructure.columns.concat(dbStructure.keys);
 
   return (
-    <StyledEntity
-      entityId={"DatasourceStructure"}
-      className={"datasourceStructure"}
-      name={dbStructure.name}
-      icon={datasourceTableIcon}
-      step={props.step}
-      active={active}
-      contextMenu={templateMenu}
+    <Popover
+      canEscapeKeyClose={true}
+      isOpen={active}
+      className={`t--structure-template-menu`}
+      minimal
+      position={Position.RIGHT_TOP}
+      boundary={"viewport"}
+      onInteraction={(nextOpenState: boolean) => {
+        if (!nextOpenState) {
+          setActive(false);
+        }
+      }}
     >
-      {columnsAndKeys.map((field, index) => {
-        return (
-          <DatasourceField
-            key={`${field.name}${index}`}
-            step={props.step + 1}
-            field={field}
-          />
-        );
-      })}
-    </StyledEntity>
+      <StyledEntity
+        entityId={"DatasourceStructure"}
+        className={`datasourceStructure`}
+        name={dbStructure.name}
+        icon={datasourceTableIcon}
+        step={props.step}
+        active={active}
+        contextMenu={templateMenu}
+        action={() => setActive(!active)}
+      >
+        {columnsAndKeys.map((field, index) => {
+          return (
+            <DatasourceField
+              key={`${field.name}${index}`}
+              step={props.step + 1}
+              field={field}
+            />
+          );
+        })}
+      </StyledEntity>
+      <QueryTemplates
+        datasourceId={props.datasourceId}
+        templates={dbStructure.templates}
+      />
+    </Popover>
   );
 };