Improved UX for editing page headers & dashboard title

src/chart/graph/GraphChart.tsx

@@ -125,7 +125,6 @@ const NeoGraphChart = (props: ChartProps) => {
   });
 
   const pageNames = getPageNumbersAndNamesList();
-
   const chartProps: GraphChartVisualizationProps = {
     data: {
       nodes: data.nodes,
@@ -142,12 +141,12 @@ const NeoGraphChart = (props: ChartProps) => {
     style: {
       width: width,
       height: height,
-      backgroundColor: settings.backgroundColor,
+      backgroundColor: theme == 'dark' && settings.backgroundColor == '#fafafa' ? '#040404' : settings.backgroundColor, // Temporary fix for default color adjustment in dark mode
       linkDirectionalParticles: linkDirectionalParticles,
       linkDirectionalArrowLength: arrowLengthProp,
       linkDirectionalParticleSpeed: settings.linkDirectionalParticleSpeed,
       nodeLabelFontSize: settings.nodeLabelFontSize,
-      nodeLabelColor: settings.nodeLabelColor,
+      nodeLabelColor: theme == 'dark' && settings.nodeLabelColor == 'black' ? 'white' : settings.nodeLabelColor, // Temporary fix for default color adjustment in dark mode
       relLabelFontSize: settings.relLabelFontSize,
       relLabelColor: settings.relLabelColor,
       defaultNodeSize: settings.defaultNodeSize,

src/dashboard/header/DashboardHeaderPageTitle.tsx

@@ -4,7 +4,7 @@
 import debounce from 'lodash/debounce';
 import { setPageTitle } from '../../page/PageActions';
 import { removePageThunk } from '../DashboardThunks';
-import { Tab, Menu, MenuItems, MenuItem, IconButton, TextInput } from '@neo4j-ndl/react';
+import { Tab, Menu, MenuItems, MenuItem, IconButton } from '@neo4j-ndl/react';
 import { EllipsisHorizontalIconOutline, PencilIconOutline, TrashIconOutline } from '@neo4j-ndl/react/icons';
 import { NeoDeletePageModal } from '../../modal/DeletePageModal';
 import { useSortable } from '@dnd-kit/sortable';
@@ -17,12 +17,9 @@
   const menuOpen = Boolean(anchorEl);
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
   const [editing, setEditing] = React.useState(false);
-
+  const [inputWidth, setInputWidth] = React.useState(125);
   const handleMenuEditClick = (event: MenuEditEvent) => {
     event.preventDefault();
-    if (editing) {
-      debouncedSetPageTitle(tabIndex, titleText);
-    }
     setEditing(!editing);
     setAnchorEl(null);
   };
@@ -49,7 +46,7 @@
     transition,
   };
 
-  const debouncedSetPageTitle = useCallback(debounce(setPageTitle, 250), []);
+  const debouncedSetPageTitle = useCallback(debounce(setPageTitle, 200), []);
 
   const [titleText, setTitleText] = React.useState(title);
   useEffect(() => {
@@ -69,24 +66,46 @@
             '(no title)'
           )
         ) : (
-          <TextInput
-            data-no-dnd='true'
-            autoFocus={true}
-            value={titleText}
-            onChange={(event) => {
-              if (disabled) {
-                return;
+          <form
+            onSubmit={(event) => {
+              if (editing) {
+                handleMenuEditClick(event);
               }
-              setTitleText(event.target.value);
             }}
-            style={{
-              textAlign: 'center',
-              height: '1.9rem',
-            }}
-            placeholder='Page name...'
-          />
+          >
+            <input
+              data-no-dnd='true'
+              autoFocus={true}
+              value={titleText}
+              className=''
+              onBlur={(event) => {
+                if (editing) {
+                  handleMenuEditClick(event);
+                }
+              }}
+              onChange={(event) => {
+                const {target} = event;
+                target.style.width = '125px';
+                setInputWidth(target.scrollWidth);
+
+                if (disabled) {
+                  return;
+                }
+                setTitleText(event.target.value);
+                debouncedSetPageTitle(tabIndex, event.target.value);
+              }}
+              style={{
+                height: '1.9rem',
+                marginBottom: -5,
+                width: inputWidth,
+                paddingLeft: 5,
+                paddingRight: 5,
+              }}
+              placeholder='Page name...'
+            />
+          </form>
         )}
-        {!disabled && (
+        {!disabled && !editing && (
           <>
             <IconButton
               aria-label='Page actions'
@@ -107,9 +126,12 @@
               <MenuItems>
                 <MenuItem
                   icon={<PencilIconOutline />}
-                  title={editing ? 'Stop Editing' : 'Edit name'}
+                  title={'Edit name'}
                   onClick={(e) => {
                     e.stopPropagation();
+                    if (editing) {
+                      debouncedSetPageTitle(tabIndex, titleText);
+                    }
                     !disabled && handleMenuEditClick(e);
                   }}
                 />

src/dashboard/header/DashboardTitle.tsx

@@ -7,7 +7,12 @@
 import { getDashboardIsEditable } from '../../settings/SettingsSelectors';
 import { updateDashboardSetting } from '../../settings/SettingsActions';
 import { Typography, IconButton, Menu, MenuItems, TextInput } from '@neo4j-ndl/react';
-import { CheckBadgeIconOutline, EllipsisHorizontalIconOutline, PencilSquareIconOutline } from '@neo4j-ndl/react/icons';
+import {
+  CheckBadgeIconOutline,
+  CheckIconOutline,
+  EllipsisHorizontalIconOutline,
+  PencilSquareIconOutline,
+} from '@neo4j-ndl/react/icons';
 import NeoSettingsModal from '../../settings/SettingsModal';
 import NeoExtensionsModal from '../../extensions/ExtensionsModal';
 import { EXTENSIONS_DRAWER_BUTTONS } from '../../extensions/ExtensionConfig';
@@ -31,7 +36,7 @@
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [editing, setEditing] = React.useState(false);
   const debouncedDashboardTitleUpdate = useCallback(debounce(setDashboardTitle, 250), []);
-
+  const [inputWidth, setInputWidth] = React.useState(350);
   const handleSettingsMenuOpen = (event: SettingsMenuOpenEvent) => {
     setAnchorEl(event.currentTarget);
   };
@@ -69,21 +74,40 @@
       {/* only allow edit title if dashboard is not standalone - here we are in Title edit mode*/}
       {editing && !standaloneSettings.standalone ? (
         <div className={'n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'}>
-          <TextInput
-            autoFocus={true}
-            value={dashboardTitleText}
-            style={{
-              textAlign: 'center',
-              height: '1.9rem',
-            }}
-            placeholder='Dashboard name...'
-            onChange={(event) => {
-              if (editable) {
-                setDashboardTitleText(event.target.value);
-                debouncedDashboardTitleUpdate(event.target.value);
+          <form
+            onSubmit={() => {
+              if (editing) {
+                setEditing(false);
               }
             }}
-          />
+          >
+            <input
+              autoFocus={true}
+              value={dashboardTitleText}
+              style={{
+                height: '1.9rem',
+                fontSize: '1.875rem', // h3
+                fontWeight: 700, // h3
+                padding: 10,
+                width: inputWidth,
+              }}
+              placeholder='Dashboard name...'
+              onBlur={() => {
+                if (editing) {
+                  setEditing(false);
+                }
+              }}
+              onChange={(event) => {
+                if (editable) {
+                  const {target} = event;
+                  target.style.width = '350px';
+                  setInputWidth(target.scrollWidth);
+                  setDashboardTitleText(event.target.value);
+                  debouncedDashboardTitleUpdate(event.target.value);
+                }
+              }}
+            />
+          </form>
           <Tooltip title={'Stop Editing'} disableInteractive>
             <IconButton
               className='logo-btn n-p-1'
@@ -92,7 +116,7 @@
               onClick={() => setEditing(false)}
               clean
             >
-              <CheckBadgeIconOutline className='header-icon' type='outline' />
+              <CheckIconOutline className='header-icon' type='outline' />
             </IconButton>
           </Tooltip>
         </div>