feat: add new not found page (#3320)

* feat: add new page not found page

* chore: add page contents

* chore: add links and slack icon

* chore: remove debugging log

* chore: change relative import

Co-authored-by: Subir Jolly <subirjolly@Subirs-MacBook-Pro.local>

Author: subirjolly

assets/images/NotFoundBottom.png

@@ -0,0 +1,46 @@
+.page-not-found {
+  > .page-not-found-footer {
+    height: 65%;
+    background-image: url('~assets/images/NotFoundBottom.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    > .page-not-found-panel {
+      top: -120px;
+      width: 660px;
+      height: 250px;
+      margin: 0 auto;
+      z-index: 10;
+
+      > .page-not-found-panel-content {
+        margin: 30px 65px;
+
+        > .page-not-found-panel-section {
+          margin: 30px 0;
+
+          > .page-not-found-panel-title {
+            font-weight: bold;
+            margin: 5px 0;
+          }
+        }
+
+        .page-not-found-community-links {
+          margin-right: 45px;
+
+          > a {
+            margin: 0 5px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.slack-icon {
+  width: 14px;
+  height: 14px;
+  background-image: url('~assets/images/SlackIcon.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}

assets/images/SlackIcon.png

@@ -1,6 +1,97 @@
+import {
+  AlignItems,
+  AppWrapper,
+  ComponentSize,
+  FlexBox,
+  FunnelPage,
+  Icon,
+  IconFont,
+  InfluxColors,
+  JustifyContent,
+  Panel,
+} from '@influxdata/clockface'
 import React, {FC} from 'react'
+import LogoWithCubo from 'src/checkout/LogoWithCubo'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
-const NotFound: FC = () => (
+const NotFoundNew: FC = () => (
+  <AppWrapper type="funnel" className="page-not-found">
+    <FunnelPage
+      logo={<LogoWithCubo />}
+      enableGraphic={true}
+      className="page-not-found-funnel"
+    ></FunnelPage>
+    <FunnelPage.Footer className="page-not-found-footer">
+      <Panel
+        className="page-not-found-panel"
+        backgroundColor={InfluxColors.Grey15}
+      >
+        <div className="page-not-found-panel-content">
+          <div className="page-not-found-panel-section">
+            <div className="page-not-found-panel-title">Not a URL issue?</div>
+            <div>
+              <span>
+                The webpage you were trying to reach may have been removed or
+                your access to this page may have expired.&nbsp;
+                {/* Add rel options to avoid "tabnapping" */}
+                <a
+                  href="mailto:support@influxdata.com"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  Contact InfluxData Support
+                </a>
+              </span>
+            </div>
+          </div>
+          <div className="page-not-found-panel-section">
+            <div className="page-not-found-panel-title">
+              Have more feedback?
+            </div>
+            <div>
+              We welcome and encourage your feedback and bug reports for
+              InfluxDB. The following resources are available:
+            </div>
+          </div>
+          <FlexBox>
+            <FlexBox className="page-not-found-community-links">
+              <Icon glyph={IconFont.Cubouniform}></Icon>
+              {/* Add rel options to avoid "tabnapping" */}
+              <a
+                href="https://community.influxdata.com/"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                InfluxData Community
+              </a>
+            </FlexBox>
+            <FlexBox className="page-not-found-community-links">
+              {/* TODO: Change with Slack Icon */}
+              <span className="slack-icon" />
+              {/* Add rel options to avoid "tabnapping" */}
+              <a
+                href="https://influxdata.com/slack/"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                InfluxDB Community Slack
+              </a>
+            </FlexBox>
+          </FlexBox>
+        </div>
+      </Panel>
+      <FunnelPage.FooterSection>
+        <FlexBox
+          alignItems={AlignItems.Center}
+          margin={ComponentSize.Large}
+          justifyContent={JustifyContent.Center}
+        ></FlexBox>
+      </FunnelPage.FooterSection>
+    </FunnelPage.Footer>
+  </AppWrapper>
+)
+
+const NotFoundOld: FC = () => (
   <div className="container-fluid" data-testid="not-found">
     <div className="panel">
       <div className="panel-heading text-center">
@@ -10,4 +101,13 @@ const NotFound: FC = () => (
     </div>
   </div>
 )
+
+const NotFound: FC = () => {
+  if (isFlagEnabled('newNotFoundPage')) {
+    return <NotFoundNew />
+  }
+
+  return <NotFoundOld />
+}
+
 export default NotFound

src/shared/components/NotFound.scss

@@ -39,6 +39,7 @@
 @import 'src/shared/components/ExportOverlay.scss';
 @import 'src/shared/components/EditableName.scss';
 @import 'src/shared/components/DragAndDrop.scss';
+@import 'src/shared/components/NotFound.scss';
 @import 'src/shared/components/SearchableDropdown.scss';
 @import 'src/shared/components/BoxTooltip.scss';
 @import 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss';