diff --git a/CHANGELOG.md b/CHANGELOG.md index 282baefa8132..68ec68d26e0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) * [Multi DataSource] Add experimental callout for index pattern section ([#2523](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2523)) * [Multi DataSource] Add data source config to opensearch-dashboards-docker ([#2557](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2557)) * [Multi DataSource] Make text content dynamically translated & update unit tests ([#2570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2570)) +* [Vis Builder] Change classname prefix wiz to vb ([#2581](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2581/files)) ### 🐛 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/wizard/public/application/_variables.scss b/src/plugins/wizard/public/application/_variables.scss index da530e2e46a4..e72314b3a3bc 100644 --- a/src/plugins/wizard/public/application/_variables.scss +++ b/src/plugins/wizard/public/application/_variables.scss @@ -6,4 +6,4 @@ @import "@elastic/eui/src/global_styling/variables/form"; $osdHeaderOffset: $euiHeaderHeightCompensation; -$wizLeftNavWidth: 462px; +$vbLeftNavWidth: 462px; diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss index f4a73eb3ecd4..7e1a0b12ada9 100644 --- a/src/plugins/wizard/public/application/app.scss +++ b/src/plugins/wizard/public/application/app.scss @@ -4,12 +4,12 @@ */ @import "variables"; -.wizLayout { +.vbLayout { padding: 0; display: grid; grid-template: "topNav topNav" min-content - "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr; + "leftNav workspaceNav" 1fr / #{$vbLeftNavWidth} 1fr; height: calc(100vh - #{$osdHeaderOffset}); &__resizeContainer { @@ -22,6 +22,6 @@ } } -.headerIsExpanded .wizLayout { +.headerIsExpanded .vbLayout { height: calc(100vh - #{$osdHeaderOffset * 2}); } diff --git a/src/plugins/wizard/public/application/app.tsx b/src/plugins/wizard/public/application/app.tsx index 52a0f537646e..bdf6936ee969 100644 --- a/src/plugins/wizard/public/application/app.tsx +++ b/src/plugins/wizard/public/application/app.tsx @@ -18,14 +18,14 @@ export const WizardApp = () => { return ( - + - + {(EuiResizablePanel, EuiResizableButton) => ( <> { > - + { position: 'top', }, ]} - id="wizRightResize" + id="vbRightResize" > diff --git a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss index 0ba8c29bdc56..ba5ee2e401cb 100644 --- a/src/plugins/wizard/public/application/components/data_tab/config_panel.scss +++ b/src/plugins/wizard/public/application/components/data_tab/config_panel.scss @@ -2,7 +2,7 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.wizConfig { +.vbConfig { @include euiYScrollWithShadows; background: $euiColorLightestShade; @@ -42,7 +42,7 @@ } } - &.showSecondary > .wizConfig__section { + &.showSecondary > .vbConfig__section { transform: translateX(-100%); } } diff --git a/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx index be0ec12bbff2..ec3b6b60a096 100644 --- a/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/config_panel.tsx @@ -23,8 +23,8 @@ export function ConfigPanel() { const mainPanel = mapSchemaToAggPanel(schemas); return ( - -
{mainPanel}
+ +
{mainPanel}
); diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector.scss b/src/plugins/wizard/public/application/components/data_tab/field_selector.scss index b9b75a8a260d..88cca98db86e 100644 --- a/src/plugins/wizard/public/application/components/data_tab/field_selector.scss +++ b/src/plugins/wizard/public/application/components/data_tab/field_selector.scss @@ -4,7 +4,7 @@ */ @import "../../util"; -.wizFieldSelector { +.vbFieldSelector { @include scrollNavParent(auto 1fr); padding: $euiSizeS; diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx index da1020413b26..6d3831363c1b 100644 --- a/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/field_selector.tsx @@ -66,13 +66,13 @@ export const FieldSelector = () => { ); return ( -
+
-
+
{/* Count Field */} ( {header} diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss index a7f093ad22a1..c129f7a997a1 100644 --- a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss +++ b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.scss @@ -2,7 +2,7 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.wizFieldSelectorField { +.vbFieldSelectorField { @include euiBottomShadowSmall; background-color: $euiColorEmptyShade; diff --git a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx index 10acd5aa62f3..a87e2d184eed 100644 --- a/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/field_selector_field.tsx @@ -65,7 +65,7 @@ export const FieldSelectorField = ({ field }: FieldSelectorFieldProps) => { {wrapOnDot(field.displayName)} @@ -73,7 +73,7 @@ export const FieldSelectorField = ({ field }: FieldSelectorFieldProps) => { return ( { return ( -
+
diff --git a/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx b/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx index 37c55e25be99..518a6ae7af2f 100644 --- a/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/schema_to_dropbox.tsx @@ -16,7 +16,7 @@ export const mapSchemaToAggPanel = (schemas: Schemas) => { return ( <> - <div className="wizConfig__content">{panelComponents}</div> + <div className="vbConfig__content">{panelComponents}</div> </> ); }; diff --git a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx index 086140bdb13a..f7e160bb1b54 100644 --- a/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/secondary_panel.tsx @@ -95,11 +95,11 @@ export function SecondaryPanel() { ); return ( - <div className="wizConfig__section wizConfig--secondary"> + <div className="vbConfig__section vbConfig--secondary"> <Title title={selectedSchema?.title ?? 'Edit'} isSecondary closeMenu={closeMenu} /> {showAggParamEditor && ( <DefaultEditorAggParams - className="wizConfig__aggEditor" + className="vbConfig__aggEditor" agg={aggConfig!} indexPattern={indexPattern!} setValidity={handleSetValid} diff --git a/src/plugins/wizard/public/application/components/data_tab/title.tsx b/src/plugins/wizard/public/application/components/data_tab/title.tsx index 8083efd05b0b..0d50aad0fb47 100644 --- a/src/plugins/wizard/public/application/components/data_tab/title.tsx +++ b/src/plugins/wizard/public/application/components/data_tab/title.tsx @@ -23,7 +23,7 @@ export const Title = ({ title, isSecondary, closeMenu }: TitleProps) => { ); return ( <> - <div className="wizConfig__title"> + <div className="vbConfig__title"> <EuiFlexGroup gutterSize="s" alignItems="center"> {icon && <EuiFlexItem grow={false}>{icon}</EuiFlexItem>} <EuiFlexItem> diff --git a/src/plugins/wizard/public/application/components/left_nav.tsx b/src/plugins/wizard/public/application/components/left_nav.tsx index 2825d9778744..a4aa72bcff06 100644 --- a/src/plugins/wizard/public/application/components/left_nav.tsx +++ b/src/plugins/wizard/public/application/components/left_nav.tsx @@ -10,8 +10,8 @@ import { DataTab } from './data_tab'; export const LeftNav = () => { return ( - <section className="wizSidenav left"> - <div className="wizDatasourceSelect wizSidenav__header"> + <section className="vbSidenav left"> + <div className="vbDatasourceSelect vbSidenav__header"> <DataSourceSelect /> </div> <DataTab key="containerName" /> diff --git a/src/plugins/wizard/public/application/components/option.scss b/src/plugins/wizard/public/application/components/option.scss index 8bb394c260e8..7410489ad0b7 100644 --- a/src/plugins/wizard/public/application/components/option.scss +++ b/src/plugins/wizard/public/application/components/option.scss @@ -1,4 +1,4 @@ -.wizOption { +.vbOption { background-color: $euiColorEmptyShade; padding: $euiSizeM; diff --git a/src/plugins/wizard/public/application/components/option.tsx b/src/plugins/wizard/public/application/components/option.tsx index 7440bb0825c0..0f1f79c7ecbd 100644 --- a/src/plugins/wizard/public/application/components/option.tsx +++ b/src/plugins/wizard/public/application/components/option.tsx @@ -18,11 +18,11 @@ export const Option: FC<Props> = ({ title, children, initialIsOpen = false }) => <EuiAccordion id={title} buttonContent={title} - className="wizOption" + className="vbOption" initialIsOpen={initialIsOpen} > <EuiSpacer size="s" /> - <EuiPanel color="subdued" className="wizOption__panel"> + <EuiPanel color="subdued" className="vbOption__panel"> {children} </EuiPanel> </EuiAccordion> diff --git a/src/plugins/wizard/public/application/components/right_nav.tsx b/src/plugins/wizard/public/application/components/right_nav.tsx index ea7c3e17eab6..74a88b3ab534 100644 --- a/src/plugins/wizard/public/application/components/right_nav.tsx +++ b/src/plugins/wizard/public/application/components/right_nav.tsx @@ -36,8 +36,8 @@ export const RightNav = () => { })); return ( - <section className="wizSidenav right"> - <div className="wizSidenav__header"> + <section className="vbSidenav right"> + <div className="vbSidenav__header"> <EuiSuperSelect options={options} valueOfSelected={activeVisName} @@ -48,7 +48,7 @@ export const RightNav = () => { data-test-subj="chartPicker" /> </div> - <div className="wizSidenav__style"> + <div className="vbSidenav__style"> <StyleSection /> </div> {newVisType && ( @@ -90,7 +90,7 @@ export const RightNav = () => { const OptionItem = ({ icon, title }: { icon: IconType; title: string }) => ( <> - <EuiIcon type={icon} className="wizTypeSelector__icon" /> + <EuiIcon type={icon} className="vbTypeSelector__icon" /> <span>{title}</span> </> ); diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.scss b/src/plugins/wizard/public/application/components/searchable_dropdown.scss index be8d6144df3a..4de43233d1ef 100644 --- a/src/plugins/wizard/public/application/components/searchable_dropdown.scss +++ b/src/plugins/wizard/public/application/components/searchable_dropdown.scss @@ -22,7 +22,7 @@ } &--fixedWidthChild { - width: calc(#{$wizLeftNavWidth} - #{$euiSizeXL} * 2); + width: calc(#{$vbLeftNavWidth} - #{$euiSizeXL} * 2); } &--selectableWrapper .euiSelectableList { diff --git a/src/plugins/wizard/public/application/components/searchable_dropdown.tsx b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx index 3ff8300e8d48..36d926457da3 100644 --- a/src/plugins/wizard/public/application/components/searchable_dropdown.tsx +++ b/src/plugins/wizard/public/application/components/searchable_dropdown.tsx @@ -107,7 +107,7 @@ export const SearchableDropdown = ({ displayError(error) ) : ( <> - <EuiPopoverTitle paddingSize="s" className="wizPopoverTitle"> + <EuiPopoverTitle paddingSize="s" className="vbPopoverTitle"> {search} </EuiPopoverTitle> {list} diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss index 025e42d08170..1a69071a697e 100644 --- a/src/plugins/wizard/public/application/components/side_nav.scss +++ b/src/plugins/wizard/public/application/components/side_nav.scss @@ -5,7 +5,7 @@ @import "../util"; @import "../variables"; -.wizSidenav { +.vbSidenav { @include scrollNavParent(auto 1fr); &.left { @@ -30,11 +30,11 @@ } } -.wizTypeSelector__icon { +.vbTypeSelector__icon { margin-right: $euiSizeS; } -.wizSidenavTabs { +.vbSidenavTabs { .euiTab__content { text-transform: capitalize; } @@ -46,6 +46,6 @@ } } -.wizDatasourceSelect { - max-width: calc(#{$wizLeftNavWidth} - 1px); +.vbDatasourceSelect { + max-width: calc(#{$vbLeftNavWidth} - 1px); } diff --git a/src/plugins/wizard/public/application/components/top_nav.scss b/src/plugins/wizard/public/application/components/top_nav.scss index cad0e3eebee2..36349ed8cdba 100644 --- a/src/plugins/wizard/public/application/components/top_nav.scss +++ b/src/plugins/wizard/public/application/components/top_nav.scss @@ -2,7 +2,7 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.wizTopNav { +.vbTopNav { grid-area: topNav; border-bottom: $euiBorderThin; } diff --git a/src/plugins/wizard/public/application/components/top_nav.tsx b/src/plugins/wizard/public/application/components/top_nav.tsx index 470babdf782f..ab23aa563e91 100644 --- a/src/plugins/wizard/public/application/components/top_nav.tsx +++ b/src/plugins/wizard/public/application/components/top_nav.tsx @@ -69,7 +69,7 @@ export const TopNav = () => { }); return ( - <div className="wizTopNav"> + <div className="vbTopNav"> <TopNavMenu appName={PLUGIN_ID} config={config} diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss index 9e4d79faa278..c06e60607665 100644 --- a/src/plugins/wizard/public/application/components/workspace.scss +++ b/src/plugins/wizard/public/application/components/workspace.scss @@ -8,7 +8,7 @@ $animation-multiplier: 5; $total-duartion: $animation-time * $animation-multiplier; $keyframe-multiplier: 1 / $animation-multiplier; -.wizWorkspace { +.vbWorkspace { display: grid; -ms-grid-rows: auto $euiSizeM 1fr; grid-template-rows: auto 1fr; @@ -27,19 +27,19 @@ $keyframe-multiplier: 1 / $animation-multiplier; } &__handFieldSvg { - animation: wizDragAnimation #{$total-duartion}s ease-in-out infinite forwards; + animation: vbDragAnimation #{$total-duartion}s ease-in-out infinite forwards; position: absolute; top: 34.5%; } } @media (prefers-reduced-motion) { - .wizWorkspace__handFieldSvg { + .vbWorkspace__handFieldSvg { animation: none; } } -@keyframes wizDragAnimation { +@keyframes vbDragAnimation { 0% { transform: none; } diff --git a/src/plugins/wizard/public/application/components/workspace.tsx b/src/plugins/wizard/public/application/components/workspace.tsx index 1aa58a272dff..470e9c05dbb8 100644 --- a/src/plugins/wizard/public/application/components/workspace.tsx +++ b/src/plugins/wizard/public/application/components/workspace.tsx @@ -72,13 +72,13 @@ export const Workspace: FC = ({ children }) => { }, [data.query.state$]); return ( - <section className="wizWorkspace"> - <EuiFlexGroup className="wizCanvasControls"> + <section className="vbWorkspace"> + <EuiFlexGroup className="vbCanvasControls"> <EuiFlexItem> <ExperimentalInfo /> </EuiFlexItem> </EuiFlexGroup> - <EuiPanel className="wizCanvas" data-test-subj="visualizationLoader"> + <EuiPanel className="vbCanvas" data-test-subj="visualizationLoader"> {expression ? ( <ReactExpressionRenderer expression={expression} @@ -86,16 +86,16 @@ export const Workspace: FC = ({ children }) => { uiState={uiState} /> ) : ( - <EuiFlexItem className="wizWorkspace__empty" data-test-subj="emptyWorkspace"> + <EuiFlexItem className="vbWorkspace__empty" data-test-subj="emptyWorkspace"> <EuiEmptyPrompt title={<h2>Add a field to start</h2>} body={ <> <p>Drag a field to the configuration panel to generate a visualization.</p> - <span className="wizWorkspace__container"> - <EuiIcon className="wizWorkspace__fieldSvg" type={fields_bg} size="original" /> + <span className="vbWorkspace__container"> + <EuiIcon className="vbWorkspace__fieldSvg" type={fields_bg} size="original" /> <EuiIcon - className="wizWorkspace__handFieldSvg" + className="vbWorkspace__handFieldSvg" type={hand_field} size="original" /> diff --git a/src/plugins/wizard/public/embeddable/disabled_visualization.scss b/src/plugins/wizard/public/embeddable/disabled_visualization.scss index 792bb1777ad6..825ff4d73223 100644 --- a/src/plugins/wizard/public/embeddable/disabled_visualization.scss +++ b/src/plugins/wizard/public/embeddable/disabled_visualization.scss @@ -2,7 +2,7 @@ * Copyright OpenSearch Contributors * SPDX-License-Identifier: Apache-2.0 */ -.wizDisabledVisualization { +.vbDisabledVisualization { width: 100%; display: grid; grid-gap: $euiSize; diff --git a/src/plugins/wizard/public/embeddable/disabled_visualization.tsx b/src/plugins/wizard/public/embeddable/disabled_visualization.tsx index 04b8bf234541..7391589dd01d 100644 --- a/src/plugins/wizard/public/embeddable/disabled_visualization.tsx +++ b/src/plugins/wizard/public/embeddable/disabled_visualization.tsx @@ -11,7 +11,7 @@ import './disabled_visualization.scss'; export function DisabledVisualization({ title }: { title: string }) { return ( - <div className="wizDisabledVisualization"> + <div className="vbDisabledVisualization"> <EuiIcon type="beaker" size="xl" /> <div> <FormattedMessage