added an external link component (#46)

src/clients/ClientList.tsx

@@ -9,6 +9,7 @@ import {
 } from '@patternfly/react-table';
 import { Badge } from '@patternfly/react-core';
 
+import { ExternalLink } from '../components/external-link/ExternalLink';
 import { ClientRepresentation } from '../model/client-model';
 
 type ClientListProps = {
@@ -27,7 +28,7 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
   const enabled = (): IFormatter => (data?: IFormatterValueType) => {
     const field = data!.toString();
     const value = field.substring(0, field.indexOf('#'));
-    return field.indexOf('true') != -1 ? (
+    return field.indexOf('true') !== -1 ? (
       <>{value}</>
     ) : (
       <>
@@ -40,6 +41,12 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
     return data ? data : '—';
   };
 
+  const externalLink = (): IFormatter => (data?: IFormatterValueType) => {
+    return (data ? (
+      <ExternalLink href={data.toString()} />
+    ) : undefined) as object;
+  };
+
   const replaceBaseUrl = (r: ClientRepresentation) =>
     r.rootUrl &&
     r.rootUrl
@@ -63,7 +70,10 @@ export const ClientList = ({ baseUrl, clients }: ClientListProps) => {
         { title: 'Client ID', cellFormatters: [enabled()] },
         'Type',
         { title: 'Description', cellFormatters: [emptyFormatter()] },
-        { title: 'Home URL', cellFormatters: [emptyFormatter()] },
+        {
+          title: 'Home URL',
+          cellFormatters: [externalLink(), emptyFormatter()],
+        },
       ]}
       rows={data}
       aria-label="Client list"

src/components/external-link/ExternalLink.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+export const ExternalLink = ({
+  title,
+  href,
+  ...rest
+}: React.HTMLProps<HTMLAnchorElement>) => {
+  return (
+    <a href={href} {...rest}>
+      {title ? title : href}{' '}
+      {href?.startsWith('http') && <ExternalLinkAltIcon />}
+    </a>
+  );
+};

stories/4-ClientList.stories.js

@@ -6,6 +6,6 @@ import clientMock from '../src/clients/mock-clients.json';
 
 storiesOf('Client list page', module)
   .add('view', () => {
-    return (<ClientList clients={clientMock} baseUrl="http://test.nl"/>
+    return (<ClientList clients={clientMock} baseUrl="http://test.nl/"/>
     );
   })

stories/8-ExternalLink.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ExternalLink } from '../src/components/external-link/ExternalLink';
+
+storiesOf('External Link', module).add('view', () => {
+  return (
+    <>
+      <p>
+        <ExternalLink href="http://test.nl/" />
+      </p>
+      <p>
+        <ExternalLink href="http://test.nl/" title="With title" />
+      </p>
+    </>
+  );
+});