[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;
@@ -42,7 +44,7 @@ export const observabilityOverviewTitle = 'Observability overview';
 export const observabilityOverviewPluginOrder = 5088;
 
 export const observabilityGettingStartedID = 'observability-gettingStarted';
-export const observabilityGettingStartedTitle = 'Getting Started';
+export const observabilityGettingStartedTitle = 'Get started';
 export const observabilityGettingStartedPluginOrder = 5089;
 
 export const observabilityApplicationsID = 'observability-applications';

public/components/getting_started/components/getting_started.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useState } from 'react';
 import { HomeProps } from 'public/components/getting_started/home';
 import { CollectAndShipData } from './getting_started_collectData';
 import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';
+import { observabilityGettingStartedTitle } from '../../../../common/constants/shared';
 
 interface ExtendedHomeProps extends HomeProps {
   selectedDataSourceId: string;
@@ -24,7 +25,7 @@ export const NewGettingStarted = (props: ExtendedHomeProps) => {
   useEffect(() => {
     chrome.setBreadcrumbs([
       {
-        text: 'Getting Started',
+        text: observabilityGettingStartedTitle,
         href: '#/',
       },
     ]);

public/components/getting_started/components/getting_started_collectData.tsx

@@ -33,6 +33,10 @@
 import { IntegrationCards } from './getting_started_integrationCards';
 import { UploadAssets } from './utils';
 
+const cardOne = 'Collector';
+const cardTwo = 'File Upload';
+const cardThree = 'Configure use-case based content';
+
 interface CollectAndShipDataProps {
   isOpen: boolean;
   onToggle: (isOpen: boolean) => void;
@@ -60,14 +64,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 +99,7 @@
       setGettingStarted(null);
       setWorkflows([]);
     }
   }, [specificMethod]);
 
   const handleCollectionMethodChange = (value: string) => {
     setCollectionMethod(value);
@@ -103,22 +107,22 @@
     setSelectedWorkflow('');
     setGettingStarted(null);
     setWorkflows([]);
-    onCardSelectionChange(value === 'Use a sample dataset');
+    onCardSelectionChange(value === cardThree);
 
-    if (value === 'Configure collectors') {
+    if (value === cardOne) {
       setCollectorOptions([
         { label: 'Open Telemetry (structured)', value: 'otel' },
         { label: 'Nginx (structured)', value: 'nginx' },
         { label: 'Java (unstructured)', value: 'java' },
         { label: 'Python (unstructured)', value: 'python' },
         { label: 'Golang (unstructured)', value: 'golang' },
       ]);
-    } else if (value === 'Upload a file CSV or JSON') {
+    } else if (value === cardTwo) {
       setCollectorOptions([{ label: 'Fluent Bit', value: 'csv' }]);
     }
   };
 
   const handleSpecificMethodChange = (selectedOption: any) => {
     if (!selectedOption) {
       return;
     }
@@ -135,7 +139,7 @@
     setWorkflows([]);
   };
 
   const onTabClick = (tab: any) => {
     const workflowIndex = parseInt(tab.id.split('_')[1], 10);
     setSelectedTabId(tab.id);
     setSelectedWorkflow(workflows[workflowIndex].name);
@@ -148,7 +152,7 @@
     return (
       <>
         <EuiText>
-          <strong>Select a collector</strong>
+          <h3>Select a collector</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiSelectable
@@ -165,8 +169,8 @@
     );
   };
 
   const renderSteps = (workflow: any) => {
     const steps = workflow.steps.map((step: any) => ({
       title: step.name,
       children: (
         <div>
@@ -181,7 +185,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 +229,7 @@
     return <EuiSteps steps={steps} />;
   };
 
   const renderSchema = (schemas: any[]) =>
     schemas.map((schema, idx) => (
       <div key={idx}>
         <EuiTitle size="s">
@@ -301,68 +305,64 @@
   }));
 
   return (
-    <EuiAccordion
-      id="collect-and-ship-data"
-      buttonContent="Collect and ship data"
-      paddingSize="m"
-      forceState={isOpen ? 'open' : 'closed'}
-      onToggle={onToggle}
-    >
-      <EuiPanel>
-        <EuiText>
-          <h3>Collect your data</h3>
-        </EuiText>
-        <EuiSpacer size="m" />
+    <EuiPanel paddingSize="m">
+      <EuiAccordion
+        id="collect-and-ingest-data"
+        buttonContent="Collect and ingest data"
+        paddingSize="m"
+        forceState={isOpen ? 'open' : 'closed'}
+        onToggle={onToggle}
+      >
         <EuiText>
-          <strong>Select a collection method</strong>
+          <h2>Collection method</h2>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiCheckableCard
               id="configure_collectors"
-              label="Configure collectors"
+              label={cardOne}
               checkableType="radio"
-              checked={selectedCard === 'Configure collectors'}
+              checked={selectedCard === cardOne}
               onChange={() => {
-                handleCollectionMethodChange('Configure collectors');
-                setSelectedCard('Configure collectors');
+                handleCollectionMethodChange(cardOne);
+                setSelectedCard(cardOne);
               }}
             >
-              Configure agents and ingestion pipeline
+              <EuiText size="s">Configure agents and ingestion pipeline</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCheckableCard
               id="upload_file"
-              label="Upload a file CSV"
+              label={cardTwo}
               checkableType="radio"
-              checked={selectedCard === 'Upload a file CSV or JSON'}
+              checked={selectedCard === cardTwo}
               onChange={() => {
-                handleCollectionMethodChange('Upload a file CSV or JSON');
-                setSelectedCard('Upload a file CSV or JSON');
+                handleCollectionMethodChange(cardTwo);
+                setSelectedCard(cardTwo);
               }}
             >
-              Upload your data
+              <EuiText size="s">Upload your data</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiCheckableCard
               id="use_sample_dataset"
-              label="Use a sample dataset"
+              label={cardThree}
               checkableType="radio"
-              checked={selectedCard === 'Use a sample dataset'}
+              checked={selectedCard === cardThree}
               onChange={() => {
-                handleCollectionMethodChange('Use a sample dataset');
-                setSelectedCard('Use a sample dataset');
+                handleCollectionMethodChange(cardThree);
+                setSelectedCard(cardThree);
               }}
             >
-              Explore with a log dataset
+              <EuiText size="s">Explore with a log dataset</EuiText>
             </EuiCheckableCard>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        {collectionMethod === 'Use a sample dataset' ? (
+        {collectionMethod === cardThree ? (
           <IntegrationCards />
         ) : (
           <>
@@ -382,7 +382,7 @@
             )}
           </>
         )}
-      </EuiPanel>
-    </EuiAccordion>
+      </EuiAccordion>
+    </EuiPanel>
   );
 };

public/components/getting_started/components/getting_started_queryAndAnalyze.tsx

@@ -14,10 +14,10 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } 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 +75,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,26 +92,31 @@ 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,
     });
   };
 
   return (
-    <EuiAccordion
-      id="query-and-analyze"
-      buttonContent={`Query and analyze data: ${selectedTechnology}`}
-      paddingSize="m"
-      forceState={isOpen ? 'open' : 'closed'}
-      onToggle={onToggle}
-    >
-      <EuiPanel>
-        <EuiTitle size="m">
-          <h3>Query data</h3>
-        </EuiTitle>
+    <EuiPanel paddingSize="m">
+      <EuiAccordion
+        id="query-and-analyze"
+        buttonContent={`Query and analyze data: ${selectedTechnology}`}
+        paddingSize="m"
+        forceState={isOpen ? 'open' : 'closed'}
+        onToggle={onToggle}
+      >
         <EuiText>
           <p>
-            <strong>Explore your data</strong>
+            <h2>Explore your data</h2>
           </p>
         </EuiText>
         <EuiSpacer size="m" />
@@ -119,12 +131,9 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
             ))}
         </EuiFlexGroup>
         <EuiHorizontalRule />
-        <EuiTitle size="m">
-          <h3>Analyze data</h3>
-        </EuiTitle>
         <EuiText>
           <p>
-            <strong>Visualize your data</strong>
+            <h2>Visualize your data</h2>
           </p>
         </EuiText>
         <EuiSpacer size="m" />
@@ -154,7 +163,7 @@ export const QueryAndAnalyze: React.FC<QueryAndAnalyzeProps> = ({
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPanel>
-    </EuiAccordion>
+      </EuiAccordion>
+    </EuiPanel>
   );
 };

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>