Use feature flag mixin

As opposed to accessing window object directly

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -9,6 +9,7 @@ import { ACTIVE_DISCUSSION_SOURCE_TYPES } from '../constants';
 import DesignDiscussion from './design_notes/design_discussion.vue';
 import Participants from '~/sidebar/components/participants/participants.vue';
 import TodoButton from '~/vue_shared/components/todo_button.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -19,6 +20,7 @@ export default {
     GlPopover,
     TodoButton,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     design: {
       type: Object,
@@ -62,7 +64,12 @@ export default {
       return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
     },
     showTodoButton() {
-      return gon.features?.designManagementTodoButton;
+      return this.glFeatures.designManagementTodoButton;
+    },
+    sidebarWrapperClass() {
+      return {
+        'gl-pt-0': this.showTodoButton,
+      };
     },
   },
   watch: {
@@ -106,7 +113,7 @@ export default {
 </script>
 
 <template>
-  <div class="image-notes" :class="{ 'gl-pt-0': showTodoButton }" @click="handleSidebarClick">
+  <div class="image-notes" :class="sidebarWrapperClass" @click="handleSidebarClick">
     <div
       v-if="showTodoButton"
       class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -43,7 +43,7 @@ describe('Design management design sidebar component', () => {
   const findNewDiscussionDisclaimer = () =>
     wrapper.find('[data-testid="new-discussion-disclaimer"]');
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, { enableTodoButton } = {}) {
     wrapper = shallowMount(DesignSidebar, {
       propsData: {
         design,
@@ -58,6 +58,9 @@ describe('Design management design sidebar component', () => {
         },
       },
       stubs: { GlPopover },
+      provide: {
+        glFeatures: { designManagementTodoButton: enableTodoButton },
+      },
     });
   }
 
@@ -250,12 +253,7 @@ describe('Design management design sidebar component', () => {
 
   describe('when `design_management_todo_button` feature flag is enabled', () => {
     beforeEach(() => {
-      window.gon = {
-        features: {
-          designManagementTodoButton: true,
-        },
-      };
-      createComponent();
+      createComponent({}, { enableTodoButton: true });
     });
 
     it('renders sidebar root element with no top padding', () => {