Merge branch 'master' of https://github.com/porter-dev/porter

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -15,8 +15,9 @@ type PropsType = {
   forceExpanded?: boolean,
   selectedImageUrl: string | null,
   selectedTag: string | null,
-  setSelectedImageUrl: (x: string) => void
-  setSelectedTag: (x: string) => void
+  setSelectedImageUrl: (x: string) => void,
+  setSelectedTag: (x: string) => void,
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -54,7 +55,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                 registry_id: registry.id,
               }, (err: any, res: any) => {
               if (err && this.state.loading) {
-                this.setState({ error: true });
+                this.setState({ error: true, loading: false });
               } else {
                 let newImg = res.data.map((img: any) => {
                   return {
@@ -63,14 +64,12 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                   }
                 })
                 images.push(...newImg)
-                if (i == registries.length - 1) {
-                  this.setState({
-                    images,
-                    registryId: registry.id,
-                    loading: false,
-                    error: false,
-                  })
-                }
+                this.setState({
+                  images: [],
+                  registryId: registry.id,
+                  loading: false,
+                  error: false,
+                });
                 nextController()
               }
             });    
@@ -86,6 +85,15 @@ export default class ImageSelector extends Component<PropsType, StateType> {
       return <LoadingWrapper><Loading /></LoadingWrapper>
     } else if (error || !images) {
       return <LoadingWrapper>Error loading repos</LoadingWrapper>
+    } else if (images.length === 0) {
+      return (
+        <LoadingWrapper>
+          No registries found. 
+          <Highlight onClick={() => this.props.setCurrentView('integrations')}>
+            Link your registry.
+          </Highlight>
+        </LoadingWrapper>
+      );
     }
 
     return images.map((image: ImageType, i: number) => {
@@ -210,6 +218,14 @@ export default class ImageSelector extends Component<PropsType, StateType> {
 
 ImageSelector.contextType = Context;
 
+const Highlight = styled.div`
+  text-decoration: underline;
+  margin-left: 10px;
+  color: #949eff;
+  cursor: pointer;
+  padding: 3px 0;
+`;
+
 const BackButton = styled.div`
   display: flex;
   align-items: center;
@@ -239,6 +255,7 @@ const Input = styled.input`
   outline: 0;
   background: none;
   border: 0;
+  font-size: 13px;
   width: calc(100% - 60px);
   color: white;
 `;

dashboard/src/main/home/Home.tsx

@@ -97,7 +97,11 @@ export default class Home extends Component<PropsType, StateType> {
       return <Integrations />;
     }
 
-    return <Templates />;
+    return (
+      <Templates 
+        setCurrentView={(x: string) => this.setState({ currentView: x })} 
+      />
+    );
   }
 
   render() {

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -75,7 +75,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
   }
 
   renderContents = () => {
-    let { currentCluster, setSidebar } = this.props;
+    let { currentCluster, setSidebar, setCurrentView } = this.props;
 
     if (this.state.currentChart) {
       return (
@@ -84,6 +84,7 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
           refreshChart={this.refreshChart}
           setCurrentChart={(x: ChartType | null) => this.setState({ currentChart: x })}
           setSidebar={setSidebar}
+          setCurrentView={setCurrentView} // Link to integrations from chart settings
         />
       );
     }

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -21,7 +21,8 @@ type PropsType = {
   currentChart: ChartType,
   setCurrentChart: (x: ChartType | null) => void,
   refreshChart: () => void,
-  setSidebar: (x: boolean) => void
+  setSidebar: (x: boolean) => void,
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -147,18 +148,18 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     tabOptions.push(
       { label: 'Status', value: 'status' },
       //{ label: 'Deploy', value: 'deploy' },
+      { label: 'Chart Overview', value: 'graph' },
       { label: 'Settings', value: 'settings' },
     );
 
     if (this.state.devOpsMode) {
       tabOptions.push(
-        { label: 'Chart Overview', value: 'graph' },
         { label: 'Manifests', value: 'list' },
         { label: 'Raw Values', value: 'values' }
       );
     }
 
-    let { currentChart, refreshChart, setSidebar } = this.props;
+    let { currentChart, refreshChart, setSidebar, setCurrentView } = this.props;
     let chart = this.state.revisionPreview || currentChart;
     tabContents.push(
       {
@@ -176,6 +177,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
           <SettingsSection
             currentChart={chart}
             refreshChart={refreshChart}
+            setCurrentView={setCurrentView}
           /> 
         ),
       },
@@ -256,14 +258,12 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       let { tabOptions } = this.state;
       tabOptions.pop();
       tabOptions.pop();
-      tabOptions.pop();
       this.setState({ devOpsMode: false, checkTabExists: true, tabOptions }, () => {
         localStorage.setItem('devOpsMode', 'false')
       });
     } else {
       let { tabOptions } = this.state;
       tabOptions.push(
-        { label: 'Chart Overview', value: 'graph' },
         { label: 'Manifests', value: 'list' },
         { label: 'Raw Values', value: 'values' }
       );

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -10,8 +10,9 @@ import ImageSelector from '../../../../components/image-selector/ImageSelector';
 import SaveButton from '../../../../components/SaveButton';
 
 type PropsType = {
-  currentChart: ChartType
-  refreshChart: () => void
+  currentChart: ChartType,
+  refreshChart: () => void,
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -70,6 +71,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
             setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
             setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
             forceExpanded={true}
+            setCurrentView={this.props.setCurrentView}
           />
         </StyledSettingsSection>
         <SaveButton

dashboard/src/main/home/integrations/integration-form/DockerHubForm.tsx

@@ -26,6 +26,14 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
     dockerPassword: ''
   }
 
+  isDisabled = (): boolean => {
+    let { registryURL, dockerEmail, dockerUsername, dockerPassword } = this.state;
+    if (registryURL === '' || dockerEmail === '' || dockerUsername === '' || dockerPassword === '') {
+      return true;
+    }
+    return false;
+  }
+
   handleSubmit = () => {
     // TODO: implement once api is restructured
   }
@@ -70,7 +78,8 @@ export default class DockerHubForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={this.handleSubmit}
+          disabled={this.isDisabled()}
+          onClick={this.isDisabled() ? null : this.handleSubmit}
         />
       </StyledForm>
     );

dashboard/src/main/home/integrations/integration-form/EKSForm.tsx

@@ -31,6 +31,15 @@ export default class EKSForm extends Component<PropsType, StateType> {
     awsSecretKey: '',
   }
 
+  isDisabled = (): boolean => {
+    let { clusterName, clusterEndpoint, clusterCA, awsAccessId, awsSecretKey } = this.state;
+    if (clusterName === '' || clusterEndpoint === '' || clusterCA === '' 
+      || awsAccessId === '' || awsSecretKey === '') {
+      return true;
+    }
+    return false;
+  }
+
   handleSubmit = () => {
     // TODO: implement once api is restructured
   }
@@ -87,7 +96,8 @@ export default class EKSForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={this.handleSubmit}
+          disabled={this.isDisabled()}
+          onClick={this.isDisabled() ? null : this.handleSubmit}
         />
       </StyledForm>
     );

dashboard/src/main/home/integrations/integration-form/GCRForm.tsx

@@ -25,6 +25,14 @@ export default class GCRForm extends Component<PropsType, StateType> {
     serviceAccountKey: '',
   }
 
+  isDisabled = (): boolean => {
+    let { credentialsName, serviceAccountKey } = this.state;
+    if (credentialsName === '' || serviceAccountKey === '') {
+      return true;
+    }
+    return false;
+  }
+  
   handleSubmit = () => {
     // TODO: implement once api is restructured
   }
@@ -56,7 +64,8 @@ export default class GCRForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={this.handleSubmit}
+          disabled={this.isDisabled()}
+          onClick={this.isDisabled() ? null : this.handleSubmit}
         />
       </StyledForm>
     );

dashboard/src/main/home/integrations/integration-form/GKEForm.tsx

@@ -29,6 +29,14 @@ export default class GKEForm extends Component<PropsType, StateType> {
     serviceAccountKey: ''
   }
 
+  isDisabled = (): boolean => {
+    let { clusterName, clusterEndpoint, clusterCA, serviceAccountKey } = this.state;
+    if (clusterName === '' || clusterEndpoint === '' || clusterCA === '' || serviceAccountKey === '') {
+      return true;
+    }
+    return false;
+  }
+
   handleSubmit = () => {
     // TODO: implement once api is restructured
   }
@@ -76,7 +84,8 @@ export default class GKEForm extends Component<PropsType, StateType> {
         <SaveButton
           text='Save Settings'
           makeFlush={true}
-          onClick={this.handleSubmit}
+          disabled={this.isDisabled()}
+          onClick={this.isDisabled() ? null : this.handleSubmit}
         />
       </StyledForm>
     );

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

@@ -14,6 +14,7 @@ const tabOptions = [
 ];
 
 type PropsType = {
+  setCurrentView: (x: string) => void, // Link to add integration from source selector
 };
 
 type StateType = {
@@ -96,6 +97,7 @@ export default class Templates extends Component<PropsType, StateType> {
         <ExpandedTemplate
           currentTemplate={this.state.currentTemplate}
           setCurrentTemplate={(currentTemplate: PorterChart) => this.setState({ currentTemplate })}
+          setCurrentView={this.props.setCurrentView}
         />
       );
     }

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

@@ -8,7 +8,8 @@ import LaunchTemplate from './LaunchTemplate';
 
 type PropsType = {
   currentTemplate: PorterChart,
-  setCurrentTemplate: (x: PorterChart) => void
+  setCurrentTemplate: (x: PorterChart) => void,
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -26,6 +27,7 @@ export default class ExpandedTemplate extends Component<PropsType, StateType> {
         <LaunchTemplate
           currentTemplate={this.props.currentTemplate}
           hideLaunch={() => this.setState({ showLaunchTemplate: false })}
+          setCurrentView={this.props.setCurrentView}
         />
       );
     }

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

@@ -13,6 +13,7 @@ import ValuesForm from '../../../../components/values-form/ValuesForm';
 type PropsType = {
   currentTemplate: PorterChart,
   hideLaunch: () => void,
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -151,6 +152,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
           setSelectedImageUrl={(x: string) => this.setState({ selectedImageUrl: x })}
           setSelectedTag={(x: string) => this.setState({ selectedTag: x })}
           forceExpanded={true}
+          setCurrentView={this.props.setCurrentView}
         />
 
         <br />