fix ts types

coder · Emyrk · Dec 18, 2024 · Dec 17, 2024 · Dec 17, 2024 · Dec 17, 2024
commit 39e1aacafd7c216ccec1d1b6f3eed2ce8b69e671
diff --git a/scripts/apitypings/main.go b/scripts/apitypings/main.go
@@ -6,6 +6,7 @@ import (
 
 	"github.com/coder/guts"
 	"github.com/coder/guts/bindings"
+	"github.com/coder/guts/bindings/walk"
 	"github.com/coder/guts/config"
 )
 
@@ -33,7 +34,8 @@ func main() {
 		"github.com/coder/serpent": "Serpent",
 		"tailscale.com/derp":       "",
 		// Conflicting name "DERPRegion"
-		"tailscale.com/tailcfg": "Tail",
+		"tailscale.com/tailcfg":      "Tail",
+		"tailscale.com/net/netcheck": "Netcheck",
 	}
 	for pkg, prefix := range referencePackages {
 		err = gen.IncludeReference(pkg, prefix)
@@ -75,6 +77,7 @@ func TsMutations(ts *guts.Typescript) {
 		// Omitempty + null is just '?' in golang json marshal
 		// number?: number | null --> number?: number
 		config.SimplifyOmitEmpty,
+		SimplifyUndefinedUnionFields,
 	)
 }
 
@@ -84,6 +87,8 @@ func TypeMappings(gen *guts.GoParser) error {
 
 	gen.IncludeCustomDeclaration(map[string]guts.TypeOverride{
 		"github.com/coder/coder/v2/codersdk.NullTime": config.OverrideNullable(config.OverrideLiteral(bindings.KeywordString)),
+		// opt.Bool can return 'null' if unset
+		"tailscale.com/types/opt.Bool": config.OverrideNullable(config.OverrideLiteral(bindings.KeywordBoolean)),
 	})
 
 	err := gen.IncludeCustom(map[string]string{
@@ -144,3 +149,32 @@ func FixSerpentStruct(gen *guts.Typescript) {
 		}
 	})
 }
+
+// SimplifyUndefinedUnionFields converts 'foo: string | undefined' to 'foo?: string'
+func SimplifyUndefinedUnionFields(gen *guts.Typescript) {
+	gen.ForEach(func(key string, originalNode bindings.Node) {
+		walk.Walk(questionTokenWalker{}, originalNode)
+	})
+}
+
+type questionTokenWalker struct {
+}
+
+func (q questionTokenWalker) Visit(node bindings.Node) (w walk.Visitor) {
+	switch n := node.(type) {
+	case *bindings.PropertySignature:
+		isUnion, ok := n.Type.(*bindings.UnionType)
+		if !ok {
+			return q
+		}
+		for i, t := range isUnion.Types {
+			if keyword, ok := t.(*bindings.LiteralKeyword); ok && *keyword == bindings.KeywordUndefined {
+				n.QuestionToken = true
+				// Remove undefined
+				isUnion.Types = append(isUnion.Types[:i], isUnion.Types[i+1:]...)
+				break
+			}
+		}
+	}
+	return q
+}
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
@@ -186,7 +186,7 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
 });
 
 type BooleanPillProps = Omit<ComponentProps<typeof Pill>, "icon" | "value"> & {
-	value: boolean;
+	value: boolean | null;
 };
 
 export const BooleanPill: FC<BooleanPillProps> = ({

diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
@@ -5,6 +5,7 @@ import type {
 	HealthMessage,
 	HealthSeverity,
 	HealthcheckReport,
+	NetcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import type { FC } from "react";
@@ -24,7 +25,7 @@ import {
 import { DismissWarningButton } from "./DismissWarningButton";
 import { healthyColor } from "./healthyColor";
 
-const flags = [
+const flags: BooleanKeys<NetcheckReport>[] = [
 	"UDP",
 	"IPv6",
 	"IPv4",
@@ -39,9 +40,15 @@ const flags = [
 	"PCP",
 ];
 
+type BooleanKeys<T> = {
+	[K in keyof T]: T[K] extends boolean | null ? K : never;
+  }[keyof T];
+
+
 export const DERPPage: FC = () => {
 	const { derp } = useOutletContext<HealthcheckReport>();
 	const { netcheck, regions, netcheck_logs: logs } = derp;
+	const safeNetcheck = netcheck || {} as NetcheckReport;
 	const theme = useTheme();
 
 	return (
@@ -75,7 +82,7 @@ export const DERPPage: FC = () => {
 					<SectionLabel>Flags</SectionLabel>
 					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
 						{flags.map((flag) => (
-							<BooleanPill key={flag} value={netcheck[flag]}>
+							<BooleanPill key={flag} value={safeNetcheck[flag]}>
 								{flag}
 							</BooleanPill>
 						))}
@@ -94,6 +101,7 @@ export const DERPPage: FC = () => {
 								if (a.region && b.region) {
 									return a.region.RegionName.localeCompare(b.region.RegionName);
 								}
+								return 0;
 							})
 							.map(({ severity, region }) => {
 								return (
@@ -111,10 +119,10 @@ export const DERPPage: FC = () => {
 											/>
 										}
 										component={Link}
-										to={`/health/derp/regions/${region.RegionID}`}
-										key={region.RegionID}
+										to={`/health/derp/regions/${region!.RegionID}`}
+										key={region!.RegionID}
 									>
-										{region.RegionName}
+										{region!.RegionName}
 									</Button>
 								);
 							})}

diff --git a/site/src/pages/HealthPage/DERPRegionPage.stories.tsx b/site/src/pages/HealthPage/DERPRegionPage.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
 	...generateMeta({
 		path: "/health/derp/regions/:regionId",
 		element: <DERPRegionPage />,
-		params: { regionId: firstRegionId },
+		params: { regionId: firstRegionId?.toString() || "" },
 	}),
 };