Feat (home): Add new theme dashboard screenshots (#4906)

* Feat (home): Add new theme dashboard screenshots

- Add `next` theme variant screenshots of sample dashboards with `_new` suffix
- Add chromed screenshots of flights dashboard to use as the images in the new theme modal and replace placeholders
- Tweak gutter size in new theme modal
- Add `hasNewThemeImages` optional boolean to sample dataset registry interface
- Update sample data cards image path logic to fetch themed images if available via `hasNewThemeImages` prop

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* update changelog

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* Minified new theme dashboard screenshots

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: Miki <miki@amazon.com>
Co-authored-by: Miki <miki@amazon.com>

CHANGELOG.md

@@ -29,6 +29,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Remove minimum constraint on opensearch hosts to allow empty host ([#4701](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4701))
 - [Discover] Update styles to compatible with OUI `next` theme ([#4644](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4644))
 - [Home] Add modal to introduce the `next` theme ([#4715](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4715))
+- [Home] Add new theme sample dashboard screenshots ([#4906](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4906))
 - Remove visualization editor sidebar background ([#4719](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4719))
 - [Vis Colors] Remove customized colors from sample visualizations and dashboards ([#4741](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4741))
 - [Vis Colors] Update color mapper to prioritize unique colors per visualization rather than across entire dashboard ([#4890](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4890))

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

@@ -36,7 +36,6 @@ export const NewThemeModal: FC<Props> = ({ addBasePath, onClose }) => {
     services: { application },
   } = useOpenSearchDashboards<CoreStart>();
 
-  // TODO: Finalize copy
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
@@ -71,20 +70,18 @@ export const NewThemeModal: FC<Props> = ({ addBasePath, onClose }) => {
           </EuiText>
         </RedirectAppLinks>
         <EuiSpacer />
-        <EuiFlexGroup gutterSize="none">
+        <EuiFlexGroup gutterSize="s">
           <EuiFlexItem>
-            {/* TODO: Replace with actual next theme preview images. Using welcome graphics as placeholders */}
             <EuiImage
-              url={addBasePath('/plugins/home/assets/welcome_graphic_light_2x.png')}
+              url={addBasePath('/plugins/home/assets/new_theme_light.png')}
               alt={i18n.translate('home.newThemeModal.lightModeImageAltDescription', {
                 defaultMessage: 'screenshot of new theme in light mode',
               })}
             />
           </EuiFlexItem>
           <EuiFlexItem>
-            {/* TODO: Replace with actual next theme preview images. Using welcome graphics as placeholders */}
             <EuiImage
-              url={addBasePath('/plugins/home/assets/welcome_graphic_dark_2x.png')}
+              url={addBasePath('/plugins/home/assets/new_theme_dark.png')}
               alt={i18n.translate('home.newThemeModal.darkModeImageAltDescription', {
                 defaultMessage: 'screenshot of new theme in dark mode',
               })}

src/plugins/home/public/application/components/sample_data_set_cards.js

@@ -201,9 +201,18 @@ export class SampleDataSetCards extends React.Component {
   };
 
   lightOrDarkImage = (sampleDataSet) => {
-    return getServices().uiSettings.get('theme:darkMode') && sampleDataSet.darkPreviewImagePath
-      ? sampleDataSet.darkPreviewImagePath
-      : sampleDataSet.previewImagePath;
+    let imagePath = sampleDataSet.previewImagePath;
+
+    if (sampleDataSet.darkPreviewImagePath && getServices().uiSettings.get('theme:darkMode')) {
+      imagePath = sampleDataSet.darkPreviewImagePath;
+    }
+
+    // For `next` theme, append `_new`
+    if (sampleDataSet.hasNewThemeImages && getServices().uiSettings.get('theme:version') !== 'v7') {
+      imagePath = imagePath.replace(/.png/, '_new.png');
+    }
+
+    return imagePath;
   };
 
   render() {

src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts

@@ -53,6 +53,7 @@ export const ecommerceSpecProvider = function (): SampleDatasetSchema {
     description: ecommerceDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/ecommerce/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/ecommerce/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,

src/plugins/home/server/services/sample_data/data_sets/flights/index.ts

@@ -53,6 +53,7 @@ export const flightsSpecProvider = function (): SampleDatasetSchema {
     description: flightsDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/flights/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/flights/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,

src/plugins/home/server/services/sample_data/data_sets/logs/index.ts

@@ -53,6 +53,7 @@ export const logsSpecProvider = function (): SampleDatasetSchema {
     description: logsDescription,
     previewImagePath: '/plugins/home/assets/sample_data_resources/logs/dashboard.png',
     darkPreviewImagePath: '/plugins/home/assets/sample_data_resources/logs/dashboard_dark.png',
+    hasNewThemeImages: true,
     overviewDashboard: DASHBOARD_ID,
     getDataSourceIntegratedDashboard: appendDataSourceId(DASHBOARD_ID),
     appLinks: initialAppLinks,

src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts

@@ -85,6 +85,7 @@ export interface SampleDatasetSchema<T = unknown> {
   description: string;
   previewImagePath: string;
   darkPreviewImagePath: string;
+  hasNewThemeImages?: boolean;
 
   // saved object id of main dashboard for sample data set
   overviewDashboard: string;

src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts

@@ -71,6 +71,7 @@ export const sampleDataSchema = {
   description: Joi.string().required(),
   previewImagePath: Joi.string().required(),
   darkPreviewImagePath: Joi.string(),
+  hasNewThemeImages: Joi.boolean(),
 
   // saved object id of main dashboard for sample data set
   overviewDashboard: Joi.string().required(),

src/plugins/home/server/services/sample_data/routes/list.ts

@@ -55,6 +55,7 @@ export const createListRoute = (router: IRouter, sampleDatasets: SampleDatasetSc
           description: sampleDataset.description,
           previewImagePath: sampleDataset.previewImagePath,
           darkPreviewImagePath: sampleDataset.darkPreviewImagePath,
+          hasNewThemeImages: sampleDataset.hasNewThemeImages,
           overviewDashboard: sampleDataset.getDataSourceIntegratedDashboard(dataSourceId),
           appLinks: sampleDataset.appLinks,
           defaultIndex: sampleDataset.getDataSourceIntegratedDefaultIndex(dataSourceId),