Commit 20c28d32 authored by Miguel Rincon's avatar Miguel Rincon

Merge branch '348107-deprecate-segmented-control' into 'master'

Use GlSegmentedControl in favor of GlButtonGroup in Policy Description

See merge request gitlab-org/gitlab!81278
parents f38c1224 4f5a1079
<script>
import {
GlButton,
GlModal,
GlModalDirective,
GlSegmentedControl,
GlTooltipDirective,
} from '@gitlab/ui';
import { GlButtonGroup, GlButton, GlModal, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { DELETE_MODAL_CONFIG, EDITOR_MODES, EDITOR_MODE_RULE, EDITOR_MODE_YAML } from './constants';
......@@ -16,7 +10,7 @@ export default {
components: {
GlButton,
GlModal,
GlSegmentedControl,
GlButtonGroup,
PolicyYamlEditor: () =>
import(/* webpackChunkName: 'policy_yaml_editor' */ '../policy_yaml_editor.vue'),
},
......@@ -128,11 +122,18 @@ export default {
<section class="gl-mt-6">
<div class="gl-mb-5">
<div class="gl-border-b-solid gl-border-b-1 gl-border-gray-100 gl-mb-6 gl-pb-6">
<gl-segmented-control
:options="editorModes"
:checked="selectedEditorMode"
@input="updateEditorMode"
/>
<gl-button-group :vertical="false">
<gl-button
v-for="{ text, value } in editorModes"
:key="value"
:data-testid="`button-${value}`"
:selected="selectedEditorMode === value"
type="button"
@click="updateEditorMode(value)"
>
{{ text }}
</gl-button>
</gl-button-group>
</div>
<div class="gl-display-flex gl-sm-flex-direction-column">
<section class="gl-w-full gl-mr-7">
......
import { GlModal, GlSegmentedControl } from '@gitlab/ui';
import { nextTick } from 'vue';
import { GlModal, GlButtonGroup } from '@gitlab/ui';
import { EDITOR_MODE_YAML } from 'ee/threat_monitoring/components/policy_editor/constants';
import PolicyEditorLayout from 'ee/threat_monitoring/components/policy_editor/policy_editor_layout.vue';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......@@ -26,7 +27,7 @@ describe('PolicyEditorLayout component', () => {
const findDeletePolicyButton = () => wrapper.findByTestId('delete-policy');
const findDeletePolicyModal = () => wrapper.findComponent(GlModal);
const findEditorModeToggle = () => wrapper.findComponent(GlSegmentedControl);
const findEditorModeToggle = () => wrapper.findComponent(GlButtonGroup);
const findYamlModeSection = () => wrapper.findByTestId('policy-yaml-editor');
const findRuleModeSection = () => wrapper.findByTestId('rule-editor');
const findRuleModePreviewSection = () => wrapper.findByTestId('rule-editor-preview');
......@@ -67,7 +68,8 @@ describe('PolicyEditorLayout component', () => {
it('mode changes appropriately when new mode is selected', async () => {
expect(findRuleModeSection().exists()).toBe(true);
expect(findYamlModeSection().exists()).toBe(false);
await findEditorModeToggle().vm.$emit('input', EDITOR_MODE_YAML);
wrapper.findByTestId('button-yaml').vm.$emit('click');
await nextTick();
expect(findRuleModeSection().exists()).toBe(false);
expect(findYamlModeSection().exists()).toBe(true);
expect(wrapper.emitted('update-editor-mode')).toStrictEqual([[EDITOR_MODE_YAML]]);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment