123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- import {useContext} from 'react';
- import styled from '@emotion/styled';
- import {motion} from 'framer-motion';
- import omit from 'lodash/omit';
- import {OnboardingContext} from 'sentry/components/onboarding/onboardingContext';
- import PlatformPicker from 'sentry/components/platformPicker';
- import platforms from 'sentry/data/platforms';
- import {t} from 'sentry/locale';
- import testableTransition from 'sentry/utils/testableTransition';
- import useOrganization from 'sentry/utils/useOrganization';
- import StepHeading from 'sentry/views/onboarding/components/stepHeading';
- import {CreateProjectsFooter} from './components/createProjectsFooter';
- import type {StepProps} from './types';
- export function PlatformSelection(props: StepProps) {
- const organization = useOrganization();
- const onboardingContext = useContext(OnboardingContext);
- const selectedPlatform = onboardingContext.data.selectedSDK
- ? platforms.find(platform => platform.id === onboardingContext.data.selectedSDK?.key)
- ? onboardingContext.data.selectedSDK
- : undefined
- : undefined;
- return (
- <Wrapper>
- <StepHeading step={props.stepIndex}>
- {t('Select the platform you want to monitor')}
- </StepHeading>
- <motion.div
- transition={testableTransition()}
- variants={{
- initial: {y: 30, opacity: 0},
- animate: {y: 0, opacity: 1},
- exit: {opacity: 0},
- }}
- >
- <p>
- {t(
- 'Set up a separate project for each part of your application (for example, your API server and frontend client), to quickly pinpoint which part of your application errors are coming from.'
- )}
- </p>
- <PlatformPicker
- noAutoFilter
- source="targeted-onboarding"
- platform={onboardingContext.data.selectedSDK?.key}
- defaultCategory={onboardingContext.data.selectedSDK?.category}
- setPlatform={platform => {
- onboardingContext.setData({
- ...onboardingContext.data,
- selectedSDK: platform
- ? {...omit(platform, 'id'), key: platform.id}
- : undefined,
- });
- }}
- organization={organization}
- />
- </motion.div>
- <CreateProjectsFooter
- {...props}
- organization={organization}
- clearPlatform={() => {
- onboardingContext.setData({...onboardingContext.data, selectedSDK: undefined});
- }}
- selectedPlatform={selectedPlatform}
- />
- </Wrapper>
- );
- }
- const Wrapper = styled('div')`
- max-width: 850px;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- `;
|