From 643992d4e71f56b84d82760f4fb4cbf0fff5d088 Mon Sep 17 00:00:00 2001
From: Satyapriya Bai <v-satybai@microsoft.com>
Date: Tue, 22 Apr 2025 12:49:53 +0530
Subject: [PATCH] feat: add conditionalClass utility and refactor className
 assignments for improved readability.

---
 src/Explorer/Sidebar.tsx                          | 10 +++++++---
 src/Explorer/Tabs/QueryTab/QueryResultSection.tsx |  3 ++-
 src/Utils/StyleUtils.ts                           |  8 ++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx
index 354d082c6..efc3c7dd2 100644
--- a/src/Explorer/Sidebar.tsx
+++ b/src/Explorer/Sidebar.tsx
@@ -30,6 +30,7 @@ import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboard
 import { isFabric, isFabricMirrored, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
+import { conditionalClass } from "Utils/StyleUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
 import useZoomLevel from "hooks/useZoomLevel";
@@ -347,13 +348,16 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
         ref={allotment}
         onChange={onChange}
         onDragEnd={onDragEnd}
-        className={`resourceTreeAndTabs ${styles.accessibleContent} ${isZoomed ? styles.accessibleContentZoom : ""}`}
+        className={`resourceTreeAndTabs ${styles.accessibleContent} ${conditionalClass(
+          isZoomed,
+          styles.accessibleContentZoom,
+        )}`}
       >
         {/* Collections Tree - Start */}
         {hasSidebar && (
           // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
           <Allotment.Pane
-            className={`${styles.minHeightResponsive} ${isZoomed ? styles.minHeightZoom : ""}`}
+            className={`${styles.minHeightResponsive} ${conditionalClass(isZoomed, styles.minHeightZoom)}`}
             minSize={24}
             preferredSize={250}
           >
@@ -413,7 +417,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
           </Allotment.Pane>
         )}
         <Allotment.Pane
-          className={`${styles.minHeightResponsive} ${isZoomed ? styles.minHeightZoom : ""}`}
+          className={`${styles.minHeightResponsive} ${conditionalClass(isZoomed, styles.minHeightZoom)}`}
           minSize={200}
         >
           <Tabs explorer={explorer} />
diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
index 83087f17e..90a8a5672 100644
--- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
@@ -9,6 +9,7 @@ import { QueryResults } from "../../../Contracts/ViewModels";
 import { ErrorList } from "./ErrorList";
 import { ResultsView } from "./ResultsView";
 import useZoomLevel from "hooks/useZoomLevel";
+import { conditionalClass } from "Utils/StyleUtils";
 
 export interface ResultsViewProps {
   isMongoDB: boolean;
@@ -30,7 +31,7 @@ const ExecuteQueryCallToAction: React.FC = () => {
       <div>
         <p>
           <img
-            className={`${styles.responsiveImg} ${isZoomed ? styles.zoomedImageSize : ""}`}
+            className={`${styles.responsiveImg} ${conditionalClass(isZoomed, styles.zoomedImageSize)}`}
             src={RunQuery}
             aria-hidden="true"
           />
diff --git a/src/Utils/StyleUtils.ts b/src/Utils/StyleUtils.ts
index fa76c6910..bca78c849 100644
--- a/src/Utils/StyleUtils.ts
+++ b/src/Utils/StyleUtils.ts
@@ -21,3 +21,11 @@ export function copyStyles(sourceDoc: Document, targetDoc: Document): void {
     }
   });
 }
+
+/**
+ * Conditionally returns a class name based on a boolean condition.
+ * If the condition is true, returns the `trueValue` class; otherwise, returns `falseValue` (or an empty string if not provided).
+ */
+export function conditionalClass(condition: boolean, trueValue: string, falseValue?: string): string {
+  return condition ? trueValue : falseValue || "";
+}