Start empty error signal (but still some work to do, like sizing on n…

…umbers and maybe moving the icon)
microsoft · Mar 9, 2024 · c6e5597 · c6e5597
1 parent 8385f71
commit c6e5597
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 25 deletions.
diff --git a/teachertool/src/components/ActiveRubricDisplay.tsx b/teachertool/src/components/ActiveRubricDisplay.tsx
@@ -18,7 +18,7 @@ export const ActiveRubricDisplay: React.FC<ActiveRubricDisplayProps> = ({}) => {
                 <DebouncedInput
                     label={Strings.Name}
                     ariaLabel={Strings.Name}
-                    onChange={setRubricName}
+                    onDebouncedChange={setRubricName}
                     placeholder={Strings.RubricName}
                     initialValue={teacherTool.rubric.name}
                     preserveValueOnBlur={true}

diff --git a/teachertool/src/components/CriteriaInstanceDisplay.tsx b/teachertool/src/components/CriteriaInstanceDisplay.tsx
@@ -7,6 +7,7 @@ import { classList } from "react-common/components/util";
 import { splitCriteriaTemplate } from "../utils";
 // eslint-disable-next-line import/no-internal-modules
 import css from "./styling/CriteriaInstanceDisplay.module.scss";
+import { useState } from "react";
 
 interface InlineInputSegmentProps {
     initialValue: string;
@@ -22,18 +23,29 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
     shouldExpand,
     numeric,
 }) => {
-    function onChange(newValue: string) {
+    const [isEmpty, setIsEmpty] = useState(!initialValue);
+
+    function onDebouncedChange(newValue: string) {
         setParameterValue(instance.instanceId, param.name, newValue);
     }
 
+    function onChange(newValue: string) {
+        // Keep this out of the debounced version to avoid delayed appearance.
+        setIsEmpty(!newValue);
+    }
+
     return (
         <DebouncedInput
             className={classList(
                 css["inline-input"],
                 numeric ? css["number-input"] : css["string-input"],
                 shouldExpand ? css["long"] : undefined,
+                isEmpty ? css["error"] : undefined
             )}
+            icon={isEmpty ? "fas fa-exclamation-triangle" : undefined}
+            iconTitle={isEmpty ? lf("Missing value") : undefined}
             initialValue={initialValue}
+            onDebouncedChange={onDebouncedChange}
             onChange={onChange}
             preserveValueOnBlur={true}
             placeholder={numeric ? "0" : param.name}
@@ -47,7 +59,6 @@ const InlineInputSegment: React.FC<InlineInputSegmentProps> = ({
 interface CriteriaInstanceDisplayProps {
     criteriaInstance: CriteriaInstance;
 }
-
 export const CriteriaInstanceDisplay: React.FC<CriteriaInstanceDisplayProps> = ({ criteriaInstance }) => {
     const catalogCriteria = getCatalogCriteriaWithId(criteriaInstance.catalogCriteriaId);
     if (!catalogCriteria) {

diff --git a/teachertool/src/components/DebouncedInput.tsx b/teachertool/src/components/DebouncedInput.tsx
@@ -3,18 +3,19 @@ import { Input, InputProps } from "react-common/components/controls/Input";
 
 export interface DebouncedInputProps extends InputProps {
     intervalMs?: number; // Default 500 ms
+    onDebouncedChange: (newValue: string) => void;
 }
 
 // This functions like the React Common Input, but debounces onChange calls,
 // so if onChange is called multiple times in quick succession, it will only
 // be executed once after a pause of the specified `interval` in milliseconds.
-export const DebouncedInput: React.FC<DebouncedInputProps> = ({ intervalMs = 500, ...props }) => {
+export const DebouncedInput: React.FC<DebouncedInputProps> = ({ onDebouncedChange, intervalMs = 500, ...props }) => {
     const timerId = useRef<NodeJS.Timeout | undefined>(undefined);
     const latestValue = useRef<string>("");
 
     const sendChange = () => {
-        if (props.onChange) {
-            props.onChange(latestValue.current);
+        if (onDebouncedChange) {
+            onDebouncedChange(latestValue.current);
         }
     };
 
@@ -37,6 +38,9 @@ export const DebouncedInput: React.FC<DebouncedInputProps> = ({ intervalMs = 500
         }
 
         timerId.current = setTimeout(sendChange, intervalMs);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
     };
 
     return <Input {...props} onChange={onChangeDebounce} />;

diff --git a/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss b/teachertool/src/components/styling/CriteriaInstanceDisplay.module.scss
@@ -75,6 +75,17 @@
                     text-align: center;
                     padding: 0;
                 }
+
+                &.error {
+                    div[class*="common-input-group"] {
+                        border: solid 1px var(--pxt-error-accent);
+                        background-color: var(--pxt-error-background);
+
+                        input::placeholder {
+                            color: var(--pxt-page-foreground);
+                        }
+                    }
+                }
             }
         }
     }

diff --git a/teachertool/src/components/styling/ShareLinkInput.module.scss b/teachertool/src/components/styling/ShareLinkInput.module.scss
@@ -16,6 +16,25 @@
             input::placeholder {
                 text-align: center;
             }
+
+            i {
+                background-color: var(--pxt-content-background);
+                border-radius: 99px;
+                width: 1.5rem;
+                height: 1.5rem;
+                top: 0;
+                bottom: 0;
+                right: 0.25rem;
+                margin-top: auto;
+                margin-bottom: auto;
+
+                &::before {
+                    font-size: 1rem;
+                    line-height: 1.5rem;
+                    color: var(--pxt-content-foreground);
+                    filter: saturate(0%);
+                }
+            }
         }
     }
 

diff --git a/teachertool/src/style.overrides/Input.scss b/teachertool/src/style.overrides/Input.scss
@@ -27,24 +27,5 @@
                 font-style: italic;
             }
         }
-
-        i {
-            background-color: var(--pxt-content-background);
-            border-radius: 99px;
-            width: 1.5rem;
-            height: 1.5rem;
-            top: 0;
-            bottom: 0;
-            right: 0.25rem;
-            margin-top: auto;
-            margin-bottom: auto;
-
-            &::before {
-                font-size: 1rem;
-                line-height: 1.5rem;
-                color: var(--pxt-content-foreground);
-                filter: saturate(0%);
-            }
-        }
     }
 }