Dark theme for Explorer (#2185)

* 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>

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -3,6 +3,7 @@ import {
   DetailsListLayoutMode,
   IColumn,
   IconButton,
+  IMessageBarStyles,
   MessageBar,
   MessageBarType,
   SelectionMode,
@@ -30,12 +31,12 @@ import {
 } from "../../SettingsRenderUtils";
 import {
   AddMongoIndexProps,
-  MongoIndexIdField,
-  MongoIndexTypes,
-  MongoNotificationType,
   getMongoIndexType,
   getMongoIndexTypeText,
   isIndexTransforming,
+  MongoIndexIdField,
+  MongoIndexTypes,
+  MongoNotificationType,
 } from "../../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -63,6 +64,24 @@ interface MongoIndexDisplayProps {
 export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
   private shouldCheckComponentIsDirty = true;
   private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
+
+  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
+    root: {
+      selectors: {
+        "&.ms-MessageBar--warning": {
+          backgroundColor: "var(--colorStatusWarningBackground1)",
+          border: "1px solid var(--colorStatusWarningBorder1)",
+        },
+        ".ms-MessageBar-icon": {
+          color: "var(--colorNeutralForeground1)",
+        },
+        ".ms-MessageBar-text": {
+          color: "var(--colorNeutralForeground1)",
+        },
+      },
+    },
+  };
+
   private initialIndexesColumns: IColumn[] = [
     { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
     { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     let mongoIndexDisplayProps: MongoIndexDisplayProps;
     if (type) {
       mongoIndexDisplayProps = {
-        definition: <Text>{definition}</Text>,
-        type: <Text>{getMongoIndexTypeText(type)}</Text>,
+        definition: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{definition}</Text>,
+        type: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{getMongoIndexTypeText(type)}</Text>,
         actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex),
       };
     }
@@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
+        {warningMessage && (
+          <MessageBar
+            messageBarType={MessageBarType.warning}
+            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+            styles={this.darkThemeMessageBarStyles}
+          >
+            {warningMessage}
+          </MessageBar>
+        )}
       </>
     );
   };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onChange={[Function]}
       styles={
         {
+          "field": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "fieldGroup": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+          },
           "root": {
             "paddingLeft": 10,
             "width": 210,
@@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = `
       selectedKey="Single"
       styles={
         {
+          "callout": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "border": "1px solid var(--colorNeutralStroke1)",
+          },
+          "caretDown": {
+            "color": "var(--colorNeutralForeground1)",
+          },
           "dropdown": {
-            "paddingleft": 10,
+            "paddingLeft": 10,
             "width": 202,
           },
+          "dropdownItem": {
+            "backgroundColor": "transparent",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:focus": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItemSelected": {
+            "backgroundColor": "rgba(255, 255, 255, 0.08)",
+            "color": "var(--colorNeutralForeground1)",
+            "selectors": {
+              "&:hover": {
+                "backgroundColor": "rgba(255, 255, 255, 0.1)",
+                "color": "var(--colorNeutralForeground1)",
+              },
+            },
+          },
+          "dropdownItems": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+          },
+          "dropdownOptionText": {
+            "color": "var(--colorNeutralForeground1)",
+          },
+          "title": {
+            "backgroundColor": "var(--colorNeutralBackground2)",
+            "borderColor": "var(--colorNeutralStroke1)",
+            "color": "var(--colorNeutralForeground1)",
+          },
         }
       }
     />

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
-<Text>
+<Text
+  style={
+    {
+      "color": "var(--colorNeutralForeground1)",
+    }
+  }
+>
   Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
 </Text>
 `;
@@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   <IndexingPolicyRefreshComponent
     refreshIndexTransformationProgress={[Function]}
   />
-  <Text>
+  <Text
+    style={
+      {
+        "color": "var(--colorNeutralForeground1)",
+      }
+    }
+  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
+      style={
+        {
+          "color": "var(--colorBrandForeground1)",
+        }
+      }
       target="_blank"
     >
        Compound indexes 
@@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           {
             "root": {
               "selectors": {
+                ".ms-DetailsHeader": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                },
+                ".ms-DetailsHeader-cell": {
+                  "backgroundColor": "var(--colorNeutralBackground1)",
+                  "color": "var(--colorNeutralForeground1)",
+                  "selectors": {
+                    ":hover": {
+                      "backgroundColor": "var(--colorNeutralBackground1Hover)",
+                      "color": "var(--colorNeutralForeground1)",
+                    },
+                  },
+                },
+                ".ms-DetailsHeader-cellTitle": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
+                ".ms-DetailsRow-cell .ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
                 ".ms-FocusZone": {
                   "paddingTop": 0,
                 },
+                ".ms-TooltipHost": {
+                  "color": "var(--colorNeutralForeground1)",
+                },
               },
             },
           }