[6.7][Maps]Remove dark mode and default to kuery (#30007)

* remove dark mode

* default to kuery
This commit is contained in:
Nathan Reese 2019-02-04 19:21:37 -07:00 committed by GitHub
parent fbe7667568
commit db38e66de2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 2 additions and 176 deletions

View file

@ -4,10 +4,6 @@
* you may not use this file except in compliance with the Elastic License.
*/
import chrome from 'ui/chrome';
const settings = chrome.getUiSettingsClient();
export function getInitialQuery({
mapStateJSON,
appState = {},
@ -27,6 +23,6 @@ export function getInitialQuery({
return {
query: '',
language: userQueryLanguage || settings.get('search:queryLanguage')
language: userQueryLanguage || 'kuery'
};
}

View file

@ -9,7 +9,6 @@ import React from 'react';
import { I18nContext } from 'ui/i18n';
import { render, unmountComponentAtNode } from 'react-dom';
import { uiModules } from 'ui/modules';
import { applyTheme } from 'ui/theme';
import { timefilter } from 'ui/timefilter';
import { Provider } from 'react-redux';
import { getStore } from '../store/store';
@ -22,7 +21,6 @@ import {
setQuery,
} from '../actions/store_actions';
import {
getIsDarkTheme,
enableFullScreen,
getIsFullScreen,
updateFlyout,
@ -33,7 +31,6 @@ import { Inspector } from 'ui/inspector';
import { inspectorAdapters, indexPatternService } from '../kibana_services';
import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_save_modal';
import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
import { showOptionsPopover } from '../components/top_nav/show_options_popover';
import { toastNotifications } from 'ui/notify';
import { getInitialLayers } from './get_initial_layers';
import { getInitialQuery } from './get_initial_query';
@ -48,7 +45,6 @@ const app = uiModules.get('app/maps', []);
app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage, AppState, globalState) => {
const savedMap = $scope.map = $route.current.locals.map;
let isDarkTheme;
let unsubscribe;
inspectorAdapters.requests.reset();
@ -177,14 +173,6 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
$scope.isFullScreen = false;
function handleStoreChanges(store) {
const state = store.getState();
// theme changes must triggered in digest cycle because top nav is still angular
if (isDarkTheme !== getIsDarkTheme(state)) {
isDarkTheme = getIsDarkTheme(state);
updateTheme();
}
const nextIsFullScreen = getIsFullScreen(store.getState());
if (nextIsFullScreen !== $scope.isFullScreen) {
// Must trigger digest cycle for angular top nav to redraw itself when isFullScreen changes
@ -269,13 +257,6 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
run() {
Inspector.open(inspectorAdapters, {});
}
}, {
key: 'options',
description: 'Options',
testId: 'optionsButton',
run: async (menuItem, navController, anchorElement) => {
showOptionsPopover(anchorElement);
}
}, {
key: 'save',
description: 'Save map',
@ -310,22 +291,4 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
showSaveModal(saveModal);
}
}];
function updateTheme() {
$scope.$evalAsync(() => {
isDarkTheme ? setDarkTheme() : setLightTheme();
});
}
function setDarkTheme() {
chrome.removeApplicationClass(['theme-light']);
chrome.addApplicationClass('theme-dark');
applyTheme('dark');
}
function setLightTheme() {
chrome.removeApplicationClass(['theme-dark']);
chrome.addApplicationClass('theme-light');
applyTheme('light');
}
});

View file

@ -17,7 +17,6 @@ import {
getRefreshConfig,
getQuery,
} from '../../selectors/map_selectors';
import { getIsDarkTheme } from '../../store/ui';
import { convertMapExtentToPolygon } from '../../elasticsearch_geo_utils';
const module = uiModules.get('app/maps');
@ -84,9 +83,7 @@ module.factory('SavedGisMap', function (Private) {
query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
});
this.uiStateJSON = JSON.stringify({
isDarkMode: getIsDarkTheme(state),
});
this.uiStateJSON = JSON.stringify({});
this.bounds = convertMapExtentToPolygon(getMapExtent(state));
};

View file

@ -1,40 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import {
EuiForm,
EuiFormRow,
EuiSwitch,
} from '@elastic/eui';
export function OptionsMenu({ isDarkTheme, onDarkThemeChange }) {
const handleDarkThemeChange = (evt) => {
onDarkThemeChange(evt.target.checked);
};
return (
<EuiForm
data-test-subj="gisOptionsMenu"
>
<EuiFormRow>
<EuiSwitch
label="Use dark theme"
checked={isDarkTheme}
onChange={handleDarkThemeChange}
/>
</EuiFormRow>
</EuiForm>
);
}
OptionsMenu.propTypes = {
isDarkTheme: PropTypes.bool.isRequired,
onDarkThemeChange: PropTypes.func.isRequired,
};

View file

@ -1,26 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { connect } from 'react-redux';
import { getIsDarkTheme, updateIsDarkTheme } from '../../store/ui';
import { OptionsMenu } from './options_menu';
function mapStateToProps(state = {}) {
return {
isDarkTheme: getIsDarkTheme(state),
};
}
function mapDispatchToProps(dispatch) {
return {
onDarkThemeChange: (isDarkTheme) => {
dispatch(updateIsDarkTheme(isDarkTheme));
},
};
}
const connectedOptionsMenu = connect(mapStateToProps, mapDispatchToProps)(OptionsMenu);
export { connectedOptionsMenu as OptionsMenu };

View file

@ -1,53 +0,0 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { OptionsMenu } from './options_menu_container';
import { getStore } from '../../store/store';
import {
EuiWrappingPopover,
} from '@elastic/eui';
let isOpen = false;
const container = document.createElement('div');
const onClose = () => {
ReactDOM.unmountComponentAtNode(container);
isOpen = false;
};
export async function showOptionsPopover(anchorElement) {
if (isOpen) {
onClose();
return;
}
isOpen = true;
const store = await getStore();
document.body.appendChild(container);
const element = (
<Provider store={store}>
<EuiWrappingPopover
className="navbar__popover"
id="popover"
button={anchorElement}
isOpen={true}
closePopover={onClose}
>
<OptionsMenu/>
</EuiWrappingPopover>
</Provider>
);
ReactDOM.render(element, container);
}

View file

@ -11,7 +11,6 @@ import { RESET_LAYER_LOAD } from '../actions/ui_actions';
export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
export const UPDATE_IS_DARK_THEME = 'UPDATE_IS_DARK_THEME';
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
export const FLYOUT_STATE = {
NONE: 'NONE',
@ -26,7 +25,6 @@ export const LAYER_LOAD_STATE = {
const INITIAL_STATE = {
flyoutDisplay: FLYOUT_STATE.NONE,
isDarkTheme: false,
layerLoad: {
status: LAYER_LOAD_STATE.inactive,
time: Date()
@ -48,8 +46,6 @@ function ui(state = INITIAL_STATE, action) {
time: Date() } };
case UPDATE_FLYOUT:
return { ...state, flyoutDisplay: action.display };
case UPDATE_IS_DARK_THEME:
return { ...state, isDarkTheme: action.isDarkTheme };
case CLOSE_SET_VIEW:
return { ...state, isSetViewOpen: false };
case OPEN_SET_VIEW:
@ -78,12 +74,6 @@ export function openSetView() {
type: OPEN_SET_VIEW,
};
}
export function updateIsDarkTheme(isDarkTheme) {
return {
type: UPDATE_IS_DARK_THEME,
isDarkTheme
};
}
export function exitFullScreen() {
return {
type: SET_FULL_SCREEN,
@ -100,7 +90,6 @@ export function enableFullScreen() {
// Selectors
export const getFlyoutDisplay = ({ ui }) => ui && ui.flyoutDisplay
|| INITIAL_STATE.flyoutDisplay;
export const getIsDarkTheme = ({ ui }) => _.get(ui, 'isDarkTheme', INITIAL_STATE.isDarkTheme);
export const getIsSetViewOpen = ({ ui }) => _.get(ui, 'isSetViewOpen', false);
export const getIsFullScreen = ({ ui }) => _.get(ui, 'isFullScreen', false);