styled registry list + placeholder

dashboard/src/main/home/onboarding/components/RegistryImageList.tsx

@@ -1,14 +1,17 @@
 import React, { useEffect, useState } from "react";
+import Helper from "components/form-components/Helper";
 import api from "shared/api";
 import styled from "styled-components";
+import { integrationList } from "shared/common";
 
 const RegistryImageList: React.FC<{
   project: {
     id: number;
     name: string;
   };
+  registryType?: string;
   registry_id: number;
-}> = ({ project, registry_id }) => {
+}> = ({ project, registry_id, registryType }) => {
   const [imageList, setImageList] = useState([]);
 
   useEffect(() => {
@@ -25,34 +28,80 @@ const RegistryImageList: React.FC<{
         if (!res?.data) {
           throw new Error("No data found");
         }
-
+        console.log(res.data);
         setImageList(res.data);
       })
       .catch(console.error);
     return () => {};
   }, []);
+
+  const getIcon = () => {
+    if (registryType) {
+      return integrationList[registryType] && integrationList[registryType].icon;
+    } else {
+      return integrationList["docker"].icon;
+    }
+  }
+
   return (
-    <ImageList>
-      {imageList.map((data, i) => (
-        <ImageRow isLast={i === imageList.length - 1}>
-          Name{data.name}, timestamp: {data.created_at}, URI: {data.uri}
-        </ImageRow>
-      ))}
-    </ImageList>
+    <>
+      <ImageList>
+
+        {
+          imageList.length > 0 ? (
+            imageList.map((data, i) => (
+              <ImageRow isLast={i === imageList.length - 1}>
+                <img src={getIcon()} />
+                {data.uri}
+              </ImageRow>
+            ))
+          ) : (
+            <Placeholder>No container images found.</Placeholder>
+          )
+        }
+      </ImageList>
+      <Helper>Porter was able to successfully connect to your registry.</Helper>
+      <Br />
+    </>
   );
 };
 
 export default RegistryImageList;
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 80px;
+  color: #aaaabb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+`;
+
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
 const ImageRow = styled.div<{ isLast?: boolean }>`
   width: 100%;
-  height: 30px;
+  height: 40px;
   border-bottom: ${props => props.isLast ? "" : "1px solid #aaaabb"};
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  padding: 12px;
+
+  > img {
+    width: 20px;
+    filter: grayscale(100%);
+    margin-right: 9px;
+  }
 `;
 
 const ImageList = styled.div`
   border-radius: 5px;
   border: 1px solid #aaaabb;
   background: #ffffff11;
-  margin: 25px 0 30px;
+  margin: 25px 0 20px;
 `;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_AWSRegistryForm.tsx

@@ -227,6 +227,7 @@ export const TestRegistryConnection: React.FC<{ nextFormStep: () => void }> = ({
   return (
     <>
       <RegistryImageList
+        registryType="ecr"
         project={snap.project}
         registry_id={snap.connected_registry.settings.registry_connection_id}
       />