Feat (home): Add new theme dashboard screenshots (opensearch-project#…

…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 <[email protected]> * update changelog Signed-off-by: Josh Romero <[email protected]> * Minified new theme dashboard screenshots Signed-off-by: Miki <[email protected]> --------- Signed-off-by: Josh Romero <[email protected]> Signed-off-by: Miki <[email protected]> Co-authored-by: Miki <[email protected]>
manasvinibs · Sep 5, 2023 · f9d3c34 · f9d3c34
1 parent cf07424
commit f9d3c34
Show file tree

Hide file tree

Showing 17 changed files with 22 additions and 9 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/src/plugins/home/public/application/components/new_theme_modal.tsx b/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',
               })}

diff --git a/src/plugins/home/public/application/components/sample_data_set_cards.js b/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() {

diff --git a/src/plugins/home/public/assets/new_theme_dark.png b/src/plugins/home/public/assets/new_theme_dark.png
diff --git a/src/plugins/home/public/assets/new_theme_light.png b/src/plugins/home/public/assets/new_theme_light.png
diff --git a/...ugins/home/public/assets/sample_data_resources/ecommerce/dashboard_dark_new.png b/...ugins/home/public/assets/sample_data_resources/ecommerce/dashboard_dark_new.png
diff --git a/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/ecommerce/dashboard_new.png
diff --git a/...plugins/home/public/assets/sample_data_resources/flights/dashboard_dark_new.png b/...plugins/home/public/assets/sample_data_resources/flights/dashboard_dark_new.png
diff --git a/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/flights/dashboard_new.png
diff --git a/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_dark_new.png b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_dark_new.png
diff --git a/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_new.png b/src/plugins/home/public/assets/sample_data_resources/logs/dashboard_new.png
diff --git a/src/plugins/home/server/services/sample_data/data_sets/ecommerce/index.ts b/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,

diff --git a/src/plugins/home/server/services/sample_data/data_sets/flights/index.ts b/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,

diff --git a/src/plugins/home/server/services/sample_data/data_sets/logs/index.ts b/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,

diff --git a/src/plugins/home/server/services/sample_data/lib/sample_dataset_registry_types.ts b/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;

diff --git a/src/plugins/home/server/services/sample_data/lib/sample_dataset_schema.ts b/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(),

diff --git a/src/plugins/home/server/services/sample_data/routes/list.ts b/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),