From 65c214f91640bb23fee09b38da2a19ebbf133fc2 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 21 Aug 2024 10:27:26 -0400 Subject: [PATCH 1/4] feat(mod): add user-feedback css update warning --- .../src/ruleCustomization.ts | 1 + .../user-feedback-warn-changes.md | 3 ++ .../user-feedback-warn-changes.test.ts | 36 +++++++++++++++++++ .../user-feedback-warn-changes.ts | 36 +++++++++++++++++++ 4 files changed, 76 insertions(+) create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts create mode 100644 packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts index 5ff02007..821807f9 100644 --- a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts +++ b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts @@ -52,6 +52,7 @@ export const warningRules = [ "toolbarLabelGroupContent-updated-markup", "tooltip-warn-triggerRef-may-be-required", "treeView-warn-selectable-styling-modifier-removed", + "user-feedback-warn-changes", "wizard-warn-button-order", "wizardFooter-warn-update-markup", "wizardNavItem-warn-update-markup", diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md new file mode 100644 index 00000000..2f031ced --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.md @@ -0,0 +1,3 @@ +### user-feedback-warn-changes [(#76)](https://github.com/patternfly/react-user-feedback/pull/76) + +The internal scss stylesheet that `FeedbackModal` and its internal components were referencing has been refactored into a css stylesheet. The new `Feedback.css` file will have to be imported to maintain styling on `FeedbackModal`, and may be located in the dist (`@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css`) or in the `src`. diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts new file mode 100644 index 00000000..3b2ae95e --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts @@ -0,0 +1,36 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./user-feedback-warn-changes"; + +ruleTester.run("user-feedback-warn-changes", rule, { + valid: [ + { + code: ``, + }, + { + code: `import { FeedbackModal } from '@patternfly/some-other-package';`, + } + ], + invalid: [ + { + code: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + output: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, + // Test that a warning only gets flagged once + { + code: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + output: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts new file mode 100644 index 00000000..767f83c3 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts @@ -0,0 +1,36 @@ +import { getFromPackage } from "../../helpers"; +import { Rule } from "eslint"; +import { ImportDeclaration } from "estree-jsx"; + +// https://github.com/patternfly/react-user-feedback/pull/76 +module.exports = { + meta: {}, + create: function (context: Rule.RuleContext) { + const { imports } = getFromPackage(context, "@patternfly/react-user-feedback"); + + const feedbackModalImport = imports.find( + (specifier: { imported: { name: string } }) => + specifier.imported.name === "FeedbackModal" + ); + + return !feedbackModalImport + ? {} + : { + ImportDeclaration(node: ImportDeclaration) { + if ( + node.specifiers.find( + (specifier) => + specifier.type === "ImportSpecifier" && + specifier.imported.name === + feedbackModalImport.imported.name + ) + ) { + context.report({ + node, + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + }); + } + }, + }; + }, +}; From 8c6f31512fbfc05b1ad1c3d970364450afbb8fd7 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 24 Sep 2024 11:56:28 -0400 Subject: [PATCH 2/4] account for alias, default --- .../user-feedback-warn-changes.test.ts | 15 ++++++++++++--- .../user-feedback-warn-changes.ts | 17 ++++++++++------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts index 3b2ae95e..c0402d9a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts @@ -21,10 +21,9 @@ ruleTester.run("user-feedback-warn-changes", rule, { }, ], }, - // Test that a warning only gets flagged once { - code: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, - output: `import { FeedbackModal } from '@patternfly/react-user-feedback';`, + code: `import { FeedbackModal as MyModal } from '@patternfly/react-user-feedback';`, + output: `import { FeedbackModal as MyModal } from '@patternfly/react-user-feedback';`, errors: [ { message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, @@ -32,5 +31,15 @@ ruleTester.run("user-feedback-warn-changes", rule, { }, ], }, + // { + // code: `import myDefaultModal from '@patternfly/react-user-feedback';`, + // output: `import myDefaultModal from '@patternfly/react-user-feedback';`, + // errors: [ + // { + // message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + // type: "ImportDeclaration", + // }, + // ], + // }, ], }); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts index 767f83c3..4fdeb9b4 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts @@ -1,14 +1,18 @@ -import { getFromPackage } from "../../helpers"; +import { getAllImportsFromPackage, getComponentImportName, getDefaultDeclarationString } from "../../helpers"; import { Rule } from "eslint"; -import { ImportDeclaration } from "estree-jsx"; +import { ImportDeclaration, ImportSpecifier } from "estree-jsx"; // https://github.com/patternfly/react-user-feedback/pull/76 module.exports = { meta: {}, create: function (context: Rule.RuleContext) { - const { imports } = getFromPackage(context, "@patternfly/react-user-feedback"); + const imports = getAllImportsFromPackage(context, "@patternfly/react-user-feedback", ["FeedbackModal"]); - const feedbackModalImport = imports.find( + const namedImports = imports.filter( + (imp) => imp.type === "ImportSpecifier" + ) as ImportSpecifier[]; + + const feedbackModalImport = namedImports.find( (specifier: { imported: { name: string } }) => specifier.imported.name === "FeedbackModal" ); @@ -21,9 +25,8 @@ module.exports = { node.specifiers.find( (specifier) => specifier.type === "ImportSpecifier" && - specifier.imported.name === - feedbackModalImport.imported.name - ) + specifier.imported.name === getComponentImportName(feedbackModalImport, ["FeedbackModal"]) + ) ) { context.report({ node, From b2757c848aa409908a3e408c955409fe757a6708 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 26 Sep 2024 11:19:32 -0400 Subject: [PATCH 3/4] account for default import --- .../src/rules/helpers/pfPackageMatches.ts | 2 +- .../user-feedback-warn-changes.test.ts | 20 +++++++++---------- .../user-feedback-warn-changes.ts | 15 +++----------- 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts index f6889abd..884f5f7a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/helpers/pfPackageMatches.ts @@ -17,7 +17,7 @@ export function pfPackageMatches( parts[1] + "(/dist/(esm|js|dynamic))?" + (parts[2] ? "/" + parts[2] : "") + - (["react-component-groups", "react-tokens"].includes(parts[1]) + (["react-component-groups", "react-tokens", "react-user-feedback"].includes(parts[1]) ? `(/.*)?$` : `(/(components|helpers${ parts[1] === "react-icons" ? "|icons" : "" diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts index c0402d9a..c3d56fad 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.test.ts @@ -31,15 +31,15 @@ ruleTester.run("user-feedback-warn-changes", rule, { }, ], }, - // { - // code: `import myDefaultModal from '@patternfly/react-user-feedback';`, - // output: `import myDefaultModal from '@patternfly/react-user-feedback';`, - // errors: [ - // { - // message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, - // type: "ImportDeclaration", - // }, - // ], - // }, + { + code: `import myDefaultModal from '@patternfly/react-user-feedback/dist/esm/Feedback/FeedbackModal';`, + output: `import myDefaultModal from '@patternfly/react-user-feedback/dist/esm/Feedback/FeedbackModal';`, + errors: [ + { + message: `FeedbackModal no longer internally references a scss stylesheet. You may have to import "Feedback.css" located in the dist "@patternfly/react-user-feedback/dist/esm/Feedback/Feedback.css" to maintain styling on FeedbackModal.`, + type: "ImportDeclaration", + }, + ], + }, ], }); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts index 4fdeb9b4..36678b68 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts @@ -8,24 +8,15 @@ module.exports = { create: function (context: Rule.RuleContext) { const imports = getAllImportsFromPackage(context, "@patternfly/react-user-feedback", ["FeedbackModal"]); - const namedImports = imports.filter( - (imp) => imp.type === "ImportSpecifier" - ) as ImportSpecifier[]; - - const feedbackModalImport = namedImports.find( - (specifier: { imported: { name: string } }) => - specifier.imported.name === "FeedbackModal" - ); - - return !feedbackModalImport + return !imports.length ? {} : { ImportDeclaration(node: ImportDeclaration) { if ( node.specifiers.find( (specifier) => - specifier.type === "ImportSpecifier" && - specifier.imported.name === getComponentImportName(feedbackModalImport, ["FeedbackModal"]) + (specifier.type === "ImportSpecifier" || specifier.type === "ImportDefaultSpecifier") + && getComponentImportName(specifier, ["FeedbackModal"]) === "FeedbackModal" ) ) { context.report({ From 41eca08c223e2427999a7aba488fe4b97368e706 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 26 Sep 2024 11:20:16 -0400 Subject: [PATCH 4/4] remove unused imports --- .../v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts index 36678b68..6e0d1d34 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/userFeedbackWarnChanges/user-feedback-warn-changes.ts @@ -1,6 +1,6 @@ -import { getAllImportsFromPackage, getComponentImportName, getDefaultDeclarationString } from "../../helpers"; +import { getAllImportsFromPackage, getComponentImportName } from "../../helpers"; import { Rule } from "eslint"; -import { ImportDeclaration, ImportSpecifier } from "estree-jsx"; +import { ImportDeclaration } from "estree-jsx"; // https://github.com/patternfly/react-user-feedback/pull/76 module.exports = {