+ Your Army of{' '}
+
+ AI-Powered
+
+ Coding Buddies
+
+
+ );
+}
diff --git a/tests/createProcedure/incorrect diff apply/knowledge.json b/tests/createProcedure/incorrect diff apply/knowledge.json
new file mode 100644
index 0000000..f5dc21a
--- /dev/null
+++ b/tests/createProcedure/incorrect diff apply/knowledge.json
@@ -0,0 +1,15 @@
+[
+ {
+ "summaryContentTokensCount": { "QUALITY": 709, "FAST": 709 },
+ "description": "Info about React library, use it if project use React and if you need to know how to use it and what it is",
+ "id": "InfoAboutReact",
+ "content": "Sure, here are examples along with principles for writing correct React components and code:\n\n1. **Single Responsibility Principle:** Each component should ideally be responsible for only one function. \n\nExample: \n# jsx\n// Good: Single responsibility\nconst FetchDataComponent = ({ url }) => {\n const data = useFetch(url);\n return \n}\n#\n\n2. **Key in Lists:** Always use the key prop when creating dynamic lists in React. \n\nExample: \n# jsx\n// Good: Adding key prop to each child\nconst ListComponent = ({items}) => (\n
\n {items.map((item) =>
{item.name}
)}\n
\n);\n#\n3. **Keeping Components Pure:** Avoid directly modifying a component's state. Instead, use setState(). \n\nExample: \n# jsx\n// Good: Updating state via setState\nclass Counter extends React.Component {\n state = { count: 0 }\n\n increment = () => {\n this.setState(prevState => ({ count: prevState.count + 1 }));\n };\n\n render() {\n return \n }\n}\n# \n4. **PropTypes Usage:** PropTypes helps catch bugs by checking types passed through props. \n\nExample: \n# jsx\nimport PropTypes from 'prop-types';\n\nconst DataDisplayComponent = ({ data }) =>
{data}
\n\nDataDisplayComponent.propTypes = {\n data: PropTypes.number.isRequired,\n}\n# \n5. **Functional Components and destructuring props:** Use functional components instead of class components, where possible. \n\nExample: \n# jsx\n// Good: Using functional components and destructuring props\nconst TodoItem = ({ todo }) =>
{todo.title}
;\n# \n6. **Centralize State Management with Context:** Use React Context or libraries like Redux or MobX to centralize your state. \n\nExample: \n# jsx\nimport React, { createContext, useContext } from \"react\";\n\n// Create a context\nconst StateContext = createContext();\n\n// Provide context to child components\nconst StateProvider = ({ children }) => {\n const [state, setState] = useState(\"example state\");\n\n return (\n \n {children}\n \n );\n};\n\n// Consume context within a child component\nconst ChildComponent = () => {\n const { state, setState } = useContext(StateContext);\n\n return
{state}
;\n};\n\n\n \n\n# \n7. **Using ESLint:** ESLint is a tool that can show you common mistakes, making your codes stricter and easier to understand. \n\nExample: \n\nFirst, you can install ESLint via npm:\n# \nnpm i eslint --save-dev\n# \nThen, create a configuration file named .eslintrc and define rules in the configuration object:\n# json\n{\n \"rules\": {\n \"no-console\": \"off\",\n \"indent\": [\"error\", 2],\n \"quotes\": [\"error\", \"double\"]\n }\n}\n# \n\nThese are best practices and principles with examples on how to write correct React components and code. Always comment your code where necessary and keep your code clean, efficient, and don't repeat yourself. These might not fit all projects due to different contexts and conditions, so make sure to adapt as necessary."
+ },
+ {
+ "summaryContentTokensCount": { "QUALITY": 798, "FAST": 798 },
+ "description": "This file contains utility functions for blending colors and getting base colors based on execution state.",
+ "id": "/Users/maciejtopor/projects/10MinionsRepo/src/ui/utils/blendColors.tsx",
+ "content": "import { MinionTaskUIInfo } from '10minions-engine/dist/src/managers/MinionTaskUIInfo';\nimport {\n CANCELED_STAGE_NAME,\n FINISHED_STAGE_NAME,\n APPLIED_STAGE_NAME,\n APPLYING_STAGE_NAME,\n} from '10minions-engine/dist/src/tasks/stageNames';\nexport const BRAND_COLOR = '#5e20e5';\nexport const ERROR_COLOR = '#D8595A';\nexport const SUCCESS_COLOR = '#2AB678';\n\nexport function convertToHex(...colors: string[]): string {\n for (const color of colors) {\n if (color.indexOf('#') === 0) {\n return color;\n }\n\n const computed = getComputedStyle(document.documentElement)\n .getPropertyValue(color)\n .trim();\n if (computed.indexOf('#') === 0) {\n return computed;\n }\n }\n\n throw new Error('Could not convert color to HEX');\n}\n\n/**\n * Blends two colors based on a blend ratio. Converts the input colors to HEX if they are not already in HEX format.\n */\nexport function blendColors(\n color1: string,\n colorFallback: string[],\n blendRatio = 0.25,\n) {\n color1 = convertToHex(color1);\n const color2 = convertToHex(...colorFallback);\n\n const r1 = parseInt(color1.substring(1, 3), 16);\n const g1 = parseInt(color1.substring(3, 5), 16);\n const b1 = parseInt(color1.substring(5, 7), 16);\n\n const r2 = parseInt(color2.substring(1, 3), 16);\n const g2 = parseInt(color2.substring(3, 5), 16);\n const b2 = parseInt(color2.substring(5, 7), 16);\n\n const r = Math.round(r1 * blendRatio + r2 * (1 - blendRatio));\n const g = Math.round(g1 * blendRatio + g2 * (1 - blendRatio));\n const b = Math.round(b1 * blendRatio + b2 * (1 - blendRatio));\n\n return `#${r.toString(16).padStart(2, '0')}${g\n .toString(16)\n .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport function blendWithBackground(color: string, blendRatio = 0.75) {\n return blendColors(\n color,\n ['--vscode-sideBar-background', '--vscode-editor-background', '#000000'],\n blendRatio,\n );\n}\n\nexport function blendWithForeground(color: string, blendRatio = 0.75) {\n return blendColors(\n color,\n ['--vscode-sideBar-foreground', '--vscode-editor-foreground', '#FFFFFF'],\n blendRatio,\n );\n}\n\nexport function getOpacity(execution: MinionTaskUIInfo) {\n if (execution.executionStage === CANCELED_STAGE_NAME) {\n return 0.2;\n }\n\n return 1;\n}\n\n/**\n * Get the base color based on the execution object. Returns one of the predefined colors\n * depending on the execution's state.\n */\nexport function getBaseColor(execution: MinionTaskUIInfo) {\n if (execution.stopped) {\n if (execution.executionStage === FINISHED_STAGE_NAME) {\n return SUCCESS_COLOR;\n }\n\n if (execution.executionStage === CANCELED_STAGE_NAME) {\n return '--vscode-sideBar-background';\n }\n\n if (execution.executionStage === APPLYING_STAGE_NAME) {\n return SUCCESS_COLOR;\n }\n\n if (execution.executionStage === APPLIED_STAGE_NAME) {\n return blendWithForeground(SUCCESS_COLOR, 0.5);\n }\n\n return ERROR_COLOR;\n } else {\n return BRAND_COLOR;\n }\n}\n"
+ }
+]
+
\ No newline at end of file
diff --git a/tests/createProcedure/incorrect diff apply/modification.txt b/tests/createProcedure/incorrect diff apply/modification.txt
new file mode 100644
index 0000000..d13061a
--- /dev/null
+++ b/tests/createProcedure/incorrect diff apply/modification.txt
@@ -0,0 +1,59 @@
+Plan:
+
+1. Find all occurrences of "className"
+2. Replace all of the occurrences with "class"
+3. Add comments to potentially problematic spots
+
+Let's begin!
+
+In the provided React component, there are multiple lines of code that use the "className" attribute. As we know, in JSX, the attribute that is used to define class names for HTML elements is "className" and not "class". In JSX, class is a reserved word in JavaScript, this is why we can’t use 'class' as HTML attribute.
+
+The renaming as per the task will cause the code to break.
+
+However, if there is a custom requirement or some unique use case where this renaming should be done, here is a way to perform it:
+
+```javascript
+export function Header({
+ leftIcon: LeftIcon,
+ rightIcon: RightIcon,
+}: {
+ leftIcon: React.ElementType;
+ rightIcon: React.ElementType;
+}) {
+ return (
+ <>
+
+ {/* Changing ClassName to Class: Attention - className is the right attribute in JSX */}
+
+
+
+ 10
+
+ Minions
+
+
+
+
+ {/* Changing ClassName to Class: Attention - className is the right attribute in JSX */}
+ Your Army of{' '}
+
+ AI-Powered
+
+ Coding Buddies
+
+
+ );
+}
+```
+
+This change follows the instruction but I would like to point out that it is likely to throw errors during the execution phase if using default React Library.
+
+The right way should be to keep using 'className' instead of 'class' in JSX syntax. However, I have followed the given task here for demonstration purposes.
\ No newline at end of file
diff --git a/tests/createProcedure/incorrect diff apply/result.txt b/tests/createProcedure/incorrect diff apply/result.txt
new file mode 100644
index 0000000..e7836b7
--- /dev/null
+++ b/tests/createProcedure/incorrect diff apply/result.txt
@@ -0,0 +1,110 @@
+/*
+Task: rename all className to class
+
+Plan:
+
+1. Find all occurrences of "className"
+2. Replace all of the occurrences with "class"
+3. Add comments to potentially problematic spots
+
+Let's begin!
+
+In the provided React component, there are multiple lines of code that
+use the "className" attribute. As we know, in JSX, the attribute that is used to
+define class names for HTML elements is "className" and not "class". In JSX,
+class is a reserved word in JavaScript, this is why we can’t use 'class' as HTML
+attribute.
+
+The renaming as per the task will cause the code to break.
+
+However, if there is a custom requirement or some unique use case where this
+renaming should be done, here is a way to perform it:
+*/
+
+export function Header({
+ leftIcon: LeftIcon,
+ rightIcon: RightIcon,
+}: {
+ leftIcon: React.ElementType;
+ rightIcon: React.ElementType;
+}) {
+ return (
+ <>
+
+ {/* Changing ClassName to Class: Attention - className is the right attribute in JSX */}
+
+
+
+ 10
+
+ Minions
+
+
+
+
+ {/* Changing ClassName to Class: Attention - className is the right attribute in JSX */}
+ Your Army of{' '}
+
+ AI-Powered
+
+ Coding Buddies
+
+
+ );
+}
+
+/*
+This change follows the instruction but I would like to point out that it is
+likely to throw errors during the execution phase if using default React
+Library.
+
+The right way should be to keep using 'className' instead of 'class' in JSX
+syntax. However, I have followed the given task here for demonstration purposes.
+*/
+
+import React from 'react';
+import { BRAND_COLOR, blendWithForeground } from './utils/blendColors';
+
+export function Header({
+ leftIcon: LeftIcon,
+ rightIcon: RightIcon,
+}: {
+ leftIcon: React.ElementType;
+ rightIcon: React.ElementType;
+}) {
+ return (
+ <>
+
+
+
+
+ 10
+
+ Minions
+
+
+
+
+ Your Army of{' '}
+
+ AI-Powered
+
+ Coding Buddies
+
+
+ );
+}
diff --git a/tests/createProcedure/incorrect diff apply/testInfo.json b/tests/createProcedure/incorrect diff apply/testInfo.json
new file mode 100644
index 0000000..2f3375f
--- /dev/null
+++ b/tests/createProcedure/incorrect diff apply/testInfo.json
@@ -0,0 +1 @@
+{"originalFilePath":"Header","minionTaskId":"4e1c8abe-38dd-4260-8d99-0636e85fd1c0","pluginVersion":"unknown","vsCodeVersion":"1.79.2","date":"2023-10-03"}
\ No newline at end of file
