Merge pull request #632 from smiclea/fix-endpoint-long-list

Fix transfer list too long in endpoint det. page

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -31,7 +31,9 @@ import DateUtils from '../../../utils/DateUtils'
 import LabelDictionary from '../../../utils/LabelDictionary'
 import configLoader from '../../../utils/Config'
 import { Region } from '../../../@types/Region'
-import { MigrationItem, ReplicaItem, TransferItem } from '../../../@types/MainItem'
+import {
+  getTransferItemTitle, MigrationItem, ReplicaItem, TransferItem,
+} from '../../../@types/MainItem'
 import { Field as FieldType } from '../../../@types/Field'
 import DomUtils from '../../../utils/DomUtils'
 
@@ -77,6 +79,13 @@ const LinkStyled = styled(Link)`
   text-decoration: none;
   cursor: pointer;
 `
+const TransferItems = styled.div`
+  max-height: 200px;
+  overflow: auto;
+`
+const TransferItemWrapper = styled.div`
+  margin-bottom: 4px;
+`
 
 const DownloadLink = styled.div`
   display: inline-block;
@@ -203,17 +212,20 @@ class EndpointDetailsContent extends React.Component<Props> {
   }
 
   renderUsage(items: TransferItem[]) {
-    return items.map(item => (
-      <span>
-        <LinkStyled
-          key={item.id}
-          to={`/${item.type}s/${item.id}`}
-        >
-          {item.instances[0]}
-        </LinkStyled>
-        <br />
-      </span>
-    ))
+    return (
+      <TransferItems>
+        {items.map(item => (
+          <TransferItemWrapper>
+            <LinkStyled
+              key={item.id}
+              to={`/${item.type}s/${item.id}`}
+            >
+              {getTransferItemTitle(item)}
+            </LinkStyled>
+          </TransferItemWrapper>
+        ))}
+      </TransferItems>
+    )
   }
 
   render() {