From 46a9bfae9578e9bba31f1d7df17d3bb9c6fa1f52 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Fri, 21 Oct 2022 19:33:42 +0000 Subject: [PATCH] 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 | 43 ++++++++++++++++--- .../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 ++- 13 files changed, 77 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 31bcee4a2e9e..7dde802900fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,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 * [Vis Builder] Fixes auto bounds for timeseries bar chart visualization ([2401](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2401)) 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..0285110d5d7d 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; @@ -323,11 +349,18 @@ export class SavedObjectSaveModal extends React.Component checked={this.state.copyOnSave} onChange={this.onCopyOnSaveChange} label={ - +
+ + {this.props.objectType === 'Visualization (VisBuilder)' ? ( + {'Experimental'} + ) : ( + <> + )} +
} /> 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 4ab1f44e738e..bfae37fb43ee 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, }), }, }, 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 (