Merge branch 'beta.3.frontend-integration' into hotfix

dashboard/src/components/values-form/InputArray.tsx

@@ -0,0 +1,145 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+import InputRow from './InputRow';
+
+type PropsType = {
+  label?: string;
+  values: string[];
+  setValues: (x: string[]) => void;
+  width?: string;
+};
+
+type StateType = {};
+
+export default class InputArray extends Component<PropsType, StateType> {
+
+  renderInputList = () => {
+    return (
+      <>
+        {this.props.values.map((value: string, i: number) => {
+          return (
+            <InputWrapper>
+              <Input
+                placeholder=""
+                width="270px"
+                value={value}
+                onChange={(e: any) => {
+                  let values = [...this.props.values];
+                  values[i] = e.target.value;
+                  this.props.setValues(values);
+                }}
+              />
+              <DeleteButton onClick={() => {
+                let values = [...this.props.values];
+                values.splice(i, 1);
+                this.props.setValues(values);
+              }}>
+                <i className="material-icons">cancel</i>
+              </DeleteButton>
+            </InputWrapper>
+          );
+        })}
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <StyledInputArray>
+        <Label>{this.props.label}</Label>
+        {
+          this.props.values.length === 0
+          ? <></>
+          : this.renderInputList()
+        }
+        <AddRowButton onClick={() => {
+          let values = [...this.props.values];
+          values.push("");
+          this.props.setValues(values);
+        }}>
+          <i className="material-icons">add</i> Add Row
+        </AddRowButton>
+      </StyledInputArray>
+    );
+  }
+}
+
+const AddRowButton = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  width: 270px;
+  font-size: 13px;
+  color: #aaaabb;
+  height: 30px;
+  border-radius: 3px;
+  cursor: pointer;
+  background: #ffffff11;
+  :hover {
+    background: #ffffff22;
+  }
+
+  > i {
+    color: #ffffff44;
+    font-size: 16px;
+    margin-left: 8px;
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+const DeleteButton = styled.div`
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  margin-top: -3px;
+  justify-content: center;
+  
+  > i {
+    font-size: 17px;
+    color: #ffffff44;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    :hover {
+      color: #ffffff88;
+    }
+  }
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Input = styled.input`
+  outline: none;
+  border: none;
+  margin-bottom: 5px;
+  font-size: 13px;
+  background: #ffffff11;
+  border: 1px solid #ffffff55;
+  border-radius: 3px;
+  width: ${(props: { disabled?: boolean; width: string }) =>
+    props.width ? props.width : "270px"};
+  color: ${(props: { disabled?: boolean; width: string }) =>
+    props.disabled ? "#ffffff44" : "white"};
+  padding: 5px 10px;
+  height: 35px;
+`;
+
+const Label = styled.div`
+  color: #ffffff;
+  margin-bottom: 10px;
+`;
+
+const StyledInputArray = styled.div`
+  margin-bottom: 15px;
+  margin-top: 22px;
+`;

dashboard/src/components/values-form/InputRow.tsx

@@ -96,5 +96,5 @@ const Label = styled.div`
 
 const StyledInputRow = styled.div`
   margin-bottom: 15px;
-  margin-top: 20px;
+  margin-top: 22px;
 `;

dashboard/src/components/values-form/ValuesForm.tsx

@@ -12,6 +12,7 @@ import Helper from "./Helper";
 import Heading from "./Heading";
 import ExpandableResource from "../ExpandableResource";
 import VeleroForm from "../forms/VeleroForm";
+import InputArray from './InputArray';
 
 type PropsType = {
   sections?: Section[];
@@ -71,16 +72,13 @@ export default class ValuesForm extends Component<PropsType, StateType> {
           );
         case "array-input":
           return (
-            <InputRow
+            <InputArray
               key={i}
-              isRequired={item.required}
-              type="text"
-              value={this.getInputValue(item)}
-              setValue={(x: string) => {
-                this.props.setMetaState({ [key]: [x] });
+              values={this.props.metaState[key]}
+              setValues={(x: string[]) => {
+                this.props.setMetaState({ [key]: x });
               }}
               label={item.label}
-              unit={item.settings ? item.settings.unit : null}
             />
           );
         case "string-input":

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -73,6 +73,9 @@ export default class ControllerTab extends Component<PropsType, StateType> {
         this.setState({ pods, raw: res.data, showTooltip });
 
         if (isFirst) {
+          let pod = res.data[0];
+          let status = this.getPodStatus(pod.status);
+          (status === "failed" && pod.status?.message) && this.props.setPodError(pod.status?.message);
           selectPod(res.data[0]);
         }
       })

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

@@ -79,7 +79,7 @@ class Dashboard extends Component<PropsType, StateType> {
             <>
               <Banner>
                 <i className="material-icons">error_outline</i>
-                This project currently has no clusters conncted.
+                This project currently has no clusters connected.
               </Banner>
               <ProvisionerSettings infras={this.state.infras} />
             </>

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

@@ -46,7 +46,7 @@ export default class Modal extends Component<PropsType, StateType> {
 }
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   margin: 0;
   padding: 0;
   top: 0;
@@ -55,26 +55,13 @@ const Overlay = styled.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const StyledModal = styled.div`
   position: absolute;
-  top: calc(
-    50% -
-      (
-        ${(props: { width?: string; height?: string }) =>
-            props.height ? props.height : "425px"} / 2
-      )
-  );
-  left: calc(
-    50% -
-      (
-        ${(props: { width?: string; height?: string }) =>
-            props.width ? props.width : "760px"} / 2
-      )
-  );
-  display: flex;
-  justify-content: center;
   width: ${(props: { width?: string; height?: string }) =>
     props.width ? props.width : "760px"};
   max-width: 80vw;

dashboard/src/main/home/project-settings/InviteList.tsx

@@ -395,6 +395,7 @@ const MailTd = styled(Td)`
   max-width: 186px;
   min-width: 186px;
   overflow: hidden;
+  color: #aaaabb;
   text-overflow: ellipsis;
 `;
 

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -283,6 +283,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         tabOptions.push({ value: tab.name, label: tab.label });
       }
     });
+    console.log(tabOptions)
     this.setState({ tabOptions, currentTab: tabOptions[0]["value"] });
 
     // TODO: query with selected filter once implemented