Add (unstable) telemetry support with a hook (#2368)

UNRELEASED.md

@@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added unstable telemetry API to gather analytics about icon usage ([#2368](https://github.com/Shopify/polaris-react/pull/2368))
+
 ### Bug fixes
 
 - Fixed an accessibility issue with `TextField` `multiline` where `aria-multiline` would be set to an invalid type `number` ([#2351](https://github.com/Shopify/polaris-react/pull/2351))

src/components/AppProvider/AppProvider.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ThemeConfig} from '../../utilities/theme';
+import {TelemetryContext, TelemetryObject} from '../../utilities/telemetry';
 import {ThemeProvider} from '../ThemeProvider';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {I18n, I18nContext, TranslationDictionary} from '../../utilities/i18n';
@@ -41,6 +42,8 @@ export interface AppProviderProps extends AppBridgeOptions {
   features?: Features;
   /** Inner content of the application */
   children?: React.ReactNode;
+  // eslint-disable-next-line babel/camelcase
+  UNSTABLE_telemetry?: TelemetryObject;
 }
 
 export class AppProvider extends React.Component<AppProviderProps, State> {
@@ -97,8 +100,14 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
     });
   }
 
+  /* eslint-disable babel/camelcase */
   render() {
-    const {theme = {}, features = {}, children} = this.props;
+    const {
+      theme = {},
+      features = {},
+      UNSTABLE_telemetry,
+      children,
+    } = this.props;
     const {intl, appBridge, link} = this.state;
 
     return (
@@ -110,7 +119,9 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
                 <AppBridgeContext.Provider value={appBridge}>
                   <LinkContext.Provider value={link}>
                     <ThemeProvider theme={theme}>
-                      <MediaQueryProvider>{children}</MediaQueryProvider>
+                      <TelemetryContext.Provider value={UNSTABLE_telemetry}>
+                        <MediaQueryProvider>{children}</MediaQueryProvider>
+                      </TelemetryContext.Provider>
                     </ThemeProvider>
                   </LinkContext.Provider>
                 </AppBridgeContext.Provider>
@@ -121,4 +132,5 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
       </FeaturesContext.Provider>
     );
   }
+  /* eslint-enable babel/camelcase */
 }

src/components/Icon/Icon.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {classNames, variationName} from '../../utilities/css';
 import {useI18n} from '../../utilities/i18n';
+import {useTelemetry} from '../../utilities/telemetry';
 import {IconProps} from '../../types';
 
 import styles from './Icon.scss';
@@ -21,6 +22,15 @@ interface Props extends IconProps {}
 
 export function Icon({source, color, backdrop, accessibilityLabel}: Props) {
   const i18n = useI18n();
+  const telemetry = useTelemetry();
+
+  /* eslint-disable babel/camelcase */
+  useEffect(() => {
+    telemetry.produce('polaris_icons_usage/1.0', {
+      icon_source: parseSource(source),
+    });
+  }, [source, telemetry]);
+  /* eslint-enable babel/camelcase */
 
   if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
     // eslint-disable-next-line no-console
@@ -68,3 +78,12 @@ export function Icon({source, color, backdrop, accessibilityLabel}: Props) {
     </span>
   );
 }
+
+function parseSource(source: string | Function) {
+  if (typeof source === 'function') {
+    return source.name;
+  } else if (source === 'placeholder') {
+    return source;
+  }
+  return 'custom icon string';
+}

src/utilities/telemetry/context.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface TelemetryObject {
+  produce(schemaId: string, payload: Record<string, any>): boolean;
+}
+
+export const TelemetryContext = React.createContext<
+  TelemetryObject | undefined
+>(undefined);

src/utilities/telemetry/hooks.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {TelemetryContext} from './context';
+
+function noop() {}
+const defaultTelemetry = {produce: noop};
+
+export function useTelemetry() {
+  return React.useContext(TelemetryContext) || defaultTelemetry;
+}

src/utilities/telemetry/index.ts

@@ -0,0 +1,3 @@
+export {TelemetryContext, TelemetryObject} from './context';
+
+export {useTelemetry} from './hooks';