docs banners

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/templates/Templates.tsx

@@ -75,6 +75,7 @@ export default class Templates extends Component<PropsType, StateType> {
 
     return this.state.PorterTemplates.map((template: PorterTemplate, i: number) => {
       let { name, icon, description } = template;
+      console.log(template)
       return (
         <TemplateBlock key={i} onClick={() => this.setState({ currentTemplate: template })}>
           {icon ? this.renderIcon(icon) : this.renderIcon(template.icon)}

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

@@ -125,6 +125,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
+    console.log(this.context.currentCluster.name);
     // Retrieve tab options
     let tabOptions = [] as ChoiceType[];
     this.props.form.tabs.map((tab: any, i: number) => {

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;