prettier

packages/web/src/DragAndDropFileTarget.js

@@ -11,7 +11,7 @@ const TargetStyled = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.main_background_blue[3]};
+  background: ${props => props.theme.main_background_blue[3]};
   align-items: center;
   justify-content: space-around;
   z-index: 1000;
@@ -52,8 +52,8 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
           <InfoWrapper>
             Supported file types:{' '}
             {fileFormats
-              .filter((x) => x.readerFunc)
+              .filter(x => x.readerFunc)
-              .map((x) => x.name)
+              .map(x => x.name)
               .join(', ')}
           </InfoWrapper>
         </InfoBox>

packages/web/src/Screen.js

@@ -21,10 +21,10 @@ import ErrorBoundary from './utility/ErrorBoundary';
 const BodyDiv = styled.div`
   position: fixed;
   top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px;
-  left: ${(props) => props.contentLeft}px;
+  left: ${props => props.contentLeft}px;
   bottom: ${dimensions.statusBar.height}px;
   right: 0;
-  background-color: ${(props) => props.theme.content_background};
+  background-color: ${props => props.theme.content_background};
 `;
 
 const ToolBarDiv = styled.div`
@@ -32,7 +32,7 @@ const ToolBarDiv = styled.div`
   top: 0;
   left: 0;
   right: 0;
-  background-color: ${(props) => props.theme.toolbar_background};
+  background-color: ${props => props.theme.toolbar_background};
   height: ${dimensions.toolBar.height}px;
 `;
 
@@ -42,7 +42,7 @@ const IconBar = styled.div`
   left: 0;
   bottom: ${dimensions.statusBar.height}px;
   width: ${dimensions.widgetMenu.iconSize}px;
-  background-color: ${(props) => props.theme.widget_background};
+  background-color: ${props => props.theme.widget_background};
 `;
 
 const LeftPanel = styled.div`
@@ -50,7 +50,7 @@ const LeftPanel = styled.div`
   top: ${dimensions.toolBar.height}px;
   left: ${dimensions.widgetMenu.iconSize}px;
   bottom: ${dimensions.statusBar.height}px;
-  background-color: ${(props) => props.theme.left_background};
+  background-color: ${props => props.theme.left_background};
   display: flex;
 `;
 
@@ -58,11 +58,11 @@ const TabsPanelContainer = styled.div`
   display: flex;
   position: fixed;
   top: ${dimensions.toolBar.height}px;
-  left: ${(props) => props.contentLeft}px;
+  left: ${props => props.contentLeft}px;
   height: ${dimensions.tabsPanel.height}px;
   right: 0;
-  background-color: ${(props) => props.theme.tabs_background2};
+  background-color: ${props => props.theme.tabs_background2};
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
 
   overflow-x: auto;
 
@@ -78,7 +78,7 @@ const StausBarContainer = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.statusbar_background};
+  background-color: ${props => props.theme.statusbar_background};
 `;
 
 const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
@@ -100,7 +100,7 @@ export default function Screen() {
     ? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness
     : dimensions.widgetMenu.iconSize;
   const toolbarPortalRef = React.useRef();
-  const onSplitDown = useSplitterDrag('clientX', (diff) => setLeftPanelWidth((v) => v + diff));
+  const onSplitDown = useSplitterDrag('clientX', diff => setLeftPanelWidth(v => v + diff));
 
   const { getRootProps, getInputProps, isDragActive } = useUploadsZone();
 

packages/web/src/TabContent.js

@@ -12,7 +12,7 @@ const TabContainerStyled = styled.div`
   right: 0;
   bottom: 0;
   display: flex;
-  visibility: ${(props) =>
+  visibility: ${props =>
     // @ts-ignore
     props.tabVisible ? 'visible' : 'hidden'};
 `;
@@ -52,15 +52,15 @@ export default function TabContent({ toolbarPortalRef }) {
     _.difference(
       _.keys(mountedTabs),
       _.map(
-        files.filter((x) => x.closedTime == null),
+        files.filter(x => x.closedTime == null),
         'tabid'
       )
     ).length > 0
   ) {
-    setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find((x) => x.tabid == k && x.closedTime == null)));
+    setMountedTabs(_.pickBy(mountedTabs, (v, k) => files.find(x => x.tabid == k && x.closedTime == null)));
   }
 
-  const selectedTab = files.find((x) => x.selected);
+  const selectedTab = files.find(x => x.selected);
   if (selectedTab) {
     const { tabid } = selectedTab;
     if (tabid && !mountedTabs[tabid])
@@ -70,7 +70,7 @@ export default function TabContent({ toolbarPortalRef }) {
       });
   }
 
-  return _.keys(mountedTabs).map((tabid) => {
+  return _.keys(mountedTabs).map(tabid => {
     const { TabComponent, props } = mountedTabs[tabid];
     const tabVisible = tabid == (selectedTab && selectedTab.tabid);
     return (

packages/web/src/TabsPanel.js

@@ -31,8 +31,8 @@ const DbWrapperHandler = styled.div`
 const DbNameWrapper = styled.div`
   text-align: center;
   font-size: 8pt;
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
-  border-right: 1px solid ${(props) => props.theme.border};
+  border-right: 1px solid ${props => props.theme.border};
   cursor: pointer;
   user-select: none;
   padding: 1px;
@@ -44,9 +44,9 @@ const DbNameWrapper = styled.div`
   // height: 15px;
 
   &:hover {
-    background-color: ${(props) => props.theme.tabs_background3};
+    background-color: ${props => props.theme.tabs_background3};
   }
-  background-color: ${(props) =>
+  background-color: ${props =>
     // @ts-ignore
     props.selected ? props.theme.tabs_background1 : 'inherit'};
 `;
@@ -57,7 +57,7 @@ const DbNameWrapper = styled.div`
 // `;
 
 const FileTabItem = styled.div`
-  border-right: 1px solid ${(props) => props.theme.border};
+  border-right: 1px solid ${props => props.theme.border};
   padding-left: 15px;
   padding-right: 15px;
   flex-shrink: 1;
@@ -68,9 +68,9 @@ const FileTabItem = styled.div`
   cursor: pointer;
   user-select: none;
   &:hover {
-    color: ${(props) => props.theme.tabs_font_hover};
+    color: ${props => props.theme.tabs_font_hover};
   }
-  background-color: ${(props) =>
+  background-color: ${props =>
     // @ts-ignore
     props.selected ? props.theme.tabs_background1 : 'inherit'};
 `;
@@ -83,7 +83,7 @@ const CloseButton = styled(FontIcon)`
   margin-left: 5px;
   color: gray;
   &:hover {
-    color: ${(props) => props.theme.tabs_font2};
+    color: ${props => props.theme.tabs_font2};
   }
 `;
 
@@ -140,21 +140,21 @@ export default function TabsPanel() {
     if (e.target.closest('.tabCloseButton')) {
       return;
     }
-    setOpenedTabs((files) =>
+    setOpenedTabs(files =>
-      files.map((x) => ({
+      files.map(x => ({
         ...x,
         selected: x.tabid == tabid,
       }))
     );
   };
-  const closeTabFunc = (closeCondition) => (tabid) => {
+  const closeTabFunc = closeCondition => tabid => {
-    setOpenedTabs((files) => {
+    setOpenedTabs(files => {
-      const active = files.find((x) => x.tabid == tabid);
+      const active = files.find(x => x.tabid == tabid);
       if (!active) return files;
-      const lastSelectedIndex = _.findIndex(files, (x) => x.tabid == tabid);
+      const lastSelectedIndex = _.findIndex(files, x => x.tabid == tabid);
       let selectedIndex = lastSelectedIndex;
 
-      const newFiles = files.map((x) => ({
+      const newFiles = files.map(x => ({
         ...x,
         closedTime: x.closedTime || (closeCondition(x, active) ? new Date().getTime() : undefined),
       }));
@@ -180,8 +180,8 @@ export default function TabsPanel() {
   const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
   const closeAll = () => {
     const closedTime = new Date().getTime();
-    setOpenedTabs((tabs) =>
+    setOpenedTabs(tabs =>
-      tabs.map((tab) => ({
+      tabs.map(tab => ({
         ...tab,
         closedTime: tab.closedTime || closedTime,
         selected: false,
@@ -226,8 +226,8 @@ export default function TabsPanel() {
   //   tabs.map(x => x.tooltip)
   // );
   const tabsWithDb = tabs
-    .filter((x) => !x.closedTime)
+    .filter(x => !x.closedTime)
-    .map((tab) => ({
+    .map(tab => ({
       ...tab,
       tabDbName: getTabDbName(tab),
       tabDbKey: getTabDbKey(tab),
@@ -235,7 +235,7 @@ export default function TabsPanel() {
   const tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
   const dbKeys = _.keys(tabsByDb).sort();
 
-  const handleSetDb = async (props) => {
+  const handleSetDb = async props => {
     const { conid, database } = props || {};
     if (conid) {
       const connection = await getConnectionInfo({ conid, database });
@@ -249,7 +249,7 @@ export default function TabsPanel() {
 
   return (
     <>
-      {dbKeys.map((dbKey) => (
+      {dbKeys.map(dbKey => (
         <DbWrapperHandler key={dbKey}>
           <DbNameWrapper
             // @ts-ignore
@@ -260,15 +260,15 @@ export default function TabsPanel() {
             <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
           </DbNameWrapper>
           <DbGroupHandler>
-            {_.sortBy(tabsByDb[dbKey], 'title').map((tab) => (
+            {_.sortBy(tabsByDb[dbKey], 'title').map(tab => (
               <FileTabItem
                 {...tab}
                 title={tab.tooltip}
                 key={tab.tabid}
                 theme={theme}
-                onClick={(e) => handleTabClick(e, tab.tabid)}
+                onClick={e => handleTabClick(e, tab.tabid)}
-                onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
+                onMouseUp={e => handleMouseUp(e, tab.tabid)}
-                onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
+                onContextMenu={e => handleContextMenu(e, tab.tabid, tab.props)}
               >
                 {<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />}
                 <FileNameWrapper>{tab.title}</FileNameWrapper>
@@ -276,7 +276,7 @@ export default function TabsPanel() {
                   icon="icon close"
                   className="tabCloseButton"
                   theme={theme}
-                  onClick={(e) => {
+                  onClick={e => {
                     e.preventDefault();
                     closeTab(tab.tabid);
                   }}

packages/web/src/appobj/AppObjectCore.js

@@ -10,11 +10,11 @@ import useTheme from '../theme/useTheme';
 const AppObjectDiv = styled.div`
   padding: 5px;
   &:hover {
-    background-color: ${(props) => props.theme.left_background_blue[1]};
+    background-color: ${props => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
-  font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
 `;
 
 const IconWrap = styled.span`
@@ -28,7 +28,7 @@ const StatusIconWrap = styled.span`
 const ExtInfoWrap = styled.span`
   font-weight: normal;
   margin-left: 5px;
-  color: ${(props) => props.theme.left_font3};
+  color: ${props => props.theme.left_font3};
 `;
 
 export function AppObjectCore({
@@ -50,7 +50,7 @@ export function AppObjectCore({
   const theme = useTheme();
   const showMenu = useShowMenu();
 
-  const handleContextMenu = (event) => {
+  const handleContextMenu = event => {
     if (!Menu) return;
 
     event.preventDefault();
@@ -68,7 +68,7 @@ export function AppObjectCore({
       theme={theme}
       isBold={isBold}
       draggable
-      onDragStart={(e) => {
+      onDragStart={e => {
         e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
       }}
       {...other}

packages/web/src/appobj/AppObjectList.js

@@ -22,7 +22,7 @@ const GroupDiv = styled.div`
   user-select: none;
   padding: 5px;
   &:hover {
-    background-color: ${(props) => props.theme.left_background_blue[1]};
+    background-color: ${props => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
@@ -57,7 +57,7 @@ function AppObjectListItem({
   };
 
   if (SubItems) {
-    commonProps.onClick2 = () => setIsExpanded((v) => !v);
+    commonProps.onClick2 = () => setIsExpanded(v => !v);
   }
   if (onObjectClick) {
     commonProps.onClick3 = onObjectClick;
@@ -90,9 +90,9 @@ function AppObjectGroup({ group, items }) {
         <ExpandIconHolder>
           <ExpandIcon isExpanded={isExpanded} />
         </ExpandIconHolder>
-        {group} {items && `(${items.filter((x) => x.component).length})`}
+        {group} {items && `(${items.filter(x => x.component).length})`}
       </GroupDiv>
-      {isExpanded && items.map((x) => x.component)}
+      {isExpanded && items.map(x => x.component)}
     </>
   );
 }
@@ -108,7 +108,7 @@ export function AppObjectList({
   isExpandable = undefined,
   getCommonProps = undefined,
 }) {
-  const createComponent = (data) => (
+  const createComponent = data => (
     <AppObjectListItem
       key={AppObjectComponent.extractKey(data)}
       AppObjectComponent={AppObjectComponent}
@@ -123,7 +123,7 @@ export function AppObjectList({
 
   if (groupFunc) {
     const listGrouped = _.compact(
-      (list || []).map((data) => {
+      (list || []).map(data => {
         const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
         if (matcher && !matcher(filter)) return null;
         const component = createComponent(data);
@@ -132,12 +132,12 @@ export function AppObjectList({
       })
     );
     const groups = _.groupBy(listGrouped, 'group');
-    return (groupOrdered || _.keys(groups)).map((group) => (
+    return (groupOrdered || _.keys(groups)).map(group => (
       <AppObjectGroup key={group} group={group} items={groups[group]} />
     ));
   }
 
-  return (list || []).map((data) => {
+  return (list || []).map(data => {
     const matcher = AppObjectComponent.createMatcher && AppObjectComponent.createMatcher(data);
     if (matcher && !matcher(filter)) return null;
     return createComponent(data);

packages/web/src/appobj/ArchiveFileAppObject.js

@@ -69,7 +69,7 @@ function ArchiveFileAppObject({ data, commonProps }) {
   );
 }
 
-ArchiveFileAppObject.extractKey = (data) => data.fileName;
+ArchiveFileAppObject.extractKey = data => data.fileName;
-ArchiveFileAppObject.createMatcher = ({ fileName }) => (filter) => filterName(filter, fileName);
+ArchiveFileAppObject.createMatcher = ({ fileName }) => filter => filterName(filter, fileName);
 
 export default ArchiveFileAppObject;

packages/web/src/appobj/ArchiveFolderAppObject.js

@@ -28,7 +28,7 @@ function ArchiveFolderAppObject({ data, commonProps }) {
   );
 }
 
-ArchiveFolderAppObject.extractKey = (data) => data.name;
+ArchiveFolderAppObject.extractKey = data => data.name;
-ArchiveFolderAppObject.createMatcher = (data) => (filter) => filterName(filter, data.name);
+ArchiveFolderAppObject.createMatcher = data => filter => filterName(filter, data.name);
 
 export default ArchiveFolderAppObject;

packages/web/src/appobj/ClosedTabAppObject.js

@@ -8,10 +8,10 @@ import { AppObjectCore } from './AppObjectCore';
 function Menu({ data }) {
   const setOpenedTabs = useSetOpenedTabs();
   const handleDelete = () => {
-    setOpenedTabs((tabs) => tabs.filter((x) => x.tabid != data.tabid));
+    setOpenedTabs(tabs => tabs.filter(x => x.tabid != data.tabid));
   };
   const handleDeleteOlder = () => {
-    setOpenedTabs((tabs) => tabs.filter((x) => !x.closedTime || x.closedTime >= data.closedTime));
+    setOpenedTabs(tabs => tabs.filter(x => !x.closedTime || x.closedTime >= data.closedTime));
   };
   return (
     <>
@@ -26,8 +26,8 @@ function ClosedTabAppObject({ data, commonProps }) {
   const setOpenedTabs = useSetOpenedTabs();
 
   const onClick = () => {
-    setOpenedTabs((files) =>
+    setOpenedTabs(files =>
-      files.map((x) => ({
+      files.map(x => ({
         ...x,
         selected: x.tabid == tabid,
         closedTime: x.tabid == tabid ? undefined : x.closedTime,
@@ -49,6 +49,6 @@ function ClosedTabAppObject({ data, commonProps }) {
   );
 }
 
-ClosedTabAppObject.extractKey = (data) => data.tabid;
+ClosedTabAppObject.extractKey = data => data.tabid;
 
 export default ClosedTabAppObject;

packages/web/src/appobj/ConnectionAppObject.js

@@ -19,10 +19,10 @@ function Menu({ data }) {
   const config = useConfig();
 
   const handleEdit = () => {
-    showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />);
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
   };
   const handleDelete = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <ConfirmModal
         modalState={modalState}
         message={`Really delete connection ${data.displayName || data.server}?`}
@@ -31,16 +31,16 @@ function Menu({ data }) {
     ));
   };
   const handleCreateDatabase = () => {
-    showModal((modalState) => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
+    showModal(modalState => <CreateDatabaseModal modalState={modalState} conid={data._id} />);
   };
   const handleRefresh = () => {
     axios.post('server-connections/refresh', { conid: data._id });
   };
   const handleDisconnect = () => {
-    setOpenedConnections((list) => list.filter((x) => x != data._id));
+    setOpenedConnections(list => list.filter(x => x != data._id));
   };
   const handleConnect = () => {
-    setOpenedConnections((list) => [...list, data._id]);
+    setOpenedConnections(list => [...list, data._id]);
   };
   return (
     <>
@@ -72,13 +72,13 @@ function ConnectionAppObject({ data, commonProps }) {
   const extensions = useExtensions();
 
   const isBold = _.get(currentDatabase, 'connection._id') == _id;
-  const onClick = () => setOpenedConnections((c) => [...c, _id]);
+  const onClick = () => setOpenedConnections(c => [...c, _id]);
 
   let statusIcon = null;
   let statusTitle = null;
 
   let extInfo = null;
-  if (extensions.drivers.find((x) => x.engine == engine)) {
+  if (extensions.drivers.find(x => x.engine == engine)) {
     const match = (engine || '').match(/^([^@]*)@/);
     extInfo = match ? match[1] : engine;
   } else {
@@ -113,7 +113,7 @@ function ConnectionAppObject({ data, commonProps }) {
   );
 }
 
-ConnectionAppObject.extractKey = (data) => data._id;
+ConnectionAppObject.extractKey = data => data._id;
-ConnectionAppObject.createMatcher = ({ displayName, server }) => (filter) => filterName(filter, displayName, server);
+ConnectionAppObject.createMatcher = ({ displayName, server }) => filter => filterName(filter, displayName, server);
 
 export default ConnectionAppObject;

packages/web/src/appobj/DatabaseAppObject.js

@@ -32,7 +32,7 @@ function Menu({ data }) {
   };
 
   const handleImport = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <ImportExportModal
         modalState={modalState}
         initialValues={{
@@ -46,7 +46,7 @@ function Menu({ data }) {
   };
 
   const handleExport = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <ImportExportModal
         modalState={modalState}
         initialValues={{
@@ -85,6 +85,6 @@ function DatabaseAppObject({ data, commonProps }) {
   );
 }
 
-DatabaseAppObject.extractKey = (props) => props.name;
+DatabaseAppObject.extractKey = props => props.name;
 
 export default DatabaseAppObject;

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -168,12 +168,12 @@ function Menu({ data }) {
 
   return (
     <>
-      {menus[data.objectTypeField].map((menu) => (
+      {menus[data.objectTypeField].map(menu => (
         <DropDownMenuItem
           key={menu.label}
           onClick={async () => {
             if (menu.isExport) {
-              showModal((modalState) => (
+              showModal(modalState => (
                 <ImportExportModal
                   modalState={modalState}
                   initialValues={{
@@ -303,6 +303,6 @@ function DatabaseObjectAppObject({ data, commonProps }) {
 DatabaseObjectAppObject.extractKey = ({ schemaName, pureName }) =>
   schemaName ? `${schemaName}.${pureName}` : pureName;
 
-DatabaseObjectAppObject.createMatcher = ({ pureName }) => (filter) => filterName(filter, pureName);
+DatabaseObjectAppObject.createMatcher = ({ pureName }) => filter => filterName(filter, pureName);
 
 export default DatabaseObjectAppObject;

packages/web/src/appobj/FavoriteFileAppObject.js

@@ -12,7 +12,7 @@ export function useOpenFavorite() {
   const openNewTab = useOpenNewTab();
 
   const openFavorite = React.useCallback(
-    async (favorite) => {
+    async favorite => {
       const { icon, tabComponent, title, props, tabdata } = favorite;
       let tabdataNew = tabdata;
       if (props.savedFile) {
@@ -50,7 +50,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
   const electron = getElectron();
 
   const editFavorite = () => {
-    showModal((modalState) => <FavoriteModal modalState={modalState} editingData={data} />);
+    showModal(modalState => <FavoriteModal modalState={modalState} editingData={data} />);
   };
 
   const editFavoriteJson = async () => {
@@ -87,7 +87,7 @@ export function FavoriteFileAppObject({ data, commonProps }) {
       icon={icon || 'img favorite'}
       title={title}
       disableRename
-      onLoad={async (data) => {
+      onLoad={async data => {
         openFavorite(data);
       }}
       menuExt={
@@ -101,4 +101,4 @@ export function FavoriteFileAppObject({ data, commonProps }) {
   );
 }
 
-FavoriteFileAppObject.extractKey = (data) => data.file;
+FavoriteFileAppObject.extractKey = data => data.file;

packages/web/src/appobj/MacroAppObject.js

@@ -9,7 +9,7 @@ function MacroAppObject({ data, commonProps }) {
   return <AppObjectCore {...commonProps} data={data} title={title} icon={'img macro'} />;
 }
 
-MacroAppObject.extractKey = (data) => data.name;
+MacroAppObject.extractKey = data => data.name;
-MacroAppObject.createMatcher = ({ name, title }) => (filter) => filterName(filter, name, title);
+MacroAppObject.createMatcher = ({ name, title }) => filter => filterName(filter, name, title);
 
 export default MacroAppObject;

packages/web/src/appobj/SavedFileAppObject.js

@@ -17,7 +17,7 @@ function Menu({ data, menuExt = null, title = undefined, disableRename = false }
   const hasPermission = useHasPermission();
   const showModal = useShowModal();
   const handleDelete = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <ConfirmModal
         modalState={modalState}
         message={`Really delete file ${title || data.file}?`}
@@ -28,13 +28,13 @@ function Menu({ data, menuExt = null, title = undefined, disableRename = false }
     ));
   };
   const handleRename = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <InputTextModal
         modalState={modalState}
         value={data.file}
         label="New file name"
         header="Rename file"
-        onConfirm={(newFile) => {
+        onConfirm={newFile => {
           axios.post('files/rename', { ...data, newFile });
         }}
       />
@@ -77,7 +77,7 @@ export function SavedFileAppObjectBase({
       title={title || file}
       icon={icon}
       onClick={onClick}
-      Menu={(props) => <Menu {...props} menuExt={menuExt} title={title} disableRename={disableRename} />}
+      Menu={props => <Menu {...props} menuExt={menuExt} title={title} disableRename={disableRename} />}
     />
   );
 }
@@ -123,7 +123,7 @@ export function SavedSqlFileAppObject({ data, commonProps }) {
           <DropDownMenuItem onClick={handleGenerateExecute}>Generate shell execute</DropDownMenuItem>
         ) : null
       }
-      onLoad={(data) => {
+      onLoad={data => {
         newQuery({
           title: file,
           initialData: data,
@@ -147,7 +147,7 @@ export function SavedShellFileAppObject({ data, commonProps }) {
       commonProps={commonProps}
       format="text"
       icon="img shell"
-      onLoad={(data) => {
+      onLoad={data => {
         openNewTab(
           {
             title: file,
@@ -183,7 +183,7 @@ export function SavedChartFileAppObject({ data, commonProps }) {
       commonProps={commonProps}
       format="json"
       icon="img chart"
-      onLoad={(data) => {
+      onLoad={data => {
         openNewTab(
           {
             title: file,
@@ -222,7 +222,7 @@ export function SavedQueryFileAppObject({ data, commonProps }) {
       commonProps={commonProps}
       format="json"
       icon="img query-design"
-      onLoad={(data) => {
+      onLoad={data => {
         openNewTab(
           {
             title: file,
@@ -266,7 +266,7 @@ export function SavedMarkdownFileAppObject({ data, commonProps }) {
       commonProps={commonProps}
       format="text"
       icon="img markdown"
-      onLoad={(data) => {
+      onLoad={data => {
         openNewTab(
           {
             title: file,
@@ -308,7 +308,7 @@ export function SavedFileAppObject({ data, commonProps }) {
   SavedChartFileAppObject,
   SavedMarkdownFileAppObject,
   SavedFileAppObject,
-].forEach((fn) => {
+].forEach(fn => {
   // @ts-ignore
-  fn.extractKey = (data) => data.file;
+  fn.extractKey = data => data.file;
 });

packages/web/src/celldata/CellDataView.js

@@ -9,7 +9,7 @@ import useTheme from '../theme/useTheme';
 
 const Toolbar = styled.div`
   display: flex;
-  background: ${(props) => props.theme.toolbar_background};
+  background: ${props => props.theme.toolbar_background};
   align-items: center;
 `;
 
@@ -65,10 +65,10 @@ export default function CellDataView({ selection = undefined, grider = undefined
     value = selectedValue;
   }
   const autodetectFormatType = React.useMemo(() => autodetect(selection, grider, value), [selection, grider, value]);
-  const autodetectFormat = formats.find((x) => x.type == autodetectFormatType);
+  const autodetectFormat = formats.find(x => x.type == autodetectFormatType);
 
   const usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
-  const usedFormat = formats.find((x) => x.type == usedFormatType);
+  const usedFormat = formats.find(x => x.type == usedFormatType);
 
   const { Component } = usedFormat || {};
 
@@ -76,10 +76,10 @@ export default function CellDataView({ selection = undefined, grider = undefined
     <MainWrapper>
       <Toolbar theme={theme}>
         Format:
-        <SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}>
+        <SelectField value={selectedFormatType} onChange={e => setSelectedFormatType(e.target.value)}>
           <option value="autodetect">Autodetect - {autodetectFormat.title}</option>
 
-          {formats.map((fmt) => (
+          {formats.map(fmt => (
             <option value={fmt.type} key={fmt.type}>
               {fmt.title}
             </option>

packages/web/src/charts/ChartEditor.js

@@ -19,7 +19,7 @@ import { presetPrimaryColors } from '@ant-design/colors';
 import ErrorInfo from '../widgets/ErrorInfo';
 
 const LeftContainer = styled.div`
-  background-color: ${(props) => props.theme.manager_background};
+  background-color: ${props => props.theme.manager_background};
   display: flex;
   flex: 1;
 `;
@@ -71,7 +71,7 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
 
   React.useEffect(() => {
     if (data) {
-      setAvailableColumnNames(data ? data.structure.columns.map((x) => x.columnName) : []);
+      setAvailableColumnNames(data ? data.structure.columns.map(x => x.columnName) : []);
     }
   }, [data]);
 
@@ -119,21 +119,21 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
                 {availableColumnNames.length > 0 && (
                   <FormSelectField label="Label column" name="labelColumn">
                     <option value=""></option>
-                    {availableColumnNames.map((col) => (
+                    {availableColumnNames.map(col => (
                       <option value={col} key={col}>
                         {col}
                       </option>
                     ))}
                   </FormSelectField>
                 )}
-                {availableColumnNames.map((col) => (
+                {availableColumnNames.map(col => (
                   <React.Fragment key={col}>
                     <FormCheckboxField label={col} name={`dataColumn_${col}`} />
                     {config[`dataColumn_${col}`] && (
                       <FormSelectField label="Color" name={`dataColumnColor_${col}`}>
                         <option value="">Random</option>
 
-                        {_.keys(presetPrimaryColors).map((color) => (
+                        {_.keys(presetPrimaryColors).map(color => (
                           <option value={color} key={color}>
                             {_.startCase(color)}
                           </option>

packages/web/src/charts/DataChart.js

@@ -27,8 +27,8 @@ function getTimeAxis(labels) {
 
 function getLabels(labelValues, timeAxis, chartType) {
   if (!timeAxis) return labelValues;
-  if (chartType === 'line') return timeAxis.map((x) => x.toDate());
+  if (chartType === 'line') return timeAxis.map(x => x.toDate());
-  return timeAxis.map((x) => x.format('D. M. YYYY'));
+  return timeAxis.map(x => x.format('D. M. YYYY'));
 }
 
 function getOptions(timeAxis, chartType) {
@@ -70,7 +70,7 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
   });
   let backgroundColor = null;
   let borderColor = null;
-  const labelValues = freeData.rows.map((x) => x[labelColumn]);
+  const labelValues = freeData.rows.map(x => x[labelColumn]);
   const timeAxis = getTimeAxis(labelValues);
   const labels = getLabels(labelValues, timeAxis, chartType);
   const res = {
@@ -91,7 +91,7 @@ function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartTyp
 
       return {
         label: dataColumn,
-        data: freeData.rows.map((row) => row[dataColumn]),
+        data: freeData.rows.map(row => row[dataColumn]),
         backgroundColor,
         borderColor,
         borderWidth: 1,

packages/web/src/charts/chartDataLoader.ts

@@ -19,7 +19,7 @@ export async function loadChartStructure(driver: EngineDriver, conid, database,
   dumpSqlSelect(dmp, select);
   const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
   if (resp.data.errorMessage) throw new Error(resp.data.errorMessage);
-  return resp.data.columns.map((x) => x.columnName);
+  return resp.data.columns.map(x => x.columnName);
 }
 
 export async function loadChartData(driver: EngineDriver, conid, database, sql, config) {
@@ -38,7 +38,7 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
         alias: labelColumn,
       },
       // @ts-ignore
-      ...dataColumns.map((columnName) => ({
+      ...dataColumns.map(columnName => ({
         exprType: 'call',
         func: 'SUM',
         args: [
@@ -81,12 +81,12 @@ export async function loadChartData(driver: EngineDriver, conid, database, sql,
     rows = _.reverse([...rows]);
   }
   if (showRelativeValues) {
-    const maxValues = dataColumns.map((col) => _.max(rows.map((row) => row[col])));
+    const maxValues = dataColumns.map(col => _.max(rows.map(row => row[col])));
     for (const [col, max] of _.zip(dataColumns, maxValues)) {
       if (!max) continue;
       if (!_.isNumber(max)) continue;
       if (!(max > 0)) continue;
-      rows = rows.map((row) => ({
+      rows = rows.map(row => ({
         ...row,
         [col]: (row[col] / max) * 100,
       }));

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -26,7 +26,7 @@ export default class ChangeSetGrider extends Grider {
     super();
     this.changeSet = changeSetState && changeSetState.value;
     this.insertedRows = getChangeSetInsertedRows(this.changeSet, display.baseTable);
-    this.setChangeSet = (value) => dispatchChangeSet({ type: 'set', value });
+    this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
     this.rowCacheIndexes = new Set();
     this.rowDataCache = {};
     this.rowStatusCache = {};
@@ -98,12 +98,12 @@ export default class ChangeSetGrider extends Grider {
   setCellValue(index: number, uniqueName: string, value: any) {
     const row = this.getRowSource(index);
     const definition = this.display.getChangeSetField(row, uniqueName, this.getInsertedRowIndex(index));
-    this.applyModification((chs) => setChangeSetValue(chs, definition, value));
+    this.applyModification(chs => setChangeSetValue(chs, definition, value));
   }
 
   deleteRow(index: number) {
     this.requireRowCache(index);
-    this.applyModification((chs) => deleteChangeSetRows(chs, this.rowDefinitionsCache[index]));
+    this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinitionsCache[index]));
   }
 
   get rowCountInUpdate() {
@@ -117,7 +117,7 @@ export default class ChangeSetGrider extends Grider {
 
   insertRow(): number {
     const res = this.rowCountInUpdate;
-    this.applyModification((chs) => changeSetInsertNewRow(chs, this.display.baseTable));
+    this.applyModification(chs => changeSetInsertNewRow(chs, this.display.baseTable));
     return res;
   }
 
@@ -131,10 +131,10 @@ export default class ChangeSetGrider extends Grider {
 
   revertRowChanges(index: number) {
     this.requireRowCache(index);
-    this.applyModification((chs) => revertChangeSetRowChanges(chs, this.rowDefinitionsCache[index]));
+    this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinitionsCache[index]));
   }
   revertAllChanges() {
-    this.applyModification((chs) => createChangeSet());
+    this.applyModification(chs => createChangeSet());
   }
   undo() {
     this.dispatchChangeSet({ type: 'undo' });

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -29,7 +29,7 @@ const IconWrapper = styled.span`
 `;
 
 const ResizeHandle = styled.div`
-  background-color: ${(props) => props.theme.border};
+  background-color: ${props => props.theme.border};
   width: 2px;
   cursor: col-resize;
   z-index: 1;

packages/web/src/datagrid/ColumnLabel.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { FontIcon } from '../icons';
 
 const Label = styled.span`
-  font-weight: ${(props) => (props.notNull ? 'bold' : 'normal')};
+  font-weight: ${props => (props.notNull ? 'bold' : 'normal')};
   white-space: nowrap;
 `;
 

packages/web/src/datagrid/ColumnManager.js

@@ -16,7 +16,7 @@ const Row = styled.div`
   cursor: pointer;
   white-space: nowrap;
   &:hover {
-    background-color: ${(props) => props.theme.manager_background_blue[1]};
+    background-color: ${props => props.theme.manager_background_blue[1]};
   }
 `;
 
@@ -46,7 +46,7 @@ function ColumnManagerRow(props) {
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
       theme={theme}
-      onClick={(e) => {
+      onClick={e => {
         // @ts-ignore
         if (e.target.closest('.expandColumnIcon')) return;
         display.focusColumn(column.uniqueName);
@@ -84,8 +84,8 @@ export default function ColumnManager(props) {
       <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
         {display
           .getColumns(columnFilter)
-          .filter((column) => filterName(columnFilter, column.columnName))
+          .filter(column => filterName(columnFilter, column.columnName))
-          .map((column) => (
+          .map(column => (
             <ColumnManagerRow key={column.uniqueName} display={display} column={column} />
           ))}
       </ManagerInnerContainer>

packages/web/src/datagrid/DataGrid.js

@@ -10,7 +10,7 @@ import CellDataView from '../celldata/CellDataView';
 import useTheme from '../theme/useTheme';
 
 const LeftContainer = styled.div`
-  background-color: ${(props) => props.theme.manager_background};
+  background-color: ${props => props.theme.manager_background};
   display: flex;
   flex: 1;
 `;

packages/web/src/datagrid/DataGridRow.js

@@ -11,13 +11,13 @@ import { FontIcon } from '../icons';
 
 const TableBodyCell = styled.td`
   font-weight: normal;
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
   // border-collapse: collapse;
   padding: 2px;
   white-space: nowrap;
   position: relative;
   overflow: hidden;
-  ${(props) =>
+  ${props =>
     props.isSelected &&
     !props.isAutofillSelected &&
     !props.isFocusedColumn &&
@@ -26,20 +26,20 @@ const TableBodyCell = styled.td`
     background-color: ${props.theme.gridbody_selection[4]};
     color: ${props.theme.gridbody_invfont1};`}
 
-  ${(props) =>
+  ${props =>
     props.isFrameSelected &&
     `
       outline: 3px solid ${props.theme.gridbody_selection[4]};
       outline-offset: -3px;`}
   
-  ${(props) =>
+  ${props =>
     props.isAutofillSelected &&
     !props.isFocusedColumn &&
     `
       outline: 3px solid ${props.theme.gridbody_selection[4]};
       outline-offset: -3px;`}
 
-    ${(props) =>
+    ${props =>
     props.isModifiedRow &&
     !props.isInsertedRow &&
     !props.isSelected &&
@@ -48,7 +48,7 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     `
   background-color: ${props.theme.gridbody_background_gold[1]};`}
-  ${(props) =>
+  ${props =>
     !props.isSelected &&
     !props.isAutofillSelected &&
     !props.isInsertedRow &&
@@ -57,7 +57,7 @@ const TableBodyCell = styled.td`
     `
       background-color: ${props.theme.gridbody_background_orange[1]};`}
 
-  ${(props) =>
+  ${props =>
     !props.isSelected &&
     !props.isAutofillSelected &&
     !props.isFocusedColumn &&
@@ -65,7 +65,7 @@ const TableBodyCell = styled.td`
     `
       background-color: ${props.theme.gridbody_background_green[1]};`}
 
-  ${(props) =>
+  ${props =>
     !props.isSelected &&
     !props.isAutofillSelected &&
     !props.isFocusedColumn &&
@@ -74,13 +74,13 @@ const TableBodyCell = styled.td`
       background-color: ${props.theme.gridbody_background_volcano[1]};
   `}
 
-  ${(props) =>
+  ${props =>
     props.isFocusedColumn &&
     `
     background-color: ${props.theme.gridbody_background_yellow[0]};
   `}
   
-    ${(props) =>
+    ${props =>
     props.isDeletedRow &&
     `
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEElEQVQImWNgIAX8x4KJBAD+agT8INXz9wAAAABJRU5ErkJggg==');
@@ -90,30 +90,30 @@ const TableBodyCell = styled.td`
 `;
 
 const HintSpan = styled.span`
-  color: ${(props) => props.theme.gridbody_font3};
+  color: ${props => props.theme.gridbody_font3};
   margin-left: 5px;
 `;
 const NullSpan = styled.span`
-  color: ${(props) => props.theme.gridbody_font3};
+  color: ${props => props.theme.gridbody_font3};
   font-style: italic;
 `;
 
 const TableBodyRow = styled.tr`
   // height: 35px;
-  background-color: ${(props) => props.theme.gridbody_background};
+  background-color: ${props => props.theme.gridbody_background};
   &:nth-child(6n + 3) {
-    background-color: ${(props) => props.theme.gridbody_background_alt2};
+    background-color: ${props => props.theme.gridbody_background_alt2};
   }
   &:nth-child(6n + 6) {
-    background-color: ${(props) => props.theme.gridbody_background_alt3};
+    background-color: ${props => props.theme.gridbody_background_alt3};
   }
 `;
 
 const TableHeaderCell = styled.td`
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
   text-align: left;
   padding: 2px;
-  background-color: ${(props) => props.theme.gridheader_background};
+  background-color: ${props => props.theme.gridheader_background};
   overflow: hidden;
   position: relative;
 `;
@@ -121,7 +121,7 @@ const TableHeaderCell = styled.td`
 const AutoFillPoint = styled.div`
   width: 8px;
   height: 8px;
-  background-color: ${(props) => props.theme.gridbody_selection[6]};
+  background-color: ${props => props.theme.gridbody_selection[6]};
   position: absolute;
   right: 0px;
   bottom: 0px;
@@ -133,12 +133,12 @@ export const ShowFormButton = styled.div`
   position: absolute;
   right: 0px;
   top: 1px;
-  color: ${(props) => props.theme.gridbody_font3};
+  color: ${props => props.theme.gridbody_font3};
-  background-color: ${(props) => props.theme.gridheader_background};
+  background-color: ${props => props.theme.gridheader_background};
-  border: 1px solid ${(props) => props.theme.gridheader_background};
+  border: 1px solid ${props => props.theme.gridheader_background};
   &:hover {
-    color: ${(props) => props.theme.gridheader_font_hover};
+    color: ${props => props.theme.gridheader_font_hover};
-    border: 1px solid ${(props) => props.theme.border};
+    border: 1px solid ${props => props.theme.border};
     top: 1px;
     right: 0px;
   }
@@ -199,7 +199,7 @@ function RowHeaderCell({ rowIndex, theme, onSetFormView, rowData }) {
       {!!onSetFormView && mouseIn && (
         <ShowFormButton
           theme={theme}
-          onClick={(e) => {
+          onClick={e => {
             e.stopPropagation();
             onSetFormView(rowData);
           }}
@@ -251,12 +251,12 @@ function DataGridRow(props) {
   const rowStatus = grider.getRowStatus(rowIndex);
 
   const hintFieldsAllowed = visibleRealColumns
-    .filter((col) => {
+    .filter(col => {
       if (!col.hintColumnName) return false;
       if (rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)) return false;
       return true;
     })
-    .map((col) => col.uniqueName);
+    .map(col => col.uniqueName);
 
   if (!rowData) return null;
 
@@ -264,7 +264,7 @@ function DataGridRow(props) {
     <TableBodyRow style={{ height: `${rowHeight}px` }} theme={theme}>
       <RowHeaderCell rowIndex={rowIndex} theme={theme} onSetFormView={onSetFormView} rowData={rowData} />
 
-      {visibleRealColumns.map((col) => (
+      {visibleRealColumns.map(col => (
         <TableBodyCell
           key={col.uniqueName}
           theme={theme}
@@ -299,7 +299,7 @@ function DataGridRow(props) {
               // grider={grider}
               // rowIndex={rowIndex}
               // uniqueName={col.uniqueName}
-              onSetValue={(value) => grider.setCellValue(rowIndex, col.uniqueName, value)}
+              onSetValue={value => grider.setCellValue(rowIndex, col.uniqueName, value)}
             />
           ) : (
             <>
@@ -311,7 +311,7 @@ function DataGridRow(props) {
                 <ShowFormButton
                   theme={theme}
                   className="buttonLike"
-                  onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                     onSetFormView(rowData, col);
                   }}

packages/web/src/datagrid/JslDataGridCore.js

@@ -40,7 +40,7 @@ async function loadRowCount(props) {
 export default function JslDataGridCore(props) {
   const { jslid } = props;
   const [changeIndex, setChangeIndex] = React.useState(0);
-  const [rowCountLoaded, setRowCountLoaded]= React.useState(null);
+  const [rowCountLoaded, setRowCountLoaded] = React.useState(null);
 
   const showModal = useShowModal();
 
@@ -59,11 +59,11 @@ export default function JslDataGridCore(props) {
       initialValues.sourceJslId = jslid;
       initialValues.sourceList = ['query-data'];
     }
-    showModal((modalState) => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
+    showModal(modalState => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
   }
 
   const handleJslDataStats = React.useCallback(
-    (stats) => {
+    stats => {
       if (stats.changeIndex < changeIndex) return;
       setChangeIndex(stats.changeIndex);
       setRowCountLoaded(stats.rowCount);

packages/web/src/datagrid/LoadingDataGridCore.js

@@ -32,7 +32,7 @@ export default function LoadingDataGridCore(props) {
 
   const handleLoadRowCount = async () => {
     const rowCount = await loadRowCount(props);
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       allRowCount: rowCount,
     }));
@@ -62,7 +62,7 @@ export default function LoadingDataGridCore(props) {
 
   const loadNextData = async () => {
     if (isLoading) return;
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       isLoading: true,
     }));
@@ -80,7 +80,7 @@ export default function LoadingDataGridCore(props) {
     // }
     // console.log('nextRows', nextRows);
     if (nextRows.errorMessage) {
-      setLoadProps((oldLoadProps) => ({
+      setLoadProps(oldLoadProps => ({
         ...oldLoadProps,
         isLoading: false,
         errorMessage: nextRows.errorMessage,
@@ -91,7 +91,7 @@ export default function LoadingDataGridCore(props) {
         loadedRows: [...loadedRows, ...nextRows],
         loadedTime,
       };
-      setLoadProps((oldLoadProps) => ({
+      setLoadProps(oldLoadProps => ({
         ...oldLoadProps,
         isLoading: false,
         isLoadedAll: oldLoadProps.loadNextDataToken == loadNextDataToken && nextRows.length === 0,
@@ -102,7 +102,7 @@ export default function LoadingDataGridCore(props) {
   };
 
   React.useEffect(() => {
-    setLoadProps((oldProps) => ({
+    setLoadProps(oldProps => ({
       ...oldProps,
       isLoadedAll: false,
     }));

packages/web/src/datagrid/ManagerStyles.js

@@ -5,4 +5,3 @@ export const ManagerInnerContainer = styled.div`
   overflow-y: auto;
   overflow-x: auto;
 `;
-

packages/web/src/datagrid/ReferenceHeader.js

@@ -9,12 +9,12 @@ const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: ${(props) => props.theme.gridheader_background_cyan[0]};
+  background: ${props => props.theme.gridheader_background_cyan[0]};
   height: ${dimensions.toolBar.height}px;
   min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
 `;
 
 const Header = styled.div`
@@ -34,8 +34,8 @@ export default function ReferenceHeader({ reference, onClose }) {
       <Header>
         <FontIcon icon="img reference" />
         <HeaderText>
-          {reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [
+          {reference.pureName} [{reference.columns.map(x => x.refName).join(', ')}] = master [
-          {reference.columns.map((x) => x.baseName).join(', ')}]
+          {reference.columns.map(x => x.baseName).join(', ')}]
         </HeaderText>
       </Header>
       <ToolbarButton icon="icon close" onClick={onClose} patchY={6}>

packages/web/src/datagrid/ReferenceManager.js

@@ -17,7 +17,7 @@ const Header = styled.div`
 `;
 
 const LinkContainer = styled.div`
-  color: ${props=>props.theme.manager_font_blue[7]};
+  color: ${props => props.theme.manager_font_blue[7]};
   margin: 5px;
   &:hover {
     text-decoration: underline;
@@ -38,7 +38,7 @@ function ManagerRow({ tableName, columns, icon, onClick }) {
     <LinkContainer onClick={onClick} theme={theme}>
       <FontIcon icon={icon} />
       <NameContainer>
-        {tableName} ({columns.map((x) => x.columnName).join(', ')})
+        {tableName} ({columns.map(x => x.columnName).join(', ')})
       </NameContainer>
     </LinkContainer>
   );
@@ -62,8 +62,8 @@ export default function ReferenceManager(props) {
           <>
             <Header>References tables ({foreignKeys.length})</Header>
             {foreignKeys
-              .filter((fk) => filterName(filter, fk.refTableName))
+              .filter(fk => filterName(filter, fk.refTableName))
-              .map((fk) => (
+              .map(fk => (
                 <ManagerRow
                   key={fk.constraintName}
                   icon="img link"
@@ -73,7 +73,7 @@ export default function ReferenceManager(props) {
                     props.onReferenceClick({
                       schemaName: fk.refSchemaName,
                       pureName: fk.refTableName,
-                      columns: fk.columns.map((col) => ({
+                      columns: fk.columns.map(col => ({
                         baseName: col.columnName,
                         refName: col.refColumnName,
                       })),
@@ -87,8 +87,8 @@ export default function ReferenceManager(props) {
           <>
             <Header>Dependend tables ({dependencies.length})</Header>
             {dependencies
-              .filter((fk) => filterName(filter, fk.pureName))
+              .filter(fk => filterName(filter, fk.pureName))
-              .map((fk) => (
+              .map(fk => (
                 <ManagerRow
                   key={fk.constraintName}
                   icon="img reference"
@@ -98,7 +98,7 @@ export default function ReferenceManager(props) {
                     props.onReferenceClick({
                       schemaName: fk.schemaName,
                       pureName: fk.pureName,
-                      columns: fk.columns.map((col) => ({
+                      columns: fk.columns.map(col => ({
                         baseName: col.refColumnName,
                         refName: col.columnName,
                       })),

packages/web/src/datagrid/SeriesSizes-old.js

@@ -120,7 +120,7 @@ export class SeriesSizes {
     );
   }
   getFrozenIndexOnPosition(position) {
-    this.frozenItems.forEach(function(item) {
+    this.frozenItems.forEach(function (item) {
       if (position >= item.position && position <= item.endPosition) return item.frozenIndex;
     });
     return -1;

packages/web/src/datagrid/SeriesSizes.ts

@@ -31,7 +31,7 @@ export class SeriesSizes {
     return this.frozenModelIndexes != null ? this.frozenModelIndexes.length : 0;
   }
   public get frozenSize(): number {
-    return _.sumBy(this.frozenItems, (x) => x.size);
+    return _.sumBy(this.frozenItems, x => x.size);
   }
   public get realCount(): number {
     return this.frozenCount + this.scrollCount;
@@ -63,14 +63,14 @@ export class SeriesSizes {
   public buildIndex(): void {
     this.scrollItems = [];
     this.scrollIndexes = _.filter(
-      _.map(_.range(this.count), (x) => this.modelToReal(x) - this.frozenCount),
+      _.map(_.range(this.count), x => this.modelToReal(x) - this.frozenCount),
       // _.map(this.intKeys(_.keys(this.sizeOverridesByModelIndex)), (x) => this.modelToReal(x) - this.frozenCount),
-      (x) => x >= 0
+      x => x >= 0
     );
     this.scrollIndexes.sort();
     let lastScrollIndex: number = -1;
     let lastEndPosition: number = 0;
-    this.scrollIndexes.forEach((scrollIndex) => {
+    this.scrollIndexes.forEach(scrollIndex => {
       let modelIndex: number = this.realToModel(scrollIndex + this.frozenCount);
       let size: number = this.sizeOverridesByModelIndex[modelIndex];
       let item = new SeriesSizeItem();
@@ -82,7 +82,7 @@ export class SeriesSizes {
       lastScrollIndex = scrollIndex;
       lastEndPosition = item.endPosition;
     });
-    this.positions = _.map(this.scrollItems, (x) => x.position);
+    this.positions = _.map(this.scrollItems, x => x.position);
     this.frozenItems = [];
     let lastpos: number = 0;
     for (let i: number = 0; i < this.frozenCount; i++) {
@@ -157,11 +157,11 @@ export class SeriesSizes {
   public getScroll(sourceScrollIndex: number, targetScrollIndex: number): number {
     if (sourceScrollIndex < targetScrollIndex) {
       return -_.sum(
-        _.map(_.range(sourceScrollIndex, targetScrollIndex - sourceScrollIndex), (x) => this.getSizeByScrollIndex(x))
+        _.map(_.range(sourceScrollIndex, targetScrollIndex - sourceScrollIndex), x => this.getSizeByScrollIndex(x))
       );
     } else {
       return _.sum(
-        _.map(_.range(targetScrollIndex, sourceScrollIndex - targetScrollIndex), (x) => this.getSizeByScrollIndex(x))
+        _.map(_.range(targetScrollIndex, sourceScrollIndex - targetScrollIndex), x => this.getSizeByScrollIndex(x))
       );
     }
   }
@@ -171,15 +171,15 @@ export class SeriesSizes {
   }
   public getTotalScrollSizeSum(): number {
     let scrollSizeOverrides = _.map(
-      _.filter(this.intKeys(this.sizeOverridesByModelIndex), (x) => this.modelIndexIsInScrollArea(x)),
+      _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => this.modelIndexIsInScrollArea(x)),
-      (x) => this.sizeOverridesByModelIndex[x]
+      x => this.sizeOverridesByModelIndex[x]
     );
     return _.sum(scrollSizeOverrides) + (this.count - scrollSizeOverrides.length) * this.defaultSize;
   }
   public getVisibleScrollSizeSum(): number {
     let scrollSizeOverrides = _.map(
-      _.filter(this.intKeys(this.sizeOverridesByModelIndex), (x) => !_.includes(this.hiddenAndFrozenModelIndexes, x)),
+      _.filter(this.intKeys(this.sizeOverridesByModelIndex), x => !_.includes(this.hiddenAndFrozenModelIndexes, x)),
-      (x) => this.sizeOverridesByModelIndex[x]
+      x => this.sizeOverridesByModelIndex[x]
     );
     return (
       _.sum(scrollSizeOverrides) +
@@ -187,7 +187,7 @@ export class SeriesSizes {
     );
   }
   private intKeys(value): number[] {
-    return _.keys(value).map((x) => _.parseInt(x));
+    return _.keys(value).map(x => _.parseInt(x));
   }
   public getPositionByRealIndex(realIndex: number): number {
     if (realIndex < 0) return 0;
@@ -289,13 +289,13 @@ export class SeriesSizes {
   }
   public setExtraordinaryIndexes(hidden: number[], frozen: number[]): void {
     //this._hiddenAndFrozenModelIndexes = _.clone(hidden);
-    hidden = hidden.filter((x) => x >= 0);
+    hidden = hidden.filter(x => x >= 0);
-    frozen = frozen.filter((x) => x >= 0);
+    frozen = frozen.filter(x => x >= 0);
 
     hidden.sort((a, b) => a - b);
     frozen.sort((a, b) => a - b);
-    this.frozenModelIndexes = _.filter(frozen, (x) => !_.includes(hidden, x));
+    this.frozenModelIndexes = _.filter(frozen, x => !_.includes(hidden, x));
-    this.hiddenModelIndexes = _.filter(hidden, (x) => !_.includes(frozen, x));
+    this.hiddenModelIndexes = _.filter(hidden, x => !_.includes(frozen, x));
     this.hiddenAndFrozenModelIndexes = _.concat(hidden, this.frozenModelIndexes);
     this.frozenModelIndexes.sort((a, b) => a - b);
     if (this.hiddenAndFrozenModelIndexes.length == 0) this.hiddenAndFrozenModelIndexes = null;

packages/web/src/datagrid/TableDataGrid.js

@@ -56,12 +56,12 @@ export default function TableDataGrid({
   const { childConfig } = config;
   const setChildConfig = (value, reference = undefined) => {
     if (_.isFunction(value)) {
-      setConfig((x) => ({
+      setConfig(x => ({
         ...x,
         childConfig: value(x.childConfig),
       }));
     } else {
-      setConfig((x) => ({
+      setConfig(x => ({
         ...x,
         childConfig: value,
         reference: reference === undefined ? x.reference : reference,
@@ -106,7 +106,7 @@ export default function TableDataGrid({
   const [formDisplay, setFormDisplay] = React.useState(createFormDisplay());
 
   React.useEffect(() => {
-    setRefReloadToken((v) => v + 1);
+    setRefReloadToken(v => v + 1);
     if (!reference && display && display.isGrouped) display.clearGrouping();
   }, [reference]);
 
@@ -151,18 +151,18 @@ export default function TableDataGrid({
       const filters = {
         ...filtersBase,
         ..._.fromPairs(
-          reference.columns.map((col) => [
+          reference.columns.map(col => [
             col.refName,
-            selectedRows.map((x) => getFilterValueExpression(x[col.baseName], col.dataType)).join(', '),
+            selectedRows.map(x => getFilterValueExpression(x[col.baseName], col.dataType)).join(', '),
           ])
         ),
       };
       if (stableStringify(filters) != stableStringify(childConfig.filters)) {
-        setChildConfig((cfg) => ({
+        setChildConfig(cfg => ({
           ...cfg,
           filters,
         }));
-        setChildCache((ca) => ({
+        setChildCache(ca => ({
           ...ca,
           refreshTime: new Date().getTime(),
         }));
@@ -192,7 +192,7 @@ export default function TableDataGrid({
         dispatchChangeSet={dispatchChangeSet}
         toolbarPortalRef={toolbarPortalRef}
         showReferences
-        onReferenceClick={(reference) => setChildConfig(createGridConfig(), reference)}
+        onReferenceClick={reference => setChildConfig(createGridConfig(), reference)}
         onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}
         refReloadToken={refReloadToken.toString()}
         masterLoadedTime={masterLoadedTime}

packages/web/src/datagrid/gridutil.ts

@@ -128,7 +128,7 @@ export function filterCellForRow(cell, row: number): CellAddress | null {
 }
 
 export function filterCellsForRow(cells, row: number): CellAddress[] | null {
-  const res = (cells || []).filter((x) => x[0] == row || _.isString(x[0]));
+  const res = (cells || []).filter(x => x[0] == row || _.isString(x[0]));
   return res.length > 0 ? res : null;
 }
 

packages/web/src/datagrid/selection.ts

@@ -67,4 +67,3 @@ export function cellFromEvent(event): CellAddress {
   const row = cell.getAttribute('data-row');
   return convertCellAddress(row, col);
 }
-

packages/web/src/designer/Designer.js

@@ -11,7 +11,7 @@ import { getTableInfo } from '../utility/metadataLoaders';
 
 const Wrapper = styled.div`
   flex: 1;
-  background-color: ${(props) => props.theme.designer_background};
+  background-color: ${props => props.theme.designer_background};
   overflow: scroll;
 `;
 
@@ -27,12 +27,12 @@ const EmptyInfo = styled.div`
 `;
 
 function fixPositions(tables) {
-  const minLeft = _.min(tables.map((x) => x.left));
+  const minLeft = _.min(tables.map(x => x.left));
-  const minTop = _.min(tables.map((x) => x.top));
+  const minTop = _.min(tables.map(x => x.top));
   if (minLeft < 0 || minTop < 0) {
     const dLeft = minLeft < 0 ? -minLeft : 0;
     const dTop = minTop < 0 ? -minTop : 0;
-    return tables.map((tbl) => ({
+    return tables.map(tbl => ({
       ...tbl,
       left: tbl.left + dLeft,
       top: tbl.top + dTop,
@@ -51,7 +51,7 @@ export default function Designer({ value, onChange, conid, database }) {
   const wrapperRef = React.useRef();
   const [changeToken, setChangeToken] = React.useState(0);
 
-  const handleDrop = (e) => {
+  const handleDrop = e => {
     var data = e.dataTransfer.getData('app_object_drag_data');
     e.preventDefault();
     if (!data) return;
@@ -63,11 +63,11 @@ export default function Designer({ value, onChange, conid, database }) {
     json.left = e.clientX - rect.left;
     json.top = e.clientY - rect.top;
 
-    onChange((current) => {
+    onChange(current => {
       const foreignKeys = _.compact([
-        ...(json.foreignKeys || []).map((fk) => {
+        ...(json.foreignKeys || []).map(fk => {
           const tables = ((current || {}).tables || []).filter(
-            (tbl) => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
+            tbl => fk.refTableName == tbl.pureName && fk.refSchemaName == tbl.schemaName
           );
           if (tables.length == 1)
             return {
@@ -78,8 +78,8 @@ export default function Designer({ value, onChange, conid, database }) {
           return null;
         }),
         ..._.flatten(
-          ((current || {}).tables || []).map((tbl) =>
+          ((current || {}).tables || []).map(tbl =>
-            (tbl.foreignKeys || []).map((fk) => {
+            (tbl.foreignKeys || []).map(fk => {
               if (fk.refTableName == json.pureName && fk.refSchemaName == json.schemaName) {
                 return {
                   ...fk,
@@ -105,7 +105,7 @@ export default function Designer({ value, onChange, conid, database }) {
                   sourceId: foreignKeys[0].sourceId,
                   targetId: foreignKeys[0].targetId,
                   joinType: 'INNER JOIN',
-                  columns: foreignKeys[0].columns.map((col) => ({
+                  columns: foreignKeys[0].columns.map(col => ({
                     source: col.columnName,
                     target: col.refColumnName,
                   })),
@@ -117,21 +117,21 @@ export default function Designer({ value, onChange, conid, database }) {
   };
 
   const changeTable = React.useCallback(
-    (table) => {
+    table => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        tables: fixPositions((current.tables || []).map((x) => (x.designerId == table.designerId ? table : x))),
+        tables: fixPositions((current.tables || []).map(x => (x.designerId == table.designerId ? table : x))),
       }));
     },
     [onChange]
   );
 
   const bringToFront = React.useCallback(
-    (table) => {
+    table => {
       onChange(
-        (current) => ({
+        current => ({
           ...current,
-          tables: [...(current.tables || []).filter((x) => x.designerId != table.designerId), table],
+          tables: [...(current.tables || []).filter(x => x.designerId != table.designerId), table],
         }),
         true
       );
@@ -140,43 +140,43 @@ export default function Designer({ value, onChange, conid, database }) {
   );
 
   const removeTable = React.useCallback(
-    (table) => {
+    table => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        tables: (current.tables || []).filter((x) => x.designerId != table.designerId),
+        tables: (current.tables || []).filter(x => x.designerId != table.designerId),
         references: (current.references || []).filter(
-          (x) => x.sourceId != table.designerId && x.targetId != table.designerId
+          x => x.sourceId != table.designerId && x.targetId != table.designerId
         ),
-        columns: (current.columns || []).filter((x) => x.designerId != table.designerId),
+        columns: (current.columns || []).filter(x => x.designerId != table.designerId),
       }));
     },
     [onChange]
   );
 
   const changeReference = React.useCallback(
-    (ref) => {
+    ref => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        references: (current.references || []).map((x) => (x.designerId == ref.designerId ? ref : x)),
+        references: (current.references || []).map(x => (x.designerId == ref.designerId ? ref : x)),
       }));
     },
     [onChange]
   );
 
   const removeReference = React.useCallback(
-    (ref) => {
+    ref => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        references: (current.references || []).filter((x) => x.designerId != ref.designerId),
+        references: (current.references || []).filter(x => x.designerId != ref.designerId),
       }));
     },
     [onChange]
   );
 
   const handleCreateReference = (source, target) => {
-    onChange((current) => {
+    onChange(current => {
       const existingReference = (current.references || []).find(
-        (x) =>
+        x =>
           (x.sourceId == source.designerId && x.targetId == target.designerId) ||
           (x.sourceId == target.designerId && x.targetId == source.designerId)
       );
@@ -184,7 +184,7 @@ export default function Designer({ value, onChange, conid, database }) {
       return {
         ...current,
         references: existingReference
-          ? current.references.map((ref) =>
+          ? current.references.map(ref =>
               ref == existingReference
                 ? {
                     ...existingReference,
@@ -230,8 +230,8 @@ export default function Designer({ value, onChange, conid, database }) {
       schemaName: foreignKey.refSchemaName,
     });
     const newTableDesignerId = uuidv1();
-    onChange((current) => {
+    onChange(current => {
-      const fromTable = (current.tables || []).find((x) => x.designerId == designerId);
+      const fromTable = (current.tables || []).find(x => x.designerId == designerId);
       if (!fromTable) return;
       return {
         ...current,
@@ -251,7 +251,7 @@ export default function Designer({ value, onChange, conid, database }) {
             sourceId: fromTable.designerId,
             targetId: newTableDesignerId,
             joinType: 'INNER JOIN',
-            columns: foreignKey.columns.map((col) => ({
+            columns: foreignKey.columns.map(col => ({
               source: col.columnName,
               target: col.refColumnName,
             })),
@@ -262,12 +262,12 @@ export default function Designer({ value, onChange, conid, database }) {
   };
 
   const handleSelectColumn = React.useCallback(
-    (column) => {
+    column => {
       onChange(
-        (current) => ({
+        current => ({
           ...current,
           columns: (current.columns || []).find(
-            (x) => x.designerId == column.designerId && x.columnName == column.columnName
+            x => x.designerId == column.designerId && x.columnName == column.columnName
           )
             ? current.columns
             : [...cleanupDesignColumns(current.columns), _.pick(column, ['designerId', 'columnName'])],
@@ -280,15 +280,15 @@ export default function Designer({ value, onChange, conid, database }) {
 
   const handleChangeColumn = React.useCallback(
     (column, changeFunc) => {
-      onChange((current) => {
+      onChange(current => {
         const currentColumns = (current || {}).columns || [];
         const existing = currentColumns.find(
-          (x) => x.designerId == column.designerId && x.columnName == column.columnName
+          x => x.designerId == column.designerId && x.columnName == column.columnName
         );
         if (existing) {
           return {
             ...current,
-            columns: currentColumns.map((x) => (x == existing ? changeFunc(existing) : x)),
+            columns: currentColumns.map(x => (x == existing ? changeFunc(existing) : x)),
           };
         } else {
           return {
@@ -311,8 +311,8 @@ export default function Designer({ value, onChange, conid, database }) {
   return (
     <Wrapper theme={theme}>
       {(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel here</EmptyInfo>}
-      <Canvas onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
+      <Canvas onDragOver={e => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
-        {(references || []).map((ref) => (
+        {(references || []).map(ref => (
           <DesignerReference
             key={ref.designerId}
             changeToken={changeToken}
@@ -323,7 +323,7 @@ export default function Designer({ value, onChange, conid, database }) {
             designer={value}
           />
         ))}
-        {(tables || []).map((table) => (
+        {(tables || []).map(table => (
           <DesignerTable
             key={table.designerId}
             sourceDragColumn={sourceDragColumn}
@@ -340,7 +340,7 @@ export default function Designer({ value, onChange, conid, database }) {
             onRemoveTable={removeTable}
             setChangeToken={setChangeToken}
             wrapperRef={wrapperRef}
-            onChangeDomTable={(table) => {
+            onChangeDomTable={table => {
               domTablesRef.current[table.designerId] = table;
             }}
             designer={value}

packages/web/src/designer/DesignerComponentCreator.ts

@@ -28,7 +28,7 @@ export class DesignerComponent {
     return this.parentComponent ? this.parentComponent.myAndParentTables : [];
   }
   get thisAndSubComponentsTables() {
-    return [...this.tables, ..._.flatten(this.subComponents.map((x) => x.thisAndSubComponentsTables))];
+    return [...this.tables, ..._.flatten(this.subComponents.map(x => x.thisAndSubComponentsTables))];
   }
 }
 
@@ -49,7 +49,7 @@ export class DesignerComponentCreator {
       root = findPrimaryTable(this.toAdd);
     }
     if (!root) return null;
-    _.remove(this.toAdd, (x) => x == root);
+    _.remove(this.toAdd, x => x == root);
     const res = new DesignerComponent();
     res.tables.push(root);
 
@@ -60,7 +60,7 @@ export class DesignerComponentCreator {
         if (ref) {
           res.tables.push(test);
           res.nonPrimaryReferences.push(ref);
-          _.remove(this.toAdd, (x) => x == test);
+          _.remove(this.toAdd, x => x == test);
           found = true;
           break;
         }

packages/web/src/designer/DesignerQueryDumper.ts

@@ -26,7 +26,7 @@ export class DesignerQueryDumper {
   constructor(public designer: DesignerInfo, public components: DesignerComponent[]) {}
 
   get topLevelTables(): DesignerTableInfo[] {
-    return _.flatten(this.components.map((x) => x.tables));
+    return _.flatten(this.components.map(x => x.tables));
   }
 
   dumpComponent(component: DesignerComponent) {
@@ -81,15 +81,15 @@ export class DesignerQueryDumper {
   addConditions(select: Select, tables: DesignerTableInfo[]) {
     for (const column of this.designer.columns || []) {
       if (!column.filter) continue;
-      const table = (this.designer.tables || []).find((x) => x.designerId == column.designerId);
+      const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
       if (!table) continue;
-      if (!tables.find((x) => x.designerId == table.designerId)) continue;
+      if (!tables.find(x => x.designerId == table.designerId)) continue;
 
       const condition = parseFilter(column.filter, findDesignerFilterType(column, this.designer));
       if (condition) {
         select.where = mergeConditions(
           select.where,
-          _.cloneDeepWith(condition, (expr) => {
+          _.cloneDeepWith(condition, expr => {
             if (expr.exprType == 'placeholder')
               return {
                 exprType: 'column',
@@ -105,15 +105,15 @@ export class DesignerQueryDumper {
   addGroupConditions(select: Select, tables: DesignerTableInfo[], selectIsGrouped: boolean) {
     for (const column of this.designer.columns || []) {
       if (!column.groupFilter) continue;
-      const table = (this.designer.tables || []).find((x) => x.designerId == column.designerId);
+      const table = (this.designer.tables || []).find(x => x.designerId == column.designerId);
       if (!table) continue;
-      if (!tables.find((x) => x.designerId == table.designerId)) continue;
+      if (!tables.find(x => x.designerId == table.designerId)) continue;
 
       const condition = parseFilter(column.groupFilter, findDesignerFilterType(column, this.designer));
       if (condition) {
         select.having = mergeConditions(
           select.having,
-          _.cloneDeepWith(condition, (expr) => {
+          _.cloneDeepWith(condition, expr => {
             if (expr.exprType == 'placeholder') {
               return this.getColumnOutputExpression(column, selectIsGrouped);
             }
@@ -174,20 +174,20 @@ export class DesignerQueryDumper {
       }
     }
 
-    const topLevelColumns = (this.designer.columns || []).filter((col) =>
+    const topLevelColumns = (this.designer.columns || []).filter(col =>
-      topLevelTables.find((tbl) => tbl.designerId == col.designerId)
+      topLevelTables.find(tbl => tbl.designerId == col.designerId)
     );
-    const selectIsGrouped = !!topLevelColumns.find((x) => x.isGrouped || (x.aggregate && x.aggregate != '---'));
+    const selectIsGrouped = !!topLevelColumns.find(x => x.isGrouped || (x.aggregate && x.aggregate != '---'));
-    const outputColumns = topLevelColumns.filter((x) => x.isOutput);
+    const outputColumns = topLevelColumns.filter(x => x.isOutput);
     if (outputColumns.length == 0) {
       res.selectAll = true;
     } else {
-      res.columns = outputColumns.map((col) => this.getColumnOutputExpression(col, selectIsGrouped));
+      res.columns = outputColumns.map(col => this.getColumnOutputExpression(col, selectIsGrouped));
     }
 
-    const groupedColumns = topLevelColumns.filter((x) => x.isGrouped);
+    const groupedColumns = topLevelColumns.filter(x => x.isGrouped);
     if (groupedColumns.length > 0) {
-      res.groupBy = groupedColumns.map((col) => ({
+      res.groupBy = groupedColumns.map(col => ({
         exprType: 'column',
         columnName: col.columnName,
         source: findQuerySource(this.designer, col.designerId),
@@ -195,11 +195,11 @@ export class DesignerQueryDumper {
     }
 
     const orderColumns = _.sortBy(
-      topLevelColumns.filter((x) => x.sortOrder),
+      topLevelColumns.filter(x => x.sortOrder),
-      (x) => Math.abs(x.sortOrder)
+      x => Math.abs(x.sortOrder)
     );
     if (orderColumns.length > 0) {
-      res.orderBy = orderColumns.map((col) => ({
+      res.orderBy = orderColumns.map(col => ({
         exprType: 'column',
         direction: col.sortOrder < 0 ? 'DESC' : 'ASC',
         columnName: col.columnName,

packages/web/src/designer/DesignerReference.js

@@ -19,8 +19,8 @@ const StyledSvg = styled.svg`
 
 const ReferenceWrapper = styled.div`
   position: absolute;
-  border: 1px solid ${(props) => props.theme.designer_line};
+  border: 1px solid ${props => props.theme.designer_line};
-  background-color: ${(props) => props.theme.designer_background};
+  background-color: ${props => props.theme.designer_background};
   z-index: 900;
   border-radius: 10px;
   width: 32px;
@@ -35,7 +35,7 @@ const ReferenceText = styled.span`
   transform: translate(-50%, -50%);
   z-index: 900;
   white-space: nowrap;
-  background-color: ${(props) => props.theme.designer_background};
+  background-color: ${props => props.theme.designer_background};
 `;
 
 function ReferenceContextMenu({ remove, setJoinType, isConnected }) {
@@ -88,10 +88,10 @@ export default function DesignerReference({
   possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.left - buswi, dirdst: -1 });
   possibilities.push({ xsrc: sourceRect.right + buswi, dirsrc: 1, xdst: targetRect.right + buswi, dirdst: 1 });
 
-  let minpos = _.minBy(possibilities, (p) => Math.abs(p.xsrc - p.xdst));
+  let minpos = _.minBy(possibilities, p => Math.abs(p.xsrc - p.xdst));
 
-  let srcY = _.mean(columns.map((x) => sourceTable.getColumnY(x.source)));
+  let srcY = _.mean(columns.map(x => sourceTable.getColumnY(x.source)));
-  let dstY = _.mean(columns.map((x) => targetTable.getColumnY(x.target)));
+  let dstY = _.mean(columns.map(x => targetTable.getColumnY(x.target)));
 
   if (columns.length == 0) {
     srcY = sourceTable.getColumnY('');
@@ -103,7 +103,7 @@ export default function DesignerReference({
 
   const lineStyle = { fill: 'none', stroke: theme.designer_line, strokeWidth: 2 };
 
-  const handleContextMenu = (event) => {
+  const handleContextMenu = event => {
     event.preventDefault();
     showMenu(
       event.pageX,
@@ -111,7 +111,7 @@ export default function DesignerReference({
       <ReferenceContextMenu
         remove={() => onRemoveReference({ designerId })}
         isConnected={isConnectedByReference(designer, { designerId: sourceId }, { designerId: targetId }, reference)}
-        setJoinType={(joinType) => {
+        setJoinType={joinType => {
           onChangeReference({
             ...reference,
             joinType,

packages/web/src/designer/DesignerTable.js

@@ -15,20 +15,20 @@ import InputTextModal from '../modals/InputTextModal';
 const Wrapper = styled.div`
   position: absolute;
   // background-color: white;
-  background-color: ${(props) => props.theme.designtable_background};
+  background-color: ${props => props.theme.designtable_background};
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
 `;
 
 const Header = styled.div`
   font-weight: bold;
   text-align: center;
   padding: 2px;
-  background: ${(props) =>
+  background: ${props =>
     // @ts-ignore
     props.objectTypeField == 'views'
       ? props.theme.designtable_background_magenta[2]
       : props.theme.designtable_background_blue[2]};
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -44,7 +44,7 @@ const ColumnsWrapper = styled.div`
 const HeaderLabel = styled.div``;
 
 const CloseWrapper = styled.div`
-  ${(props) =>
+  ${props =>
     `
   background-color: ${props.theme.toolbar_background} ;
 
@@ -63,7 +63,7 @@ const CloseWrapper = styled.div`
 //   }
 
 const ColumnLine = styled.div`
-  ${(props) =>
+  ${props =>
     // @ts-ignore
     !props.isDragSource &&
     // @ts-ignore
@@ -74,14 +74,14 @@ const ColumnLine = styled.div`
     }
     `}
 
-  ${(props) =>
+  ${props =>
     // @ts-ignore
     props.isDragSource &&
     `
     background-color: ${props.theme.designtable_background_cyan[2]};
     `}
 
-  ${(props) =>
+  ${props =>
     // @ts-ignore
     props.isDragTarget &&
     `
@@ -113,7 +113,7 @@ function ColumnContextMenu({ setSortOrder, addReference }) {
 
 function ColumnDesignerIcons({ column, designerId, designer }) {
   const designerColumn = (designer.columns || []).find(
-    (x) => x.designerId == designerId && x.columnName == column.columnName
+    x => x.designerId == designerId && x.columnName == column.columnName
   );
   if (!designerColumn) return null;
   return (
@@ -155,7 +155,7 @@ export default function DesignerTable({
   const moveStartXRef = React.useRef(null);
   const moveStartYRef = React.useRef(null);
 
-  const handleMove = React.useCallback((e) => {
+  const handleMove = React.useCallback(e => {
     let diffX = e.clientX - moveStartXRef.current;
     let diffY = e.clientY - moveStartYRef.current;
     moveStartXRef.current = e.clientX;
@@ -180,11 +180,11 @@ export default function DesignerTable({
 
   const changeTokenDebounced = React.useRef(
     // @ts-ignore
-    _.debounce(() => setChangeToken((x) => x + 1), 100)
+    _.debounce(() => setChangeToken(x => x + 1), 100)
   );
 
   const handleMoveEnd = React.useCallback(
-    (e) => {
+    e => {
       if (movingPositionRef.current) {
         onChangeTable({
           ...table,
@@ -217,7 +217,7 @@ export default function DesignerTable({
   }, [movingPosition == null, handleMove, handleMoveEnd]);
 
   const headerMouseDown = React.useCallback(
-    (e) => {
+    e => {
       e.preventDefault();
       moveStartXRef.current = e.clientX;
       moveStartYRef.current = e.clientY;
@@ -235,13 +235,13 @@ export default function DesignerTable({
   };
 
   const handleSetTableAlias = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <InputTextModal
         modalState={modalState}
         value={alias || ''}
         label="New alias"
         header="Set table alias"
-        onConfirm={(newAlias) => {
+        onConfirm={newAlias => {
           onChangeTable({
             ...table,
             alias: newAlias,
@@ -251,7 +251,7 @@ export default function DesignerTable({
     ));
   };
 
-  const handleHeaderContextMenu = (event) => {
+  const handleHeaderContextMenu = event => {
     event.preventDefault();
     showMenu(
       event.pageX,
@@ -272,20 +272,20 @@ export default function DesignerTable({
     );
   };
 
-  const handleColumnContextMenu = (column) => (event) => {
+  const handleColumnContextMenu = column => event => {
     event.preventDefault();
     const foreignKey = findForeignKeyForColumn(table, column);
     showMenu(
       event.pageX,
       event.pageY,
       <ColumnContextMenu
-        setSortOrder={(sortOrder) => {
+        setSortOrder={sortOrder => {
           onChangeColumn(
             {
               ...column,
               designerId,
             },
-            (col) => ({ ...col, sortOrder })
+            col => ({ ...col, sortOrder })
           );
         }}
         addReference={
@@ -307,7 +307,7 @@ export default function DesignerTable({
         top: movingPosition ? movingPosition.top : top,
       }}
       onMouseDown={() => onBringToFront(table)}
-      ref={(dom) => dispatchDomColumn('', dom)}
+      ref={dom => dispatchDomColumn('', dom)}
     >
       <Header
         onMouseDown={headerMouseDown}
@@ -322,13 +322,13 @@ export default function DesignerTable({
         </CloseWrapper>
       </Header>
       <ColumnsWrapper>
-        {(columns || []).map((column) => (
+        {(columns || []).map(column => (
           <ColumnLine
             onContextMenu={handleColumnContextMenu(column)}
             key={column.columnName}
             theme={theme}
             draggable
-            ref={(dom) => dispatchDomColumn(column.columnName, dom)}
+            ref={dom => dispatchDomColumn(column.columnName, dom)}
             // @ts-ignore
             isDragSource={
               sourceDragColumn &&
@@ -341,7 +341,7 @@ export default function DesignerTable({
               targetDragColumn.designerId == designerId &&
               targetDragColumn.columnName == column.columnName
             }
-            onDragStart={(e) => {
+            onDragStart={e => {
               const dragData = {
                 ...column,
                 designerId,
@@ -349,11 +349,11 @@ export default function DesignerTable({
               setSourceDragColumn(dragData);
               e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
             }}
-            onDragEnd={(e) => {
+            onDragEnd={e => {
               setTargetDragColumn(null);
               setSourceDragColumn(null);
             }}
-            onDragOver={(e) => {
+            onDragOver={e => {
               if (sourceDragColumn) {
                 e.preventDefault();
                 setTargetDragColumn({
@@ -362,7 +362,7 @@ export default function DesignerTable({
                 });
               }
             }}
-            onDrop={(e) => {
+            onDrop={e => {
               var data = e.dataTransfer.getData('designer_column_drag_data');
               e.preventDefault();
               if (!data) return;
@@ -370,7 +370,7 @@ export default function DesignerTable({
               setTargetDragColumn(null);
               setSourceDragColumn(null);
             }}
-            onMouseDown={(e) =>
+            onMouseDown={e =>
               onSelectColumn({
                 ...column,
                 designerId,
@@ -380,17 +380,17 @@ export default function DesignerTable({
             <CheckboxField
               checked={
                 !!(designer.columns || []).find(
-                  (x) => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
+                  x => x.designerId == designerId && x.columnName == column.columnName && x.isOutput
                 )
               }
-              onChange={(e) => {
+              onChange={e => {
                 if (e.target.checked) {
                   onChangeColumn(
                     {
                       ...column,
                       designerId,
                     },
-                    (col) => ({ ...col, isOutput: true })
+                    col => ({ ...col, isOutput: true })
                   );
                 } else {
                   onChangeColumn(
@@ -398,7 +398,7 @@ export default function DesignerTable({
                       ...column,
                       designerId,
                     },
-                    (col) => ({ ...col, isOutput: false })
+                    col => ({ ...col, isOutput: false })
                   );
                 }
               }}

packages/web/src/designer/DomTableRef.ts

@@ -1,4 +1,4 @@
-import { DesignerTableInfo } from "./types";
+import { DesignerTableInfo } from './types';
 
 export default class DomTableRef {
   domTable: Element;

packages/web/src/designer/QueryDesignColumns.js

@@ -6,7 +6,7 @@ import InlineButton from '../widgets/InlineButton';
 import { findDesignerFilterType } from './designerTools';
 
 function getTableDisplayName(column, tables) {
-  const table = (tables || []).find((x) => x.designerId == column.designerId);
+  const table = (tables || []).find(x => x.designerId == column.designerId);
   if (table) return table.alias || table.pureName;
   return '';
 }
@@ -15,10 +15,10 @@ export default function QueryDesignColumns({ value, onChange }) {
   const { columns, tables } = value || {};
 
   const changeColumn = React.useCallback(
-    (col) => {
+    col => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        columns: (current.columns || []).map((x) =>
+        columns: (current.columns || []).map(x =>
           x.designerId == col.designerId && x.columnName == col.columnName ? col : x
         ),
       }));
@@ -27,30 +27,28 @@ export default function QueryDesignColumns({ value, onChange }) {
   );
 
   const removeColumn = React.useCallback(
-    (col) => {
+    col => {
-      onChange((current) => ({
+      onChange(current => ({
         ...current,
-        columns: (current.columns || []).filter(
+        columns: (current.columns || []).filter(x => x.designerId != col.designerId || x.columnName != col.columnName),
-          (x) => x.designerId != col.designerId || x.columnName != col.columnName
-        ),
       }));
     },
     [onChange]
   );
 
-  const hasGroupedColumn = !!(columns || []).find((x) => x.isGrouped);
+  const hasGroupedColumn = !!(columns || []).find(x => x.isGrouped);
 
   return (
     <TableControl rows={columns || []}>
       <TableColumn fieldName="columnName" header="Column/Expression" />
-      <TableColumn fieldName="tableDisplayName" header="Table" formatter={(row) => getTableDisplayName(row, tables)} />
+      <TableColumn fieldName="tableDisplayName" header="Table" formatter={row => getTableDisplayName(row, tables)} />
       <TableColumn
         fieldName="isOutput"
         header="Output"
-        formatter={(row) => (
+        formatter={row => (
           <CheckboxField
             checked={row.isOutput}
-            onChange={(e) => {
+            onChange={e => {
               if (e.target.checked) changeColumn({ ...row, isOutput: true });
               else changeColumn({ ...row, isOutput: false });
             }}
@@ -60,10 +58,10 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="alias"
         header="Alias"
-        formatter={(row) => (
+        formatter={row => (
           <TextField
             value={row.alias}
-            onChange={(e) => {
+            onChange={e => {
               changeColumn({ ...row, alias: e.target.value });
             }}
           />
@@ -73,10 +71,10 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="isGrouped"
         header="Group by"
-        formatter={(row) => (
+        formatter={row => (
           <CheckboxField
             checked={row.isGrouped}
-            onChange={(e) => {
+            onChange={e => {
               if (e.target.checked) changeColumn({ ...row, isGrouped: true });
               else changeColumn({ ...row, isGrouped: false });
             }}
@@ -86,11 +84,11 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="aggregate"
         header="Aggregate"
-        formatter={(row) =>
+        formatter={row =>
           !row.isGrouped && (
             <SelectField
               value={row.aggregate}
-              onChange={(e) => {
+              onChange={e => {
                 changeColumn({ ...row, aggregate: e.target.value });
               }}
             >
@@ -108,10 +106,10 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="sortOrder"
         header="Sort order"
-        formatter={(row) => (
+        formatter={row => (
           <SelectField
             value={row.sortOrder}
-            onChange={(e) => {
+            onChange={e => {
               changeColumn({ ...row, sortOrder: parseInt(e.target.value) });
             }}
           >
@@ -128,11 +126,11 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="filter"
         header="Filter"
-        formatter={(row) => (
+        formatter={row => (
           <DataFilterControl
             filterType={findDesignerFilterType(row, value)}
             filter={row.filter}
-            setFilter={(filter) => {
+            setFilter={filter => {
               changeColumn({ ...row, filter });
             }}
           />
@@ -142,11 +140,11 @@ export default function QueryDesignColumns({ value, onChange }) {
         <TableColumn
           fieldName="groupFilter"
           header="Group filter"
-          formatter={(row) => (
+          formatter={row => (
             <DataFilterControl
               filterType={findDesignerFilterType(row, value)}
               filter={row.groupFilter}
-              setFilter={(groupFilter) => {
+              setFilter={groupFilter => {
                 changeColumn({ ...row, groupFilter });
               }}
             />
@@ -156,7 +154,7 @@ export default function QueryDesignColumns({ value, onChange }) {
       <TableColumn
         fieldName="actions"
         header=""
-        formatter={(row) => (
+        formatter={row => (
           <>
             <InlineButton onClick={() => removeColumn(row)}>Remove</InlineButton>
           </>

packages/web/src/designer/cleanupDesignColumns.js

@@ -1,5 +1,5 @@
 export default function cleanupDesignColumns(columns) {
   return (columns || []).filter(
-    (x) => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter
+    x => x.isOutput || x.isGrouped || x.alias || (x.aggregate && x.aggregate != '---') || x.sortOrder || x.filter
   );
 }

packages/web/src/designer/designerTools.ts

@@ -12,9 +12,8 @@ export function referenceIsConnecting(
   tables2: DesignerTableInfo[]
 ) {
   return (
-    (tables1.find((x) => x.designerId == reference.sourceId) &&
+    (tables1.find(x => x.designerId == reference.sourceId) && tables2.find(x => x.designerId == reference.targetId)) ||
-      tables2.find((x) => x.designerId == reference.targetId)) ||
+    (tables1.find(x => x.designerId == reference.targetId) && tables2.find(x => x.designerId == reference.sourceId))
-    (tables1.find((x) => x.designerId == reference.targetId) && tables2.find((x) => x.designerId == reference.sourceId))
   );
 }
 
@@ -43,7 +42,7 @@ export function findConnectingReference(
 }
 
 export function findQuerySource(designer: DesignerInfo, designerId: string): Source {
-  const table = designer.tables.find((x) => x.designerId == designerId);
+  const table = designer.tables.find(x => x.designerId == designerId);
   if (!table) return null;
   return {
     name: table,
@@ -71,14 +70,14 @@ export function mergeSelectsFromDesigner(select1: Select, select2: Select): Sele
 }
 
 export function findPrimaryTable(tables: DesignerTableInfo[]) {
-  return _.minBy(tables, (x) => x.top);
+  return _.minBy(tables, x => x.top);
 }
 
 export function getReferenceConditions(reference: DesignerReferenceInfo, designer: DesignerInfo): Condition[] {
-  const sourceTable = designer.tables.find((x) => x.designerId == reference.sourceId);
+  const sourceTable = designer.tables.find(x => x.designerId == reference.sourceId);
-  const targetTable = designer.tables.find((x) => x.designerId == reference.targetId);
+  const targetTable = designer.tables.find(x => x.designerId == reference.targetId);
 
-  return reference.columns.map((col) => ({
+  return reference.columns.map(col => ({
     conditionType: 'binary',
     operator: '=',
     left: {
@@ -123,19 +122,19 @@ export function isConnectedByReference(
   const creator = new DesignerComponentCreator({
     ...designer,
     references: withoutRef
-      ? designer.references.filter((x) => x.designerId != withoutRef.designerId)
+      ? designer.references.filter(x => x.designerId != withoutRef.designerId)
       : designer.references,
   });
-  const arrays = creator.components.map((x) => x.thisAndSubComponentsTables);
+  const arrays = creator.components.map(x => x.thisAndSubComponentsTables);
-  const array1 = arrays.find((a) => a.find((x) => x.designerId == table1.designerId));
+  const array1 = arrays.find(a => a.find(x => x.designerId == table1.designerId));
-  const array2 = arrays.find((a) => a.find((x) => x.designerId == table2.designerId));
+  const array2 = arrays.find(a => a.find(x => x.designerId == table2.designerId));
   return array1 == array2;
 }
 
 export function findDesignerFilterType({ designerId, columnName }, designer) {
-  const table = (designer.tables || []).find((x) => x.designerId == designerId);
+  const table = (designer.tables || []).find(x => x.designerId == designerId);
   if (table) {
-    const column = (table.columns || []).find((x) => x.columnName == columnName);
+    const column = (table.columns || []).find(x => x.columnName == columnName);
     if (column) {
       const { dataType } = column;
       return getFilterType(dataType);

packages/web/src/formview/ChangeSetFormer.ts

@@ -28,7 +28,7 @@ export default class ChangeSetFormer extends Former {
   ) {
     super();
     this.changeSet = changeSetState && changeSetState.value;
-    this.setChangeSet = (value) => dispatchChangeSet({ type: 'set', value });
+    this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
     this.batchChangeSet = null;
     this.rowDefinition = display.getChangeSetRow(sourceRow);
     const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, this.rowDefinition);
@@ -51,14 +51,14 @@ export default class ChangeSetFormer extends Former {
     }
   }
 
-  setCellValue( uniqueName: string, value: any) {
+  setCellValue(uniqueName: string, value: any) {
     const row = this.sourceRow;
     const definition = this.display.getChangeSetField(row, uniqueName);
-    this.applyModification((chs) => setChangeSetValue(chs, definition, value));
+    this.applyModification(chs => setChangeSetValue(chs, definition, value));
   }
 
   deleteRow(index: number) {
-    this.applyModification((chs) => deleteChangeSetRows(chs, this.rowDefinition));
+    this.applyModification(chs => deleteChangeSetRows(chs, this.rowDefinition));
   }
 
   beginUpdate() {
@@ -70,10 +70,10 @@ export default class ChangeSetFormer extends Former {
   }
 
   revertRowChanges() {
-    this.applyModification((chs) => revertChangeSetRowChanges(chs, this.rowDefinition));
+    this.applyModification(chs => revertChangeSetRowChanges(chs, this.rowDefinition));
   }
   revertAllChanges() {
-    this.applyModification((chs) => createChangeSet());
+    this.applyModification(chs => createChangeSet());
   }
   undo() {
     this.dispatchChangeSet({ type: 'undo' });

packages/web/src/formview/FormView.js

@@ -37,24 +37,24 @@ const Wrapper = styled.div`
 `;
 
 const TableRow = styled.tr`
-  background-color: ${(props) => props.theme.gridbody_background};
+  background-color: ${props => props.theme.gridbody_background};
   &:nth-child(6n + 3) {
-    background-color: ${(props) => props.theme.gridbody_background_alt2};
+    background-color: ${props => props.theme.gridbody_background_alt2};
   }
   &:nth-child(6n + 6) {
-    background-color: ${(props) => props.theme.gridbody_background_alt3};
+    background-color: ${props => props.theme.gridbody_background_alt3};
   }
 `;
 
 const TableHeaderCell = styled.td`
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
   text-align: left;
   padding: 2px;
-  background-color: ${(props) => props.theme.gridheader_background};
+  background-color: ${props => props.theme.gridheader_background};
   overflow: hidden;
   position: relative;
 
-  ${(props) =>
+  ${props =>
     props.isSelected &&
     `
     background: initial;
@@ -64,7 +64,7 @@ const TableHeaderCell = styled.td`
 
 const TableBodyCell = styled.td`
   font-weight: normal;
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
   // border-collapse: collapse;
   padding: 2px;
   white-space: nowrap;
@@ -73,14 +73,14 @@ const TableBodyCell = styled.td`
   overflow: hidden;
   text-overflow: ellipsis;
 
-  ${(props) =>
+  ${props =>
     props.isSelected &&
     `
     background: initial;
     background-color: ${props.theme.gridbody_selection[4]};
     color: ${props.theme.gridbody_invfont1};`}
 
-  ${(props) =>
+  ${props =>
     !props.isSelected &&
     props.isModifiedCell &&
     `
@@ -96,7 +96,7 @@ const FocusField = styled.input`
 
 const RowCountLabel = styled.div`
   position: absolute;
-  background-color: ${(props) => props.theme.gridbody_background_yellow[1]};
+  background-color: ${props => props.theme.gridbody_background_yellow[1]};
   right: 40px;
   bottom: 20px;
 `;
@@ -145,7 +145,7 @@ export default function FormView(props) {
   const { rowData, rowStatus } = former;
 
   const handleSwitchToTable = () => {
-    setConfig((cfg) => ({
+    setConfig(cfg => ({
       ...cfg,
       isFormView: false,
       formViewKey: null,
@@ -156,7 +156,7 @@ export default function FormView(props) {
     ? () => formDisplay.filterCellValue(getCellColumn(currentCell), rowData)
     : null;
 
-  const handleContextMenu = (event) => {
+  const handleContextMenu = event => {
     event.preventDefault();
     showMenu(
       event.pageX,
@@ -196,7 +196,7 @@ export default function FormView(props) {
     return [row, col];
   };
 
-  const handleCursorMove = (event) => {
+  const handleCursorMove = event => {
     if (event.ctrlKey) {
       switch (event.keyCode) {
         case keycodes.leftArrow:
@@ -225,7 +225,7 @@ export default function FormView(props) {
     }
   };
 
-  const handleKeyNavigation = (event) => {
+  const handleKeyNavigation = event => {
     if (event.ctrlKey) {
       switch (event.keyCode) {
         case keycodes.upArrow:
@@ -268,7 +268,7 @@ export default function FormView(props) {
     }
   }
 
-  const scrollIntoView = (cell) => {
+  const scrollIntoView = cell => {
     const element = cellRefs.current[`${cell[0]},${cell[1]}`];
     if (element) element.scrollIntoView();
   };
@@ -290,7 +290,7 @@ export default function FormView(props) {
     copyTextToClipboard(text);
   }
 
-  const handleKeyDown = (event) => {
+  const handleKeyDown = event => {
     const navigation = handleKeyNavigation(event);
     if (navigation) {
       event.preventDefault();
@@ -374,7 +374,7 @@ export default function FormView(props) {
     }
   };
 
-  const handleTableMouseDown = (event) => {
+  const handleTableMouseDown = event => {
     event.preventDefault();
     if (focusFieldRef.current) focusFieldRef.current.focus();
 
@@ -478,7 +478,7 @@ export default function FormView(props) {
                 data-col={chunkIndex * 2}
                 // @ts-ignore
                 isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2}
-                ref={(element) => setCellRef(rowIndex, chunkIndex * 2, element)}
+                ref={element => setCellRef(rowIndex, chunkIndex * 2, element)}
               >
                 <ColumnLabel {...col} />
               </TableHeaderCell>
@@ -489,7 +489,7 @@ export default function FormView(props) {
                 // @ts-ignore
                 isSelected={currentCell[0] == rowIndex && currentCell[1] == chunkIndex * 2 + 1}
                 isModifiedCell={rowStatus.modifiedFields && rowStatus.modifiedFields.has(col.uniqueName)}
-                ref={(element) => setCellRef(rowIndex, chunkIndex * 2 + 1, element)}
+                ref={element => setCellRef(rowIndex, chunkIndex * 2 + 1, element)}
               >
                 {inplaceEditorState.cell &&
                 rowIndex == inplaceEditorState.cell[0] &&
@@ -499,7 +499,7 @@ export default function FormView(props) {
                     inplaceEditorState={inplaceEditorState}
                     dispatchInsplaceEditor={dispatchInsplaceEditor}
                     cellValue={rowData[col.uniqueName]}
-                    onSetValue={(value) => {
+                    onSetValue={value => {
                       former.setCellValue(col.uniqueName, value);
                     }}
                     // grider={grider}
@@ -520,7 +520,7 @@ export default function FormView(props) {
                       <ShowFormButton
                         theme={theme}
                         className="buttonLike"
-                        onClick={(e) => {
+                        onClick={e => {
                           e.stopPropagation();
                           openReferenceForm(rowData, col, openNewTab, conid, database);
                         }}

packages/web/src/formview/FormViewFilters.js

@@ -44,7 +44,7 @@ function PrimaryKeyFilterEditor({ column, baseTable, formDisplay }) {
     formDisplay.reload();
   };
 
-  const handleKeyDown = (ev) => {
+  const handleKeyDown = ev => {
     if (ev.keyCode == keycodes.enter) {
       applyFilter();
     }
@@ -58,13 +58,10 @@ function PrimaryKeyFilterEditor({ column, baseTable, formDisplay }) {
       <ColumnNameWrapper>
         <div>
           <FontIcon icon="img primary-key" />
-          <ColumnLabel {...baseTable.columns.find((x) => x.columnName == column.columnName)} />
+          <ColumnLabel {...baseTable.columns.find(x => x.columnName == column.columnName)} />
         </div>
         {formDisplay.config.formViewKeyRequested && (
-          <InlineButton
+          <InlineButton square onClick={cancelFilter}>
-            square
-            onClick={cancelFilter}
-          >
             <FontIcon icon="icon delete" />
           </InlineButton>
         )}
@@ -86,11 +83,11 @@ export default function FormViewFilters(props) {
 
   return (
     <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
-      {baseTable.primaryKey.columns.map((col) => (
+      {baseTable.primaryKey.columns.map(col => (
         <PrimaryKeyFilterEditor key={col.columnName} baseTable={baseTable} column={col} formDisplay={formDisplay} />
       ))}
-      {allFilterNames.map((columnName) => {
+      {allFilterNames.map(columnName => {
-        const column = baseTable.columns.find((x) => x.columnName == columnName);
+        const column = baseTable.columns.find(x => x.columnName == columnName);
         if (!column) return null;
         return (
           <ColumnWrapper key={columnName}>
@@ -108,7 +105,7 @@ export default function FormViewFilters(props) {
             <DataFilterControl
               filterType={getFilterType(column.dataType)}
               filter={filters[column.columnName]}
-              setFilter={(value) => formDisplay.setFilter(column.columnName, value)}
+              setFilter={value => formDisplay.setFilter(column.columnName, value)}
             />
           </ColumnWrapper>
         );

packages/web/src/formview/SqlFormView.js

@@ -84,12 +84,12 @@ export default function SqlFormView(props) {
     if (isLoadingData) return;
     let newLoadedRow = false;
     if (formDisplay.config.formViewKeyRequested || formDisplay.config.formViewKey) {
-      setLoadProps((oldLoadProps) => ({
+      setLoadProps(oldLoadProps => ({
         ...oldLoadProps,
         isLoadingData: true,
       }));
       const row = await loadRow(props, formDisplay.getCurrentRowQuery());
-      setLoadProps((oldLoadProps) => ({
+      setLoadProps(oldLoadProps => ({
         ...oldLoadProps,
         isLoadingData: false,
         isLoadedData: true,
@@ -107,14 +107,14 @@ export default function SqlFormView(props) {
   };
 
   const handleLoadRowCount = async () => {
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       isLoadingCount: true,
     }));
     const countRow = await loadRow(props, formDisplay.getCountQuery());
     const countBeforeRow = await loadRow(props, formDisplay.getBeforeCountQuery());
 
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       isLoadedCount: true,
       isLoadingCount: false,
@@ -123,8 +123,8 @@ export default function SqlFormView(props) {
     }));
   };
 
-  const handleNavigate = async (command) => {
+  const handleNavigate = async command => {
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       isLoadingData: true,
     }));
@@ -132,7 +132,7 @@ export default function SqlFormView(props) {
     if (row) {
       formDisplay.navigate(row);
     }
-    setLoadProps((oldLoadProps) => ({
+    setLoadProps(oldLoadProps => ({
       ...oldLoadProps,
       isLoadingData: false,
       isLoadedData: true,
@@ -227,7 +227,7 @@ export default function SqlFormView(props) {
     });
     const { errorMessage } = resp.data || {};
     if (errorMessage) {
-      showModal((modalState) => (
+      showModal(modalState => (
         <ErrorMessageModal modalState={modalState} message={errorMessage} title="Error when saving" />
       ));
     } else {

packages/web/src/freetable/FreeTableColumnEditor.js

@@ -14,7 +14,7 @@ const Row = styled.div`
   // padding: 5px;
   cursor: pointer;
   &:hover {
-    background-color: ${(props) => props.theme.manager_background_blue[1]};
+    background-color: ${props => props.theme.manager_background_blue[1]};
   }
 `;
 const Name = styled.div`
@@ -29,13 +29,13 @@ const Icon = styled(FontIcon)`
   position: relative;
   top: 5px;
   &:hover {
-    background-color: ${(props) => props.theme.manager_background3};
+    background-color: ${props => props.theme.manager_background3};
   }
   padding: 5px;
 `;
 const EditorInput = styled.input`
   width: calc(100% - 10px);
-  background-color: ${(props) =>
+  background-color: ${props =>
     // @ts-ignore
     props.isError ? props.theme.manager_background_red[1] : props.theme.manager_background};
 `;
@@ -53,7 +53,7 @@ function ColumnNameEditor({
   const [value, setValue] = React.useState(defaultValue || '');
   const editorRef = React.useRef(null);
   const isError = value && existingNames && existingNames.includes(value);
-  const handleKeyDown = (event) => {
+  const handleKeyDown = event => {
     if (value && event.keyCode == keycodes.enter && !isError) {
       onEnter(value);
       setValue('');
@@ -82,7 +82,7 @@ function ColumnNameEditor({
       onKeyDown={handleKeyDown}
       onBlur={handleBlur}
       value={value}
-      onChange={(ev) => setValue(ev.target.value)}
+      onChange={ev => setValue(ev.target.value)}
       // @ts-ignore
       isError={isError}
       {...other}
@@ -141,17 +141,17 @@ export default function FreeTableColumnEditor(props) {
           index == editingColumn ? (
             <ColumnNameEditor
               defaultValue={column.columnName}
-              onEnter={(columnName) => {
+              onEnter={columnName => {
                 dispatchChangeColumns(
                   props,
-                  (cols) => cols.map((col, i) => (index == i ? { columnName } : col)),
+                  cols => cols.map((col, i) => (index == i ? { columnName } : col)),
-                  (row) => _.mapKeys(row, (v, k) => (k == column.columnName ? columnName : k))
+                  row => _.mapKeys(row, (v, k) => (k == column.columnName ? columnName : k))
                 );
               }}
               onBlur={() => setEditingColumn(null)}
               focusOnCreate
               blurOnEnter
-              existingNames={model.structure.columns.map((x) => x.columnName)}
+              existingNames={model.structure.columns.map(x => x.columnName)}
             />
           ) : (
             <ColumnManagerRow
@@ -159,23 +159,23 @@ export default function FreeTableColumnEditor(props) {
               column={column}
               onEdit={() => setEditingColumn(index)}
               onRemove={() => {
-                dispatchChangeColumns(props, (cols) => cols.filter((c, i) => i != index));
+                dispatchChangeColumns(props, cols => cols.filter((c, i) => i != index));
               }}
               onUp={() => {
-                dispatchChangeColumns(props, (cols) => exchange(cols, index, index - 1));
+                dispatchChangeColumns(props, cols => exchange(cols, index, index - 1));
               }}
               onDown={() => {
-                dispatchChangeColumns(props, (cols) => exchange(cols, index, index + 1));
+                dispatchChangeColumns(props, cols => exchange(cols, index, index + 1));
               }}
             />
           )
         )}
         <ColumnNameEditor
-          onEnter={(columnName) => {
+          onEnter={columnName => {
-            dispatchChangeColumns(props, (cols) => [...cols, { columnName }]);
+            dispatchChangeColumns(props, cols => [...cols, { columnName }]);
           }}
           placeholder="New column"
-          existingNames={model.structure.columns.map((x) => x.columnName)}
+          existingNames={model.structure.columns.map(x => x.columnName)}
         />
       </ManagerInnerContainer>
     </>

packages/web/src/freetable/FreeTableGrid.js

@@ -12,7 +12,7 @@ import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar
 import useTheme from '../theme/useTheme';
 
 const LeftContainer = styled.div`
-  background-color: ${(props) => props.theme.manager_background};
+  background-color: ${props => props.theme.manager_background};
   display: flex;
   flex: 1;
 `;
@@ -25,7 +25,7 @@ const DataGridContainer = styled.div`
 function extractMacroValuesForMacro(macroValues, macro) {
   if (!macro) return {};
   return {
-    ..._.fromPairs((macro.args || []).filter((x) => x.default != null).map((x) => [x.name, x.default])),
+    ..._.fromPairs((macro.args || []).filter(x => x.default != null).map(x => [x.name, x.default])),
     ..._.mapKeys(macroValues, (v, k) => k.replace(/^.*#/, '')),
   };
 }

packages/web/src/freetable/FreeTableGridCore.js

@@ -47,18 +47,18 @@ export default function FreeTableGridCore(props) {
     initialValues.sourceStorageType = 'jsldata';
     initialValues.sourceJslId = jslid;
     initialValues.sourceList = ['editor-data'];
-    showModal((modalState) => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
+    showModal(modalState => <ImportExportModal modalState={modalState} initialValues={initialValues} />);
   }
 
   const handleSelectionChanged = React.useCallback(
-    (cells) => {
+    cells => {
       if (onSelectionChanged) onSelectionChanged(cells);
       setSelectedCells(cells);
     },
     [setSelectedCells]
   );
 
-  const handleKeyDown = React.useCallback((event) => {
+  const handleKeyDown = React.useCallback(event => {
     if (event.keyCode == keycodes.escape) {
       setSelectedMacro(null);
     }

packages/web/src/freetable/MacroDetail.js

@@ -19,8 +19,8 @@ const Container = styled.div`
   height: ${dimensions.toolBar.height}px;
   min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
 `;
 
 const Header = styled.div`

packages/web/src/freetable/MacroManager.js

@@ -25,12 +25,12 @@ export default function MacroManager({ managerSize, selectedMacro, setSelectedMa
         <AppObjectList
           list={_.sortBy(macros, 'title')}
           AppObjectComponent={MacroAppObject}
-          onObjectClick={(macro) => setSelectedMacro(macro)}
+          onObjectClick={macro => setSelectedMacro(macro)}
-          getCommonProps={(data) => ({
+          getCommonProps={data => ({
             isBold: selectedMacro && selectedMacro.name == data.name,
           })}
           filter={filter}
-          groupFunc={(data) => data.group}
+          groupFunc={data => data.group}
         />
         {/* {macros.map((macro) => (
           <MacroListItem key={`${macro.group}/${macro.name}`} macro={macro} />

packages/web/src/freetable/MacroParameters.js

@@ -6,7 +6,7 @@ import { FormProvider } from '../utility/FormProvider';
 export default function MacroParameters({ args, onChangeValues, macroValues, namePrefix }) {
   if (!args || args.length == 0) return null;
   const initialValues = {
-    ..._.fromPairs(args.filter((x) => x.default != null).map((x) => [`${namePrefix}${x.name}`, x.default])),
+    ..._.fromPairs(args.filter(x => x.default != null).map(x => [`${namePrefix}${x.name}`, x.default])),
     ...macroValues,
   };
   return (

packages/web/src/impexp/ImportExportConfigurator.js

@@ -53,7 +53,7 @@ const Column = styled.div`
 const Label = styled.div`
   margin: 5px;
   margin-top: 15px;
-  color: ${(props) => props.theme.modal_font2};
+  color: ${props => props.theme.modal_font2};
 `;
 
 const SourceNameWrapper = styled.div`
@@ -67,10 +67,10 @@ const SourceNameButtons = styled.div`
 
 const IconButtonWrapper = styled.div`
   &:hover {
-    background-color: ${(props) => props.theme.modal_background2};
+    background-color: ${props => props.theme.modal_background2};
   }
   cursor: pointer;
-  color: ${(props) => props.theme.modal_font_blue[7]};
+  color: ${props => props.theme.modal_font_blue[7]};
   margin-left: 5px;
 `;
 
@@ -82,12 +82,12 @@ const SqlWrapper = styled.div`
 
 const DragWrapper = styled.div`
   padding: 10px;
-  background: ${(props) => props.theme.modal_background2};
+  background: ${props => props.theme.modal_background2};
 `;
 
 const ArrowWrapper = styled.div`
   font-size: 30px;
-  color: ${(props) => props.theme.modal_font_blue[7]};
+  color: ${props => props.theme.modal_font_blue[7]};
   align-self: center;
 `;
 
@@ -128,7 +128,7 @@ async function addFilesToSourceList(extensions, files, values, setValues, prefer
       await (format.addFileToSourceList || addFileToSourceListDefault)(file, newSources, newValues);
     }
   }
-  newValues['sourceList'] = [...(values.sourceList || []).filter((x) => !newSources.includes(x)), ...newSources];
+  newValues['sourceList'] = [...(values.sourceList || []).filter(x => !newSources.includes(x)), ...newSources];
   if (preferedStorageType && preferedStorageType != values.sourceStorageType) {
     newValues['sourceStorageType'] = preferedStorageType;
   }
@@ -158,7 +158,7 @@ function ElectronFilesInput() {
         setIsLoading(true);
         await addFilesToSourceList(
           extensions,
-          files.map((full) => ({
+          files.map(full => ({
             fileName: full,
             shortName: path.parse(full).name,
           })),
@@ -197,7 +197,7 @@ function FilesInput({ setPreviewSource = undefined }) {
   const showModal = useShowModal();
   const { values, setValues } = useForm();
   const extensions = useExtensions();
-  const doAddUrl = (url) => {
+  const doAddUrl = url => {
     addFilesToSourceList(
       extensions,
       [
@@ -214,7 +214,7 @@ function FilesInput({ setPreviewSource = undefined }) {
     );
   };
   const handleAddUrl = () =>
-    showModal((modalState) => <ChangeDownloadUrlModal modalState={modalState} onConfirm={doAddUrl} />);
+    showModal(modalState => <ChangeDownloadUrlModal modalState={modalState} onConfirm={doAddUrl} />);
   return (
     <>
       <ButtonsLine>
@@ -245,7 +245,7 @@ function SourceTargetConfig({
       ? [{ value: 'jsldata', label: 'Query result data', directions: ['source'] }]
       : [
           { value: 'database', label: 'Database', directions: ['source', 'target'] },
-          ...extensions.fileFormats.map((format) => ({
+          ...extensions.fileFormats.map(format => ({
             value: format.storageType,
             label: `${format.name} files(s)`,
             directions: getFileFormatDirections(format),
@@ -269,7 +269,7 @@ function SourceTargetConfig({
           <FontIcon icon="icon export" /> Target configuration
         </Title>
       )}
-      <FormReactSelect options={types.filter((x) => x.directions.includes(direction))} name={storageTypeField} />
+      <FormReactSelect options={types.filter(x => x.directions.includes(direction))} name={storageTypeField} />
       {(storageType == 'database' || storageType == 'query') && (
         <>
           <Label theme={theme}>Server</Label>
@@ -298,7 +298,7 @@ function SourceTargetConfig({
                   onClick={() =>
                     setFieldValue(
                       'sourceList',
-                      _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.tables.map((x) => x.pureName))])
+                      _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.tables.map(x => x.pureName))])
                     )
                   }
                 />
@@ -308,7 +308,7 @@ function SourceTargetConfig({
                   onClick={() =>
                     setFieldValue(
                       'sourceList',
-                      _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.views.map((x) => x.pureName))])
+                      _.uniq([...(values.sourceList || []), ...(dbinfo && dbinfo.views.map(x => x.pureName))])
                     )
                   }
                 />
@@ -324,7 +324,7 @@ function SourceTargetConfig({
           <SqlWrapper>
             <SqlEditor
               value={values.sourceSql}
-              onChange={(value) => setFieldValue('sourceSql', value)}
+              onChange={value => setFieldValue('sourceSql', value)}
               engine={engine}
               focusOnCreate
             />
@@ -353,7 +353,7 @@ function SourceTargetConfig({
               onClick={() =>
                 setFieldValue(
                   'sourceList',
-                  _.uniq([...(values.sourceList || []), ...(archiveFiles && archiveFiles.map((x) => x.name))])
+                  _.uniq([...(values.sourceList || []), ...(archiveFiles && archiveFiles.map(x => x.name))])
                 )
               }
             />
@@ -366,7 +366,7 @@ function SourceTargetConfig({
 
       {format && format.args && (
         <FormArgumentList
-          args={format.args.filter((arg) => !arg.direction || arg.direction == direction)}
+          args={format.args.filter(arg => !arg.direction || arg.direction == direction)}
           namePrefix={`${direction}_${format.storageType}_`}
         />
       )}
@@ -382,14 +382,14 @@ function SourceName({ name }) {
   const handleDelete = () => {
     setFieldValue(
       'sourceList',
-      values.sourceList.filter((x) => x != name)
+      values.sourceList.filter(x => x != name)
     );
   };
-  const doChangeUrl = (url) => {
+  const doChangeUrl = url => {
     setFieldValue(`sourceFile_${name}`, { fileName: url, isDownload: true });
   };
   const handleChangeUrl = () => {
-    showModal((modalState) => (
+    showModal(modalState => (
       <ChangeDownloadUrlModal modalState={modalState} url={obj.fileName} onConfirm={doChangeUrl} />
     ));
   };
@@ -423,7 +423,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined, onC
   const extensions = useExtensions();
 
   const handleUpload = React.useCallback(
-    (file) => {
+    file => {
       addFilesToSourceList(
         extensions,
         [
@@ -516,36 +516,36 @@ export default function ImportExportConfigurator({ uploadedFile = undefined, onC
           <FontIcon icon="icon tables" /> Map source tables/files
         </Title>
         <TableControl rows={sourceList || []}>
-          <TableColumn fieldName="source" header="Source" formatter={(row) => <SourceName name={row} />} />
+          <TableColumn fieldName="source" header="Source" formatter={row => <SourceName name={row} />} />
           <TableColumn
             fieldName="action"
             header="Action"
-            formatter={(row) => (
+            formatter={row => (
               <SelectField
                 options={getActionOptions(extensions, row, values, targetDbinfo)}
                 value={values[`actionType_${row}`] || getActionOptions(extensions, row, values, targetDbinfo)[0].value}
-                onChange={(e) => setFieldValue(`actionType_${row}`, e.target.value)}
+                onChange={e => setFieldValue(`actionType_${row}`, e.target.value)}
               />
             )}
           />
           <TableColumn
             fieldName="target"
             header="Target"
-            formatter={(row) => (
+            formatter={row => (
               <TextField
                 value={getTargetName(extensions, row, values)}
-                onChange={(e) => setFieldValue(`targetName_${row}`, e.target.value)}
+                onChange={e => setFieldValue(`targetName_${row}`, e.target.value)}
               />
             )}
           />
           <TableColumn
             fieldName="preview"
             header="Preview"
-            formatter={(row) =>
+            formatter={row =>
               supportsPreview ? (
                 <CheckboxField
                   checked={previewSource == row}
-                  onChange={(e) => {
+                  onChange={e => {
                     if (e.target.checked) setPreviewSource(row);
                     else setPreviewSource(null);
                   }}

packages/web/src/impexp/ScriptWriter.js

@@ -39,7 +39,7 @@ export default class ScriptWriter {
   getScript(schedule = null) {
     const packageNames = this.packageNames;
     let prefix = _.uniq(packageNames)
-      .map((packageName) => `// @require ${packageName}\n`)
+      .map(packageName => `// @require ${packageName}\n`)
       .join('');
     if (schedule) prefix += `// @schedule ${schedule}`;
     if (prefix) prefix += '\n';

packages/web/src/index.css

@@ -25,4 +25,4 @@ code {
 
 .icon-invisible {
   visibility: hidden;
-}
+}

packages/web/src/modals/ChangeDownloadUrlModal.js

@@ -19,7 +19,7 @@ export default function ChangeDownloadUrlModal({ modalState, url = '', onConfirm
   // };
 
   const handleSubmit = React.useCallback(
-    async (values) => {
+    async values => {
       onConfirm(values.url);
       modalState.close();
     },

packages/web/src/modals/ConnectionModal.js

@@ -14,10 +14,10 @@ import { FormProvider, useForm } from '../utility/FormProvider';
 function DriverFields({ extensions }) {
   const { values, setFieldValue } = useForm();
   const { authType, engine } = values;
-  const driver = extensions.drivers.find((x) => x.engine == engine);
+  const driver = extensions.drivers.find(x => x.engine == engine);
   // const { authTypes } = driver || {};
   const [authTypes, setAuthTypes] = React.useState(null);
-  const currentAuthType = authTypes && authTypes.find((x) => x.name == authType);
+  const currentAuthType = authTypes && authTypes.find(x => x.name == authType);
 
   const loadAuthTypes = async () => {
     const resp = await axios.post('plugins/auth-types', { engine });
@@ -39,7 +39,7 @@ function DriverFields({ extensions }) {
     <>
       {!!authTypes && (
         <FormSelectField label="Authentication" name="authType">
-          {authTypes.map((auth) => (
+          {authTypes.map(auth => (
             <option value={auth.name} key={auth.name}>
               {auth.title}
             </option>
@@ -66,7 +66,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
   const [isTesting, setIsTesting] = React.useState(false);
   const testIdRef = React.useRef(0);
 
-  const handleTest = async (values) => {
+  const handleTest = async values => {
     setIsTesting(true);
     testIdRef.current += 1;
     const testid = testIdRef.current;
@@ -82,7 +82,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
     setIsTesting(false);
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     axios.post('connections/save', values);
     modalState.close();
   };
@@ -93,7 +93,7 @@ export default function ConnectionModal({ modalState, connection = undefined })
         <ModalContent>
           <FormSelectField label="Database engine" name="engine">
             <option value="(select driver)"></option>
-            {extensions.drivers.map((driver) => (
+            {extensions.drivers.map(driver => (
               <option value={driver.engine} key={driver.engine}>
                 {driver.title}
               </option>

packages/web/src/modals/CreateDatabaseModal.js

@@ -8,7 +8,7 @@ import ModalFooter from './ModalFooter';
 import { FormProvider } from '../utility/FormProvider';
 
 export default function CreateDatabaseModal({ modalState, conid }) {
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     const { name } = values;
     axios.post('server-connections/create-database', { conid, name });
 

packages/web/src/modals/FavoriteModal.js

@@ -48,7 +48,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
 
   const canWriteFavorite = hasPermission('files/favorites/write');
 
-  const getTabSaveData = async (values) => {
+  const getTabSaveData = async values => {
     const tabdata = {};
     const skipEditor = !!savedFile && values.whatToSave != 'content';
 
@@ -78,7 +78,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
     };
   };
 
-  const saveTab = async (values) => {
+  const saveTab = async values => {
     const data = await getTabSaveData(values);
 
     axios.post('files/save', {
@@ -89,7 +89,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
     });
   };
 
-  const saveFile = async (values) => {
+  const saveFile = async values => {
     const oldDataResp = await axios.post('files/load', {
       folder: 'favorites',
       file: editingData.file,
@@ -107,7 +107,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
     });
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     modalState.close();
     if (savingTab) {
       saveTab(values);
@@ -117,7 +117,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
     }
   };
 
-  const handleCopyLink = async (values) => {
+  const handleCopyLink = async values => {
     const tabdata = await getTabSaveData(values);
     copyTextToClipboard(`${document.location.origin}#tabdata=${encodeURIComponent(JSON.stringify(tabdata))}`);
   };
@@ -136,7 +136,7 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
           {!!savingTab && !electron && canWriteFavorite && (
             <FormCheckboxField label="Share as link" name="shareAsLink" />
           )}
-          <FormCondition condition={(values) => !values.shareAsLink && canWriteFavorite}>
+          <FormCondition condition={values => !values.shareAsLink && canWriteFavorite}>
             <FormCheckboxField label="Show in toolbar" name="showInToolbar" />
             <FormCheckboxField label="Open on startup" name="openOnStartup" />
           </FormCondition>
@@ -148,10 +148,10 @@ export default function FavoriteModal({ modalState, editingData = undefined, sav
           )}
         </ModalContent>
         <ModalFooter>
-          <FormCondition condition={(values) => !values.shareAsLink && canWriteFavorite}>
+          <FormCondition condition={values => !values.shareAsLink && canWriteFavorite}>
             <FormSubmit value="OK" onClick={handleSubmit} />
           </FormCondition>
-          <FormCondition condition={(values) => values.shareAsLink || !canWriteFavorite}>
+          <FormCondition condition={values => values.shareAsLink || !canWriteFavorite}>
             <FormButton value="Copy link" onClick={handleCopyLink} />
           </FormCondition>
           <FormButton value="Cancel" onClick={() => modalState.close()} />

packages/web/src/modals/FilterMultipleValuesModal.js

@@ -49,7 +49,7 @@ export default function FilterMultipleValuesModal({ modalState, onFilter }) {
       <ModalHeader modalState={modalState}>Filter multiple values</ModalHeader>
       <ModalContent>
         <Wrapper>
-          <textarea rows={10} ref={editorRef} value={text} onChange={(e) => setText(e.target.value)} />
+          <textarea rows={10} ref={editorRef} value={text} onChange={e => setText(e.target.value)} />
           <OptionsWrapper>
             <RadioGroupItem text="Is one of line" value="is" defaultChecked setMode={setMode} />
             <RadioGroupItem text="Is not one of line" value="is_not" setMode={setMode} />

packages/web/src/modals/ImportExportModal.js

@@ -52,7 +52,7 @@ const WidgetColumnWrapper = styled.div`
   display: flex;
   flex: 1;
   overflow: hidden;
-  border-left: 1px solid ${(props) => props.theme.border};
+  border-left: 1px solid ${props => props.theme.border};
 `;
 
 const FormWrapper = styled.div`
@@ -67,7 +67,7 @@ const FormWrapper = styled.div`
 `;
 
 const ContentWrapper = styled.div`
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -80,9 +80,9 @@ const Footer = styled.div`
   left: 0;
   right: 0;
   bottom: 0px;
-  background-color: ${(props) => props.theme.modalheader_background};
+  background-color: ${props => props.theme.modalheader_background};
 
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
   // padding: 15px;
 `;
 
@@ -155,13 +155,13 @@ export default function ImportExportModal({
     }
   }, [runnerId, socket]);
 
-  const handleExecute = async (values) => {
+  const handleExecute = async values => {
     if (busy) return;
 
     setBusy(true);
     const script = await createImpExpScript(extensions, values);
 
-    setExecuteNumber((num) => num + 1);
+    setExecuteNumber(num => num + 1);
 
     let runid = runnerId;
     const resp = await axios.post('runners/start', { script });

packages/web/src/modals/InputTextModal.js

@@ -7,7 +7,7 @@ import ModalFooter from './ModalFooter';
 import { FormProvider } from '../utility/FormProvider';
 
 export default function InputTextModal({ header, label, value, modalState, onConfirm }) {
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     const { value } = values;
     modalState.close();
     onConfirm(value);

packages/web/src/modals/InsertJoinModal.js

@@ -34,7 +34,7 @@ const JOIN_TYPES = ['INNER JOIN', 'LEFT JOIN', 'RIGHT JOIN'];
 
 export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onInsert }) {
   const sources = React.useMemo(
-    () => analyseQuerySources(sql, [...dbinfo.tables.map((x) => x.pureName), ...dbinfo.views.map((x) => x.pureName)]),
+    () => analyseQuerySources(sql, [...dbinfo.tables.map(x => x.pureName), ...dbinfo.views.map(x => x.pureName)]),
     [sql, dbinfo]
   );
 
@@ -51,22 +51,22 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
     const source = sources[sourceIndex];
     if (!source) return [];
     /** @type {import('dbgate-types').TableInfo} */
-    const table = dbinfo.tables.find((x) => x.pureName == sources[sourceIndex].name);
+    const table = dbinfo.tables.find(x => x.pureName == sources[sourceIndex].name);
     if (!table) return [];
     return [
-      ...table.foreignKeys.map((fk) => ({
+      ...table.foreignKeys.map(fk => ({
-        baseColumns: fk.columns.map((x) => x.columnName).join(', '),
+        baseColumns: fk.columns.map(x => x.columnName).join(', '),
         refTable: fk.refTableName,
-        refColumns: fk.columns.map((x) => x.refColumnName).join(', '),
+        refColumns: fk.columns.map(x => x.refColumnName).join(', '),
         constraintName: fk.constraintName,
         columnMap: fk.columns,
       })),
-      ...table.dependencies.map((fk) => ({
+      ...table.dependencies.map(fk => ({
-        baseColumns: fk.columns.map((x) => x.refColumnName).join(', '),
+        baseColumns: fk.columns.map(x => x.refColumnName).join(', '),
         refTable: fk.pureName,
-        refColumns: fk.columns.map((x) => x.columnName).join(', '),
+        refColumns: fk.columns.map(x => x.columnName).join(', '),
         constraintName: fk.constraintName,
-        columnMap: fk.columns.map((x) => ({
+        columnMap: fk.columns.map(x => ({
           columnName: x.refColumnName,
           refColumnName: x.columnName,
         })),
@@ -79,18 +79,18 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
     const target = targets[targetIndex];
     if (source && target) {
       return `${JOIN_TYPES[joinIndex]} ${target.refTable}${alias ? ` ${alias}` : ''} ON ${target.columnMap
-        .map((col) => `${source.name}.${col.columnName} = ${alias || target.refTable}.${col.refColumnName}`)
+        .map(col => `${source.name}.${col.columnName} = ${alias || target.refTable}.${col.refColumnName}`)
         .join(' AND ')}`;
     }
     return '';
   }, [joinIndex, sources, targets, sourceIndex, targetIndex, alias]);
 
-  const sourceKeyDown = React.useCallback((event) => {
+  const sourceKeyDown = React.useCallback(event => {
     if (event.keyCode == keycodes.enter || event.keyCode == keycodes.rightArrow) {
       targetRef.current.focus();
     }
   }, []);
-  const targetKeyDown = React.useCallback((event) => {
+  const targetKeyDown = React.useCallback(event => {
     if (event.keyCode == keycodes.leftArrow) {
       sourceRef.current.focus();
     }
@@ -98,7 +98,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
       joinRef.current.focus();
     }
   }, []);
-  const joinKeyDown = React.useCallback((event) => {
+  const joinKeyDown = React.useCallback(event => {
     if (event.keyCode == keycodes.leftArrow) {
       targetRef.current.focus();
     }
@@ -107,7 +107,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
     }
   }, []);
   const aliasKeyDown = React.useCallback(
-    (event) => {
+    event => {
       if (event.keyCode == keycodes.enter) {
         event.preventDefault();
         modalState.close();
@@ -154,7 +154,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
           <FlexColumn>
             <Label>Join</Label>
             <TableControl
-              rows={JOIN_TYPES.map((name) => ({ name }))}
+              rows={JOIN_TYPES.map(name => ({ name }))}
               selectedIndex={joinIndex}
               setSelectedIndex={setJoinIndex}
               tableRef={joinRef}
@@ -165,7 +165,7 @@ export default function InsertJoinModal({ sql, modalState, engine, dbinfo, onIns
             <Label>Alias</Label>
             <TextField
               value={alias}
-              onChange={(e) => setAlias(e.target.value)}
+              onChange={e => setAlias(e.target.value)}
               editorRef={aliasRef}
               onKeyDown={aliasKeyDown}
             />

packages/web/src/modals/ModalBase.js

@@ -20,13 +20,13 @@ import ErrorBoundary from '../utility/ErrorBoundary';
 // `;
 
 const StyledModal = styled(Modal)`
-  border: 1px solid ${(props) => props.theme.border};
+  border: 1px solid ${props => props.theme.border};
-  background: ${(props) => props.theme.modal_background};
+  background: ${props => props.theme.modal_background};
   overflow: auto;
   webkitoverflowscrolling: touch;
   outline: none;
 
-  ${(props) =>
+  ${props =>
     props.fullScreen &&
     `
     position: fixed;
@@ -38,7 +38,7 @@ const StyledModal = styled(Modal)`
       // height: 100%;
     `}
 
-  ${(props) =>
+  ${props =>
     !props.fullScreen &&
     `
     border-radius: 10px;
@@ -50,7 +50,7 @@ const StyledModal = styled(Modal)`
         
         // z-index:1200;
 
-  ${(props) =>
+  ${props =>
     props.isFlex &&
     `
           display: flex;

packages/web/src/modals/ModalContent.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
   padding: 15px;
 `;
 

packages/web/src/modals/ModalFooter.js

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
   padding: 15px;
-  background-color: ${(props) => props.theme.modalheader_background};
+  background-color: ${props => props.theme.modalheader_background};
 `;
 
 export default function ModalFooter({ children }) {

packages/web/src/modals/ModalHeader.js

@@ -8,13 +8,13 @@ const Wrapper = styled.div`
   padding: 15px;
   display: flex;
   justify-content: space-between;
-  background-color: ${(props) => props.theme.modalheader_background};
+  background-color: ${props => props.theme.modalheader_background};
 `;
 
 const CloseWrapper = styled.div`
   font-size: 12pt;
   &:hover {
-    background-color: ${(props) => props.theme.modalheader_background2};
+    background-color: ${props => props.theme.modalheader_background2};
   }
   padding: 5px 10px;
   border-radius: 10px;

packages/web/src/modals/SaveArchiveModal.js

@@ -14,7 +14,7 @@ const SelectWrapper = styled.div`
 `;
 
 export default function SaveArchiveModal({ file = 'new-table', folder = 'default', modalState, onSave }) {
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     const { file, folder } = values;
     modalState.close();
     if (onSave) onSave(folder, file);

packages/web/src/modals/SaveFileModal.js

@@ -8,7 +8,7 @@ import ModalFooter from './ModalFooter';
 import { FormProvider } from '../utility/FormProvider';
 
 export default function SaveFileModal({ data, folder, format, modalState, name, onSave = undefined }) {
-  const handleSubmit = async (values) => {
+  const handleSubmit = async values => {
     const { name } = values;
     await axios.post('files/save', { folder, file: name, data, format });
     modalState.close();
@@ -19,7 +19,7 @@ export default function SaveFileModal({ data, folder, format, modalState, name,
       <ModalHeader modalState={modalState}>Save file</ModalHeader>
       <FormProvider initialValues={{ name }}>
         <ModalContent>
-          <FormTextField label="File name" name="name" focused/>
+          <FormTextField label="File name" name="name" focused />
         </ModalContent>
         <ModalFooter>
           <FormSubmit value="Save" onClick={handleSubmit} />

packages/web/src/modals/SaveTabModal.js

@@ -8,9 +8,9 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
 
-  const { savedFile } = openedTabs.find((x) => x.tabid == tabid).props || {};
+  const { savedFile } = openedTabs.find(x => x.tabid == tabid).props || {};
-  const onSave = (name) =>
+  const onSave = name =>
-    changeTab(tabid, setOpenedTabs, (tab) => ({
+    changeTab(tabid, setOpenedTabs, tab => ({
       ...tab,
       title: name,
       props: {
@@ -22,7 +22,7 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
     }));
 
   const handleKeyboard = React.useCallback(
-    (e) => {
+    e => {
       if (e.keyCode == keycodes.s && e.ctrlKey) {
         e.preventDefault();
         modalState.open();

packages/web/src/modals/SetFilterModal.js

@@ -93,7 +93,7 @@ export default function SetFilterModal({ modalState, onFilter, filterType, condi
     return `${condition}${value}`;
   };
 
-  const handleOk = (values) => {
+  const handleOk = values => {
     const { value1, condition1, value2, condition2, joinOperator } = values;
     const term1 = createTerm(condition1, value1);
     const term2 = createTerm(condition2, value2);

packages/web/src/modals/showModal.js

@@ -22,11 +22,7 @@ export function ModalLayer() {
   return (
     <div>
       {modals.map((modal, index) => (
-        <ShowModalComponent
+        <ShowModalComponent key={index} renderModal={modal} onClose={() => setModals(x => x.filter(y => y != modal))} />
-          key={index}
-          renderModal={modal}
-          onClose={() => setModals((x) => x.filter((y) => y != modal))}
-        />
       ))}
     </div>
   );
@@ -34,7 +30,7 @@ export function ModalLayer() {
 
 export default function useShowModal() {
   const [modals, setModals] = React.useContext(Context);
-  const showModal = (renderModal) => {
+  const showModal = renderModal => {
     setModals([...modals, renderModal]);
   };
   return showModal;

packages/web/src/plugins/PluginsList.js

@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   display: flex;
   align-items: center;
   &:hover {
-    background-color: ${(props) => props.theme.left_background_blue[1]};
+    background-color: ${props => props.theme.left_background_blue[1]};
   }
 `;
 
@@ -79,7 +79,7 @@ function PluginsListItem({ packageManifest }) {
 export default function PluginsList({ plugins }) {
   return (
     <>
-      {plugins.map((packageManifest) => (
+      {plugins.map(packageManifest => (
         <PluginsListItem packageManifest={packageManifest} key={packageManifest.name} />
       ))}
     </>

packages/web/src/plugins/PluginsProvider.js

@@ -31,10 +31,10 @@ export default function PluginsProvider({ children }) {
         newPlugins[installed.name] = moduleContent;
       }
     }
-    setPlugins((x) =>
+    setPlugins(x =>
       _.pick(
         { ...x, ...newPlugins },
-        installedPlugins.map((y) => y.name)
+        installedPlugins.map(y => y.name)
       )
     );
   };
@@ -51,12 +51,12 @@ export function usePlugins() {
   return React.useMemo(
     () =>
       installed
-        .map((manifest) => ({
+        .map(manifest => ({
           packageName: manifest.name,
           manifest,
           content: loaded[manifest.name],
         }))
-        .filter((x) => x.content),
+        .filter(x => x.content),
     [installed, loaded]
   );
 }

packages/web/src/query/MessagesView.js

@@ -7,7 +7,7 @@ const MainContainer = styled.div`
   flex: 1;
   display: flex;
   overflow-y: scroll;
-  background-color: ${(props) => props.theme.gridbody_background};
+  background-color: ${props => props.theme.gridbody_background};
 `;
 
 const StyledTable = styled.table`
@@ -18,22 +18,22 @@ const StyledTable = styled.table`
 
 const StyledHeader = styled.td`
   text-align: left;
-  border-bottom: 2px solid ${(props) => props.theme.border};
+  border-bottom: 2px solid ${props => props.theme.border};
-  background-color: ${(props) => props.theme.gridheader_background};
+  background-color: ${props => props.theme.gridheader_background};
   padding: 5px;
 `;
 
 const StyledCell = styled.td`
-  border-top: 1px solid ${(props) => props.theme.border};
+  border-top: 1px solid ${props => props.theme.border};
   padding: 5px;
 `;
 
 const StyledRow = styled.tr`
-  color: ${(props) =>
+  color: ${props =>
     // @ts-ignore
     props.severity == 'error' ? props.theme.gridbody_font_red[5] : props.theme.gridbody_font1};
 
-  ${(props) =>
+  ${props =>
     // @ts-ignore
     props.line != null &&
     `
@@ -55,7 +55,7 @@ function formatDuration(duration) {
 }
 
 function MessagesView({ items, onMessageClick, showProcedure = false, showLine = false }) {
-  const handleClick = (row) => {
+  const handleClick = row => {
     if (onMessageClick) onMessageClick(row);
   };
   const theme = useTheme();

packages/web/src/query/RunnerOuputFiles.js

@@ -39,12 +39,12 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
   return (
     <TableControl rows={files}>
       <TableColumn fieldName="name" header="Name" />
-      <TableColumn fieldName="size" header="Size" formatter={(row) => formatFileSize(row.size)} />
+      <TableColumn fieldName="size" header="Size" formatter={row => formatFileSize(row.size)} />
       {!electron && (
         <TableColumn
           fieldName="download"
           header="Download"
-          formatter={(row) => (
+          formatter={row => (
             <a href={`${resolveApi()}/runners/data/${runnerId}/${row.name}`} target="_blank" rel="noopener noreferrer">
               download
             </a>
@@ -55,7 +55,7 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
         <TableColumn
           fieldName="copy"
           header="Copy"
-          formatter={(row) => (
+          formatter={row => (
             <a
               href="#"
               onClick={() => {
@@ -75,7 +75,7 @@ export default function RunnerOutputFiles({ runnerId, executeNumber }) {
         <TableColumn
           fieldName="show"
           header="Show"
-          formatter={(row) => (
+          formatter={row => (
             <a
               href="#"
               onClick={() => {

packages/web/src/query/SocketMessagesView.js

@@ -23,7 +23,7 @@ export default function SocketMessagesView({
     []
   );
 
-  const handleInfo = React.useCallback((info) => {
+  const handleInfo = React.useCallback(info => {
     cachedMessagesRef.current.push(info);
     displayCachedMessages();
   }, []);

packages/web/src/serviceWorker.js

@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
 );
 
 export function register(config) {
@@ -101,15 +99,12 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
-      if (
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
@@ -122,9 +117,7 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
+      console.log('No internet connection found. App is running in offline mode.');
-        'No internet connection found. App is running in offline mode.'
-      );
     });
 }
 

packages/web/src/sqleditor/ResultTabs.js

@@ -8,9 +8,9 @@ export default function ResultTabs({ children, sessionId, executeNumber }) {
   const socket = useSocket();
   const [resultInfos, setResultInfos] = React.useState([]);
 
-  const handleResultSet = React.useCallback((props) => {
+  const handleResultSet = React.useCallback(props => {
     const { jslid, resultIndex } = props;
-    setResultInfos((array) => [...array, { jslid, resultIndex }]);
+    setResultInfos(array => [...array, { jslid, resultIndex }]);
   }, []);
 
   React.useEffect(() => {
@@ -29,7 +29,7 @@ export default function ResultTabs({ children, sessionId, executeNumber }) {
   return (
     <TabControl activePageLabel={resultInfos.length > 0 ? 'Result 1' : null}>
       {children}
-      {_.sortBy(resultInfos, 'resultIndex').map((info) => (
+      {_.sortBy(resultInfos, 'resultIndex').map(info => (
         <TabPage label={`Result ${info.resultIndex + 1}`} key={info.jslid}>
           <JslDataGrid jslid={info.jslid} key={info.jslid} />
         </TabPage>

packages/web/src/sqleditor/SqlEditor.js

@@ -78,13 +78,13 @@ export default function SqlEditor({
       if (keyCode == keycodes.j && event.ctrlKey && !readOnly && tabVisible) {
         event.preventDefault();
         const dbinfo = await getDatabaseInfo({ conid, database });
-        showModal((modalState) => (
+        showModal(modalState => (
           <InsertJoinModal
             sql={currentEditorRef.current.editor.getValue()}
             modalState={modalState}
             engine={engine}
             dbinfo={dbinfo}
-            onInsert={(text) => {
+            onInsert={text => {
               const editor = currentEditorRef.current.editor;
               editor.session.insert(editor.getCursorPosition(), text);
             }}

packages/web/src/sqleditor/analyseQuerySources.js

@@ -1,5 +1,5 @@
 export default function analyseQuerySources(sql, sourceNames) {
-  const upperSourceNames = sourceNames.map((x) => x.toUpperCase());
+  const upperSourceNames = sourceNames.map(x => x.toUpperCase());
   const tokens = sql.split(/\s+/);
   const res = [];
   for (let i = 0; i < tokens.length; i += 1) {

packages/web/src/sqleditor/useCodeCompletion.js

@@ -34,7 +34,7 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
         const line = session.getLine(cursor.row).slice(0, cursor.column);
         const dbinfo = await getDatabaseInfo({ conid, database });
 
-        let list = COMMON_KEYWORDS.map((word) => ({
+        let list = COMMON_KEYWORDS.map(word => ({
           name: word,
           value: word,
           caption: word,
@@ -47,17 +47,17 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
           if (colMatch) {
             const table = colMatch[1];
             const sources = analyseQuerySources(editor.getValue(), [
-              ...dbinfo.tables.map((x) => x.pureName),
+              ...dbinfo.tables.map(x => x.pureName),
-              ...dbinfo.views.map((x) => x.pureName),
+              ...dbinfo.views.map(x => x.pureName),
             ]);
-            const source = sources.find((x) => (x.alias || x.name) == table);
+            const source = sources.find(x => (x.alias || x.name) == table);
             console.log('sources', sources);
             console.log('table', table, source);
             if (source) {
-              const table = dbinfo.tables.find((x) => x.pureName == source.name);
+              const table = dbinfo.tables.find(x => x.pureName == source.name);
               if (table) {
                 list = [
-                  ...table.columns.map((x) => ({
+                  ...table.columns.map(x => ({
                     name: x.columnName,
                     value: x.columnName,
                     caption: x.columnName,
@@ -70,14 +70,14 @@ export default function useCodeCompletion({ conid, database, tabVisible, current
           } else {
             list = [
               ...list,
-              ...dbinfo.tables.map((x) => ({
+              ...dbinfo.tables.map(x => ({
                 name: x.pureName,
                 value: x.pureName,
                 caption: x.pureName,
                 meta: 'table',
                 score: 1000,
               })),
-              ...dbinfo.views.map((x) => ({
+              ...dbinfo.views.map(x => ({
                 name: x.pureName,
                 value: x.pureName,
                 caption: x.pureName,

packages/web/src/tabs/ChartTab.js

@@ -30,11 +30,11 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
   }, [modelState]);
 
   const setConfig = React.useCallback(
-    (config) =>
+    config =>
       // @ts-ignore
       dispatchModel({
         type: 'compute',
-        compute: (v) => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }),
+        compute: v => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }),
       }),
     [dispatchModel]
   );
@@ -75,4 +75,4 @@ export default function ChartTab({ tabVisible, toolbarPortalRef, conid, database
   );
 }
 
-ChartTab.allowAddToFavorites = (props) => true;
+ChartTab.allowAddToFavorites = props => true;

packages/web/src/tabs/FavoriteEditorTab.js

@@ -42,7 +42,7 @@ export default function FavoriteEditorTab({ tabid, tabVisible, savedFile, toolba
       const data = JSON.parse(editorData);
       openFavorite(data);
     } catch (err) {
-      showModal((modalState) => (
+      showModal(modalState => (
         <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
       ));
     }
@@ -65,7 +65,7 @@ export default function FavoriteEditorTab({ tabid, tabVisible, savedFile, toolba
         data,
       });
     } catch (err) {
-      showModal((modalState) => (
+      showModal(modalState => (
         <ErrorMessageModal modalState={modalState} message={err.message} title="Error parsing JSON" />
       ));
     }

packages/web/src/tabs/FreeTableTab.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {  createFreeTableModel } from 'dbgate-datalib';
+import { createFreeTableModel } from 'dbgate-datalib';
 import useUndoReducer from '../utility/useUndoReducer';
 import { useSetOpenedTabs } from '../utility/globalState';
 import useGridConfig from '../utility/useGridConfig';
@@ -21,7 +21,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
     tabid,
     loadFromArgs:
       initialArgs && initialArgs.functionName
-        ? () => axios.post('runners/load-reader', initialArgs).then((x) => x.data)
+        ? () => axios.post('runners/load-reader', initialArgs).then(x => x.data)
         : null,
   });
 
@@ -36,7 +36,7 @@ export default function FreeDataTab({ archiveFolder, archiveFile, tabVisible, to
 
   const handleSave = async (folder, file) => {
     await axios.post('archive/save-free-table', { folder, file, data: modelState.value });
-    changeTab(tabid, setOpenedTabs, (tab) => ({
+    changeTab(tabid, setOpenedTabs, tab => ({
       ...tab,
       title: file,
       props: { archiveFile: file, archiveFolder: folder },

packages/web/src/tabs/MarkdownEditorTab.js

@@ -27,16 +27,16 @@ export default function MarkdownEditorTab({ tabid, tabVisible, toolbarPortalRef,
 
   const showPreview = async () => {
     await saveToStorage();
-    const existing = (openedTabs || []).find((x) => x.props && x.props.sourceTabId == tabid && x.closedTime == null);
+    const existing = (openedTabs || []).find(x => x.props && x.props.sourceTabId == tabid && x.closedTime == null);
     if (existing) {
-      setOpenedTabs((tabs) =>
+      setOpenedTabs(tabs =>
-        tabs.map((x) => ({
+        tabs.map(x => ({
           ...x,
           selected: x.tabid == existing.tabid,
         }))
       );
     } else {
-      const thisTab = (openedTabs || []).find((x) => x.tabid == tabid);
+      const thisTab = (openedTabs || []).find(x => x.tabid == tabid);
       openNewTab({
         title: thisTab.title,
         icon: 'img preview',

packages/web/src/tabs/MarkdownPreviewTab.js

@@ -8,7 +8,7 @@ export default function MarkdownPreviewTab({ sourceTabId, tabVisible }) {
   const { editorData, isLoading } = useEditorData({ tabid: sourceTabId, reloadToken });
 
   React.useEffect(() => {
-    if (tabVisible) setReloadToken((x) => x + 1);
+    if (tabVisible) setReloadToken(x => x + 1);
   }, [tabVisible]);
 
   if (isLoading) {

packages/web/src/tabs/MarkdownViewTab.js

@@ -33,4 +33,4 @@ export default function MarkdownViewTab({ savedFile }) {
   return <MarkdownExtendedView>{text || ''}</MarkdownExtendedView>;
 }
 
-MarkdownViewTab.allowAddToFavorites = (props) => true;
+MarkdownViewTab.allowAddToFavorites = props => true;

packages/web/src/tabs/PluginTab.js

@@ -18,7 +18,7 @@ const WhitePage = styled.div`
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.main_background};
+  background-color: ${props => props.theme.main_background};
   overflow: auto;
   padding: 10px;
 `;
@@ -30,7 +30,7 @@ const Icon = styled.img`
 
 const Header = styled.div`
   display: flex;
-  border-bottom: 1px solid ${(props) => props.theme.border};
+  border-bottom: 1px solid ${props => props.theme.border};
   margin-bottom: 20px;
   padding-bottom: 20px;
 `;
@@ -81,7 +81,7 @@ function PluginTabCore({ packageName }) {
     return <LoadingInfo message="Loading extension detail" />;
   }
 
-  const installedFound = installed.find((x) => x.name == packageName);
+  const installedFound = installed.find(x => x.name == packageName);
   const onlineFound = manifest;
 
   if (manifest == null) {

packages/web/src/tabs/QueryDesignTab.js

@@ -79,7 +79,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
       dispatchModel({
         type: 'compute',
         useMerge: skipUndoChain,
-        compute: (v) => (_.isFunction(value) ? value(v) : value),
+        compute: v => (_.isFunction(value) ? value(v) : value),
       }),
     [dispatchModel]
   );
@@ -94,14 +94,14 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   }, [sessionId, socket]);
 
   React.useEffect(() => {
-    changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy }));
+    changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
   }, [busy]);
 
   useUpdateDatabaseForTab(tabVisible, conid, database);
 
   const handleExecute = React.useCallback(async () => {
     if (busy) return;
-    setExecuteNumber((num) => num + 1);
+    setExecuteNumber(num => num + 1);
     setVisibleResultTabs(true);
 
     let sesid = sessionId;
@@ -129,7 +129,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   };
 
   const handleKeyDown = React.useCallback(
-    (e) => {
+    e => {
       if (e.keyCode == keycodes.f5) {
         e.preventDefault();
         handleExecute();
@@ -212,4 +212,4 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
   );
 }
 
-QueryDesignTab.allowAddToFavorites = (props) => true;
+QueryDesignTab.allowAddToFavorites = props => true;

packages/web/src/tabs/QueryTab.js

@@ -55,7 +55,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
   }, [sessionId, socket]);
 
   React.useEffect(() => {
-    changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy }));
+    changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
   }, [busy]);
 
   useUpdateDatabaseForTab(tabVisible, conid, database);
@@ -63,7 +63,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
 
   const handleExecute = async () => {
     if (busy) return;
-    setExecuteNumber((num) => num + 1);
+    setExecuteNumber(num => num + 1);
     setVisibleResultTabs(true);
     const selectedText = editorRef.current.editor.getSelectedText();
 
@@ -104,7 +104,7 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
     }
   };
 
-  const handleMesageClick = (message) => {
+  const handleMesageClick = message => {
     // console.log('EDITOR', editorRef.current.editor);
     if (editorRef.current && editorRef.current.editor) {
       editorRef.current.editor.gotoLine(message.line);
@@ -179,4 +179,4 @@ export default function QueryTab({ tabid, conid, database, initialArgs, tabVisib
   );
 }
 
-QueryTab.allowAddToFavorites = (props) => true;
+QueryTab.allowAddToFavorites = props => true;

packages/web/src/tabs/ShellTab.js

@@ -35,7 +35,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
   const socket = useSocket();
 
   React.useEffect(() => {
-    changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy }));
+    changeTab(tabid, setOpenedTabs, tab => ({ ...tab, busy }));
   }, [busy]);
 
   const editorRef = React.useRef(null);
@@ -55,14 +55,14 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
 
   const handleExecute = async () => {
     if (busy) return;
-    setExecuteNumber((num) => num + 1);
+    setExecuteNumber(num => num + 1);
     const selectedText = editorRef.current.editor.getSelectedText();
 
     let runid = runnerId;
     const resp = await axios.post('runners/start', {
       script: selectedText
-        ? [...(editorData || '').matchAll(requireRegex)].map((x) => `${x[1]}\n`).join('') +
+        ? [...(editorData || '').matchAll(requireRegex)].map(x => `${x[1]}\n`).join('') +
-          [...(editorData || '').matchAll(initRegex)].map((x) => `${x[1]}\n`).join('') +
+          [...(editorData || '').matchAll(initRegex)].map(x => `${x[1]}\n`).join('') +
           selectedText
         : editorData,
     });
@@ -87,7 +87,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
   const handleEdit = () => {
     const jsonTextMatch = (editorData || '').match(configRegex);
     if (jsonTextMatch) {
-      showModal((modalState) => (
+      showModal(modalState => (
         <ImportExportModal modalState={modalState} initialValues={JSON.parse(jsonTextMatch[1])} />
       ));
     }
@@ -140,4 +140,4 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
   );
 }
 
-ShellTab.allowAddToFavorites = (props) => true;
+ShellTab.allowAddToFavorites = props => true;

packages/web/src/tabs/TableDataTab.js

@@ -28,4 +28,4 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
 }
 
 TableDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
-TableDataTab.allowAddToFavorites = (props) => true;
+TableDataTab.allowAddToFavorites = props => true;

packages/web/src/tabs/TableStructureTab.js

@@ -14,7 +14,7 @@ const WhitePage = styled.div`
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.main_background};
+  background-color: ${props => props.theme.main_background};
   overflow: auto;
 `;
 
@@ -54,7 +54,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
           fieldName="notNull"
           header="Not NULL"
           sortable={true}
-          formatter={(row) => (row.notNull ? 'YES' : 'NO')}
+          formatter={row => (row.notNull ? 'YES' : 'NO')}
         />
         <TableColumn fieldName="dataType" header="Data Type" sortable={true} />
         <TableColumn fieldName="defaultValue" header="Default value" sortable={true} />
@@ -62,14 +62,14 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
           fieldName="isSparse"
           header="Is Sparse"
           sortable={true}
-          formatter={(row) => (row.isSparse ? 'YES' : 'NO')}
+          formatter={row => (row.isSparse ? 'YES' : 'NO')}
         />
         <TableColumn fieldName="computedExpression" header="Computed Expression" sortable={true} />
         <TableColumn
           fieldName="isPersisted"
           header="Is Persisted"
           sortable={true}
-          formatter={(row) => (row.isPersisted ? 'YES' : 'NO')}
+          formatter={row => (row.isPersisted ? 'YES' : 'NO')}
         />
         {/* {_.includes(dbCaps.columnListOptionalColumns, 'referencedTableNamesFormatted') && (
           <TableColumn fieldName="referencedTableNamesFormatted" header="References" sortable={true} />
@@ -101,7 +101,7 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         <TableColumn
           fieldName="columns"
           header="Columns"
-          formatter={(row) => row.columns.map((x) => x.columnName).join(', ')}
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
         />
       </ObjectListControl>
 
@@ -109,13 +109,13 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         <TableColumn
           fieldName="baseColumns"
           header="Base columns"
-          formatter={(row) => row.columns.map((x) => x.columnName).join(', ')}
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
         />
-        <TableColumn fieldName="refTable" header="Referenced table" formatter={(row) => row.refTableName} />
+        <TableColumn fieldName="refTable" header="Referenced table" formatter={row => row.refTableName} />
         <TableColumn
           fieldName="refColumns"
           header="Referenced columns"
-          formatter={(row) => row.columns.map((x) => x.refColumnName).join(', ')}
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
         />
         <TableColumn fieldName="updateAction" header="ON UPDATE" />
         <TableColumn fieldName="deleteAction" header="ON DELETE" />
@@ -125,13 +125,13 @@ export default function TableStructureTab({ conid, database, schemaName, pureNam
         <TableColumn
           fieldName="baseColumns"
           header="Base columns"
-          formatter={(row) => row.columns.map((x) => x.columnName).join(', ')}
+          formatter={row => row.columns.map(x => x.columnName).join(', ')}
         />
-        <TableColumn fieldName="baseTable" header="Base table" formatter={(row) => row.pureName} />
+        <TableColumn fieldName="baseTable" header="Base table" formatter={row => row.pureName} />
         <TableColumn
           fieldName="refColumns"
           header="Referenced columns"
-          formatter={(row) => row.columns.map((x) => x.refColumnName).join(', ')}
+          formatter={row => row.columns.map(x => x.refColumnName).join(', ')}
         />
         <TableColumn fieldName="updateAction" header="ON UPDATE" />
         <TableColumn fieldName="deleteAction" header="ON DELETE" />

packages/web/src/tabs/ViewDataTab.js

@@ -15,7 +15,7 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
   const [config, setConfig] = useGridConfig(tabid);
   const [cache, setCache] = React.useState(createGridCache());
   const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
-  const extensions = useExtensions()
+  const extensions = useExtensions();
 
   useUpdateDatabaseForTab(tabVisible, conid, database);
   const connection = useConnectionInfo({ conid });
@@ -51,9 +51,9 @@ export default function ViewDataTab({ conid, database, schemaName, pureName, tab
       dispatchChangeSet={dispatchChangeSet}
       toolbarPortalRef={toolbarPortalRef}
       GridCore={SqlDataGridCore}
-      />
+    />
   );
 }
 
 ViewDataTab.matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
-ViewDataTab.allowAddToFavorites = (props) => true;
+ViewDataTab.allowAddToFavorites = props => true;

packages/web/src/theme/colorUtil.js

@@ -8,7 +8,7 @@ export function hexToRgb(rgb) {
   if (!rgb.match(/^#[0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F][0-9a-fA-F]$/)) {
     throw new Error(`Ivalid RGB color: ${rgb}`);
   }
-  return [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map((x) => parseInt(x, 16));
+  return [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map(x => parseInt(x, 16));
 }
 
 function componentToHex(c) {

packages/web/src/themes/ThemeHelmet.js

@@ -57,7 +57,7 @@ export default function ThemeHelmet() {
         }
 
         ${_.flatten(
-          _.keys(theme.main_palettes).map((color) =>
+          _.keys(theme.main_palettes).map(color =>
             theme.main_palettes[color].map((code, index) => `.color-${color}-${index + 1} { color: ${code} }`)
           )
         ).join('\n')}

packages/web/src/utility/FormArgumentList.js

@@ -17,7 +17,7 @@ function FormArgument({ arg, namePrefix }) {
   if (arg.type == 'select') {
     return (
       <FormSelectField label={arg.label} name={name}>
-        {arg.options.map((opt) =>
+        {arg.options.map(opt =>
           _.isString(opt) ? <option value={opt}>{opt}</option> : <option value={opt.value}>{opt.name}</option>
         )}
       </FormSelectField>
@@ -34,7 +34,7 @@ export default function FormArgumentList({ args, onChangeValues = undefined, nam
   return (
     <FormArgumentsWrapper>
       {' '}
-      {args.map((arg) => (
+      {args.map(arg => (
         <FormArgument arg={arg} key={arg.name} namePrefix={namePrefix} />
       ))}
     </FormArgumentsWrapper>