feat: add yaml widget

Author: HerringtonDarkholme

src/extension/webview.ts

@@ -125,6 +125,8 @@ function clearSearchResults() {
 }
 
 function enableYAML() {
+  parentPort.postMessage('enableYAML', true)
+  parentPort.postMessage('clearSearchResults', {})
   vscode.commands.executeCommand(
     'setContext',
     'ast-grep.yamlMode',
@@ -133,6 +135,8 @@ function enableYAML() {
 }
 
 function enablePattern() {
+  parentPort.postMessage('enableYAML', false)
+  parentPort.postMessage('clearSearchResults', {})
   vscode.commands.executeCommand(
     'setContext',
     'ast-grep.yamlMode',

src/types.ts

@@ -70,6 +70,7 @@ export interface ParentToChild {
   clearSearchResults: unknown
   toggleAllSearch: unknown
   searchByCode: { text: string }
+  enableYAML: boolean
 }
 
 export interface Diff {

src/webview/SearchSidebar/SearchWidgetContainer/YamlWidget.tsx

@@ -0,0 +1,46 @@
+import * as stylex from '@stylexjs/stylex'
+import { VSCodeButton, VSCodeTextArea } from '@vscode/webview-ui-toolkit/react'
+import { useState } from 'react'
+
+const styles = stylex.create({
+  yaml: {
+    marginLeft: 18,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  editor: {
+    width: '100%',
+  },
+  searchButton: {
+    marginTop: 4,
+    alignSelf: 'flex-end',
+  },
+})
+
+export default function YamlWidget() {
+  const [value, setValue] = useState('')
+  return (
+    <div {...stylex.props(styles.yaml)}>
+      <VSCodeTextArea
+        {...stylex.props(styles.editor)}
+        value={value}
+        placeholder="YAML configuration"
+        resize="vertical"
+        onInput={(e: any) => {
+          const newValue = e.target.value || ''
+          setValue(newValue)
+        }}
+      />
+      <VSCodeButton
+        {...stylex.props(styles.searchButton)}
+        appearance="primary"
+        onClick={() => {
+          // Handle save or apply logic here
+          console.log('YAML Config:', value)
+        }}
+      >
+        Search
+      </VSCodeButton>
+    </div>
+  )
+}

src/webview/SearchSidebar/SearchWidgetContainer/index.tsx

@@ -1,11 +1,18 @@
-import { memo } from 'react'
+import { memo, useState } from 'react'
+import { useEffectOnce } from 'react-use'
+import { childPort } from '../../postMessage'
 import SearchOptions from './SearchOptions'
 import SearchWidget from './SearchWidget'
+import YamlWidget from './YamlWidget'
 
 function SearchWidgetContainer() {
+  const [isYaml, setIsYaml] = useState(false)
+  useEffectOnce(() => {
+    childPort.onMessage('enableYAML', setIsYaml)
+  })
   return (
     <div style={{ margin: '0 12px 0 2px' }}>
-      <SearchWidget />
+      {isYaml ? <YamlWidget /> : <SearchWidget />}
       <SearchOptions />
     </div>
   )