projectEnvironments.tsx 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. import {Component, Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  5. import {Client} from 'sentry/api';
  6. import Access from 'sentry/components/acl/access';
  7. import {Button} from 'sentry/components/button';
  8. import EmptyMessage from 'sentry/components/emptyMessage';
  9. import ListLink from 'sentry/components/links/listLink';
  10. import LoadingIndicator from 'sentry/components/loadingIndicator';
  11. import NavTabs from 'sentry/components/navTabs';
  12. import Panel from 'sentry/components/panels/panel';
  13. import PanelBody from 'sentry/components/panels/panelBody';
  14. import PanelHeader from 'sentry/components/panels/panelHeader';
  15. import PanelItem from 'sentry/components/panels/panelItem';
  16. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  17. import {ALL_ENVIRONMENTS_KEY} from 'sentry/constants';
  18. import {t, tct} from 'sentry/locale';
  19. import {space} from 'sentry/styles/space';
  20. import {Environment, Organization, Project} from 'sentry/types';
  21. import {getDisplayName, getUrlRoutingName} from 'sentry/utils/environment';
  22. import recreateRoute from 'sentry/utils/recreateRoute';
  23. import withApi from 'sentry/utils/withApi';
  24. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  25. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  26. type Props = {
  27. api: Client;
  28. organization: Organization;
  29. project: Project;
  30. } & RouteComponentProps<{projectId: string}, {}>;
  31. type State = {
  32. environments: null | Environment[];
  33. isLoading: boolean;
  34. };
  35. class ProjectEnvironments extends Component<Props, State> {
  36. state: State = {
  37. environments: null,
  38. isLoading: true,
  39. };
  40. componentDidMount() {
  41. this.fetchData();
  42. }
  43. componentDidUpdate(prevProps: Props) {
  44. if (
  45. this.props.location.pathname.endsWith('hidden/') !==
  46. prevProps.location.pathname.endsWith('hidden/')
  47. ) {
  48. this.fetchData();
  49. }
  50. }
  51. fetchData() {
  52. const isHidden = this.props.location.pathname.endsWith('hidden/');
  53. if (!this.state.isLoading) {
  54. this.setState({isLoading: true});
  55. }
  56. const {organization} = this.props;
  57. const {projectId} = this.props.params;
  58. this.props.api.request(`/projects/${organization.slug}/${projectId}/environments/`, {
  59. query: {
  60. visibility: isHidden ? 'hidden' : 'visible',
  61. },
  62. success: environments => {
  63. this.setState({environments, isLoading: false});
  64. },
  65. });
  66. }
  67. // Toggle visibility of environment
  68. toggleEnv = (env: Environment, shouldHide: boolean) => {
  69. const {organization} = this.props;
  70. const {projectId} = this.props.params;
  71. this.props.api.request(
  72. `/projects/${organization.slug}/${projectId}/environments/${getUrlRoutingName(
  73. env
  74. )}/`,
  75. {
  76. method: 'PUT',
  77. data: {
  78. name: env.name,
  79. isHidden: shouldHide,
  80. },
  81. success: () => {
  82. addSuccessMessage(
  83. tct('Updated [environment]', {
  84. environment: getDisplayName(env),
  85. })
  86. );
  87. },
  88. error: () => {
  89. addErrorMessage(
  90. tct('Unable to update [environment]', {
  91. environment: getDisplayName(env),
  92. })
  93. );
  94. },
  95. complete: this.fetchData.bind(this),
  96. }
  97. );
  98. };
  99. renderEmpty() {
  100. const isHidden = this.props.location.pathname.endsWith('hidden/');
  101. const message = isHidden
  102. ? t("You don't have any hidden environments.")
  103. : t("You don't have any environments yet.");
  104. return <EmptyMessage>{message}</EmptyMessage>;
  105. }
  106. /**
  107. * Renders rows for "system" environments:
  108. * - "All Environments"
  109. * - "No Environment"
  110. *
  111. */
  112. renderAllEnvironmentsSystemRow() {
  113. // Not available in "Hidden" tab
  114. const isHidden = this.props.location.pathname.endsWith('hidden/');
  115. if (isHidden) {
  116. return null;
  117. }
  118. const {project} = this.props;
  119. return (
  120. <EnvironmentRow
  121. project={project}
  122. name={ALL_ENVIRONMENTS_KEY}
  123. environment={{
  124. id: ALL_ENVIRONMENTS_KEY,
  125. name: ALL_ENVIRONMENTS_KEY,
  126. displayName: ALL_ENVIRONMENTS_KEY,
  127. }}
  128. isSystemRow
  129. />
  130. );
  131. }
  132. renderEnvironmentList(envs: Environment[]) {
  133. const {project} = this.props;
  134. const isHidden = this.props.location.pathname.endsWith('hidden/');
  135. const buttonText = isHidden ? t('Show') : t('Hide');
  136. return (
  137. <Fragment>
  138. {this.renderAllEnvironmentsSystemRow()}
  139. {envs.map(env => (
  140. <EnvironmentRow
  141. project={project}
  142. key={env.id}
  143. name={env.name}
  144. environment={env}
  145. isHidden={isHidden}
  146. onHide={this.toggleEnv}
  147. actionText={buttonText}
  148. shouldShowAction
  149. />
  150. ))}
  151. </Fragment>
  152. );
  153. }
  154. renderBody() {
  155. const {environments, isLoading} = this.state;
  156. if (isLoading) {
  157. return <LoadingIndicator />;
  158. }
  159. return (
  160. <PanelBody>
  161. {environments?.length
  162. ? this.renderEnvironmentList(environments)
  163. : this.renderEmpty()}
  164. </PanelBody>
  165. );
  166. }
  167. render() {
  168. const {routes, params, location, project} = this.props;
  169. const isHidden = location.pathname.endsWith('hidden/');
  170. const baseUrl = recreateRoute('', {routes, params, stepBack: -1});
  171. return (
  172. <div>
  173. <SentryDocumentTitle title={t('Environments')} projectSlug={params.projectId} />
  174. <SettingsPageHeader
  175. title={t('Manage Environments')}
  176. tabs={
  177. <NavTabs underlined>
  178. <ListLink to={baseUrl} index isActive={() => !isHidden}>
  179. {t('Environments')}
  180. </ListLink>
  181. <ListLink to={`${baseUrl}hidden/`} index isActive={() => isHidden}>
  182. {t('Hidden')}
  183. </ListLink>
  184. </NavTabs>
  185. }
  186. />
  187. <PermissionAlert project={project} />
  188. <Panel>
  189. <PanelHeader>{isHidden ? t('Hidden') : t('Active Environments')}</PanelHeader>
  190. {this.renderBody()}
  191. </Panel>
  192. </div>
  193. );
  194. }
  195. }
  196. type RowProps = {
  197. environment: Environment;
  198. name: string;
  199. project: Project;
  200. actionText?: string;
  201. isHidden?: boolean;
  202. isSystemRow?: boolean;
  203. onHide?: (env: Environment, isHidden: boolean) => void;
  204. shouldShowAction?: boolean;
  205. };
  206. function EnvironmentRow({
  207. project,
  208. environment,
  209. name,
  210. onHide,
  211. shouldShowAction = false,
  212. isSystemRow = false,
  213. isHidden = false,
  214. actionText = '',
  215. }: RowProps) {
  216. return (
  217. <EnvironmentItem>
  218. <Name>{isSystemRow ? t('All Environments') : name}</Name>
  219. <Access access={['project:write']} project={project}>
  220. {({hasAccess}) => (
  221. <Fragment>
  222. {shouldShowAction && onHide && (
  223. <EnvironmentButton
  224. size="xs"
  225. disabled={!hasAccess}
  226. onClick={() => onHide(environment, !isHidden)}
  227. >
  228. {actionText}
  229. </EnvironmentButton>
  230. )}
  231. </Fragment>
  232. )}
  233. </Access>
  234. </EnvironmentItem>
  235. );
  236. }
  237. const EnvironmentItem = styled(PanelItem)`
  238. align-items: center;
  239. justify-content: space-between;
  240. `;
  241. const Name = styled('div')`
  242. display: flex;
  243. align-items: center;
  244. `;
  245. const EnvironmentButton = styled(Button)`
  246. margin-left: ${space(0.5)};
  247. `;
  248. export {ProjectEnvironments};
  249. export default withApi(ProjectEnvironments);