first commit

common/resources/client/workspace/rename-workspace-dialog.tsx

@@ -0,0 +1,65 @@
+import {useForm} from 'react-hook-form';
+import {FormTextField} from '../ui/forms/input-field/text-field/text-field';
+import {Form} from '../ui/forms/form';
+import {Button} from '../ui/buttons/button';
+import {DialogFooter} from '../ui/overlays/dialog/dialog-footer';
+import {useDialogContext} from '../ui/overlays/dialog/dialog-context';
+import {Dialog} from '../ui/overlays/dialog/dialog';
+import {DialogHeader} from '../ui/overlays/dialog/dialog-header';
+import {DialogBody} from '../ui/overlays/dialog/dialog-body';
+import {
+  UpdateWorkspacePayload,
+  useUpdateWorkspace,
+} from './requests/update-workspace';
+import {Workspace} from './types/workspace';
+import {Trans} from '../i18n/trans';
+
+interface Props {
+  workspace: Workspace;
+}
+export function RenameWorkspaceDialog({workspace}: Props) {
+  const form = useForm<UpdateWorkspacePayload>({
+    defaultValues: {id: workspace.id, name: workspace.name},
+  });
+  const {formId, close} = useDialogContext();
+  const updateWorkspace = useUpdateWorkspace(form);
+
+  return (
+    <Dialog>
+      <DialogHeader>
+        <Trans message="Rename workspace" />
+      </DialogHeader>
+      <DialogBody>
+        <Form
+          form={form}
+          id={formId}
+          onSubmit={() => {
+            updateWorkspace.mutate(form.getValues());
+          }}
+        >
+          <FormTextField
+            name="name"
+            autoFocus
+            label={<Trans message="Name" />}
+            minLength={3}
+            required
+          />
+        </Form>
+      </DialogBody>
+      <DialogFooter>
+        <Button variant="text" onClick={close}>
+          <Trans message="Cancel" />
+        </Button>
+        <Button
+          variant="flat"
+          color="primary"
+          type="submit"
+          form={formId}
+          disabled={updateWorkspace.isPending}
+        >
+          <Trans message="Rename" />
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}