Merge branch 'feat-carousel-component-gitlab-ui-integration-test' into 'master'

Remove bootstrap-vue direct package install

See merge request gitlab-org/gitlab!24101

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

 <script>
-import { BCarousel, BCarouselSlide } from 'bootstrap-vue';
-import { GlNewButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlNewButton, GlTooltipDirective, GlCarousel, GlCarouselSlide } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import Tracking from '~/tracking';
 import securityDependencyImageUrl from 'ee_images/promotions/security-dependencies.png';
@@ -13,8 +12,8 @@ export default {
   },
   components: {
     GlNewButton,
-    BCarousel,
-    BCarouselSlide,
+    GlCarousel,
+    GlCarouselSlide,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -128,7 +127,7 @@ export default {
     <h4 class="discover-title center gl-text-gray-900">
       {{ $options.i18n.discoverTitle }}
     </h4>
-    <b-carousel
+    <gl-carousel
       v-model="slide"
       class="discover-carousel"
       :no-wrap="true"
@@ -139,14 +138,14 @@ export default {
       img-height="700"
       @sliding-start="onSlideStart"
     >
-      <b-carousel-slide v-for="{ index, imageUrl } in carouselImages" :key="index" img-blank>
+      <gl-carousel-slide v-for="{ index, imageUrl } in carouselImages" :key="index" img-blank>
         <img
           :src="imageUrl"
           class="discover-carousel-img w-100 box-shadow-default image-fluid d-block"
         />
-      </b-carousel-slide>
-    </b-carousel>
-    <b-carousel
+      </gl-carousel-slide>
+    </gl-carousel>
+    <gl-carousel
       ref="textCarousel"
       v-model="textSlide"
       class="discover-carousel discover-text-carousel"
@@ -155,7 +154,7 @@ export default {
       img-width="1440"
       img-height="200"
     >
-      <b-carousel-slide
+      <gl-carousel-slide
         v-for="{ index, caption } in $options.i18n.carouselCaptions"
         :key="index"
         img-blank
@@ -163,8 +162,8 @@ export default {
         <p class="gl-text-gray-900 text-left">
           {{ caption }}
         </p>
-      </b-carousel-slide>
-    </b-carousel>
+      </gl-carousel-slide>
+    </gl-carousel>
     <div class="discover-footer d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
       <p class="gl-text-gray-900 text-left mb-5" v-html="$options.i18n.discoverPlanCaption"></p>
     </div>

package.json

@@ -2,6 +2,7 @@
   "private": true,
   "scripts": {
     "check-dependencies": "scripts/frontend/check_dependencies.sh",
+    "block-dependencies": "node scripts/frontend/block_dependencies.js",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
     "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" nodemon -w 'config/webpack.config.js' --exec 'webpack-dev-server --config config/webpack.config.js'",
     "eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
@@ -54,7 +55,6 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
     "bootstrap": "4.3.1",
-    "bootstrap-vue": "2.1.0",
     "brace-expansion": "^1.1.8",
     "cache-loader": "^4.1.0",
     "chart.js": "2.7.2",
@@ -202,6 +202,9 @@
     "yarn-check-webpack-plugin": "^1.2.0",
     "yarn-deduplicate": "^1.1.1"
   },
+  "blockedDependencies": {
+    "bootstrap-vue": "https://docs.gitlab.com/ee/development/fe_guide/dependencies.md#bootstrapvue"
+  },
   "resolutions": {
     "vue-jest/ts-jest": "24.0.0",
     "monaco-editor": "0.18.1"

scripts/frontend/block_dependencies.js

+const path = require('path');
+const packageJson = require(path.join(process.cwd(), 'package.json'));
+const blockedDependencies = packageJson.blockedDependencies || {};
+const dependencies = packageJson.dependencies;
+const devDependencies = packageJson.devDependencies;
+const blockedDependenciesNames = Object.keys(blockedDependencies);
+const blockedDependenciesFound = blockedDependenciesNames.filter(
+  blockedDependency => dependencies[blockedDependency] || devDependencies[blockedDependency],
+);
+
+if (blockedDependenciesFound.length) {
+  console.log('The following package.json dependencies are not allowed:');
+
+  blockedDependenciesFound.forEach(blockedDependency => {
+    const infoLink = blockedDependencies[blockedDependency];
+
+    console.log(`- ${blockedDependency}: See ${infoLink} for more information.`);
+  });
+
+  process.exit(-1);
+}

scripts/static-analysis

@@ -45,6 +45,7 @@ def jobs_to_run(node_index, node_total)
     %w[yarn run eslint],
     %w[yarn run stylelint],
     %w[yarn run prettier-all],
+    %w[yarn run block-dependencies],
     %w[bundle exec rubocop --parallel],
     %w[scripts/lint-conflicts.sh],
     %w[scripts/lint-rugged],