feat: add settings tab

app/lib/menu/menu-builder.js

@@ -75,6 +75,8 @@ class MenuBuilder {
         .appendExportAs()
         .appendCloseTab()
         .appendSeparator()
+        .appendSettings()
+        .appendSeparator()
         .appendQuit()
         .get()
     );
@@ -350,6 +352,17 @@ class MenuBuilder {
     return this;
   }
 
+  appendSettings() {
+    this.menu.append(new MenuItem({
+      label: 'Settings',
+      click: function() {
+        app.emit('menu:action', 'open-settings');
+      }
+    }));
+
+    return this;
+  }
+
   appendMenuItem(builder, menuItem) {
     const {
       accelerator,

client/src/app/App.js

@@ -78,6 +78,13 @@ export const EMPTY_TAB = {
   type: 'empty'
 };
 
+export const SETTINGS_TAB = {
+  id: '__settings',
+  type: 'settings',
+  name: 'Settings',
+  title: 'Settings'
+};
+
 const ENCODING_UTF8 = 'utf8';
 
 const FILTER_ALL_EXTENSIONS = {
@@ -471,6 +478,10 @@ export class App extends PureComponent {
     return tab === EMPTY_TAB;
   };
 
+  isSettingsTab = (tab) => {
+    return tab === SETTINGS_TAB;
+  };
+
   isDirty = (tab) => {
     return !!this.state.dirtyTabs[tab.id];
   };
@@ -1603,6 +1614,14 @@ export class App extends PureComponent {
     return Promise.reject(new Error('no last tab'));
   };
 
+  openSettings = () => {
+    if (!this.state.tabs.includes(SETTINGS_TAB)) {
+      this.addTab(SETTINGS_TAB);
+    }
+
+    return this.selectTab(SETTINGS_TAB);
+  };
+
   showShortcuts = () => this.openModal('KEYBOARD_SHORTCUTS');
 
   /**
@@ -1783,6 +1802,10 @@ export class App extends PureComponent {
       return this.createDiagram('cmmn');
     }
 
+    if (action === 'open-settings') {
+      return this.openSettings();
+    }
+
     if (action === 'create-form') {
       return this.createDiagram('form');
     }

client/src/app/SettingsTab.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+import React, { PureComponent } from 'react';
+
+import css from './EmptyTab.less';
+
+import {
+  Tab
+} from './primitives';
+
+import Flags, { DISABLE_DMN, DISABLE_FORM, DISABLE_ZEEBE, DISABLE_PLATFORM } from '../util/Flags';
+
+
+export default class EmptyTab extends PureComponent {
+
+  componentDidMount() {
+    this.props.onShown();
+  }
+
+  triggerAction() { }
+
+  renderDiagramButton = (action, title, icon) => {
+
+    const {
+      onAction
+    } = this.props;
+
+    return (
+      <button className="btn btn-secondary" onClick={ () => onAction(action) }>
+        {icon}
+        {title}
+      </button>
+    );
+  };
+
+  render() {
+
+    return (
+      <Tab className={ css.EmptyTab }>
+        <h1>This is the settings page</h1>
+
+        <p>
+          Lorem ipsum foo bar wat.
+        </p>
+
+        <h3>Startup Flags</h3>
+
+        <pre>
+          { JSON.stringify(Flags.data, 0, 2) }
+        </pre>
+      </Tab>
+    );
+  }
+}

client/src/app/TabsProvider.js

@@ -32,6 +32,7 @@ import {
 } from '../util/Engines';
 
 import EmptyTab from './EmptyTab';
+import SettingsTab from './SettingsTab';
 
 import parseDiagramType from './util/parseDiagramType';
 
@@ -142,6 +143,17 @@ export default class TabsProvider {
           return null;
         }
       },
+      settings: {
+        canOpen(file) {
+          return false;
+        },
+        getComponent() {
+          return SettingsTab;
+        },
+        getIcon() {
+          return null;
+        }
+      },
       'cloud-bpmn': {
         name: 'BPMN',
         encoding: ENCODING_UTF8,