Merge pull request #14 from opengrep/fix-wrong-rule-parsing

fix: wrong multi rule parsing

Author: willem-delbare

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "opengrep-playground",
   "productName": "opengrep-playground",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Opengrep Playgorund Editor",
   "main": ".vite/build/main.js",
   "scripts": {

package.json

@@ -49,20 +49,38 @@ watch(() => store.ruleEditorCode, (newCode) => {
 function handleCodeChange(code) {
     const parsedYamlCode = yaml.load(code);
     if (!parsedYamlCode || !parsedYamlCode.rules || parsedYamlCode.rules.length === 0) {
+        // when parsed yaml is empty, reset the normalized rule and original rule and disable binary run
+        store.ruleEditorCode = {
+            originalRule: code,
+            normalizedRule: code
+        };
+        // Disable the eval button if the rule editor is empty. 
+        // Running the binary by clicking on the evaluate button doesn't make sense when no rule is configured. 
+        store.disableEvalButton = true;
         return null;
     }
-    const { paths, ...rest } = parsedYamlCode.rules[0];
 
-    store.languageDetails = getLanguageDetails(rest);
+    const rulesArray = parsedYamlCode.rules.reduce((accumulator, rule) => {
+        const { paths, ...rest } = rule;
+
+        const detectedLanguage = getLanguageDetails(rest);
+        if (detectedLanguage) {
+            store.languageDetails = detectedLanguage
+        }
+
+        accumulator.push(rest)
+        return accumulator;
+    }, []);
 
     store.ruleEditorCode = {
         originalRule: code,
         normalizedRule: yaml.dump({
-            ...parsedYamlCode,
-            rules: [{ ...rest }]
+            rules: rulesArray
         })
     };
-    store.disableBinaryRun = !store.languageDetails;
+
+    // Enable the eval button if the rule editor is not empty
+    store.disableEvalButton = false;
     emit('ruleEditorUpdated');
 };
 

src/components/RuleEditor.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="results-header">
         <h3>Results</h3>
-        <button @click="handleRunBinary" :class="{ 'disabled': store.disableBinaryRun }">Evaluate</button>
+        <button @click="handleRunBinary" :class="{ 'disabled': store.disableEvalButton }">Evaluate</button>
     </div>
 
     <div class="results-container">
@@ -97,7 +97,7 @@ onMounted(async () => {
 
 
 async function handleRunBinary() {
-    if (!store.ruleEditorCode) return;
+    if (!store.ruleEditorCode || store.disableEvalButton) return;
 
     isScanLoading.value = true;
     isTestLoading.value = true;

src/components/RuleResults.vue

@@ -18,5 +18,5 @@ export const store = reactive({
     codeEditorCode: '',
     codeEditorDebugLocation: null,
     mustNotMatchTestCases: [],
-    disableBinaryRun: true,
+    disableEvalButton: true,
 });