Validates resource details page url's params

If url's params(resource name,resource kind name, resource catalog name)
of details page is valid then it redirects to details page otherwise
to the PageNotFound

Signed-off-by: Shiv Verma <shverma@redhat.com>

ui/src/components/PageNotFound/PageNotFound.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { NotFound } from './index';
+
+jest.mock('react-router-dom', () => {
+  return {
+    useHistory: () => {
+      return {
+        history: ''
+      };
+    }
+  };
+});
+
+describe('PageNotFound Component', () => {
+  it('should render PageNotFound component', () => {
+    const component = shallow(<NotFound />);
+    expect(component.debug()).toMatchSnapshot();
+  });
+});

ui/src/components/PageNotFound/__snapshots__/PageNotFound.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageNotFound Component should render PageNotFound component 1`] = `
+"<EmptyState variant=\\"large\\">
+  <EmptyStateIcon icon={[function]} />
+  <Title headingLevel=\\"h3\\" size=\\"3xl\\">
+    Page Not Found
+  </Title>
+  <Button variant=\\"primary\\" onClick={[Function: onClick]}>
+    Back Home
+  </Button>
+</EmptyState>"
+`;

ui/src/components/PageNotFound/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateVariant,
+  Title,
+  Button,
+  EmptyStateIcon
+} from '@patternfly/react-core';
+import { WarningTriangleIcon } from '@patternfly/react-icons';
+import { useHistory } from 'react-router-dom';
+
+export const NotFound: React.FC = () => {
+  const history = useHistory();
+  return (
+    <EmptyState variant={EmptyStateVariant.large}>
+      <EmptyStateIcon icon={WarningTriangleIcon} />
+      <Title headingLevel="h3" size="3xl">
+        Page Not Found
+      </Title>
+      <Button variant="primary" onClick={() => history.push('/')}>
+        Back Home
+      </Button>
+    </EmptyState>
+  );
+};

ui/src/containers/Details/Details.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { when } from 'mobx';
-import { Card } from '@patternfly/react-core';
 import ReactMarkdown from 'react-markdown';
+import { Card } from '@patternfly/react-core';
 import { FakeHub } from '../../api/testutil';
 import { createProviderAndStore } from '../../store/root';
 import Details from '.';
@@ -22,7 +22,9 @@ jest.mock('react-router-dom', () => {
     },
     useParams: () => {
       return {
-        name: 'buildah'
+        name: 'buildah',
+        kind: 'task',
+        catalog: 'tekton'
       };
     }
   };
@@ -82,8 +84,8 @@ describe('Details component', () => {
           expect(r.length).toEqual(1);
 
           const c = component.find(BasicDetails);
+          expect(c.length).toBe(1);
           expect(c.find(Card).length).toBe(1);
-
           done();
         }, 1000);
       }
@@ -112,6 +114,8 @@ describe('Details component', () => {
           const r = component.find(Details);
           expect(r.length).toEqual(1);
 
+          expect(resources.filteredResources[0].name).toBe('buildah');
+
           const c = component.find(Description);
           expect(c.find(ReactMarkdown).length).toBe(2);
 

ui/src/containers/Details/index.tsx

@@ -6,16 +6,27 @@ import { useMst } from '../../store/root';
 import BasicDetails from '../BasicDetails';
 import Description from '../../components/Description';
 import { assert } from '../../store/utils';
+import { NotFound } from '../../components/PageNotFound';
+import { titleCase } from '../../common/titlecase';
 
 const Details: React.FC = () => {
   const { resources, user } = useMst();
-  const { name } = useParams();
+  const { name, catalog, kind } = useParams();
+
+  const validateUrl = () => {
+    let catalogUrl: boolean | undefined;
+    resources.catalogs.values.forEach((item: any) => {
+      if (item.name === catalog) catalogUrl = true;
+    });
+    return (
+      catalogUrl && resources.kinds.items.has(titleCase(kind)) && resources.resources.has(name)
+    );
+  };
 
   const resourceDetails = () => {
     resources.versionInfo(name);
     resources.loadReadme(name);
     resources.loadYaml(name);
-
     const resource = resources.resources.get(name);
     assert(resource);
     user.getRating(resource.id);
@@ -30,6 +41,8 @@ const Details: React.FC = () => {
   return useObserver(() =>
     resources.resources.size === 0 ? (
       <Spinner className="hub-spinner" />
+    ) : !validateUrl() ? (
+      <NotFound />
     ) : (
       <React.Fragment>
         {resourceDetails()}