Skip to content

feat: implement tab close functionality with i18n support #2049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

feat: implement tab close functionality with i18n support #2049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bb9d7f0
i18n(zh-CN): improve Chinese translations
losingle Apr 16, 2025
ff2e881
Update translation.json
losingle Apr 16, 2025
08faa61
feat: implement tab close functionality with i18n support
losingle Apr 17, 2025
233d918
Fix lint issues in Session component
losingle Apr 17, 2025
27dd17f
Fix lint issues in Session component
losingle Apr 17, 2025
3926d29
Fix lint issues in Session component
losingle Apr 17, 2025
ea59dcd
Fix lint issues in Session component
losingle Apr 17, 2025
dc01bea
Fix lint issues in Session component
losingle Apr 17, 2025
f5367f7
Fix i18n
losingle Apr 17, 2025
f801c7e
Fix i18n
losingle Apr 17, 2025
c0f2df5
Fix code style issues
losingle Apr 17, 2025
aa0ce39
Fix tab switch
losingle Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/common/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,5 +291,6 @@
"AccessToken": "AccessToken",
"Token": "Token",
"Key": "Key",
"Secret": "Secret"
"Secret": "Secret",
"Close tab": "Close tab"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is enough to only add English resources. localized resources are synchronized automatically to crowdin as soon as the PR is merged and should not be changed manually.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only kept English resources

}
4 changes: 2 additions & 2 deletions app/common/renderer/components/Session/SavedSessions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const getSessionById = (savedSessions, id, t) => {
};

const SavedSessions = (props) => {
const {savedSessions, deleteSavedSession, capsUUID, switchTabs, t} = props;
const {savedSessions, deleteSavedSession, capsUUID, handleSwitchTabs, t} = props;

const handleCapsAndServer = (uuid) => {
const {
Expand Down Expand Up @@ -83,7 +83,7 @@ const SavedSessions = (props) => {
icon={<EditOutlined />}
onClick={() => {
handleCapsAndServer(record.key);
switchTabs(SESSION_BUILDER_TABS.CAPS_BUILDER);
handleSwitchTabs(SESSION_BUILDER_TABS.CAPS_BUILDER);
}}
/>
</Tooltip>
Expand Down
61 changes: 50 additions & 11 deletions app/common/renderer/components/Session/Session.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {LinkOutlined} from '@ant-design/icons';
import {Badge, Button, Spin, Tabs} from 'antd';
import {Badge, Button, Dropdown, Spin, Tabs} from 'antd';
import _ from 'lodash';
import {useEffect} from 'react';
import {useEffect, useState} from 'react';
import {useNavigate} from 'react-router';

import {BUTTON} from '../../constants/antd-types';
Expand All @@ -24,11 +24,12 @@ import SessionStyles from './Session.module.css';

const Session = (props) => {
const {
tabKey,
switchTabs,
serverType,
setServerType,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No such function exists. You probably wanted to use changeServerType

server,
visibleProviders = [],
removeVisibleProvider,
caps,
capsUUID,
capsName,
Expand All @@ -44,8 +45,9 @@ const Session = (props) => {
} = props;

const navigate = useNavigate();
const [activeTab, setActiveTab] = useState(SESSION_BUILDER_TABS.CAPS_BUILDER);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't quite see the reason in adding this, along with handleTabChange and handleSwitchTabs. Switching session builder tabs is also not related to the server type tab closing functionality.


const isAttaching = tabKey === 'attach';
const isAttaching = serverType === 'attach';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why this was changed. tabKey is used for session builder tabs, but serverType is used for the server type tabs.


const handleSelectServerTab = async (tab) => {
const {changeServerType, addCloudProvider} = props;
Expand All @@ -56,20 +58,54 @@ const Session = (props) => {
await changeServerType(tab);
};

const handleTabChange = (tab) => {
setActiveTab(tab);
switchTabs(tab);
};

const handleSwitchTabs = (tab) => {
switchTabs(tab);
setActiveTab(tab);
};

const loadNewSession = async (caps, attachSessId = null) => {
if (await newSession(_.cloneDeep(caps), attachSessId)) {
navigate('/inspector', {replace: true});
}
};

const getContextMenu = (tabKey) => ({
items: [
{
key: 'closeTab',
label: t('Close tab'),
onClick: () => handleCloseTab(tabKey),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this action will also trigger handleSelectServerTab, which will try to select the same tab that was just removed

disabled: tabKey === SERVER_TYPES.REMOTE,
},
],
});

const handleContextMenu = (e) => {
e.preventDefault();
e.stopPropagation();
};

const handleCloseTab = (tabKey) => {
if (tabKey !== SERVER_TYPES.REMOTE) {
removeVisibleProvider(tabKey);
if (serverType === tabKey) {
setServerType(SERVER_TYPES.REMOTE);
}
}
};

useEffect(() => {
const {
setLocalServerParams,
getSavedSessions,
setSavedServerParams,
initFromSessionFile,
setStateFromSessionFile,
setVisibleProviders,
bindWindowClose,
initFromQueryString,
saveSessionAsFile,
Expand All @@ -79,7 +115,6 @@ const Session = (props) => {
bindWindowClose();
switchTabs(SESSION_BUILDER_TABS.CAPS_BUILDER);
await getSavedSessions();
await setVisibleProviders();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason why this was removed?

await setSavedServerParams();
await setLocalServerParams();
initFromQueryString(loadNewSession);
Expand Down Expand Up @@ -108,13 +143,17 @@ const Session = (props) => {
key: SERVER_TYPES.REMOTE,
children: <ServerTabCustom {...props} />,
},
..._(visibleProviders).map((providerName) => {
..._.map(visibleProviders, (providerName) => {
const provider = CloudProviders[providerName];
if (!provider) {
return true;
}
return {
label: <div>{provider.tabhead()}</div>,
label: (
<Dropdown menu={getContextMenu(providerName)} trigger={['contextMenu']}>
<div onContextMenu={(e) => handleContextMenu(e)}>{provider.tabhead()}</div>
</Dropdown>
),
key: providerName,
children: provider.tab(props),
};
Expand All @@ -129,8 +168,8 @@ const Session = (props) => {
</div>

<Tabs
activeKey={tabKey}
onChange={switchTabs}
activeKey={activeTab}
onChange={handleTabChange}
className={SessionStyles.scrollingTabCont}
items={[
{
Expand All @@ -149,7 +188,7 @@ const Session = (props) => {
key: SESSION_BUILDER_TABS.SAVED_CAPS,
className: SessionStyles.scrollingTab,
disabled: savedSessions.length === 0,
children: <SavedSessions {...props} />,
children: <SavedSessions {...props} handleSwitchTabs={handleSwitchTabs} />,
},
{
label: t('Attach to Session'),
Expand Down