Allowed Callers is not editable when making a bot available as a skill

[darrenj]

Describe the bug

When making a Bot available as a skill the allowed callers UX enables you to add allowed callers but clicking "add allowed callers" just adds a non-editable 0000-11111-00000-111111 entry

Version

1.4.0-nightly.237101

Browser

• Electron distribution
• Chrome
• Safari
• Firefox
• Edge

OS

• macOS
• Windows
• Ubuntu

To Reproduce

Steps to reproduce the behavior:

1. Create a bot, add LUIS/trigger
2. choose make bot available as a skill
3. work through screens to add allowed callers, observe that adding a new one isn't editable

Expected behavior

Editable allowed callers, also a link to further documentation that explains how skills work and why allowed callers is needed.

[tdurnford]

@darrenj It looks like you can edit it - the field is just borderless. Not sure why the value defaults to '0000-11111-00000-11111' - that is a very strange and confusing behavior.

I don't think we should use the borderless prop here. When the user hovers over the value, it's not clear the text is actually a text field. This should behave exactly like the Allowed Callers component in the settings. When the user hovers over the field, borders should appear around the text to indicate that it is an editable field. Also, when the user hits the 'Add new caller' button, we should set the focus to the newest entry.

Screen capture - bot settings

[cwhitten]

@luhan2017 I agree with @tdurnford. Let's use existing patterns here.