New homepage

.github/workflows/cypress_workflow.yml

@@ -28,7 +28,7 @@ on:
 
 env:
   TEST_REPO: ${{ inputs.test_repo != '' && inputs.test_repo || 'opensearch-project/opensearch-dashboards-functional-test' }}
-  TEST_BRANCH: "${{ inputs.test_branch != '' && inputs.test_branch || github.base_ref }}"
+  TEST_BRANCH: "${{ 'feature/new-home' || inputs.test_branch != '' && inputs.test_branch || github.base_ref }}"
   FTR_PATH: 'ftr'
   START_CMD: 'node ../scripts/opensearch_dashboards --dev --no-base-path --no-watch --savedObjects.maxImportPayloadBytes=10485760 --server.maxPayloadBytes=1759977 --logging.json=false --data.search.aggs.shardDelay.enabled=true'
   OPENSEARCH_SNAPSHOT_CMD: 'node ../scripts/opensearch snapshot -E cluster.routing.allocation.disk.threshold_enabled=false'

CHANGELOG.md

@@ -30,6 +30,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Discover] Added customizable pagination options based on Discover UI settings [#5610](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5610)
 - [Chrome] Introduce registerCollapsibleNavHeader to allow plugins to customize the rendering of nav menu header ([#5244](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5244))
 - [Custom Branding] Relative URL should be allowed for logos ([#5572](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5572))
+- Implement new homepage ([#5613](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5613))
 - [Discover] Enhanced the data source selector with added sorting functionality ([#5609](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5609))
 
 ### 🐛 Bug Fixes

config/opensearch_dashboards.yml

@@ -38,6 +38,9 @@
 # Set the value to true to disable the new theme introduction modal
 #home.disableNewThemeModal: false
 
+# Set the value to true to make the next homepage the default. Both homepages will be available regardless of this setting.
+#home.preferNextHomePage: false
+
 # Setting for an optimized healthcheck that only uses the local OpenSearch node to do Dashboards healthcheck.
 # This settings should be used for large clusters or for clusters with ingest heavy nodes.
 # It allows Dashboards to only healthcheck using the local OpenSearch node rather than fan out requests across all nodes.

src/plugins/home/config.ts

@@ -33,6 +33,7 @@ import { schema, TypeOf } from '@osd/config-schema';
 export const configSchema = schema.object({
   disableWelcomeScreen: schema.boolean({ defaultValue: false }),
   disableNewThemeModal: schema.boolean({ defaultValue: false }),
+  preferNextHomePage: schema.boolean({ defaultValue: false }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

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';
@@ -56,6 +57,7 @@ export function HomeApp({ directories, solutions }) {
     addBasePath,
     environmentService,
     telemetry,
+    homeConfig,
   } = getServices();
   const environment = environmentService.getEnvironment();
   const isCloudEnabled = environment.cloud;
@@ -83,6 +85,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 +108,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>
+          {homeConfig.preferNextHomePage ? (
+            <>
+              <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>
+  );
+};