organizationAuthList.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import EmptyMessage from 'sentry/components/emptyMessage';
  2. import ExternalLink from 'sentry/components/links/externalLink';
  3. import Panel from 'sentry/components/panels/panel';
  4. import PanelAlert from 'sentry/components/panels/panelAlert';
  5. import PanelBody from 'sentry/components/panels/panelBody';
  6. import PanelHeader from 'sentry/components/panels/panelHeader';
  7. import {t, tct} from 'sentry/locale';
  8. import {AuthProvider, Organization} from 'sentry/types';
  9. import {descopeFeatureName} from 'sentry/utils';
  10. import getCsrfToken from 'sentry/utils/getCsrfToken';
  11. import withOrganization from 'sentry/utils/withOrganization';
  12. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  13. import PermissionAlert from 'sentry/views/settings/organization/permissionAlert';
  14. import ProviderItem from './providerItem';
  15. const PROVIDER_POPULARITY: Record<string, number> = {
  16. google: 0,
  17. github: 1,
  18. okta: 2,
  19. 'active-directory': 3,
  20. saml2: 4,
  21. onelogin: 5,
  22. rippling: 6,
  23. auth0: 7,
  24. jumpcloud: 8,
  25. };
  26. type Props = {
  27. organization: Organization;
  28. providerList: AuthProvider[];
  29. activeProvider?: AuthProvider;
  30. };
  31. function OrganizationAuthList({organization, providerList, activeProvider}: Props) {
  32. const features = organization.features;
  33. // Sort provider list twice: first, by popularity,
  34. // and then a second time, to sort unavailable providers for the current plan to the end of the list.
  35. const sortedByPopularity = (providerList ?? []).sort((a, b) => {
  36. if (!(a.key in PROVIDER_POPULARITY)) {
  37. return -1;
  38. }
  39. if (!(b.key in PROVIDER_POPULARITY)) {
  40. return 1;
  41. }
  42. if (PROVIDER_POPULARITY[a.key] === PROVIDER_POPULARITY[b.key]) {
  43. return 0;
  44. }
  45. return PROVIDER_POPULARITY[a.key] > PROVIDER_POPULARITY[b.key] ? 1 : -1;
  46. });
  47. const list = sortedByPopularity.sort((a, b) => {
  48. const aEnabled = features.includes(descopeFeatureName(a.requiredFeature));
  49. const bEnabled = features.includes(descopeFeatureName(b.requiredFeature));
  50. if (aEnabled === bEnabled) {
  51. return 0;
  52. }
  53. return aEnabled ? -1 : 1;
  54. });
  55. const warn2FADisable =
  56. organization.require2FA &&
  57. list.some(({requiredFeature}) =>
  58. features.includes(descopeFeatureName(requiredFeature))
  59. );
  60. return (
  61. <div className="sso">
  62. <SettingsPageHeader title="Authentication" />
  63. <PermissionAlert />
  64. <Panel>
  65. <PanelHeader>{t('Choose a provider')}</PanelHeader>
  66. <PanelBody>
  67. {!activeProvider && (
  68. <PanelAlert type="info">
  69. {tct(
  70. 'Get started with Single Sign-on for your organization by selecting a provider. Read more in our [link:SSO documentation].',
  71. {
  72. link: (
  73. <ExternalLink href="https://docs.sentry.io/product/accounts/sso/" />
  74. ),
  75. }
  76. )}
  77. </PanelAlert>
  78. )}
  79. {warn2FADisable && (
  80. <PanelAlert type="warning">
  81. {t('Require 2FA will be disabled if you enable SSO.')}
  82. </PanelAlert>
  83. )}
  84. <form
  85. action={`/organizations/${organization.slug}/auth/configure/`}
  86. method="POST"
  87. >
  88. <input type="hidden" name="csrfmiddlewaretoken" value={getCsrfToken()} />
  89. <input type="hidden" name="init" value="1" />
  90. {list.map(provider => (
  91. <ProviderItem
  92. key={provider.key}
  93. provider={provider}
  94. active={!!activeProvider && provider.key === activeProvider.key}
  95. />
  96. ))}
  97. {list.length === 0 && (
  98. <EmptyMessage>
  99. {t('No authentication providers are available.')}
  100. </EmptyMessage>
  101. )}
  102. </form>
  103. </PanelBody>
  104. </Panel>
  105. </div>
  106. );
  107. }
  108. export default withOrganization(OrganizationAuthList);
  109. // For tests
  110. export {OrganizationAuthList};