Merge branch 'beta.3.integration-frontend' of https://github.com/porter-dev/porter into sean-testing

dashboard/src/components/TabRegion.tsx

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

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

@@ -186,6 +186,7 @@ const LogStream = styled.div`
   background: #202227;
   user-select: text;
   max-width: 65%;
+  overflow-y: auto;
   overflow-wrap: break-word; 
 `;
 

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

@@ -63,7 +63,6 @@ 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}

dashboard/src/main/home/provisioner/ProvisionerStatus.tsx

@@ -211,7 +211,6 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
           if (clusters.length > 0) {
             // console.log('response :', res.data);
             this.props.setCurrentView('dashboard');
-            alert('setting to dashboard');
             // console.log('provision end project: ', this.context.currentProject);
             // console.log('provision end cluster: ', this.context.currentCluster);
             clearInterval(myInterval);

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

@@ -9,7 +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 InputRow from '../../../../components/values-form/InputRow';
 import SaveButton from '../../../../components/SaveButton';
 import ValuesWrapper from '../../../../components/values-form/ValuesWrapper';
 import ValuesForm from '../../../../components/values-form/ValuesForm';
@@ -31,6 +31,7 @@ type StateType = {
   selectedCluster: string,
   selectedImageUrl: string | null,
   selectedTag: string | null,
+  templateName: string,
   tabOptions: ChoiceType[],
   currentTab: string | null,
   tabContents: any
@@ -45,6 +46,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     selectedCluster: this.context.currentCluster.name,
     selectedNamespace: "default",
     selectedImageUrl: '' as string | null,
+    templateName: '',
     selectedTag: '' as string | null,
     tabOptions: [] as ChoiceType[],
     currentTab: null as string | null,
@@ -54,7 +56,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
   onSubmitAddon = (wildcard?: any) => {
     let { currentCluster, currentProject } = this.context;
-    let name = randomWords({ exactly: 3, join: '-' });
+    let name = this.state.templateName || randomWords({ exactly: 3, join: '-' });
     this.setState({ saveValuesStatus: 'loading' });
 
     let values = {};
@@ -85,7 +87,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
   onSubmit = (rawValues: any) => {
     let { currentCluster, currentProject } = this.context;
-    let name = randomWords({ exactly: 3, join: '-' });
+    let name = this.state.templateName || randomWords({ exactly: 3, join: '-' });
     this.setState({ saveValuesStatus: 'loading' });
 
     // Convert dotted keys to nested objects
@@ -262,7 +264,10 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     if (this.props.form?.hasSource) {
       return (
         <>
-          <Subtitle>Select the container image you would like to connect to this template.</Subtitle>
+          <Subtitle>
+            Select the container image you would like to connect to this template.
+            <Required>*</Required>
+          </Subtitle>
           <DarkMatter />
           <ImageSelector
             selectedTag={this.state.selectedTag}
@@ -322,6 +327,15 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
             closeOverlay={true}
           />
         </ClusterSection>
+        <Subtitle>Give a unique name to this template (optional).</Subtitle>
+        <DarkMatter antiHeight='-27px' />
+        <InputRow
+          type='text'
+          value={this.state.templateName}
+          setValue={(x: string) => this.setState({ templateName: x })}
+          placeholder='ex: doctor-scientist'
+          width='100%'
+        />
         {this.renderSourceSelector()}
         {this.renderTabRegion()}
       </StyledLaunchTemplate>
@@ -331,6 +345,11 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
+const Required = styled.div`
+  margin-left: 8px;
+  color: #fc4976;
+`;
+
 const Link = styled.a`
   margin-left: 5px;
 `;
@@ -362,9 +381,9 @@ const Placeholder = styled.div`
   justify-content: center;
 `;
 
-const DarkMatter = styled.div`
+const DarkMatter = styled.div<{ antiHeight?: string }>`
   width: 100%;
-  margin-top: -15px;
+  margin-top: ${props => props.antiHeight || '-15px'};
 `;
 
 const Subtitle = styled.div`
@@ -373,6 +392,8 @@ const Subtitle = styled.div`
   font-size: 13px;
   color: #aaaabb;
   line-height: 1.6em;
+  display: flex;
+  align-items: center;
 `;
 
 const ClusterLabel = styled.div`

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

@@ -95,6 +95,22 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
           </Banner>
         </>
       );
+    } else if (this.props.currentTemplate.name.toLowerCase() === 'https-issuer') {
+      return (
+        <>
+          <Br />
+          <Banner>
+            <i className="material-icons-outlined">info</i>
+            To use this template you must first follow
+            <Link 
+              target="_blank"
+              href="https://docs.getporter.dev/docs/https-and-custom-domains"
+            >
+              Porter's HTTPS setup guide
+            </Link> (5 minutes).
+          </Banner>
+        </>
+      );
     }
   }
 
@@ -141,6 +157,7 @@ TemplateInfo.contextType = Context;
 
 const Link = styled.a`
   color: #8590ff;
+  margin-right: 5px;
   cursor: pointer;
   margin-left: 5px;
 `;