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

dashboard/src/components/TabRegion.tsx

@@ -11,6 +11,7 @@ type PropsType = {
   defaultTab?: string,
   addendum?: any,
   color?: string | null,
+  overflowY?: string,
 };
 
 type StateType = {
@@ -63,7 +64,7 @@ export default class TabRegion extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <StyledTabRegion>
+      <StyledTabRegion overflowY={this.props.overflowY}>
         {this.renderContents()}
       </StyledTabRegion>
     );
@@ -98,9 +99,9 @@ const Gap = styled.div`
   height: 30px;
 `;
 
-const StyledTabRegion = styled.div`
+const StyledTabRegion = styled.div<{ overflowY: string }>`
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: auto;
+  overflow-y: ${props => props.overflowY};
 `;

dashboard/src/main/home/dashboard/StatusPlaceholder.tsx → dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -17,7 +17,7 @@ type StateType = {
   loading: boolean,
 };
 
-export default class StatusPlaceholder extends Component<PropsType, StateType> {
+export default class ClusterPlaceholder extends Component<PropsType, StateType> {
   state = {
     loading: true,
   }
@@ -65,7 +65,7 @@ export default class StatusPlaceholder extends Component<PropsType, StateType> {
   }
 }
 
-StatusPlaceholder.contextType = Context;
+ClusterPlaceholder.contextType = Context;
 
 const LoadingWrapper = styled.div`
   height: calc(100vh - 450px);

dashboard/src/main/home/dashboard/StatusPlaceholderContainer.tsx → dashboard/src/main/home/dashboard/ClusterPlaceholderContainer.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import { Context } from '../../../shared/Context';
-import StatusPlaceholder from './StatusPlaceholder';
+import ClusterPlaceholder from './ClusterPlaceholder';
 
 type PropsType = {
   setCurrentView: (x: string) => void,
@@ -12,13 +12,13 @@ type StateType = {
 };
 
 // Props in context to project section to trigger update on context change
-export default class StatusPlaceholderContainer extends Component<PropsType, StateType> {
+export default class ClusterPlaceholderContainer extends Component<PropsType, StateType> {
   state = {
   }
 
   render() {
     return (
-      <StatusPlaceholder
+      <ClusterPlaceholder
         setCurrentView={this.props.setCurrentView}
         currentCluster={this.context.currentCluster}
       />
@@ -26,4 +26,4 @@ export default class StatusPlaceholderContainer extends Component<PropsType, Sta
   }
 }
 
-StatusPlaceholderContainer.contextType = Context;
+ClusterPlaceholderContainer.contextType = Context;

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

@@ -8,6 +8,7 @@ import { InfraType } from '../../../shared/types';
 import api from '../../../shared/api';
 
 import ProvisionerSettings from '../provisioner/ProvisionerSettings';
+import ClusterPlaceholderContainer from './ClusterPlaceholderContainer';
 
 type PropsType = {
   setCurrentView: (x: string) => void,
@@ -94,16 +95,24 @@ export default class Dashboard extends Component<PropsType, StateType> {
 
             <LineBreak />
 
-            {!currentCluster && (
-              <Banner>
-                <i className="material-icons">error_outline</i>
-                This project currently has no clusters conncted.
-              </Banner>
-            )}
-            <ProvisionerSettings 
-              setCurrentView={setCurrentView} 
-              infras={infras}
-            />
+            {!currentCluster 
+              ? (
+                <>
+                  <Banner>
+                    <i className="material-icons">error_outline</i>
+                    This project currently has no clusters conncted.
+                    </Banner>
+                  <ProvisionerSettings 
+                    setCurrentView={setCurrentView} 
+                    infras={infras}
+                  />
+                </>
+              ) : (
+                <ClusterPlaceholderContainer
+                  setCurrentView={this.props.setCurrentView} 
+                />
+              )
+            }
           </DashboardWrapper>
         )}
       </>

dashboard/src/main/home/new-project/NewProject.tsx

@@ -343,7 +343,7 @@ const TitleSection = styled.div`
 `;
 
 const StyledNewProject = styled.div`
-  width: calc(90% - 150px);
+  width: calc(90% - 130px);
   min-width: 300px;
   position: relative;
   padding-top: 50px;

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

@@ -245,12 +245,12 @@ export default class InviteList extends Component<PropsType, StateType> {
           >
             Create Invite
           </InviteButton>
+          {this.state.invalidEmail &&
+            <Invalid>
+              Invalid email address. Please try again.
+            </Invalid>
+          }
         </ButtonWrapper>
-        {this.state.invalidEmail &&
-          <Invalid>
-            Invalid Email Address. Try Again.
-          </Invalid>
-        }
         {this.renderInvitations()}
       </>
     )
@@ -428,9 +428,8 @@ const LinkTd = styled(Td)`
 `;
 
 const Invalid = styled.div`
-  margin-top: -26px;
-  margin-bottom: 26px;
-  color: #fa0a26;
+  color: #f5cb42;
+  margin-left: 15px;
   font-size: 13px;
   font-family: 'Work Sans', sans-serif;
 `;

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

@@ -63,6 +63,7 @@ export default class ProjectSettings extends Component<PropsType, StateType> {
           <Title>Project Settings</Title>
         </TitleSection>
         <TabRegion
+          overflowY='visible'
           currentTab={this.state.currentTab}
           setCurrentTab={(x: string) => this.setState({ currentTab: x })}
           options={tabOptions}
@@ -100,9 +101,9 @@ const TitleSection = styled.div`
 `;
 
 const StyledProjectSettings = styled.div`
-  width: calc(90% - 150px);
+  width: calc(90% - 130px);
   min-width: 300px;
-  padding-top: 45px;
+  padding-top: 70px;
 `;
 
 const LineBreak = styled.div`
@@ -179,10 +180,4 @@ const DeleteButton = styled.div`
   :hover {
     filter: brightness(120%);
   }
-`;
-
-const ContentHolder = styled.div`
-  min-width: 420px;
-  width: 100%;
-  margin-bottom: 55px;
 `;

dashboard/src/main/home/templates/Templates.tsx

@@ -266,7 +266,7 @@ const TitleSection = styled.div`
 `;
 
 const TemplatesWrapper = styled.div`
-  width: calc(90% - 150px);
+  width: calc(90% - 130px);
   min-width: 300px;
-  padding-top: 50px;
+  padding-top: 75px;
 `;

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

@@ -105,5 +105,5 @@ const LoadingWrapper = styled.div`
 const StyledExpandedTemplate = styled.div`
   width: calc(90% - 150px);
   min-width: 300px;
-  padding-top: 50px;
+  padding-top: 75px;
 `;

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

@@ -9,6 +9,7 @@ import { PorterTemplate, ChoiceType, ClusterType, StorageType } from '../../../.
 import Selector from '../../../../components/Selector';
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
 import TabRegion from '../../../../components/TabRegion';
+import Heading from '../../../../components/values-form/Heading';
 import SaveButton from '../../../../components/SaveButton';
 import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
 import ValuesForm from '../../../../components/values-form/ValuesForm';
@@ -319,6 +320,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
             closeOverlay={true}
           />
         </ClusterSection>
+        <Subtitle>Name</Subtitle>
         {this.renderSourceSelector()}
         {this.renderTabRegion()}
       </StyledLaunchTemplate>