From d657c4919ed8e3186d971a6446476112a3a758f9 Mon Sep 17 00:00:00 2001 From: SATYA SB <107645008+satya07sb@users.noreply.github.com> Date: Wed, 14 May 2025 10:16:19 +0530 Subject: [PATCH] [Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. (#2092) * [accessibility-2278267]:[Supporting the platform - Azure Cosmos DB - Data Explorer]: All the controls present under 'Data Explorer' page are truncated after setting the viewport to 320*256 pixel. * feat: implement zoom level hook and update components for responsive design. * Format fixed. * feat: add conditionalClass utility and refactor className assignments for improved readability. --------- Co-authored-by: Satyapriya Bai --- src/Explorer/Sidebar.tsx | 41 +++++++++++++++++-- .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx | 9 +++- .../DocumentsTabV2.test.tsx.snap | 2 +- .../Tabs/QueryTab/QueryResultSection.tsx | 9 +++- src/Explorer/Tabs/QueryTab/Styles.ts | 14 +++++++ src/Utils/StyleUtils.ts | 8 ++++ src/hooks/useZoomLevel.ts | 20 +++++++++ 7 files changed, 97 insertions(+), 6 deletions(-) create mode 100644 src/hooks/useZoomLevel.ts diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx index ce111dab3..6488873d8 100644 --- a/src/Explorer/Sidebar.tsx +++ b/src/Explorer/Sidebar.tsx @@ -30,8 +30,10 @@ import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboard import { isFabric, isFabricMirrored, isFabricNative, isFabricNativeReadOnly } 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"; import { debounce } from "lodash"; import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; @@ -104,6 +106,23 @@ const useSidebarStyles = makeStyles({ display: "flex", }, }, + accessibleContent: { + "@media (max-width: 420px)": { + overflow: "scroll", + }, + }, + minHeightResponsive: { + "@media (max-width: 420px)": { + minHeight: "400px", + }, + }, + accessibleContentZoom: { + overflow: "scroll", + }, + + minHeightZoom: { + minHeight: "400px", + }, }); interface GlobalCommandsProps { @@ -275,6 +294,7 @@ export const SidebarContainer: React.FC = ({ explorer }) => { const [expandedSize, setExpandedSize] = React.useState(300); const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo"; const allotment = useRef(null); + const isZoomed = useZoomLevel(); const expand = useCallback(() => { if (!expanded) { @@ -325,11 +345,23 @@ export const SidebarContainer: React.FC = ({ explorer }) => { return (
- + {/* Collections Tree - Start */} {hasSidebar && ( // When collapsed, we force the pane to 24 pixels wide and make it non-resizable. - +
{loading && ( @@ -385,7 +417,10 @@ export const SidebarContainer: React.FC = ({ explorer }) => { )} - + diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx index 431a1110f..47a866b27 100644 --- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx +++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx @@ -144,6 +144,13 @@ export const useDocumentsTabStyles = makeStyles({ deleteProgressContent: { paddingTop: tokens.spacingVerticalL, }, + smallScreenContent: { + "@media (max-width: 420px)": { + flexWrap: "wrap", + minHeight: "max-content", + padding: "4px", + }, + }, }); export class DocumentsTabV2 extends TabsBase { @@ -2102,7 +2109,7 @@ export const DocumentsTabComponent: React.FunctionComponent
-
+
{!isPreferredApiMongoDB && SELECT * FROM c }
diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx index 0711f9295..90a8a5672 100644 --- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx @@ -8,6 +8,8 @@ import RunQuery from "../../../../images/RunQuery.png"; 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; @@ -23,11 +25,16 @@ interface QueryResultProps extends ResultsViewProps { const ExecuteQueryCallToAction: React.FC = () => { const styles = useQueryTabStyles(); + const isZoomed = useZoomLevel(); return (

- +

Execute a query to see the results

diff --git a/src/Explorer/Tabs/QueryTab/Styles.ts b/src/Explorer/Tabs/QueryTab/Styles.ts index 6fee12bfb..006a9f9e1 100644 --- a/src/Explorer/Tabs/QueryTab/Styles.ts +++ b/src/Explorer/Tabs/QueryTab/Styles.ts @@ -25,6 +25,9 @@ export const useQueryTabStyles = makeStyles({ height: "100%", display: "flex", flexDirection: "column", + "@media (max-width: 420px)": { + overflow: "scroll", + }, }, queryResultsMessage: { ...shorthands.margin("5px"), @@ -38,6 +41,9 @@ export const useQueryTabStyles = makeStyles({ display: "flex", rowGap: "12px", flexDirection: "column", + "@media (max-width: 420px)": { + height: "auto", + }, }, queryResultsTabContentContainer: { display: "flex", @@ -93,4 +99,12 @@ export const useQueryTabStyles = makeStyles({ display: "flex", flexDirection: "row", }, + responsiveImg: { + "@media (max-width: 420px)": { + width: "50px", + }, + }, + zoomedImageSize: { + width: "60px", + }, }); 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 || ""; +} diff --git a/src/hooks/useZoomLevel.ts b/src/hooks/useZoomLevel.ts new file mode 100644 index 000000000..8196129ee --- /dev/null +++ b/src/hooks/useZoomLevel.ts @@ -0,0 +1,20 @@ +import { useEffect, useState } from "react"; + +const useZoomLevel = (threshold: number = 2): boolean => { + const [isZoomed, setIsZoomed] = useState(false); + + useEffect(() => { + const checkZoom = () => { + const zoomLevel = window.devicePixelRatio; + setIsZoomed(zoomLevel >= threshold); + }; + + checkZoom(); + window.addEventListener("resize", checkZoom); + return () => window.removeEventListener("resize", checkZoom); + }, [threshold]); + + return isZoomed; +}; + +export default useZoomLevel;