hook up keyboard listeners for MapViewCreateOutcome

web/src/components/ButtonCheckbox/ButtonCheckbox.scss

@@ -17,7 +17,7 @@
   border: 0.15rem solid var(--border-color-button-checkbox);
 
   &:hover,
-  &.focused {
+  &:focus {
     box-shadow: 0rem 0rem 1.25rem var(--shadow-color-hover);
   }
 

web/src/components/ButtonCheckbox/ButtonCheckbox.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Checkbox from '../Checkbox/Checkbox'
-import Icon from '../Icon/Icon'
 
 import './ButtonCheckbox.scss'
 
@@ -19,8 +18,23 @@ const ButtonCheckbox: React.FC<ButtonCheckboxProps> = ({
   icon,
   text,
 }) => {
+  useEffect(() => {
+    // listen for Enter key to be pressed, but
+    // ignore if Command/Ctrl is also pressed
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && !e.metaKey) {
+        onChange(!isChecked)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isChecked, onChange])
   return (
     <div
+      role="button"
+      tabIndex={0}
       className={`button-checkbox-wrapper ${isChecked ? 'selected' : ''} ${
         size === 'tiny'
           ? 'tiny'

web/src/components/ExpandedViewMode/ExpandedViewMode.component.tsx

@@ -4,13 +4,11 @@ import EVMiddleColumn from './EVMiddleColumn/EVMiddleColumn'
 import EVLeftColumn from './EVLeftColumn/EVLeftColumn'
 import { ExpandedViewTab } from './NavEnum'
 import { CellIdString, ActionHashB64, AgentPubKeyB64 } from '../../types/shared'
-import { ComputedOutcome, ComputedScope, Outcome } from '../../types'
+import { ComputedOutcome, Outcome } from '../../types'
 import './ExpandedViewMode.scss'
 import ButtonClose from '../ButtonClose/ButtonClose'
 import Breadcrumbs from '../Breadcrumbs/Breadcrumbs'
 import hashCodeId from '../../api/clientSideIdHash'
-import OnClickOutside from '../OnClickOutside/OnClickOutside'
-import moment from 'moment'
 
 // props passed to the component by the parent
 export type ExpandedViewModeOwnProps = {

web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx

@@ -95,10 +95,14 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
         onClose()
       }
     }
-    document.body.addEventListener('keyup', onKeyDown)
+    if (outcome) {
+      document.body.addEventListener('keyup', onKeyDown)
+    }
     // for teardown, unbind event listeners
     return () => {
-      document.body.removeEventListener('keyup', onKeyDown)
+      if (outcome) {
+        document.body.removeEventListener('keyup', onKeyDown)
+      }
     }
   }, [outcome, content, description, githubInputLinkText, activeAgentPubKey])
 

web/src/components/MapViewCreateOutcome/MapViewCreateOutcome.component.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import useOnClickOutside from 'use-onclickoutside'
 import TextareaAutosize from 'react-textarea-autosize'
 import moment from 'moment'
@@ -76,42 +76,52 @@ const MapViewCreateOutcome: React.FC<MapViewCreateOutcomeProps> = ({
   closeOutcomeForm,
 }) => {
   const [isSmallScopeChecked, setIsSmallScopeChecked] = useState(false)
+  const [textIsFocused, setTextIsFocused] = useState(false)
 
   /* EVENT HANDLERS */
   // when the text value changes
   const handleChange = (event) => {
     updateContent(event.target.value)
   }
-  // when a key is pressed
-  const handleKeyDown = (event) => {
-    if (event.key === 'Enter') {
-      event.preventDefault()
-      handleSubmit()
+
+  // keyboard listener
+  useEffect(() => {
+    // since Enter will be used to toggle the checkbox
+    // when that is focused, we can submit on pure Enter for the textbox
+    // but they must use Command/Ctrl-Enter to submit when the button/checkbox
+    // is focused
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (textIsFocused && e.key === 'Enter') {
+        handleSubmit()
+      } else if (!textIsFocused && e.key === 'Enter' && e.metaKey) {
+        handleSubmit()
+      }
     }
-  }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [
+    textIsFocused,
+    content,
+    activeAgentPubKey,
+    isSmallScopeChecked,
+    existingParentConnectionAddress,
+  ])
+
   // when the input comes into focus
   const handleFocus = (event) => {
     // select the text
     event.target.select()
+    setTextIsFocused(true)
   }
-  // when the input leaves focus (not focused on editing title)
-  const handleBlur = (event) => {
-    // if creating an Outcome
-    event.preventDefault()
-    // handleSubmit()
+  const handleBlur = () => {
+    setTextIsFocused(false)
   }
 
   // this can get called via keyboard events
   // or via 'onClickOutside' of the MapViewCreateOutcome component
-  const handleSubmit = async (event?) => {
-    console.log('here')
-    if (event) {
-      // this is to prevent the page from refreshing
-      // when the form is submitted, which is the
-      // default behaviour
-      event.preventDefault()
-    }
-
+  const handleSubmit = async () => {
     // do not allow submit with no content
     if (!content || content === '') {
       closeOutcomeForm()
@@ -169,18 +179,6 @@ const MapViewCreateOutcome: React.FC<MapViewCreateOutcomeProps> = ({
     )
   }
 
-  // the default
-  let fontSizeToUse = fontSize
-  if (scale < secondZoomThreshold) {
-    fontSizeToUse = fontSizeExtraLarge
-  } else if (scale < firstZoomThreshold) {
-    fontSizeToUse = fontSizeLarge
-  }
-  // const textStyle = {
-  //   fontSize: fontSize,
-  //   lineHeight: `${parseInt(fontSizeToUse) * lineHeightMultiplier}px`,
-  // }
-
   const ref = useRef()
   useOnClickOutside(ref, handleSubmit)
 
@@ -203,21 +201,16 @@ const MapViewCreateOutcome: React.FC<MapViewCreateOutcomeProps> = ({
       // ref for the sake of onClickOutside
       ref={ref}
     >
-      <form className="map-view-outcome-statement-form" onSubmit={handleSubmit}>
+      <div className="map-view-outcome-statement-form">
         <TextareaAutosize
           autoFocus
           placeholder="Add an Outcome Statement"
           value={content}
           onChange={handleChange}
-          onKeyDown={handleKeyDown}
           onFocus={handleFocus}
           onBlur={handleBlur}
-          // style={textStyle}
         />
-
-        {/* <Checkbox size={'small'} />
-       This Outcome is Small Scope */}
-      </form>
+      </div>
       {/* small scope option checkbox */}
       <div className="map-view-outcome-statement-checkbox">
         <ButtonCheckbox

web/src/hooks/useVersionChecker.ts

@@ -84,7 +84,9 @@ function isVersionOutOfDate(
 
   const currentVersionParts = currentVersion.split('.').map(Number)
   const latestVersionParts = latestVersion.split('.').map(Number)
-  if (currentVersionParts[0] < latestVersionParts[0]) {
+  // note, don't propose updates to version 10.x.x
+  // because that is the version with holochain 0.1.x
+  if (currentVersionParts[0] < latestVersionParts[0] && latestVersionParts[0] !== 10) {
     return true
   } else if (currentVersionParts[0] === latestVersionParts[0]) {
     if (currentVersionParts[1] < latestVersionParts[1]) {

web/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "strict": false,
     "outDir": "./dist/",
     "checkJs": false,
     "sourceMap": true,