diff options
Diffstat (limited to 'app/assets/javascripts/pages')
28 files changed, 162 insertions, 483 deletions
diff --git a/app/assets/javascripts/pages/admin/applications/index.js b/app/assets/javascripts/pages/admin/applications/index.js new file mode 100644 index 00000000000..3397b02aeba --- /dev/null +++ b/app/assets/javascripts/pages/admin/applications/index.js @@ -0,0 +1,3 @@ +import initApplicationDeleteButtons from '~/admin/applications'; + +initApplicationDeleteButtons(); diff --git a/app/assets/javascripts/pages/admin/clusters/new/index.js b/app/assets/javascripts/pages/admin/clusters/connect/index.js index de9ded87ef3..de9ded87ef3 100644 --- a/app/assets/javascripts/pages/admin/clusters/new/index.js +++ b/app/assets/javascripts/pages/admin/clusters/connect/index.js diff --git a/app/assets/javascripts/pages/admin/topics/edit/index.js b/app/assets/javascripts/pages/admin/topics/edit/index.js index c4e05bbd092..f5e6d044865 100644 --- a/app/assets/javascripts/pages/admin/topics/edit/index.js +++ b/app/assets/javascripts/pages/admin/topics/edit/index.js @@ -2,7 +2,10 @@ import $ from 'jquery'; import GLForm from '~/gl_form'; import initFilePickers from '~/file_pickers'; import ZenMode from '~/zen_mode'; +import initRemoveAvatar from '~/admin/topics'; new GLForm($('.js-project-topic-form')); // eslint-disable-line no-new initFilePickers(); new ZenMode(); // eslint-disable-line no-new + +initRemoveAvatar(); diff --git a/app/assets/javascripts/pages/dashboard/todos/index/todos.js b/app/assets/javascripts/pages/dashboard/todos/index/todos.js index cabb1b24ae6..c4bbbdcd8ec 100644 --- a/app/assets/javascripts/pages/dashboard/todos/index/todos.js +++ b/app/assets/javascripts/pages/dashboard/todos/index/todos.js @@ -96,6 +96,8 @@ export default class Todos { target.setAttribute('disabled', true); target.classList.add('disabled'); + target.querySelector('.gl-spinner-container').classList.add('gl-mr-2'); + axios[target.dataset.method](target.dataset.href) .then(({ data }) => { this.updateRowState(target); @@ -118,6 +120,8 @@ export default class Todos { target.removeAttribute('disabled'); target.classList.remove('disabled'); + target.querySelector('.gl-spinner-container').classList.remove('gl-mr-2'); + if (isInactive === true) { restoreBtn.classList.add('hidden'); doneBtn.classList.remove('hidden'); @@ -140,6 +144,8 @@ export default class Todos { target.setAttribute('disabled', true); target.classList.add('disabled'); + target.querySelector('.gl-spinner-container').classList.add('gl-mr-2'); + axios[target.dataset.method](target.dataset.href, { ids: this.todo_ids, }) @@ -163,6 +169,8 @@ export default class Todos { target.removeAttribute('disabled'); target.classList.remove('disabled'); + target.querySelector('.gl-spinner-container').classList.remove('gl-mr-2'); + this.todo_ids = target === markAllDoneBtn ? data.updated_ids : []; undoAllBtn.classList.toggle('hidden'); markAllDoneBtn.classList.toggle('hidden'); diff --git a/app/assets/javascripts/pages/groups/clusters/new/index.js b/app/assets/javascripts/pages/groups/clusters/connect/index.js index de9ded87ef3..de9ded87ef3 100644 --- a/app/assets/javascripts/pages/groups/clusters/new/index.js +++ b/app/assets/javascripts/pages/groups/clusters/connect/index.js diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 14ce3f775b1..280b544af3c 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -1,16 +1,12 @@ import { groupMemberRequestFormatter } from '~/groups/members/utils'; -import groupsSelect from '~/groups_select'; import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; import initInviteGroupsModal from '~/invite_members/init_invite_groups_modal'; -import initInviteMembersForm from '~/invite_members/init_invite_members_form'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; import { s__ } from '~/locale'; -import memberExpirationDate from '~/member_expiration_date'; import { initMembersApp } from '~/members'; import { MEMBER_TYPES } from '~/members/constants'; import { groupLinkRequestFormatter } from '~/members/utils'; -import UsersSelect from '~/users_select'; const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; @@ -22,7 +18,7 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), { requestFormatter: groupMemberRequestFormatter, filteredSearchBar: { show: true, - tokens: ['two_factor', 'with_inherited_permissions'], + tokens: ['two_factor', 'with_inherited_permissions', 'enterprise'], searchParam: 'search', placeholder: s__('Members|Filter members'), recentSearchesStorageKey: 'group_members', @@ -53,16 +49,7 @@ initMembersApp(document.querySelector('.js-group-members-list-app'), { }, }); -groupsSelect(); -memberExpirationDate(); -memberExpirationDate('.js-access-expiration-date-groups'); initInviteMembersModal(); initInviteGroupsModal(); initInviteMembersTrigger(); initInviteGroupTrigger(); - -// This is only used when `invite_members_group_modal` feature flag is disabled. -// This can be removed when `invite_members_group_modal` feature flag is removed. -initInviteMembersForm(); - -new UsersSelect(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/jira_connect/oauth_callbacks/index.js b/app/assets/javascripts/pages/jira_connect/oauth_callbacks/index.js new file mode 100644 index 00000000000..3fe238dcb35 --- /dev/null +++ b/app/assets/javascripts/pages/jira_connect/oauth_callbacks/index.js @@ -0,0 +1,28 @@ +function getOriginURL() { + const origin = new URL(window.opener.location); + origin.hash = ''; + origin.search = ''; + + return origin; +} + +function postMessageToJiraConnectApp(data) { + window.opener.postMessage(data, getOriginURL().toString()); +} + +function initOAuthCallbacks() { + const params = new URLSearchParams(window.location.search); + if (params.has('code') && params.has('state')) { + postMessageToJiraConnectApp({ + success: true, + code: params.get('code'), + state: params.get('state'), + }); + } else { + postMessageToJiraConnectApp({ success: false }); + } + + window.close(); +} + +initOAuthCallbacks(); diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 2fc9a111405..740fdb8a96a 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import Vuex from 'vuex'; import VueApollo from 'vue-apollo'; import VueRouter from 'vue-router'; import TableOfContents from '~/blob/components/table_contents.vue'; @@ -11,7 +12,9 @@ import initWebIdeLink from '~/pages/projects/shared/web_ide_link'; import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue'; import BlobContentViewer from '~/repository/components/blob_content_viewer.vue'; import '~/sourcegraph/load'; +import createStore from '~/code_navigation/store'; +Vue.use(Vuex); Vue.use(VueApollo); Vue.use(VueRouter); @@ -29,6 +32,7 @@ if (viewBlobEl) { // eslint-disable-next-line no-new new Vue({ el: viewBlobEl, + store: createStore(), router, apolloProvider, provide: { @@ -78,7 +82,7 @@ GpgBadges.fetch(); const codeNavEl = document.getElementById('js-code-navigation'); -if (codeNavEl) { +if (codeNavEl && !viewBlobEl) { const { codeNavigationPath, blobPath, definitionPathPrefix } = codeNavEl.dataset; // eslint-disable-next-line promise/catch-or-return diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js index d279c4cbb08..f3530b46845 100644 --- a/app/assets/javascripts/pages/projects/branches/index/index.js +++ b/app/assets/javascripts/pages/projects/branches/index/index.js @@ -1,12 +1,9 @@ import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior'; -import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner'; import BranchSortDropdown from '~/branches/branch_sort_dropdown'; import initDiverganceGraph from '~/branches/divergence_graph'; import initDeleteBranchButton from '~/branches/init_delete_branch_button'; import initDeleteBranchModal from '~/branches/init_delete_branch_modal'; -AjaxLoadingSpinner.init(); - const { divergingCountsEndpoint, defaultBranch } = document.querySelector( '.js-branch-list', ).dataset; diff --git a/app/assets/javascripts/pages/projects/ci/secure_files/show/index.js b/app/assets/javascripts/pages/projects/ci/secure_files/show/index.js new file mode 100644 index 00000000000..61486606665 --- /dev/null +++ b/app/assets/javascripts/pages/projects/ci/secure_files/show/index.js @@ -0,0 +1,3 @@ +import { initCiSecureFiles } from '~/ci_secure_files'; + +initCiSecureFiles(); diff --git a/app/assets/javascripts/pages/projects/clusters/new/index.js b/app/assets/javascripts/pages/projects/clusters/connect/index.js index de9ded87ef3..de9ded87ef3 100644 --- a/app/assets/javascripts/pages/projects/clusters/new/index.js +++ b/app/assets/javascripts/pages/projects/clusters/connect/index.js diff --git a/app/assets/javascripts/pages/projects/environments/index/index.js b/app/assets/javascripts/pages/projects/environments/index/index.js index f0554d64ddc..8e0d9ee0eab 100644 --- a/app/assets/javascripts/pages/projects/environments/index/index.js +++ b/app/assets/javascripts/pages/projects/environments/index/index.js @@ -1,11 +1,5 @@ -import initEnvironments from '~/environments/'; -import initNewEnvironments from '~/environments/new_index'; +import initEnvironments from '~/environments/index'; -let el = document.getElementById('environments-list-view'); +const el = document.getElementById('environments-table'); -if (el) { - initEnvironments(el); -} else { - el = document.getElementById('environments-table'); - initNewEnvironments(el); -} +initEnvironments(el); diff --git a/app/assets/javascripts/pages/projects/forks/new/components/app.vue b/app/assets/javascripts/pages/projects/forks/new/components/app.vue index 7fb41c6e7b7..0995a2118b1 100644 --- a/app/assets/javascripts/pages/projects/forks/new/components/app.vue +++ b/app/assets/javascripts/pages/projects/forks/new/components/app.vue @@ -10,38 +10,6 @@ export default { type: String, required: true, }, - endpoint: { - type: String, - required: true, - }, - projectFullPath: { - type: String, - required: true, - }, - projectId: { - type: String, - required: true, - }, - projectName: { - type: String, - required: true, - }, - projectPath: { - type: String, - required: true, - }, - projectDescription: { - type: String, - required: true, - }, - projectVisibility: { - type: String, - required: true, - }, - restrictedVisibilityLevels: { - type: Array, - required: true, - }, }, }; </script> @@ -62,16 +30,7 @@ export default { </p> </div> <div class="col-lg-9"> - <fork-form - :endpoint="endpoint" - :project-full-path="projectFullPath" - :project-id="projectId" - :project-name="projectName" - :project-path="projectPath" - :project-description="projectDescription" - :project-visibility="projectVisibility" - :restricted-visibility-levels="restrictedVisibilityLevels" - /> + <fork-form /> </div> </div> </template> 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 25b62e6c971..701bf0c1e1d 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 @@ -72,40 +72,29 @@ export default { visibilityHelpPath: { default: '', }, - }, - props: { endpoint: { - type: String, - required: true, + default: '', }, projectFullPath: { - type: String, - required: true, + default: '', }, projectId: { - type: String, - required: true, + default: '', }, projectName: { - type: String, - required: true, + default: '', }, projectPath: { - type: String, - required: true, + default: '', }, projectDescription: { - type: String, - required: false, default: '', }, projectVisibility: { - type: String, - required: true, + default: '', }, restrictedVisibilityLevels: { - type: Array, - required: true, + default: [], }, }, data() { diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue deleted file mode 100644 index 10753de6cd0..00000000000 --- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list.vue +++ /dev/null @@ -1,93 +0,0 @@ -<script> -import { GlTabs, GlTab, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; -import createFlash from '~/flash'; -import axios from '~/lib/utils/axios_utils'; -import { __ } from '~/locale'; -import ForkGroupsListItem from './fork_groups_list_item.vue'; - -export default { - components: { - GlTabs, - GlTab, - GlLoadingIcon, - GlSearchBoxByType, - ForkGroupsListItem, - }, - props: { - endpoint: { - type: String, - required: true, - }, - }, - data() { - return { - namespaces: null, - filter: '', - }; - }, - computed: { - filteredNamespaces() { - return this.namespaces.filter((n) => - n.name.toLowerCase().includes(this.filter.toLowerCase()), - ); - }, - }, - - mounted() { - this.loadGroups(); - }, - - methods: { - loadGroups() { - axios - .get(this.endpoint) - .then((response) => { - this.namespaces = response.data.namespaces; - }) - .catch(() => - createFlash({ - message: __('There was a problem fetching groups.'), - }), - ); - }, - }, - - i18n: { - searchPlaceholder: __('Search by name'), - }, -}; -</script> -<template> - <gl-tabs class="fork-groups"> - <gl-tab :title="__('Groups and subgroups')"> - <gl-loading-icon v-if="!namespaces" size="md" class="gl-mt-3" /> - <template v-else-if="namespaces.length === 0"> - <div class="gl-text-center"> - <div class="h5">{{ __('No available groups to fork the project.') }}</div> - <p class="gl-mt-5"> - {{ __('You must have permission to create a project in a group before forking.') }} - </p> - </div> - </template> - <div v-else-if="filteredNamespaces.length === 0" class="gl-text-center gl-mt-3"> - {{ s__('GroupsTree|No groups matched your search') }} - </div> - <ul v-else class="groups-list group-list-tree"> - <fork-groups-list-item - v-for="(namespace, index) in filteredNamespaces" - :key="index" - :group="namespace" - /> - </ul> - </gl-tab> - <template #tabs-end> - <gl-search-box-by-type - v-if="namespaces && namespaces.length" - v-model="filter" - :placeholder="$options.i18n.searchPlaceholder" - class="gl-align-self-center gl-ml-auto fork-filtered-search" - data-qa-selector="fork_groups_list_search_field" - /> - </template> - </gl-tabs> -</template> diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue deleted file mode 100644 index d41488acf46..00000000000 --- a/app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue +++ /dev/null @@ -1,148 +0,0 @@ -<script> -import { - GlLink, - GlButton, - GlIcon, - GlAvatar, - GlTooltipDirective, - GlTooltip, - GlBadge, - GlSafeHtmlDirective as SafeHtml, -} from '@gitlab/ui'; -import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/groups/constants'; -import csrf from '~/lib/utils/csrf'; -import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue'; - -export default { - components: { - GlIcon, - GlAvatar, - GlBadge, - GlButton, - GlTooltip, - GlLink, - UserAccessRoleBadge, - }, - directives: { - GlTooltip: GlTooltipDirective, - SafeHtml, - }, - props: { - group: { - type: Object, - required: true, - }, - }, - data() { - return { namespaces: null, isForking: false }; - }, - - computed: { - rowClass() { - return { - 'has-description': this.group.description, - 'being-removed': this.isGroupPendingRemoval, - }; - }, - isGroupPendingRemoval() { - return this.group.marked_for_deletion; - }, - hasForkedProject() { - return Boolean(this.group.forked_project_path); - }, - visibilityIcon() { - return VISIBILITY_TYPE_ICON[this.group.visibility]; - }, - visibilityTooltip() { - return GROUP_VISIBILITY_TYPE[this.group.visibility]; - }, - isSelectButtonDisabled() { - return !this.group.can_create_project; - }, - }, - - methods: { - fork() { - this.isForking = true; - this.$refs.form.submit(); - }, - }, - - csrf, -}; -</script> -<template> - <li :class="rowClass" class="group-row"> - <div class="group-row-contents gl-display-flex gl-align-items-center gl-py-3 gl-pr-5"> - <div - class="folder-toggle-wrap gl-mr-3 gl-display-flex gl-align-items-center gl-text-gray-500" - > - <gl-icon name="folder-o" /> - </div> - <gl-link - :href="group.relative_path" - class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3" - > - <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatarUrl" /> - </gl-link> - <div class="gl-min-w-0 gl-display-flex gl-flex-grow-1 gl-flex-shrink-1 gl-align-items-center"> - <div class="gl-min-w-0 gl-flex-grow-1 flex-shrink-1"> - <div class="title gl-display-flex gl-align-items-center gl-flex-wrap gl-mr-3"> - <gl-link :href="group.relative_path" class="gl-mt-3 gl-mr-3 gl-text-gray-900!"> - {{ group.full_name }} - </gl-link> - <gl-icon - v-gl-tooltip.hover.bottom - class="gl-display-inline-flex gl-mt-3 gl-mr-3 gl-text-gray-500" - :name="visibilityIcon" - :title="visibilityTooltip" - /> - <gl-badge - v-if="isGroupPendingRemoval" - variant="warning" - class="gl-display-none gl-sm-display-flex gl-mt-3 gl-mr-1" - >{{ __('pending deletion') }}</gl-badge - > - <user-access-role-badge v-if="group.permission" class="gl-mt-3"> - {{ group.permission }} - </user-access-role-badge> - </div> - <div v-if="group.description" class="description gl-line-height-20"> - <span v-safe-html="group.markdown_description"> </span> - </div> - </div> - <div class="gl-display-flex gl-flex-shrink-0"> - <gl-button - v-if="hasForkedProject" - class="gl-h-7 gl-text-decoration-none!" - :href="group.forked_project_path" - >{{ __('Go to fork') }}</gl-button - > - <template v-else> - <div ref="selectButtonWrapper"> - <form ref="form" method="POST" :action="group.fork_path"> - <input type="hidden" name="authenticity_token" :value="$options.csrf.token" /> - <gl-button - type="submit" - class="gl-h-7" - :data-qa-name="group.full_name" - category="secondary" - variant="success" - :disabled="isSelectButtonDisabled" - :loading="isForking" - @click="fork" - >{{ __('Select') }}</gl-button - > - </form> - </div> - <gl-tooltip v-if="isSelectButtonDisabled" :target="() => $refs.selectButtonWrapper"> - {{ - __('You must have permission to create a project in a namespace before forking.') - }} - </gl-tooltip> - </template> - </div> - </div> - </div> - </li> -</template> diff --git a/app/assets/javascripts/pages/projects/forks/new/index.js b/app/assets/javascripts/pages/projects/forks/new/index.js index 1a171252048..cbf74f755e7 100644 --- a/app/assets/javascripts/pages/projects/forks/new/index.js +++ b/app/assets/javascripts/pages/projects/forks/new/index.js @@ -1,61 +1,42 @@ import Vue from 'vue'; import App from './components/app.vue'; -import ForkGroupsList from './components/fork_groups_list.vue'; const mountElement = document.getElementById('fork-groups-mount-element'); -if (gon.features.forkProjectForm) { - const { - forkIllustration, - endpoint, +const { + forkIllustration, + endpoint, + newGroupPath, + projectFullPath, + visibilityHelpPath, + projectId, + projectName, + projectPath, + projectDescription, + projectVisibility, + restrictedVisibilityLevels, +} = mountElement.dataset; + +// eslint-disable-next-line no-new +new Vue({ + el: mountElement, + provide: { newGroupPath, - projectFullPath, visibilityHelpPath, + endpoint, + projectFullPath, projectId, projectName, projectPath, projectDescription, projectVisibility, - restrictedVisibilityLevels, - } = mountElement.dataset; - - // eslint-disable-next-line no-new - new Vue({ - el: mountElement, - provide: { - newGroupPath, - visibilityHelpPath, - }, - render(h) { - return h(App, { - props: { - forkIllustration, - endpoint, - newGroupPath, - projectFullPath, - visibilityHelpPath, - projectId, - projectName, - projectPath, - projectDescription, - projectVisibility, - restrictedVisibilityLevels: JSON.parse(restrictedVisibilityLevels), - }, - }); - }, - }); -} else { - const { endpoint } = mountElement.dataset; - - // eslint-disable-next-line no-new - new Vue({ - el: mountElement, - render(h) { - return h(ForkGroupsList, { - props: { - endpoint, - }, - }); - }, - }); -} + restrictedVisibilityLevels: JSON.parse(restrictedVisibilityLevels), + }, + render(h) { + return h(App, { + props: { + forkIllustration, + }, + }); + }, +}); diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue index adae97c6b6f..67962d69fa5 100644 --- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab.vue @@ -27,11 +27,6 @@ export default { required: true, type: Object, }, - inviteMembers: { - type: Boolean, - required: false, - default: false, - }, project: { required: true, type: Object, @@ -54,7 +49,7 @@ export default { }, }, mounted() { - if (this.inviteMembers && this.getCookieForInviteMembers()) { + if (this.getCookieForInviteMembers()) { this.openInviteMembersModal('celebrate'); } diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue index ad6dfbf41ca..09cc0032871 100644 --- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue +++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue @@ -64,15 +64,7 @@ export default { <img :src="svg" :alt="actionLabel" /> <h6>{{ title }}</h6> <p class="gl-font-sm gl-text-gray-700">{{ description }}</p> - <gl-link - :href="url" - target="_blank" - rel="noopener noreferrer" - data-track-action="click_link" - :data-track-label="actionLabel" - data-track-property="Growth::Activation::Experiment::LearnGitLabB" - >{{ actionLabel }}</gl-link - > + <gl-link :href="url" target="_blank" rel="noopener noreferrer" /> </div> </gl-card> </template> 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 d0ec02bbd0c..573f996a254 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 @@ -32,7 +32,7 @@ export default { ); }, openInNewTab() { - return ACTION_LABELS[this.action]?.openInNewTab === true; + return ACTION_LABELS[this.action]?.openInNewTab === true || this.value.openInNewTab === true; }, }, methods: { @@ -65,8 +65,6 @@ export default { data-testid="uncompleted-learn-gitlab-link" data-track-action="click_link" :data-track-label="$options.i18n.ACTION_LABELS[action].title" - data-track-property="Growth::Conversion::Experiment::LearnGitLab" - data-track-experiment="change_continuous_onboarding_link_urls" > {{ $options.i18n.ACTION_LABELS[action].title }} </gl-link> diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js index 880cf699e5e..1887c48dd1b 100644 --- a/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js +++ b/app/assets/javascripts/pages/projects/learn_gitlab/constants/index.js @@ -62,7 +62,6 @@ export const ACTION_LABELS = { description: s__('LearnGitLab|Scan your code to uncover vulnerabilities before deploying.'), section: 'deploy', position: 1, - openInNewTab: true, }, issueCreated: { title: s__('LearnGitLab|Create an issue'), diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js index c62cab1a425..63357ea9c72 100644 --- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js +++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; -import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import LearnGitlab from '../components/learn_gitlab.vue'; function initLearnGitlab() { @@ -13,13 +13,12 @@ function initLearnGitlab() { const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions)); const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections)); const project = convertObjectPropsToCamelCase(JSON.parse(el.dataset.project)); - const { inviteMembers } = el.dataset; return new Vue({ el, render(createElement) { return createElement(LearnGitlab, { - props: { actions, sections, project, inviteMembers: parseBoolean(inviteMembers) }, + props: { actions, sections, project }, }); }, }); diff --git a/app/assets/javascripts/pages/projects/pages_domains/form.js b/app/assets/javascripts/pages/projects/pages_domains/form.js index 169530685ad..6836d399fa4 100644 --- a/app/assets/javascripts/pages/projects/pages_domains/form.js +++ b/app/assets/javascripts/pages/projects/pages_domains/form.js @@ -1,4 +1,4 @@ -import setupToggleButtons from '~/toggle_buttons'; +import { initToggle } from '~/toggles'; function updateVisibility(selector, isVisible) { Array.from(document.querySelectorAll(selector)).forEach((el) => { @@ -11,12 +11,12 @@ function updateVisibility(selector, isVisible) { } export default () => { - const toggleContainer = document.querySelector('.js-auto-ssl-toggle-container'); + const sslToggle = initToggle(document.querySelector('.js-enable-ssl-gl-toggle')); + const sslToggleInput = document.querySelector('.js-project-feature-toggle-input'); - if (toggleContainer) { - const onToggleButtonClicked = (isAutoSslEnabled) => { + if (sslToggle) { + sslToggle.$on('change', (isAutoSslEnabled) => { updateVisibility('.js-shown-unless-auto-ssl', !isAutoSslEnabled); - updateVisibility('.js-shown-if-auto-ssl', isAutoSslEnabled); Array.from(document.querySelectorAll('.js-enabled-unless-auto-ssl')).forEach((el) => { @@ -26,8 +26,9 @@ export default () => { el.removeAttribute('disabled'); } }); - }; - setupToggleButtons(toggleContainer, onToggleButtonClicked); + sslToggleInput.setAttribute('value', isAutoSslEnabled); + }); } + return sslToggle; }; diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js deleted file mode 100644 index 6017cd653e4..00000000000 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js +++ /dev/null @@ -1,54 +0,0 @@ -import $ from 'jquery'; -import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; - -export default class TargetBranchDropdown { - constructor() { - this.$dropdown = $('.js-target-branch-dropdown'); - this.$dropdownToggle = this.$dropdown.find('.dropdown-toggle-text'); - this.$input = $('#schedule_ref'); - this.initDefaultBranch(); - this.initDropdown(); - } - - initDropdown() { - initDeprecatedJQueryDropdown(this.$dropdown, { - data: this.formatBranchesList(), - filterable: true, - selectable: true, - toggleLabel: (item) => item.name, - search: { - fields: ['name'], - }, - clicked: (cfg) => this.updateInputValue(cfg), - text: (item) => item.name, - }); - - this.setDropdownToggle(); - } - - formatBranchesList() { - return this.$dropdown.data('data').map((val) => ({ name: val })); - } - - setDropdownToggle() { - const initialValue = this.$input.val(); - - this.$dropdownToggle.text(initialValue); - } - - initDefaultBranch() { - const initialValue = this.$input.val(); - const defaultBranch = this.$dropdown.data('defaultBranch'); - - if (!initialValue) { - this.$input.val(defaultBranch); - } - } - - updateInputValue({ selectedObj, e }) { - e.preventDefault(); - - this.$input.val(selectedObj.name); - gl.pipelineScheduleFieldErrors.updateFormValidityState(); - } -} 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 9056c76d6ca..9c039a6be81 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 @@ -1,10 +1,12 @@ import $ from 'jquery'; 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 GlFieldErrors from '../../../../gl_field_errors'; import Translate from '../../../../vue_shared/translate'; import intervalPatternInput from './components/interval_pattern_input.vue'; -import TargetBranchDropdown from './components/target_branch_dropdown'; import TimezoneDropdown from './components/timezone_dropdown'; Vue.use(Translate); @@ -30,6 +32,52 @@ function initIntervalPatternInput() { }); } +function getEnabledRefTypes() { + const refTypes = [REF_TYPE_BRANCHES]; + + if (gon.features.pipelineSchedulesWithTags) { + refTypes.push(REF_TYPE_TAGS); + } + + return refTypes; +} + +function initTargetRefDropdown() { + const $refField = document.getElementById('schedule_ref'); + const el = document.querySelector('.js-target-ref-dropdown'); + const { projectId, defaultBranch } = el.dataset; + + if (!$refField.value) { + $refField.value = defaultBranch; + } + + const refDropdown = new Vue({ + el, + render(h) { + return h(RefSelector, { + props: { + enabledRefTypes: getEnabledRefTypes(), + projectId, + value: $refField.value, + useSymbolicRefNames: true, + translations: { + dropdownHeader: gon.features.pipelineSchedulesWithTags + ? __('Select target branch or tag') + : __('Select target branch'), + }, + }, + class: 'gl-w-full', + }); + }, + }); + + refDropdown.$children[0].$on('input', (newRef) => { + $refField.value = newRef; + }); + + return refDropdown; +} + export default () => { /* Most of the form is written in haml, but for fields with more complex behaviors, * you should mount individual Vue components here. If at some point components need @@ -48,9 +96,10 @@ export default () => { gl.pipelineScheduleFieldErrors.updateFormValidityState(); }, }); - gl.targetBranchDropdown = new TargetBranchDropdown(); gl.pipelineScheduleFieldErrors = new GlFieldErrors(formElement); + initTargetRefDropdown(); + setupNativeFormVariableList({ container: $('.js-ci-variable-list-section'), formField: 'schedule', diff --git a/app/assets/javascripts/pages/projects/project_members/index.js b/app/assets/javascripts/pages/projects/project_members/index.js index 26c42247cf7..2c0394dc12c 100644 --- a/app/assets/javascripts/pages/projects/project_members/index.js +++ b/app/assets/javascripts/pages/projects/project_members/index.js @@ -1,33 +1,20 @@ -import groupsSelect from '~/groups_select'; import initImportAProjectModal from '~/invite_members/init_import_a_project_modal'; import initInviteGroupTrigger from '~/invite_members/init_invite_group_trigger'; -import initInviteMembersForm from '~/invite_members/init_invite_members_form'; import initInviteMembersModal from '~/invite_members/init_invite_members_modal'; import initInviteGroupsModal from '~/invite_members/init_invite_groups_modal'; import initInviteMembersTrigger from '~/invite_members/init_invite_members_trigger'; import { s__ } from '~/locale'; -import memberExpirationDate from '~/member_expiration_date'; import { initMembersApp } from '~/members'; import { MEMBER_TYPES } from '~/members/constants'; import { groupLinkRequestFormatter } from '~/members/utils'; import { projectMemberRequestFormatter } from '~/projects/members/utils'; -import UsersSelect from '~/users_select'; -groupsSelect(); -memberExpirationDate(); -memberExpirationDate('.js-access-expiration-date-groups'); initImportAProjectModal(); initInviteMembersModal(); initInviteGroupsModal(); initInviteMembersTrigger(); initInviteGroupTrigger(); -// This is only used when `invite_members_group_modal` feature flag is disabled. -// This can be removed when `invite_members_group_modal` feature flag is removed. -initInviteMembersForm(); - -new UsersSelect(); // eslint-disable-line no-new - const SHARED_FIELDS = ['account', 'maxRole', 'expiration', 'actions']; initMembersApp(document.querySelector('.js-project-members-list-app'), { [MEMBER_TYPES.user]: { diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue index c28de88554a..8ef31b9b983 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue @@ -60,7 +60,7 @@ export default { contentEditor: { renderFailed: { message: s__( - 'WikiPage|An error occured while trying to render the content editor. Please try again later.', + 'WikiPage|An error occurred while trying to render the content editor. Please try again later.', ), primaryAction: s__('WikiPage|Retry'), }, @@ -495,6 +495,7 @@ export default { :textarea-value="content" :markdown-docs-path="pageInfo.markdownHelpPath" :uploads-path="pageInfo.uploadsPath" + :enable-preview="isMarkdownFormat" class="bordered-box" > <template #textarea> diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js index 7f4e79976bc..996e12bc105 100644 --- a/app/assets/javascripts/pages/users/activity_calendar.js +++ b/app/assets/javascripts/pages/users/activity_calendar.js @@ -7,6 +7,7 @@ import axios from '~/lib/utils/axios_utils'; import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility'; import { formatDate } from '~/lib/utils/datetime/date_format_utility'; import { n__, s__, __ } from '~/locale'; +import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js'; const d3 = { select }; @@ -24,12 +25,6 @@ const CONTRIB_LEGENDS = [ { title: __('30+ contributions'), min: 30 }, ]; -const LOADING_HTML = ` - <div class="text-center"> - <div class="spinner spinner-md"></div> - </div> -`; - function getSystemDate(systemUtcOffsetSeconds) { const date = new Date(); const localUtcOffsetMinutes = 0 - date.getTimezoneOffset(); @@ -286,7 +281,9 @@ export default class ActivityCalendar { this.currentSelectedDate.getDate(), ].join('-'); - $(this.activitiesContainer).html(LOADING_HTML); + $(this.activitiesContainer) + .empty() + .append(loadingIconForLegacyJS({ size: 'lg' })); axios .get(this.calendarActivitiesPath, { |