diff options
Diffstat (limited to 'app/assets/javascripts/pages')
37 files changed, 185 insertions, 255 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/index.js b/app/assets/javascripts/pages/admin/application_settings/index.js index a6e3a7dc08a..f1e92cf195a 100644 --- a/app/assets/javascripts/pages/admin/application_settings/index.js +++ b/app/assets/javascripts/pages/admin/application_settings/index.js @@ -1,4 +1,4 @@ -import initVariableList from '~/ci_variable_list'; +import initVariableList from '~/ci/ci_variable_list'; import projectSelect from '~/project_select'; import initSearchSettings from '~/search_settings'; import selfMonitor from '~/self_monitor'; diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js b/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js deleted file mode 100644 index 40348e0b18a..00000000000 --- a/app/assets/javascripts/pages/admin/broadcast_messages/broadcast_message.js +++ /dev/null @@ -1,60 +0,0 @@ -import $ from 'jquery'; -import { debounce } from 'lodash'; -import { createAlert } from '~/flash'; -import axios from '~/lib/utils/axios_utils'; -import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; -import { __ } from '~/locale'; - -export default () => { - const $broadcastMessageTheme = $('.js-broadcast-message-theme'); - const $broadcastMessageType = $('.js-broadcast-message-type'); - const $broadcastBannerMessagePreview = $('.js-broadcast-banner-message-preview [role="alert"]'); - const $broadcastMessage = $('.js-broadcast-message-message'); - const $jsBroadcastMessagePreview = $('#broadcast-message-preview'); - - const reloadPreview = function reloadPreview() { - const previewPath = $broadcastMessage.data('previewPath'); - const message = $broadcastMessage.val(); - const type = $broadcastMessageType.val(); - const theme = $broadcastMessageTheme.val(); - - axios - .post(previewPath, { - broadcast_message: { - message, - broadcast_type: type, - theme, - }, - }) - .then(({ data }) => { - $jsBroadcastMessagePreview.html(data); - }) - .catch(() => - createAlert({ - message: __('An error occurred while rendering preview broadcast message'), - }), - ); - }; - - $broadcastMessageTheme.on('change', reloadPreview); - - $broadcastMessageType.on('change', () => { - const $broadcastMessageColorFormGroup = $('.js-broadcast-message-background-color-form-group'); - const $broadcastMessageDismissableFormGroup = $('.js-broadcast-message-dismissable-form-group'); - const $broadcastNotificationMessagePreview = $('.js-broadcast-notification-message-preview'); - - $broadcastMessageColorFormGroup.toggleClass('hidden'); - $broadcastMessageDismissableFormGroup.toggleClass('hidden'); - $broadcastBannerMessagePreview.toggleClass('hidden'); - $broadcastNotificationMessagePreview.toggleClass('hidden'); - - reloadPreview(); - }); - - $broadcastMessage.on( - 'input', - debounce(() => { - reloadPreview(); - }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS), - ); -}; diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/edit/index.js b/app/assets/javascripts/pages/admin/broadcast_messages/edit/index.js index 25036984082..94cae500a1e 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/edit/index.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/edit/index.js @@ -1,8 +1,3 @@ import initEditBroadcastMessage from '~/admin/broadcast_messages/edit'; -import initBroadcastMessagesForm from '../broadcast_message'; -if (gon.features.vueBroadcastMessages) { - initEditBroadcastMessage(); -} else { - initBroadcastMessagesForm(); -} +initEditBroadcastMessage(); diff --git a/app/assets/javascripts/pages/admin/broadcast_messages/index/index.js b/app/assets/javascripts/pages/admin/broadcast_messages/index/index.js index 1f37df2b340..2662496be05 100644 --- a/app/assets/javascripts/pages/admin/broadcast_messages/index/index.js +++ b/app/assets/javascripts/pages/admin/broadcast_messages/index/index.js @@ -1,10 +1,3 @@ import initBroadcastMessages from '~/admin/broadcast_messages'; -import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior'; -import initBroadcastMessagesForm from '../broadcast_message'; -if (gon.features.vueBroadcastMessages) { - initBroadcastMessages(); -} else { - initBroadcastMessagesForm(); - initDeprecatedRemoveRowBehavior(); -} +initBroadcastMessages(); diff --git a/app/assets/javascripts/pages/groups/boards/index.js b/app/assets/javascripts/pages/groups/boards/index.js index bde0007ec6a..23f5b083589 100644 --- a/app/assets/javascripts/pages/groups/boards/index.js +++ b/app/assets/javascripts/pages/groups/boards/index.js @@ -1,7 +1,5 @@ import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import initBoards from '~/boards'; -import UsersSelect from '~/users_select'; -new UsersSelect(); // eslint-disable-line no-new new ShortcutsNavigation(); // eslint-disable-line no-new initBoards(); diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js index 58ca195d7b9..fb685247bd4 100644 --- a/app/assets/javascripts/pages/groups/edit/index.js +++ b/app/assets/javascripts/pages/groups/edit/index.js @@ -2,7 +2,7 @@ import { GROUP_BADGE } from '~/badges/constants'; import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory'; import initFilePickers from '~/file_pickers'; import initTransferGroupForm from '~/groups/init_transfer_group_form'; -import groupsSelect from '~/groups_select'; +import { initGroupSelects } from '~/vue_shared/components/group_select/init_group_selects'; import { initCascadingSettingsLockPopovers } from '~/namespaces/cascading_settings'; import mountBadgeSettings from '~/pages/shared/mount_badge_settings'; import projectSelect from '~/project_select'; @@ -20,7 +20,7 @@ dirtySubmitFactory( mountBadgeSettings(GROUP_BADGE); // Initialize Subgroups selector -groupsSelect(); +initGroupSelects(); projectSelect(); diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 62d47cb49b8..ceda2c8fa17 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -11,7 +11,7 @@ import { groupLinkRequestFormatter } from '~/members/utils'; const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; const APP_OPTIONS = { [MEMBER_TYPES.user]: { - tableFields: SHARED_FIELDS.concat(['source', 'granted', 'userCreatedAt', 'lastActivityOn']), + tableFields: SHARED_FIELDS.concat(['source', 'activity']), tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, tableSortableFields: [ 'account', diff --git a/app/assets/javascripts/pages/groups/observability/datasources/index.js b/app/assets/javascripts/pages/groups/observability/datasources/index.js new file mode 100644 index 00000000000..c3b6ce6f99f --- /dev/null +++ b/app/assets/javascripts/pages/groups/observability/datasources/index.js @@ -0,0 +1,3 @@ +import ObservabilityApp from '~/observability'; + +ObservabilityApp(); diff --git a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js index b1a1cc21764..184958bd189 100644 --- a/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/groups/settings/ci_cd/show/index.js @@ -1,5 +1,5 @@ import initStaleRunnerCleanupSetting from 'ee_else_ce/group_settings/stale_runner_cleanup'; -import initVariableList from '~/ci_variable_list'; +import initVariableList from '~/ci/ci_variable_list'; import initSharedRunnersForm from '~/group_settings/mount_shared_runners'; import initSettingsPanels from '~/settings_panels'; import initDeployTokens from '~/deploy_tokens'; diff --git a/app/assets/javascripts/pages/groups/show/index.js b/app/assets/javascripts/pages/groups/show/index.js index 161fca83a58..53bceb3a6f0 100644 --- a/app/assets/javascripts/pages/groups/show/index.js +++ b/app/assets/javascripts/pages/groups/show/index.js @@ -1,7 +1,9 @@ import leaveByUrl from '~/namespaces/leave_by_url'; import { initGroupOverviewTabs } from '~/groups/init_overview_tabs'; +import initReadMore from '~/read_more'; import initGroupDetails from '../shared/group_details'; leaveByUrl('group'); initGroupDetails(); initGroupOverviewTabs(); +initReadMore(); diff --git a/app/assets/javascripts/pages/import/bitbucket/status/index.js b/app/assets/javascripts/pages/import/bitbucket/status/index.js index 6e9c26bf930..0b0f222ab76 100644 --- a/app/assets/javascripts/pages/import/bitbucket/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket/status/index.js @@ -1,21 +1,6 @@ -import Vue from 'vue'; -import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; +import mountImportProjectsTable from '~/import_entities/import_projects'; import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue'; -function importBitBucket() { - const mountElement = document.getElementById('import-projects-mount-element'); - if (!mountElement) return undefined; +const mountElement = document.getElementById('import-projects-mount-element'); - const store = initStoreFromElement(mountElement); - const attrs = initPropsFromElement(mountElement); - - return new Vue({ - el: mountElement, - store, - render(createElement) { - return createElement(BitbucketStatusTable, { attrs }); - }, - }); -} - -importBitBucket(); +mountImportProjectsTable({ mountElement, Component: BitbucketStatusTable }); diff --git a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js index 90eb423c7a7..680ff0ddcde 100644 --- a/app/assets/javascripts/pages/import/bitbucket_server/status/index.js +++ b/app/assets/javascripts/pages/import/bitbucket_server/status/index.js @@ -1,24 +1,10 @@ -import Vue from 'vue'; -import { initStoreFromElement, initPropsFromElement } from '~/import_entities/import_projects'; -import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue'; - -function BitbucketServerStatus() { - const mountElement = document.getElementById('import-projects-mount-element'); - if (!mountElement) return undefined; +import mountImportProjectsTable from '~/import_entities/import_projects'; - const store = initStoreFromElement(mountElement); - const attrs = initPropsFromElement(mountElement); - const { reconfigurePath } = mountElement.dataset; - - return new Vue({ - el: mountElement, - store, - render(createElement) { - return createElement(BitbucketServerStatusTable, { - attrs: { ...attrs, reconfigurePath }, - }); - }, - }); -} +import BitbucketServerStatusTable from './components/bitbucket_server_status_table.vue'; -BitbucketServerStatus(); +const mountElement = document.getElementById('import-projects-mount-element'); +mountImportProjectsTable({ + mountElement, + Component: BitbucketServerStatusTable, + extraProps: ({ reconfigurePath }) => ({ reconfigurePath }), +}); diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue index 6feb4c2188f..3dcababb4fd 100644 --- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue +++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue @@ -1,5 +1,13 @@ <script> -import { GlButton, GlEmptyState, GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui'; +import { + GlButton, + GlEmptyState, + GlIcon, + GlLink, + GlLoadingIcon, + GlTableLite, + GlTooltipDirective as GlTooltip, +} from '@gitlab/ui'; import { s__, __ } from '~/locale'; import { createAlert } from '~/flash'; @@ -34,15 +42,20 @@ export default { components: { GlButton, GlEmptyState, + GlIcon, GlLink, GlLoadingIcon, - GlTable, + GlTableLite, PaginationBar, ImportStatus, TimeAgo, LocalStorageSync, }, + directives: { + GlTooltip, + }, + data() { return { loading: true, @@ -58,12 +71,12 @@ export default { fields: [ tableCell({ key: 'source_full_path', - label: s__('BulkImport|Source group'), + label: s__('BulkImport|Source'), thClass: `${DEFAULT_TH_CLASSES} gl-w-30p`, }), tableCell({ key: 'destination_name', - label: s__('BulkImport|Destination group'), + label: s__('BulkImport|Destination'), thClass: `${DEFAULT_TH_CLASSES} gl-w-40p`, }), tableCell({ @@ -113,12 +126,24 @@ export default { } }, - getDestinationUrl({ destination_name: name, destination_namespace: namespace }) { - return [namespace, name].filter(Boolean).join('/'); + getFullDestinationUrl(params) { + return joinPaths(gon.relative_url_root || '', '/', params.destination_full_path); }, - getFullDestinationUrl(params) { - return joinPaths(gon.relative_url_root || '', '/', this.getDestinationUrl(params)); + getPresentationUrl(item) { + const suffix = item.entity_type === 'group' ? '/' : ''; + return `${item.destination_full_path}${suffix}`; + }, + + getEntityTooltip(item) { + switch (item.entity_type) { + case 'project': + return __('Project'); + case 'group': + return __('Group'); + default: + return ''; + } }, }, @@ -134,26 +159,36 @@ export default { > <h1 class="gl-my-0 gl-py-4 gl-font-size-h1"> <img :src="$options.gitlabLogo" class="gl-w-6 gl-h-6 gl-mb-2 gl-display-inline gl-mr-2" /> - {{ s__('BulkImport|Group import history') }} + {{ s__('BulkImport|GitLab Migration history') }} </h1> </div> <gl-loading-icon v-if="loading" size="lg" class="gl-mt-5" /> <gl-empty-state v-else-if="!hasHistoryItems" :title="s__('BulkImport|No history is available')" - :description="s__('BulkImport|Your imported groups will appear here.')" + :description="s__('BulkImport|Your imported groups and projects will appear here.')" /> <template v-else> - <gl-table + <gl-table-lite :fields="$options.fields" :items="historyItems" data-qa-selector="import_history_table" class="gl-w-full" > <template #cell(destination_name)="{ item }"> - <gl-link :href="getFullDestinationUrl(item)" target="_blank"> - {{ getDestinationUrl(item) }} - </gl-link> + <template v-if="item.destination_full_path"> + <gl-icon + v-gl-tooltip + :name="item.entity_type" + :title="getEntityTooltip(item)" + :aria-label="getEntityTooltip(item)" + class="gl-text-gray-500" + /> + <gl-link :href="getFullDestinationUrl(item)" target="_blank"> + {{ getPresentationUrl(item) }} + </gl-link> + </template> + <gl-loading-icon v-else inline /> </template> <template #cell(created_at)="{ value }"> <time-ago :time="value" /> @@ -171,7 +206,7 @@ export default { <template #row-details="{ item }"> <pre><code>{{ item.failures }}</code></pre> </template> - </gl-table> + </gl-table-lite> <pagination-bar :page-info="pageInfo" class="gl-m-0 gl-mt-3" diff --git a/app/assets/javascripts/pages/import/fogbugz/status/index.js b/app/assets/javascripts/pages/import/fogbugz/status/index.js index 4c427b72372..30ee468734d 100644 --- a/app/assets/javascripts/pages/import/fogbugz/status/index.js +++ b/app/assets/javascripts/pages/import/fogbugz/status/index.js @@ -2,4 +2,4 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; const mountElement = document.getElementById('import-projects-mount-element'); -mountImportProjectsTable(mountElement); +mountImportProjectsTable({ mountElement }); diff --git a/app/assets/javascripts/pages/import/gitea/status/index.js b/app/assets/javascripts/pages/import/gitea/status/index.js index 4c427b72372..30ee468734d 100644 --- a/app/assets/javascripts/pages/import/gitea/status/index.js +++ b/app/assets/javascripts/pages/import/gitea/status/index.js @@ -2,4 +2,4 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; const mountElement = document.getElementById('import-projects-mount-element'); -mountImportProjectsTable(mountElement); +mountImportProjectsTable({ mountElement }); diff --git a/app/assets/javascripts/pages/import/github/status/index.js b/app/assets/javascripts/pages/import/github/status/index.js index 4c427b72372..30ee468734d 100644 --- a/app/assets/javascripts/pages/import/github/status/index.js +++ b/app/assets/javascripts/pages/import/github/status/index.js @@ -2,4 +2,4 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; const mountElement = document.getElementById('import-projects-mount-element'); -mountImportProjectsTable(mountElement); +mountImportProjectsTable({ mountElement }); diff --git a/app/assets/javascripts/pages/import/gitlab/status/index.js b/app/assets/javascripts/pages/import/gitlab/status/index.js index 4c427b72372..30ee468734d 100644 --- a/app/assets/javascripts/pages/import/gitlab/status/index.js +++ b/app/assets/javascripts/pages/import/gitlab/status/index.js @@ -2,4 +2,4 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; const mountElement = document.getElementById('import-projects-mount-element'); -mountImportProjectsTable(mountElement); +mountImportProjectsTable({ mountElement }); diff --git a/app/assets/javascripts/pages/import/manifest/status/index.js b/app/assets/javascripts/pages/import/manifest/status/index.js index 4c427b72372..30ee468734d 100644 --- a/app/assets/javascripts/pages/import/manifest/status/index.js +++ b/app/assets/javascripts/pages/import/manifest/status/index.js @@ -2,4 +2,4 @@ import mountImportProjectsTable from '~/import_entities/import_projects'; const mountElement = document.getElementById('import-projects-mount-element'); -mountImportProjectsTable(mountElement); +mountImportProjectsTable({ mountElement }); diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index af0097b415c..46704d96552 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/app/assets/javascripts/pages/projects/commit/show/index.js @@ -78,3 +78,5 @@ if (filesContainer.length) { loadAwardsHandler(); initCommitActions(); + +syntaxHighlight([document.querySelector('.files')]); diff --git a/app/assets/javascripts/pages/projects/compare/show/index.js b/app/assets/javascripts/pages/projects/compare/show/index.js index b74f7d1cf57..760bf3f7131 100644 --- a/app/assets/javascripts/pages/projects/compare/show/index.js +++ b/app/assets/javascripts/pages/projects/compare/show/index.js @@ -2,6 +2,7 @@ import Diff from '~/diff'; import GpgBadges from '~/gpg_badges'; import { initDiffStatsDropdown } from '~/init_diff_stats_dropdown'; import initCompareSelector from '~/projects/compare'; +import syntaxHighlight from '~/syntax_highlight'; initCompareSelector(); @@ -9,3 +10,5 @@ new Diff(); // eslint-disable-line no-new const paddingTop = 16; initDiffStatsDropdown(document.querySelector('.navbar-gitlab').offsetHeight - paddingTop); GpgBadges.fetch(); + +syntaxHighlight([document.querySelector('.files')]); diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue index 91650003d4a..2028af8b8f0 100644 --- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue +++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue @@ -57,6 +57,9 @@ export default { visibilityHelpPath: { default: '', }, + cancelPath: { + default: '', + }, projectFullPath: { default: '', }, @@ -97,7 +100,7 @@ export default { required: false, skipValidation: true, }), - visibility: initFormField({ value: this.getInitialVisibilityValue() }), + visibility: initFormField({ value: null }), }, }; return { @@ -106,8 +109,39 @@ export default { }; }, computed: { + projectVisibilityLevel() { + return VISIBILITY_LEVELS_STRING_TO_INTEGER[this.projectVisibility]; + }, + namespaceVisibilityLevel() { + const visibility = + this.form.fields.namespace.value?.visibility || VISIBILITY_LEVEL_PUBLIC_STRING; + return VISIBILITY_LEVELS_STRING_TO_INTEGER[visibility]; + }, + visibilityLevelCap() { + return Math.min(this.projectVisibilityLevel, this.namespaceVisibilityLevel); + }, + restrictedVisibilityLevelsSet() { + return new Set(this.restrictedVisibilityLevels); + }, allowedVisibilityLevels() { - return this.getAllowedVisibilityLevels(); + const allowedLevels = Object.entries(VISIBILITY_LEVELS_STRING_TO_INTEGER).reduce( + (levels, [levelName, levelValue]) => { + if ( + !this.restrictedVisibilityLevelsSet.has(levelValue) && + levelValue <= this.visibilityLevelCap + ) { + levels.push(levelName); + } + return levels; + }, + [], + ); + + if (!allowedLevels.length) { + return [VISIBILITY_LEVEL_PRIVATE_STRING]; + } + + return allowedLevels; }, visibilityLevels() { return [ @@ -143,13 +177,15 @@ export default { this.form.fields.slug.value = kebabCase(newVal); }, }, + created() { + this.form.fields.visibility.value = this.getMaximumAllowedVisibilityLevel( + VISIBILITY_LEVEL_PUBLIC_STRING, + ); + }, methods: { isVisibilityLevelDisabled(visibility) { return !this.allowedVisibilityLevels.includes(visibility); }, - getInitialVisibilityValue() { - return this.getMaximumAllowedVisibilityLevel(this.projectVisibility); - }, setNamespace(namespace) { this.form.fields.namespace.value = namespace; this.form.fields.namespace.state = true; @@ -157,42 +193,8 @@ export default { this.form.fields.visibility.value, ); }, - getProjectVisibilityLevel() { - return VISIBILITY_LEVELS_STRING_TO_INTEGER[this.projectVisibility]; - }, - getNamespaceVisibilityLevel() { - const visibility = - this.form?.fields?.namespace?.value?.visibility || VISIBILITY_LEVEL_PUBLIC_STRING; - return VISIBILITY_LEVELS_STRING_TO_INTEGER[visibility]; - }, - getVisibilityLevelCap() { - return Math.min(this.getProjectVisibilityLevel(), this.getNamespaceVisibilityLevel()); - }, - getRestrictedVisibilityLevelsSet() { - return new Set(this.restrictedVisibilityLevels); - }, - getAllowedVisibilityLevels() { - const allowedLevels = Object.entries(VISIBILITY_LEVELS_STRING_TO_INTEGER).reduce( - (levels, [levelName, levelValue]) => { - if ( - !this.getRestrictedVisibilityLevelsSet().has(levelValue) && - levelValue <= this.getVisibilityLevelCap() - ) { - levels.push(levelName); - } - return levels; - }, - [], - ); - - if (!allowedLevels.length) { - return [VISIBILITY_LEVEL_PRIVATE_STRING]; - } - - return allowedLevels; - }, getMaximumAllowedVisibilityLevel(visibility) { - const allowedVisibilities = this.getAllowedVisibilityLevels().map( + const allowedVisibilities = this.allowedVisibilityLevels.map( (s) => VISIBILITY_LEVELS_STRING_TO_INTEGER[s], ); const current = VISIBILITY_LEVELS_STRING_TO_INTEGER[visibility]; @@ -373,7 +375,7 @@ export default { class="gl-mr-3" data-testid="cancel-button" :disabled="isSaving" - :href="projectFullPath" + :href="cancelPath" > {{ s__('ForkProject|Cancel') }} </gl-button> diff --git a/app/assets/javascripts/pages/projects/forks/new/components/project_namespace.vue b/app/assets/javascripts/pages/projects/forks/new/components/project_namespace.vue index 00e0649deed..5e0c5735bc0 100644 --- a/app/assets/javascripts/pages/projects/forks/new/components/project_namespace.vue +++ b/app/assets/javascripts/pages/projects/forks/new/components/project_namespace.vue @@ -1,14 +1,5 @@ <script> -import { - GlButton, - GlButtonGroup, - GlDropdown, - GlDropdownItem, - GlDropdownText, - GlDropdownSectionHeader, - GlSearchBoxByType, - GlTruncate, -} from '@gitlab/ui'; +import { GlButton, GlButtonGroup, GlCollapsibleListbox } from '@gitlab/ui'; import { createAlert } from '~/flash'; import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants'; import { s__ } from '~/locale'; @@ -20,12 +11,7 @@ export default { components: { GlButton, GlButtonGroup, - GlDropdown, - GlDropdownItem, - GlDropdownText, - GlDropdownSectionHeader, - GlSearchBoxByType, - GlTruncate, + GlCollapsibleListbox, }, apollo: { project: { @@ -61,24 +47,25 @@ export default { }; }, computed: { + loading() { + return this.$apollo.queries.project.loading; + }, rootUrl() { return `${gon.gitlab_url}/`; }, namespaces() { return this.project.forkTargets?.nodes || []; }, - hasMatches() { - return this.namespaces.length; - }, dropdownText() { return this.selectedNamespace?.fullPath || s__('ForkProject|Select a namespace'); }, + namespaceItems() { + return this.namespaces?.map(({ id, fullPath }) => ({ value: id, text: fullPath })); + }, }, methods: { - handleDropdownShown() { - this.$refs.search.focusInput(); - }, - setNamespace(namespace) { + setNamespace(namespaceId) { + const namespace = this.namespaces.find(({ id }) => id === namespaceId); const id = getIdFromGraphQLId(namespace.id); this.$emit('select', { @@ -89,6 +76,9 @@ export default { this.selectedNamespace = { id, fullPath: namespace.fullPath }; }, + searchNamespaces(search) { + this.search = search; + }, }, }; </script> @@ -98,39 +88,19 @@ export default { <gl-button class="gl-text-truncate gl-flex-grow-0! gl-max-w-34" label :title="rootUrl">{{ rootUrl }}</gl-button> - - <gl-dropdown + <gl-collapsible-listbox class="gl-flex-grow-1" - toggle-class="gl-rounded-top-right-base! gl-rounded-bottom-right-base! gl-w-20" data-qa-selector="select_namespace_dropdown" data-testid="select_namespace_dropdown" - no-flip - @shown="handleDropdownShown" - > - <template #button-text> - <gl-truncate :text="dropdownText" position="start" with-tooltip /> - </template> - <gl-search-box-by-type - ref="search" - v-model.trim="search" - :is-loading="$apollo.queries.project.loading" - data-qa-selector="select_namespace_dropdown_search_field" - data-testid="select_namespace_dropdown_search_field" - /> - <template v-if="!$apollo.queries.project.loading"> - <template v-if="hasMatches"> - <gl-dropdown-section-header>{{ __('Namespaces') }}</gl-dropdown-section-header> - <gl-dropdown-item - v-for="namespace of namespaces" - :key="namespace.id" - data-qa-selector="select_namespace_dropdown_item" - @click="setNamespace(namespace)" - > - {{ namespace.fullPath }} - </gl-dropdown-item> - </template> - <gl-dropdown-text v-else>{{ __('No matches found') }}</gl-dropdown-text> - </template> - </gl-dropdown> + :items="namespaceItems" + :header-text="__('Namespaces')" + :no-results-text="__('No matches found')" + :searchable="true" + :searching="loading" + toggle-class="gl-flex-direction-column gl-align-items-stretch!" + :toggle-text="dropdownText" + @search="searchNamespaces" + @select="setNamespace" + /> </gl-button-group> </template> diff --git a/app/assets/javascripts/pages/projects/forks/new/index.js b/app/assets/javascripts/pages/projects/forks/new/index.js index d3a5ce5390f..a31b8b1a1f4 100644 --- a/app/assets/javascripts/pages/projects/forks/new/index.js +++ b/app/assets/javascripts/pages/projects/forks/new/index.js @@ -11,6 +11,7 @@ const { newGroupPath, projectFullPath, visibilityHelpPath, + cancelPath, projectId, projectName, projectPath, @@ -30,6 +31,7 @@ new Vue({ provide: { newGroupPath, visibilityHelpPath, + cancelPath, endpoint, projectFullPath, projectId, diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index 7380055cbbf..37cf345fe77 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,9 +1,7 @@ import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; import initTerraformNotification from '~/projects/terraform_notification'; -import { initSidebarTracking } from '../shared/nav/sidebar_tracking'; import Project from './project'; new Project(); // eslint-disable-line no-new new ShortcutsNavigation(); // eslint-disable-line no-new -initSidebarTracking(); initTerraformNotification(); diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue index 3717d8027c4..d9b0dbbb9b0 100644 --- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_link.vue @@ -22,7 +22,7 @@ export default { GlTooltip, }, i18n: { - contactAdmin: s__('LearnGitlab|Contact your administrator to start a free Ultimate trial.'), + contactAdmin: s__('LearnGitlab|Contact your administrator to enable this action.'), viewAdminList: s__('LearnGitlab|View administrator list'), watchHow: __('Watch how'), }, @@ -50,6 +50,9 @@ export default { openInNewTab() { return ACTION_LABELS[this.action]?.openInNewTab === true || this.value.openInNewTab === true; }, + popoverText() { + return this.value.message || this.$options.i18n.contactAdmin; + }, }, methods: { openModal() { @@ -101,7 +104,7 @@ export default { category="tertiary" icon="question-o" class="ml-auto" - :aria-label="$options.i18n.contactAdmin" + :aria-label="popoverText" size="small" data-testid="contact-admin-popover-trigger" /> @@ -111,7 +114,7 @@ export default { triggers="hover focus" data-testid="contact-admin-popover" > - <p>{{ $options.i18n.contactAdmin }}</p> + <p>{{ popoverText }}</p> <gl-link :href="value.url" class="font-size-inherit" diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js index a4e3ddfc506..d4734b8842d 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request.js @@ -4,14 +4,12 @@ import $ from 'jquery'; import IssuableForm from 'ee_else_ce/issuable/issuable_form'; import IssuableLabelSelector from '~/issuable/issuable_label_selector'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import Diff from '~/diff'; import GLForm from '~/gl_form'; import LabelsSelect from '~/labels/labels_select'; import IssuableTemplateSelectors from '~/issuable/issuable_template_selectors'; import { mountMilestoneDropdown } from '~/sidebar/mount_sidebar'; export default () => { - new Diff(); new ShortcutsNavigation(); new GLForm($('.merge-request-form')); new IssuableForm($('.merge-request-form')); diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js index 568bf19b55e..f0a955e5360 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js @@ -1,5 +1,7 @@ import initNotesApp from '~/mr_notes/init_notes'; +import { initReportAbuse } from '~/projects/merge_requests'; import { initMrPage } from '../page'; initMrPage(); initNotesApp(); +initReportAbuse(); diff --git a/app/assets/javascripts/pages/projects/ml/experiments/show/index.js b/app/assets/javascripts/pages/projects/ml/experiments/show/index.js index 97e436920c7..6947b15dcbe 100644 --- a/app/assets/javascripts/pages/projects/ml/experiments/show/index.js +++ b/app/assets/javascripts/pages/projects/ml/experiments/show/index.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import MlExperiment from '~/ml/experiment_tracking/components/ml_experiment.vue'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; const initShowExperiment = () => { const element = document.querySelector('#js-show-ml-experiment'); @@ -13,6 +14,7 @@ const initShowExperiment = () => { const candidates = JSON.parse(element.dataset.candidates); const metricNames = JSON.parse(element.dataset.metrics); const paramNames = JSON.parse(element.dataset.params); + const pagination = convertObjectPropsToCamelCase(JSON.parse(element.dataset.pagination)); // eslint-disable-next-line no-new new Vue({ @@ -21,6 +23,7 @@ const initShowExperiment = () => { candidates, metricNames, paramNames, + pagination, }, render(h) { return h(MlExperiment); diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js index 27610df482d..4bdbb70d942 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js @@ -67,10 +67,9 @@ function initTakeownershipModal() { }); } -initPipelineSchedulesCallout(); - if (gon.features?.pipelineSchedulesVue) { initPipelineSchedulesApp(); } else { + initPipelineSchedulesCallout(); initTakeownershipModal(); } diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue index fd8b1a6290f..242c5a1a97b 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue @@ -54,7 +54,7 @@ export default { inputNameAttribute: 'schedule[cron]', radioValue: this.initialCronInterval ? KEY_CUSTOM : KEY_EVERY_DAY, cronInterval: this.initialCronInterval, - cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron', + cronSyntaxUrl: 'https://docs.gitlab.com/ee/topics/cron/', }; }, computed: { @@ -95,7 +95,7 @@ export default { }, { value: KEY_CUSTOM, - text: s__('PipelineScheduleIntervalPattern|Custom (%{linkStart}Cron syntax%{linkEnd})'), + text: s__('PipelineScheduleIntervalPattern|Custom (%{linkStart}Learn more.%{linkEnd})'), link: this.cronSyntaxUrl, }, ]; diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js index abd17efc498..8440d0e77cd 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js @@ -3,7 +3,7 @@ import Vue from 'vue'; import { __ } from '~/locale'; import RefSelector from '~/ref/components/ref_selector.vue'; import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants'; -import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list'; +import setupNativeFormVariableList from '~/ci/ci_variable_list/native_form_variable_list'; import GlFieldErrors from '~/gl_field_errors'; import Translate from '~/vue_shared/translate'; import { initTimezoneDropdown } from '../../../profiles/init_timezone_dropdown'; diff --git a/app/assets/javascripts/pages/projects/pipelines/new/index.js b/app/assets/javascripts/pages/projects/pipelines/new/index.js index e1f71965853..9b94b8ba96b 100644 --- a/app/assets/javascripts/pages/projects/pipelines/new/index.js +++ b/app/assets/javascripts/pages/projects/pipelines/new/index.js @@ -1,3 +1,3 @@ -import initNewPipelineForm from '~/pipeline_new/index'; +import initNewPipelineForm from '~/ci/pipeline_new/index'; initNewPipelineForm(); diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js index 9a7fd74fd8c..2fd372a45b8 100644 --- a/app/assets/javascripts/pages/projects/project_members/index.js +++ b/app/assets/javascripts/pages/projects/project_members/index.js @@ -20,7 +20,7 @@ initImportProjectMembersTrigger(); const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; initMembersApp(document.querySelector('.js-project-members-list-app'), { [MEMBER_TYPES.user]: { - tableFields: SHARED_FIELDS.concat(['source', 'granted', 'userCreatedAt', 'lastActivityOn']), + tableFields: SHARED_FIELDS.concat(['source', 'activity']), tableAttrs: { tr: { 'data-qa-selector': 'member_row' } }, tableSortableFields: [ 'account', diff --git a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js index 8909ff1f221..895c7d0a18e 100644 --- a/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js +++ b/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js @@ -1,7 +1,7 @@ import initArtifactsSettings from '~/artifacts_settings'; import SecretValues from '~/behaviors/secret_values'; import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers'; -import initVariableList from '~/ci_variable_list'; +import initVariableList from '~/ci/ci_variable_list'; import initDeployFreeze from '~/deploy_freeze'; import registrySettingsApp from '~/packages_and_registries/settings/project/registry_settings_bundle'; import { initRunnerAwsDeployments } from '~/pages/shared/mount_runner_aws_deployments'; @@ -11,6 +11,7 @@ import initSettingsPanels from '~/settings_panels'; import { initTokenAccess } from '~/token_access'; import { initCiSecureFiles } from '~/ci_secure_files'; import initDeployTokens from '~/deploy_tokens'; +import { initProjectRunners } from '~/ci/runner/project_runners'; // Initialize expandable settings panels initSettingsPanels(); @@ -37,11 +38,13 @@ document.querySelector('.js-toggle-extra-settings').addEventListener('click', (e registrySettingsApp(); initDeployTokens(); initDeployFreeze(); - initSettingsPipelinesTriggers(); initArtifactsSettings(); + +initProjectRunners(); initSharedRunnersToggle(); initInstallRunner(); initRunnerAwsDeployments(); + initTokenAccess(); initCiSecureFiles(); diff --git a/app/assets/javascripts/pages/projects/settings/merge_requests/index.js b/app/assets/javascripts/pages/projects/settings/merge_requests/index.js index 0f7ede8ed42..40741be5f53 100644 --- a/app/assets/javascripts/pages/projects/settings/merge_requests/index.js +++ b/app/assets/javascripts/pages/projects/settings/merge_requests/index.js @@ -1,7 +1,4 @@ -import groupsSelect from '~/groups_select'; import UserCallout from '~/user_callout'; -groupsSelect(); - // eslint-disable-next-line no-new new UserCallout({ className: 'js-mr-approval-callout' }); diff --git a/app/assets/javascripts/pages/projects/usage_quotas/index.js b/app/assets/javascripts/pages/projects/usage_quotas/index.js new file mode 100644 index 00000000000..885b8ca8e12 --- /dev/null +++ b/app/assets/javascripts/pages/projects/usage_quotas/index.js @@ -0,0 +1,9 @@ +import initProjectStorage from '~/usage_quotas/storage/init_project_storage'; +import initSearchSettings from '~/search_settings'; + +const initVueApp = () => { + initProjectStorage('js-project-storage-count-app'); +}; + +initVueApp(); +initSearchSettings(); diff --git a/app/assets/javascripts/pages/users/index.js b/app/assets/javascripts/pages/users/index.js index 5cbb7a06bc1..30c351359e4 100644 --- a/app/assets/javascripts/pages/users/index.js +++ b/app/assets/javascripts/pages/users/index.js @@ -1,6 +1,7 @@ import $ from 'jquery'; import { setCookie } from '~/lib/utils/common_utils'; import UserCallout from '~/user_callout'; +import { initReportAbuse } from '~/users/profile'; import UserTabs from './user_tabs'; function initUserProfile(action) { @@ -19,3 +20,4 @@ const page = $('body').attr('data-page'); const action = page.split(':')[1]; initUserProfile(action); new UserCallout(); // eslint-disable-line no-new +initReportAbuse(); |