feat: add new JsonViewer (#1951)

Author: Raubzeug

package-lock.json

@@ -24,6 +24,7 @@
     "@gravity-ui/react-data-table": "^2.1.1",
     "@gravity-ui/table": "^1.7.0",
     "@gravity-ui/uikit": "^6.40.0",
+    "@gravity-ui/unipika": "^5.2.1",
     "@gravity-ui/websql-autocomplete": "^13.7.0",
     "@hookform/resolvers": "^3.10.0",
     "@reduxjs/toolkit": "^2.5.0",
@@ -43,7 +44,6 @@
     "react-error-boundary": "^4.1.2",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
-    "react-json-inspector": "^7.1.1",
     "react-monaco-editor": "^0.56.2",
     "react-redux": "^9.2.0",
     "react-router-dom": "^5.3.4",

package.json

@@ -0,0 +1,117 @@
+@use '../../styles/mixins.scss';
+
+.ydb-json-viewer {
+    --data-table-row-height: 20px;
+    --toolbar-background-color: var(--g-color-base-background);
+
+    &__toolbar {
+        position: sticky;
+        z-index: 2;
+        top: 0;
+        left: 0;
+
+        padding-bottom: var(--g-spacing-2);
+
+        background-color: var(--toolbar-background-color);
+    }
+
+    &__content {
+        font-family: var(--g-font-family-monospace);
+    }
+
+    &__row {
+        height: 1em;
+    }
+
+    &__cell {
+        position: relative;
+
+        white-space: nowrap !important;
+        * {
+            white-space: nowrap !important;
+        }
+    }
+
+    &__collapsed {
+        position: absolute;
+
+        margin-top: -2px;
+        margin-left: -3ex;
+    }
+
+    &__match-counter {
+        align-content: center;
+
+        text-wrap: nowrap;
+
+        color: var(--g-color-text-secondary);
+    }
+
+    &__key {
+        color: var(--g-color-text-misc);
+    }
+
+    &__value {
+        &_type {
+            &_string {
+                color: var(--color-unipika-string);
+            }
+            &_boolean {
+                color: var(--color-unipika-bool);
+            }
+            &_null {
+                color: var(--color-unipika-null);
+            }
+            &_int64 {
+                color: var(--color-unipika-int);
+            }
+            &_double {
+                color: var(--color-unipika-float);
+            }
+        }
+    }
+
+    &__filter {
+        width: 300px;
+    }
+
+    &__filtered {
+        &_highlighted {
+            background-color: var(--g-color-base-generic-medium);
+        }
+        &_clickable {
+            cursor: pointer;
+
+            color: var(--g-color-text-info);
+        }
+    }
+
+    &__match-btn {
+        margin-left: -1px;
+    }
+
+    &__full-value {
+        overflow: hidden auto;
+
+        max-width: 90vw;
+        max-height: 90vh;
+        margin: var(--g-spacing-3) 0;
+
+        word-break: break-all;
+        @include mixins.body-2-typography();
+    }
+
+    &__extra-tools {
+        margin-left: 1ex;
+    }
+
+    .data-table__head {
+        display: none;
+    }
+
+    .data-table__td {
+        overflow: visible;
+
+        padding: 0;
+    }
+}