diff --git a/packages/datalib/src/ChangeSet.ts b/packages/datalib/src/ChangeSet.ts
index 3cb27415c..ea25708ff 100644
--- a/packages/datalib/src/ChangeSet.ts
+++ b/packages/datalib/src/ChangeSet.ts
@@ -77,6 +77,7 @@ export function setChangeSetValue(
definition: ChangeSetFieldDefinition,
value: string
): ChangeSet {
+ if (!changeSet || !definition) return changeSet;
let [fieldName, existingItem] = findExistingChangeSetItem(changeSet, definition);
if (fieldName == 'deletes') {
changeSet = revertChangeSetRowChanges(changeSet, definition);
diff --git a/packages/web/src/TabsPanel.js b/packages/web/src/TabsPanel.js
index 2e2b70818..25970e9ff 100644
--- a/packages/web/src/TabsPanel.js
+++ b/packages/web/src/TabsPanel.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
import theme from './theme';
@@ -15,13 +16,17 @@ const FileTabItem = styled.div`
border-right: 1px solid white;
padding-left: 15px;
padding-right: 15px;
+ flex-shrink: 1;
+ flex-grow: 0;
+ min-width: 10px;
display: flex;
align-items: center;
cursor: pointer;
+ user-select: none;
&:hover {
color: ${theme.tabsPanel.hoverFont};
}
- background-color: ${props =>
+ background-color: ${(props) =>
// @ts-ignore
props.selected ? theme.mainArea.background : 'inherit'};
`;
@@ -30,21 +35,45 @@ const FileNameWrapper = styled.span`
margin-left: 5px;
`;
+const CloseButton = styled.i`
+ margin-left: 5px;
+ color: gray;
+ &:hover {
+ color: ${theme.tabsPanel.hoverFont};
+ }
+`;
+
export default function TabsPanel() {
const tabs = useOpenedTabs();
const setOpenedTabs = useSetOpenedTabs();
- const handleTabClick = tabid => {
- setOpenedTabs(files =>
- files.map(x => ({
+ const handleTabClick = (e, tabid) => {
+ if (e.target.closest('.tabCloseButton')) {
+ return;
+ }
+ setOpenedTabs((files) =>
+ files.map((x) => ({
...x,
selected: x.tabid == tabid,
}))
);
};
+ const closeTab = (tabid) => {
+ setOpenedTabs((files) => {
+ let index = _.findIndex(files, (x) => x.tabid == tabid);
+ const newFiles = files.filter((x) => x.tabid != tabid);
+
+ if (!newFiles.find((x) => x.selected)) {
+ if (index >= newFiles.length) index -= 1;
+ if (index >= 0) newFiles[index].selected = true;
+ }
+
+ return newFiles;
+ });
+ };
const handleMouseUp = (e, tabid) => {
if (e.button == 1) {
- setOpenedTabs(files => files.filter(x => x.tabid != tabid));
+ closeTab(tabid);
}
};
// console.log(
@@ -54,16 +83,23 @@ export default function TabsPanel() {
return (
<>
- {tabs.map(tab => (
+ {tabs.map((tab) => (
handleTabClick(tab.tabid)}
- onMouseUp={e => handleMouseUp(e, tab.tabid)}
+ onClick={(e) => handleTabClick(e, tab.tabid)}
+ onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
>
{getIconImage(tab.icon)}
{tab.title}
+ {
+ e.preventDefault();
+ closeTab(tab.tabid);
+ }}
+ />
))}
>
diff --git a/packages/web/src/widgets/Toolbar.js b/packages/web/src/widgets/Toolbar.js
index db4f13f78..0bac77790 100644
--- a/packages/web/src/widgets/Toolbar.js
+++ b/packages/web/src/widgets/Toolbar.js
@@ -18,7 +18,7 @@ export default function ToolBar({ toolbarPortalRef }) {
Add connection
- Query
+ New Query
);