frontend: ReleaseNotes/UpdatePopup: Add stories for states

The stories didn't show the different states.

Also added some documentation for the props fields.

Signed-off-by: René Dudfield <renedudfield@microsoft.com>

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,
 };

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();

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>

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>