From e6aeee2ba24b9860c8a46e59ef3793f1dba80b5f Mon Sep 17 00:00:00 2001
From: Kayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 15:04:34 -0600
Subject: [PATCH] feat: warn users when renaming workspaces (#10023)

---
 .../WorkspaceSettingsForm.tsx                    | 16 ++++++++++------
 site/src/utils/formUtils.ts                      |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
index 9e44b10b1b..7626e12585 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
+++ b/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} />
diff --git a/site/src/utils/formUtils.ts b/site/src/utils/formUtils.ts
index bfa041f6af..1de43b825c 100644
--- a/site/src/utils/formUtils.ts
+++ b/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