feat(SimpleFileUpload): added rule to warn about component changes (#570

)
patternfly · Feb 27, 2024 · fa19da5 · fa19da5
1 parent fee9102
commit fa19da5
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 0 deletions.
diff --git a/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts b/packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts
@@ -24,6 +24,7 @@ export const warningRules = [
   "pageSection-warn-variantClasses-applied",
   "popover-warn-appendTo-default",
   "react-dropzone-warn-upgrade",
+  "simpleFileUpload-warn-changes",
   "table-warn-actionsColumn",
   "table-warn-thExpandType",
   "tabs-warn-children-type-changed",

diff --git a/...emods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.md b/...emods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.md
@@ -0,0 +1,5 @@
+### simpleFileUpload-warn-changes [(#10026)](https://github.com/patternfly/patternfly-react/pull/10026)
+
+The `aria-describedby` attribute was removed from the TextInput within the SimpleFileUpload, and the `id` attribute was removed from the "browse" button. Instead use the new `browseButtonAriaDescribedby` prop to provide a description to the browse button.
+
+Additionally, we recommend using our FileUploadHelperText component as a child to the FileUpload, instead of using our FormHelperText (the previous recommendation).
diff --git a/...f-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.test.ts b/...f-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.test.ts
@@ -0,0 +1,43 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./simpleFileUpload-warn-changes";
+
+ruleTester.run("simpleFileUpload-warn-changes", rule, {
+  valid: [
+    {
+      code: `<SimpleFileUpload notAThing />`,
+    },
+    {
+      code: `import { SimpleFileUpload } from '@patternfly/some-other-package';`,
+    },
+    {
+      code: `import { Alert } from '@patternfly/react-core';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { SimpleFileUpload } from '@patternfly/react-core';`,
+      output: `import { SimpleFileUpload } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The \`aria-describedby\` attribute was removed from the TextInput within the SimpleFileUpload, and the \`id\` attribute was removed from the "browse" button. Instead use the new \`browseButtonAriaDescribedby\` prop to provide a description to the browse button.
+
+Additionally, we recommend using our FileUploadHelperText component as a child to the FileUpload, instead of using our FormHelperText (the previous recommendation).`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    // Test that a warning only gets flagged once
+    {
+      code: `import { SimpleFileUpload } from '@patternfly/react-core'; import { Alert } from '@patternfly/react-core';`,
+      output: `import { SimpleFileUpload } from '@patternfly/react-core'; import { Alert } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The \`aria-describedby\` attribute was removed from the TextInput within the SimpleFileUpload, and the \`id\` attribute was removed from the "browse" button. Instead use the new \`browseButtonAriaDescribedby\` prop to provide a description to the browse button.
+
+Additionally, we recommend using our FileUploadHelperText component as a child to the FileUpload, instead of using our FormHelperText (the previous recommendation).`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+  ],
+});
diff --git a/...gin-pf-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.ts b/...gin-pf-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUpload-warn-changes.ts
@@ -0,0 +1,43 @@
+import { getFromPackage } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10026
+module.exports = {
+  meta: {},
+  create: function (context: {
+    report: (arg0: {
+      node: any;
+      message: string;
+      fix?(fixer: any): any;
+    }) => void;
+  }) {
+    const { imports } = getFromPackage(context, "@patternfly/react-core");
+
+    const simpleFileUploadImport = imports.find(
+      (specifier: { imported: { name: string } }) =>
+        specifier.imported.name === "SimpleFileUpload"
+    );
+
+    return !simpleFileUploadImport
+      ? {}
+      : {
+          ImportDeclaration(node: {
+            specifiers: { imported: { name: string } }[];
+          }) {
+            if (
+              node.specifiers.find(
+                (specifier: { imported: { name: string } }) =>
+                  specifier.imported.name ===
+                  simpleFileUploadImport.imported.name
+              )
+            ) {
+              context.report({
+                node,
+                message: `The \`aria-describedby\` attribute was removed from the TextInput within the SimpleFileUpload, and the \`id\` attribute was removed from the "browse" button. Instead use the new \`browseButtonAriaDescribedby\` prop to provide a description to the browse button.
+
+Additionally, we recommend using our FileUploadHelperText component as a child to the FileUpload, instead of using our FormHelperText (the previous recommendation).`,
+              });
+            }
+          },
+        };
+  },
+};
diff --git a/...pf-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUploadWarnChangesInput.tsx b/...pf-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUploadWarnChangesInput.tsx
@@ -0,0 +1,2 @@
+import { SimpleFileUpload } from "@patternfly/react-core";
+import { SomethingElse } from "@patternfly/react-core";
diff --git a/...f-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUploadWarnChangesOutput.tsx b/...f-codemods/src/rules/v6/simpleFileUploadWarnChanges/simpleFileUploadWarnChangesOutput.tsx
@@ -0,0 +1,2 @@
+import { SimpleFileUpload } from "@patternfly/react-core";
+import { SomethingElse } from "@patternfly/react-core";