1 files changed, 64 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_content.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_content.vue
new file mode 100644
index 00000000000..37a44eb8f01
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_content.vue
@@ -0,0 +1,64 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    confidential: {
+      type: Boolean,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    confidentialText() {
+      return this.confidential
+        ? sprintf(__('This %{issuableType} is confidential'), {
+            issuableType: this.issuableType,
+          })
+        : __('Not confidential');
+    },
+    confidentialIcon() {
+      return this.confidential ? 'eye-slash' : 'eye';
+    },
+    tooltipLabel() {
+      return this.confidential ? __('Confidential') : __('Not confidential');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-gl-tooltip.viewport.left
+      :title="tooltipLabel"
+      class="sidebar-collapsed-icon"
+      data-testid="sidebar-collapsed-icon"
+      @click="$emit('expandSidebar')"
+    >
+      <gl-icon
+        :size="16"
+        :name="confidentialIcon"
+        class="sidebar-item-icon inline"
+        :class="{ 'is-active': confidential }"
+      />
+    </div>
+    <gl-icon
+      :size="16"
+      :name="confidentialIcon"
+      class="sidebar-item-icon inline hide-collapsed"
+      :class="{ 'is-active': confidential }"
+    />
+    <span class="hide-collapsed" data-testid="confidential-text">{{ confidentialText }}</span>
+  </div>
+</template>