Merge pull request #237 from LouisDelbosc/rename-page-on-click

feat: add rename when clicking on selected label page

app/client/ui2018/pages.ts

@@ -17,6 +17,11 @@ export interface PageActions {
   isReadonly: Observable<boolean>;
 }
 
+function isTargetSelected(target: HTMLElement) {
+  const parentItemHeader = target.closest('.' + itemHeader.className);
+  return parentItemHeader ? parentItemHeader.classList.contains('selected') : false;
+}
+
 // build the dom for a document page entry. It shows an icon (for now the first letter of the name,
 // but later we'll support user selected icon), the name and a dots menu containing a "Rename" and
 // "Remove" entries. Clicking "Rename" turns the page name into an editable input, which then call
@@ -52,7 +57,10 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
       domComputed(isRenaming, (isrenaming) => (
         isrenaming ?
           cssPageItem(
-            cssPageInitial(dom.text((use) => Array.from(use(name))[0])),
+            cssPageInitial(
+              testId('initial'),
+              dom.text((use) => Array.from(use(name))[0])
+              ),
             cssEditorInput(
               {
                 initialValue: name.get() || '',
@@ -68,8 +76,15 @@ export function buildPageDom(name: Observable<string>, actions: PageActions, ...
             // firefox.
           ) :
           cssPageItem(
-            cssPageInitial(dom.text((use) => Array.from(use(name))[0])),
+            cssPageInitial(
-            cssPageName(dom.text(name), testId('label')),
+              testId('initial'),
+              dom.text((use) => Array.from(use(name))[0]),
+            ),
+            cssPageName(
+              dom.text(name),
+              testId('label'),
+              dom.on('click', (ev) => isTargetSelected(ev.target as HTMLElement) && isRenaming.set(true)),
+            ),
             cssPageMenuTrigger(
               cssPageIcon('Dots'),
               menu(pageMenu, {placement: 'bottom-start', parentSelectorToMark: '.' + itemHeader.className}),
@@ -120,6 +135,7 @@ const cssPageName = styled('div', `
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex-grow: 1;
   .${treeViewContainer.className}-close & {
     display: none;
   }

test/nbrowser/Pages.ts

@@ -68,13 +68,13 @@ describe('Pages', function() {
     await gu.waitForServer();
 
     // Click on a page; check the URL, selected item, and the title of the view section.
-    await driver.findContent('.test-treeview-itemHeader', /Documents/).doClick();
+    await clickPage(/Documents/)
     assert.match(await driver.getCurrentUrl(), /\/p\/3/);
     assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Documents/);
     assert.match(await gu.getActiveSectionTitle(), /Documents/i);
 
     // Click on another page; check the URL, selected item, and the title of the view section.
-    await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
+    await clickPage(/People/)
     assert.match(await driver.getCurrentUrl(), /\/p\/2/);
     assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /People/);
     assert.match(await gu.getActiveSectionTitle(), /People/i);
@@ -107,6 +107,24 @@ describe('Pages', function() {
     assert.deepEqual(await gu.getPageNames(), ['Interactions', 'Documents', 'People', 'User & Leads', 'Overview']);
   });
 
+  it('should allow renaming table when click on page selected label', async () => {
+    // do rename
+    await clickPage(/People/)
+    await driver.findContent('.test-treeview-label', 'People').doClick();
+    await driver.find('.test-docpage-editor').sendKeys('PeopleRenamed', Key.ENTER);
+    await gu.waitForServer();
+
+    assert.deepEqual(
+      await gu.getPageNames(),
+      ['Interactions', 'Documents', 'PeopleRenamed', 'User & Leads', 'Overview']
+    );
+
+    // revert changes
+    await gu.undo(2);
+    assert.deepEqual(await gu.getPageNames(), ['Interactions', 'Documents', 'People', 'User & Leads', 'Overview']);
+
+  })
+
   it('should not allow blank page name', async () => {
     // Begin renaming of People page
     await gu.openPageMenu('People');
@@ -196,7 +214,7 @@ describe('Pages', function() {
     }
 
     // goto page 'Interactions'
-    await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
+    await clickPage(/Interactions/);
 
     // check selected page
     assert.match(await selectedPage(), /Interactions/);
@@ -231,14 +249,15 @@ describe('Pages', function() {
   it('undo/redo should update url', async () => {
 
     // goto page 'Interactions' and send keys
-    await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
+    await clickPage(/Interactions/);
+    assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Interactions/);
     await driver.findContentWait('.gridview_data_row_num', /1/, 2000);
     await driver.sendKeys(Key.ENTER, 'Foo', Key.ENTER);
     await gu.waitForServer();
     assert.deepEqual(await gu.getVisibleGridCells(0, [1]), ['Foo']);
 
     // goto page 'People' and click undo
-    await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
+    await clickPage(/People/);
     await gu.waitForDocToLoad();
     await gu.waitForUrl(/\/p\/2\b/); // check that url match p/2
 
@@ -251,11 +270,14 @@ describe('Pages', function() {
 
     // check that undo worked
     assert.deepEqual(await gu.getVisibleGridCells(0, [1]), ['']);
+
+    // Click on next test should not trigger renaming input
+    await driver.findContent('.test-treeview-itemHeader', /People/).doClick();
   });
 
   it('Add new page should update url', async () => {
     // goto page 'Interactions'  and check that url updated
-    await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
+    await clickPage(/Interactions/);
     await gu.waitForUrl(/\/p\/1\b/);
 
     // Add new Page, check that url updated and page is selected
@@ -264,7 +286,7 @@ describe('Pages', function() {
     assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Table1/);
 
     // goto page 'Interactions' and check that url updated and page selectd
-    await driver.findContent('.test-treeview-itemHeader', /Interactions/).doClick();
+    await clickPage(/Interactions/);
     await gu.waitForUrl(/\/p\/1\b/);
     assert.match(await driver.find('.test-treeview-itemHeader.selected').getText(), /Interactions/);
   });
@@ -449,6 +471,7 @@ describe('Pages', function() {
     assert.deepEqual(await gu.getPageNames(), ['Table C', 'Table Last']);
 
     // Removing page Table C should also show prompt (it is last page for Table1,Table D and TableC)
+    await gu.getPageItem('Table Last').click();
     await gu.getPageItem('Table C').click();
     assert.deepEqual(await gu.getSectionTitles(), ['TABLE C', 'TABLE D', 'TABLE1' ]);
     await gu.removePage("Table C", { expectPrompt : true, tables: ['Table D', 'Table C', 'Table1'] });
@@ -473,3 +496,7 @@ async function movePage(page: RegExp, target: {before: RegExp}|{after: RegExp})
     })
     .release());
 }
+
+function clickPage(name: string|RegExp) {
+  return driver.findContent('.test-treeview-itemHeader', name).find(".test-docpage-initial").doClick();
+}