feat: add conditionalClass utility and refactor className assignments for improved readability.

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} />

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"
           />

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 || "";
+}