From 5a6fa9ae784c5942f1e37c7a0ae3acdd6337c459 Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Fri, 16 Jun 2023 23:42:10 -0700
Subject: polishing

---
 extension/react-app/src/components/ComboBox.tsx    | 21 ++++++++++++++++
 .../src/components/HeaderButtonWithText.tsx        |  4 +---
 .../react-app/src/components/StepContainer.tsx     |  1 -
 extension/react-app/src/components/TextDialog.tsx  | 28 ++++++++++++++++++++--
 4 files changed, 48 insertions(+), 6 deletions(-)

(limited to 'extension/react-app/src/components')

diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 2b140567..29f8a53b 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -68,6 +68,9 @@ interface ComboBoxProps {
 }
 
 const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
+  const [history, setHistory] = React.useState<string[]>([]);
+  // The position of the current command you are typing now, so the one that will be appended to history once you press enter
+  const [positionInHistory, setPositionInHistory] = React.useState<number>(0);
   const [items, setItems] = React.useState(props.items);
   const {
     isOpen,
@@ -113,9 +116,27 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
               (event.nativeEvent as any).preventDownshiftDefault = true;
               if (props.onEnter) props.onEnter(event);
               setInputValue("");
+              const value = event.currentTarget.value;
+              if (value !== "") {
+                setPositionInHistory(history.length + 1);
+                setHistory([...history, value]);
+              }
             } else if (event.key === "Tab" && items.length > 0) {
               setInputValue(items[0].name);
               event.preventDefault();
+            } else if (event.key === "ArrowUp" && !isOpen) {
+              if (positionInHistory == 0) return;
+              setInputValue(history[positionInHistory - 1]);
+              setPositionInHistory((prev) => prev - 1);
+            } else if (event.key === "ArrowDown" && !isOpen) {
+              if (positionInHistory >= history.length - 1) {
+                setInputValue("");
+              } else {
+                setInputValue(history[positionInHistory + 1]);
+              }
+              setPositionInHistory((prev) =>
+                Math.min(prev + 1, history.length)
+              );
             }
           },
           ref: ref as any,
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index c4f22211..f9483f0f 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -15,9 +15,7 @@ const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
       style={{ padding: "3px" }}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => {
-        setTimeout(() => {
-          setHover(false);
-        }, 100);
+        setHover(false);
       }}
       onClick={props.onClick}
     >
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 480f517f..7adbd7c2 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -63,7 +63,6 @@ const HeaderDiv = styled.div<{ error: boolean }>`
 const ContentDiv = styled.div`
   padding: 8px;
   padding-left: 16px;
-  background-color: ${vscBackground};
 `;
 
 const OnHoverDiv = styled.div`
diff --git a/extension/react-app/src/components/TextDialog.tsx b/extension/react-app/src/components/TextDialog.tsx
index 167e12cf..31a385d5 100644
--- a/extension/react-app/src/components/TextDialog.tsx
+++ b/extension/react-app/src/components/TextDialog.tsx
@@ -1,5 +1,5 @@
 // Write a component that displays a dialog box with a text field and a button.
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Button, buttonColor, secondaryDark, vscBackground } from ".";
 
@@ -28,6 +28,10 @@ const TextArea = styled.textarea`
   padding: 8px;
   outline: 1px solid black;
   font-family: Arial, Helvetica, sans-serif;
+
+  &:focus {
+    outline: 1px solid orange;
+  }
 `;
 
 const P = styled.p`
@@ -38,19 +42,39 @@ const P = styled.p`
 const TextDialog = (props: {
   showDialog: boolean;
   onEnter: (text: string) => void;
+  onClose: () => void;
 }) => {
   const [text, setText] = useState("");
   const textAreaRef = React.createRef<HTMLTextAreaElement>();
 
+  useEffect(() => {
+    if (textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, [props.showDialog]);
+
   return (
     <DialogContainer hidden={!props.showDialog}>
       <Dialog>
         <P>Thanks for your feedback. We'll get back to you soon!</P>
-        <TextArea cols={50} rows={10} ref={textAreaRef}></TextArea>
+        <TextArea
+          cols={50}
+          rows={10}
+          ref={textAreaRef}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && e.metaKey && textAreaRef.current) {
+              props.onEnter(textAreaRef.current.value);
+              setText("");
+            } else if (e.key === "Escape") {
+              props.onClose();
+            }
+          }}
+        />
         <Button
           onClick={() => {
             if (textAreaRef.current) {
               props.onEnter(textAreaRef.current.value);
+              setText("");
             }
           }}
         >
-- 
cgit v1.2.3-70-g09d2