Merge branch 'newrelic:develop' into develop

.eslintrc.js

@@ -1,32 +1,34 @@
 module.exports = {
   // https://github.com/newrelic/eslint-plugin-newrelic
   extends: [
+    'plugin:@typescript-eslint/recommended',
     'plugin:@newrelic/eslint-plugin-newrelic/react',
     'plugin:@newrelic/eslint-plugin-newrelic/prettier',
     'plugin:jsx-a11y/recommended',
     'plugin:react-hooks/recommended',
   ],
   // https://github.com/yannickcr/eslint-plugin-react#configuration
-  plugins: ['react', 'jsx-a11y', 'markdown'],
+  plugins: ['react', 'jsx-a11y', 'markdown', '@typescript-eslint', 'graphql'],
   settings: {
     react: {
       version: 'detect',
     },
   },
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
     sourceType: 'module',
+    project: ['./tsconfig.json'],
   },
   env: {
     browser: true,
     es6: true,
   },
-  ignorePatterns: ['**/__tests__/**/*'],
+  ignorePatterns: ['**/__tests__/**/*', '**/__generated__/**/*'],
   rules: {
-    'jsx-a11y/no-onchange': 0,
     'no-unused-vars': [
       'error',
       {
@@ -37,5 +39,16 @@ module.exports = {
         ignoreRestSiblings: false,
       },
     ],
+    'jsx-a11y/no-onchange': 'off',
+    'react/jsx-curly-brace-presence': 'off',
+    'react/prop-types': 'off',
+
+    // typescript rules will also be invoked for js files
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/explicit-function-return-type': 1,
+    '@typescript-eslint/no-unsafe-argument': 1,
+    '@typescript-eslint/explicit-module-boundary-types': 1,
+    '@typescript-eslint/no-explicit-any': 1,
   },
 };

.gitignore

@@ -39,6 +39,9 @@ jspm_packages/
 # Typescript v1 declaration files
 typings/
 
+# Gatsby auto generated types
+**/__generated__
+
 # Optional npm cache directory
 .npm
 

gatsby-config.js

@@ -240,5 +240,23 @@ module.exports = {
         ],
       },
     },
+    // https://www.gatsbyjs.com/plugins/gatsby-plugin-typegen/
+    {
+      resolve: 'gatsby-plugin-typegen',
+      options: {
+        outputPath: 'src/__generated__/gatsby-types.d.ts',
+        emitSchema: {
+          'src/__generated__/gatsby-schema.graphql': true,
+        },
+      },
+    },
+    {
+      resolve: `gatsby-plugin-typescript`,
+      options: {
+        isTSX: true, // defaults to false
+        jsxPragma: `jsx`, // defaults to "React"
+        allExtensions: true, // defaults to false
+      },
+    },
   ],
 };

package.json

@@ -66,21 +66,31 @@
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@testing-library/react": "^10.0.4",
+    "@types/node": "^17.0.10",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.10.1",
+    "@typescript-eslint/parser": "^5.10.1",
     "babel-jest": "^26.0.1",
     "babel-preset-gatsby": "^1.0.0",
     "core-js": "^2.4.0",
     "eslint": "^7.11.0",
+    "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-markdown": "^1.0.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gatsby-plugin-gdpr-tracking": "^1.2.2",
+    "gatsby-plugin-typegen": "^2.2.4",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
     "jest-emotion": "^10.0.32",
     "patch-package": "^6.2.2",
     "prettier": "2.2.1",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^16.13.1",
+    "source-map-loader": "^3.0.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4"
   },
   "resolutions": {
     "bl": "^4.0.3",

src/components/GuidedInstallTile.js

@@ -68,6 +68,7 @@ const GuidedInstallTile = () => {
           <span
             css={css`
               color: var(--color-neutrals-300);
+              font-size: 14px;
 
               .dark-mode & {
                 color: var(--primary-text-color);
@@ -80,7 +81,11 @@ const GuidedInstallTile = () => {
           </span>
         </div>
         <div>
-          <Button onClick={handleButtonClick} variant={Button.VARIANT.PRIMARY}>
+          <Button
+            onClick={handleButtonClick}
+            variant={Button.VARIANT.PRIMARY}
+            size={Button.SIZE.SMALL}
+          >
             Install New Relic
           </Button>
         </div>

src/components/IOBanner.js

@@ -36,9 +36,10 @@ const BannerHeaderContent = () => (
     <h1
       css={css`
         color: var(--color-neutrals-050);
+        font-weight: 600;
 
         @media (max-width: ${MOBILE_BREAKPOINT}) {
-          font-weight: 400;
+          font-weight: 600;
         }
       `}
     >

src/components/InstallButton.js

@@ -154,7 +154,6 @@ const InstallButton = ({ quickstart, location, ...props }) => {
       })
     );
     Cookies.set('start_target', startTarget, options);
-    Cookies.set('newrelic-quickstart-id', quickstart.id, options);
   };
 
   const handleInstallClick = () => {

src/components/PackTile.js

@@ -75,14 +75,14 @@ const PackTile = ({
       interactive
       css={css`
         --tile-image-height: 100px; /* Logo image height */
-        --title-row-height: 0.5fr; /* Title height to allow space for longer string */
+        --title-row-height: auto; /* Title height to allow space for longer string */
         padding: 1rem;
         overflow: hidden;
 
         /* Default grid view */
         display: grid;
         grid-gap: 0.2rem;
-        grid-template-rows: var(--tile-image-height) var(--title-row-height) 1fr 1fr;
+        grid-template-rows: var(--tile-image-height) var(--title-row-height) 1fr auto;
         grid-template-columns: auto;
         grid-template-areas:
           'logo logo'

src/components/SegmentedControl.js

@@ -53,7 +53,7 @@ const SegmentedControl = ({ items, onChange, className }) => {
               title={value}
               css={css`
                 margin-top: 4px;
-                font-size: 2em;
+                font-size: 1.5em;
               `}
               name={`fe-${getViewType(value)}`}
             />

src/components/Tabs/Bar.js

@@ -7,7 +7,6 @@ import useTabs from './useTabs';
 const MobileTabControl = ({ children, isIos }) => {
   const [currentTab, setCurrentTab] = useTabs();
   // eslint gets angry about using props from React.Children.map
-  /* eslint-disable react/prop-types */
   return (
     <select
       onChange={(e) => {
@@ -36,7 +35,6 @@ const MobileTabControl = ({ children, isIos }) => {
       ))}
     </select>
   );
-  /* eslint-enable react/prop-types */
 };
 
 MobileTabControl.propTypes = {

src/markdown-pages/automate-workflows/error-inbox/index.mdx

@@ -13,12 +13,6 @@ You're one of the developers of an eCommerce website called Geek's Movie Shop, a
 
 </Intro>
 
-<Callout variant='important'>
-
-Errors Inbox is not available in the EU region.
-
-</Callout>
-
 <div style="display: flex;">
 
 <div style="flex: 1;">
@@ -40,7 +34,7 @@ In this lab, you:
 
 ## Requirements
 
-- Create a free [New Relic account](https://newrelic.com/signup?utm_source=developer-site) in the US region
+- Create a free [New Relic account](https://newrelic.com/signup?utm_source=developer-site) 
 - Install [Docker](https://www.docker.com/)
 
 </div>

src/markdown-pages/explore-docs/nr1-cli.mdx

@@ -39,7 +39,7 @@ We provide a variety of tools for building apps, including the New Relic One CLI
 
 ## Installing the New Relic One CLI
 
-In New Relic, click **Apps** and then in the **New Relic One catalog** area, click the [**Build your own application** launcher](https://one.newrelic.com/launcher/developer-center.launcher) and follow the quick start instructions. The quick start automatically generates an API key for the account you select, and gives you the pre-populated commands to create a profile, generate your first "Hello World" app, and serve it locally.
+In New Relic, click **Instant Observability**, then check the **Apps** box in the **filter by** section. Click the [**Build on New Relic** launcher](https://one.newrelic.com/launcher/developer-center.launcher) and follow the quick start instructions. The quick start automatically generates an API key for the account you select, and gives you the pre-populated commands to create a profile, generate your first "Hello World" app, and serve it locally.
 
 ![Build New Relic One application](../../images/developercenter.png)
 

src/pages/instant-observability.js

@@ -299,7 +299,7 @@ const QuickstartsPage = ({ data, location }) => {
               padding: 0.5rem;
 
               input {
-                font-size: 1.15em;
+                font-size: 14px;
                 padding: 0.5rem;
                 padding-left: 2.25rem;
                 background: var(--color-white);
@@ -338,6 +338,7 @@ const QuickstartsPage = ({ data, location }) => {
                 --svg-color: var(--color-neutrals-700);
                 box-shadow: none;
                 max-width: 630px;
+                line-height: 1;
                 svg {
                   width: 16px;
                   height: 16px;

tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "outDir": "./built",
+        "allowJs": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "@emotion/react",
+        "target": "es6",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "allowSyntheticDefaultImports": true,
+        "noImplicitAny": true,
+        "plugins": [
+            {
+              "name": "ts-graphql-plugin",
+              "schema": "src/__generated__/gatsby-schema.graphql",
+              "tag": "graphql"
+            }
+          ]
+    },
+    "include": ["./src/**/*", "./scripts/**/*"],
+    "exclude": ["./node_modules/"]
+}