[#187849761]Fixes styling of component title bar when dragging is ini…

…tiated on top of the component title. (#1332) * Fixes styling of component title bar when dragging is initiated on top of the component title. Changed the component from and EditableInput to just Input. * Fixes broken Cypress test for finding component title. Updates deleting old command from backspaces to clear.
concord-consortium · Jul 10, 2024 · 2e4a74b · 2e4a74b
1 parent 4e883f0
commit 2e4a74b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/v3/cypress/support/elements/component-elements.ts b/v3/cypress/support/elements/component-elements.ts
@@ -46,10 +46,11 @@ export const ComponentElements = {
     this.getComponentTitleBar(component, index).should(check, "focusTile")
   },
   getComponentTitle(component, index = 0) {
-    return this.getComponentTile(component, index).find("[data-testid=editable-component-title]")
+    return this.getComponentTile(component, index).find("[data-testid=title-text]")
   },
   changeComponentTitle(component: string, title: string, index = 0) {
-    this.getComponentTitle(component, index).click().find("[data-testid=title-text-input]").type(`${title}{enter}`)
+    this.getComponentTitle(component, index).click()
+    cy.get("[data-testid=title-text-input]").type(`${title}{enter}`)
   },
   getInspectorPanel() {
     return cy.get("[data-testid=inspector-panel]")

diff --git a/v3/cypress/support/elements/web-view-tile.ts b/v3/cypress/support/elements/web-view-tile.ts
@@ -43,8 +43,7 @@ export const WebViewTileElements = {
   sendAPITesterCommand(command: string, oldCommand?: string) {
     // Delete the old command if it's provided
     if (oldCommand) {
-      const deleteCommand = oldCommand.split("").reduce(cmd => `${cmd}{backspace}`, "")
-      WebViewTileElements.getIFrame().find(`.di-message-area`).type(deleteCommand)
+      WebViewTileElements.getIFrame().find(`.di-message-area`).clear()
     }
     WebViewTileElements.getIFrame().find(`.di-message-area`).type(command)
     WebViewTileElements.getIFrame().find(`.di-send-button`).click()

diff --git a/v3/src/components/component-title-bar.scss b/v3/src/components/component-title-bar.scss
@@ -106,7 +106,7 @@
 .title-text-input {
   display: flex !important;
   justify-content: center !important;
-  height: calc($title-bar-height - 2px) !important;
+  height: calc($title-bar-height) !important;
   width: max-content;
   font-size: 14px !important;
   text-align: center !important;
@@ -115,4 +115,5 @@
   cursor: text;
   outline: none !important;
   border-radius: $border-radius-top-corners !important;
+  border: 2px solid #66afe9;
 }
diff --git a/v3/src/components/component-title-bar.tsx b/v3/src/components/component-title-bar.tsx
@@ -1,5 +1,4 @@
-import { Button, CloseButton, Editable, EditableInput, EditablePreview, Flex } from "@chakra-ui/react"
-import { useDndContext } from "@dnd-kit/core"
+import { Button, CloseButton, Flex, Input } from "@chakra-ui/react"
 import { clsx } from "clsx"
 import { observer } from "mobx-react-lite"
 import React, { useState } from "react"
@@ -17,8 +16,6 @@ export const ComponentTitleBar = observer(function ComponentTitleBar(
   const title = getTitle?.() || tile?.title || t("DG.AppController.createDataSet.name")
   const [isEditing, setIsEditing] = useState(false)
   const [editingTitle, setEditingTitle] = useState(title)
-  const { active } = useDndContext()
-  const dragging = !!active
   const tileId = tile?.id || ""
   const tileType = tile?.content.type
   const draggableOptions: IUseDraggableTile = { prefix: tileType || "tile", tileId, disabled: isEditing }
@@ -36,10 +33,6 @@ export const ComponentTitleBar = observer(function ComponentTitleBar(
     }
   }
 
-  const handleChange = (nextValue: string) => {
-    setEditingTitle(nextValue)
-  }
-
   const handleSubmit = (nextValue: string) => {
     if (onHandleTitleChange) {
       onHandleTitleChange(nextValue)
@@ -56,17 +49,38 @@ export const ComponentTitleBar = observer(function ComponentTitleBar(
     setIsEditing(false)
   }
 
+  const handleTitleClick = () => {
+    setIsEditing(true)
+    setEditingTitle(title)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const { key } = e
+    e.stopPropagation()
+    switch (key) {
+      case "Escape":
+        handleCancel(title)
+        break
+      case "Enter":
+      case "Tab":
+        handleSubmit(editingTitle)
+        break
+    }
+  }
+
   return (
     <Flex className={classes}
         ref={setActivatorNodeRef} {...listeners} {...attributes}>
       {children}
-      <Editable value={isEditing ? editingTitle : title} className="title-bar" isPreviewFocusable={!dragging}
-        submitOnBlur={true} onEdit={() => setIsEditing(true)} onSubmit={handleSubmit}
-        onChange={handleChange} onCancel={handleCancel} data-testid="editable-component-title"
-      >
-        <EditablePreview className="title-text"/>
-        <EditableInput value={editingTitle} className="title-text-input" data-testid="title-text-input"/>
-      </Editable>
+      <div className="title-bar" data-testid="component-title-bar">
+        {isEditing
+          ? <Input value={editingTitle} className="title-text-input" data-testid="title-text-input" autoFocus={true}
+              onChange={(e) => setEditingTitle(e.target.value)} onBlur={() => handleSubmit(editingTitle)}
+              onFocus={(e) => e.target.select()} onKeyDown={handleInputKeyDown}
+            />
+          : <div className="title-text" data-testid="title-text" onClick={handleTitleClick}>{title}</div>
+        }
+      </div>
       <Flex className={clsx("header-right", { disabled: isEditing })}>
         <Button className="component-minimize-button" title={t("DG.Component.minimizeComponent.toolTip")}
           data-testid="component-minimize-button">