From 5366b2da6047f5121671ff13c5e50332301ebb30 Mon Sep 17 00:00:00 2001
From: Kawika Avilla <kavilla414@gmail.com>
Date: Tue, 28 Nov 2023 01:57:57 +0000
Subject: [PATCH] add config

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
---
 config/opensearch_dashboards.yml              |   8 ++
 src/plugins/home/config.ts                    | 100 ++++++++++------
 .../homepage/hero_section/get_started.tsx     | 107 +++++++++---------
 src/plugins/home/server/index.ts              |   2 +-
 4 files changed, 129 insertions(+), 88 deletions(-)

diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
index e9eea0000aa8..150a1f4bd41e 100644
--- a/config/opensearch_dashboards.yml
+++ b/config/opensearch_dashboards.yml
@@ -273,3 +273,11 @@
 
 # Set the value of this setting to true to enable plugin augmentation
 # vis_augmenter.pluginAugmentationEnabled: true
+
+# Example: For hero content
+# home.hero.title: 'The Assistant'
+# home.hero.body: 'Automatically make queries.{br}{br}All the {terms} applied.'
+# home.hero.externalActionButton: {
+#   text: 'Login to try',
+#   link: 'https://observability.playground.opensearch.org/'
+# }
diff --git a/src/plugins/home/config.ts b/src/plugins/home/config.ts
index c77ace37652a..334f519c06da 100644
--- a/src/plugins/home/config.ts
+++ b/src/plugins/home/config.ts
@@ -34,42 +34,72 @@ export const configSchema = schema.object({
   disableWelcomeScreen: schema.boolean({ defaultValue: false }),
   disableNewThemeModal: schema.boolean({ defaultValue: false }),
   newHomepage: schema.boolean({ defaultValue: false }),
-  prompts: schema.arrayOf(
-    schema.object({
-      prompt: schema.string(),
-      indexPattern: schema.string(),
-      datasourceName: schema.string(),
-      datasourceType: schema.string(),
+  hero: schema.object({
+    enabled: schema.boolean({ defaultValue: true }),
+    title: schema.string({ defaultValue: 'Try the Query Assistant' }),
+    body: schema.string({
+      defaultValue:
+        'Automatically generate complex queries using simple conversational prompts. AI assisted summary helps you navigate and understand errors from your logs.{br}{br}You will be redirected to the observability playground where you will need to login. All the {terms} of the playground still apply.',
     }),
-    {
-      defaultValue: [
-        {
-          prompt: 'How many errors are there in my logs?',
-          datasourceName: 'Default cluster',
-          datasourceType: 'DEFAULT_INDEX_PATTERNS',
-          indexPattern: 'sso-logs',
-        },
-        {
-          prompt: 'Show me the number of flights each day?',
-          datasourceName: 'Default cluster',
-          datasourceType: 'DEFAULT_INDEX_PATTERNS',
-          indexPattern: 'opensearch_dashboards_sample_data_flights',
-        },
-        {
-          prompt: 'What are top visited urls on my website?',
-          datasourceName: 'Default cluster',
-          datasourceType: 'DEFAULT_INDEX_PATTERNS',
-          indexPattern: 'opensearch_dashboards_sample_data_logs',
-        },
-        {
-          prompt: 'Show me the number of orders grouped by gender',
-          datasourceName: 'Default cluster',
-          datasourceType: 'DEFAULT_INDEX_PATTERNS',
-          indexPattern: 'opensearch_datashboards_sample_data_ecommerce',
-        },
-      ],
-    }
-  ),
+    img: schema.maybe(
+      schema.object({
+        src: schema.maybe(schema.string()),
+        link: schema.maybe(schema.string()),
+      })
+    ),
+    actionButton: schema.object({
+      text: schema.string({ defaultValue: 'Try in Log Explorer' }),
+      app: schema.string({ defaultValue: 'observability-logs' }),
+      path: schema.string({ defaultValue: '#/explorer' }),
+    }),
+    externalActionButton: schema.maybe(
+      schema.object({
+        text: schema.string(),
+        link: schema.string(),
+      })
+    ),
+    seconardaryButton: schema.object({
+      text: schema.string({ defaultValue: 'Learn more' }),
+      link: schema.string({
+        defaultValue: 'https://opensearch.org/platform/observability/index.html',
+      }),
+    }),
+    prompts: schema.arrayOf(
+      schema.object({
+        text: schema.string(),
+        app: schema.string(),
+        path: schema.string(),
+      }),
+      {
+        defaultValue: [
+          {
+            text: 'How many errors are there in my logs?',
+            app: 'observability-logs',
+            path:
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=sso-logs&datasourceName=Default%20cluster',
+          },
+          {
+            text: 'Show me the number of flights each day?',
+            app: 'observability-logs',
+            path:
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_flights&datasourceName=Default%20cluster',
+          },
+          {
+            text: 'What are top visited urls on my website?',
+            app: 'observability-logs',
+            path:
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_logs&datasourceName=Default%20cluster',
+          },
+          {
+            text: 'Show me the number of orders grouped by gender',
+            app: 'observability-logs',
+            path:
+              '#/explorer?datasourceType=DEFAULT_INDEX_PATTERNS&indexPattern=opensearch_dashboards_sample_data_ecommerce&datasourceName=Default%20cluster',
+          },
+        ],
+      }
+    ),
+  }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;
diff --git a/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx b/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx
index 2b2cc55b815c..742925dcab6d 100644
--- a/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx
+++ b/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx
@@ -27,20 +27,15 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
   const services = getServices();
   const getUrl = services.application.getUrlForApp;
   const navigate = services.application.navigateToApp;
-  const prompts = services.homeConfig.prompts;
+  const heroConfig = services.homeConfig.hero;
+  const isHeroEnabled = heroConfig.enabled;
+  const prompts = isHeroEnabled ? heroConfig.prompts : [];
   type Prompt = typeof prompts extends Array<infer T> ? T : never;
 
-  const OLLY_DESCRIPTION = (
-    <FormattedMessage
-      id="home.getStarted.ollyDescription"
-      defaultMessage="Automatically generate complex queries using simple natural language questions. AI assisted summaraies help you navigate and understand your log data."
-    />
-  );
-
-  const PLAYGROUND_DESCRIPTION = (
+  const description = (
     <FormattedMessage
       id="home.getStarted.playgroundDescription"
-      defaultMessage="Automatically generate complex queries using simple conversational prompts. AI assisted summary helps you navigate and understand errors from your logs.{br}{br}You will be redirected to the observability playground where you will need to login. All the {terms} of the playground still apply."
+      defaultMessage={heroConfig.body}
       values={{
         br: <br />,
         terms: (
@@ -52,37 +47,41 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
     />
   );
 
-  const description = olly ? OLLY_DESCRIPTION : PLAYGROUND_DESCRIPTION;
-
-  const OLLY_ACTION_BUTTON = (
-    <EuiButton fullWidth={false} fill href={getUrl('observability-logs', { path: '#/explorer' })}>
-      <FormattedMessage id="home.getStarted.launchTutorial" defaultMessage="Try in Log Explorer" />
+  const actionButton = !heroConfig.externalActionButton ? (
+    <EuiButton
+      fullWidth={false}
+      fill
+      href={getUrl(heroConfig.actionButton.app, { path: heroConfig.actionButton.path })}
+    >
+      <FormattedMessage
+        id="home.getStarted.launchTutorial"
+        defaultMessage={heroConfig.actionButton.text}
+      />
     </EuiButton>
-  );
-
-  const PLAYGROUND_ACTION_BUTTON = (
-    <EuiButton fullWidth={false} fill href="https://observability.playground.opensearch.org/">
-      <FormattedMessage id="home.getStarted.login" defaultMessage="Login to try" />
+  ) : (
+    <EuiButton fullWidth={false} fill href={heroConfig.externalActionButton.link}>
+      <FormattedMessage
+        id="home.getStarted.login"
+        defaultMessage={heroConfig.externalActionButton.text}
+      />
     </EuiButton>
   );
 
-  const actionButton = olly ? OLLY_ACTION_BUTTON : PLAYGROUND_ACTION_BUTTON;
+  const content = olly ? (
+    renderCategories()
+  ) : (
+    <EuiImage src={illustration} alt="illustration" size="fullWidth" />
+  );
 
-  function renderExample({ prompt, datasourceName, datasourceType, indexPattern }: Prompt) {
+  function renderExample({ text, app, path }: Prompt) {
     return (
-      <EuiFlexItem key={prompt} grow={false}>
+      <EuiFlexItem key={text} grow={false}>
         <EuiPanel
           color="subdued"
           paddingSize="s"
           onClick={() =>
-            navigate('observability-logs', {
-              path: `#/explorer?datasourceName=${encodeURIComponent(
-                datasourceName
-              )}&datasourceType=${encodeURIComponent(
-                datasourceType
-              )}&indexPattern=${encodeURIComponent(indexPattern)}&olly_q=${encodeURIComponent(
-                prompt
-              )}`,
+            navigate(app, {
+              path,
             })
           }
         >
@@ -90,7 +89,7 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
             <EuiFlexItem grow={false}>
               <EuiIcon type={logo} size="l" />
             </EuiFlexItem>
-            <EuiFlexItem>&quot;{prompt}&quot;</EuiFlexItem>
+            <EuiFlexItem>&quot;{text}&quot;</EuiFlexItem>
           </EuiFlexGroup>
         </EuiPanel>
       </EuiFlexItem>
@@ -114,11 +113,14 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
 
   const links = [
     {
-      text: i18n.translate('home.getStarted.learnMore', { defaultMessage: 'Learn more' }),
-      url: 'https://opensearch.org/platform/observability/index.html',
+      text: i18n.translate('home.getStarted.learnMore', {
+        defaultMessage: heroConfig.seconardaryButton.text,
+      }),
+      url: heroConfig.seconardaryButton.link,
     },
   ];
 
+  // TODO: understand why we only want this for Olly
   if (olly) {
     links.push({
       text: i18n.translate('home.getStarted.stayConnected', { defaultMessage: 'Stay connected' }),
@@ -129,30 +131,31 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
   return (
     <HeroSection
       title={i18n.translate('home.getStarted.title', {
-        defaultMessage: 'Try the Query Assistant',
+        defaultMessage: heroConfig.title,
       })}
       description={description}
       links={links}
       actionButton={actionButton}
-      content={
-        olly ? (
-          renderCategories()
-        ) : (
-          <EuiImage src={illustration} alt="illustration" size="fullWidth" />
-        )
-      }
+      content={content}
       illustration={
-        <div className="home-hero-illustrationContainer ">
-          <EuiButtonIcon
-            aria-labelledby="home-hero-illustrationPlay"
-            className="home-hero-illustrationButton"
-            display="fill"
-            iconType="play"
-            iconSize="l"
-            size="m"
-          />
+        heroConfig.img ? (
+          <div className="home-hero-illustrationContainer">
+            (
+            <EuiButtonIcon
+              href={heroConfig.img.link}
+              aria-labelledby="home-hero-illustrationPlay"
+              className="home-hero-illustrationButton"
+              display="fill"
+              iconType="play"
+              iconSize="l"
+              size="m"
+            />
+            )
+            <EuiImage src={image} alt="Animated gif 16:9 ratio" />
+          </div>
+        ) : (
           <EuiImage src={image} alt="Animated gif 16:9 ratio" />
-        </div>
+        )
       }
     />
   );
diff --git a/src/plugins/home/server/index.ts b/src/plugins/home/server/index.ts
index c047b429f9b4..95796ec7ba6c 100644
--- a/src/plugins/home/server/index.ts
+++ b/src/plugins/home/server/index.ts
@@ -40,7 +40,7 @@ export const config: PluginConfigDescriptor<ConfigSchema> = {
     disableWelcomeScreen: true,
     disableNewThemeModal: true,
     newHomepage: true,
-    prompts: true,
+    hero: true,
   },
   schema: configSchema,
   deprecations: ({ renameFromRoot }) => [