projectPageFilter.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import {useState} from 'react';
  2. import {withRouter, WithRouterProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import partition from 'lodash/partition';
  5. import {updateProjects} from 'sentry/actionCreators/globalSelection';
  6. import DropdownButton from 'sentry/components/dropdownButton';
  7. import MultipleProjectSelector from 'sentry/components/organizations/multipleProjectSelector';
  8. import PlatformList from 'sentry/components/platformList';
  9. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  10. import {IconProject} from 'sentry/icons';
  11. import {t} from 'sentry/locale';
  12. import GlobalSelectionStore from 'sentry/stores/globalSelectionStore';
  13. import {useLegacyStore} from 'sentry/stores/useLegacyStore';
  14. import space from 'sentry/styles/space';
  15. import {MinimalProject} from 'sentry/types';
  16. import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
  17. import useOrganization from 'sentry/utils/useOrganization';
  18. import useProjects from 'sentry/utils/useProjects';
  19. type Props = {
  20. router: WithRouterProps['router'];
  21. /**
  22. * Message to display at the bottom of project list
  23. */
  24. footerMessage?: React.ReactNode;
  25. /**
  26. * Subject that will be used in a tooltip that is shown on a lock icon hover
  27. * E.g. This 'issue' is unique to a project
  28. */
  29. lockedMessageSubject?: string;
  30. /**
  31. * If true, there will be a back to issues stream icon link
  32. */
  33. showIssueStreamLink?: boolean;
  34. /**
  35. * If true, there will be a project settings icon link
  36. * (forceProject prop needs to be present to know the right project slug)
  37. */
  38. showProjectSettingsLink?: boolean;
  39. /**
  40. * Slugs of projects to restrict the project selector to
  41. */
  42. specificProjectSlugs?: string[];
  43. /**
  44. * A project will be forced from parent component (selection is disabled, and if user
  45. * does not have multi-project support enabled, it will not try to auto select a project).
  46. *
  47. * Project will be specified in the prop `forceProject` (since its data is async)
  48. */
  49. shouldForceProject?: boolean;
  50. /**
  51. * If a forced project is passed, selection is disabled
  52. */
  53. forceProject?: MinimalProject | null;
  54. };
  55. export function ProjectPageFilter({router, specificProjectSlugs, ...otherProps}: Props) {
  56. const [currentSelectedProjects, setCurrentSelectedProjects] = useState<number[] | null>(
  57. null
  58. );
  59. const {projects, initiallyLoaded: projectsLoaded} = useProjects();
  60. const organization = useOrganization();
  61. const {selection, isReady} = useLegacyStore(GlobalSelectionStore);
  62. const handleChangeProjects = (newProjects: number[] | null) => {
  63. setCurrentSelectedProjects(newProjects);
  64. };
  65. const handleUpdateProjects = () => {
  66. // Clear environments when switching projects
  67. updateProjects(currentSelectedProjects || [], router, {
  68. save: true,
  69. resetParams: [],
  70. environments: [],
  71. });
  72. setCurrentSelectedProjects(null);
  73. };
  74. const specifiedProjects = specificProjectSlugs
  75. ? projects.filter(project => specificProjectSlugs.includes(project.slug))
  76. : projects;
  77. const [_, otherProjects] = partition(specifiedProjects, project => project.isMember);
  78. const isSuperuser = isActiveSuperuser();
  79. const isOrgAdmin = organization.access.includes('org:admin');
  80. const nonMemberProjects = isSuperuser || isOrgAdmin ? otherProjects : [];
  81. const customProjectDropdown = ({getActorProps, selectedProjects, isOpen}) => {
  82. const selectedProjectIds = new Set(selection.projects);
  83. const hasSelected = !!selectedProjects.length;
  84. const title = hasSelected
  85. ? selectedProjects.map(({slug}) => slug).join(', ')
  86. : selectedProjectIds.has(ALL_ACCESS_PROJECTS)
  87. ? t('All Projects')
  88. : t('My Projects');
  89. const icon = hasSelected ? (
  90. <PlatformList
  91. platforms={selectedProjects.map(p => p.platform ?? 'other').reverse()}
  92. max={5}
  93. />
  94. ) : (
  95. <IconProject />
  96. );
  97. return (
  98. <StyledDropdownButton isOpen={isOpen} {...getActorProps()}>
  99. <DropdownTitle>
  100. {icon}
  101. {title}
  102. </DropdownTitle>
  103. </StyledDropdownButton>
  104. );
  105. };
  106. const customLoadingIndicator = (
  107. <StyledDropdownButton showChevron={false} disabled>
  108. <DropdownTitle>
  109. <IconProject />
  110. {t('Loading\u2026')}
  111. </DropdownTitle>
  112. </StyledDropdownButton>
  113. );
  114. return (
  115. <MultipleProjectSelector
  116. organization={organization}
  117. projects={projects}
  118. isGlobalSelectionReady={projectsLoaded && isReady}
  119. nonMemberProjects={nonMemberProjects}
  120. value={currentSelectedProjects || selection.projects}
  121. onChange={handleChangeProjects}
  122. onUpdate={handleUpdateProjects}
  123. customDropdownButton={customProjectDropdown}
  124. customLoadingIndicator={customLoadingIndicator}
  125. {...otherProps}
  126. />
  127. );
  128. }
  129. const StyledDropdownButton = styled(DropdownButton)`
  130. width: 100%;
  131. height: 40px;
  132. `;
  133. const DropdownTitle = styled('div')`
  134. display: grid;
  135. grid-auto-flow: column;
  136. grid-gap: ${space(1)};
  137. align-items: center;
  138. white-space: nowrap;
  139. `;
  140. export default withRouter(ProjectPageFilter);