diff --git a/Gemfile b/Gemfile index 2d6d42b3da0..9573ba39b06 100644 --- a/Gemfile +++ b/Gemfile @@ -38,7 +38,7 @@ gem 'responders', '~> 3.0' gem 'sprockets', '~> 3.7.0' -gem 'view_component', '~> 3.5.0' +gem 'view_component', '~> 3.6.0' # Supported DBs gem 'pg', '~> 1.5.4' diff --git a/Gemfile.checksum b/Gemfile.checksum index b8a244ef785..82d8344329c 100644 --- a/Gemfile.checksum +++ b/Gemfile.checksum @@ -677,7 +677,7 @@ {"name":"validates_hostname","version":"1.0.13","platform":"ruby","checksum":"eac40178cc0b4f727df9cc6a5cb5bc2550718ad8d9bb3728df9aba6354bdda19"}, {"name":"version_gem","version":"1.1.0","platform":"ruby","checksum":"6b009518020db57f51ec7b410213fae2bf692baea9f1b51770db97fbc93d9a80"}, {"name":"version_sorter","version":"2.3.0","platform":"ruby","checksum":"2147f2a1a3804fbb8f60d268b7d7c1ec717e6dd727ffe2c165b4e05e82efe1da"}, -{"name":"view_component","version":"3.5.0","platform":"ruby","checksum":"c3e3cdf5abb2383157684d76cfb153d23bfc9834a7defa82441edab54635e8af"}, +{"name":"view_component","version":"3.6.0","platform":"ruby","checksum":"7aa45c11b4fd51583bd63b10fbc6b1a87f088182e4f026e5f4f6a9211e5a42a3"}, {"name":"virtus","version":"2.0.0","platform":"ruby","checksum":"8841dae4eb7fcc097320ba5ea516bf1839e5d056c61ee27138aa4bddd6e3d1c2"}, {"name":"vite_rails","version":"3.0.15","platform":"ruby","checksum":"b8ec528aedf7e24b54f222b449cd9250810ea2456d5f8dd4ef87f06b475cf860"}, {"name":"vite_ruby","version":"3.3.4","platform":"ruby","checksum":"025e438385a6dc2320c8c148dff453f5bb1d4f056ce69c3386f47d4c388ad80c"}, diff --git a/Gemfile.lock b/Gemfile.lock index 3823c2528b6..c5883ced594 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1667,7 +1667,7 @@ GEM activesupport (>= 3.0) version_gem (1.1.0) version_sorter (2.3.0) - view_component (3.5.0) + view_component (3.6.0) activesupport (>= 5.2.0, < 8.0) concurrent-ruby (~> 1.0) method_source (~> 1.0) @@ -2036,7 +2036,7 @@ DEPENDENCIES valid_email (~> 0.1) validates_hostname (~> 1.0.13) version_sorter (~> 2.3) - view_component (~> 3.5.0) + view_component (~> 3.6.0) vite_rails vmstat (~> 2.3.0) warning (~> 1.3.0) diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue index c441a718dd8..6830c96a6a9 100644 --- a/app/assets/javascripts/boards/components/board_card_inner.vue +++ b/app/assets/javascripts/boards/components/board_card_inner.vue @@ -252,7 +252,7 @@ export default { v-if="item.hidden" v-gl-tooltip name="spam" - :title="__('This issue is hidden because its author has been banned')" + :title="__('This issue is hidden because its author has been banned.')" class="gl-mr-2 hidden-icon gl-text-orange-500 gl-cursor-help" data-testid="hidden-icon" /> diff --git a/app/assets/javascripts/issuable/components/hidden_badge.vue b/app/assets/javascripts/issuable/components/hidden_badge.vue new file mode 100644 index 00000000000..a80dc2f62d4 --- /dev/null +++ b/app/assets/javascripts/issuable/components/hidden_badge.vue @@ -0,0 +1,36 @@ + + + diff --git a/app/assets/javascripts/issuable/components/locked_badge.vue b/app/assets/javascripts/issuable/components/locked_badge.vue new file mode 100644 index 00000000000..f97ac888417 --- /dev/null +++ b/app/assets/javascripts/issuable/components/locked_badge.vue @@ -0,0 +1,36 @@ + + + diff --git a/app/assets/javascripts/issues/constants.js b/app/assets/javascripts/issues/constants.js index 80344efc44c..3d8017e6e07 100644 --- a/app/assets/javascripts/issues/constants.js +++ b/app/assets/javascripts/issues/constants.js @@ -28,7 +28,7 @@ export const issuableStatusText = { [STATUS_LOCKED]: __('Open'), }; -export const IssuableTypeText = { +export const issuableTypeText = { [TYPE_ISSUE]: __('issue'), [TYPE_EPIC]: __('epic'), [TYPE_MERGE_REQUEST]: __('merge request'), diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 81e5c30a264..ae5b4350512 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -14,7 +14,7 @@ import * as Sentry from '@sentry/browser'; import { mapActions, mapGetters, mapState } from 'vuex'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { EVENT_ISSUABLE_VUE_APP_CHANGE } from '~/issuable/constants'; -import { STATUS_CLOSED, TYPE_ISSUE, IssuableTypeText } from '~/issues/constants'; +import { STATUS_CLOSED, TYPE_ISSUE, issuableTypeText } from '~/issues/constants'; import { ISSUE_STATE_EVENT_CLOSE, ISSUE_STATE_EVENT_REOPEN, @@ -138,7 +138,7 @@ export default { issueTypeText() { const { issueType } = this; - return IssuableTypeText[issueType] ?? issueType; + return issuableTypeText[issueType] ?? issueType; }, buttonText() { return this.isClosed diff --git a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue index f7a324d9f3f..1e5eb53e220 100644 --- a/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue +++ b/app/assets/javascripts/issues/show/components/new_header_actions_popover.vue @@ -4,7 +4,7 @@ import { s__, sprintf } from '~/locale'; import { getCookie, parseBoolean, setCookie } from '~/lib/utils/common_utils'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { NEW_ACTIONS_POPOVER_KEY } from '~/issues/show/constants'; -import { IssuableTypeText } from '~/issues/constants'; +import { issuableTypeText } from '~/issues/constants'; export default { name: 'NewHeaderActionsPopover', @@ -34,7 +34,7 @@ export default { computed: { popoverText() { return sprintf(this.$options.i18n.popoverText, { - issueType: IssuableTypeText[this.issueType], + issueType: issuableTypeText[this.issueType], }); }, showPopover() { diff --git a/app/assets/javascripts/issues/show/components/sticky_header.vue b/app/assets/javascripts/issues/show/components/sticky_header.vue index b8e0937d51c..738bb2c2aa0 100644 --- a/app/assets/javascripts/issues/show/components/sticky_header.vue +++ b/app/assets/javascripts/issues/show/components/sticky_header.vue @@ -1,5 +1,7 @@ diff --git a/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue b/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue index 3d5478757a8..d5900137484 100644 --- a/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue +++ b/app/assets/javascripts/merge_requests/components/merge_request_status_badge.vue @@ -70,5 +70,5 @@ export default { diff --git a/app/assets/javascripts/merge_requests/index.js b/app/assets/javascripts/merge_requests/index.js index 29218eb53e0..bd5faf0329c 100644 --- a/app/assets/javascripts/merge_requests/index.js +++ b/app/assets/javascripts/merge_requests/index.js @@ -3,7 +3,7 @@ import { parseBoolean } from '~/lib/utils/common_utils'; import HeaderMetadata from './components/header_metadata.vue'; export function mountHeaderMetadata(store) { - const el = document.querySelector('.js-header-metadata-root'); + const el = document.querySelector('.js-mr-header-metadata-root'); if (!el) { return null; diff --git a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue index 7a1853b1b46..90c3fb0039d 100644 --- a/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue +++ b/app/assets/javascripts/sidebar/components/confidential/sidebar_confidentiality_form.vue @@ -1,7 +1,7 @@ diff --git a/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js new file mode 100644 index 00000000000..8e964c9bdf8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.stories.js @@ -0,0 +1,24 @@ +import ExperimentBadge from './experiment_badge.vue'; + +export default { + component: ExperimentBadge, + title: 'vue_shared/experiment-badge', +}; + +const template = ` +
+ +
+ `; + +const Template = (args, { argTypes }) => ({ + components: { ExperimentBadge }, + data() { + return { value: args.value }; + }, + props: Object.keys(argTypes), + template, +}); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue new file mode 100644 index 00000000000..26bae71ddb8 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/experiment_badge.vue @@ -0,0 +1,43 @@ + + + diff --git a/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue b/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue new file mode 100644 index 00000000000..351c7bd9da0 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/badges/hover_badge.vue @@ -0,0 +1,52 @@ + + + diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue index d9e750b9c45..4657954c8cc 100644 --- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue +++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue @@ -261,7 +261,7 @@ export default { v-if="issuable.hidden" v-gl-tooltip name="spam" - :title="__('This issue is hidden because its author has been banned')" + :title="__('This issue is hidden because its author has been banned.')" :aria-label="__('Hidden')" /> import { GlIcon, GlBadge, GlButton, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import HiddenBadge from '~/issuable/components/hidden_badge.vue'; +import LockedBadge from '~/issuable/components/locked_badge.vue'; import { issuableStatusText, STATUS_OPEN, STATUS_REOPENED } from '~/issues/constants'; import { isExternal } from '~/lib/utils/url_utility'; import { __, n__, sprintf } from '~/locale'; @@ -16,6 +18,8 @@ export default { GlButton, GlLink, GlSprintf, + HiddenBadge, + LockedBadge, TimeAgoTooltip, WorkItemTypeIcon, }, @@ -101,16 +105,6 @@ export default { ? 'success' : 'info'; }, - blockedTooltip() { - return sprintf(__('This %{issuable} is locked. Only project members can comment.'), { - issuable: this.issuableType, - }); - }, - hiddenTooltip() { - return sprintf(__('This %{issuable} is hidden because its author has been banned'), { - issuable: this.issuableType, - }); - }, shouldShowWorkItemTypeIcon() { return this.showWorkItemTypeIcon && this.issuableType; }, @@ -174,22 +168,8 @@ export default { :issuable-type="issuableType" :workspace-type="workspaceType" /> - - - - - - + +