feat(gatsby-codemods): Handle or warn on nested options changes (#29046)

* handle or warn on options changes

* remove srcSetBreakpoints from list

* use forEach instead

Author: LB

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/fluid.input.js

@@ -8,7 +8,7 @@ export const query = graphql`
 {
   file(relativePath: { eq: "headers/default.jpg" }) {
     childImageSharp {
-      fluid(maxWidth: 1000) {
+      fluid(maxWidth: 1000, maxHeight: 500) {
         ...GatsbyImageSharpFluid
       }
     }

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.input.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export const query = graphql`
+{
+  file(relativePath: {eq: "icon.png"}) {
+    childImageSharp {
+      fluid(duotone: {highlight: "#f00e2e", shadow: "#192550"}, rotate: 50) {
+        ...GatsbyImageSharpFluid
+      }
+    }
+  }
+}
+`

packages/gatsby-codemods/src/transforms/__testfixtures__/gatsby-plugin-image/transform-options.output.js

@@ -0,0 +1,11 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export const query = graphql`{
+  file(relativePath: {eq: "icon.png"}) {
+    childImageSharp {
+      gatsbyImageData(transformOptions: {duotone: {highlight: "#f00e2e", shadow: "#192550"}, rotate: 50}, layout: FULL_WIDTH)
+    }
+  }
+}
+`

packages/gatsby-codemods/src/transforms/__tests__/gatsby-plugin-image-test.js

@@ -18,6 +18,7 @@ const tests = [
   `optional-chaining`,
   `styled`,
   `fluid`,
+  `transform-options`,
   `variable-src`,
 ]
 

packages/gatsby-codemods/src/transforms/gatsby-plugin-image.js

@@ -25,6 +25,22 @@ const legacyFragmentsSVGPlaceholder = [
   `GatsbyImageSharpFluid_withWebp_tracedSVG`,
 ]
 
+const transformOptions = [
+  `grayscale`,
+  `duotone`,
+  `rotate`,
+  `trim`,
+  `cropFocus`,
+  `fit`,
+]
+
+const otherOptions = [
+  `jpegQuality`,
+  `webpQuality`,
+  `pngQuality`,
+  `pngCompressionSpeed`,
+]
+
 const typeMapper = {
   fixed: `FIXED`,
   fluid: `FULL_WIDTH`,
@@ -313,29 +329,51 @@ function processArguments(queryArguments, fragment, layout, state) {
     }
     queryArguments.push(placeholderArgument)
   }
-  for (let index in queryArguments) {
-    const argument = queryArguments[index]
+  let transformOptionsToNest = []
+  let newLayout = layout
+  queryArguments.forEach((argument, index) => {
     if (argument.name.value === `maxWidth`) {
       argument.name.value = `width`
       if (layout === `fluid` && Number(argument.value.value) >= 1000) {
         delete queryArguments[index]
+        const maxHeightIndex = queryArguments.findIndex(
+          arg => arg?.name?.value === `maxHeight`
+        )
+
+        delete queryArguments?.[maxHeightIndex]
+
         console.log(
           `maxWidth is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.`
         )
       } else if (layout === `fluid` && Number(argument.value.value) < 1000) {
         console.log(
           `maxWidth is no longer supported for fluid (now fullWidth) images. We've updated the query in ${state.opts.filename} to use a constrained image instead.`
         )
-        return `constrained`
+        newLayout = `constrained`
       }
     } else if (argument.name.value === `maxHeight`) {
       argument.name.value = `height`
       console.log(
         `maxHeight is no longer supported for fluid (now fullWidth) images. It's been removed from your query in ${state.opts.filename}.`
       )
+    } else if (transformOptions.includes(argument.name.value)) {
+      transformOptionsToNest.push(argument)
+      delete queryArguments[index]
+    } else if (otherOptions.includes(argument.name.value)) {
+      console.log(
+        `${argument.name.value} is now a nested value, please see the API docs and update the query in ${state.opts.filename} manually.`
+      )
+    }
+  })
+  if (transformOptionsToNest.length > 0) {
+    const newOptions = {
+      kind: `Argument`,
+      name: { kind: `Name`, value: `transformOptions` },
+      value: { kind: `ObjectValue`, fields: transformOptionsToNest },
     }
+    queryArguments.push(newOptions)
   }
-  return layout
+  return newLayout
 }
 
 function processGraphQLQuery(query, state) {