random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark theme for Explorer (#2185)

Browse Source 
* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
2025-12-16 12:21:58 +05:30
committed by GitHub
parent bc7e8a71ca
commit 2c31ec2a8d
100 changed files with 7344 additions and 1929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/Explorer/Tabs/ConnectTab.tsx
View File

@@ -70,13 +70,23 @@ export const ConnectTab: React.FC = (): JSX.Element => {
const textfieldStyles: Partial<ITextFieldStyles> = {
root: { width: "100%" },
field: { backgroundColor: "rgb(230, 230, 230)" },
fieldGroup: { borderColor: "rgb(138, 136, 134)" },
field: {
backgroundColor: "var(--colorNeutralBackground3)",
color: "var(--colorNeutralForeground1)",
},
fieldGroup: { borderColor: "var(--colorNeutralStroke1)" },
suffix: {
backgroundColor: "rgb(230, 230, 230)",
backgroundColor: "var(--colorNeutralBackground3)",
margin: 0,
padding: 0,
},
subComponentStyles: {
label: {
root: {
color: "var(--colorNeutralForeground1)",
},
},
},
};
const renderCopyButton = (selector: string) => (
@@ -86,19 +96,65 @@ export const ConnectTab: React.FC = (): JSX.Element => {
styles={{
root: {
height: "100%",
backgroundColor: "rgb(230, 230, 230)",
backgroundColor: "var(--colorNeutralBackground3)",
border: "none",
color: "var(--colorNeutralForeground1)",
},
rootHovered: {
backgroundColor: "rgb(220, 220, 220)",
backgroundColor: "var(--colorNeutralBackground4)",
},
rootPressed: {
backgroundColor: "rgb(210, 210, 210)",
backgroundColor: "var(--colorNeutralBackground5)",
},
icon: {
color: "var(--colorNeutralForeground1)",
},
}}
/>
);
const themeAwareIconButtonStyles = {
root: {
color: "var(--colorNeutralForeground1)",
},
rootHovered: {
backgroundColor: "var(--colorNeutralBackground3)",
},
icon: {
color: "var(--colorNeutralForeground1)",
},
};
const pivotStyles = {
root: {
color: "var(--colorNeutralForeground1)",
},
link: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
"&:hover": {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground3)",
},
"&:active": {
color: "var(--colorNeutralForeground1)",
},
},
},
linkIsSelected: {
color: "var(--colorNeutralForeground1)",
selectors: {
"&::before": {
backgroundColor: "var(--colorBrandBackground)",
},
},
},
text: {
color: "var(--colorNeutralForeground1)",
},
};
return (
<div style={{ width: "100%", padding: 16 }}>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 16, margin: 10 }}>
@@ -113,7 +169,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<div style={{ width: 32 }}></div>
</Stack>
<Pivot>
<Pivot styles={pivotStyles}>
{userContext.hasWriteAccess && (
<PivotItem headerText="Read-write Keys">
<Stack style={{ margin: 10, overflow: "auto", maxHeight: "calc(100vh - 300px)" }}>
@@ -131,6 +187,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showPrimaryMasterKey ? "Hide3" : "View" }}
onClick={() => setShowPrimaryMasterKey(!showPrimaryMasterKey)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -147,6 +204,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showSecondaryMasterKey ? "Hide3" : "View" }}
onClick={() => setShowSecondaryMasterKey(!showSecondaryMasterKey)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -163,6 +221,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showPrimaryConnectionStr ? "Hide3" : "View" }}
onClick={() => setShowPrimaryConnectionStr(!showPrimaryConnectionStr)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -179,6 +238,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showSecondaryConnectionStr ? "Hide3" : "View" }}
onClick={() => setShowSecondaryConnectionStr(!showSecondaryConnectionStr)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
</Stack>
@@ -200,6 +260,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showPrimaryReadonlyMasterKey ? "Hide3" : "View" }}
onClick={() => setShowPrimaryReadonlyMasterKey(!showPrimaryReadonlyMasterKey)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -216,6 +277,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showSecondaryReadonlyMasterKey ? "Hide3" : "View" }}
onClick={() => setShowSecondaryReadonlyMasterKey(!showSecondaryReadonlyMasterKey)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -232,6 +294,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showPrimaryReadonlyConnectionStr ? "Hide3" : "View" }}
onClick={() => setShowPrimaryReadonlyConnectionStr(!showPrimaryReadonlyConnectionStr)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
<Stack horizontal verticalAlign="end" style={{ marginBottom: 8 }}>
@@ -248,6 +311,7 @@ export const ConnectTab: React.FC = (): JSX.Element => {
<IconButton
iconProps={{ iconName: showSecondaryReadonlyConnectionStr ? "Hide3" : "View" }}
onClick={() => setShowSecondaryReadonlyConnectionStr(!showSecondaryReadonlyConnectionStr)}
styles={themeAwareIconButtonStyles}
/>
</Stack>
</Stack>
@@ -255,10 +319,23 @@ export const ConnectTab: React.FC = (): JSX.Element => {
</Pivot>
<Stack style={{ margin: 10 }}>
<Text style={{ fontWeight: 600, marginBottom: 8 }}>Download sample app</Text>
<Text style={{ marginBottom: 8 }}>
Don’t have an app ready? No worries, download one of our sample app with a platform of your choice. Connection
string is already included in the app.
<Text
style={{
fontWeight: 600,
marginBottom: 8,
color: "var(--colorNeutralForeground1)",
}}
>
Download sample app
</Text>
<Text
style={{
marginBottom: 8,
color: "var(--colorNeutralForeground2)",
}}
>
Don&apos;t have an app ready? No worries, download one of our sample app with a platform of your choice.
Connection string is already included in the app.
</Text>
<PrimaryButton
style={{ width: 185 }}