From 2b4b2e17c0076af8a70a891abd96e9b508316552 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Thu, 4 Jan 2024 17:53:20 +0000
Subject: [PATCH] docs: make refresh buttons have apparent actions

adds alerts to make actions apparent

Closes #2349
---
 stories/components/get/get.stories.js | 48 ++++++++++++++++-----------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/stories/components/get/get.stories.js b/stories/components/get/get.stories.js
index 87ff3533db..3f0cdb62e8 100644
--- a/stories/components/get/get.stories.js
+++ b/stories/components/get/get.stories.js
@@ -185,29 +185,39 @@ export const PollingRate = () => html`
 `;
 
 export const refresh = () => html`
-    <mgt-get cache-enabled="true" resource="/me/presence" version="beta" scopes="Presence.Read">
-      <template data-type="default"> {{availability}} </template>
-      <template data-type="loading">
-        <h2>Loading...?!?!</h2>
-      </template>
-    </mgt-get>
-
-    <div>
-      <label>get.refresh(false)</label>
-      <button id="false">Soft refresh</button>
-    </div>
+<div>
+    <label>get.refresh(false)</label>
+    <button id="false">Soft refresh</button>
+</div>
+<div>
     <label>get.refresh(true)</label>
     <button id="true">Hard refresh</button>
+</div>
 
+<mgt-get cache-enabled="true" resource="/me/messages" version="beta">
+  <template data-type="default"> {{ this }}</template>
+  <template data-type="loading">
+    <h2>Loading...?!?!</h2>
+  </template>
+</mgt-get>
+
+<script>
+const softRefreshButton = document.querySelector('#false');
+const hardRefreshButton = document.querySelector('#true');
+const getElement = document.querySelector('mgt-get');
 
-  <script>
+const softRefresh = () => {
+  alert('requesting soft refresh of mgt-get component');
+  getElement.refresh(false);
+};
+
+const hardRefresh = () => {
+  alert('requesting hard refresh of mgt-get component');
+  getElement.refresh(true);
+};
 
-    document.querySelector('#false').addEventListener('click', _ =>{
-          document.querySelector('mgt-get').refresh(false)
-    })
+softRefreshButton.addEventListener('click', softRefresh)
 
-    document.querySelector('#true').addEventListener('click', _ =>{
-      document.querySelector('mgt-get').refresh(true)
-    })
-  </script>
+hardRefreshButton.addEventListener('click', hardRefresh)
+</script>
 `;