From d554b61f4207957f46e7fdafb41048dffc93feb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Dudfield?= <renedudfield@microsoft.com>
Date: Mon, 15 Jul 2024 17:21:43 +0200
Subject: [PATCH] frontend: ReleaseNotes/UpdatePopup: Add stories for states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stories didn't show the different states.

Also added some documentation for the props fields.

Signed-off-by: René Dudfield <renedudfield@microsoft.com>
---
 .../ReleaseNotes/UpdatePopup.stories.tsx      | 17 +++--
 .../common/ReleaseNotes/UpdatePopup.tsx       | 10 ++-
 .../UpdatePopup.Closed.stories.storyshot      | 72 -------------------
 .../UpdatePopup.FetchFailed.stories.storyshot | 20 ++++++
 .../UpdatePopup.Fetching.stories.storyshot    | 35 +++++++++
 5 files changed, 76 insertions(+), 78 deletions(-)
 delete mode 100644 frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Closed.stories.storyshot
 create mode 100644 frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.FetchFailed.stories.storyshot
 create mode 100644 frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Fetching.stories.storyshot

diff --git a/frontend/src/components/common/ReleaseNotes/UpdatePopup.stories.tsx b/frontend/src/components/common/ReleaseNotes/UpdatePopup.stories.tsx
index e4c3ff7938..3df80c41f8 100644
--- a/frontend/src/components/common/ReleaseNotes/UpdatePopup.stories.tsx
+++ b/frontend/src/components/common/ReleaseNotes/UpdatePopup.stories.tsx
@@ -1,4 +1,4 @@
-import UpdatePopup from './UpdatePopup';
+import UpdatePopup, { UpdatePopupProps } from './UpdatePopup';
 
 export default {
   title: 'common/ReleaseNotes/UpdatePopup',
@@ -12,8 +12,17 @@ export const Show = {
   },
 };
 
-export const Closed = {
+export const Fetching = {
   args: {
-    releaseDownloadURL: 'https://example.com',
-  },
+    releaseDownloadURL: null,
+    fetchingRelease: true,
+  } as UpdatePopupProps,
+};
+
+export const FetchFailed = {
+  args: {
+    releaseDownloadURL: null,
+    fetchingRelease: false,
+    releaseFetchFailed: true,
+  } as UpdatePopupProps,
 };
diff --git a/frontend/src/components/common/ReleaseNotes/UpdatePopup.tsx b/frontend/src/components/common/ReleaseNotes/UpdatePopup.tsx
index 9af46821e5..5e43e30ff0 100644
--- a/frontend/src/components/common/ReleaseNotes/UpdatePopup.tsx
+++ b/frontend/src/components/common/ReleaseNotes/UpdatePopup.tsx
@@ -11,12 +11,18 @@ const ColoredSnackbar = styled(Snackbar)({
   },
 });
 
-function UpdatePopup(props: {
+export interface UpdatePopupProps {
+  /** URL for the release */
   releaseDownloadURL?: string | null;
+  /** Whether the release is being fetched */
   fetchingRelease?: boolean;
+  /** If release fetch failed */
   releaseFetchFailed?: boolean;
+  /** if the user wants to skip a release */
   skipUpdateHandler: () => void;
-}) {
+}
+
+function UpdatePopup(props: UpdatePopupProps) {
   const [show, setShow] = React.useState(true);
   const { releaseDownloadURL, fetchingRelease, releaseFetchFailed, skipUpdateHandler } = props;
   const { t } = useTranslation();
diff --git a/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Closed.stories.storyshot b/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Closed.stories.storyshot
deleted file mode 100644
index 7a5537c848..0000000000
--- a/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Closed.stories.storyshot
+++ /dev/null
@@ -1,72 +0,0 @@
-<DocumentFragment>
-  <div
-    class="MuiSnackbar-root MuiSnackbar-anchorOriginBottomRight css-1mdvdtb-MuiSnackbar-root"
-    role="presentation"
-  >
-    <div
-      aria-describedby="updatePopup"
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation6 MuiSnackbarContent-root css-1rl5bq8-MuiPaper-root-MuiSnackbarContent-root"
-      direction="up"
-      role="alert"
-      style="opacity: 1; transform: scale(1, 1); transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-    >
-      <div
-        class="MuiSnackbarContent-message css-1exqwzz-MuiSnackbarContent-message"
-      >
-        An update is available
-      </div>
-      <div
-        class="MuiSnackbarContent-action css-1kr9x0n-MuiSnackbarContent-action"
-      >
-        <div
-          class="MuiBox-root css-70qvj9"
-        >
-          <div
-            class="MuiBox-root css-1aisqbv"
-          >
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
-              style="text-transform: none;"
-              tabindex="0"
-              type="button"
-            >
-              Read more
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-          <div
-            class="MuiBox-root css-1itv5e3"
-          >
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
-              style="color: rgb(255, 242, 0);"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-          <div
-            class="MuiBox-root css-0"
-          >
-            <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
-              style="color: rgb(255, 242, 0);"
-              tabindex="0"
-              type="button"
-            >
-              Dismiss
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
\ No newline at end of file
diff --git a/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.FetchFailed.stories.storyshot b/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.FetchFailed.stories.storyshot
new file mode 100644
index 0000000000..846753d94c
--- /dev/null
+++ b/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.FetchFailed.stories.storyshot
@@ -0,0 +1,20 @@
+<DocumentFragment>
+  <div
+    class="MuiSnackbar-root MuiSnackbar-anchorOriginBottomRight css-1mdvdtb-MuiSnackbar-root"
+    role="presentation"
+  >
+    <div
+      aria-describedby="updatePopup"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation6 MuiSnackbarContent-root css-1rl5bq8-MuiPaper-root-MuiSnackbarContent-root"
+      direction="up"
+      role="alert"
+      style="opacity: 1; transform: scale(1, 1); transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    >
+      <div
+        class="MuiSnackbarContent-message css-1exqwzz-MuiSnackbarContent-message"
+      >
+        Failed to fetch release information
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
\ No newline at end of file
diff --git a/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Fetching.stories.storyshot b/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Fetching.stories.storyshot
new file mode 100644
index 0000000000..f56424ab29
--- /dev/null
+++ b/frontend/src/components/common/ReleaseNotes/__snapshots__/UpdatePopup.Fetching.stories.storyshot
@@ -0,0 +1,35 @@
+<DocumentFragment>
+  <div
+    class="MuiSnackbar-root MuiSnackbar-anchorOriginBottomRight css-pvolpf-MuiSnackbar-root"
+    role="presentation"
+  >
+    <div
+      aria-describedby="updatePopup"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation6 MuiSnackbarContent-root css-1rl5bq8-MuiPaper-root-MuiSnackbarContent-root"
+      direction="up"
+      role="alert"
+      style="opacity: 1; transform: scale(1, 1); transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    >
+      <div
+        class="MuiSnackbarContent-message css-1exqwzz-MuiSnackbarContent-message"
+      >
+        Fetching release information…
+      </div>
+      <div
+        class="MuiSnackbarContent-action css-1kr9x0n-MuiSnackbarContent-action"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1gp6czg-MuiButtonBase-root-MuiButton-root"
+          style="color: rgb(255, 242, 0);"
+          tabindex="0"
+          type="button"
+        >
+          Skip
+          <span
+            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
\ No newline at end of file