Add tabs to image details drawer

Author: F-X64

src/app/Pages/ImageDetails.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react'
 import {
-   PageSection, Bullseye, Text, TextContent, TextVariants,
+  PageSection, Bullseye, Text, TextContent, TextVariants,
   Card, CardTitle, CardBody, CardFooter
 } from '@patternfly/react-core'
 import { useDocumentTitle } from '@app/utils/useDocumentTitle'
 import Footer from '@app/components/Footer'
-import DetailsView from '@app/components/DetailsView'
+import { DetailsView } from '@app/components/DetailsView'
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import fetch from 'cross-fetch'
 
-const ImageDetails: React.FunctionComponent<{title: string}> = ({title}) => {
+const ImageDetails: React.FunctionComponent<{ title: string }> = ({ title }) => {
   const [details, setDetails] = useState({})
   const { provider, region, imageName } = useParams()
   useDocumentTitle(title)
@@ -19,24 +19,24 @@ const ImageDetails: React.FunctionComponent<{title: string}> = ({title}) => {
     fetch(`https://imagedirectory.cloud/images/v1/${provider}/${region}/${imageName}`, {
       method: 'get',
     })
-    .then(res => res.json())
-    .then(details => setDetails(details))
+      .then(res => res.json())
+      .then(details => setDetails(details))
   }, [provider, region, imageName])
 
   return (
     <div>
       <PageSection isFilled={true}>
-      <Bullseye>
-        <Card
-          style={{
-            width: 800,
-            display: 'flex',
-            justifyContent: 'center',
-          }}>
-          <CardBody isFilled={false}>
-            {details['imageId'] ? <DetailsView details={{...details, provider: provider}} /> : <div>Loading....</div>}
-          </CardBody>
-        </Card>
+        <Bullseye>
+          <Card
+            style={{
+              width: 800,
+              display: 'flex',
+              justifyContent: 'center',
+            }}>
+            <CardBody isFilled={false}>
+              {details['imageId'] ? <DetailsView details={{ ...details, provider: provider }} /> : <div>Loading....</div>}
+            </CardBody>
+          </Card>
         </Bullseye>
       </PageSection>
       <Footer />

src/app/components/DetailsDrawer.tsx

@@ -6,7 +6,7 @@ import {
   DrawerCloseButton,
 } from '@patternfly/react-core';
 import { MouseEventHandler } from 'react';
-import DetailsView from './DetailsView';
+import { DetailsView } from './DetailsView';
 
 export const DetailsDrawer: React.FunctionComponent<{
   onCloseClick: MouseEventHandler,