@stoplight/elements-dev-portal 1.5.0 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Search/Search.d.ts +1 -0
- package/index.esm.js +27 -28
- package/index.js +25 -26
- package/index.mjs +27 -28
- package/package.json +3 -3
- package/styles.min.css +1 -1
- package/version.d.ts +1 -1
- package/web-components.min.js +1 -1
|
@@ -2,6 +2,7 @@ import { ModalProps } from '@stoplight/mosaic';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { NodeSearchResult } from '../../types';
|
|
4
4
|
export declare type SearchProps = {
|
|
5
|
+
isLoading?: boolean;
|
|
5
6
|
search?: string;
|
|
6
7
|
searchResults?: NodeSearchResult[];
|
|
7
8
|
onSearch: (search: string) => void;
|
package/index.esm.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
|
|
4
|
-
import { withQueryClientProvider, withMosaicProvider,
|
|
4
|
+
import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
|
|
5
5
|
import { resolve, dirname } from '@stoplight/path';
|
|
6
6
|
import { NodeType } from '@stoplight/types';
|
|
7
|
-
import { faSearch, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
|
7
|
+
import { faSpinner, faSearch, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
|
8
8
|
import flow from 'lodash/flow.js';
|
|
9
9
|
import { Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
|
|
10
10
|
import { useQuery } from 'react-query';
|
|
@@ -36,27 +36,26 @@ const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io
|
|
|
36
36
|
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
|
|
37
37
|
return React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
|
|
38
38
|
};
|
|
39
|
-
const DevPortalProvider = withQueryClientProvider(withMosaicProvider(PlatformProvider));
|
|
39
|
+
const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
|
|
40
40
|
|
|
41
41
|
const NodeContent = ({ node, Link, hideTryIt, hideTryItPanel, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
42
|
-
return (React.createElement(
|
|
43
|
-
React.createElement(
|
|
44
|
-
React.createElement(
|
|
45
|
-
React.createElement(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy }))))));
|
|
42
|
+
return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
|
|
43
|
+
React.createElement(MarkdownComponentsProvider, { value: { a: LinkComponent } },
|
|
44
|
+
React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
|
|
45
|
+
React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
|
|
46
|
+
hideTryIt: hideTryIt,
|
|
47
|
+
hideTryItPanel: hideTryItPanel,
|
|
48
|
+
hideExport: hideExport || node.links.export_url === undefined,
|
|
49
|
+
}, useNodeForRefResolving: true, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
|
|
50
|
+
? {
|
|
51
|
+
original: {
|
|
52
|
+
href: node.links.export_url,
|
|
53
|
+
},
|
|
54
|
+
bundled: {
|
|
55
|
+
href: getBundledUrl(node.links.export_url),
|
|
56
|
+
},
|
|
57
|
+
}
|
|
58
|
+
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy })))));
|
|
60
59
|
};
|
|
61
60
|
const NodeLinkContext = React.createContext(undefined);
|
|
62
61
|
const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
|
|
@@ -88,7 +87,7 @@ function getBundledUrl(url) {
|
|
|
88
87
|
return bundledUrl.toString();
|
|
89
88
|
}
|
|
90
89
|
|
|
91
|
-
const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
90
|
+
const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
92
91
|
const listBoxRef = React.useRef(null);
|
|
93
92
|
const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
|
|
94
93
|
const onKeyDown = React.useCallback(e => {
|
|
@@ -105,7 +104,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
|
|
|
105
104
|
onClick(selectedResult);
|
|
106
105
|
}
|
|
107
106
|
}, [searchResults, onClick]);
|
|
108
|
-
return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: faSearch }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
107
|
+
return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
109
108
|
var _a, _b;
|
|
110
109
|
return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
|
|
111
110
|
React.createElement(Box, { p: 3, borderB: true },
|
|
@@ -180,7 +179,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
|
|
|
180
179
|
React__default.createElement(Icon, { icon: faExclamationTriangle, size: "4x" }),
|
|
181
180
|
React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
|
|
182
181
|
|
|
183
|
-
const appVersion = '1.
|
|
182
|
+
const appVersion = '1.6.2';
|
|
184
183
|
|
|
185
184
|
class ResponseError extends Error {
|
|
186
185
|
constructor(message, responseCode) {
|
|
@@ -306,8 +305,8 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
|
|
|
306
305
|
tableOfContents ? (React.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
|
|
307
306
|
};
|
|
308
307
|
const StoplightProjectRouter = (_a) => {
|
|
309
|
-
var { platformUrl, basePath = '/', router } = _a, props = __rest(_a, ["platformUrl", "basePath", "router"]);
|
|
310
|
-
const { Router, routerProps } = useRouter(router
|
|
308
|
+
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
309
|
+
const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
|
|
311
310
|
return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
312
311
|
React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
313
312
|
React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug", exact: true },
|
|
@@ -317,7 +316,7 @@ const StoplightProjectRouter = (_a) => {
|
|
|
317
316
|
React.createElement(Route, { path: "/", exact: true },
|
|
318
317
|
React.createElement(StoplightProjectImpl, Object.assign({}, props))))));
|
|
319
318
|
};
|
|
320
|
-
const StoplightProject =
|
|
319
|
+
const StoplightProject = withStyles(StoplightProjectRouter);
|
|
321
320
|
|
|
322
321
|
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
323
322
|
const queryParams = [];
|
|
@@ -590,7 +589,7 @@ function useDebounce(value, delay, options) {
|
|
|
590
589
|
function useGetNodes({ search, workspaceId, branchSlug, projectIds, pause, }) {
|
|
591
590
|
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
592
591
|
const [debounceSearch] = useDebounce(search, 500);
|
|
593
|
-
return useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch
|
|
592
|
+
return useQuery(['workspaceNodes', platformUrl, platformAuthToken, workspaceId, branchSlug, projectIds, debounceSearch], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
594
593
|
}
|
|
595
594
|
|
|
596
595
|
function useGetWorkspace({ projectIds }) {
|
package/index.js
CHANGED
|
@@ -63,27 +63,26 @@ const PlatformContext = React__namespace.createContext({ platformUrl: 'https://s
|
|
|
63
63
|
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
|
|
64
64
|
return React__namespace.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
|
|
65
65
|
};
|
|
66
|
-
const DevPortalProvider = elementsCore.withQueryClientProvider(elementsCore.withMosaicProvider(PlatformProvider));
|
|
66
|
+
const DevPortalProvider = elementsCore.withPersistenceBoundary(elementsCore.withQueryClientProvider(elementsCore.withMosaicProvider(PlatformProvider)));
|
|
67
67
|
|
|
68
68
|
const NodeContent = ({ node, Link, hideTryIt, hideTryItPanel, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
69
|
-
return (React__namespace.createElement(
|
|
70
|
-
React__namespace.createElement(
|
|
71
|
-
React__namespace.createElement(elementsCore.
|
|
72
|
-
React__namespace.createElement(elementsCore.
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy }))))));
|
|
69
|
+
return (React__namespace.createElement(NodeLinkContext.Provider, { value: [node, Link] },
|
|
70
|
+
React__namespace.createElement(elementsCore.MarkdownComponentsProvider, { value: { a: LinkComponent } },
|
|
71
|
+
React__namespace.createElement(elementsCore.MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
|
|
72
|
+
React__namespace.createElement(elementsCore.Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
|
|
73
|
+
hideTryIt: hideTryIt,
|
|
74
|
+
hideTryItPanel: hideTryItPanel,
|
|
75
|
+
hideExport: hideExport || node.links.export_url === undefined,
|
|
76
|
+
}, useNodeForRefResolving: true, tryItCorsProxy: tryItCorsProxy, exportProps: [types.NodeType.HttpService, types.NodeType.Model].includes(node.type)
|
|
77
|
+
? {
|
|
78
|
+
original: {
|
|
79
|
+
href: node.links.export_url,
|
|
80
|
+
},
|
|
81
|
+
bundled: {
|
|
82
|
+
href: getBundledUrl(node.links.export_url),
|
|
83
|
+
},
|
|
84
|
+
}
|
|
85
|
+
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy })))));
|
|
87
86
|
};
|
|
88
87
|
const NodeLinkContext = React__namespace.createContext(undefined);
|
|
89
88
|
const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
|
|
@@ -115,7 +114,7 @@ function getBundledUrl(url) {
|
|
|
115
114
|
return bundledUrl.toString();
|
|
116
115
|
}
|
|
117
116
|
|
|
118
|
-
const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
117
|
+
const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
119
118
|
const listBoxRef = React__namespace.useRef(null);
|
|
120
119
|
const onChange = React__namespace.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
|
|
121
120
|
const onKeyDown = React__namespace.useCallback(e => {
|
|
@@ -132,7 +131,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
|
|
|
132
131
|
onClick(selectedResult);
|
|
133
132
|
}
|
|
134
133
|
}, [searchResults, onClick]);
|
|
135
|
-
return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: freeSolidSvgIcons.faSearch }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
134
|
+
return (React__namespace.createElement(mosaic.Modal, { renderHeader: () => (React__namespace.createElement(mosaic.Input, { appearance: "minimal", borderB: true, size: "lg", icon: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, ml: 1, icon: isLoading ? freeSolidSvgIcons.faSpinner : freeSolidSvgIcons.faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React__namespace.createElement(mosaic.ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
136
135
|
var _a, _b;
|
|
137
136
|
return (React__namespace.createElement(mosaic.ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
|
|
138
137
|
React__namespace.createElement(mosaic.Box, { p: 3, borderB: true },
|
|
@@ -207,7 +206,7 @@ const UpgradeToStarter = () => (React__default["default"].createElement(mosaic.F
|
|
|
207
206
|
React__default["default"].createElement(mosaic.Icon, { icon: freeSolidSvgIcons.faExclamationTriangle, size: "4x" }),
|
|
208
207
|
React__default["default"].createElement(mosaic.Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
|
|
209
208
|
|
|
210
|
-
const appVersion = '1.
|
|
209
|
+
const appVersion = '1.6.2';
|
|
211
210
|
|
|
212
211
|
class ResponseError extends Error {
|
|
213
212
|
constructor(message, responseCode) {
|
|
@@ -333,8 +332,8 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
|
|
|
333
332
|
tableOfContents ? (React__namespace.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: reactRouterDom.Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
|
|
334
333
|
};
|
|
335
334
|
const StoplightProjectRouter = (_a) => {
|
|
336
|
-
var { platformUrl, basePath = '/', router } = _a, props = __rest(_a, ["platformUrl", "basePath", "router"]);
|
|
337
|
-
const { Router, routerProps } = elementsCore.useRouter(router
|
|
335
|
+
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
336
|
+
const { Router, routerProps } = elementsCore.useRouter(router, basePath, staticRouterPath);
|
|
338
337
|
return (React__namespace.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
339
338
|
React__namespace.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
340
339
|
React__namespace.createElement(reactRouterDom.Route, { path: "/branches/:branchSlug/:nodeSlug", exact: true },
|
|
@@ -344,7 +343,7 @@ const StoplightProjectRouter = (_a) => {
|
|
|
344
343
|
React__namespace.createElement(reactRouterDom.Route, { path: "/", exact: true },
|
|
345
344
|
React__namespace.createElement(StoplightProjectImpl, Object.assign({}, props))))));
|
|
346
345
|
};
|
|
347
|
-
const StoplightProject =
|
|
346
|
+
const StoplightProject = elementsCore.withStyles(StoplightProjectRouter);
|
|
348
347
|
|
|
349
348
|
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
350
349
|
const queryParams = [];
|
|
@@ -617,7 +616,7 @@ function useDebounce(value, delay, options) {
|
|
|
617
616
|
function useGetNodes({ search, workspaceId, branchSlug, projectIds, pause, }) {
|
|
618
617
|
const { platformUrl, platformAuthToken } = React__namespace.useContext(PlatformContext);
|
|
619
618
|
const [debounceSearch] = useDebounce(search, 500);
|
|
620
|
-
return reactQuery.useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch
|
|
619
|
+
return reactQuery.useQuery(['workspaceNodes', platformUrl, platformAuthToken, workspaceId, branchSlug, projectIds, debounceSearch], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
621
620
|
}
|
|
622
621
|
|
|
623
622
|
function useGetWorkspace({ projectIds }) {
|
package/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
|
|
4
|
-
import { withQueryClientProvider, withMosaicProvider,
|
|
4
|
+
import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
|
|
5
5
|
import { resolve, dirname } from '@stoplight/path';
|
|
6
6
|
import { NodeType } from '@stoplight/types';
|
|
7
|
-
import { faSearch, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
|
7
|
+
import { faSpinner, faSearch, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
|
8
8
|
import flow from 'lodash/flow.js';
|
|
9
9
|
import { Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
|
|
10
10
|
import { useQuery } from 'react-query';
|
|
@@ -36,27 +36,26 @@ const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io
|
|
|
36
36
|
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
|
|
37
37
|
return React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
|
|
38
38
|
};
|
|
39
|
-
const DevPortalProvider = withQueryClientProvider(withMosaicProvider(PlatformProvider));
|
|
39
|
+
const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
|
|
40
40
|
|
|
41
41
|
const NodeContent = ({ node, Link, hideTryIt, hideTryItPanel, hideMocking, hideExport, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
42
|
-
return (React.createElement(
|
|
43
|
-
React.createElement(
|
|
44
|
-
React.createElement(
|
|
45
|
-
React.createElement(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy }))))));
|
|
42
|
+
return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
|
|
43
|
+
React.createElement(MarkdownComponentsProvider, { value: { a: LinkComponent } },
|
|
44
|
+
React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
|
|
45
|
+
React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
|
|
46
|
+
hideTryIt: hideTryIt,
|
|
47
|
+
hideTryItPanel: hideTryItPanel,
|
|
48
|
+
hideExport: hideExport || node.links.export_url === undefined,
|
|
49
|
+
}, useNodeForRefResolving: true, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
|
|
50
|
+
? {
|
|
51
|
+
original: {
|
|
52
|
+
href: node.links.export_url,
|
|
53
|
+
},
|
|
54
|
+
bundled: {
|
|
55
|
+
href: getBundledUrl(node.links.export_url),
|
|
56
|
+
},
|
|
57
|
+
}
|
|
58
|
+
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy })))));
|
|
60
59
|
};
|
|
61
60
|
const NodeLinkContext = React.createContext(undefined);
|
|
62
61
|
const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
|
|
@@ -88,7 +87,7 @@ function getBundledUrl(url) {
|
|
|
88
87
|
return bundledUrl.toString();
|
|
89
88
|
}
|
|
90
89
|
|
|
91
|
-
const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
90
|
+
const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
92
91
|
const listBoxRef = React.useRef(null);
|
|
93
92
|
const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
|
|
94
93
|
const onKeyDown = React.useCallback(e => {
|
|
@@ -105,7 +104,7 @@ const SearchImpl = ({ search, searchResults, isOpen, onClose, onClick, onSearch
|
|
|
105
104
|
onClick(selectedResult);
|
|
106
105
|
}
|
|
107
106
|
}, [searchResults, onClick]);
|
|
108
|
-
return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: faSearch }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
107
|
+
return (React.createElement(Modal, { renderHeader: () => (React.createElement(Input, { appearance: "minimal", borderB: true, size: "lg", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isLoading ? faSpinner : faSearch, spin: isLoading }), autoFocus: true, placeholder: "Search...", value: search, onChange: onChange, onKeyDown: onKeyDown })), isOpen: !!isOpen, onClose: onClose }, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
109
108
|
var _a, _b;
|
|
110
109
|
return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
|
|
111
110
|
React.createElement(Box, { p: 3, borderB: true },
|
|
@@ -180,7 +179,7 @@ const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", hr
|
|
|
180
179
|
React__default.createElement(Icon, { icon: faExclamationTriangle, size: "4x" }),
|
|
181
180
|
React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
|
|
182
181
|
|
|
183
|
-
const appVersion = '1.
|
|
182
|
+
const appVersion = '1.6.2';
|
|
184
183
|
|
|
185
184
|
class ResponseError extends Error {
|
|
186
185
|
constructor(message, responseCode) {
|
|
@@ -306,8 +305,8 @@ const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, c
|
|
|
306
305
|
tableOfContents ? (React.createElement(TableOfContents, { activeId: (node === null || node === void 0 ? void 0 : node.id) || (nodeSlug === null || nodeSlug === void 0 ? void 0 : nodeSlug.split('-')[0]) || '', tableOfContents: tableOfContents, Link: Link, collapseTableOfContents: collapseTableOfContents, onLinkClick: handleTocClick })) : null) }, elem));
|
|
307
306
|
};
|
|
308
307
|
const StoplightProjectRouter = (_a) => {
|
|
309
|
-
var { platformUrl, basePath = '/', router } = _a, props = __rest(_a, ["platformUrl", "basePath", "router"]);
|
|
310
|
-
const { Router, routerProps } = useRouter(router
|
|
308
|
+
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
309
|
+
const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
|
|
311
310
|
return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
312
311
|
React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
313
312
|
React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug", exact: true },
|
|
@@ -317,7 +316,7 @@ const StoplightProjectRouter = (_a) => {
|
|
|
317
316
|
React.createElement(Route, { path: "/", exact: true },
|
|
318
317
|
React.createElement(StoplightProjectImpl, Object.assign({}, props))))));
|
|
319
318
|
};
|
|
320
|
-
const StoplightProject =
|
|
319
|
+
const StoplightProject = withStyles(StoplightProjectRouter);
|
|
321
320
|
|
|
322
321
|
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
323
322
|
const queryParams = [];
|
|
@@ -590,7 +589,7 @@ function useDebounce(value, delay, options) {
|
|
|
590
589
|
function useGetNodes({ search, workspaceId, branchSlug, projectIds, pause, }) {
|
|
591
590
|
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
592
591
|
const [debounceSearch] = useDebounce(search, 500);
|
|
593
|
-
return useQuery(['workspaceNodes', workspaceId, branchSlug, projectIds, debounceSearch
|
|
592
|
+
return useQuery(['workspaceNodes', platformUrl, platformAuthToken, workspaceId, branchSlug, projectIds, debounceSearch], () => getNodes({ workspaceId, branchSlug, projectIds, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
594
593
|
}
|
|
595
594
|
|
|
596
595
|
function useGetWorkspace({ projectIds }) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stoplight/elements-dev-portal",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.2",
|
|
4
4
|
"description": "UI components for composing beautiful developer documentation.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"main": "./index.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@fortawesome/free-solid-svg-icons": "^5.10.2",
|
|
30
|
-
"@stoplight/elements-core": "~7.
|
|
30
|
+
"@stoplight/elements-core": "~7.5.2",
|
|
31
31
|
"@stoplight/markdown-viewer": "^5.3.2",
|
|
32
|
-
"@stoplight/mosaic": "^1.
|
|
32
|
+
"@stoplight/mosaic": "^1.14.0",
|
|
33
33
|
"@stoplight/path": "^1.3.2",
|
|
34
34
|
"@stoplight/types": "^12.0.0",
|
|
35
35
|
"classnames": "^2.2.6",
|