ZacharyZhang-NY
86a8b4a958
A document reads into one value, Datum: JSON through serde_json, its keys now kept in their written order, and YAML's block style through a small reader that says which line it could not read. JsonViewer and YamlViewer draw it as one tree: each key with its value, maps and lists with their counts; a search keeps what holds its words and opens the way; Enter on a value copies its JSONPath. XmlViewer reads elements, attributes and text and says where tags cross. JsonEditor writes JSON in the code editor with Format and Minify and says whether it reads. DocumentViewer is JsonViewer.
84 lines
2.8 KiB
Rust
84 lines
2.8 KiB
Rust
use ely_gpui_component::{
|
|
devtools::{JsonEditor, JsonViewer, XmlViewer, YamlViewer},
|
|
editor::CodeEditor,
|
|
forms::TextInput,
|
|
};
|
|
use gpui::{App, IntoElement, ParentElement, Styled, Window, div, px};
|
|
|
|
use crate::ui::section;
|
|
|
|
const ORDER: &str = r#"{
|
|
"_id": "66f1c2a9e4b0",
|
|
"customer": { "name": "Ada Lovelace", "email": "ada@example.com" },
|
|
"items": [
|
|
{ "sku": "LAMP-01", "quantity": 1, "price": 89.0 },
|
|
{ "sku": "BULB-E27", "quantity": 4, "price": 6.5 }
|
|
],
|
|
"paid": true,
|
|
"shipped_at": null,
|
|
"tags": ["gift", "express"]
|
|
}"#;
|
|
|
|
const DEPLOYMENT: &str = "apiVersion: apps/v1
|
|
kind: Deployment
|
|
metadata:
|
|
name: web
|
|
labels:
|
|
app: web
|
|
spec:
|
|
replicas: 3
|
|
template:
|
|
spec:
|
|
containers:
|
|
- name: web
|
|
image: registry.example.com/web:1.8.2
|
|
ports:
|
|
- containerPort: 8080
|
|
";
|
|
|
|
const FEED: &str = r#"<?xml version="1.0" encoding="UTF-8"?>
|
|
<rss version="2.0">
|
|
<channel>
|
|
<title>Release notes</title>
|
|
<item id="1">
|
|
<title>Faster queries</title>
|
|
<pubDate>Fri, 25 Sep 2026 09:00:00 GMT</pubDate>
|
|
</item>
|
|
<item id="2">
|
|
<title>Dark mode</title>
|
|
</item>
|
|
</channel>
|
|
</rss>"#;
|
|
|
|
pub fn documents(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
|
|
let search = window.use_keyed_state("devtools-json-search", cx, |window, cx| {
|
|
TextInput::new(window, cx).placeholder("Find a key or a value")
|
|
});
|
|
let editor = window.use_keyed_state("devtools-json-editor", cx, |window, cx| {
|
|
CodeEditor::new(
|
|
r#"{"name": "web", "replicas": 3, "ports": [8080, 8443]}"#,
|
|
window,
|
|
cx,
|
|
)
|
|
.language("JSON")
|
|
});
|
|
let yaml_search = window.use_keyed_state("devtools-yaml-search", cx, |window, cx| {
|
|
TextInput::new(window, cx).placeholder("Find a key or a value")
|
|
});
|
|
section(
|
|
"DocumentViewer (MongoDB / JSON) → devtools::JsonViewer · JsonViewer / JsonTree · JsonEditor · YamlViewer · XmlViewer",
|
|
"A document as a tree: each key with its value, lists and maps with their counts; a search keeps what holds it and opens the way, and Enter on a value copies its path. The editor writes JSON with Format and Minify and says whether it reads. YAML reads as the same tree; XML as elements with their attributes and text.",
|
|
cx,
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_wrap()
|
|
.gap_6()
|
|
.child(div().w(px(380.)).child(JsonViewer::new("devtools-json", ORDER, &search)))
|
|
.child(div().w(px(420.)).child(JsonEditor::new("devtools-json-editor", &editor)))
|
|
.child(div().w(px(380.)).child(YamlViewer::new("devtools-yaml", DEPLOYMENT, &yaml_search)))
|
|
.child(div().w(px(420.)).child(XmlViewer::new("devtools-xml", FEED))),
|
|
)
|
|
}
|