refactor(content-health-monitor): add instructions on how to setup the env var (#262)

* Add instructional text for setting up MONITORED_CONTENT_GUID

* Actually remember to update the manifest

* Reword Step 2 to match language in Step 1

* Update extensions/content-health-monitor/content_health_utils.py

Co-authored-by: Toph Allen <[email protected]>

* Make it explicit what happens when clicking Refresh Report

* Ensure consistent punctuation in the setup instructions

* Remove unused images and image src attributes

* Add images to update-manifest command in Makefile

* Update manifest

* Update tests to match changed setup instructions

---------

Co-authored-by: Toph Allen <[email protected]>

Author: cgraham-rs

extensions/content-health-monitor/Makefile

@@ -49,7 +49,7 @@ clean:
 .PHONY: update-manifest
 update-manifest:
 	cp manifest.json manifest.old.json
-	uv run rsconnect write-manifest quarto content-health-monitor.qmd content_health_utils.py --overwrite
+	uv run rsconnect write-manifest quarto content-health-monitor.qmd content_health_utils.py images/refresh-report.png images/settings-gear-icon.png --overwrite
 	jq -n --slurpfile old manifest.old.json --slurpfile new manifest.json \
 		'{"version": $$new[0].version, "locale": $$new[0].locale, "metadata": $$new[0].metadata, "extension": $$old[0].extension, "environment": $$old[0].environment} * ($$new[0] | del(.version, .locale, .metadata))' \
 		> manifest.merged.json
@@ -67,4 +67,4 @@ help:
 	@echo "  clean           - Clean up virtual environment and cache files"
 	@echo "  update-manifest - Update manifest.json preserving extension and environment blocks"
 	@echo "  help            - Show this help message"
-	@echo "  all             - Setup environment and run tests (default)"
+	@echo "  all             - Setup environment and run tests (default)"

extensions/content-health-monitor/content_health_utils.py

@@ -66,10 +66,32 @@ def get_env_var(var_name, state, description=""):
             instruction = f"Please set the <code>{var_name}</code> environment variable."
         # Detailed instructions for MONITORED_CONTENT_GUID
         else:
+            one_tab = "&nbsp;&nbsp;&nbsp;&nbsp;"  # For indentation in HTML
+            two_tabs = f"{one_tab}{one_tab}"  # For deeper indentation
             instruction = (
-                f"Open the <b>Content Settings</b> panel, then navigate to the <b>Vars</b> pane. "
-                f"Create a new environment variable named <code>{var_name}</code>, set its value to the GUID of the content you want to monitor, "
-                f"and click <b>Add Variable</b>. When you're done, click <b>Refresh Report</b> in the upper right toolbar menu to continue."
+                f"To monitor a piece of content you must configure the <code>{var_name}</code> environment variable.<br><br>"
+                
+                f"<b>Step 1:</b> Locate the content you want to monitor in a new browser tab or window<br>"
+                f"{one_tab}<b>Option A:</b> Copy the GUID from the Content Settings panel<br>"
+                f"{two_tabs}• Click the <b>gear icon</b> in the top right toolbar to open <b>Content Settings</b><br>"
+                f'{two_tabs}<img src="images/settings-gear-icon.png" alt="Settings gear icon location" '
+                f'style="max-width: 80%; margin: 10px 0; border: 1px solid #ddd;"><br>'
+                f"{two_tabs}• Select the <b>Info</b> tab<br>"
+                f"{two_tabs}• Scroll to the bottom and click the <b>copy</b> button next to the GUID<br>"
+                f"{one_tab}<b>Option B:</b> Copy the full URL from your browser<br>"
+                f"{two_tabs}• If the address bar contains a GUID (ex: 1d97c1ff-e56c-4074-906f-cb3557685b75), "
+                f"you can simply copy the entire URL<br><br>"
+
+                f"<b>Step 2:</b> Return to this report to set the environment variable<br>"
+                f"{one_tab}• Click the <b>gear icon</b> to open <b>Content Settings</b><br>"
+                f"{one_tab}• Select the <b>Vars</b> tab<br>"
+                f"{one_tab}• Add a new variable named <code>{var_name}</code><br>"
+                f"{one_tab}• Paste the GUID you copied into the value field<br>"
+                f"{one_tab}• Click <b>Add Variable</b> and then <b>Save</b> to save it<br><br>"
+
+                f"<b>Step 3:</b> Click <b>Refresh Report</b> in the top right to to run a health check against the content specified in the new variable<br>"
+                f'<img src="images/refresh-report.png" alt="Refresh report button" style="max-width: 80%; margin: 10px 0; border: 1px solid #ddd;"><br><br>'
+
             )
 
         if description:

extensions/content-health-monitor/images/refresh-report.png

@@ -32,7 +32,7 @@
     "version": "3.11.7",
     "package_manager": {
       "name": "pip",
-      "version": "25.1.1",
+      "version": "24.2",
       "package_file": "requirements.txt"
     }
   },
@@ -41,10 +41,16 @@
       "checksum": "5f89d52674b219c0b0ed85f1a5785641"
     },
     "content-health-monitor.qmd": {
-      "checksum": "7a31430ef0d92505829e214ac85f8633"
+      "checksum": "8dfce167badb4d889eeb93d1f4adbff8"
     },
     "content_health_utils.py": {
-      "checksum": "73627372e41f90a2259ea5c0969d19a9"
+      "checksum": "3d599ebe8d29aa12ae630acc847e290a"
+    },
+    "images/refresh-report.png": {
+      "checksum": "e5680e6188eb8d659e4313cb89d0be3b"
+    },
+    "images/settings-gear-icon.png": {
+      "checksum": "e2bc43263eb8a9179b6e0e5ab3e22450"
     }
   }
 }

extensions/content-health-monitor/images/settings-gear-icon.png

@@ -163,7 +163,7 @@ def test_get_env_var_missing_canary_guid(self, state):
         assert result == ""
         assert state.show_instructions
         assert len(state.instructions) == 1
-        assert "Open the <b>Content Settings</b> panel" in state.instructions[0]
+        assert "you must configure the <code>MONITORED_CONTENT_GUID</code> environment variable" in state.instructions[0]
         assert f"<code>{var_name}</code>" in state.instructions[0]
 
     def test_get_env_var_with_description(self, state):