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

Use GlSegmentedControl in favor of GlButtonGroup in Policy Description

See merge request gitlab-org/gitlab!81278

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_editor_layout.vue

 <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">

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_layout_spec.js

-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]]);