Add latest changes from gitlab-org/gitlab@master

2 files changed, 70 insertions, 27 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
index 34f7e659600..436ecee07dc 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_links_form.vue
@@ -12,7 +12,7 @@ import {
 import { debounce } from 'lodash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
-import { __, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
 import projectWorkItemsQuery from '../../graphql/project_work_items.query.graphql';
@@ -191,6 +191,9 @@ export default {
         this.parentWorkItemType,
       );
     },
+    showConfidentialityTooltip() {
+      return this.isCreateForm && this.parentConfidential;
+    },
     addOrCreateMethod() {
       return this.isCreateForm ? this.createChild : this.addChild;
     },
@@ -207,7 +210,10 @@ export default {
       return this.parentMilestone?.id;
     },
     isSubmitButtonDisabled() {
-      return this.isCreateForm ? this.search.length === 0 : this.workItemsToAdd.length === 0;
+      if (this.isCreateForm) {
+        return this.search.length === 0;
+      }
+      return this.workItemsToAdd.length === 0 || !this.areWorkItemsToAddValid;
     },
     isLoading() {
       return this.$apollo.queries.availableWorkItems.loading;
@@ -215,6 +221,32 @@ export default {
     addInputPlaceholder() {
       return sprintfWorkItem(I18N_WORK_ITEM_SEARCH_INPUT_PLACEHOLDER, this.childrenTypeName);
     },
+    tokenSelectorContainerClass() {
+      return !this.areWorkItemsToAddValid ? 'gl-inset-border-1-red-500!' : '';
+    },
+    invalidWorkItemsToAdd() {
+      return this.parentConfidential
+        ? this.workItemsToAdd.filter((workItem) => !workItem.confidential)
+        : [];
+    },
+    areWorkItemsToAddValid() {
+      return this.invalidWorkItemsToAdd.length === 0;
+    },
+    showWorkItemsToAddInvalidMessage() {
+      return !this.isCreateForm && !this.areWorkItemsToAddValid;
+    },
+    workItemsToAddInvalidMessage() {
+      return sprintf(
+        s__(
+          'WorkItem|%{invalidWorkItemsList} cannot be added: Cannot assign a non-confidential %{childWorkItemType} to a confidential parent %{parentWorkItemType}. Make the selected %{childWorkItemType} confidential and try again.',
+        ),
+        {
+          invalidWorkItemsList: this.invalidWorkItemsToAdd.map(({ title }) => title).join(', '),
+          childWorkItemType: this.childrenTypeName,
+          parentWorkItemType: this.parentWorkItemType,
+        },
+      );
+    },
   },
   created() {
     this.debouncedSearchKeyUpdate = debounce(this.setSearchKey, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
@@ -334,6 +366,7 @@ export default {
       />
     </gl-form-group>
     <gl-form-checkbox
+      v-if="isCreateForm"
       ref="confidentialityCheckbox"
       v-model="confidential"
       name="isConfidential"
@@ -342,35 +375,44 @@ export default {
       >{{ confidentialityCheckboxLabel }}</gl-form-checkbox
     >
     <gl-tooltip
-      v-if="parentConfidential"
+      v-if="showConfidentialityTooltip"
       :target="getConfidentialityTooltipTarget"
       triggers="hover"
       >{{ confidentialityCheckboxTooltip }}</gl-tooltip
     >
-    <gl-token-selector
-      v-if="!isCreateForm"
-      v-model="workItemsToAdd"
-      :dropdown-items="availableWorkItems"
-      :loading="isLoading"
-      :placeholder="addInputPlaceholder"
-      menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
-      class="gl-mb-4"
-      data-testid="work-item-token-select-input"
-      @text-input="debouncedSearchKeyUpdate"
-      @focus="handleFocus"
-      @mouseover.native="handleMouseOver"
-      @mouseout.native="handleMouseOut"
-    >
-      <template #token-content="{ token }">
-        {{ token.title }}
-      </template>
-      <template #dropdown-item-content="{ dropdownItem }">
-        <div class="gl-display-flex">
-          <div class="gl-text-secondary gl-mr-4">{{ getIdFromGraphQLId(dropdownItem.id) }}</div>
-          <div class="gl-text-truncate">{{ dropdownItem.title }}</div>
-        </div>
-      </template>
-    </gl-token-selector>
+    <div class="gl-mb-4">
+      <gl-token-selector
+        v-if="!isCreateForm"
+        v-model="workItemsToAdd"
+        :dropdown-items="availableWorkItems"
+        :loading="isLoading"
+        :placeholder="addInputPlaceholder"
+        menu-class="gl-dropdown-menu-wide dropdown-reduced-height gl-min-h-7!"
+        :container-class="tokenSelectorContainerClass"
+        data-testid="work-item-token-select-input"
+        @text-input="debouncedSearchKeyUpdate"
+        @focus="handleFocus"
+        @mouseover.native="handleMouseOver"
+        @mouseout.native="handleMouseOut"
+      >
+        <template #token-content="{ token }">
+          {{ token.title }}
+        </template>
+        <template #dropdown-item-content="{ dropdownItem }">
+          <div class="gl-display-flex">
+            <div class="gl-text-secondary gl-mr-4">{{ getIdFromGraphQLId(dropdownItem.id) }}</div>
+            <div class="gl-text-truncate">{{ dropdownItem.title }}</div>
+          </div>
+        </template>
+      </gl-token-selector>
+      <div
+        v-if="showWorkItemsToAddInvalidMessage"
+        class="gl-text-red-500"
+        data-testid="work-items-invalid"
+      >
+        {{ workItemsToAddInvalidMessage }}
+      </div>
+    </div>
     <gl-button
       category="primary"
       variant="confirm"
diff --git a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
index 3a23db3886a..fce10f6f2a6 100644
--- a/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/project_work_items.query.graphql
@@ -11,6 +11,7 @@ query projectWorkItems(
         id
         title
         state
+        confidential
       }
     }
   }