add support for cluster rename

dashboard/src/main/home/cluster-dashboard/dashboard/ClusterSettings.tsx

@@ -8,6 +8,11 @@ import api from "shared/api";
 
 const ClusterSettings: React.FC = () => {
   const context = useContext(Context);
+  const [newClusterName, setNewClusterName] = useState<string>(
+    context.currentCluster.name
+  );
+  const [successfulRename, setSuccessfulRename] = useState<boolean>(false);
+
   const [accessKeyId, setAccessKeyId] = useState<string>("");
   const [secretKey, setSecretKey] = useState<string>("");
   const [startRotateCreds, setStartRotateCreds] = useState<boolean>(false);
@@ -35,6 +40,26 @@ const ClusterSettings: React.FC = () => {
       });
   };
 
+  let updateClusterName = () => {
+    api
+      .updateClusterName(
+        "<token>",
+        {
+          name: newClusterName,
+        },
+        {
+          project_id: context.currentProject.id,
+          cluster_id: context.currentCluster.id,
+        }
+      )
+      .then(({ data }) => {
+        setSuccessfulRename(true);
+      })
+      .catch(() => {
+        setSuccessfulRename(false);
+      });
+  };
+
   let helperText = (
     <Helper>
       Delete this cluster and underlying infrastructure. To ensure that
@@ -118,11 +143,40 @@ const ClusterSettings: React.FC = () => {
     }
   }
 
+  let renameClusterSection = (
+    <div>
+      <Heading>Rename Cluster</Heading>
+      <InputRow
+        type="text"
+        value={newClusterName}
+        setValue={(x: string) => setNewClusterName(x)}
+        label="Cluster Name"
+        placeholder="ex: my-awesome-cluster"
+        width="100%"
+        isRequired={true}
+      />
+      <Button color="#616FEEcc" onClick={updateClusterName}>
+        Submit
+      </Button>
+    </div>
+  );
+
+  if (successfulRename) {
+    renameClusterSection = (
+      <div>
+        <Heading>Credential Rotation</Heading>
+        <Helper>Successfully renamed the cluster! Reload the page.</Helper>
+      </div>
+    );
+  }
+
   return (
     <div>
       <StyledSettingsSection>
         {keyRotationSection}
         <DarkMatter />
+        {renameClusterSection}
+        <DarkMatter />
         <Heading>Delete Cluster</Heading>
         {helperText}
         <Button

dashboard/src/shared/api.tsx

@@ -96,6 +96,18 @@ const overwriteAWSIntegration = baseApi<
   return `/api/projects/${pathParams.project_id}/integrations/aws/overwrite`;
 });
 
+const updateClusterName = baseApi<
+  {
+    name: string;
+  },
+  {
+    project_id: number;
+    cluster_id: number;
+  }
+>("POST", (pathParams) => {
+  return `/api/projects/${pathParams.project_id}/clusters/${pathParams.cluster_id}`;
+});
+
 const createAzureIntegration = baseApi<
   {
     azure_client_id: string;
@@ -2074,10 +2086,7 @@ const updateStackSourceConfig = baseApi<
     `/api/v1/projects/${project_id}/clusters/${cluster_id}/namespaces/${namespace}/stacks/${stack_id}/source`
 );
 
-const getGithubStatus = baseApi<{}, {}>(
-  "GET",
-  ({}) => `/api/status/github`
-);
+const getGithubStatus = baseApi<{}, {}>("GET", ({}) => `/api/status/github`);
 
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
@@ -2091,6 +2100,7 @@ export default {
   getGitlabIntegration,
   createAWSIntegration,
   overwriteAWSIntegration,
+  updateClusterName,
   createAzureIntegration,
   createGitlabIntegration,
   createEmailVerification,