Skip to content

Commit

Permalink
Fixed: remove/edit test console required headers (#1892)
Browse files Browse the repository at this point in the history
  • Loading branch information
@malincrist
malincrist authored Aug 8, 2022
1 parent 9d96c0a commit 1c61c99
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 40 deletions.
14 changes: 9 additions & 5 deletions src/components/operations/operation-details/ko/runtime/graphql-console.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h3 class="pt-0">Parameters
<div class="input-group has-validation">
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="name" spellcheck="false" aria-label="Parameter name"
data-bind="textInput: parameter.name">
data-bind="textInput: parameter.name, attr:{ 'readonly': parameter.required }">
<span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
</div>
</div>
Expand All @@ -69,12 +69,12 @@ <h3 class="pt-0">Parameters
<!-- ko if: !parameter.secret-->
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="value" spellcheck="false" aria-label="Parameter value"
data-bind="textInput: parameter.value">
data-bind="textInput: parameter.value, attr:{ 'aria-required': parameter.required }">
<!-- /ko -->
<!-- ko if: parameter.secret-->
<input autocomplete="off" class="form-control form-control-sm" placeholder="value"
spellcheck="false" aria-label="Parameter value"
data-bind=" attr: {type: parameter.inputType}, textInput: parameter.value">
data-bind=" attr: {type: parameter.inputType, 'aria-required': parameter.required }, textInput: parameter.value">
<button data-bind="click: () => $component.toggleSecretParameter(parameter)"
class="input-group-addon">
<i
Expand All @@ -85,11 +85,13 @@ <h3 class="pt-0">Parameters
</div>
</div>
</div>
<!-- ko ifnot: parameter.required -->
<div class="col-1">
<a href="#" role="button" data-bind="click: $component.removeQueryParameter"
class="btn-centered-vert btn-inline" aria-label="Remove parameter"><i
class="icon-emb icon-emb-trash"></i></a>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
Expand Down Expand Up @@ -119,7 +121,7 @@ <h3 class="pt-0">Headers
<div class="input-group has-validation">
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="name" spellcheck="false" aria-label="Header name"
data-bind="textInput: header.name">
data-bind="textInput: header.name, attr: { 'readonly': header.required }">
<span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
</div>
</div>
Expand All @@ -134,18 +136,20 @@ <h3 class="pt-0">Headers
<div class="form-group">
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="value" spellcheck="false" aria-label="Header value"
data-bind="textInput: header.value">
data-bind="textInput: header.value, attr: { 'aria-required': header.required }">
<span class="invalid-feedback" data-bind="validationMessage: header.value"></span>
</div>
<!-- /ko -->
</div>
</div>

<!-- ko ifnot: header.required -->
<div class="col-1">
<a href="#" role="button" data-bind="click: $component.removeHeader"
class="btn-centered-vert btn-inline" aria-label="Remove header"><i
class="icon-emb icon-emb-trash"></i></a>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
Expand Down
36 changes: 23 additions & 13 deletions src/components/operations/operation-details/ko/runtime/operation-console.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
<nav aria-label="breadcrumb" style="margin-right: 20px">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" data-bind="text: api.displayName, attr: { href: $component.getApiReferenceUrl() }"></a>
<a href="#"
data-bind="text: api.displayName, attr: { href: $component.getApiReferenceUrl() }"></a>
</li>
<!-- ko if: api.apiVersion -->
<li class="breadcrumb-item">
Expand Down Expand Up @@ -129,7 +130,7 @@ <h3>Parameters
<div class="input-group has-validation">
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="name" spellcheck="false" aria-label="Parameter name"
data-bind="textInput: parameter.name">
data-bind="textInput: parameter.name, attr:{ 'readonly': parameter.required }">
<span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
</div>
</div>
Expand All @@ -145,12 +146,13 @@ <h3>Parameters
<!-- ko if: !parameter.secret-->
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="value" spellcheck="false" aria-label="Parameter value"
data-bind="textInput: parameter.value">
data-bind="textInput: parameter.value, attr:{ 'aria-required': parameter.required }">
<span class="invalid-feedback" data-bind="validationMessage: parameter.value"></span>
<!-- /ko -->
<!-- ko if: parameter.secret-->
<input autocomplete="off" class="form-control form-control-sm" placeholder="value"
spellcheck="false" aria-label="Parameter value"
data-bind=" attr: {type: parameter.inputType}, textInput: parameter.value">
data-bind=" attr: {type: parameter.inputType, 'aria-required': parameter.required }, textInput: parameter.value">
<button data-bind="click: () => $component.toggleSecretParameter(parameter)"
class="input-group-addon">
<i
Expand All @@ -161,11 +163,13 @@ <h3>Parameters
</div>
</div>
</div>
<!-- ko ifnot: parameter.required -->
<div class="col-1">
<a href="#" role="button" data-bind="click: $component.removeQueryParameter"
class="btn-centered-vert btn-inline" aria-label="Remove parameter"><i
class="icon-emb icon-emb-trash"></i></a>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
Expand All @@ -177,7 +181,8 @@ <h3>Parameters
<!-- /ko -->

<h3>Headers
<button aria-label="Collapse parameters" class="no-border" data-bind="activate: $component.collapseHeaders">
<button aria-label="Collapse parameters" class="no-border"
data-bind="activate: $component.collapseHeaders">
<!-- ko if: $component.collapsedHeaders -->
<i class="icon-emb icon-emb-chevron-down"></i>
<!-- /ko -->
Expand All @@ -201,7 +206,7 @@ <h3>Headers
<div class="input-group has-validation">
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="name" spellcheck="false" aria-label="Header name"
data-bind="textInput: header.name">
data-bind="textInput: header.name, attr:{ 'readonly': header.required }">
<span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
</div>
</div>
Expand All @@ -217,12 +222,12 @@ <h3>Headers
<!-- ko if: !header.secret -->
<input type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="value" spellcheck="false" aria-label="Header value"
data-bind="textInput: header.value">
data-bind="textInput: header.value, attr:{'aria-required': header.required}">
<!-- /ko -->
<!-- ko if: header.secret -->
<input autocomplete="off" class="form-control form-control-sm" placeholder="value"
spellcheck="false" aria-label="Header value"
data-bind="attr: {type: header.inputTypeValue}, textInput: header.value">
data-bind="attr: {type: header.inputTypeValue, 'aria-required': header.required}, textInput: header.value">
<button data-bind="click: () => $component.toggleSecretHeader(header)"
class="input-group-addon">
<i
Expand All @@ -234,11 +239,13 @@ <h3>Headers
<!-- /ko -->
</div>
</div>
<!-- ko ifnot: header.required -->
<div class="col-1">
<a href="#" role="button" data-bind="click: $component.removeHeader"
class="btn-centered-vert btn-inline" aria-label="Remove header"><i
class="icon-emb icon-emb-trash"></i></a>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
Expand All @@ -252,7 +259,8 @@ <h3>Headers
<!-- ko if: canHaveBody -->

<h3>Body
<button aria-label="Collapse parameters" class="no-border" data-bind="activate: $component.collapseBody">
<button aria-label="Collapse parameters" class="no-border"
data-bind="activate: $component.collapseBody">
<!-- ko if: $component.collapsedBody -->
<i class="icon-emb icon-emb-chevron-down"></i>
<!-- /ko -->
Expand Down Expand Up @@ -288,7 +296,8 @@ <h3>Body
<label class="form-check-label" for="bodyFormatRaw">Raw</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatBinary" value="binary"
<input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatBinary"
value="binary"
data-bind="checked: request.bodyFormat, attr: { disabled: request.readonlyBodyFormat}">
<label class="form-check-label" for="bodyFormatBinary">Binary</label>
</div>
Expand Down Expand Up @@ -329,8 +338,8 @@ <h3>Body
data-bind="textInput: request.body"></textarea>
<!-- /ko -->
<!-- ko if: request.bodyFormat() === 'binary' -->
<file-input params="{ onSelect: $component.onFileSelect }" class="form-control" aria-label="Request body"
data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
<file-input params="{ onSelect: $component.onFileSelect }" class="form-control"
aria-label="Request body" data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
<span class="invalid-feedback" data-bind="validationMessage: request.binary"></span>
<!-- /ko -->
</div>
Expand Down Expand Up @@ -459,7 +468,8 @@ <h3>WebSocket request
</div>

<!-- ko if: $component.codeSample -->
<pre data-bind="syntaxHighlight: { code: $component.codeSample, language: $component.selectedLanguage }"></pre>
<pre
data-bind="syntaxHighlight: { code: $component.codeSample, language: $component.selectedLanguage }"></pre>
<!-- /ko -->
<!-- ko if: wsConnected -->
<h3>Payload</h3>
Expand Down
18 changes: 9 additions & 9 deletions src/models/console/consoleHeader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ export class ConsoleHeader {
}

constructor(contract?: Parameter) {
this.name = ko.observable();
this.value = ko.observable();
this.name = ko.observable(null);
this.value = ko.observable(null);
this.revealed = ko.observable(false);
this.inputTypeValue = ko.observable("text");
this.options = [];
Expand All @@ -42,23 +42,23 @@ export class ConsoleHeader {
});

this.name.extend(<any>{ required: { message: `Name is required.` } });

if (this.required) {
this.value.extend(<any>{ required: { message: `Value is required.` } });
}

if (!contract) {
return;
}

this.required = contract.required;
this.custom = false;
this.name(contract.name);
this.value(contract.defaultValue);
this.required = contract.required;
this.options = contract.values;
this.description = contract.description ? contract.description : "";
this.type = contract.type;
this.secret = false;
this.inputTypeValue(this.secret && !this.revealed() ? "password" : "text");

if (this.required) {
this.value.extend(<any>{ required: { message: `Value is required.` } });
}

this.value(contract.defaultValue);
}
}
28 changes: 15 additions & 13 deletions src/models/console/consoleParameter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export class ConsoleParameter {
}

constructor(contract?: Parameter) {
this.name = ko.observable();
this.value = ko.observable();
this.name = ko.observable(null);
this.value = ko.observable(null);
this.inputType = ko.observable("text");
this.required = false;
this.options = [];
Expand All @@ -31,23 +31,25 @@ export class ConsoleParameter {
this.error = ko.observable();
this.revealed = ko.observable(false);

if (contract) {
this.custom = false;
this.name(contract.name);
this.value(contract.defaultValue);
this.required = contract.required;
this.options = contract.values;
this.type = contract.type;
this.secret = false;
this.inputType(this.secret ? "password" : "text");
this.name.extend(<any>{ required: { message: `Name is required.` } });

if (!contract) {
return;
}

this.custom = false;
this.name(contract.name);
this.required = contract.required;
this.options = contract.values;
this.type = contract.type;
this.secret = false;
this.inputType(this.secret ? "password" : "text");
this.canRename = !this.required && this.custom;

this.name.extend(<any>{ required: { message: `Name is required.` } });

if (this.required) {
this.value.extend(<any>{ required: { message: `Value is required.` } });
}

this.value(contract.defaultValue);
}
}

0 comments on commit 1c61c99

Please sign in to comment.