From 08b8f9c35a8e4eae5b3d340b89bc99110e6d7976 Mon Sep 17 00:00:00 2001 From: Martin Nowak Date: Fri, 8 Dec 2017 13:22:25 +0100 Subject: [PATCH 1/9] fix example integration --- docs/usage/installation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/usage/installation.md b/docs/usage/installation.md index 63f7d233..e4fd09d2 100644 --- a/docs/usage/installation.md +++ b/docs/usage/installation.md @@ -49,7 +49,7 @@ const ui = SwaggerUIBundle({ presets: [ SwaggerUIBundle.presets.apis, SwaggerUIBundle.SwaggerUIStandalonePreset - ] + ], layout: "StandaloneLayout" }) ``` @@ -86,7 +86,7 @@ This will serve Swagger UI at `/swagger` instead of `/`. You can embed Swagger-UI's code directly in your HTML by using unkpg's interface: ```html - ``` From 67b2b716e46310c08474865aa77f1a14eca5f93a Mon Sep 17 00:00:00 2001 From: HelderSepu Date: Sat, 9 Dec 2017 11:12:41 -0500 Subject: [PATCH 2/9] Show loading message when we are loading --- src/core/components/layouts/base.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 1f5a0788..404a16b5 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -61,7 +61,11 @@ export default class BaseLayout extends React.Component { const isSpecEmpty = !specSelectors.specStr() if(isSpecEmpty) { - return

No spec provided.

+ if(isLoading) { + return

Loading...

+ } else { + return

No spec provided.

+ } } return ( From b2a435afdc2cea22e19e1c523fc0d2401c72706e Mon Sep 17 00:00:00 2001 From: Helder Sepulveda Date: Tue, 12 Dec 2017 07:41:33 -0500 Subject: [PATCH 3/9] Replace text with Loading throbber --- src/core/components/layouts/base.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 404a16b5..22609d85 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -62,7 +62,7 @@ export default class BaseLayout extends React.Component { if(isSpecEmpty) { if(isLoading) { - return

Loading...

+ return
} else { return

No spec provided.

} From faa9ada6b87c4f622b2a756a12e87c60325869a5 Mon Sep 17 00:00:00 2001 From: kyle Date: Tue, 12 Dec 2017 12:31:55 -0800 Subject: [PATCH 4/9] `class` => `className` --- src/core/components/layouts/base.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 22609d85..cd4155ac 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -62,7 +62,7 @@ export default class BaseLayout extends React.Component { if(isSpecEmpty) { if(isLoading) { - return
+ return
} else { return

No spec provided.

} From 0864ca849fac91288c6afd3127ad30ebf824848c Mon Sep 17 00:00:00 2001 From: Kyle Shockey Date: Tue, 12 Dec 2017 13:07:18 -0800 Subject: [PATCH 5/9] Use throbber in Standalone layout; center loading messages and content --- src/standalone/layout.jsx | 10 ++++++++-- src/style/_layout.scss | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx index dc36b46e..9ad2aace 100644 --- a/src/standalone/layout.jsx +++ b/src/standalone/layout.jsx @@ -1,3 +1,5 @@ + + import React from "react" import PropTypes from "prop-types" @@ -32,12 +34,16 @@ export default class StandaloneLayout extends React.Component { { Topbar ? : null } { loadingStatus === "loading" &&
-

Loading...

+
+
+
} { loadingStatus === "failed" &&
-

Failed to load spec.

+
+

Failed to load spec.

+
} { loadingStatus === "failedConfig" && diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 1d399f76..3fcf2b0a 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -653,6 +653,10 @@ .loading-container { padding: 40px 0 60px; + min-height: 1px; + display: flex; + justify-content: center; + .loading { position: relative; From 3db4f6c93a61feefe0354f9f0d85d2095d120d51 Mon Sep 17 00:00:00 2001 From: Kyle Shockey Date: Tue, 12 Dec 2017 13:24:42 -0800 Subject: [PATCH 6/9] Wrap BaseLayout loading messages in swagger-ui+loading-container --- src/core/components/layouts/base.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index cd4155ac..47f94c1a 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -61,11 +61,18 @@ export default class BaseLayout extends React.Component { const isSpecEmpty = !specSelectors.specStr() if(isSpecEmpty) { + let loadingMessage if(isLoading) { - return
+ loadingMessage =
} else { - return

No spec provided.

+ loadingMessage =

No spec provided.

} + + return
+
+ {loadingMessage} +
+
} return ( From 00f4fb33264f8ae5c1bcd34994c3dc2afee6a5dd Mon Sep 17 00:00:00 2001 From: Kyle Shockey Date: Tue, 12 Dec 2017 13:25:36 -0800 Subject: [PATCH 7/9] Add margin to loading container --- src/style/_layout.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 3fcf2b0a..72109a73 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -653,6 +653,7 @@ .loading-container { padding: 40px 0 60px; + margin-top: 1em; min-height: 1px; display: flex; justify-content: center; From dfa96e66a4ff89d550fdd35dea795edd0d5654fb Mon Sep 17 00:00:00 2001 From: Kyle Shockey Date: Tue, 12 Dec 2017 13:31:21 -0800 Subject: [PATCH 8/9] Improve a handful of error surfacing messages `Spec` => `API definition`, notably. --- src/core/components/layouts/base.jsx | 2 +- src/standalone/layout.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 47f94c1a..235366f7 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -65,7 +65,7 @@ export default class BaseLayout extends React.Component { if(isLoading) { loadingMessage =
} else { - loadingMessage =

No spec provided.

+ loadingMessage =

No API definition provided.

} return
diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx index 9ad2aace..30e46ccc 100644 --- a/src/standalone/layout.jsx +++ b/src/standalone/layout.jsx @@ -42,13 +42,13 @@ export default class StandaloneLayout extends React.Component { { loadingStatus === "failed" &&
-

Failed to load spec.

+

Failed to load API definition.

} { loadingStatus === "failedConfig" &&
-

Failed to load config.

+

Failed to load remote configuration.

} { !loadingStatus || loadingStatus === "success" && } From 9a7ef85aa426e30671efb2aba2b365c7a67c98a9 Mon Sep 17 00:00:00 2001 From: kyle Date: Tue, 12 Dec 2017 14:33:41 -0800 Subject: [PATCH 9/9] Clarify wrapComponent interface in Plugin API docs --- docs/customization/plugin-api.md | 33 +++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/docs/customization/plugin-api.md b/docs/customization/plugin-api.md index db88ca71..245b5a14 100644 --- a/docs/customization/plugin-api.md +++ b/docs/customization/plugin-api.md @@ -293,7 +293,7 @@ const MyWrapSelectorsPlugin = function(system) { Wrap Components allow you to override a component registered within the system. -Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`. +Wrap Components are function factories with the signature `(OriginalComponent, system) => props => ReactElement`. If you'd prefer to provide a React component class, `(OriginalComponent, system) => ReactClass` works as well. ```javascript const MyWrapBuiltinComponentPlugin = function(system) { @@ -310,9 +310,12 @@ const MyWrapBuiltinComponentPlugin = function(system) { } ``` -```javascript -// Overriding a component from a plugin +Here's another example that includes a code sample of a component that will be wrapped: +```javascript +///// Overriding a component from a plugin + +// Here's our normal, unmodified component. const MyNumberDisplayPlugin = function(system) { return { components: { @@ -321,6 +324,7 @@ const MyNumberDisplayPlugin = function(system) { } } +// Here's a component wrapper defined as a function. const MyWrapComponentPlugin = function(system) { return { wrapComponents: { @@ -328,6 +332,7 @@ const MyWrapComponentPlugin = function(system) { if(props.number > 10) { return

Warning! Big number ahead.

+
} else { return @@ -336,8 +341,30 @@ const MyWrapComponentPlugin = function(system) { } } } + +// Alternatively, here's the same component wrapper defined as a class. +const MyWrapComponentPlugin = function(system) { + return { + wrapComponents: { + NumberDisplay: (Original, system) => class WrappedNumberDisplay extends React.component { + render() { + if(props.number > 10) { + return
+

Warning! Big number ahead.

+ +
+ } else { + return + } + } + } + } + } +} ``` + + ##### fn The fn interface allows you to add helper functions to the system for use elsewhere.