[Bug] UI changes for overview page, fix re-direction for workspaces

common/constants/shared.ts

@@ -33,6 +33,8 @@ export const DATACONNECTIONS_ENDPOINT = '/_plugins/_query/_datasources';
 export const JOBS_ENDPOINT_BASE = '/_plugins/_async_query';
 export const JOB_RESULT_ENDPOINT = '/result';
 
+export const tutorialSampleDataPluginId = 'import_sample_data';
+
 export const observabilityID = 'observability-logs';
 export const observabilityTitle = 'Observability';
 export const observabilityPluginOrder = 1500;

public/components/getting_started/components/getting_started_collectData.tsx

@@ -60,14 +60,14 @@
 }) => {
   const [collectionMethod, setCollectionMethod] = useState('');
   const [specificMethod, setSpecificMethod] = useState('');
   const [_gettingStarted, setGettingStarted] = useState<any>(null);
   const [selectedTabId, setSelectedTabId] = useState('workflow_0');
   const [_selectedWorkflow, setSelectedWorkflow] = useState('');
   const [workflows, setWorkflows] = useState<any[]>([]);
   const [selectedCard, setSelectedCard] = useState('');
   const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);
 
   const technologyJsonMap: Record<string, any> = {
     otel: otelJson,
     csv: csvFileJson,
     golang: golangClientJson,
@@ -95,7 +95,7 @@
       setGettingStarted(null);
       setWorkflows([]);
     }
   }, [specificMethod]);
 
   const handleCollectionMethodChange = (value: string) => {
     setCollectionMethod(value);
@@ -103,7 +103,7 @@
     setSelectedWorkflow('');
     setGettingStarted(null);
     setWorkflows([]);
-    onCardSelectionChange(value === 'Use a sample dataset');
+    onCardSelectionChange(value === 'Configure use-case based content');
 
     if (value === 'Configure collectors') {
       setCollectorOptions([
@@ -118,7 +118,7 @@
     }
   };
 
   const handleSpecificMethodChange = (selectedOption: any) => {
     if (!selectedOption) {
       return;
     }
@@ -135,7 +135,7 @@
     setWorkflows([]);
   };
 
   const onTabClick = (tab: any) => {
     const workflowIndex = parseInt(tab.id.split('_')[1], 10);
     setSelectedTabId(tab.id);
     setSelectedWorkflow(workflows[workflowIndex].name);
@@ -165,8 +165,8 @@
     );
   };
 
   const renderSteps = (workflow: any) => {
     const steps = workflow.steps.map((step: any) => ({
       title: step.name,
       children: (
         <div>
@@ -181,7 +181,7 @@
               <EuiTitle size="xs">
                 <h4>Input Parameters:</h4>
               </EuiTitle>
               {step['input-params'].map((param: any, idx: number) => (
                 <EuiText key={idx}>
                   <strong>{param.name}:</strong> {param.description} ({param.type})
                 </EuiText>
@@ -225,7 +225,7 @@
     return <EuiSteps steps={steps} />;
   };
 
   const renderSchema = (schemas: any[]) =>
     schemas.map((schema, idx) => (
       <div key={idx}>
         <EuiTitle size="s">
@@ -349,20 +349,20 @@
           <EuiFlexItem>
             <EuiCheckableCard
               id="use_sample_dataset"
-              label="Use a sample dataset"
+              label="Configure use-case based content"
               checkableType="radio"
-              checked={selectedCard === 'Use a sample dataset'}
+              checked={selectedCard === 'Configure use-case based content'}
               onChange={() => {
-                handleCollectionMethodChange('Use a sample dataset');
-                setSelectedCard('Use a sample dataset');
+                handleCollectionMethodChange('Configure use-case based content');
+                setSelectedCard('Configure use-case based content');
               }}
             >
               Explore with a log dataset
             </EuiCheckableCard>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        {collectionMethod === 'Use a sample dataset' ? (
+        {collectionMethod === 'Configure use-case based content' ? (
           <IntegrationCards />
         ) : (
           <>

public/components/getting_started/components/getting_started_queryAndAnalyze.tsx

@@ -18,6 +18,7 @@ import {
 } from '@elastic/eui';
 import { coreRefs } from '../../../../public/framework/core_refs';
 import { fetchDashboardIds, fetchIndexPatternIds, redirectToDashboards } from './utils';
+import { getWorkspaceIdFromUrl } from '../../../../../../src/core/public/utils';
 
 interface Pattern {
   id: string;
@@ -75,8 +76,15 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
       ? `mds-${selectedDataSourceId}-objectId-${patternId}`
       : patternId;
 
+    const currentUrl = window.location.href;
+    const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());
+
+    const workspacePatternId = workspaceId
+      ? `workspaceId-${workspaceId}-${finalPatternId}`
+      : finalPatternId;
+
     coreRefs?.application!.navigateToApp('data-explorer', {
-      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${finalPatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
+      path: `discover#?_a=(discover:(columns:!(_source),isDirty:!f,sort:!()),metadata:(indexPattern:'${workspacePatternId}',view:discover))&_q=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))`,
     });
   };
 
@@ -85,8 +93,16 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
       ? `mds-${selectedDataSourceId}-objectId-${dashboardId}`
       : dashboardId;
 
+    const currentUrl = window.location.href;
+    const workspaceId = getWorkspaceIdFromUrl(currentUrl, coreRefs?.http!.basePath.getBasePath());
+
+    const workspaceDashboardId = workspaceId
+      ? `workspaceId-${workspaceId}-${finalDashboardId}`
+      : finalDashboardId;
+    const dashboardUrl = `#/view/${workspaceDashboardId}`;
+
     coreRefs?.application!.navigateToApp('dashboards', {
-      path: `#/view/${finalDashboardId}`,
+      path: dashboardUrl,
     });
   };
 

public/components/integrations/components/integration_overview_panel.tsx

@@ -36,7 +36,7 @@ export function IntegrationOverview(props: any) {
           data-test-subj="try-it-button"
           data-click-metric-element="integrations.create_from_try_it"
         >
-          Try It
+          Try with sample data
         </EuiSmallButton>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

public/components/overview/components/__tests__/__snapshots__/add_dashboard_callout.test.tsx.snap

@@ -95,47 +95,52 @@ exports[`Add dashboard callout renders add dashboard callout 1`] = `
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiButton>
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
-                  disabled={false}
-                  element="button"
-                  isDisabled={false}
-                  type="button"
+              <EuiSmallButton>
+                <EuiButton
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     disabled={false}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    element="button"
+                    isDisabled={false}
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconGap="m"
-                      iconSide="left"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      disabled={false}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconGap="m"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
                         <span
-                          className="euiButton__text"
+                          className="euiButtonContent euiButton__content"
                         >
-                          Select
+                          <span
+                            className="euiButton__text"
+                          >
+                            Select
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiTextColor>
         </div>

public/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap

@@ -96,47 +96,52 @@ exports[`Dashboard controls should render 1`] = `
                     className="euiSpacer euiSpacer--l"
                   />
                 </EuiSpacer>
-                <EuiButton>
-                  <EuiButtonDisplay
-                    baseClassName="euiButton"
-                    disabled={false}
-                    element="button"
-                    isDisabled={false}
-                    type="button"
+                <EuiSmallButton>
+                  <EuiButton
+                    size="s"
                   >
-                    <button
-                      className="euiButton euiButton--primary"
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
                       disabled={false}
-                      style={
-                        Object {
-                          "minWidth": undefined,
-                        }
-                      }
+                      element="button"
+                      isDisabled={false}
+                      size="s"
                       type="button"
                     >
-                      <EuiButtonContent
-                        className="euiButton__content"
-                        iconGap="m"
-                        iconSide="left"
-                        textProps={
+                      <button
+                        className="euiButton euiButton--primary euiButton--small"
+                        disabled={false}
+                        style={
                           Object {
-                            "className": "euiButton__text",
+                            "minWidth": undefined,
                           }
                         }
+                        type="button"
                       >
-                        <span
-                          className="euiButtonContent euiButton__content"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconGap="m"
+                          iconSide="left"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
                           <span
-                            className="euiButton__text"
+                            className="euiButtonContent euiButton__content"
                           >
-                            Select
+                            <span
+                              className="euiButton__text"
+                            >
+                              Select
+                            </span>
                           </span>
-                        </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonDisplay>
-                </EuiButton>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </EuiSmallButton>
               </div>
             </EuiTextColor>
           </div>

public/components/overview/components/add_dashboard_callout.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiCallOut, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiCallOut, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { useObservable } from 'react-use';
 import { coreRefs } from '../../../framework/core_refs';
@@ -30,7 +30,7 @@ export function AddDashboardCallout() {
           </p>
         </EuiText>
         <EuiSpacer />
-        <EuiButton onClick={showFlyout}>Select</EuiButton>
+        <EuiSmallButton onClick={showFlyout}>Select</EuiSmallButton>
       </EuiCallOut>
     </>
   );

public/components/overview/components/card_configs.tsx

@@ -12,6 +12,7 @@ import {
   alertingPluginID,
   anomalyDetectionPluginID,
   discoverPluginID,
+  tutorialSampleDataPluginId,
 } from '../../../../common/constants/shared';
 
 export interface GettingStartedConfig {
@@ -34,9 +35,22 @@ const GETTING_STARTED_CONFIG: GettingStartedConfig = {
   url: observabilityGettingStartedID,
 };
 
+const SAMPLEDATA_CONFIG: GettingStartedConfig = {
+  id: 'sample_data',
+  order: 2,
+  description: i18n.translate('home.sampleData.card.description', {
+    defaultMessage: 'You can install sample data to experiment with OpenSearch Dashboards.',
+  }),
+  title: i18n.translate('home.sampleData.card.title', {
+    defaultMessage: 'Try OpenSearch',
+  }),
+  url: tutorialSampleDataPluginId,
+  footer: 'Sample Datasets',
+};
+
 const DISCOVER_CONFIG: GettingStartedConfig = {
   id: 'discover',
-  order: 2,
+  order: 3,
   title: i18n.translate('observability.overview.card.discover.title', {
     defaultMessage: 'Discover insights',
   }),
@@ -47,7 +61,7 @@ const DISCOVER_CONFIG: GettingStartedConfig = {
 
 const METRICS_CONFIG: GettingStartedConfig = {
   id: 'metrics',
-  order: 3,
+  order: 4,
   title: i18n.translate('observability.overview.card.metrics.title', {
     defaultMessage: 'Monitor system performance',
   }),
@@ -58,7 +72,7 @@ const METRICS_CONFIG: GettingStartedConfig = {
 
 const TRACES_CONFIG: GettingStartedConfig = {
   id: 'traces',
-  order: 4,
+  order: 5,
   title: i18n.translate('observability.overview.card.traces.title', {
     defaultMessage: 'Identify performance issues',
   }),
@@ -69,7 +83,7 @@ const TRACES_CONFIG: GettingStartedConfig = {
 
 const SERVICES_CONFIG: GettingStartedConfig = {
   id: 'services',
-  order: 5,
+  order: 6,
   title: i18n.translate('observability.overview.card.services.title', {
     defaultMessage: 'Monitor service health',
   }),
@@ -80,7 +94,7 @@ const SERVICES_CONFIG: GettingStartedConfig = {
 
 const ALERTS_CONFIG: GettingStartedConfig = {
   id: 'alerts',
-  order: 6,
+  order: 7,
   title: i18n.translate('observability.overview.card.alerts.title', {
     defaultMessage: 'Get notified',
   }),
@@ -91,7 +105,7 @@ const ALERTS_CONFIG: GettingStartedConfig = {
 
 const ANOMALY_CONFIG: GettingStartedConfig = {
   id: 'anomaly',
-  order: 7,
+  order: 8,
   title: i18n.translate('observability.overview.card.anomaly.title', {
     defaultMessage: 'Detect anomalies in your data',
   }),
@@ -102,6 +116,7 @@ const ANOMALY_CONFIG: GettingStartedConfig = {
 
 export const cardConfigs = [
   GETTING_STARTED_CONFIG,
+  SAMPLEDATA_CONFIG,
   DISCOVER_CONFIG,
   METRICS_CONFIG,
   TRACES_CONFIG,

public/components/overview/home.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiText } from '@elastic/eui';
+import { EuiI18n } from '@elastic/eui';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 import { alertsPluginID, anomalyPluginID } from '../../../common/constants/overview';
@@ -67,13 +67,17 @@ export const Home = () => {
             order: card.order,
             description: card.description,
             title: card.title,
-            onClick: () => coreRefs.application?.navigateToApp(card.url, { path: '#/' }),
-            getFooter: () => {
-              return (
-                <EuiText size="s" textAlign="center">
-                  {card.footer}
-                </EuiText>
-              );
+            cardProps: {
+              selectable: {
+                children: (
+                  <EuiI18n
+                    token="home.sampleData.card.footer"
+                    default={card.footer || 'Documentation'}
+                  />
+                ),
+                onClick: () => coreRefs.application?.navigateToApp(card.url, { path: '#/' }),
+                isSelected: false,
+              },
             },
           }),
           getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,