From e2aa43e946bf3d6d51770b363523c5d696cd1c3e Mon Sep 17 00:00:00 2001 From: Ruhan Date: Thu, 8 Aug 2024 14:22:32 +0530 Subject: [PATCH 1/8] added yaml editor --- docs/configure-coderabbit.md | 10 ++ package-lock.json | 42 +++++++++ package.json | 1 + src/components/YamlEditor/YamlEditor.jsx | 111 +++++++++++++++++++++++ 4 files changed, 164 insertions(+) create mode 100644 src/components/YamlEditor/YamlEditor.jsx diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md index a2b35f10..0b6d4165 100644 --- a/docs/configure-coderabbit.md +++ b/docs/configure-coderabbit.md @@ -12,6 +12,10 @@ sidebar_position: 3 import SchemaViewer from "@site/src/components/SchemaViewer"; ``` +```mdx-code-block +import YamlEditor from "/src/components/YamlEditor/YamlEditor"; +``` + CodeRabbit offers various configuration options to tailor the reviews to your requirements. Configuration can be made using one of the below options, in order of precedence: @@ -56,6 +60,12 @@ chat: auto_reply: true ``` +Write your configuration file in the below editor to validate: + +```mdx-code-block + +``` + The configuration file can be used to set the following options: ```mdx-code-block diff --git a/package-lock.json b/package-lock.json index b7c323c4..a0f1c019 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "postcss": "^8.4.32", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", + "react-ace": "^12.0.0", "react-dom": "^18.0.0", "tailwindcss": "^3.4.0" }, @@ -3988,6 +3989,12 @@ "node": ">= 0.6" } }, + "node_modules/ace-builds": { + "version": "1.35.4", + "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.35.4.tgz", + "integrity": "sha512-r0KQclhZ/uk5a4zOqRYQkJuQuu4vFMiA6VTj54Tk4nI1TUR3iEMMppZkWbNoWEgWwv4ciDloObb9Rf4V55Qgjw==", + "license": "BSD-3-Clause" + }, "node_modules/acorn": { "version": "8.11.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", @@ -5747,6 +5754,12 @@ "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==" }, + "node_modules/diff-match-patch": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz", + "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==", + "license": "Apache-2.0" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -8316,6 +8329,18 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, + "node_modules/lodash.get": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", + "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==", + "license": "MIT" + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "license": "MIT" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -12216,6 +12241,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-ace": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-12.0.0.tgz", + "integrity": "sha512-PstU6CSMfYIJknb4su2Fa0WgLXzq2ufQgR6fjcSWuGT1hGTHkBzuKw+SncV8PuLCdSJBJc1VehPhyeXlWByG/g==", + "license": "MIT", + "dependencies": { + "ace-builds": "^1.32.8", + "diff-match-patch": "^1.0.5", + "lodash.get": "^4.4.2", + "lodash.isequal": "^4.5.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index 3c82d516..4f257c51 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "postcss": "^8.4.32", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", + "react-ace": "^12.0.0", "react-dom": "^18.0.0", "tailwindcss": "^3.4.0" }, diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx new file mode 100644 index 00000000..6818ceb5 --- /dev/null +++ b/src/components/YamlEditor/YamlEditor.jsx @@ -0,0 +1,111 @@ +import { React, useState } from "react"; + +import AceEditor from "react-ace"; +import "ace-builds/src-noconflict/theme-github"; +import "ace-builds/src-noconflict/ext-language_tools"; + +import "ace-builds/webpack-resolver"; +import "ace-builds/src-noconflict/mode-yaml"; + +import jsYaml from "js-yaml"; + +import Ajv from "ajv"; +const ajv = new Ajv({ allErrors: true }); + +import Schema from "../../../static/schema/schema.v2.json"; + +export default function YamlEditor() { + const [annotations, setAnnotations] = useState([]); + const [value, setValue] = useState( + "# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json\n" + ); + const validate = ajv.compile(Schema.definitions.schema); + function getRowFromPath(path) { + // Convert path to row number (0-based) + return path.split("/").length - 1; + } + function getLineNumber(yaml, path) { + const lines = yaml.split("\n"); + const pathParts = path.split("/").filter(Boolean); + let currentObj = jsYaml.load(yaml); + let lineNumber = 0; + + for (const part of pathParts) { + for (let i = lineNumber; i < lines.length; i++) { + if (lines[i].trim().startsWith(part + ":")) { + lineNumber = i; + break; + } + } + currentObj = currentObj[part]; + } + + return lineNumber; + } + function onChange(newValue) { + setValue(newValue); + try { + const doc = jsYaml.load(newValue, { strict: true }); + const valid = validate(doc); + console.log("Validation result:", valid); + console.log("Validation errors:", validate.errors); + + if (!valid && validate.errors) { + setAnnotations( + validate.errors.map((err) => ({ + row: err.instancePath + ? getLineNumber(newValue, err.instancePath) + : 0, + column: 0, + text: `${err.keyword}: ${err.message} ${ + err?.params?.allowedValues + ? `Allowed values: ${err.params.allowedValues.join(", ")}` + : "" + }`, + type: "error", + })) + ); + } else { + setAnnotations([]); + } + } catch (err) { + console.error("Error:", err); + console.log({ + errorMessage: err.reason, + column: err.mark?.column, + line: err.mark?.line, + }); + setAnnotations([ + { + row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0, + column: 0, + text: + `${err.keyword}: ${err.message} ${ + err?.params?.allowedValues + ? `Allowed values: ${err.params.allowedValues.join(", ")}` + : "" + }` || "YAML parsing error", + type: "error", + }, + ]); + } + } + return ( + + ); +} From 88a5b714a0a220d5df40730f4f357e74ab4688ec Mon Sep 17 00:00:00 2001 From: Ruhan Date: Thu, 8 Aug 2024 14:25:09 +0530 Subject: [PATCH 2/8] name fix --- src/components/YamlEditor/YamlEditor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx index 6818ceb5..e699fe2c 100644 --- a/src/components/YamlEditor/YamlEditor.jsx +++ b/src/components/YamlEditor/YamlEditor.jsx @@ -96,7 +96,7 @@ export default function YamlEditor() { theme="github" onChange={onChange} value={value} - name="UNIQUE_ID_OF_DIV" + name="yaml-editor" editorProps={{ $blockScrolling: true }} setOptions={{ useWorker: false, From 6540733a1b1abf9f1bc02b93e05f4ccbeaed79ed Mon Sep 17 00:00:00 2001 From: Ruhan Date: Fri, 9 Aug 2024 11:33:58 +0530 Subject: [PATCH 3/8] moved component to one code block --- docs/configure-coderabbit.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md index 0b6d4165..e44c3936 100644 --- a/docs/configure-coderabbit.md +++ b/docs/configure-coderabbit.md @@ -10,9 +10,6 @@ sidebar_position: 3 ```mdx-code-block import SchemaViewer from "@site/src/components/SchemaViewer"; -``` - -```mdx-code-block import YamlEditor from "/src/components/YamlEditor/YamlEditor"; ``` From 8e2c75c5351a85c84b872d77d2f75825c588cdc2 Mon Sep 17 00:00:00 2001 From: Ruhan Date: Fri, 9 Aug 2024 11:35:25 +0530 Subject: [PATCH 4/8] removed logs --- src/components/YamlEditor/YamlEditor.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx index e699fe2c..a60564ba 100644 --- a/src/components/YamlEditor/YamlEditor.jsx +++ b/src/components/YamlEditor/YamlEditor.jsx @@ -47,8 +47,6 @@ export default function YamlEditor() { try { const doc = jsYaml.load(newValue, { strict: true }); const valid = validate(doc); - console.log("Validation result:", valid); - console.log("Validation errors:", validate.errors); if (!valid && validate.errors) { setAnnotations( @@ -69,12 +67,6 @@ export default function YamlEditor() { setAnnotations([]); } } catch (err) { - console.error("Error:", err); - console.log({ - errorMessage: err.reason, - column: err.mark?.column, - line: err.mark?.line, - }); setAnnotations([ { row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0, From 05f12c21fa640a66c0173f1e9d96ac00a5fea6ac Mon Sep 17 00:00:00 2001 From: Ruhan Date: Fri, 16 Aug 2024 15:24:53 +0530 Subject: [PATCH 5/8] fix: yaml editor --- docs/configure-coderabbit.md | 18 --- src/components/YamlEditor/YamlEditor.jsx | 140 ++++++++++++++++------- 2 files changed, 96 insertions(+), 62 deletions(-) diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md index e44c3936..c468ca19 100644 --- a/docs/configure-coderabbit.md +++ b/docs/configure-coderabbit.md @@ -39,24 +39,6 @@ You can add a `.coderabbit.yaml` configuration file to the root of your repositories. Below is a sample YAML file that can be used as a starting point and changed as needed: -```yaml -# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json -language: "en-US" -early_access: false -reviews: - profile: "chill" - request_changes_workflow: false - high_level_summary: true - poem: true - review_status: true - collapse_walkthrough: false - auto_review: - enabled: true - drafts: false -chat: - auto_reply: true -``` - Write your configuration file in the below editor to validate: ```mdx-code-block diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx index a60564ba..62a50c3a 100644 --- a/src/components/YamlEditor/YamlEditor.jsx +++ b/src/components/YamlEditor/YamlEditor.jsx @@ -1,4 +1,4 @@ -import { React, useState } from "react"; +import { React, useState, useEffect } from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/theme-github"; @@ -14,65 +14,70 @@ const ajv = new Ajv({ allErrors: true }); import Schema from "../../../static/schema/schema.v2.json"; +const validate = ajv.compile(Schema.definitions.schema); + export default function YamlEditor() { + const [value, setValue] = useState(""); const [annotations, setAnnotations] = useState([]); - const [value, setValue] = useState( - "# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json\n" - ); - const validate = ajv.compile(Schema.definitions.schema); - function getRowFromPath(path) { - // Convert path to row number (0-based) - return path.split("/").length - 1; - } - function getLineNumber(yaml, path) { - const lines = yaml.split("\n"); - const pathParts = path.split("/").filter(Boolean); - let currentObj = jsYaml.load(yaml); - let lineNumber = 0; - for (const part of pathParts) { - for (let i = lineNumber; i < lines.length; i++) { - if (lines[i].trim().startsWith(part + ":")) { - lineNumber = i; - break; - } - } - currentObj = currentObj[part]; - } + useEffect(() => { + const initialValue = `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json +language: "en-US" +early_access: false +reviews: + profile: "chill" + request_changes_workflow: false + high_level_summary: true + poem: true + review_status: true + collapse_walkthrough: false + auto_review: + enabled: true + drafts: false +chat: + auto_reply: true - return lineNumber; - } - function onChange(newValue) { - setValue(newValue); +`; + setValue(initialValue); + validateAndSetAnnotations(initialValue); + }, []); + function validateAndSetAnnotations(yaml) { try { - const doc = jsYaml.load(newValue, { strict: true }); - const valid = validate(doc); + const doc = jsYaml.load(yaml, { strict: true }); + const isValid = validate(doc); - if (!valid && validate.errors) { + if (!isValid && validate.errors) { setAnnotations( - validate.errors.map((err) => ({ - row: err.instancePath - ? getLineNumber(newValue, err.instancePath) - : 0, - column: 0, - text: `${err.keyword}: ${err.message} ${ - err?.params?.allowedValues - ? `Allowed values: ${err.params.allowedValues.join(", ")}` - : "" - }`, - type: "error", - })) + validate.errors.map((err) => { + const instancePathArr = err?.instancePath?.split("/"); + const key = + instancePathArr && instancePathArr[instancePathArr.length - 1]; + return { + row: err.instancePath ? getLineNumber(yaml, err.instancePath) : 0, + column: 0, + text: `${key}: ${err.message} ${ + err?.params?.allowedValues + ? `Allowed values: ${err.params.allowedValues.join(", ")}` + : "" + }`, + type: "error", + }; + }) ); } else { setAnnotations([]); } } catch (err) { + const instancePathArr = err?.instancePath?.split("/"); + const key = + instancePathArr && instancePathArr[instancePathArr.length - 1]; + setAnnotations([ { - row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0, + row: err.instancePath ? getLineNumber(yaml, err.instancePath) : 0, column: 0, text: - `${err.keyword}: ${err.message} ${ + `${key}: ${err.message} ${ err?.params?.allowedValues ? `Allowed values: ${err.params.allowedValues.join(", ")}` : "" @@ -82,6 +87,53 @@ export default function YamlEditor() { ]); } } + function getLineNumber(yaml, instancePath) { + const lines = yaml.split("\n"); + const pathParts = instancePath.split("/").filter(Boolean); + let currentObj = jsYaml.load(yaml); + let lineNumber = 0; + + const lastPathPart = pathParts[pathParts.length - 1]; + const lastPathPartIndex = pathParts.length - 1; + + for (let i = 0; i < lines.length; i++) { + if (lines[i].trim().startsWith(pathParts[0] + ":")) { + // Found the top-level field + lineNumber = i; + currentObj = currentObj[pathParts[0]]; + + for (let j = 1; j < lastPathPartIndex; j++) { + // Go through the nested fields + for (let k = lineNumber + 1; k < lines.length; k++) { + if (lines[k].trim().startsWith(pathParts[j] + ":")) { + lineNumber = k; + currentObj = currentObj[pathParts[j]]; + break; + } + } + } + + // look for the last path part with array syntax as well as object syntax + for (let l = lineNumber + 1; l < lines.length; l++) { + if (lines[l].trim().startsWith(`- ${lastPathPart}:`)) { + lineNumber = l; + break; + } else if (lines[l].trim().startsWith(lastPathPart + ":")) { + lineNumber = l; + break; + } + } + break; + } + } + + return lineNumber; + } + function onChange(newValue) { + setValue(newValue); + validateAndSetAnnotations(newValue); + } + return ( Date: Fri, 16 Aug 2024 15:53:50 +0530 Subject: [PATCH 6/8] fix: reviews --- .../{YamlEditor.jsx => YamlEditor.tsx} | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) rename src/components/YamlEditor/{YamlEditor.jsx => YamlEditor.tsx} (85%) diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.tsx similarity index 85% rename from src/components/YamlEditor/YamlEditor.jsx rename to src/components/YamlEditor/YamlEditor.tsx index 62a50c3a..f6815dc7 100644 --- a/src/components/YamlEditor/YamlEditor.jsx +++ b/src/components/YamlEditor/YamlEditor.tsx @@ -1,4 +1,4 @@ -import { React, useState, useEffect } from "react"; +import React, { useState, useEffect } from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/theme-github"; @@ -15,13 +15,7 @@ const ajv = new Ajv({ allErrors: true }); import Schema from "../../../static/schema/schema.v2.json"; const validate = ajv.compile(Schema.definitions.schema); - -export default function YamlEditor() { - const [value, setValue] = useState(""); - const [annotations, setAnnotations] = useState([]); - - useEffect(() => { - const initialValue = `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json +const initialValue = `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json language: "en-US" early_access: false reviews: @@ -38,6 +32,11 @@ chat: auto_reply: true `; +export default function YamlEditor() { + const [value, setValue] = useState(initialValue); + const [annotations, setAnnotations] = useState([]); + + useEffect(() => { setValue(initialValue); validateAndSetAnnotations(initialValue); }, []); @@ -135,21 +134,24 @@ chat: } return ( - +

+ +
+

); } From f15190a63419e945ca6d76b879cff382eb860be4 Mon Sep 17 00:00:00 2001 From: Ruhan Date: Fri, 16 Aug 2024 15:55:46 +0530 Subject: [PATCH 7/8] new line --- src/components/YamlEditor/YamlEditor.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/YamlEditor/YamlEditor.tsx b/src/components/YamlEditor/YamlEditor.tsx index f6815dc7..2308f8c9 100644 --- a/src/components/YamlEditor/YamlEditor.tsx +++ b/src/components/YamlEditor/YamlEditor.tsx @@ -40,6 +40,7 @@ export default function YamlEditor() { setValue(initialValue); validateAndSetAnnotations(initialValue); }, []); + function validateAndSetAnnotations(yaml) { try { const doc = jsYaml.load(yaml, { strict: true }); @@ -86,6 +87,7 @@ export default function YamlEditor() { ]); } } + function getLineNumber(yaml, instancePath) { const lines = yaml.split("\n"); const pathParts = instancePath.split("/").filter(Boolean); @@ -128,6 +130,7 @@ export default function YamlEditor() { return lineNumber; } + function onChange(newValue) { setValue(newValue); validateAndSetAnnotations(newValue); From 1321e406abeea489e8ee23ec559babdd2b8658df Mon Sep 17 00:00:00 2001 From: Ruhan Date: Fri, 16 Aug 2024 15:57:41 +0530 Subject: [PATCH 8/8] fix: merge fix --- docs/configure-coderabbit.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md index 53d484c3..c468ca19 100644 --- a/docs/configure-coderabbit.md +++ b/docs/configure-coderabbit.md @@ -45,12 +45,6 @@ Write your configuration file in the below editor to validate: ``` -Write your configuration file in the below editor to validate: - -```mdx-code-block - -``` - The configuration file can be used to set the following options: ```mdx-code-block pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: