mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-06-08 13:37:29 +01:00
resolve the copilot suggestions
This commit is contained in:
Bikram Choudhury
@@ -187,7 +187,7 @@ export class DocumentsTabV2 extends TabsBase {
|
||||
partitionKey: this.partitionKey,
|
||||
documentIds: ko.observableArray<DocumentId>([]),
|
||||
tabKind: ViewModels.CollectionTabKind.Documents,
|
||||
title: "Items",
|
||||
title: this.tabTitle(),
|
||||
collection: this.collection,
|
||||
node: this.collection,
|
||||
tabPath: `${this.collection.databaseId}>${this.collection.id()}>Documents`,
|
||||
|
||||
+83
-85
@@ -87,95 +87,93 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
|
||||
focusTab.current.focus();
|
||||
}
|
||||
}, [active]);
|
||||
const liElement = (
|
||||
<li
|
||||
data-test={`TabNav:${tab !== undefined ? tab.tabId : ReactTabKind[tabKind!]}`}
|
||||
onMouseOver={() => setHovering(true)}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
className={active ? "active tabList" : "tabList"}
|
||||
style={active ? { fontWeight: "bolder" } : {}}
|
||||
role="presentation"
|
||||
>
|
||||
<span className="tabNavContentContainer">
|
||||
<div className="tab_Content">
|
||||
<TooltipHost content={useObservable(tab?.tabPath || ko.observable(""))}>
|
||||
<span
|
||||
className="contentWrapper"
|
||||
onClick={() => {
|
||||
if (tab) {
|
||||
tab.onTabClick();
|
||||
} else if (tabKind !== undefined) {
|
||||
useTabs.getState().activateReactTab(tabKind);
|
||||
}
|
||||
}}
|
||||
onKeyPress={({ nativeEvent: e }) => {
|
||||
if (tab) {
|
||||
tab.onKeyPressActivate(undefined, e);
|
||||
} else if (tabKind !== undefined) {
|
||||
onKeyPressReactTab(e, tabKind);
|
||||
}
|
||||
}}
|
||||
aria-selected={active}
|
||||
aria-expanded={active}
|
||||
aria-controls={tabId}
|
||||
tabIndex={0}
|
||||
role="tab"
|
||||
ref={focusTab}
|
||||
>
|
||||
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
|
||||
{useObservable(tab?.isExecutionError || ko.observable(false)) && (
|
||||
<ErrorIcon tab={tab} active={active} />
|
||||
)}
|
||||
{useObservable(tab?.isExecutionWarning || ko.observable(false)) && (
|
||||
<WarningIcon tab={tab} active={active} />
|
||||
)}
|
||||
{isTabExecuting(tab, tabKind) && (
|
||||
<Spinner
|
||||
size={SpinnerSize.small}
|
||||
styles={{
|
||||
circle: {
|
||||
borderTopColor: "var(--colorNeutralForeground1)",
|
||||
borderLeftColor: "var(--colorNeutralForeground1)",
|
||||
borderBottomColor: "var(--colorNeutralForeground1)",
|
||||
borderRightColor: "var(--colorNeutralBackground1)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isQueryErrorThrown(tab, tabKind) && (
|
||||
<TooltipHost content="Error">
|
||||
<img
|
||||
src={errorQuery}
|
||||
alt="Error"
|
||||
style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
|
||||
/>
|
||||
</TooltipHost>
|
||||
)}
|
||||
</span>
|
||||
<span className="tabNavText">{tabTitle}</span>
|
||||
</span>
|
||||
</TooltipHost>
|
||||
<span className="tabIconSection">
|
||||
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} ariaLabel={tabTitle} />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
|
||||
if (!tab?.canDuplicate()) {
|
||||
return liElement;
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu openOnContext>
|
||||
<MenuTrigger disableButtonEnhancement>
|
||||
<li
|
||||
data-test={`TabNav:${tab !== undefined ? tab.tabId : ReactTabKind[tabKind!]}`}
|
||||
onMouseOver={() => setHovering(true)}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
className={active ? "active tabList" : "tabList"}
|
||||
style={active ? { fontWeight: "bolder" } : {}}
|
||||
role="presentation"
|
||||
>
|
||||
<span className="tabNavContentContainer">
|
||||
<div className="tab_Content">
|
||||
<TooltipHost content={useObservable(tab?.tabPath || ko.observable(""))}>
|
||||
<span
|
||||
className="contentWrapper"
|
||||
onClick={() => {
|
||||
if (tab) {
|
||||
tab.onTabClick();
|
||||
} else if (tabKind !== undefined) {
|
||||
useTabs.getState().activateReactTab(tabKind);
|
||||
}
|
||||
}}
|
||||
onKeyPress={({ nativeEvent: e }) => {
|
||||
if (tab) {
|
||||
tab.onKeyPressActivate(undefined, e);
|
||||
} else if (tabKind !== undefined) {
|
||||
onKeyPressReactTab(e, tabKind);
|
||||
}
|
||||
}}
|
||||
aria-selected={active}
|
||||
aria-expanded={active}
|
||||
aria-controls={tabId}
|
||||
tabIndex={0}
|
||||
role="tab"
|
||||
ref={focusTab}
|
||||
>
|
||||
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
|
||||
{useObservable(tab?.isExecutionError || ko.observable(false)) && (
|
||||
<ErrorIcon tab={tab} active={active} />
|
||||
)}
|
||||
{useObservable(tab?.isExecutionWarning || ko.observable(false)) && (
|
||||
<WarningIcon tab={tab} active={active} />
|
||||
)}
|
||||
{isTabExecuting(tab, tabKind) && (
|
||||
<Spinner
|
||||
size={SpinnerSize.small}
|
||||
styles={{
|
||||
circle: {
|
||||
borderTopColor: "var(--colorNeutralForeground1)",
|
||||
borderLeftColor: "var(--colorNeutralForeground1)",
|
||||
borderBottomColor: "var(--colorNeutralForeground1)",
|
||||
borderRightColor: "var(--colorNeutralBackground1)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isQueryErrorThrown(tab, tabKind) && (
|
||||
<TooltipHost content="Error">
|
||||
<img
|
||||
src={errorQuery}
|
||||
alt="Error"
|
||||
style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
|
||||
/>
|
||||
</TooltipHost>
|
||||
)}
|
||||
</span>
|
||||
<span className="tabNavText">{tabTitle}</span>
|
||||
</span>
|
||||
</TooltipHost>
|
||||
<span className="tabIconSection">
|
||||
<CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} ariaLabel={tabTitle} />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</MenuTrigger>
|
||||
<MenuTrigger disableButtonEnhancement>{liElement}</MenuTrigger>
|
||||
<MenuPopover>
|
||||
<MenuList>
|
||||
{tab?.canDuplicate() && (
|
||||
<MenuItem onClick={() => tab.duplicateTab()}>{t(Keys.tabs.tabMenu.duplicateTab)}</MenuItem>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind);
|
||||
}}
|
||||
>
|
||||
{t(Keys.tabs.tabMenu.closeTab)}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => tab.duplicateTab()}>{t(Keys.tabs.tabMenu.duplicateTab)}</MenuItem>
|
||||
<MenuItem onClick={() => tab.onCloseTabButtonClick()}>{t(Keys.tabs.tabMenu.closeTab)}</MenuItem>
|
||||
</MenuList>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
|
||||
@@ -77,15 +77,13 @@ test("Duplicate Query tab preserves query text in new tab", async () => {
|
||||
expect(editorText).toContain("duplicate-query-test");
|
||||
});
|
||||
|
||||
test("Duplicate tab menu item is not shown for the Home tab", async () => {
|
||||
// The Home tab (ReactTabKind) is never duplicable
|
||||
test("Right-click context menu does not appear for the Home tab", async () => {
|
||||
// The Home tab (ReactTabKind) is never duplicable — no context menu should appear
|
||||
await explorer.tabNavHeader("Home").click({ button: "right" });
|
||||
|
||||
// "Close tab" should always appear
|
||||
await expect(explorer.tabContextMenuItem("Close tab")).toBeVisible();
|
||||
|
||||
// "Duplicate tab" must NOT appear
|
||||
// Neither menu item should be visible
|
||||
await expect(explorer.tabContextMenuItem("Duplicate tab")).not.toBeVisible();
|
||||
await expect(explorer.tabContextMenuItem("Close tab")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("Close tab from right-click menu closes the tab", async () => {
|
||||
|
||||
Reference in New Issue
Block a user