@stoplight/elements-dev-portal 2.1.0 → 2.1.2

package/index.esm.js

@@ -1,11 +1,11 @@
-import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading, Button, useModalState } from '@stoplight/mosaic';
+import { Menu, FieldButton, Modal, Input, Box, Icon, ListBox, ListBoxItem, Flex, VStack, Heading } from '@stoplight/mosaic';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
-import { withPersistenceBoundary, withQueryClientProvider, withMosaicProvider, MarkdownComponentsProvider, LinkHeading, MockingProvider, Docs, withStyles, NodeTypeIconDefs, NodeTypeColors, TableOfContents as TableOfContents$1, PoweredByLink, useRouter, RouterTypeContext, useResponsiveLayout, findFirstNode, ReactRouterMarkdownLink, SidebarLayout } from '@stoplight/elements-core';
+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';
 import { resolve, dirname } from '@stoplight/path';
 import { NodeType } from '@stoplight/types';
 import flow from 'lodash/flow.js';
-import { Link, Switch, Route, useParams, useHistory, Redirect } from 'react-router-dom';
+import { Switch, Route, useParams, useHistory, Redirect, Link } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 const BranchSelector = ({ branchSlug, branches, onChange }) => {
@@ -23,7 +23,7 @@ const BranchSelector = ({ branchSlug, branches, onChange }) => {
                 onChange: handleChange,
                 value: (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.slug) || '',
                 children: branches.map(branch => ({
-                    label: branch.name || branch.slug,
+                    title: branch.name || branch.slug,
                     value: branch.slug,
                     meta: branch.is_default ? 'Default' : undefined,
                 })),
@@ -259,29 +259,11 @@ const NotFound = () => (React__default.createElement(Flex, { align: "center", ju
         React__default.createElement(Heading, { size: 1 }, "Not Found"),
         React__default.createElement(Box, { as: "p" }, "Could not find what you are looking for"))));
 
-const SearchOverlay = ({ isFetching, search, setSearch, data, toc, nodeSlug, projectSlug, branchSlug, isSearchShowing, onClose, onClick, }) => {
-    return (React.createElement(Modal, { isOpen: isSearchShowing, onClose: onClose },
-        React.createElement(Box, { className: "sl-overlay", bg: "canvas", overflowY: "scroll", "data-test": "search-overlay" },
-            React.createElement(Flex, { alignItems: "center", h: "3xl", px: 7, bg: "canvas", borderB: true, pos: "sticky", zIndex: 20 },
-                React.createElement(Flex, { w: "full" },
-                    React.createElement(Box, { pt: 1, pr: 2 },
-                        React.createElement(Button, { appearance: "minimal", onClick: () => {
-                                onClose();
-                            }, "data-test": "search-overlay-back-button" },
-                            React.createElement(Icon, { icon: ['fas', 'arrow-left'], color: "gray", size: "lg" }))),
-                    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 => {
-                            setSearch(e.currentTarget.value);
-                        }, type: "search", w: "full", size: "lg" }))),
-            React.createElement(Box, { px: 5, py: toc && !search ? 0 : 5, "data-test": "responsive-project-toc" },
-                toc && !search && projectSlug && (React.createElement(TableOfContents, { tableOfContents: Object.assign(Object.assign({}, toc), { hide_powered_by: true }), activeId: nodeSlug || '', Link: Link, onLinkClick: onClick })),
-                search && (React.createElement(SearchResults, { searchResults: data, onClick: item => onClick(item), isEmbedded: true, showDivider: false }))))));
-};
-
 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" },
     React__default.createElement(Icon, { icon: ['fas', 'exclamation-triangle'], size: "4x" }),
     React__default.createElement(Box, { pt: 3 }, "Please upgrade your Stoplight Workspace to the Starter Plan to use Elements Dev Portal in production.")));
 
-const appVersion = '2.1.0';
+const appVersion = '2.1.2';
 
 class ResponseError extends Error {
     constructor(message, responseCode) {
@@ -337,6 +319,149 @@ function useGetNodeContent({ nodeSlug, projectId, branchSlug, }) {
     return useQuery([...devPortalCacheKeys.branchNodeDetails(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : '', nodeSlug), platformUrl, platformAuthToken], () => getNodeContent({ nodeSlug, projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: nodeSlug && projectId ? true : false });
 }
 
+const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedProjectId = encodeURIComponent(projectId);
+    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
+    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
+});
+
+function useGetTableOfContents({ projectId, branchSlug }) {
+    const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
+    return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, platformAuthToken], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
+}
+
+const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
+    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
+    const branchSlug = decodeURIComponent(encodedBranchSlug);
+    const history = useHistory();
+    const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
+    const { data: branches } = useGetBranches({ projectId });
+    const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
+        nodeSlug,
+        projectId,
+        branchSlug,
+    });
+    const container = React.useRef(null);
+    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
+        const firstNode = findFirstNode(tableOfContents.items);
+        if (firstNode) {
+            return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
+        }
+    }
+    let elem;
+    if (isLoadingNode || !isTocFetched) {
+        elem = React.createElement(Loading, null);
+    }
+    else if (isError) {
+        if (nodeError instanceof ResponseError) {
+            if (nodeError.code === 402) {
+                elem = React.createElement(UpgradeToStarter, null);
+            }
+            else if (nodeError.code === 403) {
+                elem = React.createElement(Forbidden, null);
+            }
+            else {
+                elem = React.createElement(NotFound, null);
+            }
+        }
+        else {
+            elem = React.createElement(NotFound, null);
+        }
+    }
+    else if (!node) {
+        elem = React.createElement(NotFound, null);
+    }
+    else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
+        return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
+    }
+    else {
+        elem = (React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy }));
+    }
+    const handleTocClick = () => {
+        if (container.current) {
+            container.current.scrollIntoView();
+        }
+    };
+    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
+            branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
+                    const encodedBranchSlug = encodeURIComponent(branch.slug);
+                    history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
+                } })) : null,
+            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));
+};
+const StoplightProjectRouter = (_a) => {
+    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
+    const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
+    return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
+        React.createElement(RouterTypeContext.Provider, { value: router },
+            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
+                React.createElement(Switch, null,
+                    React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
+                        React.createElement(StoplightProjectImpl, Object.assign({}, props))),
+                    React.createElement(Route, { path: "/:nodeSlug+", exact: true },
+                        React.createElement(StoplightProjectImpl, Object.assign({}, props))),
+                    React.createElement(Route, { path: "/", exact: true },
+                        React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
+};
+const StoplightProject = withStyles(StoplightProjectRouter);
+
+const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const queryParams = [];
+    let fetchedWorkspaceId = workspaceId || '';
+    if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
+        const encodedProjectId = encodeURIComponent(projectIds[0]);
+        const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
+            headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+        });
+        const data = yield response.json();
+        fetchedWorkspaceId = data.workspace.id;
+    }
+    if (projectIds && projectIds.length) {
+        queryParams.push(...projectIds.map((projectId, index) => {
+            const encodedProjectId = encodeURIComponent(projectId);
+            return `project_ids[${index}]=${encodedProjectId}`;
+        }));
+    }
+    if (search) {
+        const encodedSearch = encodeURIComponent(search);
+        queryParams.push(`search=${encodedSearch}`);
+    }
+    if (branchSlug) {
+        const encodedBranchSlug = encodeURIComponent(branchSlug);
+        queryParams.push(`branch=${encodedBranchSlug}`);
+    }
+    const query = queryParams.length ? `?${queryParams.join('&')}` : '';
+    const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
+    const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
+});
+
+const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const encodedProjectId = encodeURIComponent(projectIds[0]);
+    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
+        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
+    });
+    const data = yield response.json();
+    if (!response.ok) {
+        throw new Error(data);
+    }
+    return data;
+});
+
 /**
  * Creates a debounced function that delays invoking `func` until after `wait`
  * milliseconds have elapsed since the last time the debounced function was
@@ -564,43 +689,6 @@ function useDebounce(value, delay, options) {
     return [state, { cancel: debounced.cancel, isPending: debounced.isPending, flush: debounced.flush }];
 }
 
-const getNodes = ({ workspaceId, branchSlug, projectIds, search, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const queryParams = [];
-    let fetchedWorkspaceId = workspaceId || '';
-    if (!workspaceId && (projectIds === null || projectIds === void 0 ? void 0 : projectIds.length)) {
-        const encodedProjectId = encodeURIComponent(projectIds[0]);
-        const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
-            headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-        });
-        const data = yield response.json();
-        fetchedWorkspaceId = data.workspace.id;
-    }
-    if (projectIds && projectIds.length) {
-        queryParams.push(...projectIds.map((projectId, index) => {
-            const encodedProjectId = encodeURIComponent(projectId);
-            return `project_ids[${index}]=${encodedProjectId}`;
-        }));
-    }
-    if (search) {
-        const encodedSearch = encodeURIComponent(search);
-        queryParams.push(`search=${encodedSearch}`);
-    }
-    if (branchSlug) {
-        const encodedBranchSlug = encodeURIComponent(branchSlug);
-        queryParams.push(`branch=${encodedBranchSlug}`);
-    }
-    const query = queryParams.length ? `?${queryParams.join('&')}` : '';
-    const encodedWorkspaceId = encodeURIComponent(fetchedWorkspaceId);
-    const response = yield fetch(`${platformUrl}/api/v1/workspaces/${encodedWorkspaceId}/nodes${query}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
-});
-
 function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
     const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
     const [debounceSearch] = useDebounce(search, 500);
@@ -611,128 +699,6 @@ function useGetNodes({ search, workspaceId, projectIds, branch, pause, }) {
     ], () => getNodes({ workspaceId, projectIds, branchSlug: branch, search: debounceSearch, platformUrl, platformAuthToken }), { enabled: !pause, keepPreviousData: true });
 }
 
-const getTableOfContents = ({ projectId, branchSlug, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedProjectId = encodeURIComponent(projectId);
-    const encodedBranchSlug = branchSlug ? encodeURIComponent(branchSlug) : '';
-    const branchQuery = encodedBranchSlug ? `?branch=${encodedBranchSlug}` : '';
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}/table-of-contents${branchQuery}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
-});
-
-function useGetTableOfContents({ projectId, branchSlug }) {
-    const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
-    return useQuery([...devPortalCacheKeys.branchTOC(projectId, branchSlug !== null && branchSlug !== void 0 ? branchSlug : ''), platformUrl, platformAuthToken], () => getTableOfContents({ projectId, branchSlug, platformUrl, platformAuthToken }), { enabled: projectId ? true : false });
-}
-
-const StoplightProjectImpl = ({ projectId, hideTryIt, hideMocking, hideExport, collapseTableOfContents = false, tryItCredentialsPolicy, tryItCorsProxy, }) => {
-    const { branchSlug: encodedBranchSlug = '', nodeSlug = '' } = useParams();
-    const branchSlug = decodeURIComponent(encodedBranchSlug);
-    const history = useHistory();
-    const { data: tableOfContents, isFetched: isTocFetched } = useGetTableOfContents({ projectId, branchSlug });
-    const { data: branches } = useGetBranches({ projectId });
-    const { data: node, isLoading: isLoadingNode, isError, error: nodeError, } = useGetNodeContent({
-        nodeSlug,
-        projectId,
-        branchSlug,
-    });
-    const { isOpen, open, close } = useModalState();
-    const [search, setSearch] = React.useState('');
-    const onSearchResultClick = (item) => {
-        close();
-    };
-    const { isResponsiveLayoutEnabled } = useResponsiveLayout();
-    const { data, isFetching } = useGetNodes({
-        search,
-        projectIds: [projectId],
-        pause: !isResponsiveLayoutEnabled,
-    });
-    const container = React.useRef(null);
-    if (!nodeSlug && isTocFetched && (tableOfContents === null || tableOfContents === void 0 ? void 0 : tableOfContents.items)) {
-        const firstNode = findFirstNode(tableOfContents.items);
-        if (firstNode) {
-            return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${firstNode.slug}` : `/${firstNode.slug}` });
-        }
-    }
-    let elem;
-    if (isLoadingNode || !isTocFetched) {
-        elem = React.createElement(Loading, null);
-    }
-    else if (isError) {
-        if (nodeError instanceof ResponseError) {
-            if (nodeError.code === 402) {
-                elem = React.createElement(UpgradeToStarter, null);
-            }
-            else if (nodeError.code === 403) {
-                elem = React.createElement(Forbidden, null);
-            }
-            else {
-                elem = React.createElement(NotFound, null);
-            }
-        }
-        else {
-            elem = React.createElement(NotFound, null);
-        }
-    }
-    else if (!node) {
-        elem = React.createElement(NotFound, null);
-    }
-    else if ((node === null || node === void 0 ? void 0 : node.slug) && nodeSlug !== node.slug) {
-        return React.createElement(Redirect, { to: branchSlug ? `/branches/${branchSlug}/${node.slug}` : `/${node.slug}` });
-    }
-    else {
-        elem = (React.createElement(React.Fragment, null,
-            React.createElement(Button, { "data-test": "show-project-search-overlay", onPress: open, appearance: "default", w: "full", rounded: "lg", borderColor: "light" },
-                React.createElement(Icon, { icon: faSearch }),
-                React.createElement(Box, { pl: 2 }, node.title)),
-            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 }),
-            React.createElement(NodeContent, { node: node, Link: ReactRouterMarkdownLink, hideTryIt: hideTryIt, hideMocking: hideMocking, hideExport: hideExport, tryItCredentialsPolicy: tryItCredentialsPolicy, tryItCorsProxy: tryItCorsProxy })));
-    }
-    const handleTocClick = () => {
-        if (container.current) {
-            container.current.scrollIntoView();
-        }
-    };
-    return (React.createElement(SidebarLayout, { ref: container, sidebar: React.createElement(React.Fragment, null,
-            branches && branches.items.length > 1 ? (React.createElement(BranchSelector, { branchSlug: branchSlug, branches: branches.items, onChange: branch => {
-                    const encodedBranchSlug = encodeURIComponent(branch.slug);
-                    history.push(branch.is_default ? `/${nodeSlug}` : `/branches/${encodedBranchSlug}/${nodeSlug}`);
-                } })) : null,
-            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));
-};
-const StoplightProjectRouter = (_a) => {
-    var { platformUrl, basePath = '/', staticRouterPath = '', router = 'history' } = _a, props = __rest(_a, ["platformUrl", "basePath", "staticRouterPath", "router"]);
-    const { Router, routerProps } = useRouter(router, basePath, staticRouterPath);
-    return (React.createElement(DevPortalProvider, { platformUrl: platformUrl },
-        React.createElement(RouterTypeContext.Provider, { value: router },
-            React.createElement(Router, Object.assign({}, routerProps, { key: basePath }),
-                React.createElement(Switch, null,
-                    React.createElement(Route, { path: "/branches/:branchSlug/:nodeSlug+", exact: true },
-                        React.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                    React.createElement(Route, { path: "/:nodeSlug+", exact: true },
-                        React.createElement(StoplightProjectImpl, Object.assign({}, props))),
-                    React.createElement(Route, { path: "/", exact: true },
-                        React.createElement(StoplightProjectImpl, Object.assign({}, props))))))));
-};
-const StoplightProject = withStyles(StoplightProjectRouter);
-
-const getWorkspace = ({ projectIds, platformUrl = 'https://stoplight.io', platformAuthToken, }) => __awaiter(void 0, void 0, void 0, function* () {
-    const encodedProjectId = encodeURIComponent(projectIds[0]);
-    const response = yield fetch(`${platformUrl}/api/v1/projects/${encodedProjectId}`, {
-        headers: Object.assign({ 'Stoplight-Elements-Version': appVersion }, (platformAuthToken && { Authorization: `Bearer ${platformAuthToken}` })),
-    });
-    const data = yield response.json();
-    if (!response.ok) {
-        throw new Error(data);
-    }
-    return data;
-});
-
 function useGetWorkspace({ projectIds }) {
     const { platformUrl, platformAuthToken } = React.useContext(PlatformContext);
     return useQuery([...devPortalCacheKeys.searchNodes({ projectIds }), platformUrl, platformAuthToken], () => getWorkspace({ projectIds, platformUrl, platformAuthToken }));