kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Icons plugin

Browse Source 
* Change existing icons to React wrapper components

* Add `icons` plugin to expose Icon components to plugin system

* Create components that re-export Lock and Unlock components so they can be changed separately in Authorise top button and Authorise operation summary button

* Add new Lock and Unlock icons to `auth` plugin

---------

Co-authored-by: Vladimír Gorej <vladimir.gorej@smartbear.com>
This commit is contained in:
Damian Polewski
2023-07-20 14:51:17 +02:00
committed by GitHub
parent be9f94490b
commit f3ea2a251d
24 changed files with 386 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/core/components/auth/authorization-popup.jsx
View File

@@ -12,6 +12,7 @@ export default class AuthorizationPopup extends React.Component {
let { authSelectors, authActions, getComponent, errSelectors, specSelectors, fn: { AST = {} } } = this.props
let definitions = authSelectors.shownDefinitions()
const Auths = getComponent("auths")
const CloseIcon = getComponent("CloseIcon")
return (
<div className="dialog-ux">
@@ -22,9 +23,7 @@ export default class AuthorizationPopup extends React.Component {
<div className="modal-ux-header">
<h3>Available authorizations</h3>
<button type="button" className="close-modal" onClick={ this.close }>
<svg width="20" height="20">
<use href="#close" xlinkHref="#close" />
</svg>
<CloseIcon />
</button>
</div>
<div className="modal-ux-content">

6
src/core/components/auth/authorize-btn.jsx
View File

@@ -14,14 +14,14 @@ export default class AuthorizeBtn extends React.Component {
//must be moved out of button component
const AuthorizationPopup = getComponent("authorizationPopup", true)
const LockAuthIcon = getComponent("LockAuthIcon", true)
const UnlockAuthIcon = getComponent("UnlockAuthIcon", true)
return (
<div className="auth-wrapper">
<button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
<span>Authorize</span>
<svg width="20" height="20">
<use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
</svg>
{isAuthorized ? <LockAuthIcon /> : <UnlockAuthIcon />}
</button>
{ showPopup && <AuthorizationPopup /> }
</div>

14
src/core/components/auth/authorize-operation-btn.jsx
View File

@@ -4,7 +4,8 @@ import PropTypes from "prop-types"
export default class AuthorizeOperationBtn extends React.Component {
static propTypes = {
isAuthorized: PropTypes.bool.isRequired,
onClick: PropTypes.func
onClick: PropTypes.func,
getComponent: PropTypes.func.isRequired
}
onClick =(e) => {
@@ -17,15 +18,16 @@ export default class AuthorizeOperationBtn extends React.Component {
}
render() {
let { isAuthorized } = this.props
let { isAuthorized, getComponent } = this.props
const LockAuthOperationIcon = getComponent("LockAuthOperationIcon", true)
const UnlockAuthOperationIcon = getComponent("UnlockAuthOperationIcon", true)
return (
<button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
<button className="authorization__btn"
aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
onClick={this.onClick}>
<svg width="20" height="20">
<use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
</svg>
{isAuthorized ? <LockAuthOperationIcon className="locked" /> : <UnlockAuthOperationIcon className="unlocked"/>}
</button>
)

11
src/core/components/copy-to-clipboard-btn.jsx
View File

@@ -3,24 +3,27 @@ import { CopyToClipboard } from "react-copy-to-clipboard"
import PropTypes from "prop-types"
/**
* @param {{ textToCopy: string }} props
* @param {{ getComponent: func, textToCopy: string }} props
* @returns {JSX.Element}
* @constructor
*/
export default class CopyToClipboardBtn extends React.Component {
render() {
let { getComponent } = this.props
const CopyIcon = getComponent("CopyIcon")
return (
<div className="view-line-link copy-to-clipboard" title="Copy to clipboard">
<CopyToClipboard text={this.props.textToCopy}>
<svg width="15" height="16">
<use href="#copy" xlinkHref="#copy" />
</svg>
<CopyIcon />
</CopyToClipboard>
</div>
)
}
static propTypes = {
getComponent: PropTypes.func.isRequired,
textToCopy: PropTypes.string.isRequired,
}
}

6
src/core/components/models.jsx
View File

@@ -56,6 +56,8 @@ export default class Models extends Component {
const Collapse = getComponent("Collapse")
const ModelCollapse = getComponent("ModelCollapse")
const JumpToPath = getComponent("JumpToPath", true)
const ArrowUpIcon = getComponent("ArrowUpIcon")
const ArrowDownIcon = getComponent("ArrowDownIcon")
return <section className={ showModels ? "models is-open" : "models"} ref={this.onLoadModels}>
<h4>
@@ -65,9 +67,7 @@ export default class Models extends Component {
onClick={() => layoutActions.show(specPathBase, !showModels)}
>
<span>{isOAS3 ? "Schemas" : "Models"}</span>
<svg width="20" height="20" aria-hidden="true" focusable="false">
<use xlinkHref={showModels ? "#large-arrow-up" : "#large-arrow-down"} />
</svg>
{showModels ? <ArrowUpIcon /> : <ArrowDownIcon />}
</button>
</h4>
<Collapse isOpened={showModels}>

13
src/core/components/operation-summary.jsx
View File

@@ -54,11 +54,13 @@ export default class OperationSummary extends PureComponent {
let security = operationProps.get("security")
const AuthorizeOperationBtn = getComponent("authorizeOperationBtn")
const AuthorizeOperationBtn = getComponent("authorizeOperationBtn", true)
const OperationSummaryMethod = getComponent("OperationSummaryMethod")
const OperationSummaryPath = getComponent("OperationSummaryPath")
const JumpToPath = getComponent("JumpToPath", true)
const CopyToClipboardBtn = getComponent("CopyToClipboardBtn", true)
const ArrowUpIcon = getComponent("ArrowUpIcon")
const ArrowDownIcon = getComponent("ArrowDownIcon")
const hasSecurity = security && !!security.count()
const securityIsOptional = hasSecurity && security.size === 1 && security.first().isEmpty()
@@ -82,9 +84,8 @@ export default class OperationSummary extends PureComponent {
{displayOperationId && (originalOperationId || operationId) ? <span className="opblock-summary-operation-id">{originalOperationId || operationId}</span> : null}
<svg className="arrow" width="20" height="20" aria-hidden="true" focusable="false">
<use href={isShown ? "#large-arrow-up" : "#large-arrow-down"} xlinkHref={isShown ? "#large-arrow-up" : "#large-arrow-down"} />
</svg>
{isShown ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
</button>
{
@@ -97,7 +98,9 @@ export default class OperationSummary extends PureComponent {
}}
/>
}
<CopyToClipboardBtn textToCopy={`${specPath.get(1)}`} />
<CopyToClipboardBtn
textToCopy={`${specPath.get(1)}`}
/>
<JumpToPath path={specPath} />{/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
</div>
)

6
src/core/components/operation-tag.jsx
View File

@@ -53,6 +53,8 @@ export default class OperationTag extends React.Component {
const Markdown = getComponent("Markdown", true)
const DeepLink = getComponent("DeepLink")
const Link = getComponent("Link")
const ArrowUpIcon = getComponent("ArrowUpIcon")
const ArrowDownIcon = getComponent("ArrowDownIcon")
let tagDescription = tagObj.getIn(["tagDetails", "description"], null)
let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
@@ -107,9 +109,7 @@ export default class OperationTag extends React.Component {
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>
{showTag ? <ArrowUpIcon className="arrow" /> : <ArrowDownIcon className="arrow" />}
</button>
</h3>