header.tsx 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import Breadcrumbs from 'sentry/components/breadcrumbs';
  2. import {Button} from 'sentry/components/button';
  3. import ButtonBar from 'sentry/components/buttonBar';
  4. import {FeatureFeedback} from 'sentry/components/featureFeedback';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import type {LinkProps} from 'sentry/components/links/link';
  7. import {t} from 'sentry/locale';
  8. import {DashboardDetails} from '../types';
  9. interface Props {
  10. dashboardTitle: DashboardDetails['title'];
  11. goBackLocation: LinkProps['to'];
  12. orgSlug: string;
  13. }
  14. export function Header({orgSlug, goBackLocation, dashboardTitle}: Props) {
  15. return (
  16. <Layout.Header>
  17. <Layout.HeaderContent>
  18. <Breadcrumbs
  19. crumbs={[
  20. {
  21. to: `/organizations/${orgSlug}/dashboards/`,
  22. label: t('Dashboards'),
  23. },
  24. {
  25. to: goBackLocation,
  26. label: dashboardTitle,
  27. },
  28. {label: t('Widget Builder')},
  29. ]}
  30. />
  31. </Layout.HeaderContent>
  32. <Layout.HeaderActions>
  33. <ButtonBar gap={1}>
  34. <FeatureFeedback buttonProps={{size: 'sm'}} featureName="widget-builder" />
  35. <Button
  36. external
  37. size="sm"
  38. href="https://docs.sentry.io/product/dashboards/custom-dashboards/#widget-builder"
  39. >
  40. {t('Read the docs')}
  41. </Button>
  42. </ButtonBar>
  43. </Layout.HeaderActions>
  44. </Layout.Header>
  45. );
  46. }