fix(site): show error when parameter is invalid (#8125)

codersdk/richparameters.go

@@ -50,11 +50,11 @@ func ValidateWorkspaceBuildParameter(richParameter TemplateVersionParameter, bui
 		switch richParameter.ValidationMonotonic {
 		case MonotonicOrderIncreasing:
 			if lastBuildParameter.Value > buildParameter.Value {
-				return xerrors.Errorf("parameter value must be equal or greater than previous value: %s", lastBuildParameter.Value)
+				return xerrors.Errorf("Parameter value must be equal or greater than previous value: %s", lastBuildParameter.Value)
 			}
 		case MonotonicOrderDecreasing:
 			if lastBuildParameter.Value < buildParameter.Value {
-				return xerrors.Errorf("parameter value must be equal or lower than previous value: %s", lastBuildParameter.Value)
+				return xerrors.Errorf("Parameter value must be equal or lower than previous value: %s", lastBuildParameter.Value)
 			}
 		}
 	}
@@ -69,7 +69,7 @@ func ValidateWorkspaceBuildParameter(richParameter TemplateVersionParameter, bui
 		}
 
 		if !matched {
-			return xerrors.Errorf("parameter value must match one of options: %s", parameterValuesAsArray(richParameter.Options))
+			return xerrors.Errorf("Parameter value must match one of options: %s", parameterValuesAsArray(richParameter.Options))
 		}
 		return nil
 	}

site/src/components/Alert/ErrorAlert.tsx

@@ -9,12 +9,16 @@ export const ErrorAlert: FC<
   const message = getErrorMessage(error, "Something went wrong.")
   const detail = getErrorDetail(error)
 
+  // For some reason, the message and detail can be the same on the BE, but does
+  // not make sense in the FE to showing them duplicated
+  const shouldDisplayDetail = message !== detail
+
   return (
     <Alert severity="error" {...alertProps}>
       {detail ? (
         <>
           <AlertTitle>{message}</AlertTitle>
-          <AlertDetail>{detail}</AlertDetail>
+          {shouldDisplayDetail && <AlertDetail>{detail}</AlertDetail>}
         </>
       ) : (
         message

site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx

@@ -18,6 +18,8 @@ import { makeStyles } from "@mui/styles"
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { displaySuccess } from "components/GlobalSnackbar/utils"
 import { FC } from "react"
+import { isApiValidationError } from "api/errors"
+import { ErrorAlert } from "components/Alert/ErrorAlert"
 
 const getWorkspaceParameters = async (workspace: Workspace) => {
   const latestBuild = workspace.latest_build
@@ -90,6 +92,10 @@ export const WorkspaceParametersPageView: FC<
         <PageHeaderTitle>Workspace parameters</PageHeaderTitle>
       </PageHeader>
 
+      {submitError && !isApiValidationError(submitError) && (
+        <ErrorAlert error={submitError} sx={{ mb: 6 }} />
+      )}
+
       {data ? (
         <WorkspaceParametersForm
           buildParameters={data.buildParameters}