Merge pull request #66 from christophby/master

Add key filter to sidebar and change add-color
jk-gan · Feb 4, 2023 · d43cb3d · d43cb3d
2 parents 95edcdb + f8e6de9
commit d43cb3d
Showing 1 changed file with 80 additions and 44 deletions.
diff --git a/index.tsx b/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   PluginClient,
   createState,
@@ -12,6 +12,8 @@ import {
   Tabs,
   Tab,
   useMemoize,
+  styled,
+  theme,
 } from "flipper-plugin";
 import { Button, Input, message } from "antd";
 
@@ -107,12 +109,9 @@ export function plugin(client: PluginClient<Events, {}>) {
         const actionTypeValue = actionType.get();
         let actionPayload;
         try {
-          actionPayload =
-            payloadStringValue.trim() == ""
-              ? []
-              : JSON.parse(payloadStringValue);
+          actionPayload = payloadStringValue.trim() == "" ? [] : JSON.parse(payloadStringValue);
         } catch (e) {
-          //can happen when we try to parse a string input
+          // can happen when we try to parse a string input
           message.error("Invalid JSON format in the payload");
           actionPayload = payloadStringValue;
         }
@@ -141,6 +140,16 @@ export function plugin(client: PluginClient<Events, {}>) {
   };
 }
 
+const Container = styled.div({
+  // Styling DataInspector's 'added' objects
+  '& div[class*="-Added"]': {
+    backgroundColor: '#deffdd',
+    '@media (prefers-color-scheme: dark)': {
+      backgroundColor: theme.semanticColors.diffAddedBackground,
+    },
+  },
+});
+
 export function Component() {
   const instance = usePlugin(plugin);
   const actions = useValue(instance.actions);
@@ -154,16 +163,8 @@ export function Component() {
   return (
     <>
       <Panel title="Dispatch Action to the app" gap pad>
-        <Input
-          allowClear
-          value={actionType}
-          onChange={instance.setActionType}
-        />
-        <TextArea
-          rows={4}
-          value={actionPayloadString}
-          onChange={instance.setActionPayloadString}
-        />
+        <Input allowClear value={actionType} onChange={instance.setActionType} />
+        <TextArea rows={4} value={actionPayloadString} onChange={instance.setActionPayloadString} />
         <Button onClick={instance.sendDispatchMessage}>Dispatch Action</Button>
       </Panel>
       <DataTable<Record<string, any>>
@@ -184,6 +185,37 @@ export function Component() {
 }
 
 function renderSidebar(selectedData: ActionState) {
+  const [keyFilter, setKeyFilter] = useState('');
+  const [filteredSelectedData, setFilteredSelectedData] = useState<typeof selectedData>(selectedData);
+
+  useEffect(() => {
+    if (!keyFilter || !selectedData) {
+      setFilteredSelectedData(selectedData);
+      return;
+    }
+    const filteredData: ActionState = {
+      ...selectedData,
+      before: {},
+      after: {},
+    };
+
+    Object.keys(selectedData.after).forEach(key => {
+      if (key.toLowerCase().includes(keyFilter.toLowerCase())) {
+        const typedKey = key as keyof typeof selectedData.after;
+        filteredData.after[typedKey] = selectedData.after[typedKey] || {};
+      }
+    });
+
+    Object.keys(selectedData.before).forEach(key => {
+      if (key.toLowerCase().includes(keyFilter.toLowerCase())) {
+        const typedKey = key as keyof typeof selectedData.before;
+        filteredData.before[typedKey] = selectedData.before[typedKey];
+      }
+    });
+
+    setFilteredSelectedData(filteredData);
+  }, [selectedData, keyFilter]);
+
   if (!selectedData) {
     return;
   }
@@ -195,33 +227,37 @@ function renderSidebar(selectedData: ActionState) {
   };
 
   return (
-    <Layout.Container gap pad>
-      <Panel title="Action" gap pad>
-        <DataInspector
-          data={actionData}
-          collapsed={true}
-          expandRoot={true}
-        ></DataInspector>
-      </Panel>
-      <Panel title="State" gap pad>
-        <Tabs defaultActiveKey="Diff" centered={true}>
-          <Tab tab="Diff" tabKey="Diff">
-            <DataInspector
-              diff={selectedData.before}
-              data={selectedData.after}
-              collapsed={true}
-              expandRoot={false}
-            ></DataInspector>
-          </Tab>
-          <Tab tab="State Tree" tabKey="StateTree">
-            <DataInspector
-              data={selectedData.after}
-              collapsed={true}
-              expandRoot={false}
-            ></DataInspector>
-          </Tab>
-        </Tabs>
-      </Panel>
-    </Layout.Container>
+    <Container>
+      <Layout.Container gap pad>
+        <Panel title="Action" gap pad>
+          <DataInspector data={actionData} collapsed={true} expandRoot={true}></DataInspector>
+        </Panel>
+        <Panel title="State" gap pad>
+          <Input
+            allowClear
+            value={keyFilter}
+            placeholder="Filter state keys..."
+            style={{marginTop: 8}}
+            onChange={e => setKeyFilter(e.target.value)}
+          />
+          <Tabs defaultActiveKey="Diff" centered={true}>
+            <Tab tab="Diff" tabKey="Diff">
+              <DataInspector
+                diff={filteredSelectedData?.before}
+                data={filteredSelectedData?.after}
+                collapsed={true}
+                filter={keyFilter}
+                highlightColor={theme.searchHighlightBackground.green}
+                expandRoot={!!keyFilter}
+              >
+              </DataInspector>
+            </Tab>
+            <Tab tab="State Tree" tabKey="StateTree">
+              <DataInspector data={selectedData.after} collapsed={true} expandRoot={false}></DataInspector>
+            </Tab>
+          </Tabs>
+        </Panel>
+      </Layout.Container>
+    </Container>
   );
 }