fix(components): fix element key editor tooltip and revert not updating validity COMPASS-8586 (#6548)

Author: Anemy

packages/compass-components/src/components/document-list/element-editors.tsx

@@ -82,6 +82,7 @@ export const KeyEditor: React.FunctionComponent<{
           enabled={!valid}
           trigger={({
             className,
+            children,
             // Having a tooltip connected to the input elements is not the most
             // accessible thing ever and so a lot of event listeners of the
             // tooltip conflict with the textarea default behavior (due to
@@ -93,6 +94,8 @@ export const KeyEditor: React.FunctionComponent<{
             onPointerUp,
             onPointerDown,
             onMouseDown,
+            /* eslint-enable @typescript-eslint/no-unused-vars */
+            ...triggerProps
           }: React.HTMLProps<HTMLInputElement>) => {
             return (
               <div className={className}>
@@ -118,7 +121,9 @@ export const KeyEditor: React.FunctionComponent<{
                   )}
                   style={{ width }}
                   spellCheck="false"
+                  {...triggerProps}
                 ></input>
+                {children}
               </div>
             );
           }}
@@ -185,6 +190,7 @@ export const ValueEditor: React.FunctionComponent<{
   onBlur,
 }) => {
   const val = String(value);
+  const darkMode = useDarkMode();
 
   const inputStyle = useMemo(() => {
     if (type === 'String') {
@@ -280,7 +286,11 @@ export const ValueEditor: React.FunctionComponent<{
                     className={cx(
                       editorReset,
                       editorOutline,
-                      !valid && editorInvalid
+                      !valid && editorInvalid,
+                      !valid &&
+                        (darkMode
+                          ? editorInvalidDarkMode
+                          : editorInvalidLightMode)
                     )}
                     style={inputStyle}
                     spellCheck="false"

packages/compass-components/src/components/document-list/element.tsx

@@ -92,6 +92,17 @@ function useHadronElement(el: HadronElementType) {
     [el, forceUpdate]
   );
 
+  const onElementReverted = useCallback(
+    (changedElement: HadronElementType) => {
+      if (el.uuid === changedElement.uuid) {
+        // When an element is reverted we check again if the key is a duplicate.
+        setIsDuplicateKey(el.isDuplicateKey(el.key));
+        forceUpdate();
+      }
+    },
+    [el, forceUpdate]
+  );
+
   useEffect(() => {
     if (prevEl && prevEl !== el) {
       forceUpdate();
@@ -101,7 +112,7 @@ function useHadronElement(el: HadronElementType) {
   useEffect(() => {
     el.on(ElementEvents.Converted, onElementChanged);
     el.on(ElementEvents.Edited, onElementChanged);
-    el.on(ElementEvents.Reverted, onElementChanged);
+    el.on(ElementEvents.Reverted, onElementReverted);
     el.on(ElementEvents.Invalid, onElementChanged);
     el.on(ElementEvents.Valid, onElementChanged);
     el.on(ElementEvents.Added, onElementAddedOrRemoved);
@@ -113,15 +124,15 @@ function useHadronElement(el: HadronElementType) {
     return () => {
       el.off(ElementEvents.Converted, onElementChanged);
       el.off(ElementEvents.Edited, onElementChanged);
-      el.off(ElementEvents.Reverted, onElementChanged);
+      el.off(ElementEvents.Reverted, onElementReverted);
       el.off(ElementEvents.Valid, onElementChanged);
       el.off(ElementEvents.Added, onElementAddedOrRemoved);
       el.off(ElementEvents.Removed, onElementAddedOrRemoved);
       el.off(ElementEvents.Expanded, onElementChanged);
       el.off(ElementEvents.Collapsed, onElementChanged);
       el.off(ElementEvents.VisibleElementsChanged, onElementChanged);
     };
-  }, [el, onElementChanged, onElementAddedOrRemoved]);
+  }, [el, onElementChanged, onElementAddedOrRemoved, onElementReverted]);
 
   const isValid = el.isCurrentTypeValid();