Fix improper re-mounting of editors in newIDE when closing a tab, add text ellipsis in tabs

newIDE/app/src/MainFrame/EditorTabsHandler.js

@@ -9,10 +9,10 @@ export const getEditorTabsInitialState = () => {
   };
 };
 
-export const openEditorTab = (state, name, editorCreator: () => BaseEditor) => {
+export const openEditorTab = (state, name, editorCreator: () => BaseEditor, key) => {
   const existingEditorId = findIndex(
     state.editors,
-    editor => editor.name === name
+    editor => editor.key === key
   );
   if (existingEditorId !== -1) {
     return {
@@ -28,6 +28,7 @@ export const openEditorTab = (state, name, editorCreator: () => BaseEditor) => {
       }),
     editorRef: null,
     name,
+    key,
   };
 
   return {

newIDE/app/src/MainFrame/index.js

@@ -130,13 +130,12 @@ class MainFrame extends Component {
     this.setState({
       editorTabs: openEditorTab(this.state.editorTabs, name, () => (
         <EventsSheetContainer
-          key={'external events ' + name}
           project={this.state.currentProject}
           events={this.state.currentProject.getExternalEvents(name).getEvents()}
           layout={this.state.currentProject.getLayoutAt(0)}
           setToolbar={this.setEditorToolbar}
         />
-      )),
+      ), 'external events ' + name),
     });
   };
 
@@ -144,7 +143,6 @@ class MainFrame extends Component {
     this.setState({
       editorTabs: openEditorTab(this.state.editorTabs, name, () => (
         <SceneEditor
-          key={'layout ' + name}
           project={this.state.currentProject}
           layoutName={name}
           setToolbar={this.setEditorToolbar}
@@ -152,7 +150,7 @@ class MainFrame extends Component {
           showPreviewButton
           onEditObject={this.props.onEditObject}
         />
-      )),
+      ), 'layout ' + name),
     });
   };
 
@@ -160,7 +158,6 @@ class MainFrame extends Component {
     this.setState({
       editorTabs: openEditorTab(this.state.editorTabs, name, () => (
         <ExternalLayoutEditor
-          key={'external layout ' + name}
           project={this.state.currentProject}
           externalLayoutName={name}
           setToolbar={this.setEditorToolbar}
@@ -168,7 +165,7 @@ class MainFrame extends Component {
           showPreviewButton
           onEditObject={this.props.onEditObject}
         />
-      )),
+      ), 'external layout ' + name),
     });
   };
 
@@ -176,11 +173,10 @@ class MainFrame extends Component {
     this.setState({
       editorTabs: openEditorTab(this.state.editorTabs, 'Start Page', () => (
         <StartPage
-          key={'start page'}
           setToolbar={this.setEditorToolbar}
           onOpen={this._onOpenFromFile}
         />
-      )),
+      ), 'start page'),
     });
   };
 
@@ -278,7 +274,7 @@ class MainFrame extends Component {
               <Tab
                 label={editorTab.name}
                 value={id}
-                key={id}
+                key={editorTab.key}
                 onActive={() => this._onEditorTabActive(editorTab)}
                 onClose={() => this._onCloseEditorTab(editorTab)}
               >

newIDE/app/src/UI/Tabs.js

@@ -38,18 +38,30 @@ class ThemableTab extends Component {
   static muiName = 'Tab';
 
   render() {
-    const {muiTheme, selected, onClose, ...tabProps} = this.props;
+    const {muiTheme, selected, onClose, label, ...tabProps} = this.props;
+
+    const truncatedLabel = (
+      <span style={{
+        width: muiTheme.tabs.width - muiTheme.tabs.closeButtonWidth * 1.5,
+        marginRight: muiTheme.tabs.closeButtonWidth,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}>
+        {label}
+      </span>
+    )
 
     return (
       <span
         style={{
           position: 'relative',
-          width: this.props.muiTheme.tabs.width,
+          width: muiTheme.tabs.width,
           display: 'inline-block',
         }}
       >
         <MaterialUITab
           {...tabProps}
+          label={truncatedLabel}
           selected={selected}
           buttonStyle={{
             height: muiTheme.tabs.height,
@@ -72,8 +84,8 @@ class ThemableTab extends Component {
             top: 0,
             bottom: 0,
             borderRadius: 0,
-            width: '24px',
-            minWidth: '24px',
+            width: muiTheme.tabs.closeButtonWidth,
+            minWidth: muiTheme.tabs.closeButtonWidth,
           }}
           icon={
             <Close

newIDE/app/src/UI/Theme/DefaultTheme.js

@@ -45,5 +45,6 @@ export default getMuiTheme({
     selectedTextColor: '#ffffff',
     width: 200,
     height: 32,
+    closeButtonWidth: 24,
   },
 });

newIDE/app/src/stories/index.js

@@ -22,11 +22,27 @@ storiesOf('Tabs', module)
       <Tab label="Tab 2" onClose={action("Close tab 2")}>
         <div>Tab 2 content</div>
       </Tab>
-      <Tab label="Tab 3" onClose={action("Close tab 3")}>
+      <Tab label="Tab 3 with a long label" onClose={action("Close tab 3")}>
         <div>Tab 3 content</div>
       </Tab>
     </Tabs>
   )
+  .add('long labels', () =>
+    <Tabs>
+      <Tab label="Tab 1 with a very very long label" onClose={action("Close tab 1")}>
+        <div>Tab 1 content</div>
+      </Tab>
+      <Tab label="Small 2" onClose={action("Close tab 2")}>
+        <div>Tab 2 content</div>
+      </Tab>
+      <Tab label="Tab 3 with a very very loooong label" onClose={action("Close tab 3")}>
+        <div>Tab 3 content</div>
+      </Tab>
+      <Tab label="Small 4" onClose={action("Close tab 4")}>
+        <div>Tab 4 content</div>
+      </Tab>
+    </Tabs>
+  )
 
 storiesOf('StartPage', module)
   .addDecorator(muiDecorator)