RS-594: Filter data in object explorer with when conditions

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - RS-580: browse records in the console, [PR-76](https://github.com/reductstore/web-console/pull/76)
 - RS-588: add useful links in the side menu, [PR-79](https://github.com/reductstore/web-console/pull/79)
+- RS-594: filter data with when conditions in object explorer, [PR-80](https://github.com/reductstore/web-console/pull/80)
 
 ### [1.8.1] - 2024-12-16
 

package.json

@@ -31,7 +31,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",
-    "reduct-js": "^1.10.1",
+    "reduct-js": "^1.13.0",
     "stream-browserify": "^3.0.0",
     "ts-jest": "^27.1.5",
     "typescript": "^4.9.5",
@@ -64,5 +64,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "codemirror": "^5.65.18",
+    "react-codemirror2": "^8.0.1"
   }
 }

src/App.css

@@ -42,7 +42,13 @@
 .MenuContainer {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 150px);
+}
+
+.Divider {
+  height: 1px;
+  background-color: #cccccc;
+  opacity: 1;
+  margin: 20px 10px;
 }
 
 .MainMenu {

src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ConfigProvider, Divider, Image, Layout, Menu } from "antd";
+import { ConfigProvider, Image, Layout, Menu } from "antd";
 import { RouteComponentProps } from "react-router-dom";
 import type { MenuProps } from "antd";
 
@@ -142,23 +142,21 @@ export default class App extends React.Component<Props, State> {
                 mode="inline"
                 items={getMenuItems()}
               />
-              <Divider />
+              <div className="Divider" />
               {permissions && (
-                <>
-                  <Menu
-                    className="MenuItem LogoutMenu"
-                    selectable={false}
-                    mode="inline"
-                    items={[
-                      {
-                        key: "logout",
-                        icon: <LogoutOutlined />,
-                        label: "Logout",
-                        onClick: onLogout,
-                      },
-                    ]}
-                  />
-                </>
+                <Menu
+                  className="MenuItem LogoutMenu"
+                  selectable={false}
+                  mode="inline"
+                  items={[
+                    {
+                      key: "logout",
+                      icon: <LogoutOutlined />,
+                      label: "Logout",
+                      onClick: onLogout,
+                    },
+                  ]}
+                />
               )}
             </div>
             <div className="Meta">

src/Views/BucketPanel/EntryDetail.css

@@ -4,9 +4,9 @@
 
 .detailControls {
   display: flex;
-  gap: 1em;
-  flex-wrap: wrap;
-  margin-bottom: 1em;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
   margin-top: 0.5em;
 }
 
@@ -26,3 +26,34 @@
 .limitInput {
   width: 120px;
 }
+
+.jsonFilterSection {
+  margin: 10px 0;
+  width: 100%;
+}
+
+.jsonEditor {
+  margin: 8px 0;
+  margin-bottom: 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+
+.jsonEditor .CodeMirror {
+  height: auto;
+  min-height: 100px;
+}
+
+.CodeMirror-scroll {
+  min-height: 100px;
+}
+
+.jsonExample {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.fetchButton {
+  display: block;
+}

src/Views/BucketPanel/EntryDetail.test.tsx

@@ -6,6 +6,8 @@ import { MemoryRouter } from "react-router-dom";
 import waitUntil from "async-wait-until";
 import { act } from "react-dom/test-utils";
 import { DownloadOutlined } from "@ant-design/icons";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript";
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
@@ -110,6 +112,18 @@ describe("EntryDetail", () => {
       expect(limitInput.exists()).toBe(true);
       expect(limitInput.props().className).toContain("ant-input-number");
     });
+
+    it("should show the CodeMirror editor for JSON filtering", () => {
+      const codeMirror = wrapper.find(".react-codemirror2");
+      expect(codeMirror.exists()).toBe(true);
+      const cmInstance = wrapper.find("Controlled").prop("options");
+      expect(cmInstance).toEqual(
+        expect.objectContaining({
+          mode: { name: "javascript", json: true },
+          lineNumbers: true,
+        }),
+      );
+    });
   });
 
   it("should fetch and display records", async () => {
@@ -169,7 +183,7 @@ describe("EntryDetail", () => {
     wrapper.update();
 
     const downloadLink = wrapper.find("a");
-    expect(downloadLink.length).toBe(2);
+    expect(downloadLink.length).toBe(3);
     expect(downloadLink.at(0).props().children).toBe("testBucket");
     expect(downloadLink.at(1)).toBeDefined();
   });