Add latest changes from gitlab-org/gitlab@master

2 files changed, 69 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue
new file mode 100644
index 00000000000..6045d75ac11
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue
@@ -0,0 +1,34 @@
+<script>
+import SectionLoader from './section_loader.vue';
+
+export default {
+  name: 'SectionLayout',
+  components: {
+    SectionLoader,
+  },
+  props: {
+    heading: {
+      type: String,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row gl-m-0 gl-border-b gl-line-height-20 gl-py-6">
+    <div class="col-lg-4 gl-pl-0 gl-pr-9">
+      <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2>
+      <slot name="description"></slot>
+    </div>
+    <div class="col-lg-8 gl-pr-0 gl-pl-0">
+      <section-loader v-if="isLoading" />
+      <slot v-else name="features"></slot>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue
new file mode 100644
index 00000000000..b15e25b0943
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue
@@ -0,0 +1,35 @@
+<script>
+import { GlCard, GlSkeletonLoader } from '@gitlab/ui';
+
+export default {
+  name: 'SectionLoader',
+  components: {
+    GlCard,
+    GlSkeletonLoader,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-skeleton-loader :width="1248" :height="180">
+      <rect x="0" y="0" width="100" height="15" rx="4" />
+      <rect x="0" y="24" width="460" height="32" rx="4" />
+      <rect x="0" y="71" width="100" height="15" rx="4" />
+      <rect x="0" y="95" width="460" height="72" rx="4" />
+    </gl-skeleton-loader>
+    <gl-card v-for="i in 2" :key="i" class="gl-mb-5">
+      <template #header>
+        <gl-skeleton-loader :width="1248" :height="15">
+          <rect x="0" y="0" width="300" height="15" rx="4" />
+        </gl-skeleton-loader>
+      </template>
+      <gl-skeleton-loader :width="1248" :height="15">
+        <rect x="0" y="0" width="600" height="15" rx="4" />
+      </gl-skeleton-loader>
+      <gl-skeleton-loader :width="1248" :height="15">
+        <rect x="0" y="0" width="300" height="15" rx="4" />
+      </gl-skeleton-loader>
+    </gl-card>
+  </div>
+</template>