import {Fragment, useCallback, useState} from 'react'; import {LinkButton} from 'sentry/components/button'; import EmptyMessage from 'sentry/components/emptyMessage'; import ExternalLink from 'sentry/components/links/externalLink'; import Link from 'sentry/components/links/link'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import Panel from 'sentry/components/panels/panel'; import PanelAlert from 'sentry/components/panels/panelAlert'; import PanelBody from 'sentry/components/panels/panelBody'; import PanelHeader from 'sentry/components/panels/panelHeader'; import {t, tct} from 'sentry/locale'; import {Organization, Project} from 'sentry/types'; import {useApiQuery} from 'sentry/utils/queryClient'; import useOrganization from 'sentry/utils/useOrganization'; import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader'; import TextBlock from 'sentry/views/settings/components/text/textBlock'; import {LoaderSettings} from 'sentry/views/settings/project/projectKeys/details/loaderSettings'; import {ProjectKey} from 'sentry/views/settings/project/projectKeys/types'; export function ProjectLoaderScript({project}: {project: Project}) { const organization = useOrganization(); const apiEndpoint = `/projects/${organization.slug}/${project.slug}/keys/`; const [updatedProjectKeys, setUpdatedProjectKeys] = useState([]); const { data: projectKeys, isLoading, error, refetch: refetchProjectKeys, } = useApiQuery([apiEndpoint], { staleTime: 0, }); const handleUpdateProjectKey = useCallback( (projectKey: ProjectKey) => { const existingProjectIndex = updatedProjectKeys.findIndex( key => key.id === projectKey.id ); const newUpdatedProjectKeys = existingProjectIndex > -1 ? [...updatedProjectKeys].map((updatedProjectKey, index) => { return index === existingProjectIndex ? projectKey : updatedProjectKey; }) : [...updatedProjectKeys, projectKey]; setUpdatedProjectKeys(newUpdatedProjectKeys); }, [updatedProjectKeys] ); return ( {tct( 'The Loader Script is the easiest way to initialize the Sentry SDK. The Loader Script automatically keeps your Sentry SDK up to date and offers configuration for different Sentry features. [docsLink:Learn more about the Loader Script]. Note: The Loader Script is bound to a Client Key (DSN), to create a new Script, go to the [clientKeysLink:Client Keys page].', { docsLink: ( ), clientKeysLink: ( ), } )} {isLoading && } {!!error && ( )} {!isLoading && !error && !projectKeys?.length && ( )} {projectKeys?.map(key => { const actualKey = updatedProjectKeys.find(updatedKey => updatedKey.id === key.id) ?? key; return ( ); })} ); } function LoaderItem({ organization, project, projectKey, onUpdateProjectKey, }: { onUpdateProjectKey: (projectKey: ProjectKey) => void; organization: Organization; project: Project; projectKey: ProjectKey; }) { return ( {tct('Client Key: [name]', {name: projectKey.name})} {t('View Key Details')} {t('Note that it can take a few minutes until changed options are live.')} ); } export default ProjectLoaderScript;