PageNotFound: G10 Redesign (#66909)

* PageNotFound: G10 Redesign

* Make into a reusable component so we can have a more specific version for dashboards

* Make graphic abit smaller

public/app/core/components/ErrorPage/ErrorPage.tsx

@@ -1,78 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
-import { VizLegendSeriesIcon } from '@grafana/ui/src/components/VizLegend/VizLegendSeriesIcon';
-
-import { Page } from '../Page/Page';
-
-export function ErrorPage() {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <Page navId="home" layout={PageLayoutType.Canvas} pageNav={{ text: 'Page not found' }}>
-      <div className={styles.container}>
-        <h1>Page not found</h1>
-        <div className={styles.subtitle}>
-          We could not find the page you are looking for. If the issue persists seek help on the{' '}
-          <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
-            community site.
-          </a>
-        </div>
-
-        <div className={styles.panel}>
-          <div className="error-row">
-            <div className="error-column error-space-between graph-percentage">
-              <p>100%</p>
-              <p>80%</p>
-              <p>60%</p>
-              <p>40%</p>
-              <p>20%</p>
-              <p>0%</p>
-            </div>
-            <div className="error-column image-box">
-              <img src="public/img/graph404.svg" width="100%" alt="graph" />
-              <div className="error-row error-space-between">
-                <p className="graph-text">Then</p>
-                <p className="graph-text">Now</p>
-              </div>
-            </div>
-          </div>
-          <div className={styles.legend}>
-            <VizLegendSeriesIcon seriesName="asd" color="green" />
-            <div>Chances you are on the page you are looking for (Last: 0%)</div>
-          </div>
-        </div>
-      </div>
-    </Page>
-  );
-}
-
-export function getStyles(theme: GrafanaTheme2) {
-  return {
-    container: css({
-      display: 'flex',
-      flexDirection: 'column',
-      padding: theme.spacing(4),
-    }),
-    subtitle: css({
-      color: theme.colors.text.secondary,
-      marginBottom: theme.spacing(2),
-    }),
-    panel: css({
-      display: 'flex',
-      flexDirection: 'column',
-      maxWidth: '874px',
-      border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: theme.shape.borderRadius(),
-      padding: theme.spacing(2),
-      background: theme.colors.background.primary,
-    }),
-    legend: css({
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'center',
-    }),
-  };
-}

public/app/core/components/PageNotFound/EntityNotFound.tsx

@@ -0,0 +1,60 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, useTheme2 } from '@grafana/ui';
+
+export interface Props {
+  /**
+   * Defaults to Page
+   */
+  entity?: string;
+}
+
+export function EntityNotFound({ entity = 'Page' }: Props) {
+  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+
+  return (
+    <div className={styles.container}>
+      <h1>{entity} not found</h1>
+      <div className={styles.subtitle}>
+        We&apos;re looking but can&apos;t seem to find this {entity.toLowerCase()}. Try returning{' '}
+        <a href="/" className="external-link">
+          home
+        </a>{' '}
+        or seeking help on the{' '}
+        <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="external-link">
+          community site.
+        </a>
+      </div>
+      <div className={styles.grot}>
+        <img src={`public/img/grot-404-${theme.isDark ? 'dark' : 'light'}.svg`} width="100%" alt="grot" />
+      </div>
+    </div>
+  );
+}
+
+export function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      padding: theme.spacing(8, 2, 2, 2),
+      h1: {
+        textAlign: 'center',
+      },
+    }),
+    subtitle: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.h5.fontSize,
+      padding: theme.spacing(2, 0),
+      textAlign: 'center',
+    }),
+    grot: css({
+      maxWidth: '450px',
+      paddingTop: theme.spacing(8),
+      margin: '0 auto',
+    }),
+  };
+}

public/app/core/components/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PageLayoutType } from '@grafana/data';
+
+import { Page } from '../Page/Page';
+
+import { EntityNotFound } from './EntityNotFound';
+
+export function PageNotFound() {
+  return (
+    <Page navId="home" layout={PageLayoutType.Canvas} pageNav={{ text: 'Page not found' }}>
+      <EntityNotFound entity="Page" />
+    </Page>
+  );
+}

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -19,8 +19,8 @@ import { selectors } from '@grafana/e2e-selectors';
 import { config, locationService } from '@grafana/runtime';
 import { Icon, Themeable2, withTheme2 } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
-import { ErrorPage } from 'app/core/components/ErrorPage/ErrorPage';
 import { Page } from 'app/core/components/Page/Page';
+import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext';
 import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getKioskMode } from 'app/core/navigation/kiosk';
@@ -429,6 +429,14 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       'page-hidden': Boolean(queryParams.editview || editPanel),
     });
 
+    if (dashboard.meta.dashboardNotFound) {
+      return (
+        <Page navId="dashboards/browse" layout={PageLayoutType.Canvas} pageNav={{ text: 'Not found' }}>
+          <EntityNotFound entity="Dashboard" />
+        </Page>
+      );
+    }
+
     return (
       <>
         <Page
@@ -442,53 +450,47 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
         >
           <DashboardPrompt dashboard={dashboard} />
           {initError && <DashboardFailed />}
-          {dashboard.meta.dashboardNotFound ? (
-            <ErrorPage />
-          ) : (
-            <>
-              {showSubMenu && (
-                <section aria-label={selectors.pages.Dashboard.SubMenu.submenu}>
-                  <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
-                </section>
-              )}
-              {config.featureToggles.editPanelCSVDragAndDrop ? (
-                <DropZone
-                  onDrop={this.onFileDrop}
-                  accept={DFImport.acceptedFiles}
-                  maxSize={DFImport.maxFileSize}
-                  noClick={true}
-                >
-                  {({ getRootProps, isDragActive }) => {
-                    const styles = getStyles(this.props.theme, isDragActive);
-                    return (
-                      <div {...getRootProps({ className: styles.dropZone })}>
-                        <div className={styles.dropOverlay}>
-                          <div className={styles.dropHint}>
-                            <Icon name="upload" size="xxxl"></Icon>
-                            <h3>Create tables from spreadsheets</h3>
-                          </div>
-                        </div>
-                        <DashboardGrid
-                          dashboard={dashboard}
-                          isEditable={!!dashboard.meta.canEdit}
-                          viewPanel={viewPanel}
-                          editPanel={editPanel}
-                        />
-                      </div>
-                    );
-                  }}
-                </DropZone>
-              ) : (
-                <DashboardGrid
-                  dashboard={dashboard}
-                  isEditable={!!dashboard.meta.canEdit}
-                  viewPanel={viewPanel}
-                  editPanel={editPanel}
-                />
-              )}
-              {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
-            </>
+          {showSubMenu && (
+            <section aria-label={selectors.pages.Dashboard.SubMenu.submenu}>
+              <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
+            </section>
           )}
+          {config.featureToggles.editPanelCSVDragAndDrop ? (
+            <DropZone
+              onDrop={this.onFileDrop}
+              accept={DFImport.acceptedFiles}
+              maxSize={DFImport.maxFileSize}
+              noClick={true}
+            >
+              {({ getRootProps, isDragActive }) => {
+                const styles = getStyles(this.props.theme, isDragActive);
+                return (
+                  <div {...getRootProps({ className: styles.dropZone })}>
+                    <div className={styles.dropOverlay}>
+                      <div className={styles.dropHint}>
+                        <Icon name="upload" size="xxxl"></Icon>
+                        <h3>Create tables from spreadsheets</h3>
+                      </div>
+                    </div>
+                    <DashboardGrid
+                      dashboard={dashboard}
+                      isEditable={!!dashboard.meta.canEdit}
+                      viewPanel={viewPanel}
+                      editPanel={editPanel}
+                    />
+                  </div>
+                );
+              }}
+            </DropZone>
+          ) : (
+            <DashboardGrid
+              dashboard={dashboard}
+              isEditable={!!dashboard.meta.canEdit}
+              viewPanel={viewPanel}
+              editPanel={editPanel}
+            />
+          )}
+          {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
         </Page>
         {editPanel && (
           <PanelEditor

public/app/routes/routes.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { isTruthy } from '@grafana/data';
-import { ErrorPage } from 'app/core/components/ErrorPage/ErrorPage';
 import { LoginPage } from 'app/core/components/Login/LoginPage';
 import { NavLandingPage } from 'app/core/components/NavLandingPage/NavLandingPage';
+import { PageNotFound } from 'app/core/components/PageNotFound/PageNotFound';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
 import UserAdminPage from 'app/features/admin/UserAdminPage';
@@ -512,10 +512,8 @@ export function getAppRoutes(): RouteDescriptor[] {
     ...getDataConnectionsRoutes(),
     {
       path: '/*',
-      component: ErrorPage,
+      component: PageNotFound,
     },
-    // TODO[Router]
-    // ...playlistRoutes,
   ].filter(isTruthy);
 }