Skip to content

Commit

Permalink
Fixes warning in Hub UI tests by removing deprecated useobserver
Browse files Browse the repository at this point in the history 
This patch also refactors the App component by creatintg HomePage
and ResourceDetailsPage component to fix the react router dom path
warnings

Signed-off-by: Puneet Punamiya ppunamiy@redhat.com
  • Loading branch information
@PuneetPunamiya @tekton-robot
PuneetPunamiya authored and tekton-robot committed Mar 6, 2023
1 parent 6b6e60a commit 346046a
Show file tree
Hide file tree
Showing 24 changed files with 621 additions and 578 deletions.
116 changes: 57 additions & 59 deletions ui/src/components/Description/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { ReactText } from 'react';
import { useObserver } from 'mobx-react';
import { observer } from 'mobx-react';
import ReactMarkDown from 'react-markdown';
import { Grid, Card, Tabs, Tab, GridItem, CardHeader, Spinner } from '@patternfly/react-core';
import { dark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
Expand All @@ -16,7 +16,7 @@ interface Props {
kind: string;
}

const Description: React.FC<Props> = (props) => {
const Description: React.FC<Props> = observer((props) => {
const { resources } = useMst();

const [activeTabKey, setActiveTabKey] = React.useState(0);
Expand Down Expand Up @@ -56,63 +56,61 @@ const Description: React.FC<Props> = (props) => {
return uri;
};

return useObserver(() =>
resource.readme === '' || resource.yaml === '' ? (
<Spinner className="hub-details-spinner" />
) : (
<React.Fragment>
<Grid className="hub-description">
<GridItem offset={1} span={10}>
<Card>
<CardHeader className="hub-description-header">
<Grid className="hub-tabs">
<GridItem span={12}>
<Tabs activeKey={activeTabKey} isSecondary onSelect={handleTabClick}>
<Tab eventKey={0} title="Description" id={props.name}>
<hr className="hub-horizontal-line"></hr>
<ReactMarkDown
className="hub-readme"
transformLinkUri={(uri: string) => transformUri(uri)}
linkTarget={' '}
components={{
code({ inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter style={dark} language={match[1]} PreTag="div">
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
}
}}
>
{resource.readme}
</ReactMarkDown>
</Tab>
<Tab eventKey={1} title="YAML" id={props.name}>
<hr className="hub-horizontal-line"></hr>
<ReactMarkDown
skipHtml
components={{
code: ({ ...props }) => <Yaml value={props.children as string} />
}}
>
{resource.yaml}
</ReactMarkDown>
</Tab>
</Tabs>
</GridItem>
</Grid>
</CardHeader>
</Card>
</GridItem>
</Grid>
</React.Fragment>
)
return resource.readme === '' || resource.yaml === '' ? (
<Spinner className="hub-details-spinner" />
) : (
<React.Fragment>
<Grid className="hub-description">
<GridItem offset={1} span={10}>
<Card>
<CardHeader className="hub-description-header">
<Grid className="hub-tabs">
<GridItem span={12}>
<Tabs activeKey={activeTabKey} isSecondary onSelect={handleTabClick}>
<Tab eventKey={0} title="Description" id={props.name}>
<hr className="hub-horizontal-line"></hr>
<ReactMarkDown
className="hub-readme"
transformLinkUri={(uri: string) => transformUri(uri)}
linkTarget={' '}
components={{
code({ inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter style={dark} language={match[1]} PreTag="div">
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
}
}}
>
{resource.readme}
</ReactMarkDown>
</Tab>
<Tab eventKey={1} title="YAML" id={props.name}>
<hr className="hub-horizontal-line"></hr>
<ReactMarkDown
skipHtml
components={{
code: ({ ...props }) => <Yaml value={props.children as string} />
}}
>
{resource.yaml}
</ReactMarkDown>
</Tab>
</Tabs>
</GridItem>
</Grid>
</CardHeader>
</Card>
</GridItem>
</Grid>
</React.Fragment>
);
};
});

export default Description;
10 changes: 5 additions & 5 deletions ui/src/components/Filter/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { useObserver } from 'mobx-react';
import { observer } from 'mobx-react';

import { Button, Checkbox, Text, TextVariants, Grid, GridItem } from '@patternfly/react-core';
import { IconSize, TimesIcon } from '@patternfly/react-icons';
Expand Down Expand Up @@ -50,8 +50,8 @@ const checkboxes = (values: Filterable[]) => {
));
};

const Filter: React.FC<Props> = ({ store, header }) => {
return useObserver(() => (
const Filter: React.FC<Props> = observer(({ store, header }) => {
return (
<div>
<Grid>
<GridItem span={6}>
Expand All @@ -68,7 +68,7 @@ const Filter: React.FC<Props> = ({ store, header }) => {
<GridItem span={12}>{checkboxes(store.values)}</GridItem>
</Grid>
</div>
));
};
);
});

export default Filter;
8 changes: 8 additions & 0 deletions ui/src/components/HomePage/HomePage.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import HomePage from '.';

it('should render the home page component', () => {
const component = shallow(<HomePage />);
expect(component.debug()).toMatchSnapshot();
});
17 changes: 17 additions & 0 deletions ui/src/components/HomePage/__snapshots__/HomePage.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should render the home page component 1`] = `
"<Fragment>
<Background />
<PageSection>
<Grid hasGutter={true}>
<GridItem span={2}>
<Memo(observerComponent) />
</GridItem>
<GridItem span={10} rowSpan={1}>
<Memo(observerComponent) />
</GridItem>
</Grid>
</PageSection>
</Fragment>"
`;
25 changes: 25 additions & 0 deletions ui/src/components/HomePage/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { Grid, GridItem, PageSection } from '@patternfly/react-core';
import LeftPane from '../LeftPane';
import Background from '../Background';
import Resources from '../../containers/Resources';

const HomePage = () => {
return (
<>
<Background />
<PageSection>
<Grid hasGutter>
<GridItem span={2}>
<LeftPane />
</GridItem>
<GridItem span={10} rowSpan={1}>
<Resources />
</GridItem>
</Grid>
</PageSection>
</>
);
};

export default HomePage;
40 changes: 20 additions & 20 deletions ui/src/components/LeftPane/__snapshots__/LeftPane.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`LeftPane should find the components and match the count 1`] = `
"<Provider>
<LeftPane>
<Memo(observerComponent)>
<Grid hasGutter={true} className=\\"hub-leftpane\\">
<div className=\\"pf-l-grid pf-m-gutter hub-leftpane\\" style={[undefined]}>
<GridItem span={8}>
<div className=\\"pf-l-grid__item pf-m-8-col\\" style={[undefined]}>
<Sort>
<Memo(observerComponent)>
<div className=\\"hub-sort\\">
<Select variant=\\"single\\" isPlain={true} typeAheadAriaLabel=\\"Sort By\\" onToggle={[Function: onToggle]} onSelect={[Function: onSelect]} onClear={[Function: clearSelection]} isOpen={false} selections=\\"\\" placeholderText=\\"Sort By\\" className=\\"\\" position=\\"left\\" direction=\\"down\\" toggleId={{...}} isGrouped={false} isDisabled={false} hasPlaceholderStyle={false} isCreatable={false} isCreateOptionOnTop={false} validated=\\"default\\" aria-label=\\"\\" aria-labelledby=\\"\\" aria-describedby=\\"\\" aria-invalid={false} typeAheadAriaDescribedby=\\"\\" clearSelectionsAriaLabel=\\"Clear all\\" toggleAriaLabel=\\"Options menu\\" removeSelectionAriaLabel=\\"Remove\\" createText=\\"Create\\" noResultsFoundText=\\"No results found\\" width=\\"\\" onCreateOption={[Function: onCreateOption]} toggleIcon={{...}} toggleIndicator={{...}} onFilter={{...}} onTypeaheadInputChanged={{...}} customContent={{...}} hasInlineFilter={false} inlineFilterPlaceholderText={{...}} customBadgeText={{...}} inputIdPrefix=\\"\\" inputAutoComplete=\\"off\\" menuAppendTo=\\"inline\\" favorites={{...}} favoritesLabel=\\"Favorites\\" ouiaSafe={true} chipGroupComponent={{...}} isInputValuePersisted={false} isInputFilterPersisted={false} isCreateSelectOptionObject={false} shouldResetOnSelect={true} isFlipEnabled={true} removeFindDomNode={false} zIndex={9999}>
<GenerateId prefix=\\"pf-random-id-\\">
Expand All @@ -35,13 +35,13 @@ exports[`LeftPane should find the components and match the count 1`] = `
</GenerateId>
</Select>
</div>
</Sort>
</Memo(observerComponent)>
</div>
</GridItem>
<GridItem>
<div className=\\"pf-l-grid__item\\" style={[undefined]}>
<KindFilter>
<Filter store={{...}} header=\\"Kind\\">
<Memo(observerComponent)>
<Memo(observerComponent) store={{...}} header=\\"Kind\\">
<div>
<Grid>
<div className=\\"pf-l-grid\\" style={[undefined]}>
Expand Down Expand Up @@ -75,14 +75,14 @@ exports[`LeftPane should find the components and match the count 1`] = `
</div>
</Grid>
</div>
</Filter>
</KindFilter>
</Memo(observerComponent)>
</Memo(observerComponent)>
</div>
</GridItem>
<GridItem>
<div className=\\"pf-l-grid__item\\" style={[undefined]}>
<PlatformFilter>
<Filter store={{...}} header=\\"Platform\\">
<Memo(observerComponent)>
<Memo(observerComponent) store={{...}} header=\\"Platform\\">
<div>
<Grid>
<div className=\\"pf-l-grid\\" style={[undefined]}>
Expand Down Expand Up @@ -116,14 +116,14 @@ exports[`LeftPane should find the components and match the count 1`] = `
</div>
</Grid>
</div>
</Filter>
</PlatformFilter>
</Memo(observerComponent)>
</Memo(observerComponent)>
</div>
</GridItem>
<GridItem>
<div className=\\"pf-l-grid__item\\" style={[undefined]}>
<CatalogFilter>
<Filter store={{...}} header=\\"Catalog\\">
<Memo(observerComponent)>
<Memo(observerComponent) store={{...}} header=\\"Catalog\\">
<div>
<Grid>
<div className=\\"pf-l-grid\\" style={[undefined]}>
Expand Down Expand Up @@ -157,14 +157,14 @@ exports[`LeftPane should find the components and match the count 1`] = `
</div>
</Grid>
</div>
</Filter>
</CatalogFilter>
</Memo(observerComponent)>
</Memo(observerComponent)>
</div>
</GridItem>
<GridItem>
<div className=\\"pf-l-grid__item\\" style={[undefined]}>
<CategoryFilter>
<Filter store={{...}} header=\\"Category\\">
<Memo(observerComponent)>
<Memo(observerComponent) store={{...}} header=\\"Category\\">
<div>
<Grid>
<div className=\\"pf-l-grid\\" style={[undefined]}>
Expand Down Expand Up @@ -198,13 +198,13 @@ exports[`LeftPane should find the components and match the count 1`] = `
</div>
</Grid>
</div>
</Filter>
</CategoryFilter>
</Memo(observerComponent)>
</Memo(observerComponent)>
</div>
</GridItem>
</div>
</Grid>
</LeftPane>
</Memo(observerComponent)>
</Provider>"
`;
46 changes: 22 additions & 24 deletions ui/src/components/LeftPane/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { useObserver } from 'mobx-react';
import { observer } from 'mobx-react';
import { GridItem, Grid } from '@patternfly/react-core';
import CatalogFilter from '../../containers/CatalogFilter';
import KindFilter from '../../containers/KindFilter';
Expand All @@ -11,29 +11,27 @@ import { useMst } from '../../store/root';
import { apiDownError } from '../../common/errors';
import './LeftPane.css';

const LeftPane: React.FC = () => {
const LeftPane: React.FC = observer(() => {
const { resources } = useMst();

return useObserver(() =>
resources.err !== apiDownError ? (
<Grid hasGutter className="hub-leftpane">
<GridItem span={resources.sortBy == SortByFields.RecentlyUpdated ? 10 : 8}>
<Sort />
</GridItem>
<GridItem>
<KindFilter />
</GridItem>
<GridItem>
<PlatformFilter />
</GridItem>
<GridItem>
<CatalogFilter />
</GridItem>
<GridItem>
<CategoryFilter />
</GridItem>
</Grid>
) : null
);
};
return resources.err !== apiDownError ? (
<Grid hasGutter className="hub-leftpane">
<GridItem span={resources.sortBy == SortByFields.RecentlyUpdated ? 10 : 8}>
<Sort />
</GridItem>
<GridItem>
<KindFilter />
</GridItem>
<GridItem>
<PlatformFilter />
</GridItem>
<GridItem>
<CatalogFilter />
</GridItem>
<GridItem>
<CategoryFilter />
</GridItem>
</Grid>
) : null;
});
export default LeftPane;
8 changes: 8 additions & 0 deletions ui/src/components/ResourceDetailsPage/ResourceDetailsPage.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import { shallow } from 'enzyme';
import ResourceDetailsPage from '.';

it('should render the resource details page component', () => {
const component = shallow(<ResourceDetailsPage />);
expect(component.debug()).toMatchSnapshot();
});
Loading

0 comments on commit 346046a

Please sign in to comment.