From 8dd25714441c3f8a2e0799aa5512d316a68dfefa Mon Sep 17 00:00:00 2001 From: Sakshi Gupta Date: Wed, 23 Apr 2025 18:52:28 +0530 Subject: [PATCH] updated tabs , sidebar , splas screen --- less/documentDB.less | 144 ++--- less/documentDBFabric.less | 56 +- less/tree.less | 444 ++++++++-------- src/Explorer/Sidebar.tsx | 1 - src/Explorer/SplashScreen/SplashScreen.less | 298 +++++------ src/Explorer/SplashScreen/SplashScreen.tsx | 500 ++++++++++-------- .../SplashScreen/SplashScreenButton.tsx | 52 +- src/Explorer/Tabs/Tabs.tsx | 23 +- src/Main.tsx | 54 +- src/hooks/useTabs.ts | 4 +- 10 files changed, 865 insertions(+), 711 deletions(-) diff --git a/less/documentDB.less b/less/documentDB.less index dc59733fe..b7d0982a9 100644 --- a/less/documentDB.less +++ b/less/documentDB.less @@ -1772,9 +1772,9 @@ input::-webkit-calendar-picker-indicator { .paddingspan4 { padding-top: 20px; - padding-left: 20px; color: white; - font-size: 14px; + padding-left: 25px; + padding-right: 25px; } .closebtnn { @@ -1914,7 +1914,8 @@ input::-webkit-calendar-picker-indicator::after { } .nav-tabs-margin { - background-color: #f2f2f2; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); .nav-tabs { display: flex; @@ -1922,11 +1923,19 @@ input::-webkit-calendar-picker-indicator::after { align-items: flex-end; height: 100%; margin-bottom: -0.5px; + // border-bottom: 1px solid var(--colorNeutralStroke1); li { - // Override the bootstrap defaults here to align with our layout constants. margin-bottom: 0px; height: 32px; + + &:hover { + background-color: var(--colorNeutralBackground1Hover); + } + + &:active { + background-color: var(--colorNeutralBackground1Pressed); + } } } } @@ -1940,8 +1949,20 @@ input::-webkit-calendar-picker-indicator::after { .nav.nav-tabs.qslevel > li > a:hover { border: none; border-radius: 0; - background-color: transparent !important; + background-color: var(--colorNeutralBackground1Selected) !important; border-color: transparent; + color: var(--colorNeutralForeground1); +} + +.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover { + background-color: var(--colorNeutralBackground1Hover); + // border-bottom: 2px solid var(--colorNeutralStroke1); +} + +.nav-tabs > li.active > .tabNavContentContainer > .tab_Content, +.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover { + background-color: var(--colorNeutralBackground1Selected); + // border-bottom: 2px solid var(--colorCompoundBrandBackground); } .numbersize { @@ -2375,7 +2396,9 @@ a:link { height: 100%; display: flex; flex-direction: column; - min-width: 0; // This prevents it to grow past the parent's width if its content is too wide + min-width: 0; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .tabs { @@ -2631,9 +2654,10 @@ a:link { } .tabPanesContainer { - display: flex; flex-grow: 1; - overflow: hidden; + overflow-y: scroll; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .tabs-container { @@ -2655,11 +2679,11 @@ a:link { .nav-tabs > li.active > .tabNavContentContainer, .nav-tabs > li.active > .tabNavContentContainer:focus, .nav-tabs > li.active > .tabNavContentContainer:hover { - color: #555; + color: var(--colorNeutralForeground1); cursor: default; - background-color: @BaseLight; - border-color: @BaseMedium; - border-bottom-color: @BaseLight; + background-color: var(--colorNeutralBackground1Selected); + border-color: var(--colorNeutralStroke1); + // border-bottom-color: var(--colorCompoundBrandBackground); border-style: solid; border-width: 1px; height: @ActiveTabHeight; @@ -2668,7 +2692,7 @@ a:link { .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText { font-weight: bolder; - border-bottom: 2px solid rgba(0, 120, 212, 1); + border-bottom: 2px solid var(--colorCompoundBrandBackground); } .nav-tabs > li.active:focus > .tabNavContentContainer { @@ -2681,7 +2705,7 @@ a:link { justify-content: space-between; border-radius: 2px 2px 0 0; padding: @DefaultSpace 0px @SmallSpace 0px; - color: @BaseHigh; + color: var(--colorNeutralForeground1); width: @TabsWidth; text-align: center; position: relative; @@ -2689,75 +2713,29 @@ a:link { &:hover { text-decoration: none; - background-color: @BaseMediumLow; - border-color: @BaseMediumLow; + background-color: var(--colorNeutralBackground1Hover); + border-color: transparent; } &:active { - background-color: @BaseMediumLow; + background-color: var(--colorNeutralBackground1Pressed); } .tab_Content { .flex-display(); width: @TabsWidth; - border-right: @ButtonBorderWidth solid @BaseMedium; + border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1); white-space: nowrap; + color: var(--colorNeutralForeground1); + .contentWrapper { .flex-display(); width: @ContentWrapper; - .statusIconContainer { - width: @StatusIconContainerSize; - height: @StatusIconContainerSize; - margin-left: @SmallSpace; - display: inline-flex; - - .errorIconContainer { - width: @ErrorIconContainer; - height: @ErrorIconContainer; - margin-top: 1px; - - .errorIcon { - width: @ErrorIconWidth; - height: @LoadingErrorIconSize; - background-image: url(../images/error_no_outline.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 3px; - display: block; - margin: 1px 0px 0px 6px; - } - } - - .errorIconContainer.actionsEnabled { - &:hover { - .hover(); - } - - &:focus { - .focus(); - } - - &:active { - .active(); - } - } - - .errorIconContainer[tabindex]:active { - outline: none; - } - - .loadingIcon { - width: @LoadingErrorIconSize; - height: @LoadingErrorIconSize; - margin: 0px 0px @SmallSpace @SmallSpace; - } - } - .tabNavText { margin-left: @SmallSpace; margin-right: 2px; - color: @BaseDark; + color: var(--colorNeutralForeground1); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -2768,21 +2746,36 @@ a:link { .tabIconSection { width: 29px; position: relative; - padding-top: 2px; .cancelButton { padding: 0px @SmallSpace 0px @SmallSpace; + color: var(--colorNeutralForeground1); + width: 16px; + height: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; &:hover { - .hover(); + background-color: var(--colorNeutralBackground1Hover); + color: var(--colorNeutralForeground1); } &:focus { - .focus(); + background-color: var(--colorNeutralBackground1Pressed); + color: var(--colorNeutralForeground1); } &:active { - .active(); + background-color: var(--colorNeutralBackground1Pressed); + color: var(--colorNeutralForeground1); + } + + &::before { + content: "×"; + font-size: 16px; + line-height: 1; } } } @@ -3136,3 +3129,12 @@ a:link { .sidebarContainer { height: 100%; } + +.close-Icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + cursor: pointer; +} diff --git a/less/documentDBFabric.less b/less/documentDBFabric.less index 900535700..198d3ec6f 100644 --- a/less/documentDBFabric.less +++ b/less/documentDBFabric.less @@ -37,12 +37,40 @@ a:focus { } .tabsManagerContainer { - background-color: #ffffff; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .nav-tabs-margin { padding-top: 5px; - background-color: #ffffff; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); +} + +.nav-tabs { + border-bottom: 1px solid var(--colorNeutralStroke1); + color: var(--colorNeutralForeground1); +} + +.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover { + border-bottom: 2px solid var(--colorNeutralStroke1); + background-color: var(--colorNeutralBackground1Hover); +} + +.nav-tabs > li.active > .tabNavContentContainer > .tab_Content, +.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover { + border-bottom: 2px solid var(--colorCompoundBrandBackground); + background-color: var(--colorNeutralBackground1Selected); +} + +.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText { + border-bottom: 0px none transparent; + color: var(--colorNeutralForeground1); +} + +.tabPanesContainer { + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } .commandBarContainer { @@ -67,24 +95,12 @@ a:focus { } } -.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover { - border-bottom: 2px solid #e0e0e0; -} - -.nav-tabs > li.active > .tabNavContentContainer > .tab_Content, -.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover { - border-bottom: 2px solid @FabricAccentMedium; -} - -.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText { - border-bottom: 0px none transparent; -} - .tabNavContentContainer { padding: @SmallSpace 0px @SmallSpace 0px; + color: var(--colorNeutralForeground1); &:hover { - background-color: transparent; + background-color: var(--colorNeutralBackground1Hover); border-color: transparent; } @@ -93,6 +109,7 @@ a:focus { margin: 0px @SmallSpace 0px @SmallSpace; width: calc(@TabsWidth - (@SmallSpace * 2)); padding-bottom: @SmallSpace; + color: var(--colorNeutralForeground1); .contentWrapper { .statusIconContainer { @@ -103,17 +120,18 @@ a:focus { .tabIconSection { .cancelButton { padding: 0px 0px 0px @SmallSpace; + color: var(--colorNeutralForeground1); &:hover { - background-color: transparent; + background-color: var(--colorNeutralBackground1Hover); } &:focus { - background-color: transparent; + background-color: var(--colorNeutralBackground1Pressed); } &:active { - background-color: transparent; + background-color: var(--colorNeutralBackground1Pressed); } } } diff --git a/less/tree.less b/less/tree.less index ed0fbf71f..75cae747d 100644 --- a/less/tree.less +++ b/less/tree.less @@ -1,270 +1,270 @@ -@import "./Common/Constants"; +// @import "./Common/Constants"; -.resourceTree { - height: 100%; - flex: 0 0 auto; - .main { - height: 100%; - } -} +// .resourceTree { +// height: 100%; +// flex: 0 0 auto; +// .main { +// height: 100%; +// } +// } -.resourceTreeScroll { - height: 100%; - display: flex; - overflow-y: auto; - overflow-x: hidden; - padding-right: 10px; -} +// .resourceTreeScroll { +// height: 100%; +// display: flex; +// overflow-y: auto; +// overflow-x: hidden; +// padding-right: 10px; +// } -.userSelectNone { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} +// .userSelectNone { +// -webkit-user-select: none; +// -moz-user-select: none; +// -ms-user-select: none; +// } -.treeHovermargin { - margin-left: 16px; -} +// .treeHovermargin { +// margin-left: 16px; +// } -.highlight { - padding: @SmallSpace 2px; - outline: 0; +// .highlight { +// padding: @SmallSpace 2px; +// outline: 0; - &:hover { - .hover(); - } +// &:hover { +// .hover(); +// } - &:active { - .active(); - } +// &:active { +// .active(); +// } - &:focus { - .focus(); - } -} +// &:focus { +// .focus(); +// } +// } -.contextmenushowing { - background-color: #eee; -} +// .contextmenushowing { +// background-color: #eee; +// } -.collectionstree { - width: 100%; - margin-top: @DefaultSpace; +// .collectionstree { +// width: 100%; +// margin-top: @DefaultSpace; - .databaseList { - list-style-type: none; - padding-left: 0px; +// .databaseList { +// list-style-type: none; +// padding-left: 0px; - .collectionList { - padding-left: (2 * @MediumSpace); - } +// .collectionList { +// padding-left: (2 * @MediumSpace); +// } - .collectionChildList { - padding-left: @LargeSpace; - } +// .collectionChildList { +// padding-left: @LargeSpace; +// } - .databaseDocuments { - padding-left: (5 * @MediumSpace); - } - } -} +// .databaseDocuments { +// padding-left: (5 * @MediumSpace); +// } +// } +// } -.pointerCursor { - cursor: pointer; -} +// .pointerCursor { +// cursor: pointer; +// } -.menuEllipsis { - padding-right: 6px; - font-weight: bold; - font-size: 18px; - position: relative; - top: -5px; - left: 0px; - float: right; - display: none; - padding-left: 6px !important; - line-height: @TreeLineHeight; -} +// .menuEllipsis { +// padding-right: 6px; +// font-weight: bold; +// font-size: 18px; +// position: relative; +// top: -5px; +// left: 0px; +// float: right; +// display: none; +// padding-left: 6px !important; +// line-height: @TreeLineHeight; +// } -.databaseMenu { - .flex-display(); -} +// .databaseMenu { +// .flex-display(); +// } -.databaseMenu:hover .menuEllipsis, -.databaseMenu:focus .menuEllipsis { - display: block; -} +// .databaseMenu:hover .menuEllipsis, +// .databaseMenu:focus .menuEllipsis { +// display: block; +// } -.databaseCollChildTextOverflow { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - flex: 1; -} +// .databaseCollChildTextOverflow { +// text-overflow: ellipsis; +// white-space: nowrap; +// overflow: hidden; +// flex: 1; +// } -.collectionMenu { - .flex-display(); -} +// .collectionMenu { +// .flex-display(); +// } -.collectionMenu:hover .menuEllipsis, -.collectionMenu:focus .menuEllipsis { - display: block; -} +// .collectionMenu:hover .menuEllipsis, +// .collectionMenu:focus .menuEllipsis { +// display: block; +// } -.documentsMenu:hover .menuEllipsis, -.documentsMenu:focus .menuEllipsis { - display: block; -} +// .documentsMenu:hover .menuEllipsis, +// .documentsMenu:focus .menuEllipsis { +// display: block; +// } -.treeChildMenu { - display: flex; -} +// .treeChildMenu { +// display: flex; +// } -.storedProcedureMenu:hover .menuEllipsis, -.storedProcedureMenu:focus .menuEllipsis { - display: block; -} +// .storedProcedureMenu:hover .menuEllipsis, +// .storedProcedureMenu:focus .menuEllipsis { +// display: block; +// } -.childMenu { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-left: (6 * @MediumSpace); - width: 100%; -} +// .childMenu { +// overflow: hidden; +// text-overflow: ellipsis; +// white-space: nowrap; +// padding-left: (6 * @MediumSpace); +// width: 100%; +// } -.storedChildMenu:hover .menuEllipsis, -.storedChildMenu:focus .menuEllipsis { - display: block; -} +// .storedChildMenu:hover .menuEllipsis, +// .storedChildMenu:focus .menuEllipsis { +// display: block; +// } -.contextmenu6 { - top: -29px; -} +// .contextmenu6 { +// top: -29px; +// } -.userDefinedMenu:hover .contextmenu6 { - display: block; -} +// .userDefinedMenu:hover .contextmenu6 { +// display: block; +// } -.userDefinedchildMenu:hover .menuEllipsis, -.userDefinedchildMenu:focus .menuEllipsis { - display: block; -} +// .userDefinedchildMenu:hover .menuEllipsis, +// .userDefinedchildMenu:focus .menuEllipsis { +// display: block; +// } -.triggersMenu:hover .menuEllipsis, -.triggersMenu:focus .menuEllipsis { - display: block; -} +// .triggersMenu:hover .menuEllipsis, +// .triggersMenu:focus .menuEllipsis { +// display: block; +// } -.triggersChildMenu:hover .menuEllipsis, -.triggersChildMenu:focus .menuEllipsis { - display: block; -} +// .triggersChildMenu:hover .menuEllipsis, +// .triggersChildMenu:focus .menuEllipsis { +// display: block; +// } -.databaseId { - font-size: 14px; -} +// .databaseId { +// font-size: 14px; +// } -.storedUdfTriggerMenu { - padding-left: 0px; -} +// .storedUdfTriggerMenu { +// padding-left: 0px; +// } -.collectionstree img { - width: 16px; - height: 16px; - vertical-align: text-top; -} +// .collectionstree img { +// width: 16px; +// height: 16px; +// vertical-align: text-top; +// } -img.collectionsTreeCollapseExpand { - width: 10px; - height: 10px; - vertical-align: middle; - margin-bottom: 5px; -} +// img.collectionsTreeCollapseExpand { +// width: 10px; +// height: 10px; +// vertical-align: middle; +// margin-bottom: 5px; +// } -.collapsed::before { - content: "\23F5"; - margin-left: 0px; - font-size: 15px; -} +// .collapsed::before { +// content: "\23F5"; +// margin-left: 0px; +// font-size: 15px; +// } -.expanded::before { - content: "\23F7"; - margin-left: 0px; - font-size: 15px; -} +// .expanded::before { +// content: "\23F7"; +// margin-left: 0px; +// font-size: 15px; +// } -.collectionMenuChildren { - padding-left: 42px; -} +// .collectionMenuChildren { +// padding-left: 42px; +// } -.main-nav { - width: 100vh; - height: 40px; - background: white; - transform-origin: left top; - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform: rotate(-90deg) translateX(-100%); - -webkit-transform: rotate(-90deg) translateX(-100%); - -ms-transform: rotate(-90deg) translateX(-100%); - border-bottom: 1px solid #ccc; -} +// .main-nav { +// width: 100vh; +// height: 40px; +// background: white; +// transform-origin: left top; +// -webkit-transform-origin: left top; +// -ms-transform-origin: left top; +// transform: rotate(-90deg) translateX(-100%); +// -webkit-transform: rotate(-90deg) translateX(-100%); +// -ms-transform: rotate(-90deg) translateX(-100%); +// border-bottom: 1px solid #ccc; +// } -.main-nav-img { - width: 16px; - height: 16px; - margin: -32px 0 0 0; - transform: rotate(-90deg) translateX(-100%); - -webkit-transform: rotate(-90deg) translateX(-100%); - -ms-transform: rotate(-90deg) translateX(-100%); -} +// .main-nav-img { +// width: 16px; +// height: 16px; +// margin: -32px 0 0 0; +// transform: rotate(-90deg) translateX(-100%); +// -webkit-transform: rotate(-90deg) translateX(-100%); +// -ms-transform: rotate(-90deg) translateX(-100%); +// } -.main-nav-img.main-nav-sub-img { - width: 16px; - height: 16px; - margin: 0px 0px 0 0; - transform: rotate(180deg) translateX(0%); - -webkit-transform: rotate(180deg) translateX(0%); - -ms-transform: rotate(180deg) translateX(0%); - position: absolute; - right: -8px; - top: 16px; -} +// .main-nav-img.main-nav-sub-img { +// width: 16px; +// height: 16px; +// margin: 0px 0px 0 0; +// transform: rotate(180deg) translateX(0%); +// -webkit-transform: rotate(180deg) translateX(0%); +// -ms-transform: rotate(180deg) translateX(0%); +// position: absolute; +// right: -8px; +// top: 16px; +// } -ul.nav { - margin: 0 auto; - margin-top: 0px; - margin-left: 0px; -} +// ul.nav { +// margin: 0 auto; +// margin-top: 0px; +// margin-left: 0px; +// } -.mini ul.nav li { - float: right; - line-height: 25px; - height: auto; - margin-top: 3px; -} +// .mini ul.nav li { +// float: right; +// line-height: 25px; +// height: auto; +// margin-top: 3px; +// } -.spancolchildstyle { - padding: 4px; -} +// .spancolchildstyle { +// padding: 4px; +// } -.contextmenubutton { - float: right; - display: none; -} +// .contextmenubutton { +// float: right; +// display: none; +// } -.highlight:hover > .contextmenubutton { - display: unset; -} +// .highlight:hover > .contextmenubutton { +// display: unset; +// } -.highlight:hover > .contextmenubutton::after { - content: "\2026"; - font-size: 12px; -} +// .highlight:hover > .contextmenubutton::after { +// content: "\2026"; +// font-size: 12px; +// } -.showEllipsis { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} +// .showEllipsis { +// text-overflow: ellipsis; +// white-space: nowrap; +// overflow: hidden; +// } diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx index c13619169..27aabe683 100644 --- a/src/Explorer/Sidebar.tsx +++ b/src/Explorer/Sidebar.tsx @@ -130,7 +130,6 @@ const useSidebarStyles = makeStyles({ treeContainer: { flex: 1, overflow: "auto", - paddingLeft: tokens.spacingHorizontalM, backgroundColor: tokens.colorNeutralBackground1, color: tokens.colorNeutralForeground1, }, diff --git a/src/Explorer/SplashScreen/SplashScreen.less b/src/Explorer/SplashScreen/SplashScreen.less index a8aa3b58d..f057ef062 100644 --- a/src/Explorer/SplashScreen/SplashScreen.less +++ b/src/Explorer/SplashScreen/SplashScreen.less @@ -1,178 +1,178 @@ -@import "../../../less/Common/Constants"; +// @import "../../../less/Common/Constants"; -.splashScreenContainer { - width: 100%; - overflow-y: auto; - overflow-x: hidden; +// .splashScreenContainer { +// width: 100%; +// overflow-y: scroll; +// overflow-x: hidden; - .splashScreen { - .flex-display(); - .flex-direction(); - text-align: left; - margin: auto; - padding-left: 21px; - padding-right: 16px; - max-width: 1168px; +// .splashScreen { +// .flex-display(); +// .flex-direction(); +// text-align: left; +// margin: auto; +// padding-left: 21px; +// padding-right: 16px; +// max-width: 1168px; - > .title { - position: relative; // To attach FeaturePanelLauncher as absolute - color: @BaseHigh; - font-size: 48px; - padding-left: 0px; - margin: 16px auto; - text-align: center; - } +// > .title { +// position: relative; // To attach FeaturePanelLauncher as absolute +// color: @BaseHigh; +// font-size: 48px; +// padding-left: 0px; +// margin: 16px auto; +// text-align: center; +// } - > .subtitle { - color: @BaseHigh; - font-size: 18px; - padding-left: 0px; - margin: 0px auto; - text-align: center; - } +// > .subtitle { +// color: @BaseHigh; +// font-size: 18px; +// padding-left: 0px; +// margin: 0px auto; +// text-align: center; +// } - .mainButtonsContainer { - .flex-display(); - text-align: center; - cursor: pointer; - margin: 40px auto; - width: 84%; +// .mainButtonsContainer { +// .flex-display(); +// text-align: center; +// cursor: pointer; +// margin: 40px auto; +// width: 84%; - > .mainButton { - min-width: 124px; - max-width: 296px; - padding: 32px 16px; - background-color: @BaseLight; - border: 1px solid #949494; - box-sizing: border-box; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 4px; +// > .mainButton { +// min-width: 124px; +// max-width: 296px; +// padding: 32px 16px; +// background-color: @BaseLight; +// border: 1px solid #949494; +// box-sizing: border-box; +// box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +// border-radius: 4px; - > .legendContainer { - margin-left: 16px; - text-align: left; +// > .legendContainer { +// margin-left: 16px; +// text-align: left; - .legend { - font-family: @SemiboldFont; - font-size: 18px; - } +// .legend { +// font-family: @SemiboldFont; +// font-size: 18px; +// } - .description { - font-size: 10px; - } +// .description { +// font-size: 10px; +// } - .newDescription { - font-size: 13px; - } - } - } +// .newDescription { +// font-size: 13px; +// } +// } +// } - > :nth-child(n + 2) { - margin-left: 32px; - } - } +// > :nth-child(n + 2) { +// margin-left: 32px; +// } +// } - .moreStuffContainer { - .flex-display(); - justify-content: space-between; +// .moreStuffContainer { +// .flex-display(); +// justify-content: space-between; - .moreStuffColumn { - flex-grow: 1; - flex-basis: 0; - min-width: 124px; - max-width: 296px; +// .moreStuffColumn { +// flex-grow: 1; +// flex-basis: 0; +// min-width: 124px; +// max-width: 296px; - > .title { - font-size: 18px; - font-family: @SemiboldFont; - color: @BaseDark; - padding: 0px; - margin-bottom: 16px; - } +// > .title { +// font-size: 18px; +// font-family: @SemiboldFont; +// color: @BaseDark; +// padding: 0px; +// margin-bottom: 16px; +// } - > ul { - list-style: none; - padding-left: 0px; - margin-bottom: 0px; +// > ul { +// list-style: none; +// padding-left: 0px; +// margin-bottom: 0px; - li { - padding: @DefaultSpace; - .flex-display(); - align-items: flex-start; +// li { +// padding: @DefaultSpace; +// .flex-display(); +// align-items: flex-start; - > img { - margin-right: @DefaultSpace; - width: 24px; - height: 24px; - } +// > img { +// margin-right: @DefaultSpace; +// width: 24px; +// height: 24px; +// } - .oneLineContent { - margin-top: 4px; - } +// .oneLineContent { +// margin-top: 4px; +// } - .description { - font-size: 10px; - color: @BaseMediumHigh; - } - } - } +// .description { +// font-size: 10px; +// color: @BaseMediumHigh; +// } +// } +// } - .tipContainer { - padding: 8px 16px; - width: 100%; - cursor: pointer; - .flex-display(); - .flex-direction(); +// .tipContainer { +// padding: 8px 16px; +// width: 100%; +// cursor: pointer; +// .flex-display(); +// .flex-direction(); - > .title { - color: @BaseDark; - padding: 0px; - font-size: 12px; - } - > .description { - color: @BaseDark; - } +// > .title { +// color: @BaseDark; +// padding: 0px; +// font-size: 12px; +// } +// > .description { +// color: @BaseDark; +// } - &:not(:hover):not(:focus) { - background-color: @BaseLow; - } - } +// &:not(:hover):not(:focus) { +// background-color: @BaseLow; +// } +// } - &.commonTasks { - li { - cursor: pointer; - } - } +// &.commonTasks { +// li { +// cursor: pointer; +// } +// } - &.tipsContainer { - li { - margin: 2px 0px; - } - } - } - } +// &.tipsContainer { +// li { +// margin: 2px 0px; +// } +// } +// } +// } - .focusable { - &:hover { - .hover(); - } +// .focusable { +// &:hover { +// .hover(); +// } - &:focus { - .focus(); - } +// &:focus { +// .focus(); +// } - &:active { - .active(); - } - } +// &:active { +// .active(); +// } +// } - .notebookSplashScreenItem { - padding: 12px 0 12px 12px; +// .notebookSplashScreenItem { +// padding: 12px 0 12px 12px; - .itemText { - margin-left: 12px; - font-family: @SemiboldFont; - } - } - } -} +// .itemText { +// margin-left: 12px; +// font-family: @SemiboldFont; +// } +// } +// } +// } diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx index 495bc03ee..bc5fff29e 100644 --- a/src/Explorer/SplashScreen/SplashScreen.tsx +++ b/src/Explorer/SplashScreen/SplashScreen.tsx @@ -11,6 +11,7 @@ import { TeachingBubbleContent, Text, } from "@fluentui/react"; +import { makeStyles, shorthands } from "@fluentui/react-components"; import { sendMessage } from "Common/MessageHandler"; import { MessageTypes } from "Contracts/ExplorerContracts"; import { TerminalKind } from "Contracts/ViewModels"; @@ -33,8 +34,7 @@ import CollectionIcon from "../../../images/tree-collection.svg"; import * as Constants from "../../Common/Constants"; import { userContext } from "../../UserContext"; import { getCollectionName } from "../../Utils/APITypeUtils"; -import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher"; -import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil"; +import { useTheme } from "../../hooks/useTheme"; import Explorer from "../Explorer"; import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity"; import { useNotebook } from "../Notebook/useNotebook"; @@ -55,70 +55,177 @@ export interface SplashScreenProps { explorer: Explorer; } -export class SplashScreen extends React.Component { - private readonly container: Explorer; - private subscriptions: Array<{ dispose: () => void }>; +const useStyles = makeStyles({ + splashScreenContainer: { + display: "flex", + flexDirection: "column", + alignItems: "center", + // justifyContent: "center", + minHeight: "100vh", + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", - constructor(props: SplashScreenProps) { - super(props); - this.container = props.explorer; - this.subscriptions = []; - } - - public componentWillUnmount(): void { - while (this.subscriptions.length) { - this.subscriptions.pop().dispose(); + }, + splashScreen: { + display: "flex", + // overflow: "scroll", + flexDirection: "column", + alignItems: "center", + textAlign: "left", + // ...shorthands.padding("40px") + }, + title: { + fontSize: "48px", + fontWeight: "500", + margin: "16px auto", + color: "var(--colorNeutralForeground1)" + }, + subtitle: { + fontSize: "18px", + marginBottom: "40px", + color: "var(--colorNeutralForeground2)" + }, + cardContainer: { + display: "grid", + gridTemplateColumns: "repeat(2, 1fr)", + gap: "16px", + width: "66%", + margin: "0 auto", + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, + card: { + display: "flex", + flexDirection: "column", + alignItems: "left", + ...shorthands.padding("32px", "16px"), + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + border: "1px solid var(--colorNeutralStroke1)", + borderRadius: "4px", + boxShadow: "var(--shadow4)", + cursor: "pointer", + minHeight: "150px", + "&:hover": { + backgroundColor: "var(--colorNeutralBackground1Hover)" } + }, + cardContent: { + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + marginLeft: "16px", + textAlign: "left", + color: "var(--colorNeutralForeground1)" + }, + cardTitle: { + fontSize: "18px", + fontWeight: "600", + color: "var(--colorNeutralForeground1)", + textAlign: "left", + marginBottom: "8px" + }, + cardDescription: { + fontSize: "13px", + color: "var(--colorNeutralForeground2)", + textAlign: "left" + }, + moreStuffContainer: { + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + gap: "32px", + width: "66%", + margin: "40px auto", + }, + moreStuffColumn: { + display: "flex", + flexDirection: "column", + // justifyContent:"space-between" + }, + columnTitle: { + fontSize: "20px", + fontWeight: "600", + marginBottom: "16px", + color: "var(--colorNeutralForeground1)" + }, + listItem: { + marginBottom: "26px", + }, + listItemTitle: { + fontSize: "14px", + color: "var(--colorBrandForegroundLink)", + "&:hover": { + color: "var(--colorBrandForegroundLink)" + } + }, + listItemSubtitle: { + fontSize: "13px", + color: "var(--colorNeutralForeground2)" } +}); - public componentDidMount(): void { - this.subscriptions.push( +export const SplashScreen: React.FC = ({ explorer }) => { + const styles = useStyles(); + const { isDarkMode } = useTheme(); + const container = explorer; + const subscriptions: Array<{ dispose: () => void }> = []; + + React.useEffect(() => { + subscriptions.push( { dispose: useNotebook.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.isNotebookEnabled, ), }, - { dispose: useSelectedNode.subscribe(() => this.setState({})) }, + { dispose: useSelectedNode.subscribe(() => setState({})) }, { dispose: useCarousel.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.showCoachMark, ), }, { dispose: usePostgres.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.showPostgreTeachingBubble, ), }, { dispose: usePostgres.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.showResetPasswordBubble, ), }, { dispose: useDatabases.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.sampleDataResourceTokenCollection, ), }, { dispose: useQueryCopilot.subscribe( - () => this.setState({}), + () => setState({}), (state) => state.copilotEnabled, ), }, ); - } - private clearMostRecent = (): void => { + return () => { + while (subscriptions.length) { + subscriptions.pop().dispose(); + } + }; + }, []); + + const [state, setState] = React.useState({}); + + const clearMostRecent = () => { MostRecentActivity.clear(userContext.databaseAccount?.name); - this.setState({}); + setState({}); }; - private getSplashScreenButtons = (): JSX.Element => { + const getSplashScreenButtons = (): JSX.Element => { if ( userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled && @@ -132,7 +239,7 @@ export class SplashScreen extends React.Component { title={"Launch quick start"} description={"Launch a quick start tutorial to get started with sample data"} onClick={() => { - this.container.onNewCollectionClicked({ isQuickstart: true }); + container.onNewCollectionClicked({ isQuickstart: true }); traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType }); }} /> @@ -141,7 +248,7 @@ export class SplashScreen extends React.Component { title={`New ${getCollectionName()}`} description={"Create a new container for storage and throughput"} onClick={() => { - this.container.onNewCollectionClicked(); + container.onNewCollectionClicked(); traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType }); }} /> @@ -177,7 +284,7 @@ export class SplashScreen extends React.Component { ); } - const mainItems = this.createMainItems(); + const mainItems = createMainItems(); return (
{userContext.apiType === "Postgres" && @@ -214,7 +321,7 @@ export class SplashScreen extends React.Component { className="mainButton focusable" key={`${item.title}`} onClick={item.onClick} - onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)} + onKeyPress={(event: React.KeyboardEvent) => onSplashScreenItemKeyPress(event, item.onClick)} tabIndex={0} role="button" > @@ -267,125 +374,7 @@ export class SplashScreen extends React.Component { ); }; - public render(): JSX.Element { - let title: string; - let subtitle: string; - - switch (userContext.apiType) { - case "Postgres": - title = "Welcome to Azure Cosmos DB for PostgreSQL"; - subtitle = "Get started with our sample datasets, documentation, and additional tools."; - break; - case "VCoreMongo": - title = "Welcome to Azure Cosmos DB for MongoDB (vCore)"; - subtitle = "Get started with our sample datasets, documentation, and additional tools."; - break; - default: - title = "Welcome to Azure Cosmos DB"; - subtitle = "Globally distributed, multi-model database service for any scale"; - } - - return ( -
-
-
-
-

- {title} - -

-
{subtitle}
- {this.getSplashScreenButtons()} - {useCarousel.getState().showCoachMark && ( - - { - useCarousel.getState().setShowCoachMark(false); - this.container.onNewCollectionClicked({ isQuickstart: true }); - }, - }} - secondaryButtonProps={{ - text: "Cancel", - onClick: () => useCarousel.getState().setShowCoachMark(false), - }} - onDismiss={() => useCarousel.getState().setShowCoachMark(false)} - > - You will be guided to create a sample container with sample data, then we will give you a tour of - data explorer. You can also cancel launching this tour and explore yourself - - - )} - {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? ( - - - - Next steps - - {this.getNextStepItems()} - - - - Tips & learn more - - {this.getTipsAndLearnMoreItems()} - - - - ) : ( -
-
-

Recents

- {this.getRecentItems()} -
-
-

Top 3 things you need to know

- {this.top3Items()} -
-
-

Learning Resources

- {this.getLearningResourceItems()} -
-
- )} -
-
-
-
- ); - } - - /** - * This exists to enable unit testing - */ - public createDataSampleUtil(): DataSamplesUtil { - return new DataSamplesUtil(this.container); - } - - /** - * public for testing purposes - */ - public createMainItems(): SplashScreenItem[] { + const createMainItems = (): SplashScreenItem[] => { const heroes: SplashScreenItem[] = []; if ( @@ -403,7 +392,7 @@ export class SplashScreen extends React.Component { if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") { useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart); } else { - this.container.onNewCollectionClicked({ isQuickstart: true }); + container.onNewCollectionClicked({ isQuickstart: true }); } traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType }); }, @@ -411,18 +400,18 @@ export class SplashScreen extends React.Component { heroes.push(launchQuickstartBtn); } - heroes.push(this.getShellCard()); - heroes.push(this.getThirdCard()); + heroes.push(getShellCard()); + heroes.push(getThirdCard()); return heroes; - } + }; - private getShellCard() { + const getShellCard = (): SplashScreenItem => { if (userContext.apiType === "Postgres") { return { iconSrc: PowerShellIcon, title: "PostgreSQL Shell", - description: "Create table and interact with data using PostgreSQL’s shell interface", - onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres), + description: "Create table and interact with data using PostgreSQL's shell interface", + onClick: () => container.openNotebookTerminal(TerminalKind.Postgres), }; } @@ -431,7 +420,7 @@ export class SplashScreen extends React.Component { iconSrc: PowerShellIcon, title: "Mongo Shell", description: "Create a collection and interact with data using MongoDB's shell interface", - onClick: () => this.container.openNotebookTerminal(TerminalKind.VCoreMongo), + onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo), }; } @@ -440,13 +429,13 @@ export class SplashScreen extends React.Component { title: `New ${getCollectionName()}`, description: "Create a new container for storage and throughput", onClick: () => { - this.container.onNewCollectionClicked(); + container.onNewCollectionClicked(); traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType }); }, }; - } + }; - private getThirdCard() { + const getThirdCard = (): SplashScreenItem => { let icon = ConnectIcon; let title = "Connect"; let description = "Prefer using your own choice of tooling? Find the connection string you need to connect"; @@ -470,34 +459,34 @@ export class SplashScreen extends React.Component { description: description, onClick: onClick, }; - } + }; - private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) { + const decorateOpenCollectionActivity = (activity: MostRecentActivity.OpenCollectionItem): SplashScreenItem => { return { iconSrc: CollectionIcon, - title: collectionId, + title: activity.collectionId, description: getCollectionName(), onClick: () => { - const collection = useDatabases.getState().findCollection(databaseId, collectionId); + const collection = useDatabases.getState().findCollection(activity.databaseId, activity.collectionId); collection?.openTab(); }, }; - } + }; - private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) { + const decorateOpenNotebookActivity = (activity: MostRecentActivity.OpenNotebookItem): SplashScreenItem => { return { - info: path, + info: activity.path, iconSrc: NotebookIcon, - title: name, + title: activity.name, description: "Notebook", onClick: () => { - const notebookItem = this.container.createNotebookContentItemFile(name, path); - notebookItem && this.container.openNotebook(notebookItem); + const notebookItem = container.createNotebookContentItemFile(activity.name, activity.path); + notebookItem && container.openNotebook(notebookItem); }, }; - } + }; - private createRecentItems(): SplashScreenItem[] { + const createRecentItems = (): SplashScreenItem[] => { return MostRecentActivity.getItems(userContext.databaseAccount?.name).map((activity) => { switch (activity.type) { default: { @@ -505,22 +494,22 @@ export class SplashScreen extends React.Component { throw new Error(`Unknown activity: ${unknownActivity}`); } case MostRecentActivity.Type.OpenNotebook: - return this.decorateOpenNotebookActivity(activity); + return decorateOpenNotebookActivity(activity); case MostRecentActivity.Type.OpenCollection: - return this.decorateOpenCollectionActivity(activity); + return decorateOpenCollectionActivity(activity); } }); - } + }; - private onSplashScreenItemKeyPress(event: React.KeyboardEvent, callback: () => void) { + const onSplashScreenItemKeyPress = (event: React.KeyboardEvent, callback: () => void) => { if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) { callback(); event.stopPropagation(); } - } + }; - private top3Items(): JSX.Element { + const top3Items = (): JSX.Element => { let items: { link: string; title: string; description: string }[]; switch (userContext.apiType) { case "SQL": @@ -632,44 +621,54 @@ export class SplashScreen extends React.Component { href={item.link} target="_blank" style={{ marginRight: 5 }} + className={styles.listItemTitle} > {item.title} {item.title} - {item.description} + {item.description} ))} ); - } + }; - private getRecentItems(): JSX.Element { - const recentItems = this.createRecentItems()?.filter((item) => item.description !== "Notebook"); + const getRecentItems = (): JSX.Element => { + const recentItems = createRecentItems()?.filter((item) => item.description !== "Notebook"); return (
    {recentItems.map((item, index) => ( -
  • +
  • - {item.title} - + + + + {item.title} - {item.description} + {item.description}
    • ))}
- {recentItems.length > 0 && this.clearMostRecent()}>Clear Recents} + {recentItems.length > 0 && clearMostRecent()} className={styles.listItemTitle}>Clear Recents} ); - } + }; - private getLearningResourceItems(): JSX.Element { + const getLearningResourceItems = (): JSX.Element => { interface item { link: string; title: string; @@ -785,19 +784,20 @@ export class SplashScreen extends React.Component { href={item.link} target="_blank" style={{ marginRight: 5 }} + className={styles.listItemTitle} > {item.title} {item.title} - {item.description} + {item.description} ))} ); - } + }; - private postgresNextStepItems: { link: string; title: string; description: string }[] = [ + const postgresNextStepItems: { link: string; title: string; description: string }[] = [ { link: "https://go.microsoft.com/fwlink/?linkid=2208312", title: "Data Modeling", @@ -815,7 +815,7 @@ export class SplashScreen extends React.Component { }, ]; - private vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [ + const vcoreMongoNextStepItems: { link: string; title: string; description: string }[] = [ { link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/how-to-migrate-native-tools?tabs=export-import", title: "Migrate Data", @@ -833,27 +833,27 @@ export class SplashScreen extends React.Component { }, ]; - private getNextStepItems(): JSX.Element { - const items = userContext.apiType === "Postgres" ? this.postgresNextStepItems : this.vcoreMongoNextStepItems; + const getNextStepItems = (): JSX.Element => { + const items = userContext.apiType === "Postgres" ? postgresNextStepItems : vcoreMongoNextStepItems; return ( {items.map((item, i) => ( - + {item.title} - {item.description} + {item.description} ))} ); - } + }; - private postgresLearnMoreItems: { link: string; title: string; description: string }[] = [ + const postgresLearnMoreItems: { link: string; title: string; description: string }[] = [ { link: "https://go.microsoft.com/fwlink/?linkid=2207226", title: "Performance Tuning", @@ -871,7 +871,7 @@ export class SplashScreen extends React.Component { }, ]; - private vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [ + const vcoreMongoLearnMoreItems: { link: string; title: string; description: string }[] = [ { link: "https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb/vcore/vector-search", title: "Vector Search", @@ -889,23 +889,109 @@ export class SplashScreen extends React.Component { }, ]; - private getTipsAndLearnMoreItems(): JSX.Element { - const items = userContext.apiType === "Postgres" ? this.postgresLearnMoreItems : this.vcoreMongoLearnMoreItems; + const getTipsAndLearnMoreItems = (): JSX.Element => { + const items = userContext.apiType === "Postgres" ? postgresLearnMoreItems : vcoreMongoLearnMoreItems; return ( {items.map((item, i) => ( - + {item.title} - {item.description} + {item.description} ))} ); - } -} + }; + + return ( +
+
+

+ Welcome to Azure Cosmos DB +

+
+ Globally distributed, multi-model database service for any scale +
+ {getSplashScreenButtons()} + {useCarousel.getState().showCoachMark && ( + + { + useCarousel.getState().setShowCoachMark(false); + container.onNewCollectionClicked({ isQuickstart: true }); + }, + }} + secondaryButtonProps={{ + text: "Cancel", + onClick: () => useCarousel.getState().setShowCoachMark(false), + }} + onDismiss={() => useCarousel.getState().setShowCoachMark(false)} + > + You will be guided to create a sample container with sample data, then we will give you a tour of + data explorer. You can also cancel launching this tour and explore yourself + + + )} + {userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo" ? ( + + + + Next steps + + {getNextStepItems()} + + + + Tips & learn more + + {getTipsAndLearnMoreItems()} + + + + ) : ( +
+
+

Recents

+ {getRecentItems()} +
+
+

Top 3 things you need to know

+ {top3Items()} +
+
+

Learning Resources

+ {getLearningResourceItems()} +
+
+ )} +
+
+ ); +}; diff --git a/src/Explorer/SplashScreen/SplashScreenButton.tsx b/src/Explorer/SplashScreen/SplashScreenButton.tsx index 24eddb65b..e1530d14b 100644 --- a/src/Explorer/SplashScreen/SplashScreenButton.tsx +++ b/src/Explorer/SplashScreen/SplashScreenButton.tsx @@ -1,4 +1,5 @@ import { Stack, Text } from "@fluentui/react"; +import { makeStyles } from "@fluentui/react-components"; import React from "react"; import { KeyCodes } from "../../Common/Constants"; @@ -9,25 +10,50 @@ interface SplashScreenButtonProps { onClick: () => void; } +const useStyles = makeStyles({ + button: { + border: "1px solid var(--colorNeutralStroke1)", + boxSizing: "border-box", + boxShadow: "var(--shadow4)", + borderRadius: "4px", + padding: "32px 16px", + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + width: "100%", + minHeight: "150px", + cursor: "pointer", + "&:hover": { + backgroundColor: "var(--colorNeutralBackground1Hover)" + } + }, + content: { + marginLeft: "16px", + textAlign: "left" + }, + title: { + fontSize: "18px", + fontWeight: "600", + color: "var(--colorNeutralForeground1)", + marginBottom: "8px" + }, + description: { + fontSize: "13px", + color: "var(--colorNeutralForeground2)" + } +}); + export const SplashScreenButton: React.FC = ({ imgSrc, title, description, onClick, }: SplashScreenButtonProps): JSX.Element => { + const styles = useStyles(); + return ( { if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) { @@ -41,9 +67,9 @@ export const SplashScreenButton: React.FC = ({
- - {title} - {description} + + {title} + {description} ); diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx index 8d496da2d..631278bdf 100644 --- a/src/Explorer/Tabs/Tabs.tsx +++ b/src/Explorer/Tabs/Tabs.tsx @@ -1,3 +1,4 @@ +import { Spinner, SpinnerSize } from "@fluentui/react"; import { CollectionTabKind } from "Contracts/ViewModels"; import Explorer from "Explorer/Explorer"; import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter"; @@ -15,8 +16,6 @@ import { userContext } from "UserContext"; import { useTeachingBubble } from "hooks/useTeachingBubble"; import ko from "knockout"; import React, { MutableRefObject, useEffect, useRef, useState } from "react"; -import loadingIcon from "../../../images/circular_loader_black_16x16.gif"; -import errorIcon from "../../../images/close-black.svg"; import errorQuery from "../../../images/error_no_outline.svg"; import { useObservable } from "../../hooks/useObservable"; import { ReactTabKind, useTabs } from "../../hooks/useTabs"; @@ -126,7 +125,17 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind? {useObservable(tab?.isExecutionError || ko.observable(false)) && } {isTabExecuting(tab, tabKind) && ( - Loading + )} {isQueryErrorThrown(tab, tabKind) && ( ) => { event.stopPropagation(); tab ? tab.onCloseTabButtonClick() : useTabs.getState().closeReactTab(tabKind); - // tabKind === ReactTabKind.QueryCopilot && useQueryCopilot.getState().resetQueryCopilotStates(); }} tabIndex={active ? 0 : undefined} onKeyPress={({ nativeEvent: e }) => (tab ? tab.onKeyPressClose(undefined, e) : onKeyPressReactTabClose(e, tabKind))} > - - Close - + ); @@ -267,7 +273,6 @@ const isQueryErrorThrown = (tab?: Tab, tabKind?: ReactTabKind): boolean => { }; const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => { - // eslint-disable-next-line no-console switch (activeReactTab) { case ReactTabKind.Connect: return userContext.apiType === "VCoreMongo" ? ( @@ -292,6 +297,6 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J case ReactTabKind.QueryCopilot: return ; default: - throw Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`); + throw new Error(`Unsupported tab kind ${ReactTabKind[activeReactTab]}`); } }; diff --git a/src/Main.tsx b/src/Main.tsx index 3496bd2a7..a2588600a 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -99,14 +99,26 @@ const App = (): JSX.Element => {
{/* Main Command Bar - Start */} @@ -119,6 +131,10 @@ const App = (): JSX.Element => { role="contentinfo" aria-label="Notification console" id="explorerNotificationConsole" + style={{ + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)" + }} >
@@ -144,18 +160,17 @@ const Root: React.FC = () => { useEffect(() => { if (isDarkMode) { document.body.classList.add("isDarkMode"); + document.body.style.backgroundColor = "var(--colorNeutralBackground1)"; + document.body.style.color = "var(--colorNeutralForeground1)"; loadTheme(appThemeFabric); } else { document.body.classList.remove("isDarkMode"); + document.body.style.backgroundColor = ""; + document.body.style.color = ""; loadTheme(appThemeFabric); } }, [isDarkMode]); - // console.log("Root component - Theme state:", { - // isDarkMode, - // currentTheme - // }); - return ( @@ -171,18 +186,21 @@ if (mainElement) { } function LoadingExplorer(): JSX.Element { + const styles = useStyles(); return ( -
-
-

- Azure Cosmos DB -

-

- Welcome to Azure Cosmos DB -

- +
+
+
+

+ Azure Cosmos DB +

+

+ Welcome to Azure Cosmos DB +

+ +
); diff --git a/src/hooks/useTabs.ts b/src/hooks/useTabs.ts index 8b7051a52..dff7abffc 100644 --- a/src/hooks/useTabs.ts +++ b/src/hooks/useTabs.ts @@ -66,7 +66,7 @@ export const useTabs: UseStore = create((set, get) => ({ } }, activateNewTab: (tab: TabsBase): void => { - set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined })); + set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab, activeReactTab: undefined as ReactTabKind | undefined })); tab.triggerPersistState = get().persistTabsState; tab.onActivate(); get().persistTabsState(); @@ -115,7 +115,7 @@ export const useTabs: UseStore = create((set, get) => ({ set({ activeTab: undefined, activeReactTab: undefined }); } - if (tab.tabId === activeTab.tabId && tabIndex !== -1) { + if (activeTab && tab.tabId === activeTab.tabId && tabIndex !== -1) { const tabToTheRight = updatedTabs[tabIndex]; const lastOpenTab = updatedTabs[updatedTabs.length - 1]; const newActiveTab = tabToTheRight ?? lastOpenTab;