manifests update on preview

dashboard/src/components/ResourceTab.tsx

@@ -92,7 +92,16 @@ export default class ResourceTab extends Component<PropsType, StateType> {
   }
 
   render() {
-    let { label, name, children, isLast, handleClick, roundAllCorners } = this.props;
+    let { 
+      label,
+      name,
+      children,
+      isLast,
+      handleClick,
+      selected,
+      status,
+      roundAllCorners,
+    } = this.props;
     return (
       <StyledResourceTab 
         isLast={isLast}
@@ -100,8 +109,8 @@ export default class ResourceTab extends Component<PropsType, StateType> {
         roundAllCorners={roundAllCorners}
       >
         <ResourceHeader
-          hasChildren={this.props.children && true}
-          expanded={this.state.expanded || this.props.selected}
+          hasChildren={children && true}
+          expanded={this.state.expanded || selected}
           onClick={() => {
             if (children) {
               this.setState({ expanded: !this.state.expanded });
@@ -110,7 +119,7 @@ export default class ResourceTab extends Component<PropsType, StateType> {
         >
           <Info>
             {this.renderDropdownIcon()}
-            <Metadata>
+            <Metadata hasStatus={status && true}>
               {this.renderIcon(label)}
               {label}
               <ResourceName
@@ -180,13 +189,13 @@ const ResourceHeader = styled.div`
   user-select: none;
   padding: 8px 18px;
   padding-left: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '10px' : '22px'};
-  cursor: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? 'pointer' : ''};
+  cursor: pointer;
   background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.expanded ? '#ffffff11' : ''};
   :hover {
-    background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '#ffffff18' : ''};
+    background: #ffffff18;
 
     > i {
-      background: ${(props: { expanded: boolean, hasChildren: boolean }) => props.hasChildren ? '#ffffff22' : ''};
+      background: #ffffff22;
     }
   }
 `;
@@ -195,15 +204,15 @@ const Info = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: calc(100% - 50px);
+  width: 100%;
   height: 100%;
 `;
 
 const Metadata = styled.div`
   display: flex;
-  max-width: calc(100% - 50px);
   align-items: center;
   position: relative;
+  max-width: ${(props: { hasStatus: boolean }) => props.hasStatus ? 'calc(100% - 50px)' : '100%'};
 `;
 
 const Status = styled.div`

dashboard/src/components/TabSelector.tsx

@@ -23,7 +23,7 @@ export default class TabSelector extends Component<PropsType, StateType> {
   }
 
   renderTabList = () => {
-    let color = this.props.color || '#949effcc';
+    let color = this.props.color || '#949effff';
     return (
       this.props.options.map((option: selectOption, i: number) => {
         return (

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

@@ -351,6 +351,7 @@ const Label = styled.div`
 
 const StyledImageSelector = styled.div`
   width: 100%;
+  margin-top: 22px;
   border: 1px solid #ffffff55;
   background: ${(props: { isExpanded: boolean, forceExpanded: boolean }) => props.isExpanded ? '#ffffff11' : ''};
   border-radius: 3px;

dashboard/src/components/repo-selector/RepoSelector.tsx

@@ -159,7 +159,7 @@ export default class RepoSelector extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <div>
+      <>
         <StyledRepoSelector
           onClick={this.handleClick}
           isExpanded={this.state.isExpanded}
@@ -170,7 +170,7 @@ export default class RepoSelector extends Component<PropsType, StateType> {
         </StyledRepoSelector>
 
         {this.state.isExpanded ? this.renderExpanded() : null}
-      </div>
+      </>
     );
   }
 }
@@ -269,6 +269,7 @@ const RepoLabel = styled.div`
 
 const StyledRepoSelector = styled.div`
   width: 100%;
+  margin-top: 22px;
   border: 1px solid #ffffff55;
   background: ${(props: { isExpanded: boolean, forceExpanded: boolean }) => props.isExpanded ? '#ffffff11' : ''};
   border-radius: 3px;

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

@@ -1,7 +1,7 @@
 import React from 'react';  
 import styled from 'styled-components';
 
-export default function Helper(props: { children: string }) {
+export default function Helper(props: { children: any }) {
   return <StyledHelper>{props.children}</StyledHelper>;
 }
 
@@ -11,4 +11,6 @@ const StyledHelper = styled.div`
   font-size: 13px;
   margin-bottom: 15px;
   margin-top: 20px;
+  display: flex;
+  align-items: center;
 `;

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

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import yaml from 'js-yaml';
 import close from '../../../../assets/close.png';
-import loading from '../../../../assets/loading.gif';
 import _ from 'lodash';
 
 import { ResourceType, ChartType, StorageType, Cluster } from '../../../../shared/types';
@@ -82,10 +81,6 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
       } else {
         setCurrentChart(res.data);
         this.setState({ loading: false });
-
-        // After retrieving full chart data, update tabs and resources
-        this.updateTabs();
-        this.updateResources();
       }
     });
   }
@@ -335,7 +330,7 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
     // Append universal tabs
     tabOptions.push(
       { label: 'Status', value: 'status' },
-      { label: 'Settings', value: 'settings' },
+      { label: 'Deploy', value: 'settings' },
       { label: 'Chart Overview', value: 'graph' },
     );
 
@@ -428,11 +423,10 @@ export default class ExpandedChart extends Component<PropsType, StateType> {
   }
 
   componentDidUpdate(prevProps: PropsType) {
-    /*
     if (this.props.currentChart !== prevProps.currentChart) {
+      this.updateTabs();
       this.updateResources();
     }
-    */
   }
 
   componentWillUnmount() {

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

@@ -19,6 +19,7 @@ type StateType = {
   showKindLabels: boolean,
   yaml: string | null,
   wrapperHeight: number,
+  selectedResource: { kind: string, name: string } | null,
 };
 
 export default class ListSection extends Component<PropsType, StateType> {
@@ -26,6 +27,7 @@ export default class ListSection extends Component<PropsType, StateType> {
     showKindLabels: true,
     yaml: '# Select a resource to view its manifest' as string | null,
     wrapperHeight: 0,
+    selectedResource: null as { kind: string, name: string } | null,
   }
 
   wrapperRef: any = React.createRef();
@@ -35,9 +37,25 @@ export default class ListSection extends Component<PropsType, StateType> {
   }
 
   componentDidUpdate(prevProps: PropsType) {
+
+    // Adjust yaml wrapper height on revision toggle
     if ((prevProps.showRevisions !== this.props.showRevisions) && this.wrapperRef) {
       this.setState({ wrapperHeight: this.wrapperRef.offsetHeight });
     }
+
+    if (prevProps.components !== this.props.components && this.state.selectedResource) {
+      let matchingResourceFound = false;
+      this.props.components.forEach((resource: ResourceType) => {
+        if (resource.Kind === this.state.selectedResource.kind && resource.Name === this.state.selectedResource.name) {
+          let rawYaml = yaml.dump(resource.RawYAML);
+          this.setState({ yaml: rawYaml });
+          matchingResourceFound = true;
+        }
+      });
+      if (!matchingResourceFound) {
+        this.setState({ yaml: '# Select a resource to view its manifest' });
+      }
+    }
   }
 
   renderResourceList = () => {
@@ -46,7 +64,10 @@ export default class ListSection extends Component<PropsType, StateType> {
       return (
         <ResourceTab
           key={i}
-          handleClick={() => this.setState({ yaml: rawYaml })}
+          handleClick={() => this.setState({ 
+            yaml: rawYaml,
+            selectedResource: { kind: resource.Kind, name: resource.Name }
+          })}
           selected={this.state.yaml === rawYaml}
           label={resource.Kind}
           name={resource.Name}

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

@@ -7,7 +7,11 @@ import { ChartType, RepoType, StorageType } from '../../../../shared/types';
 import { Context } from '../../../../shared/Context';
 
 import ImageSelector from '../../../../components/image-selector/ImageSelector';
+import RepoSelector from '../../../../components/repo-selector/RepoSelector';
 import SaveButton from '../../../../components/SaveButton';
+import Heading from '../../../../components/values-form/Heading';
+import Helper from '../../../../components/values-form/Helper';
+import InputRow from '../../../../components/values-form/InputRow';
 
 type PropsType = {
   currentChart: ChartType,
@@ -16,18 +20,26 @@ type PropsType = {
 };
 
 type StateType = {
+  sourceType: string,
   selectedImageUrl: string | null,
   selectedTag: string | null,
   saveValuesStatus: string | null,
   values: string,
+  selectedRepo: RepoType | null,
+  selectedBranch: string,
+  subdirectory: string,
 };
 
 export default class SettingsSection extends Component<PropsType, StateType> {
   state = {
+    sourceType: 'registry',
     selectedImageUrl: '',
     selectedTag: '',
     values: '',
     saveValuesStatus: null as (string | null),
+    selectedRepo: null as RepoType | null,
+    selectedBranch: '',
+    subdirectory: '',
   }
 
   // TODO: read in set image from form context instead of config
@@ -80,11 +92,16 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     });
   }
 
-  render() {
-    return (
-      <Wrapper>
-        <StyledSettingsSection>
-          <Subtitle>Connected source</Subtitle>
+  renderSourceSection = () => {
+    if (this.state.sourceType === 'registry') {
+      return (
+        <>
+          <Helper>
+            Specify a container image and tag
+            <Highlight onClick={() => this.setState({ sourceType: 'repo' })}>
+              or link a repo
+            </Highlight>.
+          </Helper>
           <ImageSelector
             selectedImageUrl={this.state.selectedImageUrl}
             selectedTag={this.state.selectedTag}
@@ -93,6 +110,42 @@ export default class SettingsSection extends Component<PropsType, StateType> {
             forceExpanded={true}
             setCurrentView={this.props.setCurrentView}
           />
+        </>
+      );
+    }
+    return (
+      <>
+        <Helper>
+          Select a repo to conenct to
+          <Highlight onClick={() => this.setState({ sourceType: 'registry' })}>
+            or link a container registry
+          </Highlight>.
+        </Helper>
+        <RepoSelector
+          forceExpanded={true}
+          selectedRepo={this.state.selectedRepo}
+          selectedBranch={this.state.selectedBranch}
+          subdirectory={this.state.subdirectory}
+          setSelectedRepo={(x: RepoType) => this.setState({ selectedRepo: x })}
+          setSelectedBranch={(x: string) => this.setState({ selectedBranch: x })}
+          setSubdirectory={(x: string) => this.setState({ subdirectory: x })}
+        />
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <Wrapper>
+        <StyledSettingsSection>
+          <Heading>Connected source</Heading>
+          {this.renderSourceSection()}
+          <Heading>Redeploy Webhook</Heading>
+          <Helper>Programmatically deploy by calling this secret webhook.</Helper>
+          <Webhook>
+            <div>https://api.getporter.dev/deploy/sdkdkalasdkfjdslk?commit=???</div>
+            <i className="material-icons">content_copy</i>
+          </Webhook>
         </StyledSettingsSection>
         <SaveButton
           text='Save Settings'
@@ -108,19 +161,44 @@ export default class SettingsSection extends Component<PropsType, StateType> {
 
 SettingsSection.contextType = Context;
 
-const Subtitle = styled.div`
-  color: #aaaabb;
+const Webhook = styled.div`
+  width: 100%;
+  border: 1px solid #ffffff55;
+  background: #ffffff11;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
   font-size: 13px;
-  margin-bottom: 15px;
-  margin-top: 20px;
+  padding-left: 10px;
+  color: #aaaabb;
+  height: 40px;
+  position: relative;
+  margin-bottom: 40px;
+
+  > div {
+    user-select: all;
+  }
+  
+  > i {
+    padding: 5px;
+    background: #ffffff22;
+    border-radius: 5px;
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    cursor: pointer;
+
+    :hover {
+      background: #ffffff44;
+    }
+  }
 `;
 
-const Heading = styled.div`
-  color: white;
-  font-weight: 500;
-  font-size: 16px;
-  margin-top: 35px;
-  margin-bottom: 22px;
+const Highlight = styled.div`
+  color: #949effff;
+  text-decoration: underline;
+  margin-left: 5px;
+  cursor: pointer;
 `;
 
 const Wrapper = styled.div`
@@ -132,7 +210,7 @@ const StyledSettingsSection = styled.div`
   width: 100%;
   height: calc(100% - 60px);
   background: #ffffff11;
-  padding: 15px 35px 50px;
+  padding: 0 35px;
   position: relative;
   border-radius: 5px;
   overflow: auto;

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -136,7 +136,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
   // Live update on rollback/upgrade
   componentDidUpdate(prevProps: PropsType) {
     if (prevProps.components !== this.props.components) {
-      this.storeChartGraph();
+      console.log(this.props.components);
+      this.storeChartGraph(prevProps);
       this.getChartGraph();
     }
   }
@@ -186,8 +187,9 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     return edges;
   }
 
-  storeChartGraph = () => {
-    let { currentChart } = this.props;
+  storeChartGraph = (props?: PropsType) => {
+    let useProps = props || this.props;
+    let { currentChart } = useProps;
     let graph = JSON.parse(JSON.stringify(this.state));
 
     // Flush non-persistent data

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

@@ -217,7 +217,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
         </ClusterSection>
 
         <Subtitle>Select the container image you would like to connect to this template.</Subtitle>
-        <Br />
+        <DarkMatter />
         <ImageSelector
           selectedTag={this.state.selectedTag}
           selectedImageUrl={this.state.selectedImageUrl}
@@ -243,9 +243,9 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
 LaunchTemplate.contextType = Context;
 
-const Br = styled.div`
+const DarkMatter = styled.div`
   width: 100%;
-  height: 7px;
+  margin-top: -15px;
 `;
 
 const Subtitle = styled.div`