Remove theme update modal

changelogs/fragments/9776.yml

@@ -0,0 +1,2 @@
+feat:
+- Remove theme update modal ([#9776](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9776))

config/opensearch_dashboards.yml

@@ -46,9 +46,6 @@
 # Set the value to true to disable the welcome screen
 #home.disableWelcomeScreen: false
 
-# Set the value to true to disable the new theme introduction modal
-#home.disableNewThemeModal: false
-
 # Setting for an optimized healthcheck that only uses the local OpenSearch node to do Dashboards healthcheck.
 # This settings should be used for large clusters or for clusters with ingest heavy nodes.
 # It allows Dashboards to only healthcheck using the local OpenSearch node rather than fan out requests across all nodes.

src/plugins/home/config.ts

@@ -32,7 +32,6 @@ import { schema, TypeOf } from '@osd/config-schema';
 
 export const configSchema = schema.object({
   disableWelcomeScreen: schema.boolean({ defaultValue: false }),
-  disableNewThemeModal: schema.boolean({ defaultValue: false }),
 });
 
 export type ConfigSchema = TypeOf<typeof configSchema>;

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

@@ -42,12 +42,10 @@ import { FeatureCatalogueCategory } from '../../../services';
 import { getServices } from '../../opensearch_dashboards_services';
 import { AddData } from './add_data';
 import { ManageData } from './manage_data';
-import { NewThemeModal } from '../new_theme_modal';
 import { SolutionsSection } from './solutions_section';
 import { Welcome } from '../welcome';
 
 const KEY_ENABLE_WELCOME = 'home:welcome:show';
-const KEY_ENABLE_NEW_THEME_MODAL = 'home:newThemeModal:show';
 
 export class Home extends Component {
   constructor(props) {
@@ -58,12 +56,6 @@ export class Home extends Component {
       props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
     );
 
-    const isNewThemeModalEnabled = !(
-      getServices().uiSettings.get('theme:version') === 'v7' ||
-      getServices().homeConfig.disableNewThemeModal ||
-      props.localStorage.getItem(KEY_ENABLE_NEW_THEME_MODAL) === 'false'
-    );
-
     const body = document.querySelector('body');
     body.classList.add('isHomPage');
 
@@ -75,7 +67,6 @@ export class Home extends Component {
       isLoading: isWelcomeEnabled,
       isNewOpenSearchDashboardsInstance: false,
       isWelcomeEnabled,
-      isNewThemeModalEnabled,
     };
   }
 
@@ -131,15 +122,6 @@ export class Home extends Component {
     this._isMounted && this.setState({ isWelcomeEnabled: false });
   };
 
-  dismissNewThemeModal = () => {
-    this.props.localStorage.setItem(KEY_ENABLE_NEW_THEME_MODAL, 'false');
-    this._isMounted && this.setState({ isNewThemeModalEnabled: false });
-  };
-
-  onCloseNewThemeModal = () => {
-    this.dismissNewThemeModal();
-  };
-
   findDirectoryById = (id) => this.props.directories.find((directory) => directory.id === id);
 
   getFeaturesByCategory = (category) =>
@@ -149,7 +131,6 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
-    const { isNewThemeModalEnabled } = this.state;
 
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
@@ -204,10 +185,6 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          {isNewThemeModalEnabled && (
-            <NewThemeModal addBasePath={addBasePath} onClose={this.onCloseNewThemeModal} />
-          )}
-
           <OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
         </div>
       </main>

src/plugins/home/public/application/components/legacy/home.test.js

@@ -32,7 +32,6 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { Home } from './home';
-import { NewThemeModal } from '../new_theme_modal';
 
 import { FeatureCatalogueCategory } from '../../../services';
 
@@ -88,7 +87,7 @@ describe('home', () => {
       },
       localStorage: {
         getItem: sinon.spy((path) => {
-          expect(path).toMatch(/home:(welcome|newThemeModal):show/);
+          expect(path).toMatch(/home:(welcome):show/);
           return 'false';
         }),
         setItem: sinon.mock(),
@@ -105,7 +104,7 @@ describe('home', () => {
     if (homeConfig) {
       mockHomeConfig.mockReturnValue(homeConfig);
     } else {
-      mockHomeConfig.mockReturnValue({ disableWelcomeScreen: false, disableNewThemeModal: false });
+      mockHomeConfig.mockReturnValue({ disableWelcomeScreen: false });
     }
     if (uiSettings) {
       mockUiSettings.mockReturnValue(uiSettings);
@@ -368,50 +367,4 @@ describe('home', () => {
       expect(component).toMatchSnapshot();
     });
   });
-
-  describe('new theme modal', () => {
-    test('should show the new theme modal if not previously dismissed', async () => {
-      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
-
-      const component = await renderHome();
-
-      sinon.assert.calledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
-
-      expect(component.find(NewThemeModal).exists()).toBeTruthy();
-      expect(component).toMatchSnapshot();
-    });
-    test('should not show the new theme modal if v7 theme in use', async () => {
-      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
-
-      const component = await renderHome({}, undefined, 'v7');
-
-      sinon.assert.neverCalledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
-
-      expect(component.find(NewThemeModal).exists()).toBeFalsy();
-    });
-    test('should not show the new theme modal if disabled in config', async () => {
-      defaultProps.localStorage.getItem = sinon.spy(() => undefined);
-
-      const component = await renderHome(
-        {},
-        {
-          disableWelcomeScreen: true,
-          disableNewThemeModal: true,
-        }
-      );
-
-      sinon.assert.neverCalledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
-
-      expect(component.find(NewThemeModal).exists()).toBeFalsy();
-    });
-    test('should not show the new theme modal if previously dismissed', async () => {
-      defaultProps.localStorage.getItem = sinon.spy(() => 'false');
-
-      const component = await renderHome();
-
-      sinon.assert.calledWith(defaultProps.localStorage.getItem, 'home:newThemeModal:show');
-
-      expect(component.find(NewThemeModal).exists()).toBeFalsy();
-    });
-  });
 });

src/plugins/home/server/index.ts

@@ -38,7 +38,6 @@ import { configSchema, ConfigSchema } from '../config';
 export const config: PluginConfigDescriptor<ConfigSchema> = {
   exposeToBrowser: {
     disableWelcomeScreen: true,
-    disableNewThemeModal: true,
   },
   schema: configSchema,
   deprecations: ({ renameFromRoot }) => [

test/common/config.js

@@ -58,7 +58,6 @@ export default function () {
         `--opensearch.username=${opensearchDashboardsServerTestUser.username}`,
         `--opensearch.password=${opensearchDashboardsServerTestUser.password}`,
         `--home.disableWelcomeScreen=false`,
-        `--home.disableNewThemeModal=true`,
         // Needed for async search functional tests to introduce a delay
         `--data.search.aggs.shardDelay.enabled=true`,
         //`--security.showInsecureClusterWarning=false`,