rename clusters

dashboard/src/components/porter/Input.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+
+type Props = {
+  placeholder: string;
+};
+
+const Input: React.FC<Props> = ({
+  placeholder,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    // Do something
+  }, []);
+
+  return (
+    <StyledInput placeholder={placeholder}>
+    </StyledInput>
+  );
+};
+
+export default Input;
+
+const StyledInput = styled.input`
+`;

dashboard/src/main/home/ModalHandler.tsx

@@ -84,8 +84,15 @@ const ModalHandler: React.FC<{
     }
   }, [currentModal, currentProject]);
 
+  const renderModal = () => {
+    if (modal && typeof modal !== 'string') {
+      return modal;
+    }
+  }
+
   return (
     <>
+      {renderModal()}
       {modal === "RedirectToOnboardingModal" && (
         <Modal width="600px" height="180px" title="You're almost ready...">
           <RedirectToOnboardingModal />

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

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
 import { useLocation } from "react-router";
-import settings from "assets/settings-centered.svg";
+import settings from "assets/settings.svg";
 
 import api from "shared/api";
 import { DetailedIngressError } from "shared/types";
@@ -22,6 +22,8 @@ import Metrics from "./Metrics";
 import CopyToClipboard from "components/CopyToClipboard";
 import Loading from "components/Loading";
 import Spacer from "components/porter/Spacer";
+import Modal from "main/home/modals/Modal";
+import Input from "components/porter/Input";
 
 type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "incidents" | "configuration";
 
@@ -229,8 +231,142 @@ export const Dashboard: React.FunctionComponent = () => {
   return (
     <>
       <DashboardHeader
-        image={settings}
-        title={context.currentCluster.vanity_name || context.currentCluster.name}
+        title={
+          <Flex>
+            <Div>
+              <svg
+                width="23"
+                height="23"
+                viewBox="0 0 19 19"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15.207 12.4403C16.8094 12.4403 18.1092 11.1414 18.1092 9.53907C18.1092 7.93673 16.8094 6.63782 15.207 6.63782"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M3.90217 12.4403C2.29983 12.4403 1 11.1414 1 9.53907C1 7.93673 2.29983 6.63782 3.90217 6.63782"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M9.54993 13.4133C7.4086 13.4133 5.69168 11.6964 5.69168 9.55417C5.69168 7.41284 7.4086 5.69592 9.54993 5.69592C11.6913 5.69592 13.4082 7.41284 13.4082 9.55417C13.4082 11.6964 11.6913 13.4133 9.54993 13.4133Z"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6.66895 15.207C6.66895 16.8094 7.96787 18.1092 9.5702 18.1092C11.1725 18.1092 12.4715 16.8094 12.4715 15.207"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M6.66895 3.90217C6.66895 2.29983 7.96787 1 9.5702 1C11.1725 1 12.4715 2.29983 12.4715 3.90217"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M5.69591 9.54996C5.69591 7.40863 7.41283 5.69171 9.55508 5.69171C11.6964 5.69171 13.4133 7.40863 13.4133 9.54996C13.4133 11.6913 11.6964 13.4082 9.55508 13.4082C7.41283 13.4082 5.69591 11.6913 5.69591 9.54996Z"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <Spacer inline />
+              {context.currentCluster.vanity_name || context.currentCluster.name}
+              <Spacer inline />
+            </Div>
+            <SettingsIcon onClick={() => {
+              context.setCurrentModal(
+                <Modal
+                  width="600px"
+                  onRequestClose={() => context.setCurrentModal(null, null)}
+                  height="150px"
+                  title="Cluster name"
+                >
+                  <Spacer height="15px" />
+                  <Div>
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 19 19"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M15.207 12.4403C16.8094 12.4403 18.1092 11.1414 18.1092 9.53907C18.1092 7.93673 16.8094 6.63782 15.207 6.63782"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M3.90217 12.4403C2.29983 12.4403 1 11.1414 1 9.53907C1 7.93673 2.29983 6.63782 3.90217 6.63782"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M9.54993 13.4133C7.4086 13.4133 5.69168 11.6964 5.69168 9.55417C5.69168 7.41284 7.4086 5.69592 9.54993 5.69592C11.6913 5.69592 13.4082 7.41284 13.4082 9.55417C13.4082 11.6964 11.6913 13.4133 9.54993 13.4133Z"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M6.66895 15.207C6.66895 16.8094 7.96787 18.1092 9.5702 18.1092C11.1725 18.1092 12.4715 16.8094 12.4715 15.207"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M6.66895 3.90217C6.66895 2.29983 7.96787 1 9.5702 1C11.1725 1 12.4715 2.29983 12.4715 3.90217"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M5.69591 9.54996C5.69591 7.40863 7.41283 5.69171 9.55508 5.69171C11.6964 5.69171 13.4133 7.40863 13.4133 9.54996C13.4133 11.6913 11.6964 13.4082 9.55508 13.4082C7.41283 13.4082 5.69591 11.6913 5.69591 9.54996Z"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                    <Spacer inline />
+                    <Input placeholder="ex: staging" />
+                    {context.currentCluster.vanity_name || context.currentCluster.name}
+                  </Div>
+                </Modal>
+              );
+            }}>
+              <img src={settings} />
+            </SettingsIcon>
+          </Flex>
+        }
         description={
           ingressIp ? (
             <>{renderIngressIp(ingressIp, ingressError)}</>
@@ -248,8 +384,32 @@ export const Dashboard: React.FunctionComponent = () => {
 };
 
 const Div = styled.div`
-  width: 100%;
-  height: 50px;
+  display: flex;
+  align-items: center;
+`;
+
+const SettingsIcon = styled.div`
+  width: 30px;
+  height: 30px;
+  margin-left: 3px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 40px;
+  margin-bottom: -2px;
+  :hover {
+    background: #ffffff18;
+  }
+  > img {
+    width: 22px;
+    opacity: 0.4;
+    margin-bottom: -4px;
+  }
+`;
+
+const Flex = styled.div`
+  display: flex;
 `;
 
 const Br = styled.div`

dashboard/src/shared/types.tsx

@@ -339,7 +339,7 @@ export interface CapabilityType {
 export interface ContextProps {
   currentModal?: string;
   currentModalData: any;
-  setCurrentModal: (currentModal: string, currentModalData?: any) => void;
+  setCurrentModal: (currentModal: any, currentModalData?: any) => void;
   currentOverlay: {
     message: string;
     onYes: any;