From fca2f5448f2f59b8f361cec9d86dcc9247ec1643 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 21 Oct 2022 19:33:42 +0000 Subject: [PATCH 1/3] Rename wizard on save modal and visualization table Change the wizard reference in save modal title, toggle and visualization table Signed-off-by: abbyhu2000 --- CHANGELOG.md | 1 + .../save_modal/saved_object_save_modal.scss | 10 +++++++ .../save_modal/saved_object_save_modal.tsx | 26 +++++++++++++++++++ .../saved_object_save_modal_origin.tsx | 2 ++ src/plugins/vis_builder/common/index.ts | 2 ++ .../application/utils/get_top_nav_config.tsx | 5 ++-- src/plugins/vis_builder/public/plugin.ts | 10 +++++-- .../visualizations/metric/metric_viz_type.ts | 2 ++ .../vislib/area/area_vis_type.ts | 2 ++ .../vislib/histogram/histogram_vis_type.ts | 2 ++ .../vislib/line/line_vis_type.ts | 2 ++ .../components/visualize_listing.scss | 2 +- .../application/utils/get_table_columns.tsx | 5 +++- .../functional/apps/visualize/_chart_types.ts | 2 +- 14 files changed, 66 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 11f4301d9409..d99945a69405 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [Multi DataSource] Address UX comments on Data source list and create page ([#2625](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2625)) - [Vis Builder] Rename wizard to visBuilder in i18n id and formatted message id ([#2635](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2635)) - [Vis Builder] Rename wizard to visBuilder in class name, type name and function name ([#2639](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2639)) +- [Vis Builder] Rename wizard on save modal and visualization table ([#2645](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2645)) ### 🐛 Bug Fixes diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss index 0310fc52d2fe..3758c2f827ae 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss @@ -1,3 +1,13 @@ .osdSavedObjectSaveModal { width: $euiSizeXXL * 10; } + +.osdSavedObjectSaveModalVisBuilder { + color: $euiTextSubduedColor; + font-size: $euiFontSizeM; +} + +.osdSavedObjectSaveModalBadge { + margin-left: $euiSizeS; + vertical-align: text-bottom; +} diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx index a78615311f19..b79f930bd2c6 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx @@ -45,6 +45,8 @@ import { EuiSwitch, EuiSwitchEvent, EuiTextArea, + EuiBadge, + EuiBetaBadge, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import React from 'react'; @@ -70,6 +72,7 @@ interface Props { options?: React.ReactNode | ((state: SaveModalState) => React.ReactNode); description?: string; showDescription: boolean; + isExperimental?: boolean; } export interface SaveModalState { @@ -111,6 +114,7 @@ export class SavedObjectSaveModal extends React.Component defaultMessage="Save {objectType}" values={{ objectType: this.props.objectType }} /> + {this.renderExperimentalBadge()} @@ -167,6 +171,28 @@ export class SavedObjectSaveModal extends React.Component ); } + private renderExperimentalBadge = () => { + if (!this.props.isExperimental) { + return; + } + + return ( + + + + + ); + }; + private renderViewDescription = () => { if (!this.props.showDescription) { return; diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx index 94810828fddb..46199f1fed97 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx @@ -50,6 +50,7 @@ interface OriginSaveModalProps { objectType: string; onClose: () => void; onSave: (props: OnSaveProps & { returnToOrigin: boolean }) => void; + isExperimental?: boolean; } export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) { @@ -125,6 +126,7 @@ export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) { options={getReturnToOriginSwitch} description={documentInfo.description} showDescription={true} + isExperimental={props.isExperimental} /> ); } diff --git a/src/plugins/vis_builder/common/index.ts b/src/plugins/vis_builder/common/index.ts index 7561c96c36d6..e88c231da7f2 100644 --- a/src/plugins/vis_builder/common/index.ts +++ b/src/plugins/vis_builder/common/index.ts @@ -6,7 +6,9 @@ export const PLUGIN_ID = 'wizard'; export const PLUGIN_NAME = 'Wizard'; export const VISUALIZE_ID = 'visualize'; +export const VIS_BUILDER_TYPE_SHORTHAND = 'VisBuilder'; export const EDIT_PATH = '/edit'; +export const VIS_BUILDER_STATE = 'experimental'; export { VisBuilderSavedObjectAttributes, diff --git a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx index 8867721d1184..16633715181a 100644 --- a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx +++ b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx @@ -39,7 +39,7 @@ import { import { VisBuilderServices } from '../..'; import { VisBuilderVisSavedObject } from '../../types'; import { AppDispatch } from './state_management'; -import { EDIT_PATH } from '../../../common'; +import { EDIT_PATH, VIS_BUILDER_STATE } from '../../../common'; import { setEditorState } from './state_management/metadata_slice'; export interface TopNavConfigParams { visualizationIdFromUrl: string; @@ -95,10 +95,11 @@ export const getTopNavConfig = ( dispatch, services )} - objectType={'wizard'} + objectType={'visualization'} onClose={() => {}} originatingApp={originatingApp} getAppNameFromId={stateTransfer.getAppNameFromId} + isExperimental={VIS_BUILDER_STATE === 'experimental' ? true : false} /> ); diff --git a/src/plugins/vis_builder/public/plugin.ts b/src/plugins/vis_builder/public/plugin.ts index 56006fcbd971..4113bf1c24fc 100644 --- a/src/plugins/vis_builder/public/plugin.ts +++ b/src/plugins/vis_builder/public/plugin.ts @@ -22,7 +22,13 @@ import { import { VisBuilderEmbeddableFactoryDefinition, VISBUILDER_EMBEDDABLE } from './embeddable'; import visBuilderIconSecondaryFill from './assets/wizard_icon_secondary_fill.svg'; import visBuilderIcon from './assets/wizard_icon.svg'; -import { EDIT_PATH, PLUGIN_ID, PLUGIN_NAME, VISBUILDER_SAVED_OBJECT } from '../common'; +import { + EDIT_PATH, + PLUGIN_ID, + PLUGIN_NAME, + VISBUILDER_SAVED_OBJECT, + VIS_BUILDER_TYPE_SHORTHAND, +} from '../common'; import { TypeService } from './services/type_service'; import { getPreloadedStore } from './application/utils/state_management'; import { @@ -134,7 +140,7 @@ export class VisBuilderPlugin savedObjectType: VISBUILDER_SAVED_OBJECT, stage: 'experimental', title: attributes?.title, - typeTitle: PLUGIN_NAME, + typeTitle: VIS_BUILDER_TYPE_SHORTHAND, updated_at: updatedAt, }), }, diff --git a/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts b/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts index ce85db45c51b..2aa31b8b8b6d 100644 --- a/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts +++ b/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts @@ -10,6 +10,7 @@ import { ColorModes, ColorSchemas } from '../../../../charts/public'; import { MetricVizOptions } from './components/metric_viz_options'; import { VisualizationTypeOptions } from '../../services/type_service'; import { toExpression } from './to_expression'; +import { VIS_BUILDER_STATE } from '../../../common'; export interface MetricOptionsDefaults { addTooltip: boolean; @@ -40,6 +41,7 @@ export const createMetricConfig = (): VisualizationTypeOptions { return ( Date: Wed, 26 Oct 2022 23:23:10 +0000 Subject: [PATCH 2/3] Save visualization on save modal, VisBuilder for chart type Signed-off-by: abbyhu2000 --- .../save_modal/saved_object_save_modal.scss | 10 ------- .../save_modal/saved_object_save_modal.tsx | 26 ------------------- .../saved_object_save_modal_origin.tsx | 2 -- src/plugins/vis_builder/common/index.ts | 2 +- .../application/utils/get_top_nav_config.tsx | 3 +-- src/plugins/vis_builder/public/plugin.ts | 4 +-- .../functional/apps/visualize/_chart_types.ts | 2 +- 7 files changed, 5 insertions(+), 44 deletions(-) diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss index 3758c2f827ae..0310fc52d2fe 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.scss @@ -1,13 +1,3 @@ .osdSavedObjectSaveModal { width: $euiSizeXXL * 10; } - -.osdSavedObjectSaveModalVisBuilder { - color: $euiTextSubduedColor; - font-size: $euiFontSizeM; -} - -.osdSavedObjectSaveModalBadge { - margin-left: $euiSizeS; - vertical-align: text-bottom; -} diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx index b79f930bd2c6..a78615311f19 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx @@ -45,8 +45,6 @@ import { EuiSwitch, EuiSwitchEvent, EuiTextArea, - EuiBadge, - EuiBetaBadge, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import React from 'react'; @@ -72,7 +70,6 @@ interface Props { options?: React.ReactNode | ((state: SaveModalState) => React.ReactNode); description?: string; showDescription: boolean; - isExperimental?: boolean; } export interface SaveModalState { @@ -114,7 +111,6 @@ export class SavedObjectSaveModal extends React.Component defaultMessage="Save {objectType}" values={{ objectType: this.props.objectType }} /> - {this.renderExperimentalBadge()} @@ -171,28 +167,6 @@ export class SavedObjectSaveModal extends React.Component ); } - private renderExperimentalBadge = () => { - if (!this.props.isExperimental) { - return; - } - - return ( - - - - - ); - }; - private renderViewDescription = () => { if (!this.props.showDescription) { return; diff --git a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx index 46199f1fed97..94810828fddb 100644 --- a/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx +++ b/src/plugins/saved_objects/public/save_modal/saved_object_save_modal_origin.tsx @@ -50,7 +50,6 @@ interface OriginSaveModalProps { objectType: string; onClose: () => void; onSave: (props: OnSaveProps & { returnToOrigin: boolean }) => void; - isExperimental?: boolean; } export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) { @@ -126,7 +125,6 @@ export function SavedObjectSaveModalOrigin(props: OriginSaveModalProps) { options={getReturnToOriginSwitch} description={documentInfo.description} showDescription={true} - isExperimental={props.isExperimental} /> ); } diff --git a/src/plugins/vis_builder/common/index.ts b/src/plugins/vis_builder/common/index.ts index e88c231da7f2..664a6b822df0 100644 --- a/src/plugins/vis_builder/common/index.ts +++ b/src/plugins/vis_builder/common/index.ts @@ -6,9 +6,9 @@ export const PLUGIN_ID = 'wizard'; export const PLUGIN_NAME = 'Wizard'; export const VISUALIZE_ID = 'visualize'; -export const VIS_BUILDER_TYPE_SHORTHAND = 'VisBuilder'; export const EDIT_PATH = '/edit'; export const VIS_BUILDER_STATE = 'experimental'; +export const VIS_BUILDER_CHART_TYPE = 'VisBuilder'; export { VisBuilderSavedObjectAttributes, diff --git a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx index 16633715181a..38b6f51e2f4f 100644 --- a/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx +++ b/src/plugins/vis_builder/public/application/utils/get_top_nav_config.tsx @@ -39,7 +39,7 @@ import { import { VisBuilderServices } from '../..'; import { VisBuilderVisSavedObject } from '../../types'; import { AppDispatch } from './state_management'; -import { EDIT_PATH, VIS_BUILDER_STATE } from '../../../common'; +import { EDIT_PATH } from '../../../common'; import { setEditorState } from './state_management/metadata_slice'; export interface TopNavConfigParams { visualizationIdFromUrl: string; @@ -99,7 +99,6 @@ export const getTopNavConfig = ( onClose={() => {}} originatingApp={originatingApp} getAppNameFromId={stateTransfer.getAppNameFromId} - isExperimental={VIS_BUILDER_STATE === 'experimental' ? true : false} /> ); diff --git a/src/plugins/vis_builder/public/plugin.ts b/src/plugins/vis_builder/public/plugin.ts index 4113bf1c24fc..11c5ec1a8e12 100644 --- a/src/plugins/vis_builder/public/plugin.ts +++ b/src/plugins/vis_builder/public/plugin.ts @@ -27,7 +27,7 @@ import { PLUGIN_ID, PLUGIN_NAME, VISBUILDER_SAVED_OBJECT, - VIS_BUILDER_TYPE_SHORTHAND, + VIS_BUILDER_CHART_TYPE, } from '../common'; import { TypeService } from './services/type_service'; import { getPreloadedStore } from './application/utils/state_management'; @@ -140,7 +140,7 @@ export class VisBuilderPlugin savedObjectType: VISBUILDER_SAVED_OBJECT, stage: 'experimental', title: attributes?.title, - typeTitle: VIS_BUILDER_TYPE_SHORTHAND, + typeTitle: VIS_BUILDER_CHART_TYPE, updated_at: updatedAt, }), }, diff --git a/test/functional/apps/visualize/_chart_types.ts b/test/functional/apps/visualize/_chart_types.ts index 2177c1ba21ef..63538541e813 100644 --- a/test/functional/apps/visualize/_chart_types.ts +++ b/test/functional/apps/visualize/_chart_types.ts @@ -65,7 +65,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { 'Timeline', 'Vega', 'Vertical Bar', - 'Visualization Builder', + 'Wizard', // TODO: Update to final name when ready ]; if (!isOss) { expectedChartTypes.push('Maps', 'Lens'); From 0f87e7b83e10ce1632bacc95833b2e5c29a468e8 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Thu, 27 Oct 2022 00:00:42 +0000 Subject: [PATCH 3/3] No experimental flag Signed-off-by: abbyhu2000 --- src/plugins/vis_builder/common/index.ts | 1 - .../vis_builder/public/visualizations/metric/metric_viz_type.ts | 2 -- .../public/visualizations/vislib/area/area_vis_type.ts | 2 -- .../visualizations/vislib/histogram/histogram_vis_type.ts | 2 -- .../public/visualizations/vislib/line/line_vis_type.ts | 2 -- 5 files changed, 9 deletions(-) diff --git a/src/plugins/vis_builder/common/index.ts b/src/plugins/vis_builder/common/index.ts index 664a6b822df0..d28c9b8fa58c 100644 --- a/src/plugins/vis_builder/common/index.ts +++ b/src/plugins/vis_builder/common/index.ts @@ -7,7 +7,6 @@ export const PLUGIN_ID = 'wizard'; export const PLUGIN_NAME = 'Wizard'; export const VISUALIZE_ID = 'visualize'; export const EDIT_PATH = '/edit'; -export const VIS_BUILDER_STATE = 'experimental'; export const VIS_BUILDER_CHART_TYPE = 'VisBuilder'; export { diff --git a/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts b/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts index 2aa31b8b8b6d..ce85db45c51b 100644 --- a/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts +++ b/src/plugins/vis_builder/public/visualizations/metric/metric_viz_type.ts @@ -10,7 +10,6 @@ import { ColorModes, ColorSchemas } from '../../../../charts/public'; import { MetricVizOptions } from './components/metric_viz_options'; import { VisualizationTypeOptions } from '../../services/type_service'; import { toExpression } from './to_expression'; -import { VIS_BUILDER_STATE } from '../../../common'; export interface MetricOptionsDefaults { addTooltip: boolean; @@ -41,7 +40,6 @@ export const createMetricConfig = (): VisualizationTypeOptions