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/common/icons.ts

@@ -6,5 +6,6 @@ export enum Icons {
   Build = 'build',
   Domain = 'domain',
   Star = 'star',
-  Github = 'github'
+  Github = 'github',
+  WarningTriangle = 'Warningtriangle'
 }

ui/src/components/Icon/index.tsx

@@ -7,7 +7,8 @@ import {
   UserIcon,
   IconSize,
   StarIcon,
-  GithubIcon
+  GithubIcon,
+  WarningTriangleIcon
 } from '@patternfly/react-icons';
 import { Icons } from '../../common/icons';
 import './Icon.css';
@@ -37,6 +38,8 @@ const Icon: React.FC<Props> = (props: Props) => {
       return <StarIcon size={size} label={label} />;
     case Icons.Github:
       return <GithubIcon size={size} className="hub-icon" label={label} />;
+    case Icons.WarningTriangle:
+      return <WarningTriangleIcon size={size} className="hub-icon" label={label} />;
   }
 };
 

ui/src/components/PageNotFound/PageNotFound.css

@@ -0,0 +1,3 @@
+.hub-pagenotfound__title {
+  margin-top: 1.3em;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PageNotFound } from './index';
+
+jest.mock('react-router-dom', () => {
+  return {
+    useHistory: () => {
+      return {
+        history: ''
+      };
+    }
+  };
+});
+
+describe('PageNotFound Component', () => {
+  it('should render PageNotFound component', () => {
+    const component = shallow(<PageNotFound />);
+    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=\\"small\\">
+  <EmptyStateIcon icon={[Function: warningIcon]} />
+  <Title headingLevel=\\"h5\\" size=\\"lg\\" className=\\"hub-pagenotfound__title\\">
+    Page Not Found
+  </Title>
+  <Button variant=\\"primary\\" onClick={[Function: onClick]}>
+    Back Home
+  </Button>
+</EmptyState>"
+`;

ui/src/components/PageNotFound/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateVariant,
+  Title,
+  Button,
+  EmptyStateIcon
+} from '@patternfly/react-core';
+import { IconSize } from '@patternfly/react-icons';
+import { useHistory } from 'react-router-dom';
+import { Icons } from '../../common/icons';
+import Icon from '../Icon';
+import './PageNotFound.css';
+
+export const PageNotFound: React.FC = () => {
+  const history = useHistory();
+
+  const warningIcon = () => {
+    return <Icon id={Icons.WarningTriangle} size={IconSize.xl} label="Page Not Found" />;
+  };
+
+  return (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <EmptyStateIcon icon={warningIcon} />
+      <Title headingLevel="h5" size="lg" className="hub-pagenotfound__title">
+        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,29 @@ import { useMst } from '../../store/root';
 import BasicDetails from '../BasicDetails';
 import Description from '../../components/Description';
 import { assert } from '../../store/utils';
+import { PageNotFound } from '../../components/PageNotFound';
+import { titleCase } from '../../common/titlecase';
+import { ICatalog } from '../../store/catalog';
 
 const Details: React.FC = () => {
   const { resources, user } = useMst();
-  const { name } = useParams();
+  const { name, catalog, kind } = useParams();
+
+  const catalogs = resources.catalogs.values;
+  const validateUrl = () => {
+    let catalogUrl = false;
+    catalogs.forEach((item: ICatalog) => {
+      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 +43,8 @@ const Details: React.FC = () => {
   return useObserver(() =>
     resources.resources.size === 0 ? (
       <Spinner className="hub-spinner" />
+    ) : !validateUrl() ? (
+      <PageNotFound />
     ) : (
       <React.Fragment>
         {resourceDetails()}