infer provider type for templates

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

@@ -138,6 +138,21 @@ export default class ValuesForm extends Component<PropsType, StateType> {
               label={item.label}
             />
           );
+        case 'provider-select':
+          return (
+            <SelectRow
+              key={i}
+              value={this.props.metaState[key]}
+              setActiveValue={(val) => this.props.setMetaState({ [key]: val })}
+              options={[
+                { value: 'gcp', label: 'Google Cloud Platform (GCP)' },
+                { value: 'aws', label: 'Amazon Web Services (AWS)' },
+                { value: 'do', label: 'DigitalOcean' },
+              ]}
+              dropdownLabel=''
+              label={item.label}
+            />
+          );
         case 'velero-create-backup':
           return (
             <VeleroForm

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 
 import { Section, FormElement } from '../../shared/types';
+import { Context } from '../../shared/Context';
 
 import SaveButton from '../SaveButton';
 
@@ -16,6 +17,12 @@ type PropsType = {
 
 type StateType = any;
 
+const providerMap: any = {
+  'gke': 'gcp',
+  'eks': 'aws',
+  'doks': 'do',
+};
+
 // Manages the consolidated state of all form tabs ("metastate")
 export default class ValuesWrapper extends Component<PropsType, StateType> {
 
@@ -56,6 +63,10 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
               case 'select':
                 metaState[key] = def ? def : item.settings.options[0].value;
                 break;
+              case 'provider-select':
+                def = providerMap[this.context.currentCluster.service];
+                metaState[key] = def ? def : 'aws';
+                break;
               case 'base-64':
                 metaState[key] = def ? def : '';
               case 'base-64-password':
@@ -128,6 +139,8 @@ export default class ValuesWrapper extends Component<PropsType, StateType> {
   }
 }
 
+ValuesWrapper.contextType = Context;
+
 const StyledValuesWrapper = styled.div`
   width: 100%;
   padding: 0;

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

@@ -52,7 +52,7 @@ export default class ClusterPlaceholder extends Component<PropsType, StateType>
             <Highlight onClick={() => {
               this.context.setCurrentModal('ClusterInstructionsModal', {});
             }}>
-              + Add a Cluster
+              + Connect a Cluster
             </Highlight>
           </StyledStatusPlaceholder>
         </>

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

@@ -151,19 +151,13 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           </DrawerButton>
         </ClusterSelector>
       );
-    } else if (false) {
-      return (
-        <InitializeButton onClick={this.showClusterConfigModal}>
-          <Plus>+</Plus> Add a Cluster
-        </InitializeButton>
-      );
     }
 
     return (
       <InitializeButton
         onClick={() => this.context.setCurrentModal('ClusterInstructionsModal', {})}
       >
-        <Plus>+</Plus> Add a Cluster
+        <Plus>+</Plus> Connect a Cluster
       </InitializeButton>
     )
   };