Merge pull request #656 from smiclea/trim-id-label

Trim the licence appliance id shown in Dashboard

src/components/atoms/CopyValue/CopyValue.tsx

@@ -42,6 +42,7 @@ const Value = styled.span<any>`
 
 type Props = {
   value: string,
+  label?: string
   width?: string,
   maxWidth?: string,
   capitalize?: boolean,
@@ -78,7 +79,7 @@ class CopyValue extends React.Component<Props> {
           data-test-id="copyValue-value"
           width={this.props.width}
           maxWidth={this.props.maxWidth}
-        >{this.props.value}
+        >{this.props.label || this.props.value}
         </Value>
         <CopyButton />
       </Wrapper>

src/components/organisms/DashboardContent/modules/LicenceModule/LicenceModule.tsx

@@ -250,6 +250,8 @@ class LicenceModule extends React.Component<Props> {
   }
 
   renderLicenceExpired(licence: Licence, serverStatus: LicenceServerStatus) {
+    const applianceId = `${licence.applianceId}-licence${serverStatus.supported_licence_versions[0]}`
+    const applianceLabel = applianceId.replace(/(.*-.*-)(.*-.*)(-.*-.*)/, '$1...$3')
     return (
       <LicenceError>
         <p>
@@ -259,7 +261,8 @@ class LicenceModule extends React.Component<Props> {
         <ApplianceId>
           Appliance ID: <CopyValue
             style={{ marginLeft: '8px' }}
-            value={`${licence.applianceId}-licence${serverStatus.supported_licence_versions[0]}`}
+            value={applianceId}
+            label={applianceLabel}
           />
         </ApplianceId>
         <AddLicenceButtonWrapper>