diff --git a/less/Common/Constants.less b/less/Common/Constants.less index 50bdd7d91..58cedfdda 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -9,6 +9,7 @@ @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; @SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; +@GrayScale: "grayscale()"; @xSmallFontSize: 4px; @smallFontSize: 8px; diff --git a/less/resourceTree.less b/less/resourceTree.less index 39bced9da..31410ab32 100644 --- a/less/resourceTree.less +++ b/less/resourceTree.less @@ -19,6 +19,10 @@ .notebookHeader { font-size: 12px; } + + .clickDisabled { + pointer-events: none; + } } diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index d854278c2..40321286f 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -1084,11 +1084,13 @@ export default class Explorer { dataExplorerArea: Constants.Areas.Notebook, }); - if (isNotebookEnabled) { - await this.initNotebooks(userContext.databaseAccount); - } else if (this.notebookToImport) { - // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane - this._openSetupNotebooksPaneForQuickstart(); + if (!userContext.features.notebooksTemporarilyDown) { + if (isNotebookEnabled) { + await this.initNotebooks(userContext.databaseAccount); + } else if (this.notebookToImport) { + // if notebooks is not enabled but the user is trying to do a quickstart setup with notebooks, open the SetupNotebooksPane + this._openSetupNotebooksPaneForQuickstart(); + } } } } diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts index e3ad0044f..d6005b731 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts @@ -103,19 +103,25 @@ describe("CommandBarComponentButtonFactory tests", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel); - expect(enableNotebookBtn).toBeDefined(); - expect(enableNotebookBtn.disabled).toBe(false); - expect(enableNotebookBtn.tooltipText).toBe(""); + + //TODO: modify once notebooks are available + expect(enableNotebookBtn).toBeUndefined(); + //expect(enableNotebookBtn).toBeDefined(); + //expect(enableNotebookBtn.disabled).toBe(false); + //expect(enableNotebookBtn.tooltipText).toBe(""); }); it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel); - expect(enableNotebookBtn).toBeDefined(); - expect(enableNotebookBtn.disabled).toBe(true); - expect(enableNotebookBtn.tooltipText).toBe( - "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks." - ); + + //TODO: modify once notebooks are available + expect(enableNotebookBtn).toBeUndefined(); + //expect(enableNotebookBtn).toBeDefined(); + //expect(enableNotebookBtn.disabled).toBe(true); + //expect(enableNotebookBtn.tooltipText).toBe( + // "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks." + //); }); }); @@ -192,8 +198,11 @@ describe("CommandBarComponentButtonFactory tests", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel); expect(openMongoShellBtn).toBeDefined(); - expect(openMongoShellBtn.disabled).toBe(false); - expect(openMongoShellBtn.tooltipText).toBe(""); + + //TODO: modify once notebooks are available + expect(openMongoShellBtn.disabled).toBe(true); + //expect(openMongoShellBtn.disabled).toBe(false); + //expect(openMongoShellBtn.tooltipText).toBe(""); }); it("Notebooks is enabled and is available - button should be shown and enabled", () => { @@ -203,8 +212,11 @@ describe("CommandBarComponentButtonFactory tests", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel); expect(openMongoShellBtn).toBeDefined(); - expect(openMongoShellBtn.disabled).toBe(false); - expect(openMongoShellBtn.tooltipText).toBe(""); + + //TODO: modify once notebooks are available + expect(openMongoShellBtn.disabled).toBe(true); + //expect(openMongoShellBtn.disabled).toBe(false); + //expect(openMongoShellBtn.tooltipText).toBe(""); }); it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => { @@ -290,9 +302,13 @@ describe("CommandBarComponentButtonFactory tests", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel); + expect(openCassandraShellBtn).toBeDefined(); - expect(openCassandraShellBtn.disabled).toBe(false); - expect(openCassandraShellBtn.tooltipText).toBe(""); + + //TODO: modify once notebooks are available + expect(openCassandraShellBtn.disabled).toBe(true); + //expect(openCassandraShellBtn.disabled).toBe(false); + //expect(openCassandraShellBtn.tooltipText).toBe(""); }); it("Notebooks is enabled and is available - button should be shown and enabled", () => { @@ -302,8 +318,11 @@ describe("CommandBarComponentButtonFactory tests", () => { const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState); const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel); expect(openCassandraShellBtn).toBeDefined(); - expect(openCassandraShellBtn.disabled).toBe(false); - expect(openCassandraShellBtn.tooltipText).toBe(""); + + //TODO: modify once notebooks are available + expect(openCassandraShellBtn.disabled).toBe(true); + //expect(openCassandraShellBtn.disabled).toBe(false); + //expect(openCassandraShellBtn.tooltipText).toBe(""); }); }); diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx index f1c0afc92..623c8250d 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx @@ -67,9 +67,8 @@ export function createStaticCommandBarButtons( newCollectionBtn.children.push(newDatabaseBtn); } - buttons.push(createDivider()); - if (useNotebook.getState().isNotebookEnabled) { + buttons.push(createDivider()); const notebookButtons: CommandButtonComponentProps[] = []; const newNotebookButton = createNewNotebookButton(container); @@ -110,7 +109,8 @@ export function createStaticCommandBarButtons( buttons.push(btn); }); } else { - if (!isRunningOnNationalCloud()) { + if (!isRunningOnNationalCloud() && !userContext.features.notebooksTemporarilyDown) { + buttons.push(createDivider()); buttons.push(createEnableNotebooksButton(container)); } } diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index 6403b4ed9..748657816 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -22,6 +22,13 @@ import { MemoryTracker } from "./MemoryTrackerComponent"; export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => { const buttonHeightPx = StyleConstants.CommandBarButtonHeight; + const getFilter = (isDisabled: boolean): string => { + if (isDisabled) { + return StyleConstants.GrayScale; + } + return undefined; + }; + return btns .filter((btn) => btn) .map( @@ -37,6 +44,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol style: { width: StyleConstants.CommandBarIconWidth, // 16 alignSelf: btn.iconName ? "baseline" : undefined, + filter: getFilter(btn.disabled), }, imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined, iconName: btn.iconName, @@ -123,8 +131,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol width: 12, paddingLeft: 1, paddingTop: 6, + filter: getFilter(btn.disabled), + }, + imageProps: { + src: ChevronDownIcon, + alt: btn.iconAlt, }, - imageProps: { src: ChevronDownIcon, alt: btn.iconAlt }, }; } diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx index f6f05bde2..172c9caf9 100644 --- a/src/Explorer/Tree/ResourceTree.tsx +++ b/src/Explorer/Tree/ResourceTree.tsx @@ -145,6 +145,7 @@ export const ResourceTree: React.FC = ({ container }: Resourc const buildNotebooksTemporarilyDownTree = (): TreeNode => { return { label: Notebook.temporarilyDownMsg, + className: "clickDisabled", }; };