@redocly/theme 0.9.12-alpha.0 → 0.9.12

package/lib/Catalog/Filter.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 export declare function Filter({ filter }: {
-    filter: ResolvedFilter & {
-        selectedOptions: any;
-    };
+    filter: ResolvedFilter;
 }): JSX.Element | null;

package/lib/Catalog/Filter.js

@@ -7,36 +7,19 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Checkbox_1 = require("../ui/Checkbox");
-// TODO: figure out how to fix this
-const DatePicker = 
-// eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
-require('react-date-picker').default;
-// disabled type checking for selectedOptions
 function Filter({ filter }) {
-    var _a, _b;
+    var _a;
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            filter.title,
-            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { onClick: () => filter.selectOption('') }, " Clear ")) : null),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_b = filter.selectedOptions.values().next()) === null || _b === void 0 ? void 0 : _b.value) || '' },
+        react_1.default.createElement(FilterTitle, null, filter.title),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
                 value.value,
                 " (",
                 value.count,
-                ")"))))) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, " From: "),
-                react_1.default.createElement(DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
-                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: formatDateWithNoTimeZone(from) }));
-                    } })),
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, " To: "),
-                react_1.default.createElement(DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined, value: filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null, minDetail: "decade", onChange: (to) => {
-                        filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
-                    } })))) : (filter.filteredOptions.map((value) => {
+                ")"))))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterValue, { key: id },
                 react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
@@ -61,11 +44,6 @@ const FilterTitle = styled_components_1.default.h4 `
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
-
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
 `;
 const FilterValue = styled_components_1.default.label `
   display: block;
@@ -100,66 +78,9 @@ const StyledSelect = styled_components_1.default.select `
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
-  padding-right: 25px;
 `;
 // TODO: import from portal
 function slug(str) {
     return str.replace(/\s/g, '-').toLowerCase();
 }
-const DatePickerWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 5px;
-
-  align-items: center;
-  gap: 10px;
-
-  > span {
-    width: 50px;
-  }
-
-  .react-date-picker {
-    flex: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
-
-    &:enabled:hover,
-    &:enabled:focus {
-      background: #b1efe7;
-      color: black;
-    }
-  }
-
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
-  }
-
-  .react-date-picker__button {
-    padding: 4px 4px;
-    svg {
-      width: 12px;
-    }
-  }
-
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
-  }
-
-  .react-date-picker__inputGroup__input {
-    width: 20px;
-  }
-`;
-function padZero(num) {
-    return num < 10 ? '0' + num : num;
-}
-function formatDateWithNoTimeZone(date) {
-    if (!date)
-        return date;
-    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}
 //# sourceMappingURL=Filter.js.map

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.12-alpha.0",
+  "version": "0.9.12",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -83,7 +83,6 @@
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
-    "react-date-picker": "9.2.0",
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"
   },

package/src/Catalog/Filter.tsx

@@ -1,31 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { DatePickerProps } from 'react-date-picker';
-
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { Checkbox } from '@theme/ui/Checkbox';
 
-// TODO: figure out how to fix this
-const DatePicker: React.FC<DatePickerProps> =
-  // eslint-disable-next-line @typescript-eslint/no-var-requires, import/order, import/no-extraneous-dependencies
-  require('react-date-picker').default;
-
-// disabled type checking for selectedOptions
-export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
+export function Filter({ filter }: { filter: ResolvedFilter }) {
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>
-        {filter.title}
-        {filter.selectedOptions?.size ? (
-          <a onClick={() => filter.selectOption('')}> Clear </a>
-        ) : null}
-      </FilterTitle>
+      <FilterTitle>{filter.title}</FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}
-          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
+          value={filter.selectedOptions.values().next()?.value || ''}
         >
           <option key="none" value="">
             All
@@ -36,49 +23,6 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
             </option>
           ))}
         </StyledSelect>
-      ) : filter.type === 'date-range' ? (
-        <>
-          <DatePickerWrapper>
-            <span> From: </span>
-            <DatePicker
-              closeCalendar={true}
-              format="y-MM-dd"
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              value={filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null}
-              minDetail="decade"
-              maxDate={new Date()}
-              onChange={(from: Date) => {
-                filter.selectOption({
-                  ...(filter.selectedOptions as any),
-                  from: formatDateWithNoTimeZone(from),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-          <DatePickerWrapper>
-            <span> To: </span>
-            <DatePicker
-              closeCalendar={true}
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              format="y-MM-dd"
-              minDate={
-                filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined
-              }
-              value={filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null}
-              minDetail="decade"
-              onChange={(to: Date) => {
-                filter.selectOption({
-                  ...filter.selectedOptions,
-                  to: formatDateWithNoTimeZone(to),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-        </>
       ) : (
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
@@ -115,11 +59,6 @@ const FilterTitle = styled.h4`
   font-weight: var(--font-weight-bold);
   margin: 0;
   margin-bottom: 16px;
-
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
 `;
 
 const FilterValue = styled.label`
@@ -156,68 +95,9 @@ const StyledSelect = styled.select`
   background-position: right 10px center;
   background-size: 1em;
   width: 100%;
-  padding-right: 25px;
 `;
 
 // TODO: import from portal
 function slug(str: string): string {
   return str.replace(/\s/g, '-').toLowerCase();
 }
-
-const DatePickerWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 5px;
-
-  align-items: center;
-  gap: 10px;
-
-  > span {
-    width: 50px;
-  }
-
-  .react-date-picker {
-    flex: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
-
-    &:enabled:hover,
-    &:enabled:focus {
-      background: #b1efe7;
-      color: black;
-    }
-  }
-
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
-  }
-
-  .react-date-picker__button {
-    padding: 4px 4px;
-    svg {
-      width: 12px;
-    }
-  }
-
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
-  }
-
-  .react-date-picker__inputGroup__input {
-    width: 20px;
-  }
-`;
-
-function padZero(num: number) {
-  return num < 10 ? '0' + num : num;
-}
-
-function formatDateWithNoTimeZone(date?: Date | null) {
-  if (!date) return date;
-  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}

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;

package/src/types/portal/src/shared/types/catalog.d.ts

@@ -8,7 +8,7 @@ export type FilteredCatalog = {
 };
 
 export type Filter = {
-  type?: 'select' | 'checkboxes' | 'date-range';
+  type?: 'select' | 'checkboxes';
   title: string;
   property: string;
   parentFilter?: string;
@@ -44,7 +44,6 @@ export type ResolvedFilter = Omit<Filter, 'options'> & {
   selectOption: (option: string) => void;
   parentUsed: boolean;
   selectedOptions: Set<string>;
-  range?: {from?: string; to?: string};
 };
 
 export type CatalogItem = {
@@ -52,6 +51,5 @@ export type CatalogItem = {
   link: string;
   description?: string;
   image?: string;
-  docsLink?: string;
   [k: string]: unknown;
 };