Merge commit '1e029eab712ebe0f7feb222b2a6670dc9b395e36' into zhangenm…

…ing/patch-81245
eslint · Jul 26, 2024 · 9c522e4 · 9c522e4
1 parent 23ae076
commit 9c522e4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 30 deletions.
diff --git a/src/playground/App.js b/src/playground/App.js
@@ -279,6 +279,8 @@ const App = () => {
 		[storeState],
 	);
 
+    const [rulesWithInvalidConfigs, setRulesWithInvalidConfigs] = useState(new Set([]));
+
 	return (
 		<div className="playground-wrapper">
 			<div className="playground__config-and-footer">
@@ -336,6 +338,8 @@ const App = () => {
 							rulesMeta={rulesMeta}
 							validationError={validationError}
 							eslintVersion={linter.version}
+                            rulesWithInvalidConfigs={rulesWithInvalidConfigs}
+                            setRulesWithInvalidConfigs={setRulesWithInvalidConfigs}
 						/>
 						<Footer />
 					</div>
@@ -396,7 +400,15 @@ const App = () => {
 									message={message}
 									suggestions={message.suggestions}
 									onFix={onFix}
+									options={options}
+									onUpdate={updateOptions}
+									rulesWithInvalidConfigs={rulesWithInvalidConfigs}
+									setRulesWithInvalidConfigs={setRulesWithInvalidConfigs}
 									onPositionClick={onPositionClick}
+									options={options}
+									onUpdate={updateOptions}
+									rulesWithInvalidConfigs={rulesWithInvalidConfigs}
+									setRulesWithInvalidConfigs={setRulesWithInvalidConfigs}
 								/>
 							))}
 					</section>

diff --git a/src/playground/components/Alert.js b/src/playground/components/Alert.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Alert({ type, text, message, onFix, onPositionClick }) {
+export default function Alert({ type, text, message, onFix, options, onUpdate, rulesWithInvalidConfigs, setRulesWithInvalidConfigs, onPositionClick }) {
 	if (!message) {
 		return (
 			<article
@@ -144,15 +144,27 @@ export default function Alert({ type, text, message, onFix, onPositionClick }) {
 					</ul>
 				</>
 			) : (
-				fix && (
-					<button
+				<div className="alert__actions">
+                    { fix && (
+    					<button
 						onClick={() => onFix(message)}
 						className="alert__fix-btn"
 					>
 						Fix
+                        </button>
+                    )}
+                    <button
+                        onClick={() => {
+                            delete options.rules[ruleId];
+                            setRulesWithInvalidConfigs(new Set([...rulesWithInvalidConfigs].filter(rule => rule !== ruleId)));
+                            onUpdate(Object.assign({}, options));
+                        }}
+                        className="alert__fix-btn">
+                        Disable
 					</button>
-				)
+				</div>
 			)}
+
 		</article>
 	);
 }
diff --git a/src/playground/components/Configuration.js b/src/playground/components/Configuration.js
@@ -101,17 +101,10 @@ const defaultOption = {
 
 const isEmpty = obj => Object.keys(obj).length === 0;
 
-export default function Configuration({
-	rulesMeta,
-	eslintVersion,
-	onUpdate,
-	options,
-	ruleNames,
-	validationError,
-}) {
-	const [showVersion, setShowVersions] = useState(false);
-	const [showRules, setShowRules] = useState(true);
-	const [configFileFormat, setConfigFileFormat] = useState("ESM");
+export default function Configuration({ rulesMeta, eslintVersion, onUpdate, options, ruleNames, validationError }) {
+    const [showVersion, setShowVersions] = useState(false);
+    const [showRules, setShowRules] = useState(true);
+    const [configFileFormat, setConfigFileFormat] = useState("ESM");
 
 	const sourceTypeOptions = [
 		defaultOption,
@@ -136,21 +129,15 @@ export default function Configuration({
 		label: configFormat,
 	}));
 
-	// filter rules which are already added to the configuration
-	const ruleNamesOptions = ruleNames
-		.filter(ruleName => options.rules && !options.rules[ruleName])
-		.map(ruleName => ({
-			value: ruleName,
-			label: rulesMeta[ruleName].deprecated
-				? ruleName.concat(" (deprecated)")
-				: ruleName,
-		}));
-	const [selectedRules, setSelectedRules] = useState([]);
-	const ruleInputRef = useRef(null);
-	const [rulesWithInvalidConfigs, setRulesWithInvalidConfigs] = useState(
-		new Set([]),
-	);
-	const firstRuleRef = useRef();
+    // filter rules which are already added to the configuration
+    const ruleNamesOptions = ruleNames.filter(ruleName => options.rules && !options.rules[ruleName]).map(ruleName => ({
+        value: ruleName,
+        label: rulesMeta[ruleName].deprecated ? ruleName.concat(" (deprecated)") : ruleName
+    }));
+    const [selectedRules, setSelectedRules] = useState([]);
+    const ruleInputRef = useRef(null);
+    const [rulesWithInvalidConfigs, setRulesWithInvalidConfigs] = useState(new Set([]));
+    const firstRuleRef = useRef();
 
 	useEffect(() => {
 		firstRuleRef.current?.focus();