Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/operation_settings/components/external_dashboard.vue

 <script>
 import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+import initSettingsPanels from '~/settings_panels';
 
 export default {
   components: {
@@ -19,15 +20,19 @@ export default {
       required: true,
     },
   },
+  mounted() {
+    initSettingsPanels();
+  },
 };
 </script>
 
 <template>
-  <section class="settings expanded">
+  <section class="settings no-animate">
     <div class="settings-header">
       <h4 class="js-section-header">
         {{ s__('ExternalMetrics|External Dashboard') }}
       </h4>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{
           s__(

changelogs/unreleased/api_make_protected_boolean_type.yml

+---
+title: 'API: change protected attribute type to Boolean'
+merge_request: 28766
+author:
+type: other

lib/api/variables.rb

@@ -54,7 +54,7 @@ module API
       params do
         requires :key, type: String, desc: 'The key of the variable'
         requires :value, type: String, desc: 'The value of the variable'
-        optional :protected, type: String, desc: 'Whether the variable is protected'
+        optional :protected, type: Boolean, desc: 'Whether the variable is protected'
         optional :masked, type: Boolean, desc: 'Whether the variable is masked'
         optional :variable_type, type: String, values: Ci::Variable.variable_types.keys, desc: 'The type of variable, must be one of env_var or file. Defaults to env_var'
 
@@ -81,7 +81,7 @@ module API
       params do
         optional :key, type: String, desc: 'The key of the variable'
         optional :value, type: String, desc: 'The value of the variable'
-        optional :protected, type: String, desc: 'Whether the variable is protected'
+        optional :protected, type: Boolean, desc: 'Whether the variable is protected'
         optional :masked, type: Boolean, desc: 'Whether the variable is masked'
         optional :variable_type, type: String, values: Ci::Variable.variable_types.keys, desc: 'The type of variable, must be one of env_var or file'
 

spec/frontend/operation_settings/components/external_dashboard_spec.js

@@ -2,6 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
 import { TEST_HOST } from 'helpers/test_constants';
+import initSettingsPanels from '~/settings_panels';
+
+jest.mock('~/settings_panels');
 
 describe('operation settings external dashboard component', () => {
   let wrapper;
@@ -21,6 +24,18 @@ describe('operation settings external dashboard component', () => {
     expect(wrapper.find('.js-section-header').text()).toBe('External Dashboard');
   });
 
+  describe('expand/collapse button', () => {
+    it('is properly instantiated as a settings panel', () => {
+      expect(initSettingsPanels).toHaveBeenCalled();
+    });
+
+    it('defaults to collapsed state', () => {
+      const button = wrapper.find(GlButton);
+
+      expect(button.text()).toBe('Expand');
+    });
+  });
+
   describe('sub-header', () => {
     let subHeader;