187033159 v3 Tile Title UI (#1248)

* Better UI for editing tile titles.

v3/cypress/e2e/graph.spec.ts

@@ -51,18 +51,11 @@ context("Graph UI", () => {
 
     // test for undo/redo when updating graph title
     toolbar.getUndoTool().click()
-    c.changeComponentTitle("graph", newCollectionName)
-    c.getComponentTitle("graph").should("have.text", newCollectionName)
-    // TODO: add a check after undo to make sure the title has reverted to
-    // the Collection Name. Blocker: PT #187033159
+    c.getComponentTitle("graph").should("have.text", collectionName)
 
     // use force:true so we don't have to worry about redo disabling
     toolbar.getRedoTool().click({force: true})
-    c.changeComponentTitle("graph", newCollectionName)
     c.getComponentTitle("graph").should("have.text", newCollectionName)
-    // TODO: add a check after undo to make sure the title has reverted to
-    // the Collection Name. Blocker: PT #187033159
-
   })
   it("tests undo/redo of creating graphs", () => {
 

v3/cypress/support/elements/component-elements.ts

@@ -48,7 +48,7 @@ export const ComponentElements = {
   getComponentTitle(component, index = 0) {
     return this.getComponentTile(component, index).find("[data-testid=editable-component-title]")
   },
-  changeComponentTitle(component, title, index = 0) {
+  changeComponentTitle(component: string, title: string, index = 0) {
     this.getComponentTitle(component, index).click().find("[data-testid=title-text-input]").type(`${title}{enter}`)
   },
   getInspectorPanel() {

v3/src/components/component-title-bar.tsx

@@ -16,6 +16,7 @@ export const ComponentTitleBar = observer(function ComponentTitleBar(
   // perform all title-related model access here so only title is re-rendered when properties change
   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 || ""
@@ -26,20 +27,45 @@ export const ComponentTitleBar = observer(function ComponentTitleBar(
 
   const handleChangeTitle = (nextValue?: string) => {
     if (tile != null && nextValue) {
-      tile.setTitle(nextValue)
+      tile.applyModelChange(() => {
+        tile.setTitle(nextValue)
+      }, {
+        undoStringKey: "DG.Undo.component.componentTitleChange",
+        redoStringKey: "DG.Redo.component.componentTitleChange"
+      })
     }
   }
 
+  const handleChange = (nextValue: string) => {
+    setEditingTitle(nextValue)
+  }
+
+  const handleSubmit = (nextValue: string) => {
+    if (onHandleTitleChange) {
+      onHandleTitleChange(nextValue)
+    } else {
+      handleChangeTitle(nextValue)
+    }
+    // Assume the title was successfully changed if nextValue is not empty.
+    setEditingTitle(nextValue || title)
+    setIsEditing(false)
+  }
+
+  const handleCancel = (previousValue: string) => {
+    setEditingTitle(previousValue)
+    setIsEditing(false)
+  }
+
   return (
     <Flex className={classes}
         ref={setActivatorNodeRef} {...listeners} {...attributes}>
       {children}
-      <Editable value={title} className="title-bar" isPreviewFocusable={!dragging} submitOnBlur={true}
-          onEdit={() => setIsEditing(true)} onSubmit={() => setIsEditing(false)}
-          onChange={onHandleTitleChange || handleChangeTitle} onCancel={() => setIsEditing(false)}
-          data-testid="editable-component-title">
+      <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 className="title-text-input" data-testid="title-text-input"/>
+        <EditableInput value={editingTitle} className="title-text-input" data-testid="title-text-input"/>
       </Editable>
       <Flex className={clsx("header-right", { disabled: isEditing })}>
         <Button className="component-minimize-button" title={t("DG.Component.minimizeComponent.toolTip")}

v3/src/components/tiles/tile-base-props.ts

@@ -11,7 +11,7 @@ export interface ITileTitleBarProps extends ITileBaseProps {
   getTitle?: () => string | undefined
   children?: ReactNode
   onHandleTitleBarClick?: (e: React.MouseEvent) => void
-  onHandleTitleChange?: () => void
+  onHandleTitleChange?: (newValue?: string) => void
   onMinimizeTile?: () => void
   onCloseTile?: (tileId: string) => void
 }