feat: Multiple Examples for OpenAPI 3 Parameters, Request Bodies, and Responses (via #5427)
* add opt-in Prettier config * remove legacy `examples` implementation * create ExamplesSelect * support `Response.examples` in OpenAPI 3 * create response controls group * prettier reformat * prepare to break up Parameters * reunify Parameters and OAS3 Parameters * Parameter Examples * Example component * handle parameter value stringification correctly * FOR REVIEW: add prop for controlling Select * use regular header for param examples in Try-It-Out * manage active examples member via Redux * Request Body Try-It-Out examples * remove special Response description styling * omit Example value display in Try-It-Out * support disabled text inputs in JsonSchemaForm * Example.omitValue => Example.showValue * ExamplesSelectValueRetainer * styling for disabled inputs * remove console.log * support "Modified Values" in ExamplesSelect * remove Examples component (wasn't used anywhere) * use ParameterRow.getParamKey for active examples member keying * split-rendering of examples in ParameterRow * send disabled prop to JsonSchemaForm * use content type to key request body active examples members * remove debugger * rewire RequestBodyEditor to be a controlled component REVIEW: does this have perf implications? * trigger synthetic onSelect events in ExamplesSelect * prettier updates * remove outdated Examples usage in RequestBody * don't handle examples changes in ESVR * make RequestBodyEditor semi-controlled * don't default to an empty Map for request bodies * add namespaceKey to ESVR for state mgmt * don't key RequestBody activeExampleKeys on media type * tweak ESVR isModifiedValueSelected calculation * add trace class to ExamplesSelect * remove usage of ESVR.currentNamespace * reset to first example if currentExampleKey is invalid * add default values to RequestBody rendering * stringify things in ESVR * avoid null select value (silences React warning) * detect user inputs that match any examples member's value * add trace class for json-schema-array * shallowly convert namespace state, to preserve Immutable stucts in state * stringify RBE values; don't trim JSON in editor * match user input to an example when non-primitives are expressed in state as strings * update Cypress * don't apply sample values in JsonSchema_Object * support disabling all JsonSchemaForm subcomponents * Core tests * style changes to accomodate Examples * fix version-checking error in Response * disable SCU for Responses * don't stringify Select values * ModelExample: default to Model tab if no example is available; provide a default no example message * don't trim JSON ParamBody inputs * read directly from 2.0 Response.schema instead of inferring a value * show current Example information in RequestBody * show label for Examples dropdown by default * rework Response content ordering * style disabled textareas like other read-only blocks * meta: fix sourcemaps * refactor ESVR setNameForNamespace * protect second half of ternary expession * cypress: `select.examples-select` => `.examples-select > select` * clarify ModelExample.componentWillReceiveProps * add gates/defaults to prevent issues in very bare-boned documents * fix test block organization problem * simplify RequestBodyEditor interface * linter fixes * prettier updates * use plugin system for new components * move ME Cypress helpers to other file
This commit is contained in:
kyle
@@ -70,6 +70,27 @@ textarea
|
||||
{
|
||||
@include invalidFormElement();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
&[disabled] {
|
||||
// opacity: 0.85;
|
||||
background-color: #fafafa;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
select[disabled] {
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
textarea[disabled] {
|
||||
background-color: #41444e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes shake
|
||||
|
||||
@@ -98,6 +98,51 @@
|
||||
@include text_code();
|
||||
}
|
||||
|
||||
.parameter-controls {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.examples {
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
&__section {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
&__section-header {
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
margin-bottom: .5rem;
|
||||
// color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.examples-select {
|
||||
margin-bottom: .75em;
|
||||
|
||||
&__section-label {
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.example {
|
||||
&__section {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
&__section-header {
|
||||
font-weight: bold;
|
||||
font-size: .9rem;
|
||||
margin-bottom: .5rem;
|
||||
// color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.view-line-link
|
||||
{
|
||||
position: relative;
|
||||
@@ -374,12 +419,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.model-example {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.tab
|
||||
{
|
||||
display: flex;
|
||||
|
||||
margin: 20px 0 10px 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
@@ -538,46 +585,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.response-col_description__inner
|
||||
{
|
||||
div.markdown, div.renderedMarkdown
|
||||
{
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 4px;
|
||||
background: $response-col-description-inner-markdown-background-color;
|
||||
|
||||
@include text_code($response-col-description-inner-markdown-font-color);
|
||||
|
||||
p
|
||||
{
|
||||
margin: 0;
|
||||
@include text_code($response-col-description-inner-markdown-font-color);
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
@include text_code($response-col-description-inner-markdown-link-font-color);
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: $response-col-description-inner-markdown-link-font-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
th
|
||||
{
|
||||
@include text_code($response-col-description-inner-markdown-font-color);
|
||||
border-bottom: 1px solid $response-col-description-inner-markdown-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opblock-body
|
||||
{
|
||||
.opblock-loading-animation
|
||||
@@ -744,19 +751,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
.response-content-type {
|
||||
padding-top: 1em;
|
||||
.response-controls {
|
||||
padding-top: 1em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.controls-accept-header {
|
||||
select {
|
||||
border-color: $response-content-type-controls-accept-header-select-border-color;
|
||||
.response-control-media-type {
|
||||
margin-right: 1em;
|
||||
|
||||
&--accept-controller {
|
||||
select {
|
||||
border-color: $response-content-type-controls-accept-header-select-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
color: $response-content-type-controls-accept-header-small-font-color;
|
||||
font-size: .7em;
|
||||
&__accept-message {
|
||||
color: $response-content-type-controls-accept-header-small-font-color;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
.response-control-examples {
|
||||
&__title {
|
||||
display: block;
|
||||
margin-bottom: 0.2em;
|
||||
font-size: .7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinker
|
||||
|
||||
@@ -84,6 +84,8 @@ table
|
||||
|
||||
.parameters-col_description
|
||||
{
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
margin-bottom: 2em;
|
||||
input[type=text]
|
||||
{
|
||||
width: 100%;
|
||||
@@ -100,6 +102,10 @@ table
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
// hack to give breathing room to the name column
|
||||
// TODO: refactor all of this to flexbox
|
||||
margin-right: .75em;
|
||||
|
||||
@include text_headline();
|
||||
|
||||
&.required
|
||||
@@ -158,3 +164,12 @@ table
|
||||
{
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.response-col_description {
|
||||
width: 99%; // forces other columns to shrink to their content widths
|
||||
}
|
||||
|
||||
.response-col_links {
|
||||
min-width: 6em;
|
||||
}
|
||||
|
||||
@@ -127,12 +127,6 @@ $response-col-status-undocumented-font-color: $gray-300 !default;
|
||||
|
||||
$response-col-links-font-color: $gray-300 !default;
|
||||
|
||||
$response-col-description-inner-markdown-font-color: $white !default;
|
||||
$response-col-description-inner-markdown-background-color: $gray-custom-1 !default;
|
||||
|
||||
$response-col-description-inner-markdown-link-font-color: $color-primary !default;
|
||||
$response-col-description-inner-markdown-link-font-color-hover: $color-primary-hover !default;
|
||||
|
||||
$opblock-body-background-color: $gray-custom-1 !default;
|
||||
$opblock-body-font-color: $white !default;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user