chore: add stories for Latency component (#12374)

aslilac · web-flow · commit f4c888f33e4e · 2024-03-01T10:26:38.000-07:00
diff --git a/site/src/components/Latency/Latency.stories.tsx 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/Latency/Latency.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
@@ -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)}
                 />
