Skip to content

Commit b34fd06

Browse files
ArthurKnausArthurKnaus
authored
ref(onboarding): Move onboarding types out of step component (#95200)
Move the `OnboardingStep` type out of the `Step` component file as the type is also used in other components and a general building block of our docs structure. Move `TabbedCodeSnippet` from `step.tsx` into `onboardingCodeSnippet.tsx` since it is just a utility wrapper for it and also is used in a multitude of places that do not use the `Step` component. - closes [TET-841: Move general onboarding doc types out of step component file](https://linear.app/getsentry/issue/TET-841/move-general-onboarding-doc-types-out-of-step-component-file)
1 parent b68bf04 commit b34fd06

File tree

120 files changed

+310
-304
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+310
-304
lines changed

‎static/app/components/feedback/feedbackOnboarding/feedbackOnboardingLayout.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import styled from '@emotion/styled';
44
import FeedbackConfigToggle from 'sentry/components/feedback/feedbackOnboarding/feedbackConfigToggle';
55
import {AuthTokenGeneratorProvider} from 'sentry/components/onboarding/gettingStartedDoc/authTokenGenerator';
66
import type {OnboardingLayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/onboardingLayout';
7-
import {Step, StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
7+
import {Step} from 'sentry/components/onboarding/gettingStartedDoc/step';
88
import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
9+
import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
910
import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
1011
import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl';
1112
import ConfigStore from 'sentry/stores/configStore';

‎static/app/components/onboarding/gettingStartedDoc/onboardingCodeSnippet.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,57 @@ export function OnboardingCodeSnippet({
6060
</Fragment>
6161
);
6262
}
63+
64+
export interface CodeSnippetTab {
65+
code: string;
66+
label: string;
67+
language: string;
68+
value: string;
69+
filename?: string;
70+
}
71+
72+
interface TabbedCodeSnippetProps {
73+
/**
74+
* An array of tabs to be displayed
75+
*/
76+
tabs: CodeSnippetTab[];
77+
/**
78+
* A callback to be invoked when the configuration is copied to the clipboard
79+
*/
80+
onCopy?: () => void;
81+
/**
82+
* A callback to be invoked when the configuration is selected and copied to the clipboard
83+
*/
84+
onSelectAndCopy?: () => void;
85+
/**
86+
* Whether or not the configuration or parts of it are currently being loaded
87+
*/
88+
partialLoading?: boolean;
89+
}
90+
91+
export function TabbedCodeSnippet({
92+
tabs,
93+
onCopy,
94+
onSelectAndCopy,
95+
partialLoading,
96+
}: TabbedCodeSnippetProps) {
97+
const [selectedTabValue, setSelectedTabValue] = useState(tabs[0]!.value);
98+
const selectedTab = tabs.find(tab => tab.value === selectedTabValue) ?? tabs[0]!;
99+
const {code, language, filename} = selectedTab;
100+
101+
return (
102+
<OnboardingCodeSnippet
103+
language={language}
104+
onCopy={onCopy}
105+
onSelectAndCopy={onSelectAndCopy}
106+
hideCopyButton={partialLoading}
107+
disableUserSelection={partialLoading}
108+
tabs={tabs}
109+
selectedTab={selectedTabValue}
110+
onTabClick={value => setSelectedTabValue(value)}
111+
filename={filename}
112+
>
113+
{code}
114+
</OnboardingCodeSnippet>
115+
);
116+
}

‎static/app/components/onboarding/gettingStartedDoc/step.tsx

Lines changed: 11 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -3,156 +3,25 @@ import {Fragment, useState} from 'react';
33
import styled from '@emotion/styled';
44

55
import {Button} from 'sentry/components/core/button';
6-
import {OnboardingCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
6+
import {
7+
OnboardingCodeSnippet,
8+
TabbedCodeSnippet,
9+
} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
10+
import {
11+
type Configuration,
12+
type OnboardingStep,
13+
StepType,
14+
} from 'sentry/components/onboarding/gettingStartedDoc/types';
715
import {IconChevron} from 'sentry/icons';
816
import {t} from 'sentry/locale';
917
import {space} from 'sentry/styles/space';
1018

11-
export enum StepType {
12-
INSTALL = 'install',
13-
CONFIGURE = 'configure',
14-
VERIFY = 'verify',
15-
}
16-
17-
export const StepTitles = {
19+
export const StepTitles: Record<StepType, string> = {
1820
[StepType.INSTALL]: t('Install'),
1921
[StepType.CONFIGURE]: t('Configure SDK'),
2022
[StepType.VERIFY]: t('Verify'),
2123
};
2224

23-
interface CodeSnippetTab {
24-
code: string;
25-
label: string;
26-
language: string;
27-
value: string;
28-
filename?: string;
29-
}
30-
31-
interface TabbedCodeSnippetProps {
32-
/**
33-
* An array of tabs to be displayed
34-
*/
35-
tabs: CodeSnippetTab[];
36-
/**
37-
* A callback to be invoked when the configuration is copied to the clipboard
38-
*/
39-
onCopy?: () => void;
40-
/**
41-
* A callback to be invoked when the configuration is selected and copied to the clipboard
42-
*/
43-
onSelectAndCopy?: () => void;
44-
/**
45-
* Whether or not the configuration or parts of it are currently being loaded
46-
*/
47-
partialLoading?: boolean;
48-
}
49-
50-
export function TabbedCodeSnippet({
51-
tabs,
52-
onCopy,
53-
onSelectAndCopy,
54-
partialLoading,
55-
}: TabbedCodeSnippetProps) {
56-
const [selectedTabValue, setSelectedTabValue] = useState(tabs[0]!.value);
57-
const selectedTab = tabs.find(tab => tab.value === selectedTabValue) ?? tabs[0]!;
58-
const {code, language, filename} = selectedTab;
59-
60-
return (
61-
<OnboardingCodeSnippet
62-
language={language}
63-
onCopy={onCopy}
64-
onSelectAndCopy={onSelectAndCopy}
65-
hideCopyButton={partialLoading}
66-
disableUserSelection={partialLoading}
67-
tabs={tabs}
68-
selectedTab={selectedTabValue}
69-
onTabClick={value => setSelectedTabValue(value)}
70-
filename={filename}
71-
>
72-
{code}
73-
</OnboardingCodeSnippet>
74-
);
75-
}
76-
77-
export type Configuration = {
78-
/**
79-
* Additional information to be displayed below the code snippet
80-
*/
81-
additionalInfo?: React.ReactNode;
82-
/**
83-
* The code snippet to display
84-
*/
85-
code?: string | CodeSnippetTab[];
86-
/**
87-
* Nested configurations provide a convenient way to accommodate diverse layout styles, like the Spring Boot configuration.
88-
*/
89-
configurations?: Configuration[];
90-
/**
91-
* A brief description of the configuration
92-
*/
93-
description?: React.ReactNode;
94-
/**
95-
* The language of the code to be rendered (python, javascript, etc)
96-
*/
97-
language?: string;
98-
/**
99-
* A callback to be invoked when the configuration is copied to the clipboard
100-
*/
101-
onCopy?: () => void;
102-
/**
103-
* A callback to be invoked when the configuration is selected and copied to the clipboard
104-
*/
105-
onSelectAndCopy?: () => void;
106-
/**
107-
* Whether or not the configuration or parts of it are currently being loaded
108-
*/
109-
partialLoading?: boolean;
110-
};
111-
112-
// TODO(aknaus): move to types
113-
interface BaseStepProps {
114-
/**
115-
* Additional information to be displayed below the configurations
116-
*/
117-
additionalInfo?: React.ReactNode;
118-
/**
119-
* Content that goes directly above the code snippet
120-
*/
121-
codeHeader?: React.ReactNode;
122-
/**
123-
* Whether the step instructions are collapsible
124-
*/
125-
collapsible?: boolean;
126-
/**
127-
* An array of configurations to be displayed
128-
*/
129-
configurations?: Configuration[];
130-
/**
131-
* A brief description of the step
132-
*/
133-
description?: React.ReactNode | React.ReactNode[];
134-
/**
135-
* Fired when the optional toggle is clicked.
136-
* Useful for when we want to fire analytics events.
137-
*/
138-
onOptionalToggleClick?: (showOptionalConfig: boolean) => void;
139-
/**
140-
* Additional items to be displayed to the right of the step title, e.g. a button to copy the configuration to the clipboard.
141-
*/
142-
trailingItems?: React.ReactNode;
143-
}
144-
interface StepPropsWithTitle extends BaseStepProps {
145-
title: string;
146-
type?: undefined;
147-
}
148-
149-
interface StepPropsWithoutTitle extends BaseStepProps {
150-
type: StepType;
151-
title?: undefined;
152-
}
153-
154-
export type StepProps = StepPropsWithTitle | StepPropsWithoutTitle;
155-
15625
function getConfiguration({
15726
description,
15827
code,
@@ -202,7 +71,7 @@ export function Step({
20271
trailingItems,
20372
codeHeader,
20473
...props
205-
}: React.HTMLAttributes<HTMLDivElement> & StepProps) {
74+
}: React.HTMLAttributes<HTMLDivElement> & OnboardingStep) {
20675
const [showOptionalConfig, setShowOptionalConfig] = useState(false);
20776

20877
const config = (

‎static/app/components/onboarding/gettingStartedDoc/types.ts

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {Client} from 'sentry/api';
2-
import type {StepProps} from 'sentry/components/onboarding/gettingStartedDoc/step';
2+
import type {CodeSnippetTab} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
33
import type {ReleaseRegistrySdk} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
44
import type {Organization} from 'sentry/types/organization';
55
import type {PlatformKey, Project, ProjectKey} from 'sentry/types/project';
@@ -9,6 +9,91 @@ type WithGeneratorProperties<T extends Record<string, any>, Params> = {
99
[key in keyof T]: GeneratorFunction<T[key], Params>;
1010
};
1111

12+
export type Configuration = {
13+
/**
14+
* Additional information to be displayed below the code snippet
15+
*/
16+
additionalInfo?: React.ReactNode;
17+
/**
18+
* The code snippet to display
19+
*/
20+
code?: string | CodeSnippetTab[];
21+
/**
22+
* Nested configurations provide a convenient way to accommodate diverse layout styles, like the Spring Boot configuration.
23+
*/
24+
configurations?: Configuration[];
25+
/**
26+
* A brief description of the configuration
27+
*/
28+
description?: React.ReactNode;
29+
/**
30+
* The language of the code to be rendered (python, javascript, etc)
31+
*/
32+
language?: string;
33+
/**
34+
* A callback to be invoked when the configuration is copied to the clipboard
35+
*/
36+
onCopy?: () => void;
37+
/**
38+
* A callback to be invoked when the configuration is selected and copied to the clipboard
39+
*/
40+
onSelectAndCopy?: () => void;
41+
/**
42+
* Whether or not the configuration or parts of it are currently being loaded
43+
*/
44+
partialLoading?: boolean;
45+
};
46+
47+
export enum StepType {
48+
INSTALL = 'install',
49+
CONFIGURE = 'configure',
50+
VERIFY = 'verify',
51+
}
52+
53+
interface BaseStepProps {
54+
/**
55+
* Additional information to be displayed below the configurations
56+
*/
57+
additionalInfo?: React.ReactNode;
58+
/**
59+
* Content that goes directly above the code snippet
60+
*/
61+
codeHeader?: React.ReactNode;
62+
/**
63+
* Whether the step instructions are collapsible
64+
*/
65+
collapsible?: boolean;
66+
/**
67+
* An array of configurations to be displayed
68+
*/
69+
configurations?: Configuration[];
70+
/**
71+
* A brief description of the step
72+
*/
73+
description?: React.ReactNode | React.ReactNode[];
74+
/**
75+
* Fired when the optional toggle is clicked.
76+
* Useful for when we want to fire analytics events.
77+
*/
78+
onOptionalToggleClick?: (showOptionalConfig: boolean) => void;
79+
/**
80+
* Additional items to be displayed to the right of the step title, e.g. a button to copy the configuration to the clipboard.
81+
*/
82+
trailingItems?: React.ReactNode;
83+
}
84+
85+
interface StepPropsWithTitle extends BaseStepProps {
86+
title: string;
87+
type?: undefined;
88+
}
89+
90+
interface StepPropsWithoutTitle extends BaseStepProps {
91+
type: StepType;
92+
title?: undefined;
93+
}
94+
95+
export type OnboardingStep = StepPropsWithTitle | StepPropsWithoutTitle;
96+
1297
export interface PlatformOption<Value extends string = string> {
1398
/**
1499
* Array of items for the option. Each one representing a selectable value.
@@ -96,9 +181,9 @@ export interface OnboardingConfig<
96181
PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
97182
> extends WithGeneratorProperties<
98183
{
99-
configure: StepProps[];
100-
install: StepProps[];
101-
verify: StepProps[];
184+
configure: OnboardingStep[];
185+
install: OnboardingStep[];
186+
verify: OnboardingStep[];
102187
introduction?: React.ReactNode | React.ReactNode[];
103188
nextSteps?: Array<NextStep | null>;
104189
onPageLoad?: () => void;

‎static/app/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {Alert} from 'sentry/components/core/alert';
22
import ExternalLink from 'sentry/components/links/externalLink';
3-
import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
43
import type {
54
DocsParams,
65
OnboardingConfig,
76
} from 'sentry/components/onboarding/gettingStartedDoc/types';
7+
import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
88
import {t, tct} from 'sentry/locale';
99

1010
export const getFeedbackConfigureDescription = ({

‎static/app/components/onboarding/gettingStartedDoc/utils/profilingOnboarding.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import type React from 'react';
22
import {Fragment} from 'react';
33

4-
import {
5-
type StepProps,
6-
TabbedCodeSnippet,
7-
} from 'sentry/components/onboarding/gettingStartedDoc/step';
8-
import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
4+
import {TabbedCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
5+
import type {
6+
DocsParams,
7+
OnboardingStep,
8+
} from 'sentry/components/onboarding/gettingStartedDoc/types';
99
import {t, tct} from 'sentry/locale';
1010

11-
export function getProfilingDocumentHeaderConfigurationStep(): StepProps {
11+
export function getProfilingDocumentHeaderConfigurationStep(): OnboardingStep {
1212
return {
1313
title: 'Add Document-Policy: js-profiling header',
1414
description: (

0 commit comments

Comments
 (0)