fix: Add names to config properties for the UI (#4718)

This was reverted in the configuration PR, which broke the UI.

cli/deployment/config.go

@@ -22,16 +22,19 @@ import (
 func newConfig() codersdk.DeploymentConfig {
 	return codersdk.DeploymentConfig{
 		AccessURL: codersdk.DeploymentConfigField[string]{
+			Name:  "Access URL",
 			Key:   "access_url",
 			Usage: "External URL to access your deployment. This must be accessible by all provisioned workspaces.",
 			Flag:  "access-url",
 		},
 		WildcardAccessURL: codersdk.DeploymentConfigField[string]{
+			Name:  "Wildcard Access URL",
 			Key:   "wildcard_access_url",
 			Usage: "Specifies the wildcard hostname to use for workspace applications in the form \"*.example.com\".",
 			Flag:  "wildcard-access-url",
 		},
 		Address: codersdk.DeploymentConfigField[string]{
+			Name:      "Address",
 			Key:       "address",
 			Usage:     "Bind address of the server.",
 			Flag:      "address",
@@ -39,6 +42,7 @@ func newConfig() codersdk.DeploymentConfig {
 			Value:     "127.0.0.1:3000",
 		},
 		AutobuildPollInterval: codersdk.DeploymentConfigField[time.Duration]{
+			Name:   "Autobuild Poll Interval",
 			Key:    "autobuild_poll_interval",
 			Usage:  "Interval to poll for scheduled workspace builds.",
 			Flag:   "autobuild-poll-interval",
@@ -46,181 +50,214 @@ func newConfig() codersdk.DeploymentConfig {
 			Value:  time.Minute,
 		},
 		DERPServerEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "DERP Server Enable",
 			Key:   "derp.server.enable",
 			Usage: "Whether to enable or disable the embedded DERP relay server.",
 			Flag:  "derp-server-enable",
 			Value: true,
 		},
 		DERPServerRegionID: codersdk.DeploymentConfigField[int]{
+			Name:  "DERP Server Region ID",
 			Key:   "derp.server.region_id",
 			Usage: "Region ID to use for the embedded DERP server.",
 			Flag:  "derp-server-region-id",
 			Value: 999,
 		},
 		DERPServerRegionCode: codersdk.DeploymentConfigField[string]{
+			Name:  "DERP Server Region Code",
 			Key:   "derp.server.region_code",
 			Usage: "Region code to use for the embedded DERP server.",
 			Flag:  "derp-server-region-code",
 			Value: "coder",
 		},
 		DERPServerRegionName: codersdk.DeploymentConfigField[string]{
+			Name:  "DERP Server Region Name",
 			Key:   "derp.server.region_name",
 			Usage: "Region name that for the embedded DERP server.",
 			Flag:  "derp-server-region-name",
 			Value: "Coder Embedded Relay",
 		},
 		DERPServerSTUNAddresses: codersdk.DeploymentConfigField[[]string]{
+			Name:  "DERP Server STUN Addresses",
 			Key:   "derp.server.stun_addresses",
 			Usage: "Addresses for STUN servers to establish P2P connections. Set empty to disable P2P connections.",
 			Flag:  "derp-server-stun-addresses",
 			Value: []string{"stun.l.google.com:19302"},
 		},
 		DERPServerRelayURL: codersdk.DeploymentConfigField[string]{
+			Name:       "DERP Server Relay URL",
 			Key:        "derp.server.relay_url",
 			Usage:      "An HTTP URL that is accessible by other replicas to relay DERP traffic. Required for high availability.",
 			Flag:       "derp-server-relay-url",
 			Enterprise: true,
 		},
 		DERPConfigURL: codersdk.DeploymentConfigField[string]{
+			Name:  "DERP Config URL",
 			Key:   "derp.config.url",
 			Usage: "URL to fetch a DERP mapping on startup. See: https://tailscale.com/kb/1118/custom-derp-servers/",
 			Flag:  "derp-config-url",
 		},
 		DERPConfigPath: codersdk.DeploymentConfigField[string]{
+			Name:  "DERP Config Path",
 			Key:   "derp.config.path",
 			Usage: "Path to read a DERP mapping from. See: https://tailscale.com/kb/1118/custom-derp-servers/",
 			Flag:  "derp-config-path",
 		},
 		PrometheusEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "Prometheus Enable",
 			Key:   "prometheus.enable",
 			Usage: "Serve prometheus metrics on the address defined by prometheus address.",
 			Flag:  "prometheus-enable",
 		},
 		PrometheusAddress: codersdk.DeploymentConfigField[string]{
+			Name:  "Prometheus Address",
 			Key:   "prometheus.address",
 			Usage: "The bind address to serve prometheus metrics.",
 			Flag:  "prometheus-address",
 			Value: "127.0.0.1:2112",
 		},
 		PprofEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "Pprof Enable",
 			Key:   "pprof.enable",
 			Usage: "Serve pprof metrics on the address defined by pprof address.",
 			Flag:  "pprof-enable",
 		},
 		PprofAddress: codersdk.DeploymentConfigField[string]{
+			Name:  "Pprof Address",
 			Key:   "pprof.address",
 			Usage: "The bind address to serve pprof.",
 			Flag:  "pprof-address",
 			Value: "127.0.0.1:6060",
 		},
 		ProxyTrustedHeaders: codersdk.DeploymentConfigField[[]string]{
+			Name:  "Proxy Trusted Headers",
 			Key:   "proxy.trusted_headers",
 			Flag:  "proxy-trusted-headers",
 			Usage: "Headers to trust for forwarding IP addresses. e.g. Cf-Connecting-IP True-Client-Ip, X-Forwarded-for",
 		},
 		ProxyTrustedOrigins: codersdk.DeploymentConfigField[[]string]{
+			Name:  "Proxy Trusted Origins",
 			Key:   "proxy.trusted_origins",
 			Flag:  "proxy-trusted-origins",
 			Usage: "Origin addresses to respect \"proxy-trusted-headers\". e.g. example.com",
 		},
 		CacheDirectory: codersdk.DeploymentConfigField[string]{
+			Name:  "Cache Directory",
 			Key:   "cache_directory",
 			Usage: "The directory to cache temporary files. If unspecified and $CACHE_DIRECTORY is set, it will be used for compatibility with systemd.",
 			Flag:  "cache-dir",
 			Value: defaultCacheDir(),
 		},
 		InMemoryDatabase: codersdk.DeploymentConfigField[bool]{
+			Name:   "In Memory Database",
 			Key:    "in_memory_database",
 			Usage:  "Controls whether data will be stored in an in-memory database.",
 			Flag:   "in-memory",
 			Hidden: true,
 		},
 		ProvisionerDaemons: codersdk.DeploymentConfigField[int]{
+			Name:  "Provisioner Daemons",
 			Key:   "provisioner.daemons",
 			Usage: "Number of provisioner daemons to create on start. If builds are stuck in queued state for a long time, consider increasing this.",
 			Flag:  "provisioner-daemons",
 			Value: 3,
 		},
 		PostgresURL: codersdk.DeploymentConfigField[string]{
+			Name:  "Postgres Connection URL",
 			Key:   "pg_connection_url",
 			Usage: "URL of a PostgreSQL database. If empty, PostgreSQL binaries will be downloaded from Maven (https://repo1.maven.org/maven2) and store all data in the config root. Access the built-in database with \"coder server postgres-builtin-url\".",
 			Flag:  "postgres-url",
 		},
 		OAuth2GithubClientID: codersdk.DeploymentConfigField[string]{
+			Name:  "OAuth2 GitHub Client ID",
 			Key:   "oauth2.github.client_id",
 			Usage: "Client ID for Login with GitHub.",
 			Flag:  "oauth2-github-client-id",
 		},
 		OAuth2GithubClientSecret: codersdk.DeploymentConfigField[string]{
+			Name:  "OAuth2 GitHub Client Secret",
 			Key:   "oauth2.github.client_secret",
 			Usage: "Client secret for Login with GitHub.",
 			Flag:  "oauth2-github-client-secret",
 		},
 		OAuth2GithubAllowedOrgs: codersdk.DeploymentConfigField[[]string]{
+			Name:  "OAuth2 GitHub Allowed Orgs",
 			Key:   "oauth2.github.allowed_orgs",
 			Usage: "Organizations the user must be a member of to Login with GitHub.",
 			Flag:  "oauth2-github-allowed-orgs",
 		},
 		OAuth2GithubAllowedTeams: codersdk.DeploymentConfigField[[]string]{
+			Name:  "OAuth2 GitHub Allowed Teams",
 			Key:   "oauth2.github.allowed_teams",
 			Usage: "Teams inside organizations the user must be a member of to Login with GitHub. Structured as: <organization-name>/<team-slug>.",
 			Flag:  "oauth2-github-allowed-teams",
 		},
 		OAuth2GithubAllowSignups: codersdk.DeploymentConfigField[bool]{
+			Name:  "OAuth2 GitHub Allow Signups",
 			Key:   "oauth2.github.allow_signups",
 			Usage: "Whether new users can sign up with GitHub.",
 			Flag:  "oauth2-github-allow-signups",
 		},
 		OAuth2GithubEnterpriseBaseURL: codersdk.DeploymentConfigField[string]{
+			Name:  "OAuth2 GitHub Enterprise Base URL",
 			Key:   "oauth2.github.enterprise_base_url",
 			Usage: "Base URL of a GitHub Enterprise deployment to use for Login with GitHub.",
 			Flag:  "oauth2-github-enterprise-base-url",
 		},
 		OIDCAllowSignups: codersdk.DeploymentConfigField[bool]{
+			Name:  "OIDC Allow Signups",
 			Key:   "oidc.allow_signups",
 			Usage: "Whether new users can sign up with OIDC.",
 			Flag:  "oidc-allow-signups",
 			Value: true,
 		},
 		OIDCClientID: codersdk.DeploymentConfigField[string]{
+			Name:  "OIDC Client ID",
 			Key:   "oidc.client_id",
 			Usage: "Client ID to use for Login with OIDC.",
 			Flag:  "oidc-client-id",
 		},
 		OIDCClientSecret: codersdk.DeploymentConfigField[string]{
+			Name:  "OIDC Client Secret",
 			Key:   "oidc.client_secret",
 			Usage: "Client secret to use for Login with OIDC.",
 			Flag:  "oidc-client-secret",
 		},
 		OIDCEmailDomain: codersdk.DeploymentConfigField[string]{
+			Name:  "OIDC Email Domain",
 			Key:   "oidc.email_domain",
 			Usage: "Email domain that clients logging in with OIDC must match.",
 			Flag:  "oidc-email-domain",
 		},
 		OIDCIssuerURL: codersdk.DeploymentConfigField[string]{
+			Name:  "OIDC Issuer URL",
 			Key:   "oidc.issuer_url",
 			Usage: "Issuer URL to use for Login with OIDC.",
 			Flag:  "oidc-issuer-url",
 		},
 		OIDCScopes: codersdk.DeploymentConfigField[[]string]{
+			Name:  "OIDC Scopes",
 			Key:   "oidc.scopes",
 			Usage: "Scopes to grant when authenticating with OIDC.",
 			Flag:  "oidc-scopes",
 			Value: []string{oidc.ScopeOpenID, "profile", "email"},
 		},
 		TelemetryEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "Telemetry Enable",
 			Key:   "telemetry.enable",
 			Usage: "Whether telemetry is enabled or not. Coder collects anonymized usage data to help improve our product.",
 			Flag:  "telemetry",
 			Value: flag.Lookup("test.v") == nil,
 		},
 		TelemetryTrace: codersdk.DeploymentConfigField[bool]{
+			Name:  "Telemetry Trace",
 			Key:   "telemetry.trace",
 			Usage: "Whether Opentelemetry traces are sent to Coder. Coder collects anonymized application tracing to help improve our product. Disabling telemetry also disables this option.",
 			Flag:  "telemetry-trace",
 			Value: flag.Lookup("test.v") == nil,
 		},
 		TelemetryURL: codersdk.DeploymentConfigField[string]{
+			Name:   "Telemetry URL",
 			Key:    "telemetry.url",
 			Usage:  "URL to send telemetry.",
 			Flag:   "telemetry-url",
@@ -228,60 +265,71 @@ func newConfig() codersdk.DeploymentConfig {
 			Value:  "https://telemetry.coder.com",
 		},
 		TLSEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "TLS Enable",
 			Key:   "tls.enable",
 			Usage: "Whether TLS will be enabled.",
 			Flag:  "tls-enable",
 		},
 		TLSCertFiles: codersdk.DeploymentConfigField[[]string]{
+			Name:  "TLS Certificate Files",
 			Key:   "tls.cert_file",
 			Usage: "Path to each certificate for TLS. It requires a PEM-encoded file. To configure the listener to use a CA certificate, concatenate the primary certificate and the CA certificate together. The primary certificate should appear first in the combined file.",
 			Flag:  "tls-cert-file",
 		},
 		TLSClientCAFile: codersdk.DeploymentConfigField[string]{
+			Name:  "TLS Client CA Files",
 			Key:   "tls.client_ca_file",
 			Usage: "PEM-encoded Certificate Authority file used for checking the authenticity of client",
 			Flag:  "tls-client-ca-file",
 		},
 		TLSClientAuth: codersdk.DeploymentConfigField[string]{
+			Name:  "TLS Client Auth",
 			Key:   "tls.client_auth",
 			Usage: "Policy the server will follow for TLS Client Authentication. Accepted values are \"none\", \"request\", \"require-any\", \"verify-if-given\", or \"require-and-verify\".",
 			Flag:  "tls-client-auth",
 			Value: "request",
 		},
 		TLSKeyFiles: codersdk.DeploymentConfigField[[]string]{
+			Name:  "TLS Key Files",
 			Key:   "tls.key_file",
 			Usage: "Paths to the private keys for each of the certificates. It requires a PEM-encoded file.",
 			Flag:  "tls-key-file",
 		},
 		TLSMinVersion: codersdk.DeploymentConfigField[string]{
+			Name:  "TLS Minimum Version",
 			Key:   "tls.min_version",
 			Usage: "Minimum supported version of TLS. Accepted values are \"tls10\", \"tls11\", \"tls12\" or \"tls13\"",
 			Flag:  "tls-min-version",
 			Value: "tls12",
 		},
 		TraceEnable: codersdk.DeploymentConfigField[bool]{
+			Name:  "Trace Enable",
 			Key:   "trace",
 			Usage: "Whether application tracing data is collected.",
 			Flag:  "trace",
 		},
 		SecureAuthCookie: codersdk.DeploymentConfigField[bool]{
+			Name:  "Secure Auth Cookie",
 			Key:   "secure_auth_cookie",
 			Usage: "Controls if the 'Secure' property is set on browser session cookies.",
 			Flag:  "secure-auth-cookie",
 		},
 		SSHKeygenAlgorithm: codersdk.DeploymentConfigField[string]{
+			Name:  "SSH Keygen Algorithm",
 			Key:   "ssh_keygen_algorithm",
 			Usage: "The algorithm to use for generating ssh keys. Accepted values are \"ed25519\", \"ecdsa\", or \"rsa4096\".",
 			Flag:  "ssh-keygen-algorithm",
 			Value: "ed25519",
 		},
 		AutoImportTemplates: codersdk.DeploymentConfigField[[]string]{
+			Name:   "Auto Import Templates",
 			Key:    "auto_import_templates",
 			Usage:  "Templates to auto-import. Available auto-importable templates are: kubernetes",
 			Flag:   "auto-import-template",
 			Hidden: true,
 		},
 		MetricsCacheRefreshInterval: codersdk.DeploymentConfigField[time.Duration]{
+			Name:   "Metrics Cache Refresh Interval",
 			Key:    "metrics_cache_refresh_interval",
 			Usage:  "How frequently metrics are refreshed",
 			Flag:   "metrics-cache-refresh-interval",
@@ -289,6 +337,7 @@ func newConfig() codersdk.DeploymentConfig {
 			Value:  time.Hour,
 		},
 		AgentStatRefreshInterval: codersdk.DeploymentConfigField[time.Duration]{
+			Name:   "Agent Stat Refresh Interval",
 			Key:    "agent_stat_refresh_interval",
 			Usage:  "How frequently agent stats are recorded",
 			Flag:   "agent-stats-refresh-interval",
@@ -296,6 +345,7 @@ func newConfig() codersdk.DeploymentConfig {
 			Value:  10 * time.Minute,
 		},
 		AuditLogging: codersdk.DeploymentConfigField[bool]{
+			Name:       "Audit Logging",
 			Key:        "audit_logging",
 			Usage:      "Specifies whether audit logging is enabled.",
 			Flag:       "audit-logging",
@@ -303,18 +353,21 @@ func newConfig() codersdk.DeploymentConfig {
 			Enterprise: true,
 		},
 		BrowserOnly: codersdk.DeploymentConfigField[bool]{
+			Name:       "Browser Only",
 			Key:        "browser_only",
 			Usage:      "Whether Coder only allows connections to workspaces via the browser.",
 			Flag:       "browser-only",
 			Enterprise: true,
 		},
 		SCIMAPIKey: codersdk.DeploymentConfigField[string]{
+			Name:       "SCIM API Key",
 			Key:        "scim_api_key",
 			Usage:      "Enables SCIM and sets the authentication header for the built-in SCIM server. New users are automatically created with OIDC authentication.",
 			Flag:       "scim-auth-header",
 			Enterprise: true,
 		},
 		UserWorkspaceQuota: codersdk.DeploymentConfigField[int]{
+			Name:       "User Workspace Quota",
 			Key:        "user_workspace_quota",
 			Usage:      "Enables and sets a limit on how many workspaces each user can create.",
 			Flag:       "user-workspace-quota",

codersdk/deploymentconfig.go

@@ -72,7 +72,8 @@ type Flaggable interface {
 }
 
 type DeploymentConfigField[T Flaggable] struct {
-	Key        string `json:"key"`
+	Key string `json:"key"`
+	// Name appears in the deployment UI.
 	Name       string `json:"name"`
 	Usage      string `json:"usage"`
 	Flag       string `json:"flag"`

site/src/components/DeploySettingsLayout/OptionsTable.tsx

@@ -33,7 +33,7 @@ const OptionsTable: React.FC<{ options: Partial<DeploymentConfig> }> = ({
               <TableRow key={option.flag}>
                 <TableCell>
                   <OptionName>{option.name}</OptionName>
-                  <OptionDescription>{option.description}</OptionDescription>
+                  <OptionDescription>{option.usage}</OptionDescription>
                 </TableCell>
 
                 <TableCell>

site/src/pages/DeploySettingsPage/AuthSettingsPage.tsx

@@ -42,7 +42,6 @@ const AuthSettingsPage: React.FC = () => {
           <OptionsTable
             options={{
               oidc_client_id: deploymentConfig.oidc_client_id,
-              oidc_client_secret: deploymentConfig.oidc_client_secret,
               oidc_allow_signups: deploymentConfig.oidc_allow_signups,
               oidc_email_domain: deploymentConfig.oidc_email_domain,
               oidc_issuer_url: deploymentConfig.oidc_issuer_url,
@@ -70,8 +69,6 @@ const AuthSettingsPage: React.FC = () => {
           <OptionsTable
             options={{
               oauth2_github_client_id: deploymentConfig.oauth2_github_client_id,
-              oauth2_github_client_secret:
-                deploymentConfig.oauth2_github_client_secret,
               oauth2_github_allow_signups:
                 deploymentConfig.oauth2_github_allow_signups,
               oauth2_github_allowed_orgs: