redirect for github login + cluster-dashboard default

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

@@ -71,7 +71,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
     if (loading) {
       return <LoadingWrapper><Loading /></LoadingWrapper>
     } else if (error || !contents) {
-      return <LoadingWrapper>Error loading repo contents</LoadingWrapper>
+      return <LoadingWrapper>Error loading repo contents.</LoadingWrapper>
     }
 
     return contents.map((item: FileType, i: number) => {

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

@@ -45,6 +45,7 @@ export default class RepoSelector extends Component<PropsType, StateType> {
       if (err) {
         this.setState({ loading: false, error: true });
       } else {
+        console.log(res.data);
         this.setState({ repos: res.data, loading: false, error: false });
       }
     });
@@ -55,9 +56,9 @@ export default class RepoSelector extends Component<PropsType, StateType> {
     if (loading) {
       return <LoadingWrapper><Loading /></LoadingWrapper>
     } else if (error || !repos) {
-      return <LoadingWrapper>Error loading repos</LoadingWrapper>
+      return <LoadingWrapper>Error loading repos.</LoadingWrapper>
     } else if (repos.length == 0) {
-      return <LoadingWrapper>Hola Senorita</LoadingWrapper>
+      return <LoadingWrapper>No connected repos found.</LoadingWrapper>
     }
 
     return repos.map((repo: RepoType, i: number) => {

dashboard/src/main/home/Home.tsx

@@ -42,7 +42,7 @@ export default class Home extends Component<PropsType, StateType> {
     if (prevProps !== this.props && this.context.currentProject) {
 
       // Set view to dashboard on project change
-      if (this.state.prevProjectId !== this.context.currentProject.id) {
+      if (this.state.prevProjectId && this.state.prevProjectId !== this.context.currentProject.id) {
         this.setState({
           prevProjectId: this.context.currentProject.id,
           currentView: 'dashboard'

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -53,7 +53,6 @@ export default class ChartList extends Component<PropsType, StateType> {
         this.setState({ loading: false, error: true });
       } else {
         let charts = res.data || [];
-        console.log(charts)
         this.setState({ charts }, () => {
           this.setState({ loading: false, error: false });
         });

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

@@ -29,6 +29,7 @@ type StateType = {
   selectedBranch: string,
   subdirectory: string,
   webhookToken: string,
+  highlightCopyButton: boolean,
 };
 
 export default class SettingsSection extends Component<PropsType, StateType> {
@@ -42,6 +43,7 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     selectedBranch: '',
     subdirectory: '',
     webhookToken: '',
+    highlightCopyButton: false,
   }
 
   // TODO: read in set image from form context instead of config
@@ -129,10 +131,15 @@ export default class SettingsSection extends Component<PropsType, StateType> {
         </>
       );
     }
+
+    let { currentProject } = this.context;
     return (
       <>
         <Helper>
-          Select a repo to connect to. Log in with or
+          Select a repo to connect to. You can 
+          <A padRight={true} href={`/api/oauth/projects/${currentProject.id}/github?redirected=true`}>
+            log in with GitHub
+          </A> or
           <Highlight onClick={() => this.setState({ sourceType: 'registry' })}>
             link an image registry
           </Highlight>.
@@ -150,18 +157,38 @@ export default class SettingsSection extends Component<PropsType, StateType> {
     );
   }
 
+  renderWebhookSection = () => {
+    if (this.state.webhookToken) {
+      let webhookText = `curl -X POST 'https://dashboard.getporter.dev/api/webhooks/deploy/${this.state.webhookToken}?commit=???&repository=???'`;
+      return (
+        <>
+          <Heading>Redeploy Webhook</Heading>
+          <Helper>Programmatically deploy by calling this secret webhook.</Helper>
+          <Webhook copiedToClipboard={this.state.highlightCopyButton}>
+            <div>{webhookText}</div>
+            <i 
+              className="material-icons"
+              onClick={() => { 
+                navigator.clipboard.writeText(webhookText);
+                this.setState({ highlightCopyButton: true });
+              }}
+              onMouseLeave={() => this.setState({ highlightCopyButton: false })}
+            >
+              content_copy
+            </i>
+          </Webhook>
+        </>
+      );
+    }
+  }
+
   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>curl -X POST 'https://dashboard.getporter.dev/api/webhooks/deploy/{this.state.webhookToken}?commit=???&repository=???'</div>
-            <i className="material-icons">content_copy</i>
-          </Webhook>
+          {this.renderWebhookSection()}
         </StyledSettingsSection>
         <SaveButton
           text='Save Settings'
@@ -197,24 +224,34 @@ const Webhook = styled.div`
   
   > i {
     padding: 5px;
-    background: #ffffff22;
+    background: ${(props: { copiedToClipboard: boolean }) => props.copiedToClipboard ? '#616FEEcc' : '#ffffff22'};
     border-radius: 5px;
     position: absolute;
     right: 10px;
     font-size: 14px;
     cursor: pointer;
+    color: #ffffff;
 
     :hover {
-      background: #ffffff44;
+      background: ${(props: { copiedToClipboard: boolean }) => props.copiedToClipboard ? '' : '#ffffff44'};;
     }
   }
 `;
 
 const Highlight = styled.div`
-  color: #949effff;
+  color: #949eff;
+  text-decoration: underline;
+  margin-left: 5px;
+  cursor: pointer;
+  padding-right: ${(props: { padRight?: boolean }) => props.padRight ? '5px' : ''};
+`;
+
+const A = styled.a`
+  color: #949eff;
   text-decoration: underline;
   margin-left: 5px;
   cursor: pointer;
+  padding-right: ${(props: { padRight?: boolean }) => props.padRight ? '5px' : ''};
 `;
 
 const Wrapper = styled.div`