fix: Add warning to empty allowed callers list

Composer/packages/client/src/pages/botProject/PublishTargets.tsx

@@ -18,7 +18,7 @@ import { AuthDialog } from '../../components/Auth/AuthDialog';
 import { isShowAuthDialog } from '../../utils/auth';
 
 import { PublishProfileDialog } from './create-publish-profile/PublishProfileDialog';
-import { title, tableRow, tableRowItem, tableColumnHeader, columnSizes, addNewButton } from './styles';
+import { title, tableRow, tableRowItem, tableColumnHeader, columnSizes, actionButton } from './styles';
 
 // -------------------- Styles -------------------- //
 
@@ -139,7 +139,7 @@ export const PublishTargets: React.FC<PublishTargetsProps> = (props) => {
           })}
           <ActionButton
             data-testid={'addNewPublishProfile'}
-            styles={addNewButton}
+            styles={actionButton}
             onClick={() => {
               if (isShowAuthDialog(true)) {
                 setShowAuthDialog(true);

Composer/packages/client/src/pages/botProject/skill-configuration/AllowedCallers.tsx

@@ -2,20 +2,21 @@
 // Licensed under the MIT License.
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import React from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { ActionButton, IconButton } from 'office-ui-fabric-react/lib/components/Button';
+import { ActionButton } from 'office-ui-fabric-react/lib/components/Button';
 import { FluentTheme } from '@uifabric/fluent-theme';
 import { Stack } from 'office-ui-fabric-react/lib/components/Stack';
 import { ITextField, TextField } from 'office-ui-fabric-react/lib/components/TextField';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
 
 import { dispatcherState, rootBotProjectIdSelector, settingsState } from '../../../recoilModel';
 import { mergePropertiesManagedByRootBot } from '../../../recoilModel/dispatchers/utils/project';
-import { addNewButton, tableColumnHeader } from '../styles';
+import { actionButton, subtitle as defaultSubtitle } from '../styles';
 
 const Input = styled(TextField)({
   width: '100%',
@@ -53,15 +54,19 @@ const ItemContainer = styled.div({
 
 const Row = styled(Stack)({
   borderBottom: `1px solid ${FluentTheme.palette.neutralLight}`,
-  padding: '8px 0 8px 4px',
-  '& .ms-Button:not(:focus) i': {
+  padding: '4px 0',
+  '& .ms-Button:not(:focus)': {
     visibility: 'hidden',
   },
-  '&:hover .ms-Button i': {
+  '&:hover .ms-Button': {
     visibility: 'visible',
   },
 });
 
+const subtitle = css`
+  padding: 8px 0;
+`;
+
 type ItemProps = {
   value: string;
   onBlur: () => void;
@@ -81,15 +86,17 @@ const Item = React.memo(({ value, onBlur, onChange, onRemove }: ItemProps) => {
   }, []);
 
   return (
-    <Row horizontal>
+    <Row horizontal verticalAlign={'center'}>
       <Input
         componentRef={(ref) => (itemRef.current = ref)}
         styles={textFieldStyles}
         value={value}
         onBlur={onBlur}
         onChange={onChange}
       />
-      <IconButton aria-label={formatMessage('Remove item')} iconProps={{ iconName: 'Trash' }} onClick={onRemove} />
+      <ActionButton aria-label={formatMessage('Remove item')} styles={actionButton} onClick={onRemove}>
+        {formatMessage('Remove')}
+      </ActionButton>
     </Row>
   );
 });
@@ -143,17 +150,24 @@ export const AllowedCallers: React.FC<Props> = ({ projectId }) => {
 
   return (
     <React.Fragment>
-      <div css={tableColumnHeader()}>{formatMessage('Allowed callers')} </div>
+      <div css={[defaultSubtitle, subtitle]}>
+        {formatMessage('List of app ids for bots that are allowed to use this skill')}
+      </div>
       <ItemContainer>
         {skillConfiguration?.allowedCallers?.map((caller, index) => {
           return (
             <Item key={index} value={caller} onBlur={onBlur} onChange={onChange(index)} onRemove={onRemove(index)} />
           );
         })}
       </ItemContainer>
-      <ActionButton data-testid={'addNewAllowedCaller'} styles={addNewButton} onClick={onAddNewAllowedCaller}>
-        {formatMessage('Add new')}
+      <ActionButton data-testid={'addNewAllowedCaller'} styles={actionButton} onClick={onAddNewAllowedCaller}>
+        {formatMessage('Add caller')}
       </ActionButton>
+      {!skillConfiguration?.allowedCallers?.length && (
+        <MessageBar messageBarType={MessageBarType.warning}>
+          {formatMessage('This bot cannot be called as a skill since the allowed caller list is empty')}
+        </MessageBar>
+      )}
     </React.Fragment>
   );
 };

Composer/packages/client/src/pages/botProject/skill-configuration/SkillToggle.tsx

@@ -16,6 +16,7 @@ const toggle = css`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  padding-top: 8px;
 `;
 
 type Props = {

Composer/packages/client/src/pages/botProject/skill-configuration/index.tsx

@@ -16,9 +16,9 @@ type Props = {
 
 export const SkillConfiguration: React.FC<Props> = ({ projectId }) => {
   return (
-    <CollapsableWrapper title={formatMessage('Skill configuration')} titleStyle={title}>
-      <SkillToggle projectId={projectId} />
+    <CollapsableWrapper title={formatMessage('Allowed callers')} titleStyle={title}>
       <AllowedCallers projectId={projectId} />
+      <SkillToggle projectId={projectId} />
     </CollapsableWrapper>
   );
 };

Composer/packages/client/src/pages/botProject/styles.ts

@@ -122,7 +122,7 @@ export const unknownIconStyle = (required: boolean) => {
 
 export const columnSizes = ['300px', '150px', '150px'];
 
-export const addNewButton = {
+export const actionButton = {
   root: {
     fontSize: 12,
     fontWeight: FontWeights.regular,

Composer/packages/server/src/locales/en-US.json

@@ -161,6 +161,9 @@
   "add_and_remove_packages_9e439f32": {
     "message": "Add and remove packages"
   },
+  "add_caller_5c12aa5b": {
+    "message": "Add caller"
+  },
   "add_custom_a376ce51": {
     "message": "Add Custom"
   },
@@ -239,6 +242,9 @@
   "an_authoring_key_is_created_automatically_when_you_21cf77aa": {
     "message": "An authoring key is created automatically when you create a LUIS account."
   },
+  "an_azure_tenant_must_be_set_in_order_to_provision__a223f1b8": {
+    "message": "An Azure tenant must be set in order to provision resources. Try recreating the publish profile and try again."
+  },
   "an_error_occurred_connecting_initializing_the_dire_fc7b50be": {
     "message": "An error occurred connecting initializing the DirectLine server"
   },
@@ -371,6 +377,9 @@
   "australiaeast_f3227a31": {
     "message": "australiaeast"
   },
+  "authentication_error_39e996c5": {
+    "message": "Authentication Error"
+  },
   "authoring_canvas_18802e39": {
     "message": "Authoring canvas"
   },
@@ -614,9 +623,6 @@
   "close_d634289d": {
     "message": "Close"
   },
-  "code_editor_1438efc": {
-    "message": "code editor"
-  },
   "cognitive_service_region_87c668be": {
     "message": "Cognitive Service Region"
   },
@@ -1373,6 +1379,9 @@
   "error_processing_schema_2c707cf3": {
     "message": "Error Processing Schema"
   },
+  "error_provisioning_25835400": {
+    "message": "Error provisioning."
+  },
   "errorsmsg_8f5d3d85": {
     "message": "{ errorsMsg }"
   },
@@ -1931,6 +1940,9 @@
   "list_of_actions_rendered_as_suggestions_to_user_c0154e0b": {
     "message": "List of actions rendered as suggestions to user."
   },
+  "list_of_app_ids_for_bots_that_are_allowed_to_use_t_bee9fea8": {
+    "message": "List of app ids for bots that are allowed to use this skill"
+  },
   "list_of_attachments_with_their_type_used_by_channe_7ecf0086": {
     "message": "List of attachments with their type. Used by channels to render as UI cards or other generic file attachment types."
   },
@@ -2357,6 +2369,9 @@
   "oauth_login_b6aa9534": {
     "message": "OAuth login"
   },
+  "object_33fc75c0": {
+    "message": "object"
+  },
   "object_345070f6": {
     "message": "Object"
   },
@@ -3068,9 +3083,6 @@
   "skill_9b084d2e": {
     "message": "Skill"
   },
-  "skill_configuration_5e4bfbcd": {
-    "message": "Skill configuration"
-  },
   "skill_dialog_name_1bbf0eff": {
     "message": "Skill Dialog Name"
   },
@@ -3311,6 +3323,9 @@
   "there_was_an_error_74ed3c58": {
     "message": "There was an error"
   },
+  "there_was_an_error_accessing_your_azure_account_er_f39b4378": {
+    "message": "There was an error accessing your Azure account: { errorMsg }"
+  },
   "there_was_an_unexpected_error_importing_bot_conten_cac97236": {
     "message": "There was an unexpected error importing bot content to <b>{ botName }</b>"
   },
@@ -3326,6 +3341,9 @@
   "these_tasks_will_be_used_to_generate_the_manifest__2791be0e": {
     "message": "These tasks will be used to generate the manifest and describe the capabilities of this skill to those who may want to use it."
   },
+  "this_bot_cannot_be_called_as_a_skill_since_the_all_ffb502b2": {
+    "message": "This bot cannot be called as a skill since the allowed caller list is empty"
+  },
   "this_cognitive_service_account_is_already_set_as_t_841165f7": {
     "message": "This cognitive service account is already set as the default for another bot. Do you want to enable this service without setting it as default?"
   },
@@ -3362,6 +3380,9 @@
   "this_page_contains_detailed_information_about_your_b2b3413b": {
     "message": "This Page contains detailed information about your bot. For security reasons, they are hidden by default. To test your bot or publish to Azure, you may need to provide these settings"
   },
+  "this_publishing_profile_profilename_is_no_longer_s_eee0f447": {
+    "message": "This publishing profile ({ profileName }) is no longer supported. You are a member of multiple Azure tenants and the profile needs to have a tenant id associated with it. You can either edit the profile by adding the `tenantId` property to it''s configuration or create a new one."
+  },
   "this_trigger_type_is_not_supported_by_the_regex_re_dc3eefa2": {
     "message": "This trigger type is not supported by the RegEx recognizer. To ensure this trigger is fired, change the recognizer type."
   },
@@ -3518,6 +3539,9 @@
   "unread_notifications_indicator_e2ca00d5": {
     "message": "Unread notifications Indicator"
   },
+  "unsupported_publishing_profile_ad088e54": {
+    "message": "Unsupported publishing profile"
+  },
   "unused_8d193e3": {
     "message": "Unused"
   },