WIP branch for HMS-1623 detail page view

Signed-off-by: Alejandro Visiedo <[email protected]>

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  preset: 'ts-jest',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js', '!src/**/stories/*'],
   coverageDirectory: './coverage/',

src/Routes/DefaultPage/DefaultPage.tsx

@@ -47,11 +47,7 @@ const Header = () => {
   );
 };
 
-interface EmptyContentProps {
-  isLoading: boolean;
-}
-
-const EmptyContent = (props: EmptyContentProps) => {
+const EmptyContent = () => {
   // FIXME Update this link in the future
   const linkLearnMoreAbout = 'https://access.redhat.com/articles/1586893';
   const navigate = useNavigate();
@@ -277,7 +273,7 @@ const DefaultPage = () => {
   const emptyContent = (
     <>
       <Header />
-      <EmptyContent isLoading={itemCount < 0} />
+      <EmptyContent />
     </>
   );
 

src/Routes/DetailPage/Components/DetailGeneral/DetailGeneral.test.tsx

@@ -1 +1,15 @@
-@import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DetailGeneral } from './DetailGeneral';
+import { AppContextProvider } from '../../../../AppContext';
+
+test('expect sample-component to render children', () => {
+  render(
+    <AppContextProvider>
+      <DetailGeneral />
+    </AppContextProvider>
+  );
+//   expect(screen.getByRole('heading')).toHaveTextContent('Name');
+//   expect(screen.getByRole('heading')).toHaveTextContent('Location');
+});

src/Routes/DetailPage/Components/DetailServers/DetailServers.test.tsx

@@ -1 +1,10 @@
-@import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { DetailServers } from './DetailServers';
+
+test('expect sample-component to render children', () => {
+  render(<DetailServers />);
+//   expect(screen.getByRole('heading')).toHaveTextContent('Name');
+//   expect(screen.getByRole('heading')).toHaveTextContent('Location');
+});

src/Routes/DetailPage/Components/DetailServers/DetailServers.tsx

@@ -1,7 +1,8 @@
-import { Flex, FlexItem, Stack, StackItem, TextInputGroupUtilities } from '@patternfly/react-core';
+import { Flex, FlexItem, Stack, StackItem } from '@patternfly/react-core';
 import React from 'react';
 import { Domain } from '../../../../Api';
 import { TableComposable, Tbody, Th, Thead, Tr } from '@patternfly/react-table';
+import { InputFilterServer } from '../FilterField/filter-field';
 
 interface DetailServersProps {
   domain?: Domain;
@@ -21,12 +22,12 @@ export const DetailServers = (props: DetailServersProps) => {
         <StackItem>
           <Flex>
             <FlexItem>
-              <TextInputGroupUtilities></TextInputGroupUtilities>
+              <InputFilterServer />
             </FlexItem>
           </Flex>
         </StackItem>
         <StackItem>
-          <TableComposable aria-label="Simple table" variant="compact" borders={false} className="pt-u-width-100">
+          <TableComposable aria-label="Simple table" variant="compact" borders={true} className="pt-u-width-100">
             <Thead>
               <Tr>
                 <Th>Name</Th>