support dockerhub as image destination for linked repo

dashboard/src/components/InfoTooltip.tsx

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+
+type PropsType = {
+  text: string;
+};
+
+type StateType = {
+  showTooltip: boolean;
+};
+
+export default class InfoTooltip extends Component<PropsType, StateType> {
+  state = {
+    showTooltip: false
+  };
+
+  render() {
+    return (
+      <StyledInfoTooltip>
+        <i className="material-icons">help_outline</i>
+      </StyledInfoTooltip>
+    );
+  }
+}
+
+const StyledInfoTooltip = styled.div`
+  display: inline-block;
+  position: relative;
+  width: 26px;
+  margin-right: 2px;
+
+  > i {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: -14px;
+    font-size: 18px;
+    right: -1px;
+    color: #858faaaa;
+    cursor: pointer;
+    :hover {
+      color: #aaaabb;
+    }
+  }
+`;

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

@@ -261,7 +261,9 @@ const BackButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 10px;
+  margin-top: 28px;
+  margin-bottom: -6px;
+  height: 35px;
   cursor: pointer;
   font-size: 13px;
   padding: 5px 13px;

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

@@ -72,6 +72,8 @@ export default class TagList extends Component<PropsType, StateType> {
       );
     } else if (error || !tags) {
       return <LoadingWrapper>Error loading tags</LoadingWrapper>;
+    } else if (tags.length === 0) {
+      return <LoadingWrapper>This image repository is empty.</LoadingWrapper>;
     }
 
     return tags.map((tag: string, i: number) => {

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

@@ -8,6 +8,7 @@ import api from "../../shared/api";
 import Loading from "components/Loading";
 import { ActionConfigType } from "../../shared/types";
 import InputRow from "../values-form/InputRow";
+import InfoTooltip from "components/InfoTooltip";
 
 type PropsType = {
   actionConfig: ActionConfigType | null;
@@ -43,6 +44,7 @@ export default class ActionDetails extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+    // TODO: Handle custom registry case (unroll repos?)
     api
       .getProjectRegistries(
         "<token>",
@@ -96,7 +98,11 @@ export default class ActionDetails extends Component<PropsType, StateType> {
     } else {
       return (
         <>
-          <Subtitle>Container Registry</Subtitle>
+          <Subtitle>
+            Select an Image Destination
+            <InfoTooltip text="hola" />
+            <Required>*</Required>
+          </Subtitle>
           <ExpandedWrapper>{this.renderIntegrationList()}</ExpandedWrapper>
         </>
       );
@@ -163,6 +169,12 @@ export default class ActionDetails extends Component<PropsType, StateType> {
 
 ActionDetails.contextType = Context;
 
+const Required = styled.div`
+  margin-left: 8px;
+  color: #fc4976;
+  display: inline-block;
+`;
+
 const Subtitle = styled.div`
   margin-top: 21px;
 `;

dashboard/src/main/home/launch/Launch.tsx

@@ -331,7 +331,6 @@ const TitleSection = styled.div`
       font-size: 18px;
       margin-left: 18px;
       color: #858faaaa;
-      cursor: pointer;
       :hover {
         color: #aaaabb;
       }

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

@@ -90,6 +90,15 @@ class LaunchTemplate extends Component<PropsType, StateType> {
   createGHAction = (chartName: string, chartNamespace: string) => {
     let { currentProject, currentCluster } = this.context;
     let { actionConfig } = this.state;
+    let imageRepoUri = `${this.state.selectedRegistry.url}/${chartName}-${chartNamespace}`;
+
+    // DockerHub registry integration is per repo
+    if (this.state.selectedRegistry.service === "dockerhub") {
+      imageRepoUri = this.state.selectedRegistry.url;
+    }
+    console.log(this.state.selectedRegistry)
+
+    return;
     api
       .createGHAction(
         "<token>",
@@ -98,7 +107,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
           registry_id: this.state.selectedRegistry.id,
           dockerfile_path: this.state.dockerfilePath,
           folder_path: this.state.folderPath,
-          image_repo_uri: `${this.state.selectedRegistry.url}/${chartName}-${chartNamespace}`,
+          image_repo_uri: imageRepoUri,
           git_repo_id: actionConfig.git_repo_id,
           env: this.state.env,
         },
@@ -853,7 +862,7 @@ const Warning = styled.span<{ highlight: boolean; makeFlush?: boolean }>`
 const Required = styled.div`
   margin-left: 8px;
   color: #fc4976;
-  dislay: inline-block;
+  display: inline-block;
 `;
 
 const Link = styled.a`