Merge pull request #528 from smiclea/more-instances

Add (+x more) to replicas title for more instances

src/components/molecules/MainListItem/MainListItem.jsx

@@ -204,6 +204,12 @@ class MainListItem extends React.Component<Props> {
       </EndpointsImages>
     )
     const status = this.getStatus()
+    let { instances } = this.props.item
+    let title = instances[0]
+    if (instances.length > 1) {
+      title += ` (+${instances.length - 1} more)`
+    }
+
     return (
       <Wrapper>
         <CheckboxStyled
@@ -214,7 +220,7 @@ class MainListItem extends React.Component<Props> {
         <Content onClick={this.props.onClick} data-test-id="mainListItem-content">
           <Image image={this.props.image} />
           <Title>
-            <TitleLabel>{this.props.item.instances[0]}</TitleLabel>
+            <TitleLabel>{title}</TitleLabel>
             <StatusWrapper>
               {status ? <StatusPill
                 status={status}

src/components/organisms/DetailsContentHeader/DetailsContentHeader.jsx

@@ -163,7 +163,18 @@ class DetailsContentHeader extends React.Component<Props> {
   }
 
   render() {
-    let title = this.props.item ? (this.props.item.instances && this.props.item.instances[0]) || this.props.item.name : ''
+    let title = null
+    if (this.props.item) {
+      let { instances } = this.props.item
+      if (instances) {
+        title = instances[0]
+        if (instances.length > 1) {
+          title += ` (+${instances.length - 1} more)`
+        }
+      } else {
+        title = this.props.item.name
+      }
+    }
 
     return (
       <Wrapper>
@@ -171,7 +182,7 @@ class DetailsContentHeader extends React.Component<Props> {
         <TypeImage image={this.props.typeImage} />
         <Title>
           <Status>
-            <Text data-test-id="dcHeader-title">{title}</Text>
+            <Text title={title} data-test-id="dcHeader-title">{title}</Text>
             {this.renderStatusPill()}
             {this.renderDescription()}
           </Status>