create.tsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import {useEffect, useState} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import {browserHistory} from 'react-router';
  4. import Feature from 'sentry/components/acl/feature';
  5. import {Alert} from 'sentry/components/alert';
  6. import ErrorBoundary from 'sentry/components/errorBoundary';
  7. import * as Layout from 'sentry/components/layouts/thirds';
  8. import {t} from 'sentry/locale';
  9. import type {Organization} from 'sentry/types';
  10. import withOrganization from 'sentry/utils/withOrganization';
  11. import {DASHBOARDS_TEMPLATES, EMPTY_DASHBOARD} from './data';
  12. import DashboardDetail from './detail';
  13. import type {Widget} from './types';
  14. import {DashboardState} from './types';
  15. import {cloneDashboard, constructWidgetFromQuery} from './utils';
  16. type Props = RouteComponentProps<{templateId?: string; widgetId?: string}, {}> & {
  17. children: React.ReactNode;
  18. organization: Organization;
  19. };
  20. function CreateDashboard(props: Props) {
  21. const {location} = props;
  22. const {templateId} = props.params;
  23. const [newWidget, setNewWidget] = useState<Widget | undefined>();
  24. function renderDisabled() {
  25. return (
  26. <Layout.Page withPadding>
  27. <Alert type="warning">{t("You don't have access to this feature")}</Alert>
  28. </Layout.Page>
  29. );
  30. }
  31. const template = templateId
  32. ? DASHBOARDS_TEMPLATES.find(dashboardTemplate => dashboardTemplate.id === templateId)
  33. : undefined;
  34. const dashboard = template ? cloneDashboard(template) : cloneDashboard(EMPTY_DASHBOARD);
  35. const initialState = template ? DashboardState.PREVIEW : DashboardState.CREATE;
  36. useEffect(() => {
  37. const constructedWidget = constructWidgetFromQuery(location.query);
  38. setNewWidget(constructedWidget);
  39. if (constructedWidget) {
  40. browserHistory.replace(location.pathname);
  41. }
  42. }, [location.pathname, location.query]);
  43. return (
  44. <Feature
  45. features="dashboards-edit"
  46. organization={props.organization}
  47. renderDisabled={renderDisabled}
  48. >
  49. <ErrorBoundary>
  50. <DashboardDetail
  51. {...props}
  52. initialState={initialState}
  53. dashboard={dashboard}
  54. dashboards={[]}
  55. newWidget={newWidget}
  56. onSetNewWidget={() => setNewWidget(undefined)}
  57. />
  58. </ErrorBoundary>
  59. </Feature>
  60. );
  61. }
  62. export default withOrganization(CreateDashboard);