feature: add new survey notification to design page

Composer/packages/client/src/App.tsx

@@ -29,6 +29,7 @@ export const App: React.FC = () => {
     checkNodeVersion,
     performAppCleanupOnQuit,
     setSurveyEligibility,
+    setMachineInfo,
   } = useRecoilValue(dispatcherState);
 
   useEffect(() => {
@@ -42,7 +43,11 @@ export const App: React.FC = () => {
     ipcRenderer?.on('cleanup', (_event) => {
       performAppCleanupOnQuit();
     });
-    setSurveyEligibility();
+
+    ipcRenderer?.on('machine-info', (_event, info) => {
+      setMachineInfo(info);
+      setSurveyEligibility();
+    });
   }, []);
 
   return (

Composer/packages/client/src/components/Notifications/NotificationCard.tsx

@@ -9,6 +9,7 @@ import { useRef } from 'react';
 import { FontSizes, SharedColors } from '@uifabric/fluent-theme';
 import { Shimmer, ShimmerElementType } from 'office-ui-fabric-react/lib/Shimmer';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Stack, IStackProps } from 'office-ui-fabric-react/lib/Stack';
 import formatMessage from 'format-message';
 import { Notification, NotificationLink } from '@botframework-composer/types';
 
@@ -36,7 +37,7 @@ const cardContainer = (show: boolean, ref?: HTMLDivElement | null) => () => {
     border-left: 4px solid #0078d4;
     background: white;
     box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-    min-width: 340px;
+    width: 340px;
     border-radius: 2px;
     display: flex;
     flex-direction: column;
@@ -112,13 +113,20 @@ const cardDescription = css`
   word-break: break-word;
 `;
 
-const linkButton = css`
-  color: #0078d4;
-  float: right;
-  font-size: 12px;
-  height: auto;
-  margin: 4px 0 4px 8px;
-`;
+const linkButton = {
+  root: {
+    padding: '0',
+    border: '0',
+  },
+  label: {
+    fontSize: '12px',
+    color: SharedColors.cyanBlue10,
+    margin: '0',
+  },
+  textContainer: {
+    height: '16px',
+  },
+};
 
 const getShimmerStyles = {
   root: {
@@ -148,27 +156,58 @@ export type NotificationProps = {
 };
 
 const makeLinkLabel = (link: NotificationLink) => (
-  <ActionButton css={linkButton} onClick={link.onClick}>
+  <ActionButton styles={linkButton} onClick={link.onClick}>
     {link.label}
   </ActionButton>
 );
 
 const defaultCardContentRenderer = (props: CardProps) => {
-  const { title, description, type, link, links } = props;
+  const { title, description, type, link, links, leftLinks, rightLinks } = props;
+
+  const rightLinkList = rightLinks ?? links ?? [link];
+  const leftLinkList = leftLinks ?? [];
+
+  const stackProps: IStackProps = {
+    horizontal: true,
+    horizontalAlign: 'space-between',
+    tokens: {
+      childrenGap: '20px',
+      padding: '0 16px 0 0',
+      maxHeight: '24px',
+    },
+  };
+
   return (
     <div css={cardContent}>
       {type === 'error' && <Icon css={errorType} iconName="ErrorBadge" />}
       {type === 'success' && <Icon css={successType} iconName="Completed" />}
       {type === 'warning' && <Icon css={warningType} iconName="Warning" />}
       {type === 'question' && <Icon css={questionType} iconName="UnknownSolid" />}
       {type === 'congratulation' && <Icon css={congratulationType} iconName="Trophy2Solid" />}
+      {type === 'custom' && (
+        <Icon
+          css={css`
+            margin-top: ${iconMargin};
+            color: ${props.color ?? SharedColors.gray10};
+          `}
+          iconName={props.icon ?? 'UnknownSolid'}
+        />
+      )}
       <div css={cardDetail}>
         <div css={cardTitle}>{title}</div>
         {description && <div css={cardDescription}>{description}</div>}
-        {link && makeLinkLabel(link)}
-        {links?.map((link) => (
-          <div key={link.label}>{makeLinkLabel(link)}</div>
-        ))}
+        <Stack horizontal horizontalAlign="space-between">
+          <Stack {...stackProps}>
+            {leftLinkList.map(
+              (link) => link != null && <Stack.Item key={link.label}>{makeLinkLabel(link)}</Stack.Item>
+            )}
+          </Stack>
+          <Stack {...stackProps}>
+            {rightLinkList.map(
+              (link) => link != null && <Stack.Item key={link.label}>{makeLinkLabel(link)}</Stack.Item>
+            )}
+          </Stack>
+        </Stack>
         {type === 'pending' && (
           <Shimmer shimmerElements={[{ type: ShimmerElementType.line, height: 2 }]} styles={getShimmerStyles} />
         )}

Composer/packages/client/src/components/Notifications/useSurveyNotification.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import formatMessage from 'format-message';
+import querystring from 'query-string';
+
+import { ClientStorage } from '../../utils/storage';
+import { surveyEligibilityState, dispatcherState, machineInfoState } from '../../recoilModel/atoms/appState';
+import { MachineInfo } from '../../recoilModel/types';
+import { SURVEY_URL_BASE } from '../../constants';
+import TelemetryClient from '../../telemetry/TelemetryClient';
+
+const buildUrl = (info: MachineInfo) => {
+  // User OS
+  // hashed machineId
+  // composer version
+  // maybe include subscription ID; wait for global sign-in feature
+  // session ID  (global telemetry GUID)
+  const version = process.env.COMPOSER_VERSION;
+
+  const parameters = {
+    Source: 'Composer',
+    os: info?.os || 'Unknown',
+    machineId: info?.id,
+    version,
+  };
+
+  return `${SURVEY_URL_BASE}?${querystring.stringify(parameters)}`;
+};
+
+export const useSurveyNotification = () => {
+  const { addNotification, deleteNotification } = useRecoilValue(dispatcherState);
+  const surveyEligible = useRecoilValue(surveyEligibilityState);
+  const machineInfo = useRecoilValue(machineInfoState);
+
+  useEffect(() => {
+    const url = buildUrl(machineInfo);
+    deleteNotification('survey');
+
+    if (surveyEligible) {
+      const surveyStorage = new ClientStorage(window.localStorage, 'survey');
+      TelemetryClient.track('HATSSurveyOffered');
+
+      addNotification({
+        id: 'survey',
+        type: 'question',
+        title: formatMessage('Would you mind taking a quick survey?'),
+        description: formatMessage('We read every response and will use your feedback to improve Composer.'),
+        leftLinks: [
+          {
+            label: formatMessage('Take survey'),
+            onClick: () => {
+              // This is safe; we control what the URL that gets built is
+              // eslint-disable-next-line security/detect-non-literal-fs-filename
+              window.open(url, '_blank');
+              TelemetryClient.track('HATSSurveyAccepted');
+              deleteNotification('survey');
+            },
+          },
+
+          {
+            // this is functionally identical to clicking the close box
+            label: formatMessage('Remind me later'),
+            onClick: () => {
+              TelemetryClient.track('HATSSurveyDismissed');
+              deleteNotification('survey');
+            },
+          },
+        ],
+        rightLinks: [
+          {
+            label: formatMessage('No thanks'),
+            onClick: () => {
+              TelemetryClient.track('HATSSurveyRejected');
+              deleteNotification('survey');
+              surveyStorage.set('optedOut', true);
+            },
+          },
+        ],
+      });
+    }
+  }, []);
+};

Composer/packages/client/src/constants.tsx

@@ -527,9 +527,10 @@ export const defaultBotPort = 3979;
 export const defaultBotEndpoint = `http://localhost:${defaultBotPort}/api/messages`;
 
 const DAYS_IN_MS = 1000 * 60 * 60 * 24;
-
 export const SURVEY_PARAMETERS = {
-  daysUntilEligible: 5,
+  daysUntilEligible: 2,
   timeUntilNextSurvey: 90 * DAYS_IN_MS,
-  chanceToAppear: 0.15,
+  chanceToAppear: 0.3,
 };
+
+export const SURVEY_URL_BASE = 'https://aka.ms/bfcomposersurvey';

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -10,6 +10,7 @@ import { Split, SplitMeasuredSizes } from '@geoffcox/react-splitter';
 import { dispatcherState } from '../../recoilModel';
 import { renderThinSplitter } from '../../components/Split/ThinSplitter';
 import { Conversation } from '../../components/Conversation';
+import { useSurveyNotification } from '../../components/Notifications/useSurveyNotification';
 
 import SideBar from './SideBar';
 import CommandBar from './CommandBar';
@@ -33,6 +34,8 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
   const activeBot = skillId ?? projectId;
 
+  useSurveyNotification();
+
   return (
     <div css={contentWrapper} role="main">
       <Split

Composer/packages/client/src/pages/home/Home.tsx

@@ -163,6 +163,7 @@ const Home: React.FC<RouteComponentProps> = () => {
     //   disabled: botName ? false : true,
     // },
   ];
+
   return (
     <div css={home.outline}>
       <div css={home.page}>

Composer/packages/client/src/pages/publish/Publish.tsx

@@ -163,40 +163,6 @@ const Publish: React.FC<RouteComponentProps<{ projectId: string; targetName?: st
   }, [botList]);
 
   useEffect(() => {
-    addNotification({
-      id: 'test',
-      type: 'question',
-      title: 'Would you like to take a survey?',
-      description: "This is where we would ask the user if they'd like to take a survey.",
-      links: [
-        {
-          label: 'Take the survey?',
-          onClick: () => {
-            console.log('clicked');
-          },
-        },
-        {
-          label: 'Opt out of this and future surveys',
-          onClick: () => {
-            console.log('opted out');
-          },
-        },
-      ],
-    });
-
-    addNotification({
-      id: 'test2',
-      type: 'congratulation',
-      title: "You've published 10 bots!",
-      description: 'Congratulations!',
-      link: {
-        label: 'Got it',
-        onClick: () => {
-          console.log('clicked this');
-        },
-      },
-    });
-
     // Clear intervals when unmount
     return () => {
       if (pollingUpdaterList) {

Composer/packages/client/src/recoilModel/atoms/appState.ts

@@ -12,6 +12,7 @@ import {
   AppUpdateState,
   BoilerplateVersion,
   Notification,
+  MachineInfo,
 } from '../../recoilModel/types';
 import { getUserSettings } from '../utils';
 import onboardingStorage from '../../utils/onboardingStorage';
@@ -370,6 +371,11 @@ export const surveyEligibilityState = atom<boolean>({
   default: false,
 });
 
+export const machineInfoState = atom<MachineInfo>({
+  key: getFullyQualifiedKey('machineInfoState'),
+  default: null,
+});
+
 export const showGetStartedTeachingBubbleState = atom<boolean>({
   key: getFullyQualifiedKey('showGetStartedTeachingBubbleState'),
   default: false,

Composer/packages/client/src/recoilModel/dispatchers/application.ts

@@ -19,14 +19,15 @@ import {
   userHasNodeInstalledState,
   applicationErrorState,
   surveyEligibilityState,
+  machineInfoState,
   showGetStartedTeachingBubbleState,
   showErrorDiagnosticsState,
   showWarningDiagnosticsState,
   projectsForDiagnosticsFilterState,
 } from '../atoms/appState';
 import { AppUpdaterStatus, CreationFlowStatus, CreationFlowType, SURVEY_PARAMETERS } from '../../constants';
 import OnboardingState from '../../utils/onboardingStorage';
-import { StateError, AppUpdateState } from '../../recoilModel/types';
+import { StateError, AppUpdateState, MachineInfo } from '../../recoilModel/types';
 import { DebugDrawerKeys } from '../../pages/design/DebugPanel/TabExtensions/types';
 import httpClient from '../../utils/httpUtil';
 import { ClientStorage } from '../../utils/storage';
@@ -163,7 +164,10 @@ export const applicationDispatcher = () => {
     const surveyStorage = new ClientStorage(window.localStorage, 'survey');
 
     const optedOut = surveyStorage.get('optedOut', false);
-    if (optedOut) return;
+    if (optedOut) {
+      set(surveyEligibilityState, false);
+      return;
+    }
 
     let days = surveyStorage.get('days', 0);
     const lastUsed = surveyStorage.get('dateLastUsed', null);
@@ -185,6 +189,10 @@ export const applicationDispatcher = () => {
     surveyStorage.set('dateLastUsed', today);
   });
 
+  const setMachineInfo = useRecoilCallback((callbackHelpers: CallbackInterface) => (info: MachineInfo) => {
+    callbackHelpers.set(machineInfoState, info);
+  });
+
   const setShowGetStartedTeachingBubble = useRecoilCallback((callbackHelpers: CallbackInterface) => (show: boolean) => {
     callbackHelpers.set(showGetStartedTeachingBubbleState, show);
   });
@@ -218,6 +226,7 @@ export const applicationDispatcher = () => {
     setDebugPanelExpansion,
     setActiveTabInDebugPanel,
     setSurveyEligibility,
+    setMachineInfo,
     setShowGetStartedTeachingBubble,
     setErrorDiagnosticsFilter,
     setWarningDiagnosticsFilter,

Composer/packages/client/src/recoilModel/types.ts

@@ -129,3 +129,8 @@ export type WebChatInspectionData = {
 };
 
 export type RuntimeOutputData = { standardOutput: string; standardError: BotStartError | null };
+
+export type MachineInfo = null | {
+  id: string;
+  os: string;
+};

Composer/packages/electron-server/src/main.ts

@@ -295,11 +295,15 @@ async function run() {
     setTimeout(() => startApp(signalThatMainWindowIsShowing), 500);
 
     const mainWindow = getMainWindow();
+    const machineId = await getMachineId();
+
     mainWindow?.webContents.send('session-update', 'session-started');
 
     if (process.env.COMPOSER_DEV_TOOLS) {
       mainWindow?.webContents.openDevTools();
     }
+
+    mainWindow?.webContents.send('machine-info', { id: machineId, os: os.platform() });
   });
 
   // Quit when all windows are closed.