From f4c888f33e4e2f23f51a7b08e7b41a8d570b8df0 Mon Sep 17 00:00:00 2001
From: Kayla Washburn-Love <mckayla@hey.com>
Date: Fri, 1 Mar 2024 10:26:38 -0700
Subject: [PATCH] chore: add stories for `Latency` component (#12374)

---
 .../components/Latency/Latency.stories.tsx    | 34 +++++++++++++++++++
 .../Latency.tsx}                              |  7 ++--
 .../modules/dashboard/Navbar/NavbarView.tsx   |  6 ++--
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 site/src/components/Latency/Latency.stories.tsx
 rename site/src/components/{ProxyStatusLatency/ProxyStatusLatency.tsx => Latency/Latency.tsx} (91%)

diff --git a/site/src/components/Latency/Latency.stories.tsx b/site/src/components/Latency/Latency.stories.tsx
new file mode 100644
index 0000000000..0b1b76439c
--- /dev/null
+++ b/site/src/components/Latency/Latency.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Latency } from "./Latency";
+
+const meta: Meta<typeof Latency> = {
+  title: "components/Latency",
+  component: Latency,
+};
+
+export default meta;
+type Story = StoryObj<typeof Latency>;
+
+export const Low: Story = {
+  args: {
+    latency: 10,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    latency: 150,
+  },
+};
+
+export const High: Story = {
+  args: {
+    latency: 300,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
diff --git a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx b/site/src/components/Latency/Latency.tsx
similarity index 91%
rename from site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
rename to site/src/components/Latency/Latency.tsx
index 6efb105961..738ef1a85b 100644
--- a/site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
+++ b/site/src/components/Latency/Latency.tsx
@@ -7,15 +7,12 @@ import { type FC } from "react";
 import { getLatencyColor } from "utils/latency";
 import { Abbr } from "components/Abbr/Abbr";
 
-interface ProxyStatusLatencyProps {
+interface LatencyProps {
   latency?: number;
   isLoading?: boolean;
 }
 
-export const ProxyStatusLatency: FC<ProxyStatusLatencyProps> = ({
-  latency,
-  isLoading,
-}) => {
+export const Latency: FC<LatencyProps> = ({ latency, isLoading }) => {
   const theme = useTheme();
   // Always use the no latency color for loading.
   const color = getLatencyColor(theme, isLoading ? undefined : latency);
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index 533d5a84bb..60e6db1fea 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -17,7 +17,7 @@ import { usePermissions } from "contexts/auth/usePermissions";
 import type { ProxyContextValue } from "contexts/ProxyContext";
 import { Abbr } from "components/Abbr/Abbr";
 import { displayError } from "components/GlobalSnackbar/utils";
-import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
+import { Latency } from "components/Latency/Latency";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import { UserDropdown } from "./UserDropdown/UserDropdown";
 
@@ -276,7 +276,7 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
               />
             </div>
 
-            <ProxyStatusLatency
+            <Latency
               latency={latencies?.[selectedProxy.id]?.latencyMS}
               isLoading={proxyLatencyLoading(selectedProxy)}
             />
@@ -385,7 +385,7 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 
                 {proxy.display_name}
 
-                <ProxyStatusLatency
+                <Latency
                   latency={latencies?.[proxy.id]?.latencyMS}
                   isLoading={proxyLatencyLoading(proxy)}
                 />