chore: generate any interface as Deployment Option in TypeScript (#9917)

* chore: handle interfaces as "any" in typescript

Use generated Deployment Option

scripts/apitypings/main.go

@@ -989,28 +989,13 @@ func (g *Generator) typescriptType(ty types.Type) (TypescriptType, error) {
 			}, nil
 		}
 
-		// Do support "Stringer" interfaces, they likely can get string
-		// marshaled.
-		for i := 0; i < intf.NumMethods(); i++ {
-			meth := intf.Method(i)
-			if meth.Name() == "String" {
-				return TypescriptType{
-					ValueType:     "string",
-					AboveTypeLine: indentedComment("actual value is an interface that implements 'String()'"),
-					Optional:      false,
-				}, nil
-			}
-		}
-
-		// All complex interfaces should be named. So if we get here, that means
-		// we are using anonymous interfaces. Which is just weird and not supported.
-		// Example:
-		//  type Foo struct {
-		//    Bar interface {
-		//      Baz() string
-		//    }
-		//  }
-		return TypescriptType{}, xerrors.New("only empty interface types are supported")
+		// Interfaces are difficult to determine the JSON type, so just return
+		// an 'any'.
+		return TypescriptType{
+			ValueType:     "any",
+			AboveTypeLine: indentedComment("eslint-disable-next-line @typescript-eslint/no-explicit-any -- Golang interface, unable to resolve type."),
+			Optional:      false,
+		}, nil
 	case *types.TypeParam:
 		_, ok := ty.Underlying().(*types.Interface)
 		if !ok {

site/src/api/api.ts

@@ -1016,29 +1016,9 @@ export const getDeploymentSSHConfig =
     return response.data;
   };
 
-// The Deployment types are not generated on from the Go generator yet because
-// it does not know how to generate OptionSet
-export interface DeploymentGroup {
-  readonly name: string;
-  readonly parent?: DeploymentGroup;
-  readonly description: string;
-  readonly children: DeploymentGroup[];
-}
-export interface DeploymentOption {
-  readonly name: string;
-  readonly description: string;
-  readonly flag: string;
-  readonly flag_shorthand: string;
-  readonly value: unknown;
-  readonly hidden: boolean;
-  readonly group?: DeploymentGroup;
-  readonly env?: string;
-  readonly yaml?: string;
-}
-
 export type DeploymentConfig = {
   readonly config: TypesGen.DeploymentValues;
-  readonly options: DeploymentOption[];
+  readonly options: TypesGen.ClibaseOption[];
 };
 
 export const getDeploymentConfig = async (): Promise<DeploymentConfig> => {

site/src/api/typesGenerated.ts

@@ -2106,8 +2106,8 @@ export interface ClibaseOption {
   readonly env?: string;
   readonly yaml?: string;
   readonly default?: string;
-  // actual value is an interface that implements 'String()'
-  readonly value?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Golang interface, unable to resolve type.
+  readonly value?: any;
   readonly annotations?: ClibaseAnnotations;
   readonly group?: ClibaseGroup;
   readonly use_instead?: ClibaseOption[];

site/src/components/DeploySettingsLayout/OptionsTable.tsx

@@ -14,11 +14,11 @@ import {
 } from "components/DeploySettingsLayout/Option";
 import { FC } from "react";
 import { optionValue } from "./optionValue";
-import { DeploymentOption } from "api/api";
 import Box from "@mui/material/Box";
+import { ClibaseOption } from "api/typesGenerated";
 
 const OptionsTable: FC<{
-  options: DeploymentOption[];
+  options: ClibaseOption[];
 }> = ({ options }) => {
   const styles = useStyles();
 

site/src/components/DeploySettingsLayout/optionValue.test.ts

@@ -1,7 +1,7 @@
-import { DeploymentOption } from "api/api";
 import { optionValue } from "./optionValue";
+import { ClibaseOption } from "api/typesGenerated";
 
-const defaultOption: DeploymentOption = {
+const defaultOption: ClibaseOption = {
   name: "",
   description: "",
   flag: "",
@@ -12,7 +12,7 @@ const defaultOption: DeploymentOption = {
 
 describe("optionValue", () => {
   it.each<{
-    option: DeploymentOption;
+    option: ClibaseOption;
     expected: unknown;
   }>([
     {

site/src/components/DeploySettingsLayout/optionValue.ts

@@ -1,8 +1,8 @@
-import { DeploymentOption } from "api/api";
+import { ClibaseOption } from "api/typesGenerated";
 import { intervalToDuration, formatDuration } from "date-fns";
 
 // optionValue is a helper function to format the value of a specific deployment options
-export function optionValue(option: DeploymentOption) {
+export function optionValue(option: ClibaseOption) {
   switch (option.name) {
     case "Max Token Lifetime":
     case "Session Duration":

site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box";
-import { DAUsResponse } from "api/typesGenerated";
+import { ClibaseOption, DAUsResponse } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { DAUChart, DAUTitle } from "components/DAUChart/DAUChart";
 import { Header } from "components/DeploySettingsLayout/Header";
@@ -8,10 +8,9 @@ import { Stack } from "components/Stack/Stack";
 import { ChartSection } from "./ChartSection";
 import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
-import { DeploymentOption } from "api/api";
 
 export type GeneralSettingsPageViewProps = {
-  deploymentOptions: DeploymentOption[];
+  deploymentOptions: ClibaseOption[];
   deploymentDAUs?: DAUsResponse;
   deploymentDAUsError: unknown;
 };

site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.stories.tsx

@@ -1,11 +1,10 @@
-import { DeploymentGroup } from "api/api";
+import { ClibaseGroup } from "api/typesGenerated";
 import { NetworkSettingsPageView } from "./NetworkSettingsPageView";
 import type { Meta, StoryObj } from "@storybook/react";
 
-const group: DeploymentGroup = {
+const group: ClibaseGroup = {
   name: "Networking",
   description: "",
-  children: [] as DeploymentGroup[],
 };
 
 const meta: Meta<typeof NetworkSettingsPageView> = {

site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx

@@ -1,4 +1,4 @@
-import { DeploymentOption } from "api/api";
+import { ClibaseOption } from "api/typesGenerated";
 import {
   Badges,
   EnabledBadge,
@@ -14,7 +14,7 @@ import {
 import { docs } from "utils/docs";
 
 export type NetworkSettingsPageViewProps = {
-  options: DeploymentOption[];
+  options: ClibaseOption[];
 };
 
 export const NetworkSettingsPageView = ({

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx

@@ -1,11 +1,10 @@
-import { DeploymentGroup, DeploymentOption } from "api/api";
 import { SecuritySettingsPageView } from "./SecuritySettingsPageView";
 import type { Meta, StoryObj } from "@storybook/react";
+import { ClibaseGroup, ClibaseOption } from "api/typesGenerated";
 
-const group: DeploymentGroup = {
+const group: ClibaseGroup = {
   name: "Networking",
   description: "",
-  children: [] as DeploymentGroup[],
 };
 
 const meta: Meta<typeof SecuritySettingsPageView> = {
@@ -64,15 +63,15 @@ export const NoTLS = {
       {
         name: "SSH Keygen Algorithm",
         value: "1234",
-      } as DeploymentOption,
+      } as ClibaseOption,
       {
         name: "Disable Owner Workspace Access",
         value: false,
-      } as DeploymentOption,
+      } as ClibaseOption,
       {
         name: "Secure Auth Cookie",
         value: "1234",
-      } as DeploymentOption,
+      } as ClibaseOption,
     ],
   },
 };

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx

@@ -1,4 +1,4 @@
-import { DeploymentOption } from "api/api";
+import { ClibaseOption } from "api/typesGenerated";
 import {
   Badges,
   DisabledBadge,
@@ -15,7 +15,7 @@ import {
 import { docs } from "utils/docs";
 
 export type SecuritySettingsPageViewProps = {
-  options: DeploymentOption[];
+  options: ClibaseOption[];
   featureAuditLogEnabled: boolean;
   featureBrowserOnlyEnabled: boolean;
 };

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.stories.tsx

@@ -1,17 +1,15 @@
-import { DeploymentGroup } from "api/api";
+import { ClibaseGroup } from "api/typesGenerated";
 import { UserAuthSettingsPageView } from "./UserAuthSettingsPageView";
 import type { Meta, StoryObj } from "@storybook/react";
 
-const oidcGroup: DeploymentGroup = {
+const oidcGroup: ClibaseGroup = {
   name: "OIDC",
   description: "",
-  children: [] as DeploymentGroup[],
 };
 
-const ghGroup: DeploymentGroup = {
+const ghGroup: ClibaseGroup = {
   name: "GitHub",
   description: "",
-  children: [] as DeploymentGroup[],
 };
 
 const meta: Meta<typeof UserAuthSettingsPageView> = {

site/src/pages/DeploySettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx

@@ -1,4 +1,4 @@
-import { DeploymentOption } from "api/api";
+import { ClibaseOption } from "api/typesGenerated";
 import {
   Badges,
   DisabledBadge,
@@ -14,7 +14,7 @@ import {
 import { docs } from "utils/docs";
 
 export type UserAuthSettingsPageViewProps = {
-  options: DeploymentOption[];
+  options: ClibaseOption[];
 };
 
 export const UserAuthSettingsPageView = ({

site/src/utils/deployOptions.ts

@@ -1,11 +1,11 @@
-import { DeploymentOption, DeploymentGroup } from "api/api";
+import { ClibaseGroup, ClibaseOption } from "api/typesGenerated";
 import { useMemo } from "react";
 
 const deploymentOptions = (
-  options: DeploymentOption[],
+  options: ClibaseOption[],
   ...names: string[]
-): DeploymentOption[] => {
-  const found: DeploymentOption[] = [];
+): ClibaseOption[] => {
+  const found: ClibaseOption[] = [];
   for (const name of names) {
     const option = options.find((o) => o.name === name);
     if (option) {
@@ -18,14 +18,14 @@ const deploymentOptions = (
 };
 
 export const useDeploymentOptions = (
-  options: DeploymentOption[],
+  options: ClibaseOption[],
   ...names: string[]
-): DeploymentOption[] => {
+): ClibaseOption[] => {
   return useMemo(() => deploymentOptions(options, ...names), [options, names]);
 };
 
 export const deploymentGroupHasParent = (
-  group: DeploymentGroup | undefined,
+  group: ClibaseGroup | undefined,
   parent: string,
 ): boolean => {
   if (!group) {