From 531ea1a4b5da1ac9fb559733f9f19cdf97a63e6a Mon Sep 17 00:00:00 2001 From: Louis Delbosc Date: Wed, 3 Aug 2022 15:08:15 +0200 Subject: [PATCH 1/2] feat: add rename when clicking on selected label page --- app/client/ui2018/pages.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/app/client/ui2018/pages.ts b/app/client/ui2018/pages.ts index 930c2854..9fe65378 100644 --- a/app/client/ui2018/pages.ts +++ b/app/client/ui2018/pages.ts @@ -17,6 +17,11 @@ export interface PageActions { isReadonly: Observable; } +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 @@ -69,7 +74,11 @@ export function buildPageDom(name: Observable, actions: PageActions, ... ) : cssPageItem( cssPageInitial(dom.text((use) => Array.from(use(name))[0])), - cssPageName(dom.text(name), testId('label')), + 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}), From a82d02ebcc1398582b5bd48bbc6f381597a63cd9 Mon Sep 17 00:00:00 2001 From: Louis Delbosc Date: Thu, 4 Aug 2022 15:50:59 +0200 Subject: [PATCH 2/2] feat: add tests for feature --- app/client/ui2018/pages.ts | 11 ++++++++-- test/nbrowser/Pages.ts | 41 +++++++++++++++++++++++++++++++------- 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/app/client/ui2018/pages.ts b/app/client/ui2018/pages.ts index 9fe65378..69b687a2 100644 --- a/app/client/ui2018/pages.ts +++ b/app/client/ui2018/pages.ts @@ -57,7 +57,10 @@ export function buildPageDom(name: Observable, 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() || '', @@ -73,7 +76,10 @@ export function buildPageDom(name: Observable, actions: PageActions, ... // firefox. ) : cssPageItem( - cssPageInitial(dom.text((use) => Array.from(use(name))[0])), + cssPageInitial( + testId('initial'), + dom.text((use) => Array.from(use(name))[0]), + ), cssPageName( dom.text(name), testId('label'), @@ -129,6 +135,7 @@ const cssPageName = styled('div', ` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex-grow: 1; .${treeViewContainer.className}-close & { display: none; } diff --git a/test/nbrowser/Pages.ts b/test/nbrowser/Pages.ts index 9237fa43..e8f854f2 100644 --- a/test/nbrowser/Pages.ts +++ b/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(); +}