Merge pull request #169 from porter-dev/beta.3.integration-frontend

Beta.3.integration frontend

dashboard/package-lock.json

@@ -1153,7 +1153,7 @@
       "dev": true
     },
     "axios": {
-      "version": "0.20.0",
+      "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
       "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
       "requires": {

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -115,9 +115,9 @@ export default class Sidebar extends Component<PropsType, StateType> {
             Templates
           </NavButton>
           <NavButton
-            onClick={() => this.props.setCurrentView('integrations')}
+            // onClick={() => this.props.setCurrentView('integrations')}
             selected={this.props.currentView === 'integrations'}
-            // onClick={() => this.context.setCurrentModal('IntegrationsInstructionsModal', {})}
+            onClick={() => this.context.setCurrentModal('IntegrationsInstructionsModal', {})}
           >
             <img src={integrations} />
             Integrations

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

@@ -97,14 +97,14 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   renderTabContents = () => {
     return (
       <ValuesWrapper
-        formTabs={this.props.form.tabs}
+        formTabs={this.props.form?.tabs}
         onSubmit={this.onSubmit}
         saveValuesStatus={this.state.saveValuesStatus}
         disabled={!this.state.selectedImageUrl}
       >
         {
           (metaState: any, setMetaState: any) => {
-            return this.props.form.tabs.map((tab: any, i: number) => {
+            return this.props.form?.tabs.map((tab: any, i: number) => {
 
               // If tab is current, render
               if (tab.name === this.state.currentTab) {
@@ -127,7 +127,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   componentDidMount() {
     // Retrieve tab options
     let tabOptions = [] as ChoiceType[];
-    this.props.form.tabs.map((tab: any, i: number) => {
+    this.props.form?.tabs.map((tab: any, i: number) => {
       if (tab.context.type === 'helm/values') {
         tabOptions.push({ value: tab.name, label: tab.label });
       }
@@ -183,9 +183,8 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { name, icon, description } = this.props.form;
+    let { name, icon } = this.props.currentTemplate;
     let { currentTemplate } = this.props;
-    name = name ? name : currentTemplate.name;
 
     return (
       <StyledLaunchTemplate>

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

@@ -8,6 +8,7 @@ import api from '../../../../shared/api';
 import Loading from '../../../../components/Loading';
 
 import { PorterTemplate } from '../../../../shared/types';
+import { timeStamp } from 'console';
 
 type PropsType = {
   currentTemplate: any,
@@ -62,11 +63,41 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
     }
   }
 
+  renderBanner = () => {
+    let { currentCluster } = this.context;
+    if (!currentCluster) {
+      return (
+        <>
+          <Br />
+          <Banner>
+            <i className="material-icons">error_outline</i>
+            This project requires at least one cluster to launch a template.
+          </Banner>
+        </>
+      );
+    } else if (this.props.currentTemplate.name.toLowerCase() === 'docker') {
+      return (
+        <>
+          <Br />
+          <Banner>
+            <i className="material-icons-outlined">info</i>
+            For instructions on connecting to your registry 
+            <Link 
+              target="_blank"
+              href="https://docs.getporter.dev/docs/cli-documentation#pushing-docker-images-to-your-porter-image-registry"
+            >
+              refer to our docs
+            </Link>.
+          </Banner>
+        </>
+      );
+    }
+  }
+
   render() {
     let { currentCluster } = this.context;
     let { name, icon } = this.props.currentTemplate;
     let { currentTemplate } = this.props;
-    name = name ? name : currentTemplate.name;
     return (
       <StyledExpandedTemplate>
         <TitleSection>
@@ -87,6 +118,7 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
         </TitleSection>
         {this.renderTagSection()}
         <LineBreak />
+        {this.renderBanner()}
         <ContentSection>
           {this.renderMarkdown()}
         </ContentSection>
@@ -97,6 +129,34 @@ export default class TemplateInfo extends Component<PropsType, StateType> {
 
 TemplateInfo.contextType = Context;
 
+const Link = styled.a`
+  text-decoration: underline;
+  color: white;
+  cursor: pointer;
+  margin-left: 5px;
+`;
+
+const Br = styled.div`
+  height: 5px;
+  width: 100%;
+`;
+
+const Banner = styled.div`
+  height: 40px;
+  width: 100%;
+  margin: 15px 0;
+  font-size: 13px;
+  display: flex;
+  border-radius: 5px;
+  padding-left: 15px;
+  align-items: center;
+  background: #616FEEcc;
+  > i {
+    margin-right: 10px;
+    font-size: 18px;
+  }
+`;
+
 const LineBreak = styled.div`
   width: calc(100% - 0px);
   height: 2px;