Filtering DBs and option for pin(fav)(#2301)

* implemented search bar

* formatting corrected

* added pin(fav) and sorting in local in sidebar tree of DE

* reverted changes

* fixed lint and formatting issues

* fixed lint and formatting issues

* theme toggle button is disabled if in portal

* fixed lint error

* added link on disabled theme toggle button

* updated the variable for pin icon

* removed en-us from url

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
Co-authored-by: sakshigupta12feb <sakshigupta12feb1@gmail.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -167,7 +167,7 @@ export function createContextCommandBarButtons(
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [
-    ThemeToggleButton(),
+    ThemeToggleButton(configContext.platform === Platform.Portal),
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -5,6 +5,7 @@ import {
   IconType,
   IDropdownOption,
   IDropdownStyles,
+  TooltipHost,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { KeyboardHandlerMap } from "KeyboardShortcuts";
@@ -154,6 +155,21 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         id: btn.id,
       };
 
+      if (btn.tooltipContent) {
+        result.title = undefined;
+        result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
+          const { defaultRender: DefaultRender, ...rest } = props;
+          return React.createElement(
+            TooltipHost,
+            {
+              content: btn.tooltipContent as JSX.Element,
+              calloutProps: { gapSpace: 0 },
+            },
+            React.createElement(DefaultRender, rest),
+          );
+        };
+      }
+
       if (isSplit) {
         // It's a split button
         result.split = true;

src/Explorer/Menus/CommandBar/ThemeToggleButton.tsx

@@ -1,10 +1,13 @@
+import { Link, Text } from "@fluentui/react";
 import * as React from "react";
 import MoonIcon from "../../../../images/MoonIcon.svg";
 import SunIcon from "../../../../images/SunIcon.svg";
 import { useThemeStore } from "../../../hooks/useTheme";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
-export const ThemeToggleButton = (): CommandButtonComponentProps => {
+const PORTAL_SETTINGS_URL = "https://learn.microsoft.com/azure/azure-portal/set-preferences";
+
+export const ThemeToggleButton = (isPortal?: boolean): CommandButtonComponentProps => {
   const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
 
   React.useEffect(() => {
@@ -16,6 +19,34 @@ export const ThemeToggleButton = (): CommandButtonComponentProps => {
 
   const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme";
 
+  if (isPortal) {
+    return {
+      iconSrc: darkMode ? SunIcon : MoonIcon,
+      iconAlt: "Theme Toggle",
+      onCommandClick: undefined,
+      commandButtonLabel: undefined,
+      ariaLabel: "Dark Mode is managed in Azure Portal Settings",
+      tooltipText: undefined,
+      tooltipContent: React.createElement(
+        "div",
+        { style: { padding: "4px 0" } },
+        React.createElement(Text, { block: true, variant: "small" }, "Dark Mode is managed in Azure Portal Settings"),
+        React.createElement(
+          Link,
+          {
+            href: PORTAL_SETTINGS_URL,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: { display: "inline-block", marginTop: "4px", fontSize: "12px" },
+          },
+          "Open settings",
+        ),
+      ),
+      hasPopup: false,
+      disabled: true,
+    };
+  }
+
   return {
     iconSrc: darkMode ? SunIcon : MoonIcon,
     iconAlt: "Theme Toggle",