Epic labeling for confidential epics

When creating confidential epics/ issues in epic tree
show better labeling

doc/user/group/epics/manage_epics.md

@@ -178,7 +178,7 @@ Feature.disable(:confidential_epics)
 
 ## Manage issues assigned to an epic
 
-### Add an issue to an epic
+### Add a new issue to an epic
 
 You can add an existing issue to an epic, or, create a new issue that's
 automatically added to the epic.
@@ -190,13 +190,13 @@ subgroups, are eligible to be added to the epic. Newly added issues appear at th
 issues in the **Epics and Issues** tab.
 
 An epic contains a list of issues and an issue can be associated with at most one epic.
-When you add an issue that's already linked to an epic, the issue is automatically unlinked from its
+When you add a new issue that's already linked to an epic, the issue is automatically unlinked from its
 current parent.
 
-To add an issue to an epic:
+To add a new issue to an epic:
 
 1. Click the **Add** dropdown button.
-1. Click **Add an issue**.
+1. Click **Add a new issue**.
 1. Identify the issue to be added, using either of the following methods:
    - Paste the link of the issue.
    - Search for the desired issue by entering part of the issue's title, then selecting the desired
@@ -298,7 +298,7 @@ For more on epic templates, see [Epic Templates - Repeatable sets of issues](htt
 To add a child epic to an epic:
 
 1. Click the **Add** dropdown button.
-1. Click **Add an epic**.
+1. Click **Add a new epic**.
 1. Identify the epic to be added, using either of the following methods:
    - Paste the link of the epic.
    - Search for the desired issue by entering part of the epic's title, then selecting the desired
@@ -313,7 +313,7 @@ To add a child epic to an epic:
 
 New child epics appear at the top of the list in the **Epics and Issues** tab.
 You can move child epics from one epic to another.
-When you add an epic that's already linked to a parent epic, the link to its current parent is removed.
+When you add a new epic that's already linked to a parent epic, the link to its current parent is removed.
 Issues and child epics cannot be intermingled.
 
 To move child epics to another epic:

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
+import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 
-import { GlLoadingIcon } from '@gitlab/ui';
-
+import { __, sprintf } from '~/locale';
 import AddItemForm from '~/related_issues/components/add_issuable_form.vue';
 import SlotSwitch from '~/vue_shared/components/slot_switch.vue';
 import CreateEpicForm from './create_epic_form.vue';
@@ -25,6 +25,7 @@ export default {
   FORM_SLOTS,
   components: {
     GlLoadingIcon,
+    GlIcon,
     RelatedItemsTreeHeader,
     RelatedItemsTreeBody,
     AddItemForm,
@@ -33,6 +34,9 @@ export default {
     CreateIssueForm,
     SlotSwitch,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   computed: {
     ...mapState([
       'parentItem',
@@ -73,6 +77,24 @@ export default {
 
       return null;
     },
+    createIssuableText() {
+      return sprintf(__('Create new confidential %{issuableType}'), {
+        issuableType: this.issuableType,
+      });
+    },
+    existingIssuableText() {
+      return sprintf(__('Add existing confidential %{issuableType}'), {
+        issuableType: this.issuableType,
+      });
+    },
+    formSlots() {
+      const { addItem, createEpic, createIssue } = this.$options.FORM_SLOTS;
+      return [
+        { name: addItem, value: this.existingIssuableText },
+        { name: createEpic, value: this.createIssuableText },
+        { name: createIssue, value: this.createIssuableText },
+      ];
+    },
   },
   mounted() {
     this.fetchItems({
@@ -147,6 +169,25 @@ export default {
       }"
     >
       <related-items-tree-header :class="{ 'border-bottom-0': itemsFetchResultEmpty }" />
+      <slot-switch
+        v-if="visibleForm && parentItem.confidential"
+        :active-slot-names="[visibleForm]"
+        class="gl-p-5 gl-pb-0"
+      >
+        <h6 v-for="slot in formSlots" :key="slot.name" :slot="slot.name">
+          {{ slot.value }}
+          <gl-icon
+            v-gl-tooltip.hover
+            name="question-o"
+            class="gl-text-gray-500"
+            :title="
+              __(
+                'The parent epic is confidential and can only contain confidential epics and issues',
+              )
+            "
+          />
+        </h6>
+      </slot-switch>
       <slot-switch
         v-if="visibleForm"
         :active-slot-names="[visibleForm]"

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_header.vue

@@ -48,7 +48,9 @@ export default {
       });
     },
     showCreateIssueForm() {
-      this.toggleCreateIssueForm({ toggleState: true });
+      this.toggleCreateIssueForm({
+        toggleState: true,
+      });
     },
     showAddEpicForm() {
       this.toggleAddItemForm({
@@ -57,7 +59,9 @@ export default {
       });
     },
     showCreateEpicForm() {
-      this.toggleCreateEpicForm({ toggleState: true });
+      this.toggleCreateEpicForm({
+        toggleState: true,
+      });
     },
   },
 };

ee/app/assets/javascripts/related_items_tree/store/mutations.js

@@ -158,6 +158,7 @@ export default {
     state.showCreateIssueForm = toggleState;
     state.showAddItemForm = false;
     state.showCreateEpicForm = false;
+    state.issuableType = issuableTypesMap.ISSUE;
   },
 
   [types.SET_PENDING_REFERENCES](state, references) {

ee/changelogs/unreleased/229768-epic-labeling.yml

+---
+title: Epic labeling for confidential epics
+merge_request: 39794
+author:
+type: changed

locale/gitlab.pot

@@ -1554,6 +1554,9 @@ msgstr ""
 msgid "Add environment"
 msgstr ""
 
+msgid "Add existing confidential %{issuableType}"
+msgstr ""
+
 msgid "Add header and footer to emails. Please note that color settings will only be applied within the application interface"
 msgstr ""
 
@@ -7198,6 +7201,9 @@ msgstr ""
 msgid "Create new branch"
 msgstr ""
 
+msgid "Create new confidential %{issuableType}"
+msgstr ""
+
 msgid "Create new directory"
 msgstr ""
 
@@ -24476,6 +24482,9 @@ msgstr ""
 msgid "The one place for your designs"
 msgstr ""
 
+msgid "The parent epic is confidential and can only contain confidential epics and issues"
+msgstr ""
+
 msgid "The passphrase required to decrypt the private key. This is optional and the value is encrypted at rest."
 msgstr ""