random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-05-15 01:37:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Nishtha Ahuja
2026-03-16 20:23:44 +05:30
committed by GitHub
parent 454a02bc53
commit 8cce0a4802
19 changed files with 1493 additions and 1080 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
+25 -5
View File
@@ -18,6 +18,24 @@ import { useDatabases } from "../../useDatabases";
import { useSelectedNode } from "../../useSelectedNode";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
const themedTextFieldStyles = {
fieldGroup: {
width: 300,
backgroundColor: "var(--colorNeutralBackground1)",
borderColor: "var(--colorNeutralStroke1)",
selectors: {
":hover": { borderColor: "var(--colorNeutralStroke1Hover)" },
},
},
field: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground1)",
},
subComponentStyles: {
label: { root: { color: "var(--colorNeutralForeground1)" } },
},
};
export interface DeleteCollectionConfirmationPaneProps {
refreshDatabases: () => Promise<void>;
}
@@ -126,12 +144,14 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
<div className="panelMainContent">
<div className="confirmDeleteInput">
<span className="mandatoryStar">* </span>
<Text variant="small">{confirmContainer}</Text>
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
{confirmContainer}
</Text>
<TextField
id="confirmCollectionId"
autoFocus
value={inputCollectionName}
styles={{ fieldGroup: { width: 300 } }}
styles={themedTextFieldStyles}
onChange={(event, newInput?: string) => {
setInputCollectionName(newInput);
}}
@@ -141,15 +161,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
</div>
{shouldRecordFeedback() && (
<div className="deleteCollectionFeedback">
<Text variant="small" block>
<Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
{t(Keys.panes.deleteCollection.feedbackTitle)}
</Text>
<Text variant="small" block>
<Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
{t(Keys.panes.deleteCollection.feedbackReason, { collectionName })}
</Text>
<TextField
id="deleteCollectionFeedbackInput"
styles={{ fieldGroup: { width: 300 } }}
styles={themedTextFieldStyles}
multiline
value={deleteCollectionFeedback}
rows={3}
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+28
View File
@@ -29,10 +29,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
*
</span>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<span
className="css-109"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Confirm by typing the container id
</span>
@@ -45,9 +55,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
required={true}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"fieldGroup": {
"backgroundColor": "var(--colorNeutralBackground1)",
"borderColor": "var(--colorNeutralStroke1)",
"selectors": {
":hover": {
"borderColor": "var(--colorNeutralStroke1Hover)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
value=""
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+25 -5
View File
@@ -20,6 +20,24 @@ import { useSelectedNode } from "../useSelectedNode";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
const themedTextFieldStyles = {
fieldGroup: {
width: 300,
backgroundColor: "var(--colorNeutralBackground1)",
borderColor: "var(--colorNeutralStroke1)",
selectors: {
":hover": { borderColor: "var(--colorNeutralStroke1Hover)" },
},
},
field: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorNeutralBackground1)",
},
subComponentStyles: {
label: { root: { color: "var(--colorNeutralForeground1)" } },
},
};
interface DeleteDatabaseConfirmationPanelProps {
refreshDatabases: () => Promise<void>;
}
@@ -143,12 +161,14 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
<div className="panelMainContent">
<div className="confirmDeleteInput">
<span className="mandatoryStar">* </span>
<Text variant="small">{confirmDatabase}</Text>
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
{confirmDatabase}
</Text>
<TextField
id="confirmDatabaseId"
data-test="Input:confirmDatabaseId"
autoFocus
styles={{ fieldGroup: { width: 300 } }}
styles={themedTextFieldStyles}
onChange={(event, newInput?: string) => {
setDatabaseInput(newInput);
}}
@@ -158,15 +178,15 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
</div>
{isLastNonEmptyDatabase() && (
<div className="deleteDatabaseFeedback">
<Text variant="small" block>
<Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
{t(Keys.panes.deleteDatabase.feedbackTitle)}
</Text>
<Text variant="small" block>
<Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
{t(Keys.panes.deleteDatabase.feedbackReason, { databaseName: getDatabaseName() })}
</Text>
<TextField
id="deleteDatabaseFeedbackInput"
styles={{ fieldGroup: { width: 300 } }}
styles={themedTextFieldStyles}
multiline
rows={3}
onChange={(event, newInput?: string) => {
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+66
View File
@@ -356,10 +356,20 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
*
</span>
<Text
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<span
className="css-113"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Confirm by typing the Database id (name)
</span>
@@ -373,9 +383,27 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
required={true}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"fieldGroup": {
"backgroundColor": "var(--colorNeutralBackground1)",
"borderColor": "var(--colorNeutralStroke1)",
"selectors": {
":hover": {
"borderColor": "var(--colorNeutralStroke1Hover)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>
@@ -699,20 +727,40 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
>
<Text
block={true}
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<span
className="css-126"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
Help us improve Azure Cosmos DB!
</span>
</Text>
<Text
block={true}
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
variant="small"
>
<span
className="css-126"
style={
{
"color": "var(--colorNeutralForeground1)",
}
}
>
What is the reason why you are deleting this Database?
</span>
@@ -725,9 +773,27 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
rows={3}
styles={
{
"field": {
"backgroundColor": "var(--colorNeutralBackground1)",
"color": "var(--colorNeutralForeground1)",
},
"fieldGroup": {
"backgroundColor": "var(--colorNeutralBackground1)",
"borderColor": "var(--colorNeutralStroke1)",
"selectors": {
":hover": {
"borderColor": "var(--colorNeutralStroke1Hover)",
},
},
"width": 300,
},
"subComponentStyles": {
"label": {
"root": {
"color": "var(--colorNeutralForeground1)",
},
},
},
}
}
>