random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-07 18:33:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replace filter ui components with fluent ui

Browse Source
This commit is contained in:
Laurent Nguyen 2024-04-30 12:04:28 +02:00
parent 299672435e
commit 29c28761b8
2 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
less/documentDB.less
View File

@ -2557,10 +2557,12 @@ a:link {
} }
.filterdivs { .filterdivs {
padding-top: 15px; margin: 10px 0px;
height: 45px;
margin-bottom: 8px;
white-space: nowrap; white-space: nowrap;
input {
line-height: 14px; // To correct vertical position of the down arrow of the input
outline: none; // Remove the dotted border on focus, because fluent has its own focus style (underlined)
}
} }
.editFilterContainer { .editFilterContainer {

79
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@ -1,6 +1,6 @@
import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos"; import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
import { Button, FluentProvider, TableRowId } from "@fluentui/react-components"; import { Button, FluentProvider, Input, TableRowId } from "@fluentui/react-components";
import { ArrowClockwise16Filled } from "@fluentui/react-icons"; import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
import Split from "@uiw/react-split"; import Split from "@uiw/react-split";
import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants"; import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
@ -28,9 +28,9 @@ import { userContext } from "UserContext";
import { logConsoleError } from "Utils/NotificationConsoleUtils"; import { logConsoleError } from "Utils/NotificationConsoleUtils";
import React, { KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react"; import React, { KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { format } from "react-string-format"; import { format } from "react-string-format";
import { CSSProperties } from "styled-components";
import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg"; import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg";
import NewDocumentIcon from "../../../../images/NewDocument.svg"; import NewDocumentIcon from "../../../../images/NewDocument.svg";
import CloseIcon from "../../../../images/close-black.svg";
import DiscardIcon from "../../../../images/discard.svg"; import DiscardIcon from "../../../../images/discard.svg";
import SaveIcon from "../../../../images/save-cosmos.svg"; import SaveIcon from "../../../../images/save-cosmos.svg";
import * as Constants from "../../../Common/Constants"; import * as Constants from "../../../Common/Constants";
@ -88,6 +88,10 @@ export class DocumentsTabV2 extends TabsBase {
} }
} }
const filterButtonStyle: CSSProperties = {
marginLeft: 8,
};
// From TabsBase.renderObjectForEditor() // From TabsBase.renderObjectForEditor()
let renderObjectForEditor = ( let renderObjectForEditor = (
value: unknown, value: unknown,
@ -1093,7 +1097,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
} }
}, [ }, [
documentsIterator, documentsIterator,
// loadNextPage // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
]); ]);
const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => { const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
@ -1669,12 +1673,12 @@ const DocumentsTabComponent: React.FunctionComponent<{
<div <div
className="tab-pane active" className="tab-pane active"
/* data-bind=" /* data-bind="
setTemplateReady: true, setTemplateReady: true,
attr:{ attr:{
id: tabId id: tabId
}, },
visible: isActive" visible: isActive"
*/ */
role="tabpanel" role="tabpanel"
style={{ display: "flex" }} style={{ display: "flex" }}
> >
@ -1688,13 +1692,14 @@ const DocumentsTabComponent: React.FunctionComponent<{
> >
<span className="selectQuery">SELECT * FROM c</span> <span className="selectQuery">SELECT * FROM c</span>
<span className="appliedQuery" /*data-bind="text: appliedFilter"*/>{appliedFilter}</span> <span className="appliedQuery" /*data-bind="text: appliedFilter"*/>{appliedFilter}</span>
<button <Button
className="filterbtnstyle queryButton" appearance="primary"
onClick={onShowFilterClick} onClick={onShowFilterClick}
style={filterButtonStyle}
/*data-bind="click: onShowFilterClick"*/ /*data-bind="click: onShowFilterClick"*/
> >
Edit Filter Edit Filter
</button> </Button>
</div> </div>
)} )}
{!isFilterExpanded && isPreferredApiMongoDB && ( {!isFilterExpanded && isPreferredApiMongoDB && (
@ -1708,12 +1713,13 @@ const DocumentsTabComponent: React.FunctionComponent<{
</span> </span>
)} )}
<span className="appliedQuery" /*data-bind="text: appliedFilter"*/>{appliedFilter}</span> <span className="appliedQuery" /*data-bind="text: appliedFilter"*/>{appliedFilter}</span>
<button <Button
className="filterbtnstyle queryButton" style={filterButtonStyle}
appearance="primary"
onClick={onShowFilterClick} /*data-bind="click: onShowFilterClick"*/ onClick={onShowFilterClick} /*data-bind="click: onShowFilterClick"*/
> >
Edit Filter Edit Filter
</button> </Button>
</div> </div>
)} )}
{/* <!-- Read-only Filter - End --> */} {/* <!-- Read-only Filter - End --> */}
@ -1729,10 +1735,11 @@ const DocumentsTabComponent: React.FunctionComponent<{
SELECT * FROM c{" "} SELECT * FROM c{" "}
</span> </span>
)} )}
<input <Input
type="text" type="text"
list="filtersList" list="filtersList"
className={`querydropdown ${filterContent.length === 0 ? "placeholderVisible" : ""}`} className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
style={{ width: "100%" }}
title="Type a query predicate or choose one from the list." title="Type a query predicate or choose one from the list."
placeholder={ placeholder={
isPreferredApiMongoDB isPreferredApiMongoDB
@ -1758,47 +1765,47 @@ const DocumentsTabComponent: React.FunctionComponent<{
</datalist> </datalist>
<span className="filterbuttonpad"> <span className="filterbuttonpad">
<button <Button
className="filterbtnstyle queryButton" appearance="primary"
style={filterButtonStyle}
onClick={() => refreshDocumentsGrid(true)} onClick={() => refreshDocumentsGrid(true)}
disabled={!applyFilterButton.enabled} disabled={!applyFilterButton.enabled}
/* data-bind=" /* data-bind="
click: refreshDocumentsGrid.bind($data, true), click: refreshDocumentsGrid.bind($data, true),
enable: applyFilterButton.enabled" enable: applyFilterButton.enabled"
*/ */
aria-label="Apply filter" aria-label="Apply filter"
tabIndex={0} tabIndex={0}
> >
Apply Filter Apply Filter
</button> </Button>
</span> </span>
<span className="filterbuttonpad"> <span className="filterbuttonpad">
{!isPreferredApiMongoDB && isExecuting && ( {!isPreferredApiMongoDB && isExecuting && (
<button <Button
className="filterbtnstyle queryButton" style={filterButtonStyle}
appearance="primary"
/* data-bind=" /* data-bind="
visible: !isPreferredApiMongoDB && isExecuting, visible: !isPreferredApiMongoDB && isExecuting,
click: onAbortQueryClick" click: onAbortQueryClick"
*/ */
aria-label="Cancel Query" aria-label="Cancel Query"
onClick={() => queryAbortController.abort()} onClick={() => queryAbortController.abort()}
tabIndex={0} tabIndex={0}
> >
Cancel Query Cancel Query
</button> </Button>
)} )}
</span> </span>
<span <Button
className="filterclose"
role="button"
aria-label="close filter" aria-label="close filter"
tabIndex={0} tabIndex={0}
onClick={onHideFilterClick} onClick={onHideFilterClick}
onKeyDown={onCloseButtonKeyDown} onKeyDown={onCloseButtonKeyDown}
appearance="transparent"
icon={<Dismiss16Filled />}
/*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/ /*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/
> />
<img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" />
</span>
</div> </div>
</div> </div>
</div> </div>