Properly handle activetab

This commit is contained in:
Laurent Nguyen 2024-05-01 15:43:50 +02:00
parent b8cbd77069
commit 48b3e05dee

View File

@ -64,10 +64,6 @@ export class DocumentsTabV2 extends TabsBase {
} }
public render(): JSX.Element { public render(): JSX.Element {
if (!this.isActive) {
return <></>;
}
return ( return (
<DocumentsTabComponent <DocumentsTabComponent
isPreferredApiMongoDB={userContext.apiType === "Mongo"} isPreferredApiMongoDB={userContext.apiType === "Mongo"}
@ -79,6 +75,7 @@ export class DocumentsTabV2 extends TabsBase {
resourceTokenPartitionKey={this.resourceTokenPartitionKey} resourceTokenPartitionKey={this.resourceTokenPartitionKey}
onExecutionErrorChange={(isExecutionError: boolean) => this.isExecutionError(isExecutionError)} onExecutionErrorChange={(isExecutionError: boolean) => this.isExecutionError(isExecutionError)}
onIsExecutingChange={(isExecuting: boolean) => this.isExecuting(isExecuting)} onIsExecutingChange={(isExecuting: boolean) => this.isExecuting(isExecuting)}
isTabActive={this.isActive()}
/> />
); );
} }
@ -370,10 +367,10 @@ const getTabsButtons = ({
return buttons; return buttons;
}; };
const updateNavbarWithTabsButtons = (dependencies: ButtonsDependencies): void => { const updateNavbarWithTabsButtons = (isTabActive: boolean, dependencies: ButtonsDependencies): void => {
// if (this.isActive()) { if (isTabActive) {
useCommandBar.getState().setContextButtons(getTabsButtons(dependencies)); useCommandBar.getState().setContextButtons(getTabsButtons(dependencies));
// } }
}; };
const getNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({ const getNewDocumentButtonState = (editorState: ViewModels.DocumentExplorerState) => ({
@ -436,6 +433,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
resourceTokenPartitionKey?: string; resourceTokenPartitionKey?: string;
onExecutionErrorChange: (isExecutionError: boolean) => void; onExecutionErrorChange: (isExecutionError: boolean) => void;
onIsExecutingChange: (isExecuting: boolean) => void; onIsExecutingChange: (isExecuting: boolean) => void;
isTabActive: boolean;
}> = ({ }> = ({
isPreferredApiMongoDB, isPreferredApiMongoDB,
documentIds: _documentIds, documentIds: _documentIds,
@ -446,6 +444,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
resourceTokenPartitionKey, resourceTokenPartitionKey,
onExecutionErrorChange, onExecutionErrorChange,
onIsExecutingChange, onIsExecutingChange,
isTabActive,
}) => { }) => {
const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true); const [isFilterCreated, setIsFilterCreated] = useState<boolean>(true);
const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false); const [isFilterExpanded, setIsFilterExpanded] = useState<boolean>(false);
@ -569,7 +568,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
} }
updateNavbarWithTabsButtons({ updateNavbarWithTabsButtons(isTabActive, {
_collection, _collection,
selectedRows, selectedRows,
editorState, editorState,
@ -897,7 +896,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
// TODO Put whatever the buttons callback use in the dependency array: find a better way to maintain // TODO Put whatever the buttons callback use in the dependency array: find a better way to maintain
useEffect( useEffect(
() => () =>
updateNavbarWithTabsButtons({ updateNavbarWithTabsButtons(isTabActive, {
_collection, _collection,
selectedRows, selectedRows,
editorState, editorState,
@ -920,6 +919,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
onSaveExistingDocumentClick, onSaveExistingDocumentClick,
onRevertExistingDocumentClick, onRevertExistingDocumentClick,
onDeleteExistingDocumentsClick, onDeleteExistingDocumentsClick,
isTabActive,
], ],
); );
@ -1691,12 +1691,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
<div <div
className="tab-pane active" className="tab-pane active"
/* data-bind=" /* data-bind="
setTemplateReady: true, setTemplateReady: true,
attr:{ attr:{
id: tabId id: tabId
}, },
visible: isActive" visible: isActive"
*/ */
role="tabpanel" role="tabpanel"
style={{ display: "flex" }} style={{ display: "flex" }}
> >
@ -1789,9 +1789,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
onClick={() => refreshDocumentsGrid(true)} onClick={() => refreshDocumentsGrid(true)}
disabled={!applyFilterButton.enabled} disabled={!applyFilterButton.enabled}
/* data-bind=" /* data-bind="
click: refreshDocumentsGrid.bind($data, true), click: refreshDocumentsGrid.bind($data, true),
enable: applyFilterButton.enabled" enable: applyFilterButton.enabled"
*/ */
aria-label="Apply filter" aria-label="Apply filter"
tabIndex={0} tabIndex={0}
> >
@ -1804,9 +1804,9 @@ const DocumentsTabComponent: React.FunctionComponent<{
style={filterButtonStyle} style={filterButtonStyle}
appearance="primary" appearance="primary"
/* data-bind=" /* data-bind="
visible: !isPreferredApiMongoDB && isExecuting, visible: !isPreferredApiMongoDB && isExecuting,
click: onAbortQueryClick" click: onAbortQueryClick"
*/ */
aria-label="Cancel Query" aria-label="Cancel Query"
onClick={() => queryAbortController.abort()} onClick={() => queryAbortController.abort()}
tabIndex={0} tabIndex={0}