Desktop: Resolve #3695: Show notebook and note title in the title bar (#4390)

.eslintignore

@@ -610,6 +610,12 @@ packages/app-desktop/gui/ToolbarButton/styles/index.js.map
 packages/app-desktop/gui/dialogs.d.ts
 packages/app-desktop/gui/dialogs.js
 packages/app-desktop/gui/dialogs.js.map
+packages/app-desktop/gui/getWindowTitle.d.ts
+packages/app-desktop/gui/getWindowTitle.js
+packages/app-desktop/gui/getWindowTitle.js.map
+packages/app-desktop/gui/getWindowTitle.test.d.ts
+packages/app-desktop/gui/getWindowTitle.test.js
+packages/app-desktop/gui/getWindowTitle.test.js.map
 packages/app-desktop/gui/hooks/useEffectDebugger.d.ts
 packages/app-desktop/gui/hooks/useEffectDebugger.js
 packages/app-desktop/gui/hooks/useEffectDebugger.js.map

.gitignore

@@ -597,6 +597,12 @@ packages/app-desktop/gui/ToolbarButton/styles/index.js.map
 packages/app-desktop/gui/dialogs.d.ts
 packages/app-desktop/gui/dialogs.js
 packages/app-desktop/gui/dialogs.js.map
+packages/app-desktop/gui/getWindowTitle.d.ts
+packages/app-desktop/gui/getWindowTitle.js
+packages/app-desktop/gui/getWindowTitle.js.map
+packages/app-desktop/gui/getWindowTitle.test.d.ts
+packages/app-desktop/gui/getWindowTitle.test.js
+packages/app-desktop/gui/getWindowTitle.test.js.map
 packages/app-desktop/gui/hooks/useEffectDebugger.d.ts
 packages/app-desktop/gui/hooks/useEffectDebugger.js
 packages/app-desktop/gui/hooks/useEffectDebugger.js.map
@@ -1492,3 +1498,5 @@ packages/tools/tool-utils.d.ts
 packages/tools/tool-utils.js
 packages/tools/tool-utils.js.map
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
+packages/app-desktop/gui/getWindowTitle.js
+packages/app-desktop/gui/getWindowTitle.test.js

packages/app-desktop/gui/Navigator.jsx

@@ -1,22 +1,19 @@
 const React = require('react');
 const Component = React.Component;
-const Setting = require('@joplin/lib/models/Setting').default;
 const { connect } = require('react-redux');
 const bridge = require('electron').remote.require('./bridge').default;
+const getWindowTitle = require('./getWindowTitle').default;
+
 
 class NavigatorComponent extends Component {
+	constructor(props) {
+		super(props);
+	}
 	UNSAFE_componentWillReceiveProps(newProps) {
 		if (newProps.route) {
-			const screenInfo = this.props.screens[newProps.route.routeName];
+			this.updateWindowTitle(getWindowTitle(newProps.notes, newProps.selectedNoteIds, newProps.selectedFolderId, newProps.folders, newProps.screens, newProps.route));
-			const devMarker = Setting.value('env') === 'dev' ? ' (DEV)' : '';
-			const windowTitle = [`Joplin${devMarker}`];
-			if (screenInfo.title) {
-				windowTitle.push(screenInfo.title());
-			}
-			this.updateWindowTitle(windowTitle.join(' - '));
 		}
 	}
-
 	updateWindowTitle(title) {
 		try {
 			if (bridge().window()) bridge().window().setTitle(title);
@@ -49,6 +46,10 @@ class NavigatorComponent extends Component {
 const Navigator = connect(state => {
 	return {
 		route: state.route,
+		selectedNoteIds: state.selectedNoteIds,
+		selectedFolderId: state.selectedFolderId,
+		folders: state.folders,
+		notes: state.notes,
 	};
 })(NavigatorComponent);
 

packages/app-desktop/gui/getWindowTitle.test.ts

@@ -0,0 +1,47 @@
+import getWindowTitle from './getWindowTitle';
+const Setting = require('@joplin/lib/models/Setting').default;
+
+const props: any = {
+	'screens': { 'Main': {}, 'DropboxLogin': { title: function() { return 'Dropbox Login'; } } },
+	'route': { 'type': 'NAV_GO', 'routeName': 'Main', 'props': {} },
+	'selectedNoteIds': ['1ce557cf187249e38f2458c78c20d09a'],
+	'selectedFolderId': 'cea30a191961480ea7284861e90d5a54',
+	'folders': [
+		{
+			'id': '349fcee65ad14fb2b64e69746c29a2d9',
+			'title': 'self care',
+		},
+		{
+			'id': 'cea30a191961480ea7284861e90d5a54',
+			'title': 'testbook',
+		}],
+	'notes': [{
+		'id': '1ce557cf187249e38f2458c78c20d09a',
+		'title': 'Open source projects to contribute',
+		'parent_id': 'cea30a191961480ea7284861e90d5a54',
+	}],
+};
+
+describe('Get Window Title', () => {
+	Setting.setConstant('env', 'dev');
+	test('Should produce string as Folder > Note', () => {
+		const title = getWindowTitle(props.notes, props.selectedNoteIds, props.selectedFolderId, props.folders, props.screens, props.route);
+		expect(title).toBe('testbook > Open source projects to contribute - Joplin (DEV)');
+	});
+	test('When no note is selected', () => {
+		const title = getWindowTitle(props.notes, [], props.selectedFolderId, props.folders, props.screens, props.route);
+		expect(title).toBe('testbook - Joplin (DEV)');
+	});
+	test('When no folder is selected', () => {
+		const title = getWindowTitle(props.notes, props.selectedNoteIds, null, props.folders, props.screens, props.route);
+		expect(title).toBe('testbook > Open source projects to contribute - Joplin (DEV)');
+	});
+	test('When no note and folder is selected', () => {
+		const title = getWindowTitle(props.notes, [], null, props.folders, props.screens, props.route);
+		expect(title).toBe('Joplin (DEV)');
+	});
+	test('When not on main screen (dropbox login)', () => {
+		const title = getWindowTitle(props.notes, props.selectedNoteIds, props.selectedFolderId, props.folders, props.screens, { 'type': 'NAV_GO', 'routeName': 'DropboxLogin', 'props': {} });
+		expect(title).toBe('Dropbox Login - Joplin (DEV)');
+	});
+});

packages/app-desktop/gui/getWindowTitle.ts

@@ -0,0 +1,25 @@
+const Setting = require('@joplin/lib/models/Setting').default;
+import BaseModel from '@joplin/lib/BaseModel';
+import { _ } from '@joplin/lib/locale';
+const { substrWithEllipsis } = require('@joplin/lib/string-utils');
+
+
+export default function getWindowTitle(notes: any[], selectedNoteIds: string[], selectedFolderId: string, folders: any[], screens: any, route: { type: string; routeName: string; props: any}) {
+	const windowTitle = [];
+	const note = selectedNoteIds.length ? BaseModel.byId(notes, selectedNoteIds[0]) : null;
+	const folderId = note ? note.parent_id : selectedFolderId;
+	const folder = folderId ? BaseModel.byId(folders, folderId) : null;
+	const screenInfo = screens[route.routeName];
+	if (screenInfo.title) {
+		windowTitle.push(screenInfo.title());
+	} else if (route.routeName == 'Main' && folder) {
+		const folderTitle = folder.title;
+		if (note) {
+			const noteTitle = note.title.length ? note.title : _('Untitled');
+			windowTitle.push(`${substrWithEllipsis(folderTitle, 0, 30)} > ${substrWithEllipsis(noteTitle, 0, 50)}`);
+		} else { windowTitle.push(folderTitle); }
+	}
+	const devMarker = Setting.value('env') === 'dev' ? ' (DEV)' : '';
+	windowTitle.push(`Joplin${devMarker}`);
+	return windowTitle.join(' - ');
+}