settingsIndex.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. import {useEffect} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import type {Theme} from '@emotion/react';
  4. import {css} from '@emotion/react';
  5. import styled from '@emotion/styled';
  6. import {fetchOrganizationDetails} from 'sentry/actionCreators/organizations';
  7. import DemoModeGate from 'sentry/components/acl/demoModeGate';
  8. import OrganizationAvatar from 'sentry/components/avatar/organizationAvatar';
  9. import UserAvatar from 'sentry/components/avatar/userAvatar';
  10. import ExternalLink from 'sentry/components/links/externalLink';
  11. import type {LinkProps} from 'sentry/components/links/link';
  12. import Link from 'sentry/components/links/link';
  13. import LoadingIndicator from 'sentry/components/loadingIndicator';
  14. import Panel from 'sentry/components/panels/panel';
  15. import PanelBody from 'sentry/components/panels/panelBody';
  16. import PanelHeader from 'sentry/components/panels/panelHeader';
  17. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  18. import {IconDocs, IconLock, IconStack, IconSupport} from 'sentry/icons';
  19. import {t} from 'sentry/locale';
  20. import ConfigStore from 'sentry/stores/configStore';
  21. import {space} from 'sentry/styles/space';
  22. import type {Organization} from 'sentry/types';
  23. import useApi from 'sentry/utils/useApi';
  24. import withLatestContext from 'sentry/utils/withLatestContext';
  25. import SettingsLayout from 'sentry/views/settings/components/settingsLayout';
  26. const LINKS = {
  27. DOCUMENTATION: 'https://docs.sentry.io/',
  28. DOCUMENTATION_PLATFORMS: 'https://docs.sentry.io/platforms/',
  29. DOCUMENTATION_QUICKSTART: 'https://docs.sentry.io/platform-redirect/?next=/',
  30. DOCUMENTATION_CLI: 'https://docs.sentry.io/product/cli/',
  31. DOCUMENTATION_API: 'https://docs.sentry.io/api/',
  32. API: '/settings/account/api/',
  33. MANAGE: '/manage/',
  34. FORUM: 'https://forum.sentry.io/',
  35. GITHUB_ISSUES: 'https://github.com/getsentry/sentry/issues',
  36. SERVICE_STATUS: 'https://status.sentry.io/',
  37. };
  38. const HOME_ICON_SIZE = 56;
  39. interface SettingsIndexProps extends RouteComponentProps<{}, {}> {
  40. organization: Organization;
  41. }
  42. function SettingsIndex({organization, ...props}: SettingsIndexProps) {
  43. const api = useApi();
  44. useEffect(() => {
  45. // if there is no org in context, SidebarDropdown uses an org from `withLatestContext`
  46. // (which queries the org index endpoint instead of org details)
  47. // and does not have `access` info
  48. if (organization && typeof organization.access === 'undefined') {
  49. fetchOrganizationDetails(api, organization.slug, {
  50. setActive: true,
  51. loadProjects: true,
  52. });
  53. }
  54. }, [api, organization]);
  55. const user = ConfigStore.get('user');
  56. const isSelfHosted = ConfigStore.get('isSelfHosted');
  57. const organizationSettingsUrl =
  58. (organization && `/settings/${organization.slug}/`) || '';
  59. const supportLinkProps = {
  60. isSelfHosted,
  61. organizationSettingsUrl,
  62. };
  63. const myAccount = (
  64. <GridPanel>
  65. <HomePanelHeader>
  66. <HomeLinkIcon to="/settings/account/">
  67. <UserAvatar user={user} size={HOME_ICON_SIZE} />
  68. {t('My Account')}
  69. </HomeLinkIcon>
  70. </HomePanelHeader>
  71. <HomePanelBody>
  72. <h3>{t('Quick links')}:</h3>
  73. <ul>
  74. <li>
  75. <HomeLink to="/settings/account/security/">
  76. {t('Change my password')}
  77. </HomeLink>
  78. </li>
  79. <li>
  80. <HomeLink to="/settings/account/notifications/">
  81. {t('Notification Preferences')}
  82. </HomeLink>
  83. </li>
  84. <li>
  85. <HomeLink to="/settings/account/">{t('Change my avatar')}</HomeLink>
  86. </li>
  87. </ul>
  88. </HomePanelBody>
  89. </GridPanel>
  90. );
  91. const orgSettings = (
  92. <GridPanel>
  93. {!organization && <LoadingIndicator overlay hideSpinner />}
  94. <HomePanelHeader>
  95. <HomeLinkIcon to={organizationSettingsUrl}>
  96. {organization ? (
  97. <OrganizationAvatar organization={organization} size={HOME_ICON_SIZE} />
  98. ) : (
  99. <HomeIconContainer color="green300">
  100. <IconStack size="lg" />
  101. </HomeIconContainer>
  102. )}
  103. <OrganizationName>
  104. {organization ? organization.slug : t('No Organization')}
  105. </OrganizationName>
  106. </HomeLinkIcon>
  107. </HomePanelHeader>
  108. <HomePanelBody>
  109. <h3>{t('Quick links')}:</h3>
  110. <ul>
  111. <li>
  112. <HomeLink to={`${organizationSettingsUrl}projects/`}>
  113. {t('Projects')}
  114. </HomeLink>
  115. </li>
  116. <li>
  117. <HomeLink to={`${organizationSettingsUrl}teams/`}>{t('Teams')}</HomeLink>
  118. </li>
  119. <li>
  120. <HomeLink to={`${organizationSettingsUrl}members/`}>{t('Members')}</HomeLink>
  121. </li>
  122. </ul>
  123. </HomePanelBody>
  124. </GridPanel>
  125. );
  126. const documentation = (
  127. <GridPanel>
  128. <HomePanelHeader>
  129. <ExternalHomeLinkIcon href={LINKS.DOCUMENTATION}>
  130. <HomeIconContainer color="pink300">
  131. <IconDocs size="lg" />
  132. </HomeIconContainer>
  133. {t('Documentation')}
  134. </ExternalHomeLinkIcon>
  135. </HomePanelHeader>
  136. <HomePanelBody>
  137. <h3>{t('Quick links')}:</h3>
  138. <ul>
  139. <li>
  140. <ExternalHomeLink href={LINKS.DOCUMENTATION_QUICKSTART}>
  141. {t('Quickstart Guide')}
  142. </ExternalHomeLink>
  143. </li>
  144. <li>
  145. <ExternalHomeLink href={LINKS.DOCUMENTATION_PLATFORMS}>
  146. {t('Platforms & Frameworks')}
  147. </ExternalHomeLink>
  148. </li>
  149. <li>
  150. <ExternalHomeLink href={LINKS.DOCUMENTATION_CLI}>
  151. {t('Sentry CLI')}
  152. </ExternalHomeLink>
  153. </li>
  154. </ul>
  155. </HomePanelBody>
  156. </GridPanel>
  157. );
  158. const support = (
  159. <GridPanel>
  160. <HomePanelHeader>
  161. <SupportLink icon {...supportLinkProps}>
  162. <HomeIconContainer color="activeText">
  163. <IconSupport size="lg" />
  164. </HomeIconContainer>
  165. {t('Support')}
  166. </SupportLink>
  167. </HomePanelHeader>
  168. <HomePanelBody>
  169. <h3>{t('Quick links')}:</h3>
  170. <ul>
  171. <li>
  172. <SupportLink {...supportLinkProps}>
  173. {isSelfHosted ? t('Community Forums') : t('Contact Support')}
  174. </SupportLink>
  175. </li>
  176. <li>
  177. <ExternalHomeLink href={LINKS.GITHUB_ISSUES}>
  178. {t('Sentry on GitHub')}
  179. </ExternalHomeLink>
  180. </li>
  181. <li>
  182. <ExternalHomeLink href={LINKS.SERVICE_STATUS}>
  183. {t('Service Status')}
  184. </ExternalHomeLink>
  185. </li>
  186. </ul>
  187. </HomePanelBody>
  188. </GridPanel>
  189. );
  190. const apiKeys = (
  191. <GridPanel>
  192. <HomePanelHeader>
  193. <HomeLinkIcon to={LINKS.API}>
  194. <HomeIconContainer>
  195. <IconLock size="lg" isSolid />
  196. </HomeIconContainer>
  197. {t('API Keys')}
  198. </HomeLinkIcon>
  199. </HomePanelHeader>
  200. <HomePanelBody>
  201. <h3>{t('Quick links')}:</h3>
  202. <ul>
  203. <li>
  204. <HomeLink to={`${organizationSettingsUrl}auth-tokens/`}>
  205. {t('Organization Auth Tokens')}
  206. </HomeLink>
  207. </li>
  208. <li>
  209. <HomeLink to={LINKS.API}>{t('User Auth Tokens')}</HomeLink>
  210. </li>
  211. <li>
  212. <HomeLink to={`${organizationSettingsUrl}developer-settings/`}>
  213. {t('Custom Integrations')}
  214. </HomeLink>
  215. </li>
  216. <li>
  217. <ExternalHomeLink href={LINKS.DOCUMENTATION_API}>
  218. {t('Documentation')}
  219. </ExternalHomeLink>
  220. </li>
  221. </ul>
  222. </HomePanelBody>
  223. </GridPanel>
  224. );
  225. return (
  226. <SentryDocumentTitle
  227. title={organization ? `${organization.slug} Settings` : 'Settings'}
  228. >
  229. <SettingsLayout {...props}>
  230. <GridLayout>
  231. <DemoModeGate>{myAccount}</DemoModeGate>
  232. {orgSettings}
  233. {documentation}
  234. {support}
  235. <DemoModeGate>{apiKeys} </DemoModeGate>
  236. </GridLayout>
  237. </SettingsLayout>
  238. </SentryDocumentTitle>
  239. );
  240. }
  241. export default withLatestContext(SettingsIndex);
  242. const GridLayout = styled('div')`
  243. display: grid;
  244. grid-template-columns: 1fr 1fr 1fr;
  245. gap: ${space(2)};
  246. `;
  247. const GridPanel = styled(Panel)`
  248. margin-bottom: 0;
  249. `;
  250. const HomePanelHeader = styled(PanelHeader)`
  251. background: ${p => p.theme.background};
  252. font-size: ${p => p.theme.fontSizeExtraLarge};
  253. align-items: center;
  254. text-transform: unset;
  255. padding: ${space(4)};
  256. `;
  257. const HomePanelBody = styled(PanelBody)`
  258. padding: 30px;
  259. h3 {
  260. font-size: 14px;
  261. }
  262. ul {
  263. margin: 0;
  264. li {
  265. line-height: 1.6;
  266. /* Bullet color */
  267. color: ${p => p.theme.gray200};
  268. }
  269. }
  270. `;
  271. const HomeIconContainer = styled('div')<{color?: string}>`
  272. background: ${p => p.theme[p.color || 'gray300']};
  273. color: ${p => p.theme.white};
  274. width: ${HOME_ICON_SIZE}px;
  275. height: ${HOME_ICON_SIZE}px;
  276. border-radius: ${HOME_ICON_SIZE}px;
  277. display: flex;
  278. justify-content: center;
  279. align-items: center;
  280. `;
  281. const linkCss = ({theme}: {theme: Theme}) => css`
  282. color: ${theme.activeText};
  283. &:hover {
  284. color: ${theme.activeText};
  285. }
  286. `;
  287. const linkIconCss = css`
  288. overflow: hidden;
  289. width: 100%;
  290. display: grid;
  291. grid-template-rows: max-content max-content;
  292. gap: ${space(1.5)};
  293. align-items: center;
  294. justify-items: center;
  295. justify-content: center;
  296. `;
  297. const HomeLink = styled(Link)`
  298. ${linkCss}
  299. `;
  300. const ExternalHomeLink = styled(ExternalLink)`
  301. ${linkCss}
  302. `;
  303. const HomeLinkIcon = styled(HomeLink)`
  304. ${linkIconCss}
  305. `;
  306. const ExternalHomeLinkIcon = styled(ExternalLink)`
  307. ${linkIconCss}
  308. `;
  309. interface SupportLinkProps extends Omit<LinkProps, 'ref' | 'to'> {
  310. isSelfHosted: boolean;
  311. organizationSettingsUrl: string;
  312. icon?: boolean;
  313. }
  314. function SupportLink({
  315. isSelfHosted,
  316. icon,
  317. organizationSettingsUrl,
  318. ...props
  319. }: SupportLinkProps) {
  320. if (isSelfHosted) {
  321. const SelfHostedLink = icon ? ExternalHomeLinkIcon : ExternalHomeLink;
  322. return <SelfHostedLink href={LINKS.FORUM} {...props} />;
  323. }
  324. const SelfHostedLink = icon ? HomeLinkIcon : HomeLink;
  325. return <SelfHostedLink to={`${organizationSettingsUrl}support`} {...props} />;
  326. }
  327. const OrganizationName = styled('div')`
  328. line-height: 1.1em;
  329. ${p => p.theme.overflowEllipsis};
  330. `;