Skip to content

Commit 145637d

Browse files
malincristmalincrist
committed
Merge branch 'master' into malincrist/feature/api-wiki
2 parents 3259efc + 31cf369 commit 145637d

File tree

7 files changed

+90
-51
lines changed

7 files changed

+90
-51
lines changed

‎src/components/operations/operation-details/ko/runtime/authorization.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ <h3 class="pt-0">
1111
<div class="row flex flex-row">
1212
<div class="col-4">
1313
<label for="authServer" class="text-monospace form-label"
14-
data-bind="text: $component.authorizationServer().displayName"></label>
14+
data-bind="text: $component.authorizationServer().displayName"></label>
1515
</div>
1616
<div class="col-7">
1717
<div class="form-group">
1818
<select id="authServer" class="form-control"
19-
data-bind="options: $component.authorizationServer().grantTypes, value: $component.selectedGrantType, optionsCaption: 'No auth'">
19+
data-bind="options: $component.authorizationServer().grantTypes, value: $component.selectedGrantType, optionsCaption: 'No auth'">
2020
</select>
2121
</div>
2222
</div>
@@ -49,7 +49,7 @@ <h3 class="pt-0">
4949
<div class="col-7">
5050
<div class="form-group">
5151
<button class="button button-primary"
52-
data-bind="click: $component.authenticateOAuthWithPassword">Authorize</button>
52+
data-bind="click: $component.authenticateOAuthWithPassword">Authorize</button>
5353
</div>
5454
</div>
5555
</div>
@@ -79,8 +79,15 @@ <h3 class="pt-0">
7979
</select>
8080
<!-- /ko -->
8181
<!-- ko if: !$component.products() || $component.products().length === 0 -->
82-
<input id="subscriptionKey" type="text" class="form-control" placeholder="subscription key"
83-
data-bind="textInput: $component.selectedSubscriptionKey" />
82+
<div class="input-group">
83+
<input id="subscriptionKey" class="form-control" placeholder="subscription key"
84+
data-bind="textInput: $component.selectedSubscriptionKey, attr: { type: subscriptionKeyRevealed() ? 'text' : 'password' }"
85+
aria-required="true" />
86+
<button data-bind="click: toggleSubscriptionKey" class="input-group-addon">
87+
<i
88+
data-bind="class: subscriptionKeyRevealed() ? 'icon-emb icon-emb-eye-fill' :'icon-emb icon-emb-eye'"></i>
89+
</button>
90+
</div>
8491
<!-- /ko -->
8592
</div>
8693
</div>

‎src/components/operations/operation-details/ko/runtime/authorization.ts‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export class Authorization {
3535
public readonly authorizationError: ko.Observable<string>;
3636
public readonly products: ko.Observable<Product[]>;
3737
public readonly selectedSubscriptionKey: ko.Observable<string>;
38+
public readonly subscriptionKeyRevealed: ko.Observable<boolean>;
3839
private deleteAuthorizationHeader: boolean = false;
3940

4041
constructor(
@@ -58,6 +59,7 @@ export class Authorization {
5859
this.authorizationError = ko.observable();
5960
this.products = ko.observable();
6061
this.selectedSubscriptionKey = ko.observable();
62+
this.subscriptionKeyRevealed = ko.observable(false);
6163
}
6264

6365
@Param()
@@ -89,6 +91,18 @@ export class Authorization {
8991
if (this.api().subscriptionRequired) {
9092
await this.loadSubscriptionKeys();
9193
}
94+
95+
if (this.subscriptionKeyRequired()) {
96+
if (this.api().type === TypeOfApi.webSocket || this.isGraphQL()) {
97+
this.setSubscriptionKeyParameter();
98+
} else {
99+
this.setSubscriptionKeyHeader();
100+
}
101+
}
102+
}
103+
104+
public toggleSubscriptionKey(): void {
105+
this.subscriptionKeyRevealed(!this.subscriptionKeyRevealed());
92106
}
93107

94108
private isGraphQL(): boolean {
@@ -184,13 +198,8 @@ export class Authorization {
184198
return this.findHeader(KnownHttpHeaders.Authorization);
185199
}
186200

187-
private setSubscriptionKeyHeader(subscriptionKey: string): void {
201+
private setSubscriptionKeyHeader(subscriptionKey?: string): void {
188202
this.removeSubscriptionKeyHeader();
189-
190-
if (!subscriptionKey) {
191-
return;
192-
}
193-
194203
const subscriptionKeyHeaderName = this.getSubscriptionKeyHeaderName();
195204

196205
const keyHeader = new ConsoleHeader();
@@ -401,24 +410,20 @@ export class Authorization {
401410
}
402411
}
403412

404-
private setSubscriptionKeyParameter(subscriptionKey: string): void {
413+
private setSubscriptionKeyParameter(subscriptionKey?: string): void {
405414
const subscriptionKeyParam = this.getSubscriptionKeyParam();
406415
this.removeQueryParameter(subscriptionKeyParam);
407-
408-
if (!subscriptionKey) {
409-
return;
410-
}
411-
412416
const subscriptionKeyParamName = this.getSubscriptionKeyParamName();
413417

414418
const keyParameter = new ConsoleParameter();
415419
keyParameter.name(subscriptionKeyParamName);
416-
keyParameter.value(subscriptionKey);
417420
keyParameter.secret = true;
418421
keyParameter.type = "string";
419422
keyParameter.canRename = false;
420423
keyParameter.required = true;
421424
keyParameter.inputType("password");
425+
keyParameter.value.extend(<any>{ required: { message: `Value is required.` } });
426+
keyParameter.value(subscriptionKey);
422427

423428
if (this.isGraphQL()) {
424429
this.queryParameters.push(keyParameter);

‎src/components/operations/operation-details/ko/runtime/graphql-console.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ <h3 class="pt-0">
5050
<input type="text" autocomplete="off" class="form-control form-control-sm"
5151
placeholder="name" spellcheck="false" aria-label="Parameter name"
5252
data-bind="textInput: parameter.name, attr:{ 'readonly': parameter.required }">
53-
<span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
53+
<span class="invalid-feedback"
54+
data-bind="validationMessage: parameter.name"></span>
5455
</div>
5556
</div>
5657
</div>
@@ -68,15 +69,17 @@ <h3 class="pt-0">
6869
data-bind="textInput: parameter.value, attr:{ 'aria-required': parameter.required }">
6970
<!-- /ko -->
7071
<!-- ko if: parameter.secret-->
71-
<input autocomplete="off" class="form-control form-control-sm" placeholder="value"
72-
spellcheck="false" aria-label="Parameter value"
72+
<input autocomplete="off" class="form-control form-control-sm"
73+
placeholder="value" spellcheck="false" aria-label="Parameter value"
7374
data-bind=" attr: {type: parameter.inputType, 'aria-required': parameter.required }, textInput: parameter.value">
7475
<button data-bind="click: () => $component.toggleSecretParameter(parameter)"
7576
class="input-group-addon">
7677
<i
7778
data-bind="class: parameter.revealed() ? 'icon-emb icon-emb-eye-fill' :'icon-emb icon-emb-eye'"></i>
7879
</button>
7980
<!-- /ko -->
81+
<span class="invalid-feedback"
82+
data-bind="validationMessage: parameter.value"></span>
8083
<!-- /ko -->
8184
</div>
8285
</div>
@@ -115,7 +118,8 @@ <h3 class="pt-0">
115118
<input type="text" autocomplete="off" class="form-control form-control-sm"
116119
placeholder="name" spellcheck="false" aria-label="Header name"
117120
data-bind="textInput: header.name, attr: { 'readonly': header.required }">
118-
<span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
121+
<span class="invalid-feedback"
122+
data-bind="validationMessage: header.name"></span>
119123
</div>
120124
</div>
121125
</div>
@@ -130,7 +134,8 @@ <h3 class="pt-0">
130134
<input type="text" autocomplete="off" class="form-control form-control-sm"
131135
placeholder="value" spellcheck="false" aria-label="Header value"
132136
data-bind="textInput: header.value, attr: { 'aria-required': header.required }">
133-
<span class="invalid-feedback" data-bind="validationMessage: header.value"></span>
137+
<span class="invalid-feedback"
138+
data-bind="validationMessage: header.value"></span>
134139
</div>
135140
<!-- /ko -->
136141
</div>
@@ -199,11 +204,11 @@ <h4 class="mt-30">
199204
<div class="flex flex-column align-items-end">
200205

201206
<!-- ko if: hasErrorEditors() -->
202-
<div class="panel panel-dark animation-fade-in gql-editor-errors"
207+
<div class="alert alert-danger animation-fade-in gql-editor-errors"
203208
data-bind="scrollintoview: {}">
204209
<p>Unable to send the request</p>
205210
<!-- ko foreach: { data: editorErrors, as: 'error' } -->
206-
<p class="text-muted mb-unset" data-bind="html: error"></p>
211+
<p data-bind="html: error"></p>
207212
<!-- /ko -->
208213
</div>
209214
<!-- /ko -->

‎src/components/operations/operation-details/ko/runtime/graphql-console.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ export class GraphqlConsole {
111111
this.wsProcessing = ko.observable(false);
112112
this.displayWsConsole = ko.observable(false);
113113
this.wsLogItems = ko.observableArray([]);
114+
115+
validation.registerExtenders();
116+
117+
validation.init({
118+
insertMessages: false,
119+
errorElementClass: "is-invalid",
120+
decorateInputElement: true
121+
});
114122
}
115123

116124
@Param()
@@ -286,12 +294,14 @@ export class GraphqlConsole {
286294

287295
public async validateAndSendRequest(): Promise<void> {
288296
const headers = this.headers();
289-
const parameters = [].concat(headers);
297+
const queryParameters = this.queryParameters();
298+
const parameters = [].concat(headers, queryParameters);
290299
const validationGroup = validation.group(parameters.map(x => x.value), { live: true });
291300
const clientErrors = validationGroup();
292301

293302
if (clientErrors.length > 0) {
294303
validationGroup.showAllMessages();
304+
this.editorErrors.push("Required fields are missing or incomplete. Please review the request and ensure all required information is provided. Look for highlighted areas with error indicators.");
295305
return;
296306
}
297307

0 commit comments

Comments
 (0)