feat: Trigger Node (#1529)

* new trigger

* add `subtitle` in ConceptLabels to override some title

* refine new css of Trigger

* fix an unsafe prop visit

* fix eslint import path

* move styles to 'triggerStyles.ts'

* use lodash.get in Trigger.tsx

* add subtitle in form editor (#1662)

* Final changes

* Remove unnecessary guard

* enable debug when running tests

* fix ci: BreadCrumb

* fix ci: CreateNewBot

* revert BreadCrumb

* delete data.json before each e2e test

* More labeling

* Fix e2e test

* fix visual designer spec

* use findAllBy for breadcrumb spec

sometimes more than one breadcrumb is found. this will use the last one found

* use debug logger

* pipe server output to log file and print after tests are run

* fix up e2e script

* run headless
* pipe server logs to file
* only invoke cleanup function once

* fix visual designer spec again

* display server logs

* add more debug logging

* always print e2e logs

* Base leileizh's e2e fixes

* update the node env

Composer/cypress/integration/Breadcrumb.spec.ts

@@ -13,7 +13,8 @@ context('breadcrumb', () => {
   });
 
   function hasBreadcrumbItems(cy: Cypress.cy, items: (string | RegExp)[]) {
-    cy.findByTestId('Breadcrumb')
+    cy.get('[data-testid="Breadcrumb"]')
+      .last()
       .get('li')
       .should($li => {
         items.forEach((item, idx) => {
@@ -37,21 +38,21 @@ context('breadcrumb', () => {
       cy.findByText('__TestTodoSample.Main').click();
     });
 
-    hasBreadcrumbItems(cy, ['__TestTodoSample']);
+    hasBreadcrumbItems(cy, ['__TestTodoSample.Main']);
   });
 
   it('can show event name in breadcrumb', () => {
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('AddToDo').click();
-      cy.findByText('Dialog started (BeginDialog)').click();
+      cy.findByText('Dialog started').click();
     });
 
-    hasBreadcrumbItems(cy, ['AddToDo', 'Dialog started (BeginDialog)']);
+    hasBreadcrumbItems(cy, ['AddToDo', 'Dialog started']);
   });
 
   it('can show action name in breadcrumb', () => {
     cy.findByTestId('ProjectTree').within(() => {
-      cy.findByText('Greeting (ConversationUpdate)').click();
+      cy.findByText('Greeting').click();
     });
 
     // Click on an action
@@ -61,6 +62,6 @@ context('breadcrumb', () => {
       });
     });
 
-    hasBreadcrumbItems(cy, ['__TestTodoSample.Main', 'Greeting (ConversationUpdate)', 'Send a response']);
+    hasBreadcrumbItems(cy, ['__TestTodoSample.Main', 'Greeting', 'Send a response']);
   });
 });

Composer/cypress/integration/CreateNewBot.spec.ts

@@ -23,9 +23,9 @@ context('Creating a new bot', () => {
     cy.findByTestId('Create from template').click();
     cy.findByTestId('TodoSample').click();
     cy.findByTestId('NextStepButton').click();
-    cy.findByTestId('NewDialogName').type('{selectall}__TestNewProject{enter}');
+    cy.findByTestId('NewDialogName').type('{selectall}__TestNewProject2{enter}');
     cy.findByTestId('ProjectTree').within(() => {
-      cy.findByText('__TestNewProject.Main').should('exist');
+      cy.findByText('__TestNewProject2.Main').should('exist');
       cy.findByText('AddToDo').should('exist');
       cy.findByText('ClearToDos').should('exist');
       cy.findByText('DeleteToDo').should('exist');

Composer/cypress/integration/NotificationPage.spec.ts

@@ -5,6 +5,7 @@ context('Notification Page', () => {
   beforeEach(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('TodoSample');
+    cy.visitPage('Notifications');
   });
 
   it('can show lg syntax error ', () => {

Composer/cypress/integration/VisualDesigner.spec.ts

@@ -2,12 +2,9 @@
 // Licensed under the MIT License.
 
 context('Visual Designer', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('TodoSample');
-  });
-
-  beforeEach(() => {
     // Return to Main.dialog
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('__TestTodoSample.Main').click();
@@ -16,11 +13,11 @@ context('Visual Designer', () => {
 
   it('can find Visual Designer default trigger in container', () => {
     cy.findByTestId('ProjectTree').within(() => {
-      cy.findByText('Greeting (ConversationUpdate)').click();
+      cy.findByText('Greeting').click();
     });
 
     cy.withinEditor('VisualEditor', () => {
-      cy.findByText('Trigger').should('exist');
+      cy.findByText('ConversationUpdate activity').should('exist');
     });
   });
 });

Composer/cypress/support/commands.ts

@@ -23,4 +23,10 @@ Cypress.Commands.add('withinEditor', (editorName, cb) => {
 
 Cypress.Commands.add('visitPage', page => {
   cy.findByTestId(`LeftNav-CommandBarButton${page}`).click();
+  cy.wait(3000);
+});
+
+Cypress.on('uncaught:exception', (err, runnable) => {
+  console.log('uncaught exception', err);
+  return false;
 });

Composer/package.json

@@ -34,7 +34,7 @@
     "test:coverage": "yarn test --coverage --no-cache --reporters=default",
     "test:integration": "cypress run --browser chrome",
     "test:integration:open": "cypress open",
-    "test:integration:clean": "rimraf TestBots/*",
+    "test:integration:clean": "rimraf ../MyBots/__Test*",
     "lint": "wsrun --exclude-missing --collect-logs --report lint",
     "lint:fix": "wsrun --exclude-missing --collect-logs --report lint:fix",
     "typecheck": "concurrently --kill-others-on-fail \"npm:typecheck:*\"",

Composer/packages/client/src/components/ProjectTree/TriggerCreationModal.tsx

@@ -180,7 +180,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
           )}
           {showIntentDropDown && (
             <Dropdown
-              label={formatMessage('Which intent do you want to handle?')}
+              label={formatMessage('Which intent do you want to handle? (Optional)')}
               options={intentOptions}
               styles={dropdownStyles}
               onChange={onSelectIntent}

Composer/packages/client/src/utils/dialogUtil.ts

@@ -128,7 +128,11 @@ export function getEventTypes(): IDropdownOption[] {
       const labelOverrides = ConceptLabels[t];
 
       if (labelOverrides && labelOverrides.title) {
-        name = labelOverrides.title;
+        if (labelOverrides.subtitle) {
+          name = `${labelOverrides.title} (${labelOverrides.subtitle})`;
+        } else {
+          name = labelOverrides.title;
+        }
       }
 
       return { key: t, text: name || t };
@@ -144,7 +148,11 @@ export function getActivityTypes(): IDropdownOption[] {
       const labelOverrides = ConceptLabels[t];
 
       if (labelOverrides && labelOverrides.title) {
-        name = labelOverrides.title;
+        if (labelOverrides.subtitle) {
+          name = `${labelOverrides.title} (${labelOverrides.subtitle})`;
+        } else {
+          name = labelOverrides.title;
+        }
       }
 
       return { key: t, text: name || t };

Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx

@@ -52,6 +52,10 @@ export const RootField: React.FC<RootFieldProps> = props => {
     return designerName || dialogName || sdkOverrides.title || title || schema.title || startCase(name);
   };
 
+  const getSubTitle = (): string => {
+    return sdkOverrides.subtitle || sdkOverrides.title || formData.$type;
+  };
+
   const getDescription = (): string => {
     return sdkOverrides.description || description || schema.description || '';
   };
@@ -65,6 +69,7 @@ export const RootField: React.FC<RootFieldProps> = props => {
           styleOverrides={{ field: { fontWeight: FontWeights.semibold } }}
           fontSize={FontSizes.size20}
         />
+        <p className="RootFieldSubtitle">{getSubTitle()}</p>
         {sdkOverrides.description !== false && (description || schema.description) && (
           <p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
             {getDescription()}

Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css

@@ -13,7 +13,15 @@
 .RootFieldTitle {
   border-bottom: 1px solid #c8c6c4;
   padding: 0 18px;
-  margin-bottom: 16px;
+  margin-bottom: 0px;
+}
+.RootFieldSubtitle {
+  height: 15px;
+  line-height: 15px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #4F4F4F;
+  margin: -7px 0 7px;
 }
 .RootFieldDescription {
   margin-top: 0;

Composer/packages/extensions/visual-designer/src/components/nodes/Trigger.tsx

@@ -5,42 +5,44 @@
 
 import { ConceptLabels } from '@bfc/shared';
 import { jsx } from '@emotion/core';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import get from 'lodash/get';
 
-import { ElementIcon } from '../../utils/obiPropertyResolver';
-import { TriggerSize } from '../../constants/ElementSizes';
-
-import { FormCard } from './templates/FormCard';
+import {
+  triggerContainerStyle,
+  triggerContentStyle,
+  titleStyle,
+  subtitleStyle,
+  triggerIconStyle,
+} from './triggerStyles';
 
 function getLabel(data: any): string {
-  if (data.intent) {
-    return data.intent;
-  }
-
   const labelOverrides = ConceptLabels[data.$type];
-
-  if (labelOverrides.title) {
-    return labelOverrides.title;
+  if (labelOverrides) {
+    return labelOverrides.subtitle || labelOverrides.title;
   }
-
   return data.$type;
 }
 
-export const Trigger = ({ data, onClick = () => {} }): JSX.Element => (
-  <div
-    css={{
-      ...TriggerSize,
-    }}
-  >
-    <FormCard
-      nodeColors={{
-        themeColor: '#BFEAE9',
-        iconColor: 'black',
-      }}
-      icon={ElementIcon.Flow}
-      iconSize={8}
-      header={'Trigger'}
-      label={getLabel(data)}
-      onClick={onClick}
-    />
-  </div>
-);
+function getName(data: any): string {
+  return (
+    data.intent || get(data, '$designer.name', ConceptLabels[data.$type] ? ConceptLabels[data.$type].title : data.$type)
+  );
+}
+
+export const Trigger = ({ data, onClick = () => {} }): JSX.Element => {
+  const name = getName(data);
+  const label = getLabel(data);
+
+  return (
+    <div css={triggerContainerStyle}>
+      <div css={triggerContentStyle}>
+        <div css={titleStyle}>
+          <Icon iconName="Flow" style={triggerIconStyle} />
+          <span>{name}</span>
+        </div>
+        <div css={subtitleStyle}>{label}</div>
+      </div>
+    </div>
+  );
+};

Composer/packages/extensions/visual-designer/src/components/nodes/triggerStyles.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License
+
+import { TriggerSize } from '../../constants/ElementSizes';
+
+export const triggerContainerStyle: any = {
+  ...TriggerSize,
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'flex-end',
+  paddingBottom: '5px',
+  boxSizing: 'border-box',
+};
+
+export const triggerContentStyle: any = {
+  wordBreak: 'break-all',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+export const titleStyle: any = {
+  whiteSpace: 'nowrap',
+  color: '#333333',
+  fontFamily: 'Segoe UI',
+  fontSize: '18px',
+  lineHeight: '24px',
+  fontWeight: 600,
+};
+
+export const subtitleStyle: any = {
+  whiteSpace: 'nowrap',
+  color: '#4f4f4f',
+  fontFamily: 'Segoe UI',
+  fontSize: '12px',
+  lineHeight: '14px',
+};
+
+export const triggerIconStyle = {
+  lineHeight: '24px',
+  marginRight: '5px',
+};