@redocly/theme 0.9.11 → 0.9.12

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -31,11 +31,13 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button/Button");
 const usePageData_1 = require("../mocks/hooks/usePageData");
+const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const Dropdown_1 = require("./Dropdown");
 function DevOnboardingTryItSecurity(props) {
     const apiId = props.apiId;
     // @ts-ignore
     const { userData } = (0, usePageData_1.usePageData)('userData') || {};
+    const history = (0, usePreloadHistory_1.usePreloadHistory)();
     // TODO: handle error
     const [_error, setError] = React.useState();
     const [apps, setApps] = React.useState();
@@ -45,6 +47,7 @@ function DevOnboardingTryItSecurity(props) {
     const [selectedAppSecret, setSelectedAppSecret] = React.useState();
     const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
     const initialRender = React.useRef(true);
+    const hasApiAccess = !loading && !!(apps === null || apps === void 0 ? void 0 : apps.length);
     React.useEffect(() => {
         if (!props.value && initialRender.current)
             return;
@@ -110,7 +113,11 @@ function DevOnboardingTryItSecurity(props) {
                 .finally(() => setAppLoading(false));
         });
     };
-    const placeholder = loading ? 'Loading your apps...' : undefined;
+    const placeholder = loading
+        ? 'Loading your apps...'
+        : hasApiAccess
+            ? undefined
+            : 'You do not have access to this API';
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLabel, { htmlFor: "server" }, "Select app: "),
         React.createElement(FormControl, null,
@@ -118,7 +125,14 @@ function DevOnboardingTryItSecurity(props) {
                     setAppId(value);
                     loadAppCredentials(value);
                 } }),
-            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, appLoading ? 'Loading...' : 'Use key'))));
+            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, color: "secondary", onClick: () => {
+                    if (selectedAppSecret) {
+                        props.onChange(selectedAppSecret);
+                    }
+                    else if (!hasApiAccess) {
+                        history.push('/apps/?createApp&apiId=' + apiId);
+                    }
+                } }, appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'))));
 }
 exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
 const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
@@ -156,7 +170,7 @@ const FormLabel = styled_components_1.default.label `
     `}
 `;
 const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
-  width: 100px;
+  min-width: 100px;
   align-self: flex-end;
   margin-top: 10px;
   margin-right: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -5,6 +5,7 @@ import type { TryItSecurityAppsProps } from './TryItSecurityApps';
 
 import { Button } from '@theme/Button/Button';
 import { usePageData } from '@portal/hooks/usePageData';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
 
 import { Dropdown } from './Dropdown';
 
@@ -13,6 +14,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
 
   // @ts-ignore
   const { userData } = usePageData('userData') || {};
+  const history = usePreloadHistory();
 
   // TODO: handle error
   const [_error, setError] = React.useState<string | undefined>();
@@ -26,6 +28,8 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
   const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
   const initialRender = React.useRef(true);
 
+  const hasApiAccess = !loading && !!apps?.length;
+
   React.useEffect(() => {
     if (!props.value && initialRender.current) return;
     if (acceptValueUpdate) {
@@ -92,7 +96,11 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
     });
   };
 
-  const placeholder = loading ? 'Loading your apps...' : undefined;
+  const placeholder = loading
+    ? 'Loading your apps...'
+    : hasApiAccess
+    ? undefined
+    : 'You do not have access to this API';
 
   return (
     <>
@@ -109,11 +117,17 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
           }}
         />
         <UseKeyButton
-          disabled={!selectedAppSecret || appLoading}
+          disabled={(!selectedAppSecret && hasApiAccess) || appLoading}
           color="secondary"
-          onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
+          onClick={() => {
+            if (selectedAppSecret) {
+              props.onChange(selectedAppSecret);
+            } else if (!hasApiAccess) {
+              history.push('/apps/?createApp&apiId=' + apiId);
+            }
+          }}
         >
-          {appLoading ? 'Loading...' : 'Use key'}
+          {appLoading ? 'Loading...' : hasApiAccess ? 'Use key' : 'Request access'}
         </UseKeyButton>
       </FormControl>
     </>
@@ -159,7 +173,7 @@ const FormLabel = styled.label<{ required?: boolean }>`
 `;
 
 const UseKeyButton = styled(Button)`
-  width: 100px;
+  min-width: 100px;
   align-self: flex-end;
   margin-top: 10px;
   margin-right: 0;