rename cluster modal fe

dashboard/src/components/porter/Button.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import styled, { keyframes } from "styled-components";
+
+import loading from "assets/loading.gif";
+
+type Props = {
+  children: React.ReactNode;
+  disabled?: boolean;
+  status?: string;
+  loadingText?: string;
+  successText?: string;
+};
+
+const Button: React.FC<Props> = ({
+  children,
+  disabled,
+  status,
+  loadingText,
+  successText,
+}) => {
+  const renderStatus = () => {
+    switch(status) {
+      case "success":
+        return (
+          <StatusWrapper success={true}>
+            <i className="material-icons">done</i>
+            {successText || "Successfully updated"}
+          </StatusWrapper>
+        );
+      case "loading":
+        return (
+          <StatusWrapper success={false}>
+            <Loading src={loading} />
+            {loadingText || "Updating . . ."}
+          </StatusWrapper>
+        );
+      default:
+        return (
+          <StatusWrapper success={false}>
+            <i className="material-icons">error_outline</i>
+            Could not update
+          </StatusWrapper>
+        );
+    }
+  };
+
+  return (
+    <Wrapper>
+      <StyledButton
+        disabled={disabled}
+      >
+        <Text>{children}</Text>
+      </StyledButton>
+      {status && renderStatus()}
+    </Wrapper>
+  );
+};
+
+export default Button;
+
+const Loading = styled.img`
+  width: 15px;
+  height: 15px;
+  margin-right: 9px;
+  margin-bottom: 0px;
+`;
+
+const floatIn = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+`;
+
+const StatusWrapper = styled.div<{
+  success?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  font-family: "Work Sans", sans-serif;
+  font-size: 13px;
+  color: #ffffff55;
+  margin-left: 15px;
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: ${floatIn} 0.5s;
+  animation-fill-mode: forwards;
+  > i {
+    font-size: 18px;
+    margin-right: 10px;
+    float: left;
+    color: ${props => props.success ? "#4797ff" : "#fcba03"};
+  }
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Text = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+const StyledButton = styled.button<{
+  disabled: boolean;
+}>`
+  height: 35px;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 15px;
+  border: none;
+  outline: none;
+  font-weight: 500;
+  color: white;
+  background: #5561C0;
+  display: flex;
+  ailgn-items: center;
+  justify-content: center;
+  border-radius: 5px;
+
+  :hover {
+    filter: ${props => !props.disabled ? "brightness(120%)" : ""};
+  }
+`;

dashboard/src/components/porter/Input.tsx

@@ -3,24 +3,42 @@ import styled from "styled-components";
 
 type Props = {
   placeholder: string;
+  width?: string;
+  value: string;
+  setValue: (value: string) => void;
 };
 
 const Input: React.FC<Props> = ({
   placeholder,
+  width,
+  value,
+  setValue,
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  useEffect(() => {
-    // Do something
-  }, []);
-
   return (
-    <StyledInput placeholder={placeholder}>
-    </StyledInput>
+    <StyledInput
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      placeholder={placeholder}
+      width={width}
+    />
   );
 };
 
 export default Input;
 
-const StyledInput = styled.input`
+const StyledInput = styled.input<{
+  width: string;
+}>`
+  height: 35px;
+  padding: 5px 10px;
+  width: ${props => props.width || "200px"};
+  color: white;
+  font-saize: 13px;
+  outline: none;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
 `;

dashboard/src/components/porter/Spacer.tsx

@@ -13,19 +13,26 @@ const Spacer: React.FC<Props> = ({
   inline,
 }) => {
   const getCalcHeight = () => {
-    return 25 * y;
+    if (y) {
+      return 25 * y + "px";
+    }
+    return null
   };
   
   return (
     <StyledSpacer
-      height={height || (getCalcHeight() + "px")}
+      height={height || getCalcHeight()}
+      width={inline && "15px"}
     />
   );
 };
 
 export default Spacer;
 
-const StyledSpacer = styled.div<{ height: string }>`
-  height: ${props => props.height};
-  width: ${props => props.height ? "100%" : ""};
+const StyledSpacer = styled.div<{ 
+  height: string;
+  width: string;
+}>`
+  height: ${props => props.height || "100%"};
+  width: ${props => props.height ? "100%" : props.width};
 `;

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

@@ -0,0 +1,118 @@
+import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+
+import { Context } from "shared/Context";
+
+import Modal from "main/home/modals/Modal";
+import Input from "components/porter/Input";
+import Button from "components/porter/Button";
+import Spacer from "components/porter/Spacer";
+
+type Props = {
+};
+
+const ClusterSettingsModal: React.FC<Props> = ({
+}) => {
+  const { setCurrentModal, currentCluster } = useContext(Context);
+  const [clusterName, setClusterName] = useState("");
+
+  useEffect(() => {
+    setClusterName(currentCluster.vanity_name || currentCluster.name);
+  }, []);
+
+  return (
+    <Modal
+      width="600px"
+      height="auto"
+      onRequestClose={() => setCurrentModal(null, null)}
+      title="Cluster name"
+    >
+      <Spacer height="15px" />
+      <Flex>
+        <IconWrapper>
+        <svg
+          width="18"
+          height="18"
+          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>
+        </IconWrapper>
+        <Spacer inline />
+        <Input 
+          placeholder="ex: my-cluster" 
+          width="100%"
+          value={clusterName}
+          setValue={setClusterName}
+        />
+      </Flex>
+      <Spacer y={1} />
+      <Button>Save</Button>
+    </Modal>
+  );
+};
+
+export default ClusterSettingsModal;
+
+const IconWrapper = styled.div`
+  min-width: 35px;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #494b4f;
+  border-radius: 5px;
+  cursor: not-allowed;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  align-items: center;
+`;

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

@@ -18,12 +18,11 @@ import NodeList from "./NodeList";
 import { NamespaceList } from "./NamespaceList";
 import ClusterSettings from "./ClusterSettings";
 import Metrics from "./Metrics";
+import ClusterSettingsModal from "./ClusterSettingsModal";
 
 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";
 
@@ -61,7 +60,6 @@ export const Dashboard: React.FunctionComponent = () => {
               clusterId={context.currentCluster.id}
               credentialId={context.currentCluster.cloud_provider_credential_identifier}
             />
-            <Div />
           </>
         );
       default:
@@ -233,7 +231,7 @@ export const Dashboard: React.FunctionComponent = () => {
       <DashboardHeader
         title={
           <Flex>
-            <Div>
+            <Flex>
               <svg
                 width="23"
                 height="23"
@@ -291,77 +289,9 @@ export const Dashboard: React.FunctionComponent = () => {
               <Spacer inline />
               {context.currentCluster.vanity_name || context.currentCluster.name}
               <Spacer inline />
-            </Div>
+            </Flex>
             <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>
-              );
+              context.setCurrentModal(<ClusterSettingsModal />);
             }}>
               <img src={settings} />
             </SettingsIcon>
@@ -383,11 +313,6 @@ export const Dashboard: React.FunctionComponent = () => {
   );
 };
 
-const Div = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 const SettingsIcon = styled.div`
   width: 30px;
   height: 30px;
@@ -410,6 +335,7 @@ const SettingsIcon = styled.div`
 
 const Flex = styled.div`
   display: flex;
+  align-items: center;
 `;
 
 const Br = styled.div`

dashboard/src/main/home/modals/Modal.tsx

@@ -103,8 +103,8 @@ const CloseButton = styled.div`
   justify-content: center;
   z-index: 1;
   border-radius: 50%;
-  right: 15px;
-  top: 12px;
+  right: 12px;
+  top: 10px;
   cursor: pointer;
   :hover {
     background-color: #ffffff11;
@@ -131,16 +131,18 @@ const Overlay = styled.div`
   justify-content: center;
 `;
 
-const StyledModal = styled.div`
+const StyledModal = styled.div<{
+  width: string;
+  height: string;
+}>`
   position: absolute;
-  width: ${(props: { width?: string; height?: string }) =>
-    props.width ? props.width : "760px"};
+  width: ${props => props.width || "760px"};
   max-width: 80vw;
-  height: ${(props: { width?: string; height?: string }) =>
-    props.height ? props.height : "425px"};
+  height: ${props => props.height || "425px"};
   max-height: calc(100vh - 30px);
   overflow: visible;
-  padding: 25px 32px;
+  padding: 25px;
+  padding-bottom: 30px;
   z-index: 999;
   font-size: 13px;
   border-radius: 10px;