taglist integrated

dashboard/src/components/ResourceTab.tsx

@@ -130,6 +130,7 @@ const Tooltip = styled.div`
   position: absolute;
   right: 0px;
   top: 25px;
+  white-space: nowrap;
   height: 18px;
   padding: 2px 5px;
   background: #383842dd;

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

@@ -23,6 +23,7 @@ type StateType = {
   error: boolean,
   images: ImageType[],
   clickedImage: ImageType | null,
+  registryId: number | null, // For passing registry ID to tag list
 };
 
 export default class ImageSelector extends Component<PropsType, StateType> {
@@ -32,10 +33,11 @@ export default class ImageSelector extends Component<PropsType, StateType> {
     error: false,
     images: [] as ImageType[],
     clickedImage: null as ImageType | null,
+    registryId: null as number | null,
   }
 
   componentDidMount() {
-    const { currentProject } = this.context;
+    const { currentProject, setCurrentError } = this.context;
     let images = [] as ImageType[]
     api.getProjectRegistries('<token>', {}, { id: currentProject.id }, async (err: any, res: any) => {
       if (err) {
@@ -43,13 +45,13 @@ export default class ImageSelector extends Component<PropsType, StateType> {
       } else {
         res.data.forEach(async (registry: any, i: number) => {
           await new Promise((nextController: (res?: any) => void) => {           
-            api.listRepositories('<token>', {}, 
+            api.getImageRepos('<token>', {}, 
               { 
                 project_id: currentProject.id,
                 registry_id: registry.id,
               }, (err: any, res: any) => {
-              if (err) {
-                this.setState({ loading: false, error: true });
+              if (err && this.state.loading) {
+                this.setState({ error: true });
               } else {
                 let newImg = res.data.map((img: any) => {
                   return {
@@ -59,6 +61,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
                 })
                 this.setState({
                   images: [...images, ...newImg],
+                  registryId: registry.id,
                   loading: false,
                   error: false,
                 }, () => {
@@ -137,6 +140,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
             <TagList
               selectedImageUrl={selectedImageUrl}
               setSelectedImageUrl={setSelectedImageUrl}
+              registryId={this.state.registryId}
             />
           </ExpandedWrapper>
           {this.renderBackButton()}

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

@@ -4,12 +4,14 @@ import tag_icon from '../../assets/tag.png';
 import info from '../../assets/info.svg';
 
 import api from '../../shared/api';
+import { Context } from '../../shared/Context';
 
 import Loading from '../Loading';
 
 type PropsType = {
   setSelectedImageUrl: (x: string) => void,
-  selectedImageUrl: string
+  selectedImageUrl: string,
+  registryId: number,
 };
 
 type StateType = {
@@ -28,19 +30,22 @@ export default class TagList extends Component<PropsType, StateType> {
   }
 
   componentDidMount() {
-    this.setState({ tags: ['123', '456', '889', '5521', '5212'], loading: false });
-
-    /* Get branches
-    api.getTags('<token>', {}, {
-
-    }, (err: any, res: any) => {
+    const { currentProject } = this.context;
+    api.getImageTags('<token>', {}, 
+      { 
+        project_id: currentProject.id,
+        registry_id: this.props.registryId,
+        repo_name: this.props.selectedImageUrl,
+      }, (err: any, res: any) => {
       if (err) {
         this.setState({ loading: false, error: true });
       } else {
-        this.setState({ tags: res.data, loading: false, error: false });
+        let tags = res.data.map((tag: any, i: number) => {
+          return tag.tag;
+        });
+        this.setState({ tags, loading: false });
       }
     });
-    */
   }
 
   setTag = (tag: string) => {
@@ -93,6 +98,8 @@ export default class TagList extends Component<PropsType, StateType> {
   }
 }
 
+TagList.contextType = Context;
+
 const TagName = styled.div`
   display: flex;
   width: 100%;

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -73,10 +73,17 @@ Dashboard.contextType = Context;
 
 const Placeholder = styled.div`
   width: 100%;
-  margin-top: 200px;
+  height: calc(100vh - 380px);
+  margin-top: 30px;
+  display: flex;
+  padding-bottom: 20px;
+  align-items: center;
+  justify-content: center;
   color: #aaaabb;
+  border-radius: 5px;
   text-align: center;
   font-size: 13px;
+  background: #ffffff08;
   font-family: 'Work Sans', sans-serif;
 `;
 

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

@@ -29,6 +29,14 @@ export default class ECRForm extends Component<PropsType, StateType> {
     awsSecretKey: '',
   }
 
+  isDisabled = (): boolean => {
+    let { awsRegion, awsAccessId, awsSecretKey, credentialsName } = this.state;
+    if (awsRegion === '' || awsAccessId === '' || awsSecretKey === '' || credentialsName === '') {
+      return true;
+    }
+    return false;
+  }
+
   handleSubmit = () => {
     let { awsRegion, awsAccessId, awsSecretKey, credentialsName } = this.state;
     let { currentProject } = this.context;
@@ -98,7 +106,8 @@ export default class ECRForm 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/shared/api.tsx

@@ -196,13 +196,22 @@ const createECR = baseApi<{
   return `/api/projects/${pathParams.id}/registries`;
 });
 
-const listRepositories = baseApi<{}, {   
+const getImageRepos = baseApi<{}, {   
   project_id: number,
   registry_id: number,
  }>('GET', pathParams => {
   return `/api/projects/${pathParams.project_id}/registries/${pathParams.registry_id}/repositories`;
 });
 
+const getImageTags = baseApi<{}, {   
+  project_id: number,
+  registry_id: number,
+  repo_name: string,
+ }>('GET', pathParams => {
+  return `/api/projects/${pathParams.project_id}/registries/${pathParams.registry_id}/repositories/${pathParams.repo_name}`;
+});
+
+
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,
@@ -237,5 +246,6 @@ export default {
   getProjectRepos,
   createAWSIntegration,
   createECR,
-  listRepositories,
+  getImageRepos,
+  getImageTags,
 }