@stoplight/elements-dev-portal 2.3.2 → 2.3.4
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/NodeContent/NodeContent.d.ts +2 -2
- package/containers/StoplightProject.d.ts +2 -0
- package/index.esm.js +379 -370
- package/index.js +400 -398
- package/index.mjs +379 -370
- package/package.json +3 -3
- package/version.d.ts +1 -1
- package/web-components.min.js +1 -1
package/index.esm.js
CHANGED
|
@@ -8,36 +8,36 @@ import flow from 'lodash/flow.js';
|
|
|
8
8
|
import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
|
|
9
9
|
import { useQuery } from 'react-query';
|
|
10
10
|
|
|
11
|
-
const BranchSelector = ({ branchSlug, branches, onChange }) => {
|
|
12
|
-
const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
|
|
13
|
-
const handleChange = React.useCallback((selectedSlug) => {
|
|
14
|
-
const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
|
|
15
|
-
if (selectedBranch) {
|
|
16
|
-
onChange(selectedBranch);
|
|
17
|
-
}
|
|
18
|
-
}, [onChange, branches]);
|
|
19
|
-
return (React.createElement(Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React.createElement(FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
|
|
20
|
-
{
|
|
21
|
-
type: 'option_group',
|
|
22
|
-
title: 'Versions',
|
|
23
|
-
onChange: handleChange,
|
|
24
|
-
value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
|
|
25
|
-
children: branches.map(branch => ({
|
|
26
|
-
title: branch.name || branch.slug,
|
|
27
|
-
value: branch.slug,
|
|
28
|
-
meta: branch.is_default ? 'Default' : undefined,
|
|
29
|
-
})),
|
|
30
|
-
},
|
|
31
|
-
] }));
|
|
11
|
+
const BranchSelector = ({ branchSlug, branches, onChange }) => {
|
|
12
|
+
const currentBranch = branches.find(branch => (!branchSlug ? branch.is_default : branch.slug === branchSlug));
|
|
13
|
+
const handleChange = React.useCallback((selectedSlug) => {
|
|
14
|
+
const selectedBranch = branches.find(branch => branch.slug === selectedSlug);
|
|
15
|
+
if (selectedBranch) {
|
|
16
|
+
onChange(selectedBranch);
|
|
17
|
+
}
|
|
18
|
+
}, [onChange, branches]);
|
|
19
|
+
return (React.createElement(Menu, { "aria-label": "Versions", placement: "bottom left", closeOnPress: true, matchTriggerWidth: true, renderTrigger: ({ isOpen }) => (React.createElement(FieldButton, { w: "full", icon: "layer-group", px: 4, h: "md", active: isOpen, borderR: 0, roundedR: "none" }, (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.name) || (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || 'Choose a version')), items: [
|
|
20
|
+
{
|
|
21
|
+
type: 'option_group',
|
|
22
|
+
title: 'Versions',
|
|
23
|
+
onChange: handleChange,
|
|
24
|
+
value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
|
|
25
|
+
children: branches.map(branch => ({
|
|
26
|
+
title: branch.name || branch.slug,
|
|
27
|
+
value: branch.slug,
|
|
28
|
+
meta: branch.is_default ? 'Default' : undefined,
|
|
29
|
+
})),
|
|
30
|
+
},
|
|
31
|
+
] }));
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
|
|
35
|
-
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
|
|
36
|
-
return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
|
|
37
|
-
};
|
|
34
|
+
const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
|
|
35
|
+
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
|
|
36
|
+
return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
|
|
37
|
+
};
|
|
38
38
|
const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
/******************************************************************************
|
|
41
41
|
Copyright (c) Microsoft Corporation.
|
|
42
42
|
|
|
43
43
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -51,6 +51,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
51
51
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
52
52
|
PERFORMANCE OF THIS SOFTWARE.
|
|
53
53
|
***************************************************************************** */
|
|
54
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
55
|
+
|
|
54
56
|
|
|
55
57
|
function __rest(s, e) {
|
|
56
58
|
var t = {};
|
|
@@ -72,89 +74,96 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
72
74
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
73
75
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
74
76
|
});
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideTryItPanel, hideExport, onExportRequest, }) => {
|
|
78
|
-
var _a, _b, _c, _d;
|
|
79
|
-
return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
|
|
80
|
-
React.createElement(MarkdownComponentsProvider, { value: {
|
|
81
|
-
a: LinkComponent,
|
|
82
|
-
h2: (_a) => {
|
|
83
|
-
var props = __rest(_a, ["color"]);
|
|
84
|
-
return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
|
|
85
|
-
},
|
|
86
|
-
h3: (_a) => {
|
|
87
|
-
var props = __rest(_a, ["color"]);
|
|
88
|
-
return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
|
|
89
|
-
},
|
|
90
|
-
h4: (_a) => {
|
|
91
|
-
var props = __rest(_a, ["color"]);
|
|
92
|
-
return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
|
|
93
|
-
},
|
|
94
|
-
} },
|
|
95
|
-
React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
|
|
96
|
-
React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
|
|
97
|
-
compact,
|
|
98
|
-
hideTryIt: hideTryIt,
|
|
99
|
-
hideTryItPanel: hideTryItPanel,
|
|
100
|
-
hideExport: hideExport ||
|
|
101
|
-
((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
|
|
102
|
-
undefined,
|
|
103
|
-
}, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
|
|
104
|
-
? {
|
|
105
|
-
original: onExportRequest
|
|
106
|
-
? { onPress: () => onExportRequest('original') }
|
|
107
|
-
: { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
|
|
108
|
-
bundled: onExportRequest
|
|
109
|
-
? { onPress: () => onExportRequest('bundled') }
|
|
110
|
-
: { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
|
|
111
|
-
}
|
|
112
|
-
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
|
|
113
|
-
};
|
|
114
|
-
const NodeLinkContext = React.createContext(undefined);
|
|
115
|
-
const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
|
|
116
|
-
const LinkComponent = ({ children, href, title }) => {
|
|
117
|
-
const ctx = React.useContext(NodeLinkContext);
|
|
118
|
-
if (href && externalRegex.test(href)) {
|
|
119
|
-
return (React.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
|
|
120
|
-
}
|
|
121
|
-
if (href && ctx) {
|
|
122
|
-
const [node, Link] = ctx;
|
|
123
|
-
const { fileUri } = getNodeUriParts(node.uri);
|
|
124
|
-
const { fileUri: hrefFileUri } = getNodeUriParts(href);
|
|
125
|
-
let resolvedUri;
|
|
126
|
-
if (hrefFileUri) {
|
|
127
|
-
resolvedUri = resolve(dirname(fileUri), href);
|
|
128
|
-
}
|
|
129
|
-
else {
|
|
130
|
-
resolvedUri = resolve(fileUri, href);
|
|
131
|
-
}
|
|
132
|
-
const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
|
|
133
|
-
const decodedUrl = decodeURIComponent(href);
|
|
134
|
-
const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
|
|
135
|
-
const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
|
|
136
|
-
if (edge) {
|
|
137
|
-
return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
return React.createElement("a", { href: href }, children);
|
|
141
|
-
};
|
|
142
|
-
function getBundledUrl(url) {
|
|
143
|
-
if (url === undefined)
|
|
144
|
-
return undefined;
|
|
145
|
-
const bundledUrl = new URL(url);
|
|
146
|
-
const searchParams = new URLSearchParams(bundledUrl.search);
|
|
147
|
-
searchParams.append('deref', 'optimizedBundle');
|
|
148
|
-
bundledUrl.search = searchParams.toString();
|
|
149
|
-
return bundledUrl.toString();
|
|
150
77
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
78
|
+
|
|
79
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
80
|
+
var e = new Error(message);
|
|
81
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const NodeContent = ({ node, Link, hideMocking, refResolver, maxRefDepth, tryItCorsProxy, tryItCredentialsPolicy, nodeHasChanged, nodeUnsupported, compact, hideTryIt, hideTryItPanel, hideSecurityInfo, hideServerInfo, hideExport, onExportRequest, }) => {
|
|
85
|
+
var _a, _b, _c, _d;
|
|
86
|
+
return (React.createElement(NodeLinkContext.Provider, { value: [node, Link] },
|
|
87
|
+
React.createElement(MarkdownComponentsProvider, { value: {
|
|
88
|
+
a: LinkComponent,
|
|
89
|
+
h2: (_a) => {
|
|
90
|
+
var props = __rest(_a, ["color"]);
|
|
91
|
+
return React.createElement(LinkHeading, Object.assign({ size: 2 }, props));
|
|
92
|
+
},
|
|
93
|
+
h3: (_a) => {
|
|
94
|
+
var props = __rest(_a, ["color"]);
|
|
95
|
+
return React.createElement(LinkHeading, Object.assign({ size: 3 }, props));
|
|
96
|
+
},
|
|
97
|
+
h4: (_a) => {
|
|
98
|
+
var props = __rest(_a, ["color"]);
|
|
99
|
+
return React.createElement(LinkHeading, Object.assign({ size: 4 }, props));
|
|
100
|
+
},
|
|
101
|
+
} },
|
|
102
|
+
React.createElement(MockingProvider, { mockUrl: node.links.mock_url, hideMocking: hideMocking },
|
|
103
|
+
React.createElement(Docs, { nodeType: node.type, nodeData: node.data, nodeTitle: node.title, layoutOptions: {
|
|
104
|
+
compact,
|
|
105
|
+
hideTryIt: hideTryIt,
|
|
106
|
+
hideTryItPanel: hideTryItPanel,
|
|
107
|
+
hideSecurityInfo: hideSecurityInfo,
|
|
108
|
+
hideServerInfo: hideServerInfo,
|
|
109
|
+
hideExport: hideExport ||
|
|
110
|
+
((_b = (_a = node.links.export_url) !== null && _a !== void 0 ? _a : node.links.export_original_file_url) !== null && _b !== void 0 ? _b : node.links.export_bundled_file_url) ===
|
|
111
|
+
undefined,
|
|
112
|
+
}, useNodeForRefResolving: true, refResolver: refResolver, maxRefDepth: maxRefDepth, tryItCorsProxy: tryItCorsProxy, exportProps: [NodeType.HttpService, NodeType.Model].includes(node.type)
|
|
113
|
+
? {
|
|
114
|
+
original: onExportRequest
|
|
115
|
+
? { onPress: () => onExportRequest('original') }
|
|
116
|
+
: { href: (_c = node.links.export_original_file_url) !== null && _c !== void 0 ? _c : node.links.export_url },
|
|
117
|
+
bundled: onExportRequest
|
|
118
|
+
? { onPress: () => onExportRequest('bundled') }
|
|
119
|
+
: { href: (_d = node.links.export_bundled_file_url) !== null && _d !== void 0 ? _d : getBundledUrl(node.links.export_url) },
|
|
120
|
+
}
|
|
121
|
+
: undefined, tryItCredentialsPolicy: tryItCredentialsPolicy, nodeHasChanged: nodeHasChanged, nodeUnsupported: nodeUnsupported })))));
|
|
122
|
+
};
|
|
123
|
+
const NodeLinkContext = React.createContext(undefined);
|
|
124
|
+
const externalRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
|
|
125
|
+
const LinkComponent = ({ children, href, title }) => {
|
|
126
|
+
const ctx = React.useContext(NodeLinkContext);
|
|
127
|
+
if (href && externalRegex.test(href)) {
|
|
128
|
+
return (React.createElement("a", { href: href, target: "_blank", rel: "noreferrer", title: title ? title : undefined }, children));
|
|
129
|
+
}
|
|
130
|
+
if (href && ctx) {
|
|
131
|
+
const [node, Link] = ctx;
|
|
132
|
+
const { fileUri } = getNodeUriParts(node.uri);
|
|
133
|
+
const { fileUri: hrefFileUri } = getNodeUriParts(href);
|
|
134
|
+
let resolvedUri;
|
|
135
|
+
if (hrefFileUri) {
|
|
136
|
+
resolvedUri = resolve(dirname(fileUri), href);
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
resolvedUri = resolve(fileUri, href);
|
|
140
|
+
}
|
|
141
|
+
const [resolvedUriWithoutAnchor, hash] = resolvedUri.split('#');
|
|
142
|
+
const decodedUrl = decodeURIComponent(href);
|
|
143
|
+
const decodedResolvedUriWithoutAnchor = decodeURIComponent(resolvedUriWithoutAnchor);
|
|
144
|
+
const edge = node.outbound_edges.find(edge => edge.uri === decodedUrl || edge.uri === decodedResolvedUriWithoutAnchor);
|
|
145
|
+
if (edge) {
|
|
146
|
+
return React.createElement(Link, { to: `${edge.slug}${hash ? `#${hash}` : ''}` }, children);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
return React.createElement("a", { href: href }, children);
|
|
150
|
+
};
|
|
151
|
+
function getBundledUrl(url) {
|
|
152
|
+
if (url === undefined)
|
|
153
|
+
return undefined;
|
|
154
|
+
const bundledUrl = new URL(url);
|
|
155
|
+
const searchParams = new URLSearchParams(bundledUrl.search);
|
|
156
|
+
searchParams.append('deref', 'optimizedBundle');
|
|
157
|
+
bundledUrl.search = searchParams.toString();
|
|
158
|
+
return bundledUrl.toString();
|
|
159
|
+
}
|
|
160
|
+
const getNodeUriParts = (uri) => {
|
|
161
|
+
const parts = uri.split(/(\.yaml|\.yml|\.json|\.md)/);
|
|
162
|
+
if (parts.length === 1) {
|
|
163
|
+
return { fileUri: '', pointer: parts[0] || '' };
|
|
164
|
+
}
|
|
165
|
+
const fileUri = `${parts[0] || ''}${parts[1] || ''}`;
|
|
166
|
+
return { fileUri, pointer: parts[2] || '' };
|
|
158
167
|
};
|
|
159
168
|
|
|
160
169
|
/*!
|
|
@@ -179,287 +188,287 @@ var faSpinner = {
|
|
|
179
188
|
icon: [512, 512, [], "f110", "M304 48C304 74.51 282.5 96 256 96C229.5 96 208 74.51 208 48C208 21.49 229.5 0 256 0C282.5 0 304 21.49 304 48zM304 464C304 490.5 282.5 512 256 512C229.5 512 208 490.5 208 464C208 437.5 229.5 416 256 416C282.5 416 304 437.5 304 464zM0 256C0 229.5 21.49 208 48 208C74.51 208 96 229.5 96 256C96 282.5 74.51 304 48 304C21.49 304 0 282.5 0 256zM512 256C512 282.5 490.5 304 464 304C437.5 304 416 282.5 416 256C416 229.5 437.5 208 464 208C490.5 208 512 229.5 512 256zM74.98 437C56.23 418.3 56.23 387.9 74.98 369.1C93.73 350.4 124.1 350.4 142.9 369.1C161.6 387.9 161.6 418.3 142.9 437C124.1 455.8 93.73 455.8 74.98 437V437zM142.9 142.9C124.1 161.6 93.73 161.6 74.98 142.9C56.24 124.1 56.24 93.73 74.98 74.98C93.73 56.23 124.1 56.23 142.9 74.98C161.6 93.73 161.6 124.1 142.9 142.9zM369.1 369.1C387.9 350.4 418.3 350.4 437 369.1C455.8 387.9 455.8 418.3 437 437C418.3 455.8 387.9 455.8 369.1 437C350.4 418.3 350.4 387.9 369.1 369.1V369.1z"]
|
|
180
189
|
};
|
|
181
190
|
|
|
182
|
-
const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
183
|
-
const listBoxRef = React.useRef(null);
|
|
184
|
-
const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
|
|
185
|
-
const onKeyDown = React.useCallback(e => {
|
|
186
|
-
var _a;
|
|
187
|
-
if (e.key === 'ArrowDown') {
|
|
188
|
-
e.preventDefault();
|
|
189
|
-
(_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
190
|
-
}
|
|
191
|
-
}, []);
|
|
192
|
-
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 },
|
|
193
|
-
React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
|
|
194
|
-
};
|
|
195
|
-
const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
|
|
196
|
-
const listBoxRef = React.useRef(null);
|
|
197
|
-
const onSelectionChange = React.useCallback(keys => {
|
|
198
|
-
const selectedId = keys.values().next().value;
|
|
199
|
-
const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
|
|
200
|
-
if (selectedResult) {
|
|
201
|
-
onClick(selectedResult);
|
|
202
|
-
}
|
|
203
|
-
}, [searchResults, onClick]);
|
|
204
|
-
return (React.createElement(React.Fragment, null, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
205
|
-
var _a, _b;
|
|
206
|
-
return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
|
|
207
|
-
React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
|
|
208
|
-
React.createElement(Flex, { align: "center" },
|
|
209
|
-
React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
|
|
210
|
-
React.createElement(Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
|
|
211
|
-
React.createElement(Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
|
|
212
|
-
React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
|
|
213
|
-
})) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
|
|
214
|
-
};
|
|
215
|
-
const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
|
|
191
|
+
const SearchImpl = ({ isLoading, search, searchResults, isOpen, onClose, onClick, onSearch }) => {
|
|
192
|
+
const listBoxRef = React.useRef(null);
|
|
193
|
+
const onChange = React.useCallback(e => onSearch(e.currentTarget.value), [onSearch]);
|
|
194
|
+
const onKeyDown = React.useCallback(e => {
|
|
195
|
+
var _a;
|
|
196
|
+
if (e.key === 'ArrowDown') {
|
|
197
|
+
e.preventDefault();
|
|
198
|
+
(_a = listBoxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
199
|
+
}
|
|
200
|
+
}, []);
|
|
201
|
+
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 },
|
|
202
|
+
React.createElement(SearchResultsList, { searchResults: searchResults, onClick: onClick })));
|
|
203
|
+
};
|
|
204
|
+
const SearchResultsList = ({ searchResults, onClick, isEmbedded, showDivider = true, }) => {
|
|
205
|
+
const listBoxRef = React.useRef(null);
|
|
206
|
+
const onSelectionChange = React.useCallback(keys => {
|
|
207
|
+
const selectedId = keys.values().next().value;
|
|
208
|
+
const selectedResult = searchResults === null || searchResults === void 0 ? void 0 : searchResults.find(searchResult => `${searchResult.id}-${searchResult.project_id}` === selectedId);
|
|
209
|
+
if (selectedResult) {
|
|
210
|
+
onClick(selectedResult);
|
|
211
|
+
}
|
|
212
|
+
}, [searchResults, onClick]);
|
|
213
|
+
return (React.createElement(React.Fragment, null, searchResults && searchResults.length > 0 ? (React.createElement(ListBox, { ref: listBoxRef, "aria-label": "Search", overflowY: "auto", h: isEmbedded ? undefined : 80, m: -5, items: searchResults, selectionMode: "single", onSelectionChange: onSelectionChange }, (searchResult) => {
|
|
214
|
+
var _a, _b;
|
|
215
|
+
return (React.createElement(ListBoxItem, { key: `${searchResult.id}-${searchResult.project_id}`, textValue: searchResult.title },
|
|
216
|
+
React.createElement(Box, { p: 3, borderB: !showDivider ? undefined : true },
|
|
217
|
+
React.createElement(Flex, { align: "center" },
|
|
218
|
+
React.createElement(Box, { as: Icon, w: 4, icon: NodeTypeIconDefs[searchResult.type], style: { color: NodeTypeColors[searchResult.type] } }),
|
|
219
|
+
React.createElement(Box, { flex: 1, fontSize: "lg", dangerouslySetInnerHTML: { __html: (_a = searchResult.highlighted.name) !== null && _a !== void 0 ? _a : '' }, fontWeight: "medium", textOverflow: "overflow-ellipsis", mx: 2 }),
|
|
220
|
+
React.createElement(Box, { fontSize: "sm", color: "muted" }, searchResult.project_name)),
|
|
221
|
+
React.createElement(Box, { dangerouslySetInnerHTML: { __html: (_b = searchResult.highlighted.summary) !== null && _b !== void 0 ? _b : '' }, color: "muted", fontSize: "sm", mt: 1, ml: 6 }))));
|
|
222
|
+
})) : (React.createElement(Flex, { w: "full", h: 80, align: "center", justify: "center", m: -5 }, "No search results"))));
|
|
223
|
+
};
|
|
224
|
+
const SearchResults = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchResultsList);
|
|
216
225
|
const Search = flow(withStyles, withPersistenceBoundary, withMosaicProvider, withQueryClientProvider)(SearchImpl);
|
|
217
226
|
|
|
218
|
-
const TableOfContents = (_a) => {
|
|
219
|
-
var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
|
|
220
|
-
return (React.createElement(Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
|
|
221
|
-
React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
|
|
222
|
-
React.createElement(TableOfContents$1, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
|
|
223
|
-
tableOfContents.hide_powered_by ? null : (React.createElement(PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
|
|
227
|
+
const TableOfContents = (_a) => {
|
|
228
|
+
var { tableOfContents, activeId, Link, collapseTableOfContents = false, externalScrollbar, isInResponsiveMode = false, onLinkClick } = _a, boxProps = __rest(_a, ["tableOfContents", "activeId", "Link", "collapseTableOfContents", "externalScrollbar", "isInResponsiveMode", "onLinkClick"]);
|
|
229
|
+
return (React.createElement(Flex, Object.assign({ bg: isInResponsiveMode ? 'canvas' : 'canvas-100' }, boxProps, { flexDirection: "col", maxH: "full" }),
|
|
230
|
+
React.createElement(Flex, { flexGrow: true, flexShrink: true, overflowY: "auto" },
|
|
231
|
+
React.createElement(TableOfContents$1, { tree: tableOfContents.items, activeId: activeId, Link: Link, maxDepthOpenByDefault: collapseTableOfContents ? 0 : 1, externalScrollbar: externalScrollbar, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode })),
|
|
232
|
+
tableOfContents.hide_powered_by ? null : (React.createElement(PoweredByLink, { source: activeId, pathname: typeof window !== 'undefined' ? window.location.pathname : '', packageType: "elements-dev-portal" }))));
|
|
224
233
|
};
|
|
225
234
|
|
|
226
|
-
const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
|
|
227
|
-
const devPortalCacheKeys = {
|
|
228
|
-
all: [ROOT_CACHE_KEY],
|
|
229
|
-
projects: () => [ROOT_CACHE_KEY, 'projects'],
|
|
230
|
-
project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
|
|
231
|
-
projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
|
|
232
|
-
projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
|
|
233
|
-
branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
|
|
234
|
-
branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
|
|
235
|
-
branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
|
|
236
|
-
branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
|
|
237
|
-
branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
|
|
238
|
-
branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
|
|
239
|
-
branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
|
|
240
|
-
branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
|
|
241
|
-
branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
|
|
242
|
-
search: () => [...devPortalCacheKeys.all, 'search'],
|
|
243
|
-
searchNodes: (filters) => [
|
|
244
|
-
...devPortalCacheKeys.search(),
|
|
245
|
-
filters,
|
|
246
|
-
],
|
|
235
|
+
const ROOT_CACHE_KEY = '@stoplight/elements-dev-portal/client-query';
|
|
236
|
+
const devPortalCacheKeys = {
|
|
237
|
+
all: [ROOT_CACHE_KEY],
|
|
238
|
+
projects: () => [ROOT_CACHE_KEY, 'projects'],
|
|
239
|
+
project: (projectId) => [...devPortalCacheKeys.projects(), projectId],
|
|
240
|
+
projectsList: () => [...devPortalCacheKeys.projects(), 'list'],
|
|
241
|
+
projectDetails: (projectId) => [...devPortalCacheKeys.project(projectId), 'details'],
|
|
242
|
+
branches: (projectId) => [...devPortalCacheKeys.project(projectId), 'branches'],
|
|
243
|
+
branch: (projectId, branch) => [...devPortalCacheKeys.branches(projectId), branch],
|
|
244
|
+
branchesList: (projectId) => [...devPortalCacheKeys.branches(projectId), 'list'],
|
|
245
|
+
branchDetails: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'details'],
|
|
246
|
+
branchTOC: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'toc'],
|
|
247
|
+
branchNodes: (projectId, branch) => [...devPortalCacheKeys.branch(projectId, branch), 'nodes'],
|
|
248
|
+
branchNode: (projectId, branch, node) => [...devPortalCacheKeys.branchNodes(projectId, branch), node],
|
|
249
|
+
branchNodesList: (projectId, branch) => [...devPortalCacheKeys.branchNodes(projectId, branch), 'list'],
|
|
250
|
+
branchNodeDetails: (projectId, branch, node) => [...devPortalCacheKeys.branchNode(projectId, branch, node), 'details'],
|
|
251
|
+
search: () => [...devPortalCacheKeys.all, 'search'],
|
|
252
|
+
searchNodes: (filters) => [
|
|
253
|
+
...devPortalCacheKeys.search(),
|
|
254
|
+
filters,
|
|
255
|
+
],
|
|
247
256
|
};
|
|
248
257
|
|
|
249
|
-
const Forbidden = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
|
|
250
|
-
React__default.createElement(VStack, { spacing: 4, align: "center" },
|
|
251
|
-
React__default.createElement(Heading, { size: 1 }, "Forbidden"),
|
|
258
|
+
const Forbidden = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
|
|
259
|
+
React__default.createElement(VStack, { spacing: 4, align: "center" },
|
|
260
|
+
React__default.createElement(Heading, { size: 1 }, "Forbidden"),
|
|
252
261
|
React__default.createElement(Box, { as: "p" }, "You don't have permission to access this resource"))));
|
|
253
262
|
|
|
254
|
-
const Loading = () => (React__default.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
|
|
263
|
+
const Loading = () => (React__default.createElement(Flex, { justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted" },
|
|
255
264
|
React__default.createElement(Icon, { icon: faCircleNotch, size: "3x", spin: true })));
|
|
256
265
|
|
|
257
|
-
const NotFound = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
|
|
258
|
-
React__default.createElement(VStack, { spacing: 4, align: "center" },
|
|
259
|
-
React__default.createElement(Heading, { size: 1 }, "Not Found"),
|
|
266
|
+
const NotFound = () => (React__default.createElement(Flex, { align: "center", justify: "center", flexGrow: true },
|
|
267
|
+
React__default.createElement(VStack, { spacing: 4, align: "center" },
|
|
268
|
+
React__default.createElement(Heading, { size: 1 }, "Not Found"),
|
|
260
269
|
React__default.createElement(Box, { as: "p" }, "Could not find what you are looking for"))));
|
|
261
270
|
|
|
262
|
-
const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
|
|
263
|
-
React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
|
|
271
|
+
const UpgradeToStarter = () => (React__default.createElement(Flex, { as: "a", href: "https://stoplight.io/pricing/", target: "_blank", rel: "noreferrer noopener", justify: "center", alignItems: "center", w: "full", minH: "screen", color: "muted", flexDirection: "col" },
|
|
272
|
+
React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
|
|
264
273
|
React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
|
|
265
274
|
|
|
266
|
-
const appVersion = '2.3.
|
|
275
|
+
const appVersion = '2.3.4';
|
|
267
276
|
|
|
268
|
-
class ResponseError extends Error {
|
|
269
|
-
constructor(message, responseCode) {
|
|
270
|
-
super(message);
|
|
271
|
-
this.name = 'ResponseError';
|
|
272
|
-
this.code = responseCode;
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
276
|
-
const encodedNodeSlug = encodeURIComponent(nodeSlug);
|
|
277
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
278
|
-
const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
|
|
279
|
-
const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
|
|
280
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
|
|
281
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
282
|
-
});
|
|
283
|
-
const data = yield response.json();
|
|
284
|
-
if (!response.ok) {
|
|
285
|
-
if (response.status === 402) {
|
|
286
|
-
throw new ResponseError('Payment Required', response.status);
|
|
287
|
-
}
|
|
288
|
-
else if (response.status === 403) {
|
|
289
|
-
throw new ResponseError('Forbidden', response.status);
|
|
290
|
-
}
|
|
291
|
-
else {
|
|
292
|
-
throw new ResponseError('Something went wrong', response.status);
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
return data;
|
|
277
|
+
class ResponseError extends Error {
|
|
278
|
+
constructor(message, responseCode) {
|
|
279
|
+
super(message);
|
|
280
|
+
this.name = 'ResponseError';
|
|
281
|
+
this.code = responseCode;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
const getNodeContent = ({ nodeSlug, projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
285
|
+
const encodedNodeSlug = encodeURIComponent(nodeSlug);
|
|
286
|
+
const encodedProjectId = encodeURIComponent(projectId);
|
|
287
|
+
const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
|
|
288
|
+
const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
|
|
289
|
+
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/nodes/${encodedNodeSlug}${branchQuery}`, {
|
|
290
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
291
|
+
});
|
|
292
|
+
const data = yield response.json();
|
|
293
|
+
if (!response.ok) {
|
|
294
|
+
if (response.status === 402) {
|
|
295
|
+
throw new ResponseError('Payment Required', response.status);
|
|
296
|
+
}
|
|
297
|
+
else if (response.status === 403) {
|
|
298
|
+
throw new ResponseError('Forbidden', response.status);
|
|
299
|
+
}
|
|
300
|
+
else {
|
|
301
|
+
throw new ResponseError('Something went wrong', response.status);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
return data;
|
|
296
305
|
});
|
|
297
306
|
|
|
298
|
-
const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
299
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
300
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
|
|
301
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
302
|
-
});
|
|
303
|
-
const data = yield response.json();
|
|
304
|
-
if (!response.ok) {
|
|
305
|
-
throw new Error(data);
|
|
306
|
-
}
|
|
307
|
-
return data;
|
|
307
|
+
const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
308
|
+
const encodedProjectId = encodeURIComponent(projectId);
|
|
309
|
+
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/branches`, {
|
|
310
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
311
|
+
});
|
|
312
|
+
const data = yield response.json();
|
|
313
|
+
if (!response.ok) {
|
|
314
|
+
throw new Error(data);
|
|
315
|
+
}
|
|
316
|
+
return data;
|
|
308
317
|
});
|
|
309
318
|
|
|
310
|
-
function useGetBranches({ projectId }) {
|
|
311
|
-
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
312
|
-
return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
|
|
313
|
-
enabled: projectId ? true : false,
|
|
314
|
-
});
|
|
319
|
+
function useGetBranches({ projectId }) {
|
|
320
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
321
|
+
return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
|
|
322
|
+
enabled: projectId ? true : false,
|
|
323
|
+
});
|
|
315
324
|
}
|
|
316
325
|
|
|
317
|
-
function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
|
|
318
|
-
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
319
|
-
return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
|
|
326
|
+
function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
|
|
327
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
328
|
+
return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, isLoggedIn], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
|
|
320
329
|
}
|
|
321
330
|
|
|
322
|
-
const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
323
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
324
|
-
const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
|
|
325
|
-
const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
|
|
326
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
|
|
327
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
328
|
-
});
|
|
329
|
-
const data = yield response.json();
|
|
330
|
-
if (!response.ok) {
|
|
331
|
-
throw new Error(data);
|
|
332
|
-
}
|
|
333
|
-
return data;
|
|
331
|
+
const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
332
|
+
const encodedProjectId = encodeURIComponent(projectId);
|
|
333
|
+
const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
|
|
334
|
+
const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
|
|
335
|
+
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
|
|
336
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
337
|
+
});
|
|
338
|
+
const data = yield response.json();
|
|
339
|
+
if (!response.ok) {
|
|
340
|
+
throw new Error(data);
|
|
341
|
+
}
|
|
342
|
+
return data;
|
|
334
343
|
});
|
|
335
344
|
|
|
336
|
-
function useGetTableOfContents({ projectId, branchSlug }) {
|
|
337
|
-
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
338
|
-
return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
|
|
345
|
+
function useGetTableOfContents({ projectId, branchSlug }) {
|
|
346
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
347
|
+
return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, isLoggedIn], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
|
|
339
348
|
}
|
|
340
349
|
|
|
341
|
-
const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
342
|
-
const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
|
|
343
|
-
const branchSlug = decodeURIComponent(encodedBranchSlug);
|
|
344
|
-
const history = useHistory();
|
|
345
|
-
const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
|
|
346
|
-
const { data: branches } = useGetBranches({ projectId });
|
|
347
|
-
const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
|
|
348
|
-
nodeSlug,
|
|
349
|
-
projectId,
|
|
350
|
-
branchSlug,
|
|
351
|
-
});
|
|
352
|
-
const container = React.useRef(null);
|
|
353
|
-
if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
|
|
354
|
-
const firstNode = findFirstNode(tableOfContents.items);
|
|
355
|
-
if (firstNode) {
|
|
356
|
-
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
let elem;
|
|
360
|
-
if (isLoadingNode || !isTocFetched) {
|
|
361
|
-
elem = React.createElement(Loading, null);
|
|
362
|
-
}
|
|
363
|
-
else if (isError) {
|
|
364
|
-
if (nodeError instanceof ResponseError) {
|
|
365
|
-
if (nodeError.code === 402) {
|
|
366
|
-
elem = React.createElement(UpgradeToStarter, null);
|
|
367
|
-
}
|
|
368
|
-
else if (nodeError.code === 403) {
|
|
369
|
-
elem = React.createElement(Forbidden, null);
|
|
370
|
-
}
|
|
371
|
-
else {
|
|
372
|
-
elem = React.createElement(NotFound, null);
|
|
373
|
-
}
|
|
374
|
-
}
|
|
375
|
-
else {
|
|
376
|
-
elem = React.createElement(NotFound, null);
|
|
377
|
-
}
|
|
378
|
-
}
|
|
379
|
-
else if (!node) {
|
|
380
|
-
elem = React.createElement(NotFound, null);
|
|
381
|
-
}
|
|
382
|
-
else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
|
|
383
|
-
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
|
|
384
|
-
}
|
|
385
|
-
else {
|
|
386
|
-
elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
|
|
387
|
-
}
|
|
388
|
-
const handleTocClick = () => {
|
|
389
|
-
if (container.current) {
|
|
390
|
-
container.current.scrollIntoView();
|
|
391
|
-
}
|
|
392
|
-
};
|
|
393
|
-
return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
|
|
394
|
-
branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
|
|
395
|
-
const encodedBranchSlug = encodeURIComponent(branch.slug);
|
|
396
|
-
history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
|
|
397
|
-
} })) : null,
|
|
398
|
-
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));
|
|
399
|
-
};
|
|
400
|
-
const StoplightProjectRouter = (_a) => {
|
|
401
|
-
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
402
|
-
const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
|
|
403
|
-
return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
404
|
-
React.createElement(RouterTypeContext.Provider, { value: router },
|
|
405
|
-
React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
406
|
-
React.createElement(Switch, null,
|
|
407
|
-
React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
|
|
408
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
409
|
-
React.createElement(Route, { path: "/:nodeSlug+", exact: true },
|
|
410
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
411
|
-
React.createElement(Route, { path: "/", exact: true },
|
|
412
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
|
|
413
|
-
};
|
|
350
|
+
const StoplightProjectImpl = ({ projectId, hideTryIt, hideSecurityInfo, hideServerInfo, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
351
|
+
const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
|
|
352
|
+
const branchSlug = decodeURIComponent(encodedBranchSlug);
|
|
353
|
+
const history = useHistory();
|
|
354
|
+
const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
|
|
355
|
+
const { data: branches } = useGetBranches({ projectId });
|
|
356
|
+
const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
|
|
357
|
+
nodeSlug,
|
|
358
|
+
projectId,
|
|
359
|
+
branchSlug,
|
|
360
|
+
});
|
|
361
|
+
const container = React.useRef(null);
|
|
362
|
+
if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
|
|
363
|
+
const firstNode = findFirstNode(tableOfContents.items);
|
|
364
|
+
if (firstNode) {
|
|
365
|
+
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
let elem;
|
|
369
|
+
if (isLoadingNode || !isTocFetched) {
|
|
370
|
+
elem = React.createElement(Loading, null);
|
|
371
|
+
}
|
|
372
|
+
else if (isError) {
|
|
373
|
+
if (nodeError instanceof ResponseError) {
|
|
374
|
+
if (nodeError.code === 402) {
|
|
375
|
+
elem = React.createElement(UpgradeToStarter, null);
|
|
376
|
+
}
|
|
377
|
+
else if (nodeError.code === 403) {
|
|
378
|
+
elem = React.createElement(Forbidden, null);
|
|
379
|
+
}
|
|
380
|
+
else {
|
|
381
|
+
elem = React.createElement(NotFound, null);
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
else {
|
|
385
|
+
elem = React.createElement(NotFound, null);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
else if (!node) {
|
|
389
|
+
elem = React.createElement(NotFound, null);
|
|
390
|
+
}
|
|
391
|
+
else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
|
|
392
|
+
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
|
|
393
|
+
}
|
|
394
|
+
else {
|
|
395
|
+
elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, hideSecurityInfo: hideSecurityInfo, hideServerInfo: hideServerInfo, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
|
|
396
|
+
}
|
|
397
|
+
const handleTocClick = () => {
|
|
398
|
+
if (container.current) {
|
|
399
|
+
container.current.scrollIntoView();
|
|
400
|
+
}
|
|
401
|
+
};
|
|
402
|
+
return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
|
|
403
|
+
branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
|
|
404
|
+
const encodedBranchSlug = encodeURIComponent(branch.slug);
|
|
405
|
+
history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
|
|
406
|
+
} })) : null,
|
|
407
|
+
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));
|
|
408
|
+
};
|
|
409
|
+
const StoplightProjectRouter = (_a) => {
|
|
410
|
+
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
411
|
+
const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
|
|
412
|
+
return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
413
|
+
React.createElement(RouterTypeContext.Provider, { value: router },
|
|
414
|
+
React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
415
|
+
React.createElement(Switch, null,
|
|
416
|
+
React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
|
|
417
|
+
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
418
|
+
React.createElement(Route, { path: "/:nodeSlug+", exact: true },
|
|
419
|
+
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
420
|
+
React.createElement(Route, { path: "/", exact: true },
|
|
421
|
+
React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
|
|
422
|
+
};
|
|
414
423
|
const StoplightProject = withStyles(StoplightProjectRouter);
|
|
415
424
|
|
|
416
|
-
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
417
|
-
const queryParams = [];
|
|
418
|
-
let fetchedWorkspaceId = workspaceId || '';
|
|
419
|
-
if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
|
|
420
|
-
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
421
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
422
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
423
|
-
});
|
|
424
|
-
const data = yield response.json();
|
|
425
|
-
fetchedWorkspaceId = data.workspace.id;
|
|
426
|
-
}
|
|
427
|
-
if (projectIds && projectIds.length) {
|
|
428
|
-
queryParams.push(...projectIds.map((projectId, index) => {
|
|
429
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
430
|
-
return `project_ids[${index}]=${encodedProjectId}`;
|
|
431
|
-
}));
|
|
432
|
-
}
|
|
433
|
-
if (search) {
|
|
434
|
-
const encodedSearch = encodeURIComponent(search);
|
|
435
|
-
queryParams.push(`search=${encodedSearch}`);
|
|
436
|
-
}
|
|
437
|
-
if (branchSlug) {
|
|
438
|
-
const encodedBranchSlug = encodeURIComponent(branchSlug);
|
|
439
|
-
queryParams.push(`branch=${encodedBranchSlug}`);
|
|
440
|
-
}
|
|
441
|
-
const query = queryParams.length ? `?${queryParams.join('&')}` : '';
|
|
442
|
-
const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
|
|
443
|
-
const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
|
|
444
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
445
|
-
});
|
|
446
|
-
const data = yield response.json();
|
|
447
|
-
if (!response.ok) {
|
|
448
|
-
throw new Error(data);
|
|
449
|
-
}
|
|
450
|
-
return data;
|
|
425
|
+
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
426
|
+
const queryParams = [];
|
|
427
|
+
let fetchedWorkspaceId = workspaceId || '';
|
|
428
|
+
if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
|
|
429
|
+
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
430
|
+
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
431
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
432
|
+
});
|
|
433
|
+
const data = yield response.json();
|
|
434
|
+
fetchedWorkspaceId = data.workspace.id;
|
|
435
|
+
}
|
|
436
|
+
if (projectIds && projectIds.length) {
|
|
437
|
+
queryParams.push(...projectIds.map((projectId, index) => {
|
|
438
|
+
const encodedProjectId = encodeURIComponent(projectId);
|
|
439
|
+
return `project_ids[${index}]=${encodedProjectId}`;
|
|
440
|
+
}));
|
|
441
|
+
}
|
|
442
|
+
if (search) {
|
|
443
|
+
const encodedSearch = encodeURIComponent(search);
|
|
444
|
+
queryParams.push(`search=${encodedSearch}`);
|
|
445
|
+
}
|
|
446
|
+
if (branchSlug) {
|
|
447
|
+
const encodedBranchSlug = encodeURIComponent(branchSlug);
|
|
448
|
+
queryParams.push(`branch=${encodedBranchSlug}`);
|
|
449
|
+
}
|
|
450
|
+
const query = queryParams.length ? `?${queryParams.join('&')}` : '';
|
|
451
|
+
const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
|
|
452
|
+
const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
|
|
453
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
454
|
+
});
|
|
455
|
+
const data = yield response.json();
|
|
456
|
+
if (!response.ok) {
|
|
457
|
+
throw new Error(data);
|
|
458
|
+
}
|
|
459
|
+
return data;
|
|
451
460
|
});
|
|
452
461
|
|
|
453
|
-
const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
454
|
-
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
455
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
456
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
457
|
-
});
|
|
458
|
-
const data = yield response.json();
|
|
459
|
-
if (!response.ok) {
|
|
460
|
-
throw new Error(data);
|
|
461
|
-
}
|
|
462
|
-
return data;
|
|
462
|
+
const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
463
|
+
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
464
|
+
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
465
|
+
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
466
|
+
});
|
|
467
|
+
const data = yield response.json();
|
|
468
|
+
if (!response.ok) {
|
|
469
|
+
throw new Error(data);
|
|
470
|
+
}
|
|
471
|
+
return data;
|
|
463
472
|
});
|
|
464
473
|
|
|
465
474
|
/**
|
|
@@ -675,7 +684,7 @@ function useStateIgnoreCallback(initialState) {
|
|
|
675
684
|
return [state, setStateIgnoreCallback];
|
|
676
685
|
}
|
|
677
686
|
function useDebounce(value, delay, options) {
|
|
678
|
-
var eq =
|
|
687
|
+
var eq = valueEquality;
|
|
679
688
|
var _a = useStateIgnoreCallback(value), state = _a[0], dispatch = _a[1];
|
|
680
689
|
var debounced = useDebouncedCallback(useCallback(function (value) { return dispatch(value); }, [dispatch]), delay, options);
|
|
681
690
|
var previousValue = useRef(value);
|
|
@@ -689,19 +698,19 @@ function useDebounce(value, delay, options) {
|
|
|
689
698
|
return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
|
|
690
699
|
}
|
|
691
700
|
|
|
692
|
-
function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
|
|
693
|
-
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
694
|
-
const [debounceSearch] = useDebounce(search, 500);
|
|
695
|
-
return useQuery([
|
|
696
|
-
...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
|
|
697
|
-
platformUrl,
|
|
698
|
-
isLoggedIn,
|
|
699
|
-
], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
701
|
+
function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
|
|
702
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
703
|
+
const [debounceSearch] = useDebounce(search, 500);
|
|
704
|
+
return useQuery([
|
|
705
|
+
...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
|
|
706
|
+
platformUrl,
|
|
707
|
+
isLoggedIn,
|
|
708
|
+
], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
700
709
|
}
|
|
701
710
|
|
|
702
|
-
function useGetWorkspace({ projectIds }) {
|
|
703
|
-
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
704
|
-
return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
|
|
711
|
+
function useGetWorkspace({ projectIds }) {
|
|
712
|
+
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
713
|
+
return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
|
|
705
714
|
}
|
|
706
715
|
|
|
707
716
|
export { BranchSelector, DevPortalProvider, NodeContent, ResponseError, Search, SearchResults, StoplightProject, TableOfContents, devPortalCacheKeys, getBranches, getNodeContent, getNodes, getTableOfContents, getWorkspace, useGetBranches, useGetNodeContent, useGetNodes, useGetTableOfContents, useGetWorkspace };
|