New Home Page (#6065)

This pull request introduces a comprehensive update to the homepage, focusing on enhancing its layout, functionality, and configurability. Key changes include:

* Initial implementation and iterative improvements of the new homepage layout, including the addition of hero sections and various other sections for improved content organization and presentation.
* Introduction of lazy rendering and memoization to optimize performance and user experience.
* Refinements in section rendering, including inline rendering, to streamline the page's structure and interactivity.
* Removal of unused functions and components, alongside renaming functions for better clarity and alignment with their purpose.
* Significant enhancements in testing, ensuring robust functionality through the addition of various unit tests, including jest tests and tests for new observable-based features.
* Adjustments and updates following UX guidance, including changes to the footer, welcome screen, and other user interface elements to align with best practices and user expectations.
* Conversion of the homepage to use observables for dynamic content updates, and making the new homepage experience configurable, allowing for easy toggling between legacy and new layouts.
* Comprehensive cleanup and minor redesign efforts to refine the overall look and feel, alongside the removal of outdated comments and redundant code.
* Introduction of a new configuration option to enable/disable the new homepage, providing flexibility and control to users or administrators.
* Additional contributions include replacing a YAML config with an advanced setting and fixing the changelog for accurate documentation.

---------

Signed-off-by: Matt Provost <provomat@amazon.com>
Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
Signed-off-by: Ashwin P Chandran <ashwinpc@amazon.com>
Co-authored-by: Matt Provost <provomat@amazon.com>
Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
(cherry picked from commit d1dd85b)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

src/plugins/home/common/constants.ts

@@ -30,3 +30,4 @@
 
 export const PLUGIN_ID = 'home';
 export const HOME_APP_BASE_PATH = `/app/${PLUGIN_ID}`;
+export const USE_NEW_HOME_PAGE = 'home:useNewHomePage';

src/plugins/home/opensearch_dashboards.json

@@ -3,9 +3,7 @@
   "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["data", "urlForwarding"],
+  "requiredPlugins": ["data", "urlForwarding", "savedObjects"],
   "optionalPlugins": ["usageCollection", "telemetry", "dataSource"],
-  "requiredBundles": [
-    "opensearchDashboardsReact", "dataSourceManagement"
-  ]
+  "requiredBundles": ["opensearchDashboardsReact", "dataSourceManagement"]
 }

src/plugins/home/public/application/components/_index.scss

@@ -12,3 +12,4 @@
 @import "synopsis";
 @import "welcome";
 @import "tutorial/tutorial";
+@import "homepage/homepage";

src/plugins/home/public/application/components/home_app.js

@@ -31,7 +31,8 @@
 import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 import PropTypes from 'prop-types';
-import { Home } from './home';
+import { Home } from './legacy/home';
+import { Homepage } from './homepage';
 import { FeatureDirectory } from './feature_directory';
 import { TutorialDirectory } from './tutorial_directory';
 import { Tutorial } from './tutorial/tutorial';
@@ -40,6 +41,7 @@ import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
 import { getServices } from '../opensearch_dashboards_services';
 import { useMount } from 'react-use';
+import { USE_NEW_HOME_PAGE } from '../../../common/constants';
 
 const RedirectToDefaultApp = () => {
   useMount(() => {
@@ -56,6 +58,7 @@ export function HomeApp({ directories, solutions }) {
     addBasePath,
     environmentService,
     telemetry,
+    uiSettings,
   } = getServices();
   const environment = environmentService.getEnvironment();
   const isCloudEnabled = environment.cloud;
@@ -83,6 +86,20 @@ export function HomeApp({ directories, solutions }) {
     );
   };
 
+  const legacyHome = (
+    <Home
+      addBasePath={addBasePath}
+      directories={directories}
+      solutions={solutions}
+      find={savedObjectsClient.find}
+      localStorage={localStorage}
+      urlBasePath={getBasePath()}
+      telemetry={telemetry}
+    />
+  );
+
+  const homepage = <Homepage />;
+
   return (
     <I18nProvider>
       <Router>
@@ -92,17 +109,25 @@ export function HomeApp({ directories, solutions }) {
           <Route exact path="/feature_directory">
             <FeatureDirectory addBasePath={addBasePath} directories={directories} />
           </Route>
-          <Route exact path="/">
-            <Home
-              addBasePath={addBasePath}
-              directories={directories}
-              solutions={solutions}
-              find={savedObjectsClient.find}
-              localStorage={localStorage}
-              urlBasePath={getBasePath()}
-              telemetry={telemetry}
-            />
-          </Route>
+          {uiSettings.get(USE_NEW_HOME_PAGE) ? (
+            <>
+              <Route exact path="/legacy-home">
+                {legacyHome}
+              </Route>
+              <Route exact path="/">
+                {homepage}
+              </Route>
+            </>
+          ) : (
+            <>
+              <Route exact path="/next-home">
+                {homepage}
+              </Route>
+              <Route exact path="/">
+                {legacyHome}
+              </Route>
+            </>
+          )}
           <Route path="*" exact={true} component={RedirectToDefaultApp} />
         </Switch>
       </Router>

src/plugins/home/public/application/components/homepage/_homepage.scss

@@ -0,0 +1,9 @@
+.home-homepage-pageBody {
+  // This is needed to make sure the page body is not wider than the page.
+  // This is otherwise not possible with the props on EuiPageTemplate.
+  padding: 0 $euiSizeL;
+}
+
+.home-homepage-body--fill {
+  min-height: $euiSize * 50;
+}

src/plugins/home/public/application/components/homepage/footer.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@osd/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { CoreStart } from 'opensearch-dashboards/public';
+import { HOME_APP_BASE_PATH } from '../../../../common/constants';
+import {
+  RedirectAppLinks,
+  useOpenSearchDashboards,
+  useUiSetting$,
+} from '../../../../../opensearch_dashboards_react/public';
+
+export const Footer: React.FC = () => {
+  const [defaultRoute, setDefaultRoute] = useUiSetting$<string>('defaultRoute');
+  const {
+    services: {
+      application,
+      notifications: { toasts },
+    },
+  } = useOpenSearchDashboards<CoreStart>();
+
+  const getUrlForApp = application.getUrlForApp;
+  const { show, save } = application.capabilities.advancedSettings ?? {};
+
+  const isAdvancedSettingsEnabled = show && save;
+
+  const defaultRouteButton =
+    defaultRoute === HOME_APP_BASE_PATH ? (
+      <RedirectAppLinks application={application}>
+        <EuiButtonEmpty
+          flush="both"
+          href={getUrlForApp('management', { path: 'opensearch-dashboards/settings#defaultRoute' })}
+          iconType="home"
+          size="xs"
+        >
+          <FormattedMessage
+            id="home.footer.changeHomeRouteLink"
+            defaultMessage="Display a different page on log in"
+          />
+        </EuiButtonEmpty>
+      </RedirectAppLinks>
+    ) : (
+      <EuiButtonEmpty
+        flush="both"
+        iconType="home"
+        onClick={() => {
+          setDefaultRoute(HOME_APP_BASE_PATH);
+          toasts.addSuccess({
+            title: i18n.translate('home.footer.changeDefaultRouteSuccessToast', {
+              defaultMessage: 'Landing page updated',
+            }),
+          });
+        }}
+        size="xs"
+      >
+        <FormattedMessage
+          id="home.footer.makeDefaultRouteLink"
+          defaultMessage="Make this my landing page"
+        />
+      </EuiButtonEmpty>
+    );
+
+  return (
+    <EuiFlexGroup direction="row" wrap>
+      {isAdvancedSettingsEnabled && <EuiFlexItem grow={false}>{defaultRouteButton}</EuiFlexItem>}
+
+      <EuiFlexItem grow={false}>
+        <RedirectAppLinks application={application}>
+          <EuiButtonEmpty
+            flush="both"
+            href={getUrlForApp('home', { path: '#/feature_directory' })}
+            iconType="apps"
+            size="xs"
+          >
+            <FormattedMessage
+              id="home.footer.appDirectoryButtonLabel"
+              defaultMessage="View app directory"
+            />
+          </EuiButtonEmpty>
+        </RedirectAppLinks>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <RedirectAppLinks application={application}>
+          <EuiButtonEmpty
+            flush="both"
+            href={getUrlForApp('opensearch_dashboards_overview')}
+            iconType="visualizeApp"
+            size="xs"
+          >
+            <FormattedMessage
+              id="home.footer.visualizeAndAnalyze"
+              defaultMessage="Visualize & Analyze"
+            />
+          </EuiButtonEmpty>
+        </RedirectAppLinks>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src/plugins/home/public/application/components/homepage/hero_section.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { FC } from 'react';
+import { EuiPanel } from '@elastic/eui';
+import { RenderFn } from '../../../services/section_type/section_type';
+import { LazyRender } from './lazy_render';
+
+interface Props {
+  render: RenderFn;
+}
+
+export const HeroSection: FC<Props> = ({ render }) => {
+  return (
+    <EuiPanel data-test-subj="homepageHeroSection">
+      <LazyRender render={render} />
+    </EuiPanel>
+  );
+};