Merge pull request #12 from opengrep/fix-inconsitent-ouput-due-to-rule-paths

dimitris-m · web-flow · commit 74c25d98c86e · 2025-03-06T12:05:22.000Z
Fix inconsitent ouput due to rule paths
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "opengrep-playground",
   "productName": "opengrep-playground",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Opengrep Playgorund Editor",
   "main": ".vite/build/main.js",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
@@ -43,6 +43,8 @@ import RuleResults from './components/RuleResults.vue';
 import DebugSection from './components/DebugSection.vue';
 import RuleEditor from './components/RuleEditor.vue';
 import { store } from './store';
+import { getLanguage } from './language.mapper';
+
 
 const getRootDir = inject('$getRootDir');
 const getSafeDir = inject('$getSafeDir');
@@ -68,11 +70,11 @@ function handleShowDataFlows(dataFlows) {
 
 async function handleCodeEditorUpdate() {
   try {
-    if (store.ruleEditorCode === '') {
+    if (store.ruleEditorCode.normalizedRule === '') {
       return;
     }
 
-    const codeSampleFilePath = await joinPath(store.safeDir, "tmp", `untitled_code.${store.languageDetails?.extension ?? 'txt'}`);
+    const codeSampleFilePath = await joinPath(store.safeDir, "tmp", `untitled_code.${store.languageDetails?.extension}`);
     await writeFile(codeSampleFilePath, store.codeEditorCode, { flag: 'w' }); // 'w' flag to create or overwrite the file
     store.codeSampleFilePath = codeSampleFilePath;
 
@@ -85,7 +87,7 @@ async function handleCodeEditorUpdate() {
 async function handleRuleEditorUpdate() {
   try {
     const ruleFilePath = await joinPath(store.safeDir, "tmp", 'untitled_rule.yaml');
-    await writeFile(ruleFilePath, store.ruleEditorCode, { flag: 'w' }); // 'w' flag to create or overwrite the file
+    await writeFile(ruleFilePath, store.ruleEditorCode.normalizedRule, { flag: 'w' }); // 'w' flag to create or overwrite the file
     store.ruleFilePath = ruleFilePath;
     await handleCodeEditorUpdate();
   } catch (error) {
@@ -94,14 +96,6 @@ async function handleRuleEditorUpdate() {
   }
 }
 
-function handleHistoryClick(entry) {
-  if (entry.editorType === 'code-editor') {
-    store.codeEditorCode = entry.content;
-  } else if (entry.editorType === 'rule-editor') {
-    store.ruleEditorCode = entry.content;
-  }
-}
-
 function startResize(event, columnIndex) {
   resizingColumn.value = columnIndex;
   startX.value = event.clientX;
diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
@@ -13,8 +13,8 @@ const emit = defineEmits(['codeEditorUpdated']);
 
 const MONACO_EDITOR_OPTIONS = {
     automaticLayout: true,
-    formatOnType: true,
-    formatOnPaste: true,
+    formatOnType: false,
+    formatOnPaste: false,
     wordBasedSuggestionsOnlySameLanguage: true,
     semanticHighlighting: { enabled: 'configuredByTheme' },
     readOnly: false,
diff --git a/src/components/RuleEditor.vue b/src/components/RuleEditor.vue
@@ -4,10 +4,11 @@
 </template>
 
 <script setup>
-import { shallowRef, watch, inject } from 'vue';
+import { shallowRef, watch } from 'vue';
 import { VueMonacoEditor } from '@guolao/vue-monaco-editor';
 import yaml from 'js-yaml';
 import { store } from '../store';
+import { getLanguage } from '../language.mapper';
 
 const emit = defineEmits(['ruleEditorUpdated']);
 const language = 'yaml';
@@ -32,100 +33,51 @@ const MONACO_EDITOR_OPTIONS = {
         horizontal: 'hidden'
     }
 };
-const languageMappings = {
-    js: { ext: "js", monaco: "javascript" },
-    ts: { ext: "ts", monaco: "typescript" },
-    javascript: { ext: "js", monaco: "javascript" },
-    typescript: { ext: "ts", monaco: "typescript" },
-    python: { ext: "py", monaco: "python" },
-    go: { ext: "go", monaco: "go" },
-    java: { ext: "java", monaco: "java" },
-    c: { ext: "c", monaco: "c" },
-    cpp: { ext: "cpp", monaco: "cpp" },
-    php: { ext: "php", monaco: "php" },
-    ruby: { ext: "rb", monaco: "ruby" },
-    swift: { ext: "swift", monaco: "swift" },
-    kotlin: { ext: "kt", monaco: "kotlin" },
-    rust: { ext: "rs", monaco: "rust" },
-    csharp: { ext: "cs", monaco: "csharp" },
-    terraform: { ext: "tf", monaco: "terraform" },
-    yaml: { ext: "yaml", monaco: "yaml" },
-    yml: { ext: "yml", monaco: "yaml" },
-    scala: { ext: "scala", monaco: "scala" },
-    json: { ext: "json", monaco: "json" },
-    xml: { ext: "xml", monaco: "xml" },
-    sql: { ext: "sql", monaco: "sql" },
-    dockerfile: { ext: "dockerfile", monaco: "dockerfile" },
-    plaintext: { ext: "txt", monaco: "plaintext" },
-    dart: { ext: "dart", monaco: "dart" },
-    elixir: { ext: "ex", monaco: "plaintext" },
-    jsp: { ext: "jsp", monaco: "jsp" },
-    html: { ext: "html", monaco: "html" },
-    css: { ext: "css", monaco: "css" },
-    scss: { ext: "scss", monaco: "scss" },
-    less: { ext: "less", monaco: "less" },
-    bash: { ext: "bash", monaco: "shell" },
-    apex: { ext: "cls", monaco: "apex" },
-    closure: { ext: "clj", monaco: "clojure" },
-    libsonnet: { ext: "jsonnet", monaco: "jsonnet" },
-    ocaml: { ext: "ml", monaco: "ocaml" },
-    solidity: { ext: "sol", monaco: "solidity" },
-    generic: { ext: null, monaco: "plaintext" },
-    vue: { ext: "vue", monaco: "javascript" },
-    react: { ext: "jsx", monaco: "javascript" },
-    angular: { ext: "ts", monaco: "typescript" },
-    svelte: { ext: "svelte", monaco: "javascript" },
-    android: { ext: "AndroidManifest.xml", monaco: "xml" },
-};
 
 const editorRef = shallowRef();
 const handleMount = editor => (editorRef.value = editor);
 
 watch(() => store.ruleEditorCode, (newCode) => {
     if (editorRef.value) {
         const model = editorRef.value.getModel();
-        if (model && model.getValue() !== newCode) {
-            model.setValue(newCode);
+        if (model && model.getValue() !== newCode.originalRule) {
+            model.setValue(newCode.normalizedRule);
         }
     }
 });
 
 function handleCodeChange(code) {
-    store.languageDetails = getLanguageDetails(code);
-    store.ruleEditorCode = code;
+    const parsedYamlCode = yaml.load(code);
+    if (!parsedYamlCode || !parsedYamlCode.rules || parsedYamlCode.rules.length === 0) {
+        return null;
+    }
+    const { paths, ...rest } = parsedYamlCode.rules[0];
+
+    store.languageDetails = getLanguageDetails(rest);
+
+    store.ruleEditorCode = {
+        originalRule: code,
+        normalizedRule: yaml.dump({
+            ...parsedYamlCode,
+            rules: [{ ...rest }]
+        })
+    };
     store.disableBinaryRun = !store.languageDetails;
     emit('ruleEditorUpdated');
 };
 
 function getLanguageDetails(yamlContent) {
-    const parsedYaml = yaml.load(yamlContent);
-
-    if (!parsedYaml || !parsedYaml.rules || parsedYaml.rules.length === 0) {
-        return null;
-    }
-
-    const languages = parsedYaml.rules ? parsedYaml.rules[0]?.languages : []; // Take the first rule
+    const languages = yamlContent?.languages
     if (!languages || languages.length === 0) {
         return null
     }
 
-    // Get the first supported language
-    let primaryLanguage = languages.find(lang => languageMappings[lang]);
-    if (!primaryLanguage) {
-        return null;
-    }
-    if (primaryLanguage === 'xml' && parsedYaml.rules[0].paths.include.some(path => path.includes('AndroidManifest.xml'))) {
-        primaryLanguage = 'android';
+    if(languages.length > 1){
+        return getLanguage('generic');
     }
 
-    let extension = languageMappings[primaryLanguage].ext;
-    if (primaryLanguage === 'generic') {
-        extension = parsedYaml.rules[0].paths.include[0].split('.').pop()
-    }
-
-    return {
-        extension,
-        monacoLanguage: languageMappings[primaryLanguage].monaco
-    };
+    // Get the first supported language
+    return getLanguage(languages[0]) ?? getLanguage('generic');
 }
+
 </script>
diff --git a/src/components/RuleResults.vue b/src/components/RuleResults.vue
@@ -31,7 +31,8 @@
                             </div>
                         </div>
                         <div class="result-footer" v-if="result.extra.dataflow_trace">
-                            <button class="small" @click="handleShowDataFlows(result.extra.dataflow_trace)" style="align-self: center;">Show
+                            <button class="small" @click="handleShowDataFlows(result.extra.dataflow_trace)"
+                                style="align-self: center;">Show
                                 dataflows</button>
                         </div>
                     </div>
@@ -41,7 +42,8 @@
 
         <!-- TEST RESULTS -->
         <h4 @click="toggleSection('testResults')" style="cursor: pointer;">
-            Test Results ({{ store.jsonResult?.parsedTestResults.filter(test => test.status === 'SUCCESS').length }}/{{ store.jsonResult?.parsedTestResults.length }} Unit Tests Passed)
+            Test Results ({{ store.jsonResult?.parsedTestResults.filter(test => test.status === 'SUCCESS').length }}/{{
+            store.jsonResult?.parsedTestResults.length }} Unit Tests Passed)
         </h4>
         <div style="flex: 1" class="scrollable-section">
             <div v-if="isTestLoading" class="loading-container">
@@ -178,7 +180,7 @@ async function runBinaryForScan(binaryPath, runScanWithoutMatchingExplanations)
 
 function extractScanErrors(jsonOutput) {
     return jsonOutput.errrors.forEach(error => {
-        showErrorDialog(`${error.level}: ${error.type}`, error.message);        
+        showErrorDialog(`${error.level}: ${error.type}`, error.message);
     });
 }
 
diff --git a/src/language.mapper.js b/src/language.mapper.js
@@ -0,0 +1,71 @@
+const languageMappings = {
+    js: { ext: "js", monaco: "javascript" },
+    ts: { ext: "ts", monaco: "typescript" },
+    javascript: { ext: "js", monaco: "javascript" },
+    typescript: { ext: "ts", monaco: "typescript" },
+    python: { ext: "py", monaco: "python" },
+    py: { ext: "py", monaco: "python" },
+    go: { ext: "go", monaco: "go" },
+    java: { ext: "java", monaco: "java" },
+    c: { ext: "c", monaco: "c" },
+    cpp: { ext: "cpp", monaco: "cpp" },
+    php: { ext: "php", monaco: "php" },
+    ruby: { ext: "rb", monaco: "ruby" },
+    rb: { ext: "rb", monaco: "ruby" },
+    swift: { ext: "swift", monaco: "swift" },
+    kotlin: { ext: "kt", monaco: "kotlin" },
+    kt: { ext: "kt", monaco: "kotlin" },
+    rust: { ext: "rs", monaco: "rust" },
+    rs: { ext: "rs", monaco: "rust" },
+    csharp: { ext: "cs", monaco: "csharp" },
+    cs: { ext: "cs", monaco: "csharp" },
+    terraform: { ext: "tf", monaco: "terraform" },
+    tf: { ext: "tf", monaco: "terraform" },
+    yaml: { ext: "yaml", monaco: "yaml" },
+    yml: { ext: "yml", monaco: "yaml" },
+    scala: { ext: "scala", monaco: "scala" },
+    json: { ext: "json", monaco: "json" },
+    xml: { ext: "xml", monaco: "xml" },
+    sql: { ext: "sql", monaco: "sql" },
+    dockerfile: { ext: "dockerfile", monaco: "dockerfile" },
+    plaintext: { ext: "txt", monaco: "plaintext" },
+    txt: { ext: "txt", monaco: "plaintext" },
+    dart: { ext: "dart", monaco: "dart" },
+    elixir: { ext: "ex", monaco: "plaintext" },
+    ex: { ext: "ex", monaco: "plaintext" },
+    jsp: { ext: "jsp", monaco: "jsp" },
+    html: { ext: "html", monaco: "html" },
+    css: { ext: "css", monaco: "css" },
+    scss: { ext: "scss", monaco: "scss" },
+    less: { ext: "less", monaco: "less" },
+    bash: { ext: "bash", monaco: "shell" },
+    apex: { ext: "cls", monaco: "apex" },
+    cls: { ext: "cls", monaco: "apex" },
+    closure: { ext: "clj", monaco: "clojure" },
+    clj: { ext: "clj", monaco: "clojure" },
+    libsonnet: { ext: "jsonnet", monaco: "jsonnet" },
+    jsonnet: { ext: "jsonnet", monaco: "jsonnet" },
+    ocaml: { ext: "ml", monaco: "ocaml" },
+    ml: { ext: "ml", monaco: "ocaml" },
+    solidity: { ext: "sol", monaco: "solidity" },
+    sol: { ext: "sol", monaco: "solidity" },
+    generic: { ext: 'txt', monaco: "plaintext" },
+    vue: { ext: "vue", monaco: "javascript" },
+    react: { ext: "jsx", monaco: "javascript" },
+    jsx: { ext: "jsx", monaco: "javascript" },
+    angular: { ext: "ts", monaco: "typescript" },
+    svelte: { ext: "svelte", monaco: "javascript" },
+};
+
+export function getLanguage(language) {
+    const mappedLanguage =  languageMappings[language];
+
+    if(!mappedLanguage){
+        return;
+    }
+
+    return {
+        extension: mappedLanguage.ext,
+        monacoLanguage: mappedLanguage.monaco
+    };
+}
diff --git a/src/renderer.js b/src/renderer.js
@@ -58,7 +58,6 @@ configureMonacoYaml(monaco, {
     },
   ],
 });
-
-loader.config({ monaco })
+loader.config({ monaco });
 
 app.mount('#app');
diff --git a/src/store.js b/src/store.js
@@ -11,7 +11,10 @@ export const store = reactive({
     languageDetails: null,
     ruleFilePath: '',
     codeSampleFilePath: '',
-    ruleEditorCode: '',
+    ruleEditorCode: {
+        originalRule: '',
+        normalizedRule: ''
+    },
     codeEditorCode: '',
     codeEditorDebugLocation: null,
     mustNotMatchTestCases: [],

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "opengrep-playground",`
`3`	`3`	`"productName": "opengrep-playground",`
`4`		`- "version": "1.0.1",`
	`4`	`+ "version": "1.0.2",`
`5`	`5`	`"description": "Opengrep Playgorund Editor",`
`6`	`6`	`"main": ".vite/build/main.js",`
`7`	`7`	`"scripts": {`