Merge pull request #620 from dbeaver/feat/tabs-context

feat(core-blocks): CB-17 keep tab menu icon visible when menu is opened

webapp/packages/core-theming/src/styles/_tabs.scss

@@ -61,7 +61,7 @@
     }
 
     &:not(:only-child) {
-      padding-right: 8px;
+      padding-right: 14px;
     }
   }
 
@@ -71,6 +71,7 @@
   }
 
   Tab:global([aria-selected="true"]) + tab-actions portal,
+  tab-inner portal[|menuOpened],
   tab-inner:hover portal,
   tab-inner:focus-within portal {
     visibility: visible;

webapp/packages/core-ui/src/Tabs/Tab/Tab.tsx

@@ -7,22 +7,22 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Tab as BaseTab } from 'reakit/Tab';
-import styled from 'reshadow';
+import styled, { use } from 'reshadow';
 
+import { Icon } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
 import { useMenu } from '@cloudbeaver/core-view';
-import { Icon } from '@cloudbeaver/core-blocks';
 
+import { ContextMenu } from '../../ContextMenu/MenuTrigger';
 import { TabContext } from '../TabContext';
+import { DATA_CONTEXT_TAB_ID } from './DATA_CONTEXT_TAB_ID';
+import { DATA_CONTEXT_TABS_CONTEXT } from './DATA_CONTEXT_TABS_CONTEXT';
+import { MENU_TAB } from './MENU_TAB';
 import type { TabProps } from './TabProps';
 import { useTab } from './useTab';
-import { MENU_TAB } from './MENU_TAB';
-import { DATA_CONTEXT_TABS_CONTEXT } from './DATA_CONTEXT_TABS_CONTEXT';
-import { DATA_CONTEXT_TAB_ID } from './DATA_CONTEXT_TAB_ID';
-import { ContextMenu } from '../../ContextMenu/MenuTrigger';
 
 export const Tab = observer<TabProps>(function Tab({
   tabId,
@@ -41,6 +41,8 @@ export const Tab = observer<TabProps>(function Tab({
   const menu = useMenu(MENU_TAB);
   const info = getInfo();
 
+  const [menuOpened, switchState] = useState(false);
+
   menu.context.set(DATA_CONTEXT_TABS_CONTEXT, state);
   menu.context.set(DATA_CONTEXT_TAB_ID, tabId);
 
@@ -71,8 +73,8 @@ export const Tab = observer<TabProps>(function Tab({
                   <Icon name="cross-bold" viewBox="0 0 7 8" />
                 </tab-action>
               )}
-              <portal>
-                <ContextMenu menu={menu} placement='bottom-start' modal disclosure>
+              <portal {...use({ menuOpened })}>
+                <ContextMenu menu={menu} placement='bottom-start' modal disclosure onVisibleSwitch={switchState}>
                   <tab-action>
                     <Icon name="dots" viewBox="0 0 32 32" />
                   </tab-action>

webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx

@@ -15,11 +15,11 @@ import {
   Group, SubmittingForm, useMapResource, Button, ColoredContainer, InputField,
   FieldCheckbox, BASE_CONTAINERS_STYLES, Switch, GroupItem, Container, Textarea, UploadArea, Combobox
 } from '@cloudbeaver/core-blocks';
-import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
 import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { NetworkHandlerAuthType } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
+import type { TabContainerPanelComponent } from '@cloudbeaver/core-ui';
 import { getTextFileReadingProcess } from '@cloudbeaver/core-utils';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
@@ -186,8 +186,8 @@ export const SSH: TabContainerPanelComponent<IConnectionFormProps> = observer(fu
                 <GroupItem>
                   <UploadArea
                     accept='.txt, .ssh'
-                    reset
                     disabled={disabled || !enabled}
+                    reset
                     onChange={handleKeyUpload}
                   >
                     <Button

webapp/packages/plugin-connections/src/ConnectionForm/SSH/authTypes.ts

@@ -6,21 +6,21 @@
  * you may not use this file except in compliance with the License.
  */
 
-import type { TLocalizationToken } from "@cloudbeaver/core-localization";
-import { NetworkHandlerAuthType } from "@cloudbeaver/core-sdk";
+import type { TLocalizationToken } from '@cloudbeaver/core-localization';
+import { NetworkHandlerAuthType } from '@cloudbeaver/core-sdk';
 
 interface IAuthType {
-  key: NetworkHandlerAuthType,
-  label: TLocalizationToken
+  key: NetworkHandlerAuthType;
+  label: TLocalizationToken;
 }
 
 export const authTypes: IAuthType[] = [
   {
     key: NetworkHandlerAuthType.Password,
-    label: 'Password'
+    label: 'Password',
   },
   {
     key: NetworkHandlerAuthType.PublicKey,
-    label: 'Public Key'
-  }
+    label: 'Public Key',
+  },
 ];