fix(ui): avoid empty div when there are no externalDocs (#7997)

* fix(ui): avoid empty div when there are no externalDocs

* test(ui): existence of externalDocs div when present/absent from spec
This commit is contained in:
Maciej Matyjas
2022-05-12 23:45:14 +01:00
committed by GitHub
parent 2e471949f2
commit abeb168696
3 changed files with 72 additions and 29 deletions

View File

@@ -59,7 +59,7 @@ export default class OperationTag extends React.Component {
let rawTagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
let tagExternalDocsUrl
if (isFunc(oas3Selectors) && isFunc(oas3Selectors.selectedServer)) {
tagExternalDocsUrl = safeBuildUrl( rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() } )
tagExternalDocsUrl = safeBuildUrl(rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() })
} else {
tagExternalDocsUrl = rawTagExternalDocsUrl
}
@@ -72,48 +72,49 @@ export default class OperationTag extends React.Component {
<h3
onClick={() => layoutActions.show(isShownKey, !showTag)}
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
data-tag={tag}
data-is-open={showTag}
>
>
<DeepLink
enabled={isDeepLinkingEnabled}
isShown={showTag}
path={createDeepLinkPath(tag)}
text={tag} />
{ !tagDescription ? <small></small> :
{!tagDescription ? <small></small> :
<small>
<Markdown source={tagDescription} />
</small>
}
<Markdown source={tagDescription} />
</small>
}
<div>
{ !tagExternalDocsDescription ? null :
<small>
{ tagExternalDocsDescription }
{ tagExternalDocsUrl ? ": " : null }
{ tagExternalDocsUrl ?
<Link
href={sanitizeUrl(tagExternalDocsUrl)}
onClick={(e) => e.stopPropagation()}
target="_blank"
>{tagExternalDocsUrl}</Link> : null
}
</small>
{!tagExternalDocsDescription ? null :
<div className="info__externaldocs">
<small>
{tagExternalDocsDescription}
{tagExternalDocsUrl ? ": " : null}
{tagExternalDocsUrl ?
<Link
href={sanitizeUrl(tagExternalDocsUrl)}
onClick={(e) => e.stopPropagation()}
target="_blank"
>{tagExternalDocsUrl}</Link> : null
}
</small>
</div>
}
<button
aria-expanded={showTag}
className="expand-operation"
title={showTag ? "Collapse operation": "Expand operation"}
onClick={() => layoutActions.show(isShownKey, !showTag)}>
<svg className="arrow" width="20" height="20" aria-hidden="true" focusable="false">
<use href={showTag ? "#large-arrow-up" : "#large-arrow-down"} xlinkHref={showTag ? "#large-arrow-up" : "#large-arrow-down"} />
</svg>
</button>
<button
aria-expanded={showTag}
className="expand-operation"
title={showTag ? "Collapse operation" : "Expand operation"}
onClick={() => layoutActions.show(isShownKey, !showTag)}>
<svg className="arrow" width="20" height="20" aria-hidden="true" focusable="false">
<use href={showTag ? "#large-arrow-up" : "#large-arrow-down"} xlinkHref={showTag ? "#large-arrow-up" : "#large-arrow-down"} />
</svg>
</button>
</h3>
<Collapse isOpened={showTag}>

View File

@@ -0,0 +1,28 @@
openapi: 3.0.2
info:
title: "This is an example highlighting a display issue related to `tags` and `description` entries therein. It contains tag descriptions with & without externalDocs."
version: 1.0.0
tags:
- name: "foo"
description: "Foo: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex\
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
externalDocs:
description: "Find out more"
url: "http://swagger.io"
- name: "bar"
description: "Bar: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex \
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
- name: "baz"
description: "Baz: has less description text"
externalDocs:
description: "Find out more about our store"
url: "http://swagger.io"
paths:
/foobar:
get:
tags:
- "foo"
- "bar"
responses:
'200':
description: OK

View File

@@ -0,0 +1,14 @@
describe("#7996: tag description text fills container when externalDocs section absent", () => {
it("should show externalDocs div when externalDocs present in specification", () => {
cy
.visit("?url=/documents/bugs/7996-tags-externalDocs.yaml")
.get("#operations-tag-foo .info__externaldocs")
.should("exist")
})
it("should have no externalDocs div when externalDocs absent from specification", () => {
cy
.visit("?url=/documents/bugs/7996-tags-externalDocs.yaml")
.get("#operations-tag-bar .info__externaldocs")
.should("not.exist")
})
})