Skip to content

Commit abeb168

Browse files
author
Maciej Matyjas
authored
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
1 parent 2e47194 commit abeb168

3 files changed

Lines changed: 73 additions & 30 deletions

File tree

‎src/core/components/operation-tag.jsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default class OperationTag extends React.Component {
5959
let rawTagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])
6060
let tagExternalDocsUrl
6161
if (isFunc(oas3Selectors) && isFunc(oas3Selectors.selectedServer)) {
62-
tagExternalDocsUrl = safeBuildUrl( rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() } )
62+
tagExternalDocsUrl = safeBuildUrl(rawTagExternalDocsUrl, specUrl, { selectedServer: oas3Selectors.selectedServer() })
6363
} else {
6464
tagExternalDocsUrl = rawTagExternalDocsUrl
6565
}
@@ -72,48 +72,49 @@ export default class OperationTag extends React.Component {
7272

7373
<h3
7474
onClick={() => layoutActions.show(isShownKey, !showTag)}
75-
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
75+
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag"}
7676
id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
7777
data-tag={tag}
7878
data-is-open={showTag}
79-
>
79+
>
8080
<DeepLink
8181
enabled={isDeepLinkingEnabled}
8282
isShown={showTag}
8383
path={createDeepLinkPath(tag)}
8484
text={tag} />
85-
{ !tagDescription ? <small></small> :
85+
{!tagDescription ? <small></small> :
8686
<small>
87-
<Markdown source={tagDescription} />
88-
</small>
89-
}
90-
91-
<div>
92-
{ !tagExternalDocsDescription ? null :
93-
<small>
94-
{ tagExternalDocsDescription }
95-
{ tagExternalDocsUrl ? ": " : null }
96-
{ tagExternalDocsUrl ?
97-
<Link
98-
href={sanitizeUrl(tagExternalDocsUrl)}
99-
onClick={(e) => e.stopPropagation()}
100-
target="_blank"
101-
>{tagExternalDocsUrl}</Link> : null
102-
}
103-
</small>
87+
<Markdown source={tagDescription} />
88+
</small>
89+
}
90+
91+
{!tagExternalDocsDescription ? null :
92+
<div className="info__externaldocs">
93+
<small>
94+
{tagExternalDocsDescription}
95+
{tagExternalDocsUrl ? ": " : null}
96+
{tagExternalDocsUrl ?
97+
<Link
98+
href={sanitizeUrl(tagExternalDocsUrl)}
99+
onClick={(e) => e.stopPropagation()}
100+
target="_blank"
101+
>{tagExternalDocsUrl}</Link> : null
104102
}
103+
</small>
105104
</div>
105+
}
106+
106107

107-
<button
108-
aria-expanded={showTag}
109-
className="expand-operation"
110-
title={showTag ? "Collapse operation": "Expand operation"}
111-
onClick={() => layoutActions.show(isShownKey, !showTag)}>
108+
<button
109+
aria-expanded={showTag}
110+
className="expand-operation"
111+
title={showTag ? "Collapse operation" : "Expand operation"}
112+
onClick={() => layoutActions.show(isShownKey, !showTag)}>
112113

113-
<svg className="arrow" width="20" height="20" aria-hidden="true" focusable="false">
114-
<use href={showTag ? "#large-arrow-up" : "#large-arrow-down"} xlinkHref={showTag ? "#large-arrow-up" : "#large-arrow-down"} />
115-
</svg>
116-
</button>
114+
<svg className="arrow" width="20" height="20" aria-hidden="true" focusable="false">
115+
<use href={showTag ? "#large-arrow-up" : "#large-arrow-down"} xlinkHref={showTag ? "#large-arrow-up" : "#large-arrow-down"} />
116+
</svg>
117+
</button>
117118
</h3>
118119

119120
<Collapse isOpened={showTag}>

‎test/e2e-cypress/static/documents/bugs/7996-tags-externalDocs.yaml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
openapi: 3.0.2
2+
info:
3+
title: "This is an example highlighting a display issue related to `tags` and `description` entries therein. It contains tag descriptions with & without externalDocs."
4+
version: 1.0.0
5+
tags:
6+
- name: "foo"
7+
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\
8+
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."
9+
externalDocs:
10+
description: "Find out more"
11+
url: "http://swagger.io"
12+
- name: "bar"
13+
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 \
14+
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."
15+
- name: "baz"
16+
description: "Baz: has less description text"
17+
externalDocs:
18+
description: "Find out more about our store"
19+
url: "http://swagger.io"
20+
paths:
21+
/foobar:
22+
get:
23+
tags:
24+
- "foo"
25+
- "bar"
26+
responses:
27+
'200':
28+
description: OK

‎test/e2e-cypress/tests/bugs/7996.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
describe("#7996: tag description text fills container when externalDocs section absent", () => {
2+
it("should show externalDocs div when externalDocs present in specification", () => {
3+
cy
4+
.visit("?url=/documents/bugs/7996-tags-externalDocs.yaml")
5+
.get("#operations-tag-foo .info__externaldocs")
6+
.should("exist")
7+
})
8+
it("should have no externalDocs div when externalDocs absent from specification", () => {
9+
cy
10+
.visit("?url=/documents/bugs/7996-tags-externalDocs.yaml")
11+
.get("#operations-tag-bar .info__externaldocs")
12+
.should("not.exist")
13+
})
14+
})

0 commit comments

Comments
 (0)
⚡