Skip to content

Commit 111464d

Browse files
constantiniusconstantinius
committed
Revert "ref(onboarding): Move onboarding types out of step component (#95200)"
This reverts commit 7712413.
1 parent 41841aa commit 111464d

File tree

120 files changed

+304
-310
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

+304
-310
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ 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} from 'sentry/components/onboarding/gettingStartedDoc/step';
7+
import {Step, StepType} 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';
109
import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries';
1110
import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl';
1211
import ConfigStore from 'sentry/stores/configStore';

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

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -60,57 +60,3 @@ 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: 142 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,156 @@ import {Fragment, useState} from 'react';
33
import styled from '@emotion/styled';
44

55
import {Button} from 'sentry/components/core/button';
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';
6+
import {OnboardingCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
157
import {IconChevron} from 'sentry/icons';
168
import {t} from 'sentry/locale';
179
import {space} from 'sentry/styles/space';
1810

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

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+
25156
function getConfiguration({
26157
description,
27158
code,
@@ -71,7 +202,7 @@ export function Step({
71202
trailingItems,
72203
codeHeader,
73204
...props
74-
}: React.HTMLAttributes<HTMLDivElement> & OnboardingStep) {
205+
}: React.HTMLAttributes<HTMLDivElement> & StepProps) {
75206
const [showOptionalConfig, setShowOptionalConfig] = useState(false);
76207

77208
const config = (

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

Lines changed: 4 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type {Client} from 'sentry/api';
2-
import type {CodeSnippetTab} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
2+
import type {StepProps} from 'sentry/components/onboarding/gettingStartedDoc/step';
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,91 +9,6 @@ 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-
9712
export interface PlatformOption<Value extends string = string> {
9813
/**
9914
* Array of items for the option. Each one representing a selectable value.
@@ -181,9 +96,9 @@ export interface OnboardingConfig<
18196
PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
18297
> extends WithGeneratorProperties<
18398
{
184-
configure: OnboardingStep[];
185-
install: OnboardingStep[];
186-
verify: OnboardingStep[];
99+
configure: StepProps[];
100+
install: StepProps[];
101+
verify: StepProps[];
187102
introduction?: React.ReactNode | React.ReactNode[];
188103
nextSteps?: Array<NextStep | null>;
189104
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';
34
import type {
45
DocsParams,
56
OnboardingConfig,
67
} 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 {TabbedCodeSnippet} from 'sentry/components/onboarding/gettingStartedDoc/onboardingCodeSnippet';
5-
import type {
6-
DocsParams,
7-
OnboardingStep,
8-
} from 'sentry/components/onboarding/gettingStartedDoc/types';
4+
import {
5+
type StepProps,
6+
TabbedCodeSnippet,
7+
} from 'sentry/components/onboarding/gettingStartedDoc/step';
8+
import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
99
import {t, tct} from 'sentry/locale';
1010

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

0 commit comments

Comments
 (0)