389595

Committed 23 May 2024 02:16AM UTC coverage: 45.975% (-21.6%) from 67.547%

Build # 389595

Build Type

Pull #2459

Azure DevOps

Committed by

web-flow

Commit Message

Merge 88a7da94c into e554dc423

Pull Request Pull Request #2459: Bumped webpack version from 4.32.2 to 5.91.0

Run Details

1815 of 4567 branches covered (39.74%)

Branch coverage included in aggregate %.

4730 of 9669 relevant lines covered (48.92%)

2.9 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/app/client/src/ui/dialogs/getStartedWithCSDialog/getStartedWithCSDialog.tsx

//
// Copyright (c) Microsoft. All rights reserved.
// Licensed under the MIT license.
//
// Microsoft Bot Framework: http://botframework.com
//
// Bot Framework Emulator Github:
// https://github.com/Microsoft/BotFramwork-Emulator
//
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License:
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
import { DefaultButton, Dialog, DialogFooter, LinkButton, PrimaryButton } from '@bfemulator/ui-react';
import { ServiceTypes } from 'botframework-config/lib/schema';
import * as React from 'react';
import { Component, ReactNode } from 'react';

import { serviceTypeLabels } from '../../../utils/serviceTypeLables';
import * as styles from '../dialogStyles.scss';

export interface GetStartedWithCSDialogProps {
  cancel: () => void;
  confirm: () => void;
  launchConnectedServiceEditor: () => void;
  onAnchorClick: (url: string) => void;
  authenticatedUser?: string;
  serviceType?: ServiceTypes;
  showNoModelsFoundContent?: boolean;
}

const titleMap = {
  [ServiceTypes.Luis]: 'Create a LUIS app',
  [ServiceTypes.Dispatch]: 'Connect to a Dispatch model',
  [ServiceTypes.QnA]: 'Create a QnA Maker knowledge base',
  [ServiceTypes.BlobStorage]: 'Create a Blob Storage Container',
  [ServiceTypes.CosmosDB]: 'Connect to a Cosmos DB account',
};

const buttonTextMap = {
  [ServiceTypes.Luis]: 'LUIS',
  [ServiceTypes.Dispatch]: 'Dispatch',
  [ServiceTypes.QnA]: 'QnA Maker',
  [ServiceTypes.BlobStorage]: 'Blob Storage',
  [ServiceTypes.CosmosDB]: 'Cosmos DB',
};

export class GetStartedWithCSDialog extends Component<GetStartedWithCSDialogProps, Record<string, unknown>> {
  public render() {
    return (
      <Dialog className={styles.dialogMedium} cancel={this.props.cancel} title={titleMap[this.props.serviceType]}>
        {this.content}
        <DialogFooter>
          <DefaultButton text="Cancel" onClick={this.props.cancel} />
          <PrimaryButton text={`Go to ${buttonTextMap[this.props.serviceType]}`} onClick={this.props.confirm} />
        </DialogFooter>
      </Dialog>
    );
  }

  private get content(): ReactNode {
    const { serviceType } = this.props;

    switch (serviceType) {
      case ServiceTypes.Luis:
        return this.luisContent;

      case ServiceTypes.Dispatch:
        return this.dispatchContent;

      case ServiceTypes.QnA:
        return this.qnaContent;

      case ServiceTypes.BlobStorage:
        return this.blobContent;

      case ServiceTypes.CosmosDB:
        return this.cosmosDbContent;

      default:
        return null;
    }
  }

  private get luisContent(): ReactNode {
    if (this.props.showNoModelsFoundContent) {
      return this.luisNoModelsFoundContent;
    }
    return (
      <>
        <p>
          {'Language Understanding Service (LUIS) is a matching learning-based service for adding language ' +
            'understanding to bots, applications and IoT devices.'}
        </p>
        <p>
          {`You have not signed up for a LUIS account under ${this.props.authenticatedUser} `}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISDocsClick}>
            Learn more about LUIS
          </LinkButton>
        </p>
        <p>
          {'Alternatively, you can '}
          <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
            connect to a LUIS app manually
          </LinkButton>
          {' if you know the app ID, version, and authoring key.'}
        </p>
      </>
    );
  }

  private get luisNoModelsFoundContent(): ReactNode {
    const label = serviceTypeLabels[this.props.serviceType];
    const connectModalManuallyText = `Connect to a ${label} model manually`;
    const learnMoreAbtModelsText = `Learn more about ${label} models`;
    return (
      <>
        <p>Signed in as {this.props.authenticatedUser}.</p>
        <p>
          {`You do not have any ${label} models associated with this account. `}
          <LinkButton
            ariaLabel={connectModalManuallyText}
            className={styles.dialogLink}
            onClick={this.props.launchConnectedServiceEditor}
          >
            {connectModalManuallyText}
          </LinkButton>{' '}
          by entering the app ID and key.
        </p>
        <p>
          <LinkButton
            ariaLabel={learnMoreAbtModelsText}
            className={styles.dialogLink}
            linkRole={true}
            onClick={this.onLUISInfoClick}
          >
            {learnMoreAbtModelsText}
          </LinkButton>
          <br />
        </p>
        <p>
          {`You can link apps from a different ${label} account to this Azure account by adding ` +
            'yourself as a collaborator. '}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISCollabDocsClick}>
            Learn more about collaborating
          </LinkButton>
        </p>
      </>
    );
  }

  private get dispatchContent(): ReactNode {
    if (this.props.showNoModelsFoundContent) {
      return this.dispatchNoModelsFoundContent;
    }

    return (
      <>
        <p>
          {'A Dispatch model is a LUIS model that enables your bot to dispatch intents across multiple LUIS ' +
            'apps and QnAMaker knowledge bases. '}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onDispatchLinkClick}>
            Learn more about Dispatch models
          </LinkButton>
        </p>
        <p>
          {`You have not signed up for a LUIS account under ${this.props.authenticatedUser} `}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISDocsClick}>
            Learn more about LUIS
          </LinkButton>
        </p>
        <br />
        {'Alternatively, you can '}
        <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
          connect to a Dispatch app manually
        </LinkButton>
        {' if you know the app ID, version, and authoring key.'}
      </>
    );
  }

  private get dispatchNoModelsFoundContent(): ReactNode {
    return (
      <>
        <p>Signed in as {this.props.authenticatedUser}.</p>
        <p>
          {'You do not have any Dispatch models associated with this account. '}
          <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
            Connect to a Dispatch model manually
          </LinkButton>
          {' by entering this app ID and key.'}
        </p>
        <p>
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onDispatchLinkClick}>
            Learn more about Dispatch models
          </LinkButton>
        </p>
        <p>
          {'You can link apps from a different Dispatch account to this Azure account by adding ' +
            'yourself as a collaborator. '}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISCollabDocsClick}>
            Learn more about collaborating
          </LinkButton>
        </p>
      </>
    );
  }

  private get qnaContent(): ReactNode {
    return (
      <>
        <p>
          {'QnA Maker is a service that creates a question-and-answer knowledge base from FAQs and product manuals.'}
        </p>
        <p>
          {`You have not signed up for a QnA Maker account under ${this.props.authenticatedUser}. `}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onQnADocsClick}>
            Get started with QnA Maker
          </LinkButton>
        </p>
        <p>
          {' Alternatively, you can '}
          <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
            connect to a knowledge base manually
          </LinkButton>
          {' if you know the ID and subscription key.'}
        </p>
      </>
    );
  }

  private get blobContent(): ReactNode {
    return (
      <>
        <p>
          {'Blob Storage is a service that allows you to store unstructured ' +
            "data and is commonly used to store a Bot's transcripts."}
        </p>
        <p>
          {`You have do not have a Blob container under ${this.props.authenticatedUser}. `}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onBlobStorageDocsClick}>
            Get started with Blob Storage
          </LinkButton>
        </p>
        <p>
          {' Alternatively, you can '}
          <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
            connect to a Blob container manually
          </LinkButton>
          {' if you know the ID, subscription key, container name and connection string.'}
        </p>
      </>
    );
  }

  private get cosmosDbContent(): ReactNode {
    return (
      <>
        <p>{"CosmosDB is a multi-model database service commonly used to store a bot's state."}</p>
        <p>
          {`You have do not have any CosmosDB collections under ${this.props.authenticatedUser}. `}
          <LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onCosmosdbDocsClick}>
            Get started with CosmosDB
          </LinkButton>
        </p>
        <p>
          {' Alternatively, you can '}
          <LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
            connect to a CosmosDB collection manually
          </LinkButton>
          {' if you know the ID, subscription key, collection and database name.'}
        </p>
      </>
    );
  }

  private createAnchorClickHandler = url => () => this.props.onAnchorClick(url);

  private onBlobStorageDocsClick = this.createAnchorClickHandler(
    'https://azure.microsoft.com/en-us/services/storage/blobs/'
  );

  private onCosmosdbDocsClick = this.createAnchorClickHandler('https://azure.microsoft.com/en-us/services/cosmos-db/');

  private onDispatchLinkClick = this.createAnchorClickHandler('https://aka.ms/bot-framework-emulator-create-dispatch');

  private onLUISDocsClick = this.createAnchorClickHandler('http://aka.ms/bot-framework-emulator-LUIS-docs-home');

  private onLUISCollabDocsClick = this.createAnchorClickHandler(
    'http://aka.ms/bot-framework-emulator-luis-collaboration'
  );

  private onLUISInfoClick = this.createAnchorClickHandler(
    'https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis'
  );

  private onQnADocsClick = this.createAnchorClickHandler('https://aka.ms/bot-framework-emulator-qna-docs-home');
}

1	//
2	// Copyright (c) Microsoft. All rights reserved.
3	// Licensed under the MIT license.
4	//
5	// Microsoft Bot Framework: http://botframework.com
6	//
7	// Bot Framework Emulator Github:
8	// https://github.com/Microsoft/BotFramwork-Emulator
9	//
10	// Copyright (c) Microsoft Corporation
11	// All rights reserved.
12	//
13	// MIT License:
14	// Permission is hereby granted, free of charge, to any person obtaining
15	// a copy of this software and associated documentation files (the
16	// "Software"), to deal in the Software without restriction, including
17	// without limitation the rights to use, copy, modify, merge, publish,
18	// distribute, sublicense, and/or sell copies of the Software, and to
19	// permit persons to whom the Software is furnished to do so, subject to
20	// the following conditions:
21	//
22	// The above copyright notice and this permission notice shall be
23	// included in all copies or substantial portions of the Software.
24	//
25	// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
26	// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
27	// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
28	// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
29	// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
30	// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
31	// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
32	//
33	import { DefaultButton, Dialog, DialogFooter, LinkButton, PrimaryButton } from '@bfemulator/ui-react';
34	import { ServiceTypes } from 'botframework-config/lib/schema';
35	import * as React from 'react';
36	import { Component, ReactNode } from 'react';
37
38	import { serviceTypeLabels } from '../../../utils/serviceTypeLables';
39	import * as styles from '../dialogStyles.scss';
40
41	export interface GetStartedWithCSDialogProps {
42	cancel: () => void;
43	confirm: () => void;
44	launchConnectedServiceEditor: () => void;
45	onAnchorClick: (url: string) => void;
46	authenticatedUser?: string;
47	serviceType?: ServiceTypes;
48	showNoModelsFoundContent?: boolean;
49	}
50
51	const titleMap = {	×
52	[ServiceTypes.Luis]: 'Create a LUIS app',
53	[ServiceTypes.Dispatch]: 'Connect to a Dispatch model',
54	[ServiceTypes.QnA]: 'Create a QnA Maker knowledge base',
55	[ServiceTypes.BlobStorage]: 'Create a Blob Storage Container',
56	[ServiceTypes.CosmosDB]: 'Connect to a Cosmos DB account',
57	};
58
59	const buttonTextMap = {	×
60	[ServiceTypes.Luis]: 'LUIS',
61	[ServiceTypes.Dispatch]: 'Dispatch',
62	[ServiceTypes.QnA]: 'QnA Maker',
63	[ServiceTypes.BlobStorage]: 'Blob Storage',
64	[ServiceTypes.CosmosDB]: 'Cosmos DB',
65	};
66
67	export class GetStartedWithCSDialog extends Component<GetStartedWithCSDialogProps, Record<string, unknown>> {
68	public render() {
69	return (	×
70	<Dialog className={styles.dialogMedium} cancel={this.props.cancel} title={titleMap[this.props.serviceType]}>
71	{this.content}
72	<DialogFooter>
73	<DefaultButton text="Cancel" onClick={this.props.cancel} />
74	<PrimaryButton text={`Go to ${buttonTextMap[this.props.serviceType]}`} onClick={this.props.confirm} />
75	</DialogFooter>
76	</Dialog>
77	);
78	}
79
80	private get content(): ReactNode {
81	const { serviceType } = this.props;	×
82
83	switch (serviceType) {	×
84	case ServiceTypes.Luis:
85	return this.luisContent;	×
86
87	case ServiceTypes.Dispatch:
88	return this.dispatchContent;	×
89
90	case ServiceTypes.QnA:
91	return this.qnaContent;	×
92
93	case ServiceTypes.BlobStorage:
94	return this.blobContent;	×
95
96	case ServiceTypes.CosmosDB:
97	return this.cosmosDbContent;	×
98
99	default:
100	return null;	×
101	}
102	}
103
104	private get luisContent(): ReactNode {
105	if (this.props.showNoModelsFoundContent) {	×
106	return this.luisNoModelsFoundContent;	×
107	}
108	return (	×
109	<>
110	<p>
111	{'Language Understanding Service (LUIS) is a matching learning-based service for adding language ' +
112	'understanding to bots, applications and IoT devices.'}
113	</p>
114	<p>
115	{`You have not signed up for a LUIS account under ${this.props.authenticatedUser} `}
116	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISDocsClick}>
117	Learn more about LUIS
118	</LinkButton>
119	</p>
120	<p>
121	{'Alternatively, you can '}
122	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
123	connect to a LUIS app manually
124	</LinkButton>
125	{' if you know the app ID, version, and authoring key.'}
126	</p>
127	</>
128	);
129	}
130
131	private get luisNoModelsFoundContent(): ReactNode {
132	const label = serviceTypeLabels[this.props.serviceType];	×
133	const connectModalManuallyText = `Connect to a ${label} model manually`;	×
134	const learnMoreAbtModelsText = `Learn more about ${label} models`;	×
135	return (	×
136	<>
137	<p>Signed in as {this.props.authenticatedUser}.</p>
138	<p>
139	{`You do not have any ${label} models associated with this account. `}
140	<LinkButton
141	ariaLabel={connectModalManuallyText}
142	className={styles.dialogLink}
143	onClick={this.props.launchConnectedServiceEditor}
144	>
145	{connectModalManuallyText}
146	</LinkButton>{' '}
147	by entering the app ID and key.
148	</p>
149	<p>
150	<LinkButton
151	ariaLabel={learnMoreAbtModelsText}
152	className={styles.dialogLink}
153	linkRole={true}
154	onClick={this.onLUISInfoClick}
155	>
156	{learnMoreAbtModelsText}
157	</LinkButton>
158	<br />
159	</p>
160	<p>
161	{`You can link apps from a different ${label} account to this Azure account by adding ` +
162	'yourself as a collaborator. '}
163	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISCollabDocsClick}>
164	Learn more about collaborating
165	</LinkButton>
166	</p>
167	</>
168	);
169	}
170
171	private get dispatchContent(): ReactNode {
172	if (this.props.showNoModelsFoundContent) {	×
173	return this.dispatchNoModelsFoundContent;	×
174	}
175
176	return (	×
177	<>
178	<p>
179	{'A Dispatch model is a LUIS model that enables your bot to dispatch intents across multiple LUIS ' +
180	'apps and QnAMaker knowledge bases. '}
181	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onDispatchLinkClick}>
182	Learn more about Dispatch models
183	</LinkButton>
184	</p>
185	<p>
186	{`You have not signed up for a LUIS account under ${this.props.authenticatedUser} `}
187	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISDocsClick}>
188	Learn more about LUIS
189	</LinkButton>
190	</p>
191	<br />
192	{'Alternatively, you can '}
193	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
194	connect to a Dispatch app manually
195	</LinkButton>
196	{' if you know the app ID, version, and authoring key.'}
197	</>
198	);
199	}
200
201	private get dispatchNoModelsFoundContent(): ReactNode {
202	return (	×
203	<>
204	<p>Signed in as {this.props.authenticatedUser}.</p>
205	<p>
206	{'You do not have any Dispatch models associated with this account. '}
207	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
208	Connect to a Dispatch model manually
209	</LinkButton>
210	{' by entering this app ID and key.'}
211	</p>
212	<p>
213	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onDispatchLinkClick}>
214	Learn more about Dispatch models
215	</LinkButton>
216	</p>
217	<p>
218	{'You can link apps from a different Dispatch account to this Azure account by adding ' +
219	'yourself as a collaborator. '}
220	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onLUISCollabDocsClick}>
221	Learn more about collaborating
222	</LinkButton>
223	</p>
224	</>
225	);
226	}
227
228	private get qnaContent(): ReactNode {
229	return (	×
230	<>
231	<p>
232	{'QnA Maker is a service that creates a question-and-answer knowledge base from FAQs and product manuals.'}
233	</p>
234	<p>
235	{`You have not signed up for a QnA Maker account under ${this.props.authenticatedUser}. `}
236	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onQnADocsClick}>
237	Get started with QnA Maker
238	</LinkButton>
239	</p>
240	<p>
241	{' Alternatively, you can '}
242	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
243	connect to a knowledge base manually
244	</LinkButton>
245	{' if you know the ID and subscription key.'}
246	</p>
247	</>
248	);
249	}
250
251	private get blobContent(): ReactNode {
252	return (	×
253	<>
254	<p>
255	{'Blob Storage is a service that allows you to store unstructured ' +
256	"data and is commonly used to store a Bot's transcripts."}
257	</p>
258	<p>
259	{`You have do not have a Blob container under ${this.props.authenticatedUser}. `}
260	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onBlobStorageDocsClick}>
261	Get started with Blob Storage
262	</LinkButton>
263	</p>
264	<p>
265	{' Alternatively, you can '}
266	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
267	connect to a Blob container manually
268	</LinkButton>
269	{' if you know the ID, subscription key, container name and connection string.'}
270	</p>
271	</>
272	);
273	}
274
275	private get cosmosDbContent(): ReactNode {
276	return (	×
277	<>
278	<p>{"CosmosDB is a multi-model database service commonly used to store a bot's state."}</p>
279	<p>
280	{`You have do not have any CosmosDB collections under ${this.props.authenticatedUser}. `}
281	<LinkButton className={styles.dialogLink} linkRole={true} onClick={this.onCosmosdbDocsClick}>
282	Get started with CosmosDB
283	</LinkButton>
284	</p>
285	<p>
286	{' Alternatively, you can '}
287	<LinkButton className={styles.dialogLink} onClick={this.props.launchConnectedServiceEditor}>
288	connect to a CosmosDB collection manually
289	</LinkButton>
290	{' if you know the ID, subscription key, collection and database name.'}
291	</p>
292	</>
293	);
294	}
295
296	private createAnchorClickHandler = url => () => this.props.onAnchorClick(url);	×
297
298	private onBlobStorageDocsClick = this.createAnchorClickHandler(	×
299	'https://azure.microsoft.com/en-us/services/storage/blobs/'
300	);
301
302	private onCosmosdbDocsClick = this.createAnchorClickHandler('https://azure.microsoft.com/en-us/services/cosmos-db/');	×
303
304	private onDispatchLinkClick = this.createAnchorClickHandler('https://aka.ms/bot-framework-emulator-create-dispatch');	×
305
306	private onLUISDocsClick = this.createAnchorClickHandler('http://aka.ms/bot-framework-emulator-LUIS-docs-home');	×
307
308	private onLUISCollabDocsClick = this.createAnchorClickHandler(	×
309	'http://aka.ms/bot-framework-emulator-luis-collaboration'
310	);
311
312	private onLUISInfoClick = this.createAnchorClickHandler(	×
313	'https://docs.microsoft.com/en-us/azure/cognitive-services/luis/what-is-luis'
314	);
315
316	private onQnADocsClick = this.createAnchorClickHandler('https://aka.ms/bot-framework-emulator-qna-docs-home');	×
317	}

Microsoft / BotFramework-Emulator / 389595

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous