feat: warn users when renaming workspaces (#10023)

site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx

@@ -1,3 +1,4 @@
+import TextField from "@mui/material/TextField";
 import {
   FormFields,
   FormFooter,
@@ -5,15 +6,15 @@ import {
   HorizontalForm,
 } from "components/Form/Form";
 import { useFormik } from "formik";
-import { FC } from "react";
+import { type FC } from "react";
 import * as Yup from "yup";
 import {
   nameValidator,
   getFormHelpers,
   onChangeTrimmed,
 } from "utils/formUtils";
-import TextField from "@mui/material/TextField";
 import { Workspace } from "api/typesGenerated";
+import { Alert } from "components/Alert/Alert";
 
 export type WorkspaceSettingsFormValues = {
   name: string;
@@ -42,10 +43,7 @@ export const WorkspaceSettingsForm: FC<{
 
   return (
     <HorizontalForm onSubmit={form.handleSubmit} data-testid="form">
-      <FormSection
-        title="General info"
-        description="The name of your new workspace."
-      >
+      <FormSection title="General" description="The name of your workspace.">
         <FormFields>
           <TextField
             {...getFieldHelpers("name")}
@@ -55,6 +53,12 @@ export const WorkspaceSettingsForm: FC<{
             fullWidth
             label="Name"
           />
+          {form.values.name !== form.initialValues.name && (
+            <Alert severity="warning">
+              Depending on the template, renaming your workspace may be
+              destructive
+            </Alert>
+          )}
         </FormFields>
       </FormSection>
       <FormFooter onCancel={onCancel} isLoading={isSubmitting} />

site/src/utils/formUtils.ts

@@ -64,11 +64,11 @@ export const getFormHelpers =
   };
 
 export const onChangeTrimmed =
-  <T>(form: FormikContextType<T>, callback?: () => void) =>
+  <T>(form: FormikContextType<T>, callback?: (value: string) => void) =>
   (event: ChangeEvent<HTMLInputElement>): void => {
     event.target.value = event.target.value.trim();
     form.handleChange(event);
-    callback && callback();
+    callback?.(event.target.value);
   };
 
 // REMARK: Keep these consts in sync with coderd/httpapi/httpapi.go