From 4dcbe53fafd7b0943da8a913d212611fc6ee5aeb Mon Sep 17 00:00:00 2001
From: Matej Minar <matej.minar@sentry.io>
Date: Tue, 19 Sep 2023 08:00:04 +0200
Subject: [PATCH] feat(ddm): Add layout and alpha badge (#56398)

---
 static/app/components/sidebar/index.tsx |  1 +
 static/app/views/ddm/ddm.tsx            | 31 ++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
index e2968c46e136e6..e363d5f6e7f7a6 100644
--- a/static/app/components/sidebar/index.tsx
+++ b/static/app/components/sidebar/index.tsx
@@ -351,6 +351,7 @@ function Sidebar({location, organization}: Props) {
         label={t('DDM')}
         to={`/organizations/${organization.slug}/ddm/`}
         id="ddm"
+        isAlpha
       />
     </Feature>
   );
diff --git a/static/app/views/ddm/ddm.tsx b/static/app/views/ddm/ddm.tsx
index 657abc71037c40..f6db61668a7bbe 100644
--- a/static/app/views/ddm/ddm.tsx
+++ b/static/app/views/ddm/ddm.tsx
@@ -1,3 +1,9 @@
+import ButtonBar from 'sentry/components/buttonBar';
+import FeatureBadge from 'sentry/components/featureBadge';
+import {FeatureFeedback} from 'sentry/components/featureFeedback';
+import * as Layout from 'sentry/components/layouts/thirds';
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -7,7 +13,30 @@ function DDM() {
 
   return (
     <SentryDocumentTitle title={t('DDM')} orgSlug={organization.slug}>
-      {t('DDM')}
+      <PageFiltersContainer>
+        <Layout.Page>
+          <Layout.Header>
+            <Layout.HeaderContent>
+              <Layout.Title>
+                {t('DDM')}
+                <PageHeadingQuestionTooltip
+                  docsUrl="https://docs.sentry.io"
+                  title={t('Delightful Developer Metrics.')}
+                />
+                <FeatureBadge type="alpha" />
+              </Layout.Title>
+            </Layout.HeaderContent>
+            <Layout.HeaderActions>
+              <ButtonBar gap={1}>
+                <FeatureFeedback featureName="DDM" buttonProps={{size: 'sm'}} />
+              </ButtonBar>
+            </Layout.HeaderActions>
+          </Layout.Header>
+          <Layout.Body>
+            <Layout.Main fullWidth>.</Layout.Main>
+          </Layout.Body>
+        </Layout.Page>
+      </PageFiltersContainer>
     </SentryDocumentTitle>
   );
 }