From af6abfb92e533d27c9cfd93af84b78a42061ebdb Mon Sep 17 00:00:00 2001
From: Bobby <bofei@mail.com>
Date: Mon, 21 Jun 2021 22:40:06 +1000
Subject: [PATCH] derivative help information

---
 .../FieldSettings/DefaultValueInput.tsx       | 79 ++++++++++++++++---
 .../components/Table/TableHeader/Sparks.tsx   |  1 +
 .../components/Table/editors/CodeEditor.tsx   |  2 +
 3 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/www/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx b/www/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
index 5321d49a..5069e25f 100644
--- a/www/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
+++ b/www/src/components/Table/ColumnMenu/FieldSettings/DefaultValueInput.tsx
@@ -9,13 +9,18 @@ import {
   TextField,
   MenuItem,
   ListItemText,
+  Box,
+  Tooltip,
+  Button,
 } from "@material-ui/core";
 import Subheading from "../Subheading";
 
 import { getFieldProp } from "components/fields";
-import CodeEditor from "components/CodeEditor";
+import CodeEditor from "components/Table/editors/CodeEditor";
 import FormAutosave from "./FormAutosave";
 import { FieldType } from "constants/fields";
+import { useFiretableContext } from "contexts/FiretableContext";
+import OpenIcon from "@material-ui/icons/OpenInNew";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -58,6 +63,7 @@ export default function DefaultValueInput({
         config.defaultValue?.value ?? getFieldProp("initialValue", _type),
     },
   });
+  const { tableState } = useFiretableContext();
 
   return (
     <>
@@ -128,18 +134,65 @@ export default function DefaultValueInput({
       )}
 
       {config.defaultValue?.type === "dynamic" && (
-        <div className={classes.codeEditorContainer}>
-          <CodeEditor
-            height={120}
-            value={config.defaultValue?.script}
-            onChange={handleChange("defaultValue.script")}
-            editorOptions={{
-              minimap: {
-                enabled: false,
-              },
-            }}
-          />
-        </div>
+        <>
+          <Box marginBottom={1} display="flex" justifyContent="space-between">
+            <Box>
+              You have access to:{" "}
+              <Tooltip
+                style={{
+                  zIndex: 9999,
+                }}
+                title={
+                  <>
+                    You have acces to the object "row" at the top level. Typing
+                    "row" in the code editor to get auto completion. Below are
+                    the fields of row you can use in this table:
+                    <br />
+                    <br />
+                    {Object.keys(tableState?.columns!).join(", ")}
+                  </>
+                }
+              >
+                <span>row</span>
+              </Tooltip>
+              ,{" "}
+              <Tooltip
+                style={{
+                  zIndex: 9999,
+                }}
+                title={
+                  <>
+                    You have acces to the db object that represents the
+                    firestore database object. Typing "db" in the code editor to
+                    get auto completion.
+                  </>
+                }
+              >
+                <span>db</span>
+              </Tooltip>
+            </Box>
+            <Button
+              size="small"
+              endIcon={<OpenIcon />}
+              target="_blank"
+              href="https://github.com/FiretableProject/firetable/wiki/Getting-Started" // TODO add doc link
+            >
+              Examples & Docs
+            </Button>
+          </Box>
+          <div className={classes.codeEditorContainer}>
+            <CodeEditor
+              height={120}
+              value={config.defaultValue?.script}
+              onChange={handleChange("defaultValue.script")}
+              editorOptions={{
+                minimap: {
+                  enabled: false,
+                },
+              }}
+            />
+          </div>
+        </>
       )}
     </>
   );
diff --git a/www/src/components/Table/TableHeader/Sparks.tsx b/www/src/components/Table/TableHeader/Sparks.tsx
index e14b2d85..8a492a7c 100644
--- a/www/src/components/Table/TableHeader/Sparks.tsx
+++ b/www/src/components/Table/TableHeader/Sparks.tsx
@@ -130,6 +130,7 @@ export default function SparksEditor() {
 
               <CodeEditor
                 script={currentSparks}
+                height="100%"
                 handleChange={(newValue) => {
                   setLocalSparks(newValue);
                 }}
diff --git a/www/src/components/Table/editors/CodeEditor.tsx b/www/src/components/Table/editors/CodeEditor.tsx
index 6f0abc09..8e0d209a 100644
--- a/www/src/components/Table/editors/CodeEditor.tsx
+++ b/www/src/components/Table/editors/CodeEditor.tsx
@@ -28,6 +28,7 @@ export default function CodeEditor(props: any) {
   const {
     handleChange,
     extraLibs,
+    height = 400,
     script,
     onValideStatusUpdate,
     diagnosticsOptions,
@@ -408,6 +409,7 @@ export default function CodeEditor(props: any) {
           theme={themeTransformer(theme.palette.type)}
           onMount={handleEditorDidMount}
           language="javascript"
+          height={height}
           value={initialEditorValue}
           onChange={handleChange}
           onValidate={handleEditorValidation}