Merge pull request #96 from stefanak-michal/92-remember-tabs-setting

added option in settings to disable remembering open tabs

e2e/neo4j-read/settings.spec.ts

@@ -72,6 +72,25 @@ test.describe('Settings', { tag: '@neo4j-read' }, () => {
         await checkActiveTab(page, '*');
     });
 
+    test('Remember open tabs', async ({ page }) => {
+        await changeSettingAndClose(page, 'Remember open tabs');
+        // open some tab
+        await switchToTab(page, 'Start');
+        await containerLocator(page).getByRole('button', { name: '*' }).first().click();
+        await checkActiveTab(page, '*');
+        // click on log out button should stay at login page
+        await page.getByRole('button', { name: 'Log out' }).click();
+        await expect(page.locator('form#login')).toHaveCount(1);
+        // login again
+        await page.getByLabel('URL').fill(process.env.DB_HOSTNAME || 'bolt://localhost:7687');
+        await page.getByLabel('Username').fill(process.env.DB_USERNAME || '');
+        await page.getByLabel('Password').fill(process.env.DB_PASSWORD || '');
+        await page.getByRole('button', { name: 'Login' }).click();
+        await expect(page.getByLabel('main navigation')).toHaveCount(1);
+        // check amount of open tabs
+        await expect(page.locator('.tabs li')).toHaveCount(1);
+    });
+
     test.describe('Change resolution', () => {
         test.use({ viewport: { width: 1280, height: 800 } });
 

src/App.tsx

@@ -18,7 +18,7 @@ class App extends React.Component<object, IAppState> {
     };
 
     componentDidMount() {
-        if (this.state.darkMode) document.documentElement.className = 'theme-dark';
+        document.documentElement.className = this.state.darkMode ? 'theme-dark' : 'theme-light';
     }
 
     handleLogin = () => {
@@ -42,7 +42,7 @@ class App extends React.Component<object, IAppState> {
             },
             () => {
                 setSetting('darkMode', this.state.darkMode);
-                document.documentElement.className = this.state.darkMode ? 'theme-dark' : '';
+                document.documentElement.className = this.state.darkMode ? 'theme-dark' : 'theme-light';
             }
         );
     };

src/Logged.tsx

@@ -69,6 +69,7 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
     constructor(props) {
         super(props);
 
+        if (!settings().rememberOpenTabs) localStorage.removeItem('tabs');
         const tabs = localStorage.getItem('tabs');
         if (tabs) {
             const parsed = JSON.parse(tabs);
@@ -182,7 +183,7 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
                     contents: state.contents,
                     activeTab: active || !state.activeTab ? id : state.activeTab,
                 };
-                localStorage.setItem('tabs', JSON.stringify(obj));
+                if (settings().rememberOpenTabs) localStorage.setItem('tabs', JSON.stringify(obj));
                 return obj;
             });
 
@@ -212,7 +213,7 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
                     contents: state.contents.filter(content => id !== content.id),
                     activeTab: active,
                 };
-                localStorage.setItem('tabs', JSON.stringify(obj));
+                if (settings().rememberOpenTabs) localStorage.setItem('tabs', JSON.stringify(obj));
                 return obj;
             });
         },
@@ -224,7 +225,7 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
                     contents: state.contents.filter(content => content.id === 'Start'),
                     activeTab: 'Start',
                 };
-                localStorage.setItem('tabs', JSON.stringify(obj));
+                if (settings().rememberOpenTabs) localStorage.setItem('tabs', JSON.stringify(obj));
                 return obj;
             });
         },
@@ -240,14 +241,15 @@ class Logged extends React.Component<ILoggedProps, ILoggedState> {
         },
         setActive: (id: string) => {
             this.setState(state => {
-                localStorage.setItem(
-                    'tabs',
-                    JSON.stringify({
-                        tabs: state.tabs,
-                        contents: state.contents,
-                        activeTab: id,
-                    })
-                );
+                if (settings().rememberOpenTabs)
+                    localStorage.setItem(
+                        'tabs',
+                        JSON.stringify({
+                            tabs: state.tabs,
+                            contents: state.contents,
+                            activeTab: id,
+                        })
+                    );
                 return {
                     activeTab: id,
                 };

src/db.ts

@@ -126,7 +126,7 @@ class Db {
     };
 
     query = (stmt: string, params: object = {}, db: string = undefined): Promise<QueryResult> => {
-        mixpanel.track('Executed query');
+        if (typeof process === 'undefined') mixpanel.track('Executed query');
         return new Promise((resolve, reject) => {
             this._driver
                 .executeQuery(stmt, params, { database: db })

src/index.tsx

@@ -3,12 +3,14 @@ import * as ReactDOM from 'react-dom/client';
 import App from './App';
 import mixpanel from 'mixpanel-browser';
 
-mixpanel.init('b79f8e7c618e117cb8648076ffde5154', {
-    api_host: 'https://api-eu.mixpanel.com',
-    track_pageview: true,
-    persistence: 'localStorage',
-    secure_cookie: true,
-});
+if (typeof process === 'undefined') {
+    mixpanel.init('b79f8e7c618e117cb8648076ffde5154', {
+        api_host: 'https://api-eu.mixpanel.com',
+        track_pageview: true,
+        persistence: 'localStorage',
+        secure_cookie: true,
+    });
+}
 
 const root = ReactDOM.createRoot(document.getElementById('root') as Element);
 root.render(

src/layout/Settings.tsx

@@ -86,6 +86,16 @@ class Settings extends React.Component<{ handleClose: () => void }, ISettingsSta
                         )}
                     </ThemeSwitchContext.Consumer>
                 </div>
+                <div className='mb-3'>
+                    <Checkbox
+                        name='rememberOpenTabs'
+                        onChange={this.handleChange}
+                        label='Remember open tabs'
+                        checked={this.state.settings.rememberOpenTabs}
+                        color='is-link'
+                        help='After successful login app will try open remembered tabs.'
+                    />
+                </div>
                 <div className='field'>
                     <label className='label'>Method when printing out temporal values</label>
                     <div className='control'>
@@ -120,6 +130,7 @@ export function settings(): ISettings {
         temporalValueToStringFunction: 'toString',
         darkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
         confirmCloseUnsavedChanges: true,
+        rememberOpenTabs: true,
         ...(localStorage.getItem('settings') ? JSON.parse(localStorage.getItem('settings')) : {}),
     };
 }

src/utils/interfaces.ts

@@ -27,6 +27,7 @@ export interface ISettings {
     temporalValueToStringFunction: string;
     darkMode: boolean;
     confirmCloseUnsavedChanges: boolean;
+    rememberOpenTabs: boolean;
 }
 
 export interface IStashManager {