New homepage

src/plugins/home/opensearch_dashboards.json

@@ -5,7 +5,5 @@
   "ui": true,
   "requiredPlugins": ["data", "urlForwarding"],
   "optionalPlugins": ["usageCollection", "telemetry", "dataSource"],
-  "requiredBundles": [
-    "opensearchDashboardsReact", "dataSourceManagement"
-  ]
+  "requiredBundles": ["opensearchDashboardsReact", "dataSourceManagement", "savedObjects"]
 }

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

@@ -32,6 +32,7 @@ import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 import PropTypes from 'prop-types';
 import { Home } from './home';
+import { Homepage } from './homepage';
 import { FeatureDirectory } from './feature_directory';
 import { TutorialDirectory } from './tutorial_directory';
 import { Tutorial } from './tutorial/tutorial';
@@ -92,7 +93,7 @@ export function HomeApp({ directories, solutions }) {
           <Route exact path="/feature_directory">
             <FeatureDirectory addBasePath={addBasePath} directories={directories} />
           </Route>
-          <Route exact path="/">
+          <Route exact path="/legacy">
             <Home
               addBasePath={addBasePath}
               directories={directories}
@@ -103,6 +104,9 @@ export function HomeApp({ directories, solutions }) {
               telemetry={telemetry}
             />
           </Route>
+          <Route exact path="/">
+            <Homepage />
+          </Route>
           <Route path="*" exact={true} component={RedirectToDefaultApp} />
         </Switch>
       </Router>

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

@@ -0,0 +1,5 @@
+.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;
+}

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 hasBorder={false} hasShadow={false}>
+      <LazyRender render={render} />
+    </EuiPanel>
+  );
+};

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

@@ -0,0 +1,81 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiPageTemplate, EuiButtonEmpty } from '@elastic/eui';
+import { Homepage as HomepageType } from '../../../services/section_type/section_type';
+import { getServices } from '../../opensearch_dashboards_services';
+import { HeroSection } from './hero_section';
+import { Section } from './section';
+
+export const Homepage = () => {
+  const { sectionTypes, application } = getServices();
+  const getUrl = application.getUrlForApp;
+
+  // TODO: ideally, this should be some sort of observable so changes can be made without having to explicitly hit a save button
+  const [homepage, setHomepage] = useState<HomepageType>();
+  const [error, setError] = useState();
+  const isLoading = !homepage && !error;
+
+  useEffect(() => {
+    sectionTypes.getHomepage().then(setHomepage).catch(setError);
+  }, [sectionTypes]);
+
+  if (isLoading) {
+    return <span>Loading...</span>;
+  }
+
+  if (error) {
+    // TODO: what is the correct way to handle errors here?
+    // eslint-disable-next-line no-console
+    console.error(error);
+
+    return <span>Error loading homepage</span>;
+  }
+
+  const sideItems: React.ReactNode[] = [
+    <EuiButtonEmpty iconType="indexOpen" href={getUrl('home', { path: '#/tutorial_directory' })}>
+      Add data
+    </EuiButtonEmpty>,
+    <EuiButtonEmpty iconType="gear" href={getUrl('management')}>
+      Manage
+    </EuiButtonEmpty>,
+    <EuiButtonEmpty iconType="wrench" href={getUrl('dev_tools', { path: '#/console' })}>
+      Dev tools
+    </EuiButtonEmpty>,
+  ].reverse();
+
+  function renderSections() {
+    return homepage!.sections.map(({ render, title, description, links }, i) => (
+      <Section key={i} title={title} description={description} links={links} render={render} />
+    ));
+  }
+
+  const hero = homepage!.heroes[0];
+
+  return (
+    <EuiPageTemplate
+      restrictWidth={1400}
+      pageHeader={{
+        pageTitle: i18n.translate('home.title', { defaultMessage: 'Home' }),
+        rightSideItems: sideItems,
+        alignItems: 'center',
+      }}
+      pageContentProps={{
+        color: 'transparent',
+        hasBorder: false,
+        hasShadow: false,
+      }}
+      pageContentBodyProps={{
+        paddingSize: 'none',
+        className: 'home-homepage-pageBody',
+      }}
+    >
+      {hero && <HeroSection render={hero.render} />}
+      {renderSections()}
+    </EuiPageTemplate>
+  );
+};

src/plugins/home/public/application/components/homepage/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Homepage } from './homepage';

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { FC, useRef, useEffect } from 'react';
+import { RenderFn } from '../../../services/section_type/section_type';
+
+interface Props {
+  render: RenderFn;
+}
+
+export const LazyRender: FC<Props> = ({ render }) => {
+  const ref = useRef(null);
+
+  // by using a useEffect here, this should be a 2 birds with 1 stone situation, where we defer rendering and also get the unmount behavior at the same time
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    return render(ref.current);
+  }, [render]);
+
+  // display: contents is used so that this component doesn't affect the rendering of the child render function
+  return <div style={{ display: 'contents' }} ref={ref} />;
+};

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { FC, useState } from 'react';
+import {
+  EuiPanel,
+  EuiButtonIcon,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiLink,
+} from '@elastic/eui';
+import { RenderFn, Section as SectionType } from '../../../services/section_type/section_type';
+import { LazyRender } from './lazy_render';
+
+interface Props {
+  render: RenderFn;
+  title: SectionType['title'];
+  description?: SectionType['description'];
+  links?: SectionType['links'];
+}
+
+// TODO: the way this is implemented currently will mount and unmount whenever the section is expanded/collapsed. Do we want to keep it this way?
+export const Section: FC<Props> = ({ render, title, description, links }) => {
+  const [isExpanded, setExpanded] = useState(true);
+
+  const hasDescription = !!description;
+  const hasLinks = !!links && links.length > 0;
+  const hasDescriptionSection = hasDescription || hasLinks;
+  const hasDescriptionSpacer = hasDescription && hasLinks;
+
+  const toggleExpanded = () => setExpanded((expanded) => !expanded);
+
+  return (
+    <EuiPanel hasBorder={false} hasShadow={false} paddingSize="none" color="transparent">
+      <EuiFlexGroup direction="row" alignItems="center" gutterSize="s" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            iconType={isExpanded ? 'arrowUp' : 'arrowRight'}
+            onClick={toggleExpanded}
+            size="s"
+            iconSize="m"
+            aria-label={isExpanded ? 'Collapse section' : 'Expand section'}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow>
+          <EuiTitle size="l">
+            <h2>{title}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {isExpanded && (
+        <EuiFlexGroup direction="row">
+          {hasDescriptionSection && (
+            <EuiFlexItem grow={1}>
+              {description}
+              {hasDescriptionSpacer && <EuiSpacer />}
+              {hasLinks && links.map(({ label, url }, i) => <EuiLink href={url}>{label}</EuiLink>)}
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={3}>
+            <LazyRender render={render} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </EuiPanel>
+  );
+};

src/plugins/home/public/application/opensearch_dashboards_services.ts

@@ -44,6 +44,7 @@ import { UrlForwardingStart } from '../../../url_forwarding/public';
 import { TutorialService } from '../services/tutorials';
 import { FeatureCatalogueRegistry } from '../services/feature_catalogue';
 import { EnvironmentService } from '../services/environment';
+import { SectionTypeService } from '../services/section_type';
 import { ConfigSchema } from '../../config';
 import { HomePluginBranding } from '..';
 import { DataSourcePluginStart } from '../../../data_source/public';
@@ -73,6 +74,7 @@ export interface HomeOpenSearchDashboardsServices {
     getBranding: () => HomePluginBranding;
   };
   dataSource?: DataSourcePluginStart;
+  sectionTypes: SectionTypeService;
 }
 
 let services: HomeOpenSearchDashboardsServices | null = null;

src/plugins/home/public/plugin.ts

@@ -47,6 +47,8 @@
   FeatureCatalogueRegistrySetup,
   TutorialService,
   TutorialServiceSetup,
+  SectionTypeService,
+  SectionTypeServiceSetup,
 } from './services';
 import { ConfigSchema } from '../config';
 import { setServices } from './application/opensearch_dashboards_services';
@@ -58,6 +60,8 @@
 import { PLUGIN_ID, HOME_APP_BASE_PATH } from '../common/constants';
 import { DataSourcePluginStart } from '../../data_source/public';
 
+import { renderFn } from './testing';
+
 export interface HomePluginStartDependencies {
   data: DataPublicPluginStart;
   telemetry?: TelemetryPluginStart;
@@ -81,6 +85,7 @@
   private readonly featuresCatalogueRegistry = new FeatureCatalogueRegistry();
   private readonly environmentService = new EnvironmentService();
   private readonly tutorialService = new TutorialService();
+  private readonly sectionTypeService = new SectionTypeService();
 
   constructor(private readonly initializerContext: PluginInitializerContext<ConfigSchema>) {}
 
@@ -122,6 +127,7 @@
           featureCatalogue: this.featuresCatalogueRegistry,
           injectedMetadata: coreStart.injectedMetadata,
           dataSource,
+          sectionTypes: this.sectionTypeService,
         });
         coreStart.chrome.docTitle.change(
           i18n.translate('home.pageTitle', { defaultMessage: 'Home' })
@@ -149,18 +155,34 @@
       order: 500,
     });
 
+    const sectionTypes = { ...this.sectionTypeService.setup() };
+
+    // TODO: register base section types
+    sectionTypes.registerHeroSection({ id: 'hello:world', render: renderFn });
+    sectionTypes.registerSection({
+      id: 'hello:world',
+      title: 'Hello world!',
+      description: 'This is a description',
+      links: [{ label: 'Link', url: 'https://google.com' }],
+      render: renderFn,
+    });
+
     return {
       featureCatalogue,
       environment: { ...this.environmentService.setup() },
       tutorials: { ...this.tutorialService.setup() },
+      sectionTypes,
     };
   }
 
-  public start(
-    { application: { capabilities, currentAppId$ }, http }: CoreStart,
-    { urlForwarding }: HomePluginStartDependencies
-  ) {
+  public start(core: CoreStart, { data, urlForwarding }: HomePluginStartDependencies) {
+    const {
+      application: { capabilities, currentAppId$ },
+      http,
+    } = core;
+
     this.featuresCatalogueRegistry.start({ capabilities });
+    this.sectionTypeService.start({ core, data });
 
     // If the home app is the initial location when loading OpenSearch Dashboards...
     if (
@@ -204,6 +226,7 @@
    */
 
   environment: EnvironmentSetup;
+  sectionTypes: SectionTypeServiceSetup;
 }
 export interface HomePublicPluginStart {
   featureCatalogue: FeatureCatalogueRegistry;