From f3ea2a251d839fb368502726fd30d1976de64ebe Mon Sep 17 00:00:00 2001 From: Damian Polewski <125268832+damian-polewski-sb@users.noreply.github.com> Date: Thu, 20 Jul 2023 14:51:17 +0200 Subject: [PATCH] feat: add Icons plugin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../components/auth/authorization-popup.jsx | 5 +-- src/core/components/auth/authorize-btn.jsx | 6 +-- .../auth/authorize-operation-btn.jsx | 14 ++++--- src/core/components/copy-to-clipboard-btn.jsx | 11 ++++-- src/core/components/models.jsx | 6 +-- src/core/components/operation-summary.jsx | 13 ++++--- src/core/components/operation-tag.jsx | 6 +-- .../auth/components/lock-auth-operation.jsx | 17 +++++++++ .../plugins/auth/components/lock-auth.jsx | 17 +++++++++ .../auth/components/unlock-auth-operation.jsx | 17 +++++++++ .../plugins/auth/components/unlock-auth.jsx | 17 +++++++++ src/core/plugins/auth/index.js | 11 ++++++ .../plugins/icons/components/arrow-down.jsx | 33 ++++++++++++++++ .../plugins/icons/components/arrow-up.jsx | 33 ++++++++++++++++ src/core/plugins/icons/components/arrow.jsx | 33 ++++++++++++++++ src/core/plugins/icons/components/close.jsx | 33 ++++++++++++++++ src/core/plugins/icons/components/copy.jsx | 38 +++++++++++++++++++ src/core/plugins/icons/components/lock.jsx | 33 ++++++++++++++++ src/core/plugins/icons/components/unlock.jsx | 33 ++++++++++++++++ src/core/plugins/icons/index.js | 24 ++++++++++++ .../oas31/components/models/models.jsx | 6 +-- .../request-snippets/request-snippets.jsx | 10 +++-- src/core/presets/base.js | 2 + src/style/_buttons.scss | 4 +- 24 files changed, 386 insertions(+), 36 deletions(-) create mode 100644 src/core/plugins/auth/components/lock-auth-operation.jsx create mode 100644 src/core/plugins/auth/components/lock-auth.jsx create mode 100644 src/core/plugins/auth/components/unlock-auth-operation.jsx create mode 100644 src/core/plugins/auth/components/unlock-auth.jsx create mode 100644 src/core/plugins/icons/components/arrow-down.jsx create mode 100644 src/core/plugins/icons/components/arrow-up.jsx create mode 100644 src/core/plugins/icons/components/arrow.jsx create mode 100644 src/core/plugins/icons/components/close.jsx create mode 100644 src/core/plugins/icons/components/copy.jsx create mode 100644 src/core/plugins/icons/components/lock.jsx create mode 100644 src/core/plugins/icons/components/unlock.jsx create mode 100644 src/core/plugins/icons/index.js diff --git a/src/core/components/auth/authorization-popup.jsx b/src/core/components/auth/authorization-popup.jsx index 14406c87..44ecdee8 100644 --- a/src/core/components/auth/authorization-popup.jsx +++ b/src/core/components/auth/authorization-popup.jsx @@ -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 (
@@ -22,9 +23,7 @@ export default class AuthorizationPopup extends React.Component {

Available authorizations

diff --git a/src/core/components/auth/authorize-btn.jsx b/src/core/components/auth/authorize-btn.jsx index 57a1b2bc..21b9ba2c 100644 --- a/src/core/components/auth/authorize-btn.jsx +++ b/src/core/components/auth/authorize-btn.jsx @@ -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 (
{ showPopup && }
diff --git a/src/core/components/auth/authorize-operation-btn.jsx b/src/core/components/auth/authorize-operation-btn.jsx index 19de588a..fcb1fdfd 100644 --- a/src/core/components/auth/authorize-operation-btn.jsx +++ b/src/core/components/auth/authorize-operation-btn.jsx @@ -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 ( - ) diff --git a/src/core/components/copy-to-clipboard-btn.jsx b/src/core/components/copy-to-clipboard-btn.jsx index 67025181..9c44487e 100644 --- a/src/core/components/copy-to-clipboard-btn.jsx +++ b/src/core/components/copy-to-clipboard-btn.jsx @@ -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 (
- - - +
) } static propTypes = { + getComponent: PropTypes.func.isRequired, textToCopy: PropTypes.string.isRequired, } } diff --git a/src/core/components/models.jsx b/src/core/components/models.jsx index 628db5bd..62c87259 100644 --- a/src/core/components/models.jsx +++ b/src/core/components/models.jsx @@ -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

@@ -65,9 +67,7 @@ export default class Models extends Component { onClick={() => layoutActions.show(specPathBase, !showModels)} > {isOAS3 ? "Schemas" : "Models"} - + {showModels ? : }

diff --git a/src/core/components/operation-summary.jsx b/src/core/components/operation-summary.jsx index be89a23d..5e384864 100644 --- a/src/core/components/operation-summary.jsx +++ b/src/core/components/operation-summary.jsx @@ -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) ? {originalOperationId || operationId} : null} - + {isShown ? : } + { @@ -97,7 +98,9 @@ export default class OperationSummary extends PureComponent { }} /> } - + {/* TODO: use wrapComponents here, swagger-ui doesn't care about jumpToPath */}
) diff --git a/src/core/components/operation-tag.jsx b/src/core/components/operation-tag.jsx index ce50f25f..0880c079 100644 --- a/src/core/components/operation-tag.jsx +++ b/src/core/components/operation-tag.jsx @@ -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)}> - + {showTag ? : } diff --git a/src/core/plugins/auth/components/lock-auth-operation.jsx b/src/core/plugins/auth/components/lock-auth-operation.jsx new file mode 100644 index 00000000..85fe02a3 --- /dev/null +++ b/src/core/plugins/auth/components/lock-auth-operation.jsx @@ -0,0 +1,17 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const LockAuthOperation = ({ getComponent, ...props }) => { + const LockIcon = getComponent("LockIcon") + + return +} + +LockAuthOperation.propTypes = { + getComponent: PropTypes.func.isRequired +} + +export default LockAuthOperation \ No newline at end of file diff --git a/src/core/plugins/auth/components/lock-auth.jsx b/src/core/plugins/auth/components/lock-auth.jsx new file mode 100644 index 00000000..6cda9d08 --- /dev/null +++ b/src/core/plugins/auth/components/lock-auth.jsx @@ -0,0 +1,17 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const LockAuth = ({ getComponent, ...props }) => { + const LockIcon = getComponent("LockIcon") + + return +} + +LockAuth.propTypes = { + getComponent: PropTypes.func.isRequired +} + +export default LockAuth \ No newline at end of file diff --git a/src/core/plugins/auth/components/unlock-auth-operation.jsx b/src/core/plugins/auth/components/unlock-auth-operation.jsx new file mode 100644 index 00000000..b94695d6 --- /dev/null +++ b/src/core/plugins/auth/components/unlock-auth-operation.jsx @@ -0,0 +1,17 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const UnlockAuthOperation = ({ getComponent, ...props }) => { + const UnlockIcon = getComponent("UnlockIcon") + + return +} + +UnlockAuthOperation.propTypes = { + getComponent: PropTypes.func.isRequired +} + +export default UnlockAuthOperation \ No newline at end of file diff --git a/src/core/plugins/auth/components/unlock-auth.jsx b/src/core/plugins/auth/components/unlock-auth.jsx new file mode 100644 index 00000000..91047e8f --- /dev/null +++ b/src/core/plugins/auth/components/unlock-auth.jsx @@ -0,0 +1,17 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const UnlockAuth = ({ getComponent, ...props }) => { + const UnlockIcon = getComponent("UnlockIcon") + + return +} + +UnlockAuth.propTypes = { + getComponent: PropTypes.func.isRequired +} + +export default UnlockAuth \ No newline at end of file diff --git a/src/core/plugins/auth/index.js b/src/core/plugins/auth/index.js index 121a2287..cdc2f249 100644 --- a/src/core/plugins/auth/index.js +++ b/src/core/plugins/auth/index.js @@ -5,6 +5,11 @@ import { execute as wrappedExecuteAction } from "./spec-extensions/wrap-actions" import { loaded as wrappedLoadedAction } from "./configs-extensions/wrap-actions" import { authorize as wrappedAuthorizeAction, logout as wrappedLogoutAction } from "./wrap-actions" +import LockAuthIcon from "./components/lock-auth" +import UnlockAuthIcon from "./components/unlock-auth" +import LockAuthOperationIcon from "./components/lock-auth-operation" +import UnlockAuthOperationIcon from "./components/unlock-auth-operation" + export default function() { return { afterLoad(system) { @@ -13,6 +18,12 @@ export default function() { this.rootInjects.preauthorizeApiKey = preauthorizeApiKey.bind(null, system) this.rootInjects.preauthorizeBasic = preauthorizeBasic.bind(null, system) }, + components: { + LockAuthIcon: LockAuthIcon, + UnlockAuthIcon: UnlockAuthIcon, + LockAuthOperationIcon: LockAuthOperationIcon, + UnlockAuthOperationIcon: UnlockAuthOperationIcon, + }, statePlugins: { auth: { reducers, diff --git a/src/core/plugins/icons/components/arrow-down.jsx b/src/core/plugins/icons/components/arrow-down.jsx new file mode 100644 index 00000000..8c8fc94b --- /dev/null +++ b/src/core/plugins/icons/components/arrow-down.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const ArrowDown = ({ className, width, height }) => ( + +) + +ArrowDown.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +ArrowDown.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default ArrowDown \ No newline at end of file diff --git a/src/core/plugins/icons/components/arrow-up.jsx b/src/core/plugins/icons/components/arrow-up.jsx new file mode 100644 index 00000000..42ca07e3 --- /dev/null +++ b/src/core/plugins/icons/components/arrow-up.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const ArrowUp = ({ className, width, height }) => ( + +) + +ArrowUp.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +ArrowUp.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default ArrowUp \ No newline at end of file diff --git a/src/core/plugins/icons/components/arrow.jsx b/src/core/plugins/icons/components/arrow.jsx new file mode 100644 index 00000000..0209f658 --- /dev/null +++ b/src/core/plugins/icons/components/arrow.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const Arrow = ({ className, width, height }) => ( + +) + +Arrow.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +Arrow.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default Arrow \ No newline at end of file diff --git a/src/core/plugins/icons/components/close.jsx b/src/core/plugins/icons/components/close.jsx new file mode 100644 index 00000000..7e446b75 --- /dev/null +++ b/src/core/plugins/icons/components/close.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const Close = ({ className, width, height }) => ( + +) + +Close.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +Close.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default Close \ No newline at end of file diff --git a/src/core/plugins/icons/components/copy.jsx b/src/core/plugins/icons/components/copy.jsx new file mode 100644 index 00000000..c947f429 --- /dev/null +++ b/src/core/plugins/icons/components/copy.jsx @@ -0,0 +1,38 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const Copy = ({ className, width, height }) => ( + +) + +Copy.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +Copy.defaultProps = { + className: null, + width: 15, + height: 16, +} + +export default Copy \ No newline at end of file diff --git a/src/core/plugins/icons/components/lock.jsx b/src/core/plugins/icons/components/lock.jsx new file mode 100644 index 00000000..bc040c25 --- /dev/null +++ b/src/core/plugins/icons/components/lock.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const Lock = ({ className, width, height }) => ( + +) + +Lock.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +Lock.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default Lock \ No newline at end of file diff --git a/src/core/plugins/icons/components/unlock.jsx b/src/core/plugins/icons/components/unlock.jsx new file mode 100644 index 00000000..b2321bb6 --- /dev/null +++ b/src/core/plugins/icons/components/unlock.jsx @@ -0,0 +1,33 @@ +/** + * @prettier + */ +import React from "react" +import PropTypes from "prop-types" + +const Unlock = ({ className, width, height }) => ( + +) + +Unlock.propTypes = { + className: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string, +} + +Unlock.defaultProps = { + className: null, + width: 20, + height: 20, +} + +export default Unlock \ No newline at end of file diff --git a/src/core/plugins/icons/index.js b/src/core/plugins/icons/index.js new file mode 100644 index 00000000..f2d85a78 --- /dev/null +++ b/src/core/plugins/icons/index.js @@ -0,0 +1,24 @@ +/** + * @prettier + */ +import ArrowUpIcon from "./components/arrow-up" +import ArrowDownIcon from "./components/arrow-down" +import ArrowIcon from "./components/arrow" +import CloseIcon from "./components/close" +import CopyIcon from "./components/copy" +import LockIcon from "./components/lock" +import UnlockIcon from "./components/unlock" + +const IconsPlugin = () => ({ + components: { + ArrowUpIcon, + ArrowDownIcon, + ArrowIcon, + CloseIcon, + CopyIcon, + LockIcon, + UnlockIcon, + } +}) + +export default IconsPlugin \ No newline at end of file diff --git a/src/core/plugins/oas31/components/models/models.jsx b/src/core/plugins/oas31/components/models/models.jsx index 5ea7c2c9..77e44fb2 100644 --- a/src/core/plugins/oas31/components/models/models.jsx +++ b/src/core/plugins/oas31/components/models/models.jsx @@ -21,6 +21,8 @@ const Models = ({ const isOpen = layoutSelectors.isShown(schemasPath, isOpenDefault) const Collapse = getComponent("Collapse") const JSONSchema202012 = getComponent("JSONSchema202012") + const ArrowUpIcon = getComponent("ArrowUpIcon") + const ArrowDownIcon = getComponent("ArrowDownIcon") /** * Effects. @@ -80,9 +82,7 @@ const Models = ({ onClick={handleModelsExpand} > Schemas - + {isOpen ? : } diff --git a/src/core/plugins/request-snippets/request-snippets.jsx b/src/core/plugins/request-snippets/request-snippets.jsx index 428af186..46174b3c 100644 --- a/src/core/plugins/request-snippets/request-snippets.jsx +++ b/src/core/plugins/request-snippets/request-snippets.jsx @@ -35,11 +35,14 @@ const activeStyle = { borderBottom: "none" } -const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs }) => { +const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs, getComponent }) => { const config = isFunction(getConfigs) ? getConfigs() : null const canSyntaxHighlight = get(config, "syntaxHighlight") !== false && get(config, "syntaxHighlight.activated", true) const rootRef = useRef(null) + const ArrowIcon = getComponent("ArrowUpIcon") + const ArrowDownIcon = getComponent("ArrowDownIcon") + const [activeLanguage, setActiveLanguage] = useState(requestSnippetsSelectors.getSnippetGenerators()?.keySeq().first()) const [isExpanded, setIsExpanded] = useState(requestSnippetsSelectors?.getDefaultExpanded()) useEffect(() => { @@ -119,9 +122,7 @@ const RequestSnippets = ({ request, requestSnippetsSelectors, getConfigs }) => { style={{ border: "none", background: "none" }} title={isExpanded ? "Collapse operation" : "Expand operation"} > - - - + {isExpanded ? : }
{ @@ -153,6 +154,7 @@ RequestSnippets.propTypes = { request: PropTypes.object.isRequired, requestSnippetsSelectors: PropTypes.object.isRequired, getConfigs: PropTypes.object.isRequired, + getComponent: PropTypes.func.isRequired, requestSnippetsActions: PropTypes.object, } diff --git a/src/core/presets/base.js b/src/core/presets/base.js index ca33bb51..9b560d42 100644 --- a/src/core/presets/base.js +++ b/src/core/presets/base.js @@ -17,6 +17,7 @@ import deepLinkingPlugin from "core/plugins/deep-linking" import filter from "core/plugins/filter" import onComplete from "core/plugins/on-complete" import safeRender from "core/plugins/safe-render" +import iconsPlugin from "core/plugins/icons" import OperationContainer from "core/containers/OperationContainer" @@ -197,6 +198,7 @@ export default function () { filter, onComplete, requestSnippets, + iconsPlugin, safeRender(), ] } diff --git a/src/style/_buttons.scss b/src/style/_buttons.scss index 55dbd268..42773ecb 100644 --- a/src/style/_buttons.scss +++ b/src/style/_buttons.scss @@ -99,12 +99,12 @@ border: none; background: none; - &.locked + .locked { opacity: 1; } - &.unlocked + .unlocked { opacity: .4; }