Create expandable container component (!40639) · Merge requests · GitLab.org / GitLab

Mark Florian requested to merge 233521-create-expandable-container-component into master Aug 27, 2020

What does this MR do?

Adds an ExpandableSection component, for #233521 (closed), part of &3635 (closed).

It may be worth extracting this to GitLab UI in a future iteration. For now, it exists only in the SAST Configuration subdirectory. This was discussed previously.

Screenshot/Video

As this component isn't consumed anywhere, this screenshot was created by applying this patch and taking a screenshot of that.

Patch to consume component for screenshot

diff --git b/ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue a/ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue
index e83bf0af4c6..3a2fc316a25 100644
--- b/ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue
+++ a/ee/app/assets/javascripts/security_configuration/sast/components/configuration_form.vue
@@ -1,18 +1,22 @@
 <script>
-import { GlAlert, GlButton } from '@gitlab/ui';
+import { GlAlert, GlButton, GlIcon, GlLink } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { cloneDeep } from 'lodash';
 import { __, s__ } from '~/locale';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import DynamicFields from './dynamic_fields.vue';
+import ExpandableSection from './expandable_section.vue';
 import { isValidConfigurationEntity } from './utils';
 
 export default {
   components: {
     DynamicFields,
+    ExpandableSection,
     GlAlert,
     GlButton,
+    GlIcon,
+    GlLink,
   },
   inject: {
     createSastMergeRequestPath: {
@@ -68,6 +72,11 @@ export default {
     },
   },
   i18n: {
+    analyzerSubheading: s__(
+      `SecurityConfiguration|By default, analyzers are applied in order to cover
+      all languages across your project, and only run if the language is detected
+      in the MR.`,
+    ),
     submissionError: s__(
       'SecurityConfiguration|An error occurred while creating the merge request.',
     ),
@@ -81,7 +90,22 @@ export default {
   <form @submit.prevent="onSubmit">
     <dynamic-fields v-model="formEntities" />
 
-    <hr />
+    <expandable-section class="gl-mb-6">
+      <template #heading>
+        {{ s__('SecurityConfiguration|SAST Analyzers') }}
+        <gl-link
+          target="_blank"
+          href="sastDocumentationPath"
+          :aria-label="s__('SecurityConfiguration|SAST Analyzers help')"
+        >
+          <gl-icon name="question" class="gl-vertical-align-baseline!" />
+        </gl-link>
+      </template>
+
+      <template #subheading>{{ $options.i18n.analyzerSubheading }}</template>
+
+      {{ $options.i18n.analyzerSubheading }}
+    </expandable-section>
 
     <gl-alert v-if="hasSubmissionError" class="gl-mb-5" variant="danger" :dismissible="false">{{
       $options.i18n.submissionError