Show help text on instance location (#915)

## Done

- Show help text on instance location to direct user how to start a
migration
- Improve labels in instance configuration
- User "cluster member" as label instead of "location" consistently
- fix cluster group selector styling

src/pages/instances/InstanceDetailPanelContent.tsx

@@ -80,7 +80,7 @@ const InstanceDetailPanelContent: FC<Props> = ({ instance }) => {
           <td>{instance.architecture}</td>
         </tr>
         <tr>
-          <th className="u-text--muted">Location</th>
+          <th className="u-text--muted">Cluster member</th>
           <td>
             {settings?.environment?.server_clustered ? instance.location : "-"}
           </td>

src/pages/instances/InstanceOverview.tsx

@@ -78,7 +78,7 @@ const InstanceOverview: FC<Props> = ({ instance }) => {
                 <td>{instance.architecture}</td>
               </tr>
               <tr>
-                <th className="u-text--muted">Location</th>
+                <th className="u-text--muted">Cluster member</th>
                 <td>
                   {settings?.environment?.server_clustered
                     ? instance.location

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";
@@ -35,14 +35,13 @@ const EditInstanceDetails: FC<Props> = ({ formik, project }) => {
             id="name"
             name="name"
             type="text"
-            label="Instance name"
-            help="Click the name in the header to rename the instance"
+            label="Name"
+            help="Click the instance name in the header to rename the instance"
             placeholder="Enter name"
             onBlur={formik.handleBlur}
             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"
-              label="Instance location"
+              options={[
+                {
+                  label: formik.values.location,
+                  value: formik.values.location,
+                },
+              ]}
+              label="Cluster member"
               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>

src/pages/instances/forms/InstanceLocationSelect.tsx

@@ -70,8 +70,8 @@ const InstanceLocationSelect: FC<Props> = ({ formik }) => {
   return (
     <>
       <Select
-        id="locationGroup"
-        label="Location group"
+        id="clusterGroup"
+        label="Cluster group"
         onChange={(e) => setGroup(e.target.value)}
         value={selectedGroup}
         options={clusterGroups.map((group) => {
@@ -89,8 +89,8 @@ const InstanceLocationSelect: FC<Props> = ({ formik }) => {
         }
       />
       <Select
-        id="locationMember"
-        label="Location member"
+        id="clusterMember"
+        label="Cluster member"
         onChange={(e) => setMember(e.target.value)}
         value={selectedMember}
         options={[

src/pages/storage/StorageVolumeOverview.tsx

@@ -8,6 +8,7 @@ import { isoTimeToString } from "util/helpers";
 import StorageVolumeSize from "pages/storage/StorageVolumeSize";
 import { renderContentType, renderVolumeType } from "util/storageVolume";
 import { Link } from "react-router-dom";
+import { useSettings } from "context/useSettings";
 
 interface Props {
   project: string;
@@ -20,6 +21,7 @@ const StorageVolumeOverview: FC<Props> = ({ project, volume }) => {
   };
   useEffect(updateContentHeight, [volume]);
   useEventListener("resize", updateContentHeight);
+  const { data: settings } = useSettings();
 
   return (
     <div className="storage-overview-tab">
@@ -47,8 +49,12 @@ const StorageVolumeOverview: FC<Props> = ({ project, volume }) => {
                 <td>{volume.description ? volume.description : "-"}</td>
               </tr>
               <tr>
-                <th className="u-text--muted">Location</th>
-                <td>{volume.location}</td>
+                <th className="u-text--muted">Cluster member</th>
+                <td>
+                  {settings?.environment?.server_clustered
+                    ? volume.location
+                    : "-"}
+                </td>
               </tr>
               <tr>
                 <th className="u-text--muted">Pool</th>

src/sass/_cluster_list.scss

@@ -75,7 +75,7 @@
       border-bottom: 1px solid $colors--light-theme--border-high-contrast;
       font-size: #{map.get($font-sizes, h4-mobile)}rem;
       margin-bottom: $spv--small;
-      width: 50vw;
+      width: 15rem;
 
       span {
         display: inline-block;
@@ -85,15 +85,7 @@
         text-overflow: ellipsis !important;
         vertical-align: top;
         white-space: nowrap !important;
-        width: calc(50vw - 3rem);
-      }
-
-      @include desktop {
-        width: 15rem;
-
-        span {
-          width: 12rem;
-        }
+        width: 11rem;
       }
     }
   }