From 73417876c07de6aeeb8b606f7841c653791dd020 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 18:48:38 +0000
Subject: [PATCH 1/2] feat: warn users when renaming workspaces

---
 .../WorkspaceSettingsForm.tsx                 | 24 +++++++++++++------
 site/src/utils/formUtils.ts                   |  4 ++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
index 9e44b10b1b9f5..9fbf0863803a1 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, useState } 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;
@@ -40,21 +41,30 @@ export const WorkspaceSettingsForm: FC<{
     error,
   );
 
+  // We can't use `form.touched` unfortunately, because it only gets updated
+  // when a field loses focus, not when it gets changed.
+  const [nameModified, setNameModified] = useState(false);
+
   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")}
             disabled={form.isSubmitting}
-            onChange={onChangeTrimmed(form)}
+            onChange={onChangeTrimmed(form, (value) =>
+              setNameModified(value !== form.initialValues.name),
+            )}
             autoFocus
             fullWidth
             label="Name"
           />
+          {nameModified && (
+            <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 bfa041f6af8c6..1de43b825c14b 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

From 0d1dbfcc2913b8da73ba0ea7ff3580146cd96d98 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 20:50:52 +0000
Subject: [PATCH 2/2] huh!

---
 .../WorkspaceSettingsPage/WorkspaceSettingsForm.tsx  | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
index 9fbf0863803a1..7626e12585797 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
@@ -6,7 +6,7 @@ import {
   HorizontalForm,
 } from "components/Form/Form";
 import { useFormik } from "formik";
-import { type FC, useState } from "react";
+import { type FC } from "react";
 import * as Yup from "yup";
 import {
   nameValidator,
@@ -41,10 +41,6 @@ export const WorkspaceSettingsForm: FC<{
     error,
   );
 
-  // We can't use `form.touched` unfortunately, because it only gets updated
-  // when a field loses focus, not when it gets changed.
-  const [nameModified, setNameModified] = useState(false);
-
   return (
     <HorizontalForm onSubmit={form.handleSubmit} data-testid="form">
       <FormSection title="General" description="The name of your workspace.">
@@ -52,14 +48,12 @@ export const WorkspaceSettingsForm: FC<{
           <TextField
             {...getFieldHelpers("name")}
             disabled={form.isSubmitting}
-            onChange={onChangeTrimmed(form, (value) =>
-              setNameModified(value !== form.initialValues.name),
-            )}
+            onChange={onChangeTrimmed(form)}
             autoFocus
             fullWidth
             label="Name"
           />
-          {nameModified && (
+          {form.values.name !== form.initialValues.name && (
             <Alert severity="warning">
               Depending on the template, renaming your workspace may be
               destructive