@carbon/upgrade 11.21.0 → 11.22.0-rc.0

package/cli.js

@@ -52696,6 +52696,32 @@ var upgrades = [
           });
         }
       },
+      {
+        name: "ibm-products-update-http-errors",
+        description: "Rewrites HttpError403, HttpError404, HttpErrorOther to FullPageError",
+        migrate: async (options) => {
+          const transform = import_path2.default.join(
+            TRANSFORM_DIR,
+            "ibm-products-update-http-errors.js"
+          );
+          const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"], {
+            cwd: options.workspaceDir,
+            ignore: [
+              "**/es/**",
+              "**/lib/**",
+              "**/umd/**",
+              "**/node_modules/**",
+              "**/storybook-static/**"
+            ]
+          });
+          await run2({
+            dry: !options.write,
+            transform,
+            paths,
+            verbose: options.verbose
+          });
+        }
+      },
       {
         name: "ibm-products-update-userprofileimage",
         description: "Rewrites UserProfileImage to UserAvatar",
@@ -52749,7 +52775,7 @@ var upgrades = [
 var package_default = {
   name: "@carbon/upgrade",
   description: "A tool for upgrading Carbon versions",
-  version: "11.21.0",
+  version: "11.22.0-rc.0",
   license: "Apache-2.0",
   bin: {
     "carbon-upgrade": "./bin/carbon-upgrade.js"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/upgrade",
   "description": "A tool for upgrading Carbon versions",
-  "version": "11.21.0",
+  "version": "11.22.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-upgrade": "./bin/carbon-upgrade.js"
@@ -61,5 +61,5 @@
     "@ibm/telemetry-js": "^1.5.0",
     "jscodeshift": "^17.0.0"
   },
-  "gitHead": "ab3eba8531c341d5ee5d956b962d7cce04944ac3"
+  "gitHead": "7b6d921583ff275baace5baa66da9d9b31740fa8"
 }

package/transforms/__testfixtures__/ibm-products-update-http-errors.input.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  HTTPError403,
+  HTTPError404,
+  HTTPErrorOther,
+} from '@carbon/ibm-products';
+import './_example.scss';
+
+export const Example = () => (
+  <>
+    <HTTPError403
+      description="You are not authorized to access this resource."
+      errorCodeLabel="Error 403"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Forbidden"
+    />
+    <HTTPError404
+      description="The page you are looking for was not found."
+      errorCodeLabel="Error 404"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Page not found"
+    />
+    <HTTPErrorOther
+      description="Received an invalid response."
+      errorCodeLabel="Error 502"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+      title="Bad gateway"
+    />
+    <MyComponent
+      errorCodeLabel="error"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+    />
+  </>
+);

package/transforms/__testfixtures__/ibm-products-update-http-errors.output.js

@@ -0,0 +1,40 @@
+import { Link } from "@carbon/react";
+import React from 'react';
+import { FullPageError } from '@carbon/ibm-products';
+import './_example.scss';
+
+export const Example = () => (
+  <>
+    <FullPageError
+      description="You are not authorized to access this resource."
+      label="Error 403"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Forbidden"
+      kind="403" />
+    <FullPageError
+      description="The page you are looking for was not found."
+      label="Error 404"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Page not found"
+      kind="404" />
+    <FullPageError
+      description="Received an invalid response."
+      label="Error 502"
+      children={<><Link href={"https://www.carbondesignsystem.com"}>Carbon Design System</Link><br /><Link href={"https://github.com/carbon-design-system/ibm-products"}>Carbon for IBM Products component library</Link></>}
+      title="Bad gateway"
+      kind="custom" />
+    <MyComponent
+      errorCodeLabel="error"
+      links={[
+        {
+          href: 'https://www.carbondesignsystem.com',
+          text: 'Carbon Design System',
+        },
+        {
+          href: 'https://github.com/carbon-design-system/ibm-products',
+          text: 'Carbon for IBM Products component library',
+        },
+      ]}
+    />
+  </>
+);

package/transforms/__tests__/ibm-products-update-http-errors-test.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+defineTest(__dirname, 'ibm-products-update-http-errors');

package/transforms/ibm-products-update-http-errors.js

@@ -0,0 +1,192 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Rewrites HttpError403, HttpError404, HttpErrorOther to FullPageError
+ *
+ * Transforms:
+ *
+ * <HttpError403 />, <HttpError404 />, <HttpErrorOther />
+ *
+ * Into:
+ *
+ * <FullPageError />
+ */
+
+'use strict';
+
+const transform = (file, api) => {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let dirtyFlag = false;
+
+  const componentKindMap = {
+    HTTPError403: '403',
+    HTTPError404: '404',
+    HTTPErrorOther: 'custom',
+  };
+  const NEW_COMPONENT = 'FullPageError';
+  const LINK_COMPONENT = 'Link';
+
+  root.find(j.JSXElement).forEach((element) => {
+    const openingElement = element.node.openingElement;
+    const componentName = openingElement.name.name;
+
+    if (componentKindMap[componentName]) {
+      dirtyFlag = true;
+      // Opening tag
+      openingElement.name.name = NEW_COMPONENT;
+
+      if (element.node.closingElement) {
+        // Closing tag
+        element.node.closingElement.name.name = NEW_COMPONENT;
+      }
+
+      // Attach new 'kind' attribute
+      const kindAttribute = j.jsxAttribute(
+        j.jsxIdentifier('kind'),
+        j.literal(componentKindMap[componentName])
+      );
+      openingElement.attributes.push(kindAttribute);
+
+      // Change errorCodeLabel attribute to label
+      const errorCodeLabelProp = openingElement.attributes.find(
+        (attr) => attr.name.name === 'errorCodeLabel'
+      );
+      if (errorCodeLabelProp) {
+        errorCodeLabelProp.name.name = 'label';
+      }
+
+      // Convert 'links' prop to 'children' with <Link></Link> tags
+      const linksProp = openingElement.attributes.find(
+        (attr) => attr.name.name === 'links'
+      );
+      if (linksProp) {
+        linksProp.name.name = 'children';
+
+        // Convert link value elements
+        const linkValues = linksProp.value.expression.elements;
+        let linksLen = linkValues.length;
+        const linkElements = [];
+
+        linkValues.forEach((link) => {
+          const linkTag = j.jsxElement(
+            j.jsxOpeningElement(j.jsxIdentifier(LINK_COMPONENT), [
+              j.jsxAttribute(
+                j.jsxIdentifier('href'),
+                j.jsxExpressionContainer(
+                  j.literal(link.properties[0].value.value)
+                ),
+                j.jsxClosingElement(j.jsxIdentifier(LINK_COMPONENT))
+              ),
+            ]),
+            j.jsxClosingElement(j.jsxIdentifier(LINK_COMPONENT)),
+            [j.jsxText(link.properties[1].value.value)]
+          );
+          linkElements.push(linkTag);
+          linksLen--;
+          if (linksLen) {
+            const brTag = j.jsxElement(
+              j.jsxOpeningElement(j.jsxIdentifier('br'), [], true)
+            );
+
+            linkElements.push(brTag);
+          }
+        });
+
+        const linksFragment = j.jsxFragment(
+          j.jsxOpeningFragment(),
+          j.jsxClosingFragment(),
+          linkElements
+        );
+
+        linksProp.value = j.jsxExpressionContainer(linksFragment);
+      }
+    }
+  });
+
+  // Transform import statements if necessary
+  if (dirtyFlag) {
+    const importDeclarations = root.find(j.ImportDeclaration);
+    const CARBON_PATH = '@carbon/react';
+    const linkComponentSpecifier = j.importSpecifier(
+      j.identifier(LINK_COMPONENT),
+      j.identifier(LINK_COMPONENT)
+    );
+
+    // Check for '@carbon/react' import statement exists
+    const existCarbonImport = importDeclarations.some(
+      (importDeclaration) => importDeclaration.node.source.value === CARBON_PATH
+    );
+
+    // Update @carbon/imb-products import statement
+    importDeclarations.forEach((statement) => {
+      const specifiers = statement.node.specifiers;
+      const source = statement.node.source;
+      const PRODUCTS_PATH = '@carbon/ibm-products';
+
+      if (source.value === PRODUCTS_PATH) {
+        // Check new component name already imported
+        const isNewIdExists = specifiers.some(
+          (spec) => spec.imported.name === NEW_COMPONENT
+        );
+
+        // If the new component not already imported, import it
+        if (!isNewIdExists) {
+          const newSpecifier = j.importSpecifier(
+            j.identifier(NEW_COMPONENT),
+            j.identifier(NEW_COMPONENT)
+          );
+          // Including the new specifier into @carbon/ibm-products import statement
+          specifiers.push(newSpecifier);
+        }
+
+        Object.keys(componentKindMap).forEach((key) => {
+          // Check the old component names exists
+          const identifierIndex = specifiers.findIndex(
+            (spec) => spec.imported.name === key
+          );
+
+          // Remove all old components' import
+          if (identifierIndex !== -1) {
+            specifiers.splice(identifierIndex, 1);
+          }
+        });
+      }
+
+      // if the @carbon/react import statement already exists update the import
+      if (existCarbonImport && source.value === CARBON_PATH) {
+        // Check Link component already imported
+        const linkIdIndex = specifiers.findIndex(
+          (spec) => spec.imported.name === LINK_COMPONENT
+        );
+
+        // if Link component does not in the imported components list
+        if (linkIdIndex === -1) {
+          // Include the Link component in imported components list
+          specifiers.push(linkComponentSpecifier);
+        }
+      }
+    });
+
+    // If @carbon/react import statement not exists
+    if (!existCarbonImport) {
+      const carbonImportDeclaration = j.importDeclaration(
+        [linkComponentSpecifier],
+        j.literal(CARBON_PATH)
+      );
+
+      root
+        .find(j.Program)
+        .forEach((program) =>
+          program.node.body.unshift(carbonImportDeclaration)
+        );
+    }
+  }
+
+  return root.toSource();
+};
+
+module.exports = transform;