Show JS dependencies in the entity explorer (#546)

app/client/src/jsExecution/JSExecutionManagerSingleton.ts

@@ -1,8 +1,8 @@
 import RealmExecutor from "./RealmExecutor";
 import moment from "moment-timezone";
 import { ActionDescription } from "entities/DataTree/dataTreeFactory";
-import { btoa, atob } from "js-base64";
-
+import { btoa, atob, version as BASE64LIBVERSION } from "js-base64";
+import { VERSION as lodashVersion } from "lodash";
 export type JSExecutorGlobal = Record<string, object>;
 export type JSExecutorResult = {
   result: any;
@@ -22,22 +22,42 @@ enum JSExecutorType {
   REALM,
 }
 
-export const extraLibraries = [
+export type ExtraLibrary = {
+  version: string;
+  docsURL: string;
+  displayName: string;
+  accessor: string;
+  lib: any;
+};
+
+export const extraLibraries: ExtraLibrary[] = [
   {
     accessor: "_",
     lib: window._,
+    version: lodashVersion,
+    docsURL: `https://lodash.com/docs/${lodashVersion}`,
+    displayName: "lodash",
   },
   {
     accessor: "moment",
     lib: moment,
+    version: moment.version,
+    docsURL: `https://momentjs.com/docs/`,
+    displayName: "moment",
   },
   {
     accessor: "btoa",
     lib: btoa,
+    version: BASE64LIBVERSION,
+    docsURL: "https://github.com/dankogai/js-base64#readme",
+    displayName: "btoa",
   },
   {
     accessor: "atob",
     lib: atob,
+    version: BASE64LIBVERSION,
+    docsURL: "https://github.com/dankogai/js-base64#readme",
+    displayName: "atob",
   },
 ];
 

app/client/src/pages/Editor/Explorer/Entity/index.tsx

@@ -30,7 +30,7 @@ const Wrapper = styled.div<{ active: boolean }>`
   line-height: ${props => props.theme.lineHeights[2]}px;
 `;
 
-const EntityItem = styled.div<{
+export const EntityItem = styled.div<{
   active: boolean;
   step: number;
   spaced: boolean;

app/client/src/pages/Editor/Explorer/JSDependencies.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { extraLibraries } from "jsExecution/JSExecutionManagerSingleton";
+import { Collapse, Icon, IconName, Tooltip } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import { Colors } from "constants/Colors";
+import { BindingText } from "pages/Editor/APIEditor/Form";
+
+export type JSDependenciesProps = {};
+
+const Wrapper = styled.div`
+  font-size: 13px;
+`;
+const ListItem = styled.li`
+  list-style: none;
+  color: ${Colors.ALTO};
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: 0 20px 0 20px;
+  &:hover {
+    background: ${Colors.TUNDORA};
+    color: ${Colors.WHITE};
+  }
+`;
+const Name = styled.span``;
+const Version = styled.span``;
+const Title = styled.div`
+  display: grid;
+  grid-template-columns: 20px auto 20px;
+  cursor: pointer;
+  height: 30px;
+  align-items: center;
+`;
+const List = styled.ul`
+  padding: 0px;
+  margin: 0 0 0 0px;
+`;
+const Help = styled(Icon)`
+  &:hover svg {
+    fill: ${Colors.WHITE};
+  }
+`;
+export const JSDependencies = (props: JSDependenciesProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openDocs = (name: string, url: string) => () => window.open(url, name);
+  const dependencyList = extraLibraries.map(lib => {
+    return (
+      <ListItem
+        key={lib.displayName}
+        onClick={openDocs(lib.displayName, lib.docsURL)}
+      >
+        <Name>{lib.displayName}</Name>
+        <Version>{lib.version}</Version>
+      </ListItem>
+    );
+  });
+  const icon: IconName = isOpen ? IconNames.CARET_DOWN : IconNames.CARET_RIGHT;
+  const toggleDependencies = () => setIsOpen(!isOpen);
+  const showDocs = (e: any) => {
+    window.open(
+      "https://docs.appsmith.com/core-concepts/connecting-ui-and-logic/working-with-js-libraries",
+      "appsmith-docs:working-with-js-libraries",
+    );
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const TooltipContent = (
+    <div>
+      <span>Access these JS libraries to transform data within </span>
+      <BindingText>{`{{ }}`}</BindingText>
+      <span>. Try </span>
+      <BindingText>{`{{ _.add(1,1) }}`}</BindingText>
+    </div>
+  );
+  return (
+    <Wrapper>
+      <Title onClick={toggleDependencies}>
+        <Icon icon={icon} />
+        <span>Dependencies</span>
+        <Tooltip content={TooltipContent} position="top" boundary="viewport">
+          <Help
+            icon="help"
+            iconSize={12}
+            color={Colors.DOVE_GRAY}
+            onClick={showDocs}
+          />
+        </Tooltip>
+      </Title>
+      <Collapse isOpen={isOpen}>
+        <List>{dependencyList}</List>
+      </Collapse>
+    </Wrapper>
+  );
+};
+
+export default JSDependencies;

app/client/src/pages/Editor/Explorer/index.tsx

@@ -17,6 +17,8 @@ import { BUILDER_PAGE_URL } from "constants/routes";
 import history from "utils/history";
 import { useParams } from "react-router";
 import { ExplorerURLParams } from "./helpers";
+import JSDependencies from "./JSDependencies";
+
 const Wrapper = styled.div`
   height: 100%;
   overflow-y: scroll;
@@ -61,7 +63,6 @@ const EntityExplorer = (props: IPanelProps) => {
     history.push(BUILDER_PAGE_URL(applicationId, pageId));
     openPanel({ component: WidgetSidebar });
   }, [openPanel, applicationId, pageId]);
-
   return (
     <Wrapper ref={explorerRef}>
       <Search ref={searchInputRef} clear={clearSearch} />
@@ -86,6 +87,8 @@ const EntityExplorer = (props: IPanelProps) => {
         step={0}
         datasources={datasources}
       />
+      <StyledDivider />
+      <JSDependencies />
     </Wrapper>
   );
 };