From 5aa792c2362eebbf2abf515625acb3918a602097 Mon Sep 17 00:00:00 2001
From: Ryan Feigenbaum <48868107+royalfig@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:35:18 -0400
Subject: [PATCH] Add IDs for metrics (#19981)

REF:
https://linear.app/tryghost/issue/IPC-139/ensure-buttons-have-ids-for-posthog
- Added IDs to facilitate measurement in PH.
---
 .../dashboard/onboarding-checklist.hbs           | 16 ++++++++--------
 .../dashboard/onboarding/share-modal.hbs         | 11 ++++++-----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
index cd6f71a8ed..15c9a70fe0 100644
--- a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
+++ b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
@@ -29,7 +29,7 @@
                 />
             </div>
             {{!-- Step 2 --}}
-            <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item {{onboarding-step-class "customize-design"}}" {{on "click" (fn this.onboarding.markStepCompleted "customize-design")}}>
+            <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item {{onboarding-step-class "customize-design"}}" id="ob-customize-design" {{on "click" (fn this.onboarding.markStepCompleted "customize-design")}}>
                 <Dashboard::Onboarding::Step
                     @icon="brush"
                     @title="Customize your design"
@@ -38,16 +38,16 @@
                 />
             </LinkTo>
             {{!-- Step 3 --}}
-            <LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item {{onboarding-step-class "first-post"}}" {{on "click" (fn this.onboarding.markStepCompleted "first-post")}}>
+            <LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item {{onboarding-step-class "first-post"}}" id="ob-first-post" {{on "click" (fn this.onboarding.markStepCompleted "first-post")}}>
                 <Dashboard::Onboarding::Step
                     @icon="writing"
                     @title="Explore the editor"
-                    @description="Get to know a writing experience you’ll love."
+                    @description="Get to know a writing experience you'll love."
                     @complete={{is-onboarding-step-completed "first-post"}}
                 />
             </LinkTo>
             {{!-- Step 4 --}}
-            <LinkTo @route="members" class="gh-onboarding-item {{onboarding-step-class "build-audience"}}" {{on "click" (fn this.onboarding.markStepCompleted "build-audience")}}>
+            <LinkTo @route="members" class="gh-onboarding-item {{onboarding-step-class "build-audience"}}" id="ob-build-audience" {{on "click" (fn this.onboarding.markStepCompleted "build-audience")}}>
                 <Dashboard::Onboarding::Step
                     @icon="member-add"
                     @title="Build your audience"
@@ -56,7 +56,7 @@
                 />
             </LinkTo>
             {{!-- Step 5 --}}
-            <div role="button" {{on "click" this.openShareModal}} class="gh-onboarding-item {{onboarding-step-class "share-publication"}}">
+            <div role="button" {{on "click" this.openShareModal}} class="gh-onboarding-item {{onboarding-step-class "share-publication"}}" id="ob-share-publication">
                 <Dashboard::Onboarding::Step
                     @icon="megaphone"
                     @title="Share your publication"
@@ -69,12 +69,12 @@
     </div>
 
     {{#if this.onboarding.allStepsCompleted}}
-        <a href="#" class="gh-onboarding-explore-dashboard" {{on "click" this.onboarding.completeChecklist}}>Explore your dashboard</a>
+        <a href="#" class="gh-onboarding-explore-dashboard" id="ob-completed" {{on "click" this.onboarding.completeChecklist}}>Explore your dashboard</a>
     {{/if}}
 
-    <p class="gh-onboarding-help">More questions? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help Center</a>.</p>
+    <p class="gh-onboarding-help">More questions? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" id="ob-help-center" target="_blank" rel="noopener noreferrer">Help Center</a>.</p>
 
     {{#unless this.onboarding.allStepsCompleted}}
-        <a href="#" class="gh-onboarding-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
+        <a href="#" class="gh-onboarding-skip" id="ob-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
     {{/unless}}
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/components/dashboard/onboarding/share-modal.hbs b/ghost/admin/app/components/dashboard/onboarding/share-modal.hbs
index 9c3118aa72..eb8bf8b371 100644
--- a/ghost/admin/app/components/dashboard/onboarding/share-modal.hbs
+++ b/ghost/admin/app/components/dashboard/onboarding/share-modal.hbs
@@ -2,7 +2,7 @@
     <header class="modal-header">
         <h1>Share your publication</h1>
     </header>
-    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+    <button type="button" class="close" id="ob-close-share-modal" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
 
     <div class="gh-share-card-container">
         {{#let (get-setting "coverImage") as |imageUrl|}}
@@ -24,12 +24,13 @@
     </div>
 
 
-    <span class="gh-tip">Set your publication's cover image and description in <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup">Design settings</LinkTo>.</span>
+    <span class="gh-tip">Set your publication's cover image and description in <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" id="ob-share-modal-design-settings">Design settings</LinkTo>.</span>
 
     <div class="gh-copy-publication-link">
         <span>{{this.config.blogUrl}}</span>
         <GhTaskButton
             data-test-button="copy-share-link"
+            id="ob-copy-publication-link"
             @buttonText="Copy"
             @task={{this.copySiteUrl}}
             @successText="Copied!"
@@ -40,19 +41,19 @@
 
     <ul class="gh-share-links">
         <li>
-            <a href="https://twitter.com/intent/tweet?url={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on X">
+            <a href="https://twitter.com/intent/tweet?url={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" id="ob-share-on-x" title="Share your publication on X">
                 <span>{{svg-jar "social-x"}}</span>
             </a>
         </li>
         <li>
-            <a href="https://www.facebook.com/sharer/sharer.php?u={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on Facebook">
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" id="ob-share-on-fb" title="Share your publication on Facebook">
                 <div class="share-link-content">
                     <span>{{svg-jar "social-facebook"}}</span>
                 </div>
             </a>
         </li>
         <li>
-            <a href="https://www.linkedin.com/feed/?shareActive=true&text={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" title="Share your publication on LinkedIn">
+            <a href="https://www.linkedin.com/feed/?shareActive=true&text={{this.encodedUrl}}" target="_blank" rel="noopener noreferrer" class="gh-share-link" id="ob-share-on-li" title="Share your publication on LinkedIn">
                 <div class="share-link-content">
                     <span>{{svg-jar "social-linkedin"}}</span>
                 </div>