create.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import React, {useEffect, useState} from 'react';
  2. import {browserHistory, RouteComponentProps} from 'react-router';
  3. import Feature from 'app/components/acl/feature';
  4. import Alert from 'app/components/alert';
  5. import {t} from 'app/locale';
  6. import {PageContent} from 'app/styles/organization';
  7. import {Organization} from 'app/types';
  8. import withOrganization from 'app/utils/withOrganization';
  9. import {EMPTY_DASHBOARD} from './data';
  10. import DashboardDetail from './detail';
  11. import {DashboardState, Widget} from './types';
  12. import {cloneDashboard, constructWidgetFromQuery} from './utils';
  13. type Props = RouteComponentProps<{orgId: string}, {}> & {
  14. organization: Organization;
  15. children: React.ReactNode;
  16. };
  17. function CreateDashboard(props: Props) {
  18. const {organization, location} = props;
  19. const [newWidget, setNewWidget] = useState<Widget | undefined>();
  20. function renderDisabled() {
  21. return (
  22. <PageContent>
  23. <Alert type="warning">{t("You don't have access to this feature")}</Alert>
  24. </PageContent>
  25. );
  26. }
  27. const dashboard = cloneDashboard(EMPTY_DASHBOARD);
  28. useEffect(() => {
  29. const constructedWidget = constructWidgetFromQuery(location.query);
  30. setNewWidget(constructedWidget);
  31. if (constructedWidget) {
  32. browserHistory.replace(location.pathname);
  33. }
  34. }, [organization.slug]);
  35. return (
  36. <Feature
  37. features={['dashboards-edit']}
  38. organization={props.organization}
  39. renderDisabled={renderDisabled}
  40. >
  41. <DashboardDetail
  42. {...props}
  43. initialState={DashboardState.CREATE}
  44. dashboard={dashboard}
  45. dashboards={[]}
  46. newWidget={newWidget}
  47. />
  48. </Feature>
  49. );
  50. }
  51. export default withOrganization(CreateDashboard);