feature(code/frontend): implement new 404 page (#32859)

x-pack/plugins/code/public/components/main/content.tsx

@@ -31,12 +31,12 @@ import {
 } from '../../selectors';
 import { history } from '../../utils/url';
 import { Editor } from '../editor/editor';
-import { UnsupportedFileIcon } from '../shared/icons';
 import { CloneStatus } from './clone_status';
 import { CommitHistory, CommitHistoryLoading } from './commit_history';
 import { Directory } from './directory';
+import { ErrorPanel } from './error_panel';
+import { NotFound } from './not_found';
 import { TopBar } from './top_bar';
-import { UnsupportedFile } from './unsupported_file';
 
 const ButtonsContainer = styled.div`
   display: flex;
@@ -70,6 +70,7 @@ const Root = styled.div`
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {
+  isNotFound: boolean;
   repoStatus?: RepoStatus;
   tree: FileTree;
   file: FetchFileResponse | undefined;
@@ -267,6 +268,9 @@ class CodeContent extends React.PureComponent<Props> {
   }
 
   public renderContent() {
+    if (this.props.isNotFound) {
+      return <NotFound />;
+    }
     if (this.shouldRenderProgress()) {
       return this.renderProgress();
     }
@@ -306,17 +310,15 @@ class CodeContent extends React.PureComponent<Props> {
         const { lang: fileLanguage, content: fileContent, url, isUnsupported, isOversize } = file;
         if (isUnsupported) {
           return (
-            <UnsupportedFile
-              icon={<UnsupportedFileIcon />}
+            <ErrorPanel
               title={<h2>Unsupported File</h2>}
               content="Unfortunately that’s an unsupported file type and we’re unable to render it here."
             />
           );
         }
         if (isOversize) {
           return (
-            <UnsupportedFile
-              icon={<UnsupportedFileIcon />}
+            <ErrorPanel
               title={<h2>File is too big</h2>}
               content="Sorry about that, but we can’t show files that are this big right now."
             />
@@ -374,6 +376,7 @@ class CodeContent extends React.PureComponent<Props> {
 }
 
 const mapStateToProps = (state: RootState) => ({
+  isNotFound: state.file.isNotFound,
   file: state.file.file,
   tree: state.file.tree,
   currentTree: currentTreeSelector(state),

x-pack/plugins/code/public/components/main/unsupported_file.tsx → x-pack/plugins/code/public/components/main/error_panel.tsx

@@ -8,20 +8,23 @@ import { EuiButton, EuiPanel, EuiSpacer, EuiText, EuiTextColor } from '@elastic/
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { history } from '../../utils/url';
+import { ErrorIcon } from '../shared/icons';
 
 const Root = styled.div`
   width: 31rem;
   margin: auto;
 `;
 
-export const UnsupportedFile = (props: { icon: ReactNode; title: ReactNode; content: string }) => {
+export const ErrorPanel = (props: { title: ReactNode; content: string }) => {
   return (
     <Root>
       <EuiPanel>
         <EuiSpacer />
         {/*
               // @ts-ignore */}
-        <EuiText textAlign="center">{props.icon}</EuiText>
+        <EuiText textAlign="center">
+          <ErrorIcon />
+        </EuiText>
         {/*
               // @ts-ignore */}
         <EuiText textAlign="center">{props.title}</EuiText>

x-pack/plugins/code/public/components/main/main.tsx

@@ -14,7 +14,6 @@ import { MainRouteParams } from '../../common/types';
 import { RootState } from '../../reducers';
 import { ShortcutsProvider } from '../shortcuts';
 import { Content } from './content';
-import { NotFound } from './not_found';
 import { SideTabs } from './side_tabs';
 
 const Root = styled.div`
@@ -32,7 +31,6 @@ const Container = styled.div`
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {
-  isNotFound: boolean;
   loadingFileTree: boolean;
   loadingStructureTree: boolean;
 }
@@ -67,10 +65,7 @@ class CodeMain extends React.Component<Props> {
   }
 
   public render() {
-    const { loadingFileTree, loadingStructureTree, isNotFound } = this.props;
-    if (isNotFound) {
-      return <NotFound />;
-    }
+    const { loadingFileTree, loadingStructureTree } = this.props;
     return (
       <Root>
         <Container>
@@ -89,7 +84,6 @@ class CodeMain extends React.Component<Props> {
 }
 
 const mapStateToProps = (state: RootState) => ({
-  isNotFound: state.file.isNotFound,
   loadingFileTree: state.file.loading,
   loadingStructureTree: state.symbol.loading,
 });

x-pack/plugins/code/public/components/main/not_found.tsx

@@ -7,9 +7,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { fontSizes } from '../../style/variables';
+import { ErrorPanel } from './error_panel';
 
 const Container = styled.div`
   margin: auto;
   fontsize: ${fontSizes.xlarge};
 `;
-export const NotFound = () => <Container>404, Not Found</Container>;
+
+export const NotFound = () => (
+  <Container>
+    <ErrorPanel
+      title={<h2>404</h2>}
+      content="Unfortunately that page doesn’t exist. You can try searching to find what you’re looking for."
+    />
+  </Container>
+);

x-pack/plugins/code/public/components/shared/icons.tsx

@@ -171,7 +171,7 @@ export const BinaryFileIcon = () => (
   </svg>
 );
 
-export const UnsupportedFileIcon = () => (
+export const ErrorIcon = () => (
   <svg
     width="320"
     height="160"