@stoplight/elements-dev-portal 2.1.1 → 2.1.3
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/DevPortalProvider/index.d.ts +1 -0
- package/index.esm.js +155 -189
- package/index.js +152 -186
- package/index.mjs +155 -189
- package/package.json +3 -3
- package/styles.min.css +1 -1
- package/version.d.ts +1 -1
- package/web-components.min.js +1 -1
- package/web-components.min.js.LICENSE.txt +0 -10
package/index.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading
|
|
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 { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, RouterTypeContext,
|
|
4
|
+
import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, RouterTypeContext, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
|
|
5
5
|
import { resolve, dirname } from '@stoplight/path';
|
|
6
6
|
import { NodeType } from '@stoplight/types';
|
|
7
7
|
import flow from 'lodash/flow.js';
|
|
8
|
-
import {
|
|
8
|
+
import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
|
|
9
9
|
import { useQuery } from 'react-query';
|
|
10
10
|
|
|
11
11
|
const BranchSelector = ({ branchSlug, branches, onChange }) => {
|
|
@@ -32,8 +32,8 @@ const BranchSelector = ({ branchSlug, branches, onChange }) => {
|
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
const PlatformContext = React.createContext({ platformUrl: 'https://stoplight.io' });
|
|
35
|
-
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, children, }) => {
|
|
36
|
-
return React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken } }, children);
|
|
35
|
+
const PlatformProvider = ({ platformUrl = 'https://stoplight.io', platformAuthToken, isLoggedIn, children, }) => {
|
|
36
|
+
return (React.createElement(PlatformContext.Provider, { value: { platformUrl, platformAuthToken, isLoggedIn } }, children));
|
|
37
37
|
};
|
|
38
38
|
const DevPortalProvider = withPersistenceBoundary(withQueryClientProvider(withMosaicProvider(PlatformProvider)));
|
|
39
39
|
|
|
@@ -259,29 +259,11 @@ const NotFound = () => (React__default.createElement(Flex, { align: "center", ju
|
|
|
259
259
|
React__default.createElement(Heading, { size: 1 }, "Not Found"),
|
|
260
260
|
React__default.createElement(Box, { as: "p" }, "Could not find what you are looking for"))));
|
|
261
261
|
|
|
262
|
-
const SearchOverlay = ({ isFetching, search, setSearch, data, toc, nodeSlug, projectSlug, branchSlug, isSearchShowing, onClose, onClick, }) => {
|
|
263
|
-
return (React.createElement(Modal, { isOpen: isSearchShowing, onClose: onClose },
|
|
264
|
-
React.createElement(Box, { className: "sl-overlay", bg: "canvas", overflowY: "scroll", "data-test": "search-overlay" },
|
|
265
|
-
React.createElement(Flex, { alignItems: "center", h: "3xl", px: 7, bg: "canvas", borderB: true, pos: "sticky", zIndex: 20 },
|
|
266
|
-
React.createElement(Flex, { w: "full" },
|
|
267
|
-
React.createElement(Box, { pt: 1, pr: 2 },
|
|
268
|
-
React.createElement(Button, { appearance: "minimal", onClick: () => {
|
|
269
|
-
onClose();
|
|
270
|
-
}, "data-test": "search-overlay-back-button" },
|
|
271
|
-
React.createElement(Icon, { icon: ['fas', 'arrow-left'], color: "gray", size: "lg" }))),
|
|
272
|
-
React.createElement(Input, { border: true, "data-test": "docs-search-input", display: "inline-block", appearance: "minimal", icon: React.createElement(Box, { as: Icon, ml: 1, icon: isFetching ? faSpinner : faSearch, spin: isFetching }), autoFocus: true, placeholder: projectSlug ? 'Search within the project' : 'Search...', value: search, onChange: e => {
|
|
273
|
-
setSearch(e.currentTarget.value);
|
|
274
|
-
}, type: "search", w: "full", size: "lg" }))),
|
|
275
|
-
React.createElement(Box, { px: 5, py: toc && !search ? 0 : 5, "data-test": "responsive-project-toc" },
|
|
276
|
-
toc && !search && projectSlug && (React.createElement(TableOfContents, { tableOfContents: Object.assign(Object.assign({}, toc), { hide_powered_by: true }), activeId: nodeSlug || '', Link: Link, onLinkClick: onClick })),
|
|
277
|
-
search && (React.createElement(SearchResults, { searchResults: data, onClick: item => onClick(item), isEmbedded: true, showDivider: false }))))));
|
|
278
|
-
};
|
|
279
|
-
|
|
280
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" },
|
|
281
263
|
React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
|
|
282
264
|
React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
|
|
283
265
|
|
|
284
|
-
const appVersion = '2.1.
|
|
266
|
+
const appVersion = '2.1.3';
|
|
285
267
|
|
|
286
268
|
class ResponseError extends Error {
|
|
287
269
|
constructor(message, responseCode) {
|
|
@@ -326,17 +308,160 @@ const getBranches = ({ projectId, platformUrl = 'https://stoplight.io', platform
|
|
|
326
308
|
});
|
|
327
309
|
|
|
328
310
|
function useGetBranches({ projectId }) {
|
|
329
|
-
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
330
|
-
return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl,
|
|
311
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
312
|
+
return useQuery([...devPortalCacheKeys.branchesList(projectId), platformUrl, isLoggedIn], () => getBranches({ projectId, platformUrl, platformAuthToken }), {
|
|
331
313
|
enabled: projectId ? true : false,
|
|
332
314
|
});
|
|
333
315
|
}
|
|
334
316
|
|
|
335
317
|
function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
|
|
336
|
-
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
337
|
-
return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl,
|
|
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 });
|
|
320
|
+
}
|
|
321
|
+
|
|
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;
|
|
334
|
+
});
|
|
335
|
+
|
|
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 });
|
|
338
339
|
}
|
|
339
340
|
|
|
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
|
+
};
|
|
414
|
+
const StoplightProject = withStyles(StoplightProjectRouter);
|
|
415
|
+
|
|
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;
|
|
451
|
+
});
|
|
452
|
+
|
|
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;
|
|
463
|
+
});
|
|
464
|
+
|
|
340
465
|
/**
|
|
341
466
|
* Creates a debounced function that delays invoking `func` until after `wait`
|
|
342
467
|
* milliseconds have elapsed since the last time the debounced function was
|
|
@@ -564,175 +689,16 @@ function useDebounce(value, delay, options) {
|
|
|
564
689
|
return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
|
|
565
690
|
}
|
|
566
691
|
|
|
567
|
-
const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
568
|
-
const queryParams = [];
|
|
569
|
-
let fetchedWorkspaceId = workspaceId || '';
|
|
570
|
-
if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
|
|
571
|
-
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
572
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
573
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
574
|
-
});
|
|
575
|
-
const data = yield response.json();
|
|
576
|
-
fetchedWorkspaceId = data.workspace.id;
|
|
577
|
-
}
|
|
578
|
-
if (projectIds && projectIds.length) {
|
|
579
|
-
queryParams.push(...projectIds.map((projectId, index) => {
|
|
580
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
581
|
-
return `project_ids[${index}]=${encodedProjectId}`;
|
|
582
|
-
}));
|
|
583
|
-
}
|
|
584
|
-
if (search) {
|
|
585
|
-
const encodedSearch = encodeURIComponent(search);
|
|
586
|
-
queryParams.push(`search=${encodedSearch}`);
|
|
587
|
-
}
|
|
588
|
-
if (branchSlug) {
|
|
589
|
-
const encodedBranchSlug = encodeURIComponent(branchSlug);
|
|
590
|
-
queryParams.push(`branch=${encodedBranchSlug}`);
|
|
591
|
-
}
|
|
592
|
-
const query = queryParams.length ? `?${queryParams.join('&')}` : '';
|
|
593
|
-
const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
|
|
594
|
-
const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
|
|
595
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
596
|
-
});
|
|
597
|
-
const data = yield response.json();
|
|
598
|
-
if (!response.ok) {
|
|
599
|
-
throw new Error(data);
|
|
600
|
-
}
|
|
601
|
-
return data;
|
|
602
|
-
});
|
|
603
|
-
|
|
604
692
|
function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
|
|
605
|
-
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
693
|
+
const { platformUrl, platformAuthToken, isLoggedIn } = React.useContext(PlatformContext);
|
|
606
694
|
const [debounceSearch] = useDebounce(search, 500);
|
|
607
695
|
return useQuery([
|
|
608
696
|
...devPortalCacheKeys.searchNodes({ projectIds, branchSlug: branch, workspaceId, search: debounceSearch }),
|
|
609
697
|
platformUrl,
|
|
610
|
-
|
|
698
|
+
isLoggedIn,
|
|
611
699
|
], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
|
|
612
700
|
}
|
|
613
701
|
|
|
614
|
-
const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
615
|
-
const encodedProjectId = encodeURIComponent(projectId);
|
|
616
|
-
const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
|
|
617
|
-
const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
|
|
618
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
|
|
619
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
620
|
-
});
|
|
621
|
-
const data = yield response.json();
|
|
622
|
-
if (!response.ok) {
|
|
623
|
-
throw new Error(data);
|
|
624
|
-
}
|
|
625
|
-
return data;
|
|
626
|
-
});
|
|
627
|
-
|
|
628
|
-
function useGetTableOfContents({ projectId, branchSlug }) {
|
|
629
|
-
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
630
|
-
return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, platformAuthToken], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
|
|
631
|
-
}
|
|
632
|
-
|
|
633
|
-
const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
|
|
634
|
-
const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
|
|
635
|
-
const branchSlug = decodeURIComponent(encodedBranchSlug);
|
|
636
|
-
const history = useHistory();
|
|
637
|
-
const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
|
|
638
|
-
const { data: branches } = useGetBranches({ projectId });
|
|
639
|
-
const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
|
|
640
|
-
nodeSlug,
|
|
641
|
-
projectId,
|
|
642
|
-
branchSlug,
|
|
643
|
-
});
|
|
644
|
-
const { isOpen, open, close } = useModalState();
|
|
645
|
-
const [search, setSearch] = React.useState('');
|
|
646
|
-
const onSearchResultClick = (item) => {
|
|
647
|
-
close();
|
|
648
|
-
};
|
|
649
|
-
const { isResponsiveLayoutEnabled } = useResponsiveLayout();
|
|
650
|
-
const { data, isFetching } = useGetNodes({
|
|
651
|
-
search,
|
|
652
|
-
projectIds: [projectId],
|
|
653
|
-
pause: !isResponsiveLayoutEnabled,
|
|
654
|
-
});
|
|
655
|
-
const container = React.useRef(null);
|
|
656
|
-
if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
|
|
657
|
-
const firstNode = findFirstNode(tableOfContents.items);
|
|
658
|
-
if (firstNode) {
|
|
659
|
-
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
let elem;
|
|
663
|
-
if (isLoadingNode || !isTocFetched) {
|
|
664
|
-
elem = React.createElement(Loading, null);
|
|
665
|
-
}
|
|
666
|
-
else if (isError) {
|
|
667
|
-
if (nodeError instanceof ResponseError) {
|
|
668
|
-
if (nodeError.code === 402) {
|
|
669
|
-
elem = React.createElement(UpgradeToStarter, null);
|
|
670
|
-
}
|
|
671
|
-
else if (nodeError.code === 403) {
|
|
672
|
-
elem = React.createElement(Forbidden, null);
|
|
673
|
-
}
|
|
674
|
-
else {
|
|
675
|
-
elem = React.createElement(NotFound, null);
|
|
676
|
-
}
|
|
677
|
-
}
|
|
678
|
-
else {
|
|
679
|
-
elem = React.createElement(NotFound, null);
|
|
680
|
-
}
|
|
681
|
-
}
|
|
682
|
-
else if (!node) {
|
|
683
|
-
elem = React.createElement(NotFound, null);
|
|
684
|
-
}
|
|
685
|
-
else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
|
|
686
|
-
return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
|
|
687
|
-
}
|
|
688
|
-
else {
|
|
689
|
-
elem = (React.createElement(React.Fragment, null,
|
|
690
|
-
React.createElement(Button, { "data-test": "show-project-search-overlay", onPress: open, appearance: "default", w: "full", rounded: "lg", borderColor: "light" },
|
|
691
|
-
React.createElement(Icon, { icon: faSearch }),
|
|
692
|
-
React.createElement(Box, { pl: 2 }, node.title)),
|
|
693
|
-
React.createElement(SearchOverlay, { toc: tableOfContents, projectSlug: nodeSlug, branchSlug: branchSlug, nodeSlug: nodeSlug, isFetching: isFetching || !isTocFetched, search: search, setSearch: setSearch, data: data, isSearchShowing: isOpen, onClose: close, onClick: onSearchResultClick }),
|
|
694
|
-
React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
|
|
695
|
-
}
|
|
696
|
-
const handleTocClick = () => {
|
|
697
|
-
if (container.current) {
|
|
698
|
-
container.current.scrollIntoView();
|
|
699
|
-
}
|
|
700
|
-
};
|
|
701
|
-
return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
|
|
702
|
-
branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
|
|
703
|
-
const encodedBranchSlug = encodeURIComponent(branch.slug);
|
|
704
|
-
history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
|
|
705
|
-
} })) : null,
|
|
706
|
-
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));
|
|
707
|
-
};
|
|
708
|
-
const StoplightProjectRouter = (_a) => {
|
|
709
|
-
var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
|
|
710
|
-
const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
|
|
711
|
-
return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
|
|
712
|
-
React.createElement(RouterTypeContext.Provider, { value: router },
|
|
713
|
-
React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
|
|
714
|
-
React.createElement(Switch, null,
|
|
715
|
-
React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
|
|
716
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
717
|
-
React.createElement(Route, { path: "/:nodeSlug+", exact: true },
|
|
718
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))),
|
|
719
|
-
React.createElement(Route, { path: "/", exact: true },
|
|
720
|
-
React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
|
|
721
|
-
};
|
|
722
|
-
const StoplightProject = withStyles(StoplightProjectRouter);
|
|
723
|
-
|
|
724
|
-
const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
|
|
725
|
-
const encodedProjectId = encodeURIComponent(projectIds[0]);
|
|
726
|
-
const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
|
|
727
|
-
headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
|
|
728
|
-
});
|
|
729
|
-
const data = yield response.json();
|
|
730
|
-
if (!response.ok) {
|
|
731
|
-
throw new Error(data);
|
|
732
|
-
}
|
|
733
|
-
return data;
|
|
734
|
-
});
|
|
735
|
-
|
|
736
702
|
function useGetWorkspace({ projectIds }) {
|
|
737
703
|
const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
|
|
738
704
|
return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stoplight/elements-dev-portal",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "UI components for composing beautiful developer documentation.",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"main": "./index.js",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"react-dom": ">=16.8"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@stoplight/elements-core": "~8.1.
|
|
29
|
+
"@stoplight/elements-core": "~8.1.1",
|
|
30
30
|
"@stoplight/markdown-viewer": "^5.7.0",
|
|
31
|
-
"@stoplight/mosaic": "^1.
|
|
31
|
+
"@stoplight/mosaic": "^1.52.0",
|
|
32
32
|
"@stoplight/path": "^1.3.2",
|
|
33
33
|
"@stoplight/types": "^14.0.0",
|
|
34
34
|
"classnames": "^2.2.6",
|