fix(instance) show help text on instance location to direct user how …

…to start a migration Signed-off-by: David Edler <[email protected]>
canonical · Sep 19, 2024 · f42e485 · f42e485
1 parent e9cca8b
commit f42e485
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/src/pages/instances/forms/EditInstanceDetails.tsx b/src/pages/instances/forms/EditInstanceDetails.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Col, Input, Row } from "@canonical/react-components";
+import { Col, Input, Row, Select } from "@canonical/react-components";
 import ProfileSelector from "pages/profiles/ProfileSelector";
 import { FormikProps } from "formik/dist/types";
 import { EditInstanceFormValues } from "pages/instances/EditInstance";
@@ -42,7 +42,6 @@ const EditInstanceDetails: FC<Props> = ({ formik, project }) => {
             onChange={formik.handleChange}
             value={formik.values.name}
             error={formik.touched.name ? formik.errors.name : null}
-            required
             disabled={true}
           />
           <AutoExpandingTextArea
@@ -62,14 +61,19 @@ const EditInstanceDetails: FC<Props> = ({ formik, project }) => {
       {isClustered && (
         <Row>
           <Col size={12}>
-            <Input
+            <Select
               id="target"
               name="target"
-              type="text"
+              options={[
+                {
+                  label: formik.values.location,
+                  value: formik.values.location,
+                },
+              ]}
               label="Instance location"
               value={formik.values.location}
-              required
               disabled={true}
+              help="Use the migrate button in the header to move the instance to another cluster member"
             />
           </Col>
         </Row>