Help improve this content
diff --git a/src/components/guideGrid.tsx b/src/components/guideGrid.tsx
index 09c5b56d13c6a..1d9d933f6bd33 100644
--- a/src/components/guideGrid.tsx
+++ b/src/components/guideGrid.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {PlatformIcon} from 'platformicons';
-import {Platform, usePlatform} from './hooks/usePlatform';
+import {usePlatform} from './hooks/usePlatform';
import {SmartLink} from './smartLink';
type Props = {
@@ -9,23 +9,22 @@ type Props = {
platform?: string;
};
-export function GuideGrid({platform, className}: Props): JSX.Element {
+export function GuideGrid({platform, className}: Props) {
const [currentPlatform] = usePlatform(platform);
- // platform might actually not be a platform, so lets handle that case gracefully
- if (!(currentPlatform as Platform).guides) {
+
+ if (currentPlatform.type === 'guide') {
return null;
}
return (
- {(currentPlatform as Platform).guides.map(guide => (
+ {currentPlatform.guides.map(guide => (
-
{guide.title}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 99add55f2e7cc..ae2ff3efc390c 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import {SmartLink} from './smartLink';
-export function Header(): JSX.Element {
+export function Header() {
return (
@@ -25,10 +25,8 @@ export function Header(): JSX.Element {
type="button"
onClick={() => {
const el = document.getElementById('sidebar');
- if (el.style.display === 'block') {
- el.style.display = 'none';
- } else {
- el.style.display = 'block';
+ if (el) {
+ el.style.display = el.style.display === 'block' ? 'none' : 'block';
}
}}
aria-controls="sidebar"
diff --git a/src/components/hooks/__tests__/usePlatform.test.js b/src/components/hooks/__tests__/usePlatform.test.js
index b4d61ae248869..e9b76cc083794 100644
--- a/src/components/hooks/__tests__/usePlatform.test.js
+++ b/src/components/hooks/__tests__/usePlatform.test.js
@@ -2,9 +2,9 @@
/* eslint import/no-unresolved: ['error', { ignore: ['@reach'] }] */
import React from 'react';
-import {useLocation, useNavigate} from '@reach/router';
+import {useLocation} from '@reach/router';
import {act, renderHook} from '@testing-library/react-hooks';
-import {useStaticQuery} from 'gatsby';
+import {navigate, useStaticQuery} from 'gatsby';
import {PageContext} from '../../pageContext';
import {useLocalStorage} from '../useLocalStorage';
@@ -28,6 +28,10 @@ const PLATFORMS = [
jest.mock('../useLocalStorage');
describe('usePlatform', () => {
+ beforeEach(() => {
+ jest.resetAllMocks();
+ });
+
it('uses the default of javascript', () => {
const wrapper = ({children}) => (
{children}
@@ -99,9 +103,6 @@ describe('usePlatform', () => {
pathname: '/platforms/ruby/',
});
- const navigate = jest.fn();
-
- useNavigate.mockImplementation(() => navigate);
useStaticQuery.mockImplementation(() => ({
allPlatform: {
nodes: PLATFORMS,
@@ -132,9 +133,6 @@ describe('usePlatform', () => {
pathname: '/platforms/ruby/',
});
- const navigate = jest.fn();
-
- useNavigate.mockImplementation(() => navigate);
useStaticQuery.mockImplementation(() => ({
allPlatform: {
nodes: PLATFORMS,
@@ -182,9 +180,7 @@ describe('usePlatform', () => {
pathname: '/',
search: '?platform=javascript',
});
- const navigate = jest.fn();
- useNavigate.mockImplementation(() => navigate);
useStaticQuery.mockImplementation(() => ({
allPlatform: {
nodes: PLATFORMS,
diff --git a/src/components/hooks/usePlatform.tsx b/src/components/hooks/usePlatform.tsx
index 7aa797ceca778..8d34d22d443ae 100644
--- a/src/components/hooks/usePlatform.tsx
+++ b/src/components/hooks/usePlatform.tsx
@@ -1,9 +1,10 @@
import {useContext, useState} from 'react';
-import {useLocation, useNavigate, WindowLocation} from '@reach/router';
-import {graphql, useStaticQuery} from 'gatsby';
+import {useLocation, WindowLocation} from '@reach/router';
+import {graphql, navigate, useStaticQuery} from 'gatsby';
import {parse} from 'query-string';
import {PageContext} from 'sentry-docs/components/pageContext';
+import {Platform, PlatformGuide} from 'sentry-docs/types';
import {useLocalStorage} from './useLocalStorage';
@@ -34,62 +35,6 @@ const query = graphql`
}
`;
-export const formatCaseStyle = (style: string, value: string): string => {
- switch (style) {
- case 'snake_case':
- return value.replace(/-/g, '_');
- case 'camelCase':
- return value
- .split(/-/g)
- .map((val, idx) =>
- idx === 0 ? val : val.charAt(0).toUpperCase() + val.substring(1)
- )
- .join('');
- case 'PascalCase':
- return value
- .split(/-/g)
- .map(val => val.charAt(0).toUpperCase() + val.substring(1))
- .join('');
- default:
- return value;
- }
-};
-
-// export enum CaseStyle {
-// canonical,
-// camelCase,
-// PascalCase,
-// snake_case,
-// }
-
-// export enum SupportLevel {
-// production,
-// community,
-// }
-
-export type Guide = {
- caseStyle: string;
- fallbackPlatform: string;
- key: string;
- name: string;
- sdk: string;
- supportLevel: string;
- title: string;
- url: string;
-};
-
-export type Platform = {
- caseStyle: string;
- key: string;
- name: string;
- sdk: string;
- supportLevel: string;
- title: string;
- url: string;
- fallbackPlatform?: string;
- guides?: Guide[];
-};
-
export const DEFAULT_PLATFORM = 'javascript';
const normalizeSlug = (name: string): string => {
@@ -161,8 +106,9 @@ const rebuildPathForPlatform = (key: string, currentPath?: string): string => {
export const usePlatformList = (): Platform[] => {
const {
allPlatform: {nodes: platformList},
- } = useStaticQuery(query);
- return platformList.sort((a: Platform, b: Platform) => {
+ } = useStaticQuery<{allPlatform: {nodes: Platform[]}}>(query);
+
+ return platformList.sort((a, b) => {
// Exclude leading non-alphanumeric characters to order .NET between Native and NodeJS instead of the beginning.
const skippedPrefix = /^[^a-zA-Z]+/;
return a.title
@@ -173,10 +119,10 @@ export const usePlatformList = (): Platform[] => {
/**
* Return the active platform or guide.
-
+ *
* @param value platform key in format of `platformName[.guideName]`
*/
-export const getPlatform = (key: string): Platform | Guide | null => {
+export const getPlatform = (key: string): Platform | PlatformGuide | null => {
// XXX(epurkhiser): This is almost certinally a mistake, we should figure out
// if `getPlatforms` should actually be something more like `useGetPlatforms`
// or something
@@ -191,14 +137,13 @@ export const getPlatform = (key: string): Platform | Guide | null => {
const [platformName, guideName] = key.split('.', 2);
const activePlatform = platformList.find((p: Platform) => p.key === platformName);
const activeGuide =
- activePlatform &&
- (activePlatform as Platform).guides.find((g: Guide) => g.name === guideName);
+ activePlatform && activePlatform.guides.find(g => g.name === guideName);
return activeGuide ?? activePlatform ?? null;
};
type UsePlatform = [
- Platform | Guide | null,
+ Platform | PlatformGuide | null,
(value: string, options?: SetPlatformOptions) => void,
boolean
];
@@ -207,7 +152,9 @@ type SetPlatformOptions = {
noQueryString?: boolean;
};
-export const getPlatformsWithFallback = (platform: Platform | Guide): string[] => {
+export const getPlatformsWithFallback = (
+ platform: Platform | PlatformGuide
+): string[] => {
const result = [platform.key];
let curPlatform = platform;
while (curPlatform.fallbackPlatform) {
@@ -243,7 +190,6 @@ export function usePlatform(
defaultValue: string = DEFAULT_PLATFORM
): UsePlatform {
const location = useLocation();
- const navigate = useNavigate();
const pageContext = useContext(PageContext);
@@ -259,7 +205,7 @@ export function usePlatform(
const [stateValue, setStateValue] = useState(currentValue);
- const setValue = (newValue: string, options: SetPlatformOptions = {}) => {
+ const setPlatform = (newValue: string, options: SetPlatformOptions = {}) => {
if (newValue === currentValue) {
return;
}
@@ -277,8 +223,8 @@ export function usePlatform(
setStateValue(newValue);
};
- const activeValue: Platform | Guide | null =
+ const activePlatform: Platform | PlatformGuide | null =
getPlatform(stateValue) ?? (useDefault ? getPlatform(defaultValue) : null);
- return [activeValue, setValue, isFixed];
+ return [activePlatform, setPlatform, isFixed];
}
diff --git a/src/components/include.tsx b/src/components/include.tsx
index ac6c14a8babb7..02479351dcf9f 100644
--- a/src/components/include.tsx
+++ b/src/components/include.tsx
@@ -22,7 +22,7 @@ type Props = {
name: string;
};
-export function Include({name}: Props): JSX.Element {
+export function Include({name}: Props) {
const {
allFile: {nodes: files},
} = useStaticQuery(includeQuery);
diff --git a/src/components/includePlatformContent.tsx b/src/components/includePlatformContent.tsx
index 575f0a314abd7..a3e45b7381cde 100644
--- a/src/components/includePlatformContent.tsx
+++ b/src/components/includePlatformContent.tsx
@@ -22,7 +22,7 @@ type Props = {
name: string;
};
-export function IncludePlatformContent({name}: Props): JSX.Element {
+export function IncludePlatformContent({name}: Props) {
const {
allFile: {nodes: files},
} = useStaticQuery(includePlatformContentQuery);
diff --git a/src/components/internalDocsSidebar.tsx b/src/components/internalDocsSidebar.tsx
index 91e4e71343b22..beb8196dc34b6 100644
--- a/src/components/internalDocsSidebar.tsx
+++ b/src/components/internalDocsSidebar.tsx
@@ -18,7 +18,7 @@ const query = graphql`
}
`;
-export function InternalDocsSidebar(): JSX.Element {
+export function InternalDocsSidebar() {
const data = useStaticQuery(query);
const tree = toTree(data.allSitePage.nodes.filter(n => !!n.context));
return (
diff --git a/src/components/jsBundleList.tsx b/src/components/jsBundleList.tsx
index 74f60e583e868..80836aa2350e4 100644
--- a/src/components/jsBundleList.tsx
+++ b/src/components/jsBundleList.tsx
@@ -21,7 +21,7 @@ const ChecksumValue = styled.code`
white-space: nowrap;
`;
-export function JsBundleList(): JSX.Element {
+export function JsBundleList() {
const {
package: {files},
} = useStaticQuery(query);
diff --git a/src/components/jsCdnTag.tsx b/src/components/jsCdnTag.tsx
index 162a98929cf6d..44c7e02608331 100644
--- a/src/components/jsCdnTag.tsx
+++ b/src/components/jsCdnTag.tsx
@@ -24,7 +24,7 @@ const query = graphql`
}
`;
-export function JsCdnTag({tracing = false, name = ''}: Props): JSX.Element {
+export function JsCdnTag({tracing = false, name = ''}: Props) {
const {package: packageData} = useStaticQuery(query);
const bundleName = tracing ? 'bundle.tracing.min.js' : name || 'bundle.min.js';
diff --git a/src/components/lambdaLayerDetail.tsx b/src/components/lambdaLayerDetail.tsx
index c4c92d1d0ad2d..363caa8ddb916 100644
--- a/src/components/lambdaLayerDetail.tsx
+++ b/src/components/lambdaLayerDetail.tsx
@@ -13,7 +13,7 @@ type LayerData = {
const query = graphql`
query LambdaLayer {
- allLayer {
+ allAwsLambdaLayer {
nodes {
id
canonical
@@ -35,10 +35,10 @@ const toOption = ({region}: RegionData) => {
};
};
-export function LambdaLayerDetail({canonical}: {canonical: string}): JSX.Element {
+export function LambdaLayerDetail({canonical}: {canonical: string}) {
const {
- allLayer: {nodes: layerList},
- }: {allLayer: {nodes: LayerData[]}} = useStaticQuery(query);
+ allAwsLambdaLayer: {nodes: layerList},
+ }: {allAwsLambdaLayer: {nodes: LayerData[]}} = useStaticQuery(query);
const layer = layerList.find(l => l.canonical === canonical);
// if we don't find a matching layer, let the page blow up
@@ -64,7 +64,10 @@ export function LambdaLayerDetail({canonical}: {canonical: string}): JSX.Element
return (
- ({...base, width: 300}),
+ }}
placeholder="Select Region"
options={layer.regions.map(toOption)}
value={regionOption}
@@ -85,10 +88,6 @@ const Wrapper = styled('div')`
min-height: 200px;
`;
-const StyledSelect = styled(Select)`
- width: 300px;
-`;
-
const ArnWrapper = styled('div')`
margin-top: 10px;
`;
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 8ad0ffe34e87c..39d858e94a109 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -3,7 +3,7 @@ import {Nav} from 'react-bootstrap';
import 'sentry-docs/css/screen.scss';
-import {breadcrumb as Breadcrumbs} from './breadcrumbs';
+import {Breadcrumbs} from './breadcrumbs';
import {Header} from './header';
import {Navbar} from './navbar';
import {NavbarPlatformDropdown} from './navbarPlatformDropdown';
@@ -12,7 +12,7 @@ import {Sidebar} from './sidebar';
import {SmartLink} from './smartLink';
type Props = {
- children: JSX.Element | JSX.Element[];
+ children: React.ReactNode;
pageContext?: {
guide?: {
[key: string]: any;
@@ -23,10 +23,10 @@ type Props = {
name?: string;
};
};
- sidebar?: JSX.Element;
+ sidebar?: React.ReactNode;
};
-export function Layout({children, sidebar, pageContext = {}}: Props): JSX.Element {
+export function Layout({children, sidebar, pageContext = {}}: Props) {
const searchPlatforms = [pageContext.platform?.name, pageContext.guide?.name].filter(
Boolean
);
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index 274c3f27caf4b..659782cf41f34 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -4,7 +4,7 @@ type Props = {
loading?: boolean;
};
-export function Logo({loading}: Props): JSX.Element {
+export function Logo({loading}: Props) {
return (