Add latest changes from gitlab-org/gitlab@master

4 files changed, 52 insertions, 40 deletions

diff --git a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
index bca43d0b20a..a545ad1d09c 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/package_registry/components/list/package_list_row.vue
@@ -1,7 +1,7 @@
 <script>
 import {
-  GlDropdown,
-  GlDropdownItem,
+  GlDisclosureDropdown,
+  GlDisclosureDropdownItem,
   GlFormCheckbox,
   GlIcon,
   GlSprintf,
@@ -28,8 +28,8 @@ import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 export default {
   name: 'PackageListRow',
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
     GlFormCheckbox,
     GlIcon,
     GlSprintf,
@@ -194,18 +194,22 @@ export default {
     </template>
 
     <template v-if="packageEntity.canDestroy" #right-action>
-      <gl-dropdown
+      <gl-disclosure-dropdown
+        category="tertiary"
         data-testid="delete-dropdown"
         icon="ellipsis_v"
-        :text="$options.i18n.moreActions"
-        :text-sr-only="true"
-        category="tertiary"
+        :toggle-text="$options.i18n.moreActions"
+        text-sr-only
         no-caret
       >
-        <gl-dropdown-item data-testid="action-delete" variant="danger" @click="$emit('delete')">{{
-          $options.i18n.deletePackage
-        }}</gl-dropdown-item>
-      </gl-dropdown>
+        <gl-disclosure-dropdown-item data-testid="action-delete" @action="$emit('delete')">
+          <template #list-item>
+            <span class="gl-text-red-500">
+              {{ $options.i18n.deletePackage }}
+            </span>
+          </template>
+        </gl-disclosure-dropdown-item>
+      </gl-disclosure-dropdown>
     </template>
   </list-item>
 </template>
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 8946a02e663..d9bc2c82688 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -86,7 +86,7 @@ export const confidentialityInfoText = (workspaceType, issuableType) =>
     ),
     {
       workspaceType: workspaceType === WORKSPACE_PROJECT ? __('project') : __('group'),
-      issuableType: issuableType === TYPE_ISSUE ? __('issue') : __('epic'),
+      issuableType: issuableType.toLowerCase(),
       permissions:
         issuableType === TYPE_ISSUE
           ? __('at least the Reporter role, the author, and assignees')
diff --git a/app/assets/javascripts/work_items/components/work_item_created_updated.vue b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
index a6cc37290fb..f93ea4a0753 100644
--- a/app/assets/javascripts/work_items/components/work_item_created_updated.vue
+++ b/app/assets/javascripts/work_items/components/work_item_created_updated.vue
@@ -1,8 +1,10 @@
 <script>
-import { GlAvatarLink, GlSprintf } from '@gitlab/ui';
+import { GlAvatarLink, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { WORKSPACE_PROJECT } from '~/issues/constants';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import WorkItemStateBadge from '~/work_items/components/work_item_state_badge.vue';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
 
@@ -13,6 +15,8 @@ export default {
     TimeAgoTooltip,
     WorkItemStateBadge,
     WorkItemTypeIcon,
+    ConfidentialityBadge,
+    GlLoadingIcon,
   },
   inject: ['fullPath'],
   props: {
@@ -21,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    updateInProgress: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     createdAt() {
@@ -44,6 +53,9 @@ export default {
     workItemIconName() {
       return this.workItem?.workItemType?.iconName;
     },
+    isWorkItemConfidential() {
+      return this.workItem?.confidential;
+    },
   },
   apollo: {
     workItem: {
@@ -62,12 +74,21 @@ export default {
       },
     },
   },
+  WORKSPACE_PROJECT,
 };
 </script>
 
 <template>
   <div class="gl-mb-3 gl-text-gray-700">
     <work-item-state-badge v-if="workItemState" :work-item-state="workItemState" />
+    <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" />
+    <confidentiality-badge
+      v-if="isWorkItemConfidential"
+      class="gl-vertical-align-middle gl-display-inline-flex!"
+      data-testid="confidential"
+      :workspace-type="$options.WORKSPACE_PROJECT"
+      :issuable-type="workItemType"
+    />
     <work-item-type-icon
       class="gl-vertical-align-middle gl-mr-0!"
       :work-item-icon-name="workItemIconName"
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 24fcc85dabf..d826ef9cbe7 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -5,7 +5,6 @@ import {
   GlSkeletonLoader,
   GlLoadingIcon,
   GlIcon,
-  GlBadge,
   GlButton,
   GlTooltipDirective,
   GlEmptyState,
@@ -19,8 +18,9 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
+import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
+import { WORKSPACE_PROJECT } from '~/issues/constants';
 import {
-  sprintfWorkItem,
   i18n,
   WIDGET_TYPE_ASSIGNEES,
   WIDGET_TYPE_NOTIFICATIONS,
@@ -60,7 +60,6 @@ export default {
   components: {
     WorkItemStateToggleButton,
     GlAlert,
-    GlBadge,
     GlButton,
     GlLoadingIcon,
     GlSkeletonLoader,
@@ -79,6 +78,7 @@ export default {
     WorkItemDetailModal,
     AbuseCategorySelector,
     GlIntersectionObserver,
+    ConfidentialityBadge,
   },
   mixins: [glFeatureFlagMixin()],
   inject: ['fullPath', 'reportAbusePath'],
@@ -186,9 +186,6 @@ export default {
     canAssignUnassignUser() {
       return this.workItemAssignees && this.canSetWorkItemMetadata;
     },
-    confidentialTooltip() {
-      return sprintfWorkItem(this.$options.i18n.confidentialTooltip, this.workItemType);
-    },
     fullPath() {
       return this.workItem?.project.fullPath;
     },
@@ -377,8 +374,8 @@ export default {
       }
     },
   },
-
   WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+  WORKSPACE_PROJECT,
 };
 </script>
 
@@ -439,16 +436,6 @@ export default {
             />
             {{ workItemBreadcrumbReference }}
           </div>
-          <gl-loading-icon v-if="updateInProgress" :inline="true" class="gl-mr-3" />
-          <gl-badge
-            v-if="workItem.confidential"
-            v-gl-tooltip.bottom
-            :title="confidentialTooltip"
-            variant="warning"
-            icon="eye-slash"
-            class="gl-mr-3 gl-cursor-help"
-            >{{ __('Confidential') }}</gl-badge
-          >
           <work-item-state-toggle-button
             v-if="canUpdate"
             :work-item-id="workItem.id"
@@ -503,7 +490,10 @@ export default {
             :can-update="canUpdate"
             @error="updateError = $event"
           />
-          <work-item-created-updated :work-item-iid="workItemIid" />
+          <work-item-created-updated
+            :work-item-iid="workItemIid"
+            :update-in-progress="updateInProgress"
+          />
         </div>
         <gl-intersection-observer
           v-if="showIntersectionObserver"
@@ -523,15 +513,12 @@ export default {
                   {{ workItem.title }}
                 </span>
                 <gl-loading-icon v-if="updateInProgress" class="gl-mr-3" />
-                <gl-badge
+                <confidentiality-badge
                   v-if="workItem.confidential"
-                  v-gl-tooltip.bottom
-                  :title="confidentialTooltip"
-                  variant="warning"
-                  icon="eye-slash"
-                  class="gl-mr-3 gl-cursor-help"
-                  >{{ __('Confidential') }}</gl-badge
-                >
+                  data-testid="confidential"
+                  :workspace-type="$options.WORKSPACE_PROJECT"
+                  :issuable-type="workItemType"
+                />
                 <work-item-todos
                   v-if="showWorkItemCurrentUserTodos"
                   :work-item-id="workItem.id"