diff options
Diffstat (limited to 'app/assets/javascripts/pages')
57 files changed, 516 insertions, 332 deletions
diff --git a/app/assets/javascripts/pages/admin/credentials/index.js b/app/assets/javascripts/pages/admin/credentials/index.js new file mode 100644 index 00000000000..868c8e33077 --- /dev/null +++ b/app/assets/javascripts/pages/admin/credentials/index.js @@ -0,0 +1,3 @@ +import initConfirmModal from '~/confirm_modal'; + +initConfirmModal(); diff --git a/app/assets/javascripts/pages/admin/instance_statistics/index.js b/app/assets/javascripts/pages/admin/instance_statistics/index.js new file mode 100644 index 00000000000..d6b0a834ce3 --- /dev/null +++ b/app/assets/javascripts/pages/admin/instance_statistics/index.js @@ -0,0 +1,3 @@ +import initInstanceStatisticsApp from '~/analytics/instance_statistics'; + +document.addEventListener('DOMContentLoaded', () => initInstanceStatisticsApp()); diff --git a/app/assets/javascripts/pages/admin/keys/index.js b/app/assets/javascripts/pages/admin/keys/index.js new file mode 100644 index 00000000000..45b83ffcd67 --- /dev/null +++ b/app/assets/javascripts/pages/admin/keys/index.js @@ -0,0 +1,5 @@ +import initConfirmModal from '~/confirm_modal'; + +document.addEventListener('DOMContentLoaded', () => { + initConfirmModal(); +}); diff --git a/app/assets/javascripts/pages/admin/users/keys/index.js b/app/assets/javascripts/pages/admin/users/keys/index.js new file mode 100644 index 00000000000..45b83ffcd67 --- /dev/null +++ b/app/assets/javascripts/pages/admin/users/keys/index.js @@ -0,0 +1,5 @@ +import initConfirmModal from '~/confirm_modal'; + +document.addEventListener('DOMContentLoaded', () => { + initConfirmModal(); +}); diff --git a/app/assets/javascripts/pages/dashboard/merge_requests/index.js b/app/assets/javascripts/pages/dashboard/merge_requests/index.js index 10df18c85e7..7adae2cdb05 100644 --- a/app/assets/javascripts/pages/dashboard/merge_requests/index.js +++ b/app/assets/javascripts/pages/dashboard/merge_requests/index.js @@ -5,7 +5,7 @@ import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered import { FILTERED_SEARCH } from '~/pages/constants'; document.addEventListener('DOMContentLoaded', () => { - addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys); + addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, true); initFilteredSearch({ page: FILTERED_SEARCH.MERGE_REQUESTS, diff --git a/app/assets/javascripts/pages/groups/group_members/index.js b/app/assets/javascripts/pages/groups/group_members/index.js index 3fa3a132dfa..dc647f5d3cb 100644 --- a/app/assets/javascripts/pages/groups/group_members/index.js +++ b/app/assets/javascripts/pages/groups/group_members/index.js @@ -4,7 +4,8 @@ import memberExpirationDate from '~/member_expiration_date'; import UsersSelect from '~/users_select'; import groupsSelect from '~/groups_select'; import RemoveMemberModal from '~/vue_shared/components/remove_member_modal.vue'; -import initGroupMembersApp from '~/groups/members'; +import { initGroupMembersApp } from '~/groups/members'; +import { memberRequestFormatter, groupLinkRequestFormatter } from '~/groups/members/utils'; function mountRemoveMemberModal() { const el = document.querySelector('.js-remove-member-modal'); @@ -26,10 +27,28 @@ document.addEventListener('DOMContentLoaded', () => { memberExpirationDate('.js-access-expiration-date-groups'); mountRemoveMemberModal(); - initGroupMembersApp(document.querySelector('.js-group-members-list')); - initGroupMembersApp(document.querySelector('.js-group-linked-list')); - initGroupMembersApp(document.querySelector('.js-group-invited-members-list')); - initGroupMembersApp(document.querySelector('.js-group-access-requests-list')); + const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']; + + initGroupMembersApp( + document.querySelector('.js-group-members-list'), + SHARED_FIELDS.concat(['source', 'granted']), + memberRequestFormatter, + ); + initGroupMembersApp( + document.querySelector('.js-group-linked-list'), + SHARED_FIELDS.concat('granted'), + groupLinkRequestFormatter, + ); + initGroupMembersApp( + document.querySelector('.js-group-invited-members-list'), + SHARED_FIELDS.concat('invited'), + memberRequestFormatter, + ); + initGroupMembersApp( + document.querySelector('.js-group-access-requests-list'), + SHARED_FIELDS.concat('requested'), + memberRequestFormatter, + ); new Members(); // eslint-disable-line no-new new UsersSelect(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/groups/issues/index.js b/app/assets/javascripts/pages/groups/issues/index.js index ae481d16ee9..4d0a03e151a 100644 --- a/app/assets/javascripts/pages/groups/issues/index.js +++ b/app/assets/javascripts/pages/groups/issues/index.js @@ -8,18 +8,16 @@ import initManualOrdering from '~/manual_ordering'; const ISSUE_BULK_UPDATE_PREFIX = 'issue_'; -document.addEventListener('DOMContentLoaded', () => { - IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); - issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX); +IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); +issuableInitBulkUpdateSidebar.init(ISSUE_BULK_UPDATE_PREFIX); - initIssuablesList(); +initIssuablesList(); - initFilteredSearch({ - page: FILTERED_SEARCH.ISSUES, - isGroupDecendent: true, - useDefaultState: true, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - }); - projectSelect(); - initManualOrdering(); +initFilteredSearch({ + page: FILTERED_SEARCH.ISSUES, + isGroupDecendent: true, + useDefaultState: true, + filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, }); +projectSelect(); +initManualOrdering(); diff --git a/app/assets/javascripts/pages/groups/registry/repositories/index.js b/app/assets/javascripts/pages/groups/registry/repositories/index.js index cdafe838994..6fd32321568 100644 --- a/app/assets/javascripts/pages/groups/registry/repositories/index.js +++ b/app/assets/javascripts/pages/groups/registry/repositories/index.js @@ -1,10 +1,8 @@ import registryExplorer from '~/registry/explorer/index'; -document.addEventListener('DOMContentLoaded', () => { - const explorer = registryExplorer(); +const explorer = registryExplorer(); - if (explorer) { - explorer.attachBreadcrumb(); - explorer.attachMainComponent(); - } -}); +if (explorer) { + explorer.attachBreadcrumb(); + explorer.attachMainComponent(); +} diff --git a/app/assets/javascripts/pages/groups/security/credentials/index.js b/app/assets/javascripts/pages/groups/security/credentials/index.js new file mode 100644 index 00000000000..868c8e33077 --- /dev/null +++ b/app/assets/javascripts/pages/groups/security/credentials/index.js @@ -0,0 +1,3 @@ +import initConfirmModal from '~/confirm_modal'; + +initConfirmModal(); 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 add483843df..67eb09da5e0 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 @@ -4,6 +4,7 @@ import initVariableList from '~/ci_variable_list'; import initFilteredSearch from '~/pages/search/init_filtered_search'; import GroupRunnersFilteredSearchTokenKeys from '~/filtered_search/group_runners_filtered_search_token_keys'; import { FILTERED_SEARCH } from '~/pages/constants'; +import initSharedRunnersForm from '~/group_settings/mount_shared_runners'; document.addEventListener('DOMContentLoaded', () => { // Initialize expandable settings panels @@ -29,4 +30,6 @@ document.addEventListener('DOMContentLoaded', () => { maskableRegex: variableListEl.dataset.maskableRegex, }); } + + initSharedRunnersForm(); }); diff --git a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue index 983062c79f1..93fe38831be 100644 --- a/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue +++ b/app/assets/javascripts/pages/milestones/shared/components/delete_milestone_modal.vue @@ -1,16 +1,15 @@ <script> -import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; +import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui'; import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as Flash } from '~/flash'; -import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue'; -import { n__, s__, sprintf } from '~/locale'; +import { __, n__, s__, sprintf } from '~/locale'; import { redirectTo } from '~/lib/utils/url_utility'; import eventHub from '../event_hub'; export default { components: { - DeprecatedModal, + GlModal, }, directives: { SafeHtml, @@ -115,20 +114,24 @@ Once deleted, it cannot be undone or recovered.`), }); }, }, + primaryProps: { + text: s__('Milestones|Delete milestone'), + attributes: [{ variant: 'danger' }, { category: 'primary' }], + }, + cancelProps: { + text: __('Cancel'), + }, }; </script> <template> - <deprecated-modal - id="delete-milestone-modal" + <gl-modal + modal-id="delete-milestone-modal" :title="title" - :text="text" - :primary-button-label="s__('Milestones|Delete milestone')" - kind="danger" - @submit="onSubmit" + :action-primary="$options.primaryProps" + :action-cancel="$options.cancelProps" + @primary="onSubmit" > - <template #body="props"> - <p v-safe-html="props.text"></p> - </template> - </deprecated-modal> + <p v-safe-html="text"></p> + </gl-modal> </template> diff --git a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js index 1d559dc6e41..6e68114e04b 100644 --- a/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js +++ b/app/assets/javascripts/pages/milestones/shared/delete_milestone_modal_init.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; -import deleteMilestoneModal from './components/delete_milestone_modal.vue'; +import DeleteMilestoneModal from './components/delete_milestone_modal.vue'; import eventHub from './event_hub'; export default () => { @@ -18,6 +18,8 @@ export default () => { button.querySelector('.js-loading-icon').classList.add('hidden'); }; + const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); + const onRequestStarted = milestoneUrl => { const button = document.querySelector( `.js-delete-milestone-button[data-milestone-url="${milestoneUrl}"]`, @@ -27,35 +29,8 @@ export default () => { eventHub.$once('deleteMilestoneModal.requestFinished', onRequestFinished); }; - const onDeleteButtonClick = event => { - const button = event.currentTarget; - const modalProps = { - milestoneId: parseInt(button.dataset.milestoneId, 10), - milestoneTitle: button.dataset.milestoneTitle, - milestoneUrl: button.dataset.milestoneUrl, - issueCount: parseInt(button.dataset.milestoneIssueCount, 10), - mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), - }; - eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); - eventHub.$emit('deleteMilestoneModal.props', modalProps); - }; - - const deleteMilestoneButtons = document.querySelectorAll('.js-delete-milestone-button'); - deleteMilestoneButtons.forEach(button => { - button.addEventListener('click', onDeleteButtonClick); - }); - - eventHub.$once('deleteMilestoneModal.mounted', () => { - deleteMilestoneButtons.forEach(button => { - button.removeAttribute('disabled'); - }); - }); - return new Vue({ - el: '#delete-milestone-modal', - components: { - deleteMilestoneModal, - }, + el: '#js-delete-milestone-modal', data() { return { modalProps: { @@ -69,10 +44,21 @@ export default () => { }, mounted() { eventHub.$on('deleteMilestoneModal.props', this.setModalProps); - eventHub.$emit('deleteMilestoneModal.mounted'); - }, - beforeDestroy() { - eventHub.$off('deleteMilestoneModal.props', this.setModalProps); + deleteMilestoneButtons.forEach(button => { + button.removeAttribute('disabled'); + button.addEventListener('click', () => { + this.$root.$emit('bv::show::modal', 'delete-milestone-modal'); + eventHub.$once('deleteMilestoneModal.requestStarted', onRequestStarted); + + this.setModalProps({ + milestoneId: parseInt(button.dataset.milestoneId, 10), + milestoneTitle: button.dataset.milestoneTitle, + milestoneUrl: button.dataset.milestoneUrl, + issueCount: parseInt(button.dataset.milestoneIssueCount, 10), + mergeRequestCount: parseInt(button.dataset.milestoneMergeRequestCount, 10), + }); + }); + }); }, methods: { setModalProps(modalProps) { @@ -80,7 +66,7 @@ export default () => { }, }, render(createElement) { - return createElement(deleteMilestoneModal, { + return createElement(DeleteMilestoneModal, { props: this.modalProps, }); }, diff --git a/app/assets/javascripts/pages/profiles/keys/index.js b/app/assets/javascripts/pages/profiles/keys/index.js index d3dcd21f456..4214d5bffb2 100644 --- a/app/assets/javascripts/pages/profiles/keys/index.js +++ b/app/assets/javascripts/pages/profiles/keys/index.js @@ -1,6 +1,9 @@ +import initConfirmModal from '~/confirm_modal'; import AddSshKeyValidation from '~/profile/add_ssh_key_validation'; document.addEventListener('DOMContentLoaded', () => { + initConfirmModal(); + const input = document.querySelector('.js-add-ssh-key-validation-input'); if (!input) return; diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js index 46e59cd6572..f2e8cb38ef5 100644 --- a/app/assets/javascripts/pages/projects/blob/show/index.js +++ b/app/assets/javascripts/pages/projects/blob/show/index.js @@ -3,34 +3,33 @@ import commitPipelineStatus from '~/projects/tree/components/commit_pipeline_sta import BlobViewer from '~/blob/viewer/index'; import initBlob from '~/pages/projects/init_blob'; import GpgBadges from '~/gpg_badges'; +import initWebIdeLink from '~/pages/projects/shared/web_ide_link'; import '~/sourcegraph/load'; import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue'; +import { parseBoolean } from '~/lib/utils/common_utils'; +import { isExperimentEnabled } from '~/lib/utils/experimentation'; const createGitlabCiYmlVisualization = (containerId = '#js-blob-toggle-graph-preview') => { const el = document.querySelector(containerId); - const { filename, blobData } = el?.dataset; + const { isCiConfigFile, blobData } = el?.dataset; - const nameRegexp = /\.gitlab-ci.yml/; - - if (!el || !nameRegexp.test(filename)) { - return; + if (el && parseBoolean(isCiConfigFile)) { + // eslint-disable-next-line no-new + new Vue({ + el, + components: { + GitlabCiYamlVisualization: () => + import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'), + }, + render(createElement) { + return createElement('gitlabCiYamlVisualization', { + props: { + blobData, + }, + }); + }, + }); } - - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - GitlabCiYamlVisualization: () => - import('~/pipelines/components/pipeline_graph/gitlab_ci_yaml_visualization.vue'), - }, - render(createElement) { - return createElement('gitlabCiYamlVisualization', { - props: { - blobData, - }, - }); - }, - }); }; document.addEventListener('DOMContentLoaded', () => { @@ -57,11 +56,13 @@ document.addEventListener('DOMContentLoaded', () => { }); } + initWebIdeLink({ el: document.getElementById('js-blob-web-ide-link') }); + GpgBadges.fetch(); const codeNavEl = document.getElementById('js-code-navigation'); - if (gon.features?.codeNavigation && codeNavEl) { + if (codeNavEl) { const { codeNavigationPath, blobPath, definitionPathPrefix } = codeNavEl.dataset; // eslint-disable-next-line promise/catch-or-return @@ -73,7 +74,7 @@ document.addEventListener('DOMContentLoaded', () => { ); } - if (gon.features?.suggestPipeline) { + if (isExperimentEnabled('suggestPipeline')) { const successPipelineEl = document.querySelector('.js-success-pipeline-modal'); if (successPipelineEl) { diff --git a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js index d270bee25c7..df635522e94 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js +++ b/app/assets/javascripts/pages/projects/ci/lints/ci_lint_editor.js @@ -1,13 +1,11 @@ -import createFlash from '~/flash'; -import { BLOB_EDITOR_ERROR } from '~/blob_edit/constants'; +import EditorLite from '~/editor/editor_lite'; export default class CILintEditor { constructor() { - const monacoEnabled = window?.gon?.features?.monacoCi; this.clearYml = document.querySelector('.clear-yml'); this.clearYml.addEventListener('click', this.clear.bind(this)); - return monacoEnabled ? this.initEditorLite() : this.initAce(); + return this.initEditorLite(); } clear() { @@ -15,34 +13,20 @@ export default class CILintEditor { } initEditorLite() { - import(/* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite') - .then(({ default: EditorLite }) => { - const editorEl = document.getElementById('editor'); - const fileContentEl = document.getElementById('content'); - const form = document.querySelector('.js-ci-lint-form'); + const editorEl = document.getElementById('editor'); + const fileContentEl = document.getElementById('content'); + const form = document.querySelector('.js-ci-lint-form'); - const rootEditor = new EditorLite(); + const rootEditor = new EditorLite(); - this.editor = rootEditor.createInstance({ - el: editorEl, - blobPath: '.gitlab-ci.yml', - blobContent: editorEl.innerText, - }); - - form.addEventListener('submit', () => { - fileContentEl.value = this.editor.getValue(); - }); - }) - .catch(() => createFlash({ message: BLOB_EDITOR_ERROR })); - } - - initAce() { - this.editor = window.ace.edit('ci-editor'); - this.textarea = document.getElementById('content'); + this.editor = rootEditor.createInstance({ + el: editorEl, + blobPath: '.gitlab-ci.yml', + blobContent: editorEl.innerText, + }); - this.editor.getSession().setMode('ace/mode/yaml'); - this.editor.on('input', () => { - this.textarea.value = this.editor.getSession().getValue(); + form.addEventListener('submit', () => { + fileContentEl.value = this.editor.getValue(); }); } } diff --git a/app/assets/javascripts/pages/projects/ci/lints/new/index.js b/app/assets/javascripts/pages/projects/ci/lints/new/index.js index 02bfee9810f..957801320c9 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/new/index.js +++ b/app/assets/javascripts/pages/projects/ci/lints/new/index.js @@ -1,11 +1,17 @@ -import CILintEditor from '../ci_lint_editor'; -import initCILint from '~/ci_lint/index'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; + +const ERROR = __('An error occurred while rendering the linter'); document.addEventListener('DOMContentLoaded', () => { if (gon?.features?.ciLintVue) { - initCILint(); + import(/* webpackChunkName: 'ciLintIndex' */ '~/ci_lint/index') + .then(module => module.default()) + .catch(() => createFlash(ERROR)); } else { - // eslint-disable-next-line no-new - new CILintEditor(); + import(/* webpackChunkName: 'ciLintEditor' */ '../ci_lint_editor') + // eslint-disable-next-line new-cap + .then(module => new module.default()) + .catch(() => createFlash(ERROR)); } }); diff --git a/app/assets/javascripts/pages/projects/ci/lints/show/index.js b/app/assets/javascripts/pages/projects/ci/lints/show/index.js index 8e8a843da0b..957801320c9 100644 --- a/app/assets/javascripts/pages/projects/ci/lints/show/index.js +++ b/app/assets/javascripts/pages/projects/ci/lints/show/index.js @@ -1,3 +1,17 @@ -import CILintEditor from '../ci_lint_editor'; +import createFlash from '~/flash'; +import { __ } from '~/locale'; -document.addEventListener('DOMContentLoaded', () => new CILintEditor()); +const ERROR = __('An error occurred while rendering the linter'); + +document.addEventListener('DOMContentLoaded', () => { + if (gon?.features?.ciLintVue) { + import(/* webpackChunkName: 'ciLintIndex' */ '~/ci_lint/index') + .then(module => module.default()) + .catch(() => createFlash(ERROR)); + } else { + import(/* webpackChunkName: 'ciLintEditor' */ '../ci_lint_editor') + // eslint-disable-next-line new-cap + .then(module => new module.default()) + .catch(() => createFlash(ERROR)); + } +}); diff --git a/app/assets/javascripts/pages/projects/clusters/index/index.js b/app/assets/javascripts/pages/projects/clusters/index/index.js index 744be65bfbe..1124eb5d939 100644 --- a/app/assets/javascripts/pages/projects/clusters/index/index.js +++ b/app/assets/javascripts/pages/projects/clusters/index/index.js @@ -1,5 +1,5 @@ +import initClustersListApp from 'ee_else_ce/clusters_list'; import PersistentUserCallout from '~/persistent_user_callout'; -import initClustersListApp from '~/clusters_list'; document.addEventListener('DOMContentLoaded', () => { const callout = document.querySelector('.gcp-signup-offer'); diff --git a/app/assets/javascripts/pages/projects/commit/pipelines/index.js b/app/assets/javascripts/pages/projects/commit/pipelines/index.js index 1415a6f60c8..26dea17ca8a 100644 --- a/app/assets/javascripts/pages/projects/commit/pipelines/index.js +++ b/app/assets/javascripts/pages/projects/commit/pipelines/index.js @@ -1,14 +1,8 @@ -import $ from 'jquery'; -import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown'; +import { initCommitBoxInfo } from '~/projects/commit_box/info'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; -import { fetchCommitMergeRequests } from '~/commit_merge_requests'; document.addEventListener('DOMContentLoaded', () => { - new MiniPipelineGraph({ - container: '.js-commit-pipeline-graph', - }).bindEvents(); - // eslint-disable-next-line no-jquery/no-load - $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); - fetchCommitMergeRequests(); + initCommitBoxInfo(); + initPipelines(); }); diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js index d5fb2a8be3c..32fb35f97e3 100644 --- a/app/assets/javascripts/pages/projects/commit/show/index.js +++ b/app/assets/javascripts/pages/projects/commit/show/index.js @@ -4,10 +4,8 @@ import $ from 'jquery'; import Diff from '~/diff'; import ZenMode from '~/zen_mode'; import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation'; -import MiniPipelineGraph from '~/mini_pipeline_graph_dropdown'; import initNotes from '~/init_notes'; import initChangesDropdown from '~/init_changes_dropdown'; -import { fetchCommitMergeRequests } from '~/commit_merge_requests'; import '~/sourcegraph/load'; import { handleLocationHash } from '~/lib/utils/common_utils'; import axios from '~/lib/utils/axios_utils'; @@ -15,6 +13,7 @@ import syntaxHighlight from '~/syntax_highlight'; import flash from '~/flash'; import { __ } from '~/locale'; import loadAwardsHandler from '~/awards_handler'; +import { initCommitBoxInfo } from '~/projects/commit_box/info'; document.addEventListener('DOMContentLoaded', () => { const hasPerfBar = document.querySelector('.with-performance-bar'); @@ -22,13 +21,10 @@ document.addEventListener('DOMContentLoaded', () => { initChangesDropdown(document.querySelector('.navbar-gitlab').offsetHeight + performanceHeight); new ZenMode(); new ShortcutsNavigation(); - new MiniPipelineGraph({ - container: '.js-commit-pipeline-graph', - }).bindEvents(); + + initCommitBoxInfo(); + initNotes(); - // eslint-disable-next-line no-jquery/no-load - $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath); - fetchCommitMergeRequests(); const filesContainer = $('.js-diffs-batch'); diff --git a/app/assets/javascripts/pages/projects/environments/index/index.js b/app/assets/javascripts/pages/projects/environments/index/index.js index ace8af00ece..4d5106f6d5f 100644 --- a/app/assets/javascripts/pages/projects/environments/index/index.js +++ b/app/assets/javascripts/pages/projects/environments/index/index.js @@ -1,3 +1,3 @@ -import initEnviroments from '~/environments/'; +import initEnvironments from '~/environments/'; -document.addEventListener('DOMContentLoaded', initEnviroments); +document.addEventListener('DOMContentLoaded', initEnvironments); diff --git a/app/assets/javascripts/pages/projects/feature_flags/edit/index.js b/app/assets/javascripts/pages/projects/feature_flags/edit/index.js new file mode 100644 index 00000000000..36b1d800103 --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags/edit/index.js @@ -0,0 +1,3 @@ +import initEditFeatureFlags from '~/feature_flags/edit'; + +initEditFeatureFlags(); diff --git a/app/assets/javascripts/pages/projects/feature_flags/index/index.js b/app/assets/javascripts/pages/projects/feature_flags/index/index.js new file mode 100644 index 00000000000..c11a5c929ee --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags/index/index.js @@ -0,0 +1,3 @@ +import initFeatureFlags from '~/feature_flags'; + +initFeatureFlags(); diff --git a/app/assets/javascripts/pages/projects/feature_flags/new/index.js b/app/assets/javascripts/pages/projects/feature_flags/new/index.js new file mode 100644 index 00000000000..d598f6b31dd --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags/new/index.js @@ -0,0 +1,3 @@ +import initNewFeatureFlags from '~/feature_flags/new'; + +initNewFeatureFlags(); diff --git a/app/assets/javascripts/pages/projects/feature_flags_user_lists/edit/index.js b/app/assets/javascripts/pages/projects/feature_flags_user_lists/edit/index.js new file mode 100644 index 00000000000..bbe84322462 --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags_user_lists/edit/index.js @@ -0,0 +1,19 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import EditUserList from '~/user_lists/components/edit_user_list.vue'; +import createStore from '~/user_lists/store/edit'; + +Vue.use(Vuex); + +document.addEventListener('DOMContentLoaded', () => { + const el = document.getElementById('js-edit-user-list'); + const { userListsDocsPath } = el.dataset; + return new Vue({ + el, + store: createStore(el.dataset), + provide: { userListsDocsPath }, + render(h) { + return h(EditUserList, {}); + }, + }); +}); diff --git a/app/assets/javascripts/pages/projects/feature_flags_user_lists/new/index.js b/app/assets/javascripts/pages/projects/feature_flags_user_lists/new/index.js new file mode 100644 index 00000000000..679f0af8efc --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags_user_lists/new/index.js @@ -0,0 +1,22 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import NewUserList from '~/user_lists/components/new_user_list.vue'; +import createStore from '~/user_lists/store/new'; + +Vue.use(Vuex); + +document.addEventListener('DOMContentLoaded', () => { + const el = document.getElementById('js-new-user-list'); + const { userListsDocsPath, featureFlagsPath } = el.dataset; + return new Vue({ + el, + store: createStore(el.dataset), + provide: { + userListsDocsPath, + featureFlagsPath, + }, + render(h) { + return h(NewUserList); + }, + }); +}); diff --git a/app/assets/javascripts/pages/projects/feature_flags_user_lists/show/index.js b/app/assets/javascripts/pages/projects/feature_flags_user_lists/show/index.js new file mode 100644 index 00000000000..bccd9dce2ec --- /dev/null +++ b/app/assets/javascripts/pages/projects/feature_flags_user_lists/show/index.js @@ -0,0 +1,18 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import UserList from '~/user_lists/components/user_list.vue'; +import createStore from '~/user_lists/store/show'; + +Vue.use(Vuex); + +document.addEventListener('DOMContentLoaded', () => { + const el = document.getElementById('js-edit-user-list'); + return new Vue({ + el, + store: createStore(el.dataset), + render(h) { + const { emptyStatePath } = el.dataset; + return h(UserList, { props: { emptyStatePath } }); + }, + }); +}); diff --git a/app/assets/javascripts/pages/projects/graphs/charts/index.js b/app/assets/javascripts/pages/projects/graphs/charts/index.js index 384216f29eb..74abd1f67a5 100644 --- a/app/assets/javascripts/pages/projects/graphs/charts/index.js +++ b/app/assets/javascripts/pages/projects/graphs/charts/index.js @@ -1,6 +1,6 @@ -import Vue from 'vue'; import { GlColumnChart } from '@gitlab/ui/dist/charts'; -import { waitForCSSLoaded } from '../../../../helpers/startup_css_helper'; +import Vue from 'vue'; +import { waitForCSSLoaded } from '~/helpers/startup_css_helper'; import { __ } from '~/locale'; import CodeCoverage from '../components/code_coverage.vue'; import SeriesDataMixin from './series_data_mixin'; diff --git a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue index 5d59880d497..a9079f91f50 100644 --- a/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue +++ b/app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue @@ -1,11 +1,5 @@ <script> -import { - GlAlert, - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlIcon, - GlSprintf, -} from '@gitlab/ui'; +import { GlAlert, GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui'; import { GlAreaChart } from '@gitlab/ui/dist/charts'; import dateFormat from 'dateformat'; import { get } from 'lodash'; @@ -17,9 +11,8 @@ export default { components: { GlAlert, GlAreaChart, - GlDeprecatedDropdown, - GlDeprecatedDropdownItem, - GlIcon, + GlDropdown, + GlDropdownItem, GlSprintf, }, props: { @@ -140,25 +133,18 @@ export default { {{ __('It seems that there is currently no available data for code coverage') }} </span> </gl-alert> - <gl-deprecated-dropdown v-if="canShowData" :text="selectedDailyCoverageName"> - <gl-deprecated-dropdown-item + <gl-dropdown v-if="canShowData" :text="selectedDailyCoverageName"> + <gl-dropdown-item v-for="({ group_name }, index) in dailyCoverageData" :key="index" :value="group_name" + :is-check-item="true" + :is-checked="index === selectedCoverageIndex" @click="setSelectedCoverage(index)" > - <div class="gl-display-flex"> - <gl-icon - v-if="index === selectedCoverageIndex" - name="mobile-issue-close" - class="gl-absolute" - /> - <span class="gl-display-flex align-items-center ml-4"> - {{ group_name }} - </span> - </div> - </gl-deprecated-dropdown-item> - </gl-deprecated-dropdown> + {{ group_name }} + </gl-dropdown-item> + </gl-dropdown> </div> <gl-area-chart v-if="!isLoading" diff --git a/app/assets/javascripts/pages/projects/incidents/show/index.js b/app/assets/javascripts/pages/projects/incidents/show/index.js new file mode 100644 index 00000000000..3324cfc0335 --- /dev/null +++ b/app/assets/javascripts/pages/projects/incidents/show/index.js @@ -0,0 +1,11 @@ +import initSidebarBundle from '~/sidebar/sidebar_bundle'; +import initRelatedIssues from '~/related_issues'; +import initShow from '../../issues/show'; + +document.addEventListener('DOMContentLoaded', () => { + initShow(); + if (!gon.features?.vueIssuableSidebar) { + initSidebarBundle(); + } + initRelatedIssues(); +}); diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js index 8e0af018b61..3e9962a4e72 100644 --- a/app/assets/javascripts/pages/projects/index.js +++ b/app/assets/javascripts/pages/projects/index.js @@ -1,7 +1,5 @@ import Project from './project'; import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation'; -document.addEventListener('DOMContentLoaded', () => { - new Project(); // eslint-disable-line no-new - new ShortcutsNavigation(); // eslint-disable-line no-new -}); +new Project(); // eslint-disable-line no-new +new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/issues/index/index.js b/app/assets/javascripts/pages/projects/issues/index/index.js index e1add4a2af3..f3ccedc47c8 100644 --- a/app/assets/javascripts/pages/projects/issues/index/index.js +++ b/app/assets/javascripts/pages/projects/issues/index/index.js @@ -11,20 +11,18 @@ import initIssuablesList from '~/issues_list'; import initManualOrdering from '~/manual_ordering'; import { showLearnGitLabIssuesPopover } from '~/onboarding_issues'; -document.addEventListener('DOMContentLoaded', () => { - IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); +IssuableFilteredSearchTokenKeys.addExtraTokensForIssues(); - initFilteredSearch({ - page: FILTERED_SEARCH.ISSUES, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - useDefaultState: true, - }); +initFilteredSearch({ + page: FILTERED_SEARCH.ISSUES, + filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, + useDefaultState: true, +}); - new IssuableIndex(ISSUABLE_INDEX.ISSUE); - new ShortcutsNavigation(); - new UsersSelect(); +new IssuableIndex(ISSUABLE_INDEX.ISSUE); +new ShortcutsNavigation(); +new UsersSelect(); - initManualOrdering(); - initIssuablesList(); - showLearnGitLabIssuesPopover(); -}); +initManualOrdering(); +initIssuablesList(); +showLearnGitLabIssuesPopover(); diff --git a/app/assets/javascripts/pages/projects/issues/new/index.js b/app/assets/javascripts/pages/projects/issues/new/index.js index aecc6484b26..48afd2142ee 100644 --- a/app/assets/javascripts/pages/projects/issues/new/index.js +++ b/app/assets/javascripts/pages/projects/issues/new/index.js @@ -1,3 +1,3 @@ import initForm from 'ee_else_ce/pages/projects/issues/form'; -document.addEventListener('DOMContentLoaded', initForm); +initForm(); diff --git a/app/assets/javascripts/pages/projects/issues/service_desk/index.js b/app/assets/javascripts/pages/projects/issues/service_desk/index.js index e0c1332796f..231ee6732e9 100644 --- a/app/assets/javascripts/pages/projects/issues/service_desk/index.js +++ b/app/assets/javascripts/pages/projects/issues/service_desk/index.js @@ -1,17 +1,15 @@ import FilteredSearchServiceDesk from './filtered_search'; import initIssuablesList from '~/issues_list'; -document.addEventListener('DOMContentLoaded', () => { - const supportBotData = JSON.parse( - document.querySelector('.js-service-desk-issues').dataset.supportBot, - ); +const supportBotData = JSON.parse( + document.querySelector('.js-service-desk-issues').dataset.supportBot, +); - if (document.querySelector('.filtered-search')) { - const filteredSearchManager = new FilteredSearchServiceDesk(supportBotData); - filteredSearchManager.setup(); - } +if (document.querySelector('.filtered-search')) { + const filteredSearchManager = new FilteredSearchServiceDesk(supportBotData); + filteredSearchManager.setup(); +} - if (gon.features?.vueIssuablesList) { - initIssuablesList(); - } -}); +if (gon.features?.vueIssuablesList) { + initIssuablesList(); +} diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js index 98ae4e26257..a58b5d3f37c 100644 --- a/app/assets/javascripts/pages/projects/issues/show.js +++ b/app/assets/javascripts/pages/projects/issues/show.js @@ -10,16 +10,24 @@ import initIncidentApp from '~/issue_show/incident'; import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning'; import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace'; import initRelatedMergeRequestsApp from '~/related_merge_requests'; -import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle'; import { parseIssuableData } from '~/issue_show/utils/parse_data'; +import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger'; +import initInviteMemberModal from '~/invite_member/init_invite_member_modal'; + +import { IssuableType } from '~/issuable_show/constants'; export default function() { const { issueType, ...issuableData } = parseIssuableData(); - if (issueType === 'incident') { - initIncidentApp(issuableData); - } else { - initIssueApp(issuableData); + switch (issueType) { + case IssuableType.Incident: + initIncidentApp(issuableData); + break; + case IssuableType.Issue: + initIssueApp(issuableData); + break; + default: + break; } initIssuableHeaderWarning(store); @@ -30,14 +38,14 @@ export default function() { .then(module => module.default()) .catch(() => {}); - new Issue(); // eslint-disable-line no-new - new ShortcutsIssuable(); // eslint-disable-line no-new new ZenMode(); // eslint-disable-line no-new - if (gon.features && gon.features.vueIssuableSidebar) { - initVueIssuableSidebarApp(); - } else { + + if (issueType !== IssuableType.TestCase) { + new Issue(); // eslint-disable-line no-new + new ShortcutsIssuable(); // eslint-disable-line no-new initIssuableSidebar(); + loadAwardsHandler(); + initInviteMemberModal(); + initInviteMemberTrigger(); } - - loadAwardsHandler(); } diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js index aef4feef42c..630add51a97 100644 --- a/app/assets/javascripts/pages/projects/issues/show/index.js +++ b/app/assets/javascripts/pages/projects/issues/show/index.js @@ -2,10 +2,8 @@ import initSidebarBundle from '~/sidebar/sidebar_bundle'; import initRelatedIssues from '~/related_issues'; import initShow from '../show'; -document.addEventListener('DOMContentLoaded', () => { - initShow(); - if (gon.features && !gon.features.vueIssuableSidebar) { - initSidebarBundle(); - } - initRelatedIssues(); -}); +initShow(); +if (gon.features && !gon.features.vueIssuableSidebar) { + initSidebarBundle(); +} +initRelatedIssues(); diff --git a/app/assets/javascripts/pages/projects/merge_requests/index/index.js b/app/assets/javascripts/pages/projects/merge_requests/index/index.js index ce0b5c80927..94a12cc2706 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/index/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/index/index.js @@ -7,16 +7,15 @@ import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered import { FILTERED_SEARCH } from '~/pages/constants'; import { ISSUABLE_INDEX } from '~/pages/projects/constants'; -document.addEventListener('DOMContentLoaded', () => { - addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys); +new IssuableIndex(ISSUABLE_INDEX.MERGE_REQUEST); // eslint-disable-line no-new - initFilteredSearch({ - page: FILTERED_SEARCH.MERGE_REQUESTS, - filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, - useDefaultState: true, - }); +addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys); - new IssuableIndex(ISSUABLE_INDEX.MERGE_REQUEST); // eslint-disable-line no-new - new ShortcutsNavigation(); // eslint-disable-line no-new - new UsersSelect(); // eslint-disable-line no-new +initFilteredSearch({ + page: FILTERED_SEARCH.MERGE_REQUESTS, + filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys, + useDefaultState: true, }); + +new UsersSelect(); // eslint-disable-line no-new +new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js index 11af50169f5..868e001b182 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js +++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js @@ -4,21 +4,20 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable'; import { handleLocationHash } from '~/lib/utils/common_utils'; import howToMerge from '~/how_to_merge'; import initPipelines from '~/commit/pipelines/pipelines_bundle'; -import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle'; import initSourcegraph from '~/sourcegraph'; import loadAwardsHandler from '~/awards_handler'; +import initInviteMemberTrigger from '~/invite_member/init_invite_member_trigger'; +import initInviteMemberModal from '~/invite_member/init_invite_member_modal'; export default function() { new ZenMode(); // eslint-disable-line no-new - if (gon.features && gon.features.vueIssuableSidebar) { - initVueIssuableSidebarApp(); - } else { - initIssuableSidebar(); - } + initIssuableSidebar(); initPipelines(); new ShortcutsIssuable(true); // eslint-disable-line no-new handleLocationHash(); howToMerge(); initSourcegraph(); loadAwardsHandler(); + initInviteMemberModal(); + initInviteMemberTrigger(); } 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 29ebf656fe1..602d749ee07 100644 --- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js +++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js @@ -5,12 +5,10 @@ import initShow from '../init_merge_request_show'; import initIssuableHeaderWarning from '~/vue_shared/components/issuable/init_issuable_header_warning'; import store from '~/mr_notes/stores'; -document.addEventListener('DOMContentLoaded', () => { - initShow(); - if (gon.features && !gon.features.vueIssuableSidebar) { - initSidebarBundle(); - } - initMrNotes(); - initReviewBar(); - initIssuableHeaderWarning(store); -}); +initShow(); +if (gon.features && !gon.features.vueIssuableSidebar) { + initSidebarBundle(); +} +initMrNotes(); +initReviewBar(); +initIssuableHeaderWarning(store); diff --git a/app/assets/javascripts/pages/projects/new/index.js b/app/assets/javascripts/pages/projects/new/index.js index 637ed28a758..477a1ab887b 100644 --- a/app/assets/javascripts/pages/projects/new/index.js +++ b/app/assets/javascripts/pages/projects/new/index.js @@ -3,13 +3,14 @@ import initProjectNew from '../../../projects/project_new'; import { __ } from '~/locale'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import Tracking from '~/tracking'; +import { isExperimentEnabled } from '~/lib/utils/experimentation'; document.addEventListener('DOMContentLoaded', () => { initProjectVisibilitySelector(); initProjectNew.bindEvents(); const { category, property } = gon.tracking_data ?? { category: 'projects:new' }; - const hasNewCreateProjectUi = 'newCreateProjectUi' in gon?.features; + const hasNewCreateProjectUi = isExperimentEnabled('newCreateProjectUi'); if (!hasNewCreateProjectUi) { // Setting additional tracking for HAML template diff --git a/app/assets/javascripts/pages/projects/packages/packages/index/index.js b/app/assets/javascripts/pages/projects/packages/packages/index/index.js index 4836900aa28..c94782fdf1b 100644 --- a/app/assets/javascripts/pages/projects/packages/packages/index/index.js +++ b/app/assets/javascripts/pages/projects/packages/packages/index/index.js @@ -1,7 +1,3 @@ import initPackageList from '~/packages/list/packages_list_app_bundle'; -document.addEventListener('DOMContentLoaded', () => { - if (document.getElementById('js-vue-packages-list')) { - initPackageList(); - } -}); +initPackageList(); diff --git a/app/assets/javascripts/pages/projects/packages/packages/show/index.js b/app/assets/javascripts/pages/projects/packages/packages/show/index.js index 1fde4ddfc1d..1afb900ed88 100644 --- a/app/assets/javascripts/pages/projects/packages/packages/show/index.js +++ b/app/assets/javascripts/pages/projects/packages/packages/show/index.js @@ -1,3 +1,3 @@ import initPackageDetail from '~/packages/details/'; -document.addEventListener('DOMContentLoaded', initPackageDetail); +initPackageDetail(); diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue index 7a3923dfefd..a138a3a3425 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue @@ -1,11 +1,8 @@ <script> -/* eslint-disable vue/no-v-html */ import Vue from 'vue'; import Cookies from 'js-cookie'; import { GlIcon } from '@gitlab/ui'; import Translate from '../../../../../vue_shared/translate'; -// Full path is needed for Jest to be able to correctly mock this file -import illustrationSvg from '~/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg'; import { parseBoolean } from '~/lib/utils/common_utils'; Vue.use(Translate); @@ -20,12 +17,10 @@ export default { data() { return { docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl, + imageUrl: document.getElementById('pipeline-schedules-callout').dataset.imageUrl, calloutDismissed: parseBoolean(Cookies.get(cookieKey)), }; }, - created() { - this.illustrationSvg = illustrationSvg; - }, methods: { dismissCallout() { this.calloutDismissed = true; @@ -40,7 +35,9 @@ export default { <button id="dismiss-callout-btn" class="btn btn-default close" @click="dismissCallout"> <gl-icon name="close" aria-hidden="true" /> </button> - <div class="svg-container" v-html="illustrationSvg"></div> + <div class="svg-container"> + <img :src="imageUrl" /> + </div> <div class="user-callout-copy"> <h4>{{ __('Scheduling Pipelines') }}</h4> <p> diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg deleted file mode 100644 index 26d1ff97b3e..00000000000 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg +++ /dev/null @@ -1 +0,0 @@ -<svg width="140" height="102" viewBox="0 0 140 102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>illustration</title><defs><rect id="a" width="12.033" height="40.197" rx="3"/><rect id="b" width="12.033" height="40.197" rx="3"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(-.446)"><path d="M91.747 35.675v-6.039a2.996 2.996 0 0 0-2.999-3.005H54.635a2.997 2.997 0 0 0-2.999 3.005v6.039H40.092a3.007 3.007 0 0 0-2.996 3.005v34.187a2.995 2.995 0 0 0 2.996 3.005h11.544V79.9a2.996 2.996 0 0 0 2.999 3.005h34.113a2.997 2.997 0 0 0 2.999-3.005v-4.03h11.544a3.007 3.007 0 0 0 2.996-3.004V38.68a2.995 2.995 0 0 0-2.996-3.005H91.747z" stroke="#B5A7DD" stroke-width="2"/><rect stroke="#E5E5E5" stroke-width="2" fill="#FFF" x="21.556" y="38.69" width="98.27" height="34.167" rx="3"/><path d="M121.325 38.19c.55 0 .995.444.995 1.002 0 .554-.453 1.003-.995 1.003h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.454 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.453 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zM121.325 71.854a1.004 1.004 0 0 1 0 2.006h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038z" fill="#E5E5E5"/><g transform="translate(110.3 35.675)"><use fill="#FFF" xlink:href="#a"/><rect stroke="#FDE5D8" stroke-width="2" x="1" y="1" width="10.033" height="38.197" rx="3"/><ellipse fill="#FC8A51" cx="6.017" cy="9.547" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="20.099" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="30.65" rx="1.504" ry="1.507"/></g><path d="M6.008 38.19c.55 0 .996.444.996 1.002 0 .554-.454 1.003-.996 1.003H1.97a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0c.55 0 .996.444.996 1.002 0 .554-.453 1.003-.996 1.003h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.045 0c.55 0 .995.444.995 1.002 0 .554-.453 1.003-.995 1.003h-4.039a1.004 1.004 0 0 1 0-2.006h4.039zM6.008 71.854a1.004 1.004 0 0 1 0 2.006H1.97a1.004 1.004 0 0 1 0-2.006h4.038zm9.044 0a1.004 1.004 0 0 1 0 2.006h-4.038a1.004 1.004 0 0 1 0-2.006h4.038zm9.045 0a1.004 1.004 0 0 1 0 2.006h-4.039a1.004 1.004 0 0 1 0-2.006h4.039z" fill="#E5E5E5"/><g transform="translate(19.05 35.675)"><use fill="#FFF" xlink:href="#b"/><rect stroke="#FDE5D8" stroke-width="2" x="1" y="1" width="10.033" height="38.197" rx="3"/><ellipse fill="#FC8A51" cx="6.017" cy="10.049" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="20.601" rx="1.504" ry="1.507"/><ellipse fill="#FC8A51" cx="6.017" cy="31.153" rx="1.504" ry="1.507"/></g><g transform="translate(47.096)"><g transform="translate(7.05)"><ellipse fill="#FC8A51" cx="17.548" cy="5.025" rx="4.512" ry="4.522"/><rect stroke="#B5A7DD" stroke-width="2" fill="#FFF" x="13.036" y="4.02" width="9.025" height="20.099" rx="1.5"/><rect stroke="#FDE5D8" stroke-width="2" fill="#FFF" y="4.02" width="35.096" height="4.02" rx="2.01"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="4.512" y="18.089" width="26.072" height="17.084" rx="1.5"/></g><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(-45 43.117 35.117)" x="38.168" y="31.416" width="9.899" height="7.403" rx="3.702"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25" cy="55" rx="25" ry="25"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25" cy="55" rx="21" ry="21"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="43.05" y="53.281" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" x="4.305" y="53.281" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(90 25.153 74.422)" x="23.677" y="73.653" width="2.95" height="1.538" rx=".769"/><rect stroke="#6B4FBB" stroke-width="2" fill="#FFF" transform="rotate(90 25.153 35.51)" x="23.844" y="34.742" width="2.616" height="1.538" rx=".769"/><path d="M13.362 42.502c-.124-.543.198-.854.74-.69l2.321.704c.533.161.643.592.235.972l-.22.206 7.06 7.572a1.002 1.002 0 1 1-1.467 1.368l-7.06-7.573-.118.11c-.402.375-.826.248-.952-.304l-.54-2.365zM21.606 67.576c-.408.38-.84.255-.968-.295l-.551-2.363c-.127-.542.191-.852.725-.69l.288.089 3.027-9.901a1.002 1.002 0 1 1 1.918.586l-3.027 9.901.154.047c.525.16.627.592.213.977l-1.779 1.65z" fill="#FC8A51"/><ellipse stroke="#6B4FBB" stroke-width="2" fill="#FFF" cx="25.099" cy="54.768" rx="2.507" ry="2.512"/></g></g><path d="M52.697 96.966a1.004 1.004 0 0 1 2.006 0v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zm0-9.044a1.004 1.004 0 0 1 2.006 0v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zM86.29 96.966c0-.55.444-.996 1.002-.996.554 0 1.003.454 1.003.996v4.038a1.004 1.004 0 0 1-2.006 0v-4.038zm0-9.044c0-.55.444-.996 1.002-.996.554 0 1.003.453 1.003.996v4.038a1.004 1.004 0 0 1-2.006 0v-4.038z" fill="#E5E5E5"/></g></svg>
\ No newline at end of file diff --git a/app/assets/javascripts/pages/projects/registry/repositories/index.js b/app/assets/javascripts/pages/projects/registry/repositories/index.js index cdafe838994..6fd32321568 100644 --- a/app/assets/javascripts/pages/projects/registry/repositories/index.js +++ b/app/assets/javascripts/pages/projects/registry/repositories/index.js @@ -1,10 +1,8 @@ import registryExplorer from '~/registry/explorer/index'; -document.addEventListener('DOMContentLoaded', () => { - const explorer = registryExplorer(); +const explorer = registryExplorer(); - if (explorer) { - explorer.attachBreadcrumb(); - explorer.attachMainComponent(); - } -}); +if (explorer) { + explorer.attachBreadcrumb(); + explorer.attachMainComponent(); +} 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 ab2a7c099c4..40816420eef 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 @@ -4,6 +4,7 @@ import AjaxVariableList from '~/ci_variable_list/ajax_variable_list'; import registrySettingsApp from '~/registry/settings/registry_settings_bundle'; import initVariableList from '~/ci_variable_list'; import initDeployFreeze from '~/deploy_freeze'; +import initSettingsPipelinesTriggers from '~/ci_settings_pipeline_triggers'; document.addEventListener('DOMContentLoaded', () => { // Initialize expandable settings panels @@ -42,4 +43,6 @@ document.addEventListener('DOMContentLoaded', () => { registrySettingsApp(); initDeployFreeze(); + + initSettingsPipelinesTriggers(); }); diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue index 533065b2d4d..0f145dbc170 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue @@ -1,17 +1,17 @@ <script> +import { GlIcon } from '@gitlab/ui'; import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue'; import { featureAccessLevelNone } from '../constants'; export default { components: { + GlIcon, projectFeatureToggle, }, - model: { prop: 'value', event: 'change', }, - props: { name: { type: String, @@ -34,7 +34,6 @@ export default { default: false, }, }, - computed: { featureEnabled() { return this.value !== 0; @@ -51,7 +50,6 @@ export default { return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2; }, }, - methods: { toggleFeature(featureEnabled) { if (featureEnabled === false || this.options.length < 1) { @@ -70,14 +68,18 @@ export default { </script> <template> - <div :data-for="name" class="project-feature-controls"> + <div + :data-for="name" + class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0" + > <input v-if="name" :name="name" :value="value" type="hidden" /> <project-feature-toggle + class="gl-flex-grow-0 gl-mr-3" :value="featureEnabled" :disabled-input="disabledInput" @change="toggleFeature" /> - <div class="select-wrapper"> + <div class="select-wrapper gl-flex-fill-1"> <select :disabled="displaySelectInput" class="form-control project-repo-select select-control" @@ -92,7 +94,11 @@ export default { {{ optionName }} </option> </select> - <i aria-hidden="true" class="fa fa-chevron-down"> </i> + <gl-icon + name="chevron-down" + aria-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> </template> diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue index a95f0af46cd..bcf82e264d1 100644 --- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue +++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue @@ -1,5 +1,5 @@ <script> -import { GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui'; +import { GlIcon, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui'; import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin'; import { s__ } from '~/locale'; @@ -22,6 +22,7 @@ export default { projectFeatureSetting, projectFeatureToggle, projectSettingRow, + GlIcon, GlSprintf, GlLink, GlFormCheckbox, @@ -292,14 +293,16 @@ export default { <template> <div> - <div class="project-visibility-setting"> + <div + class="project-visibility-setting gl-border-1 gl-border-solid gl-border-gray-100 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5" + > <project-setting-row ref="project-visibility-settings" :help-path="visibilityHelpPath" :label="s__('ProjectSettings|Project visibility')" > - <div class="project-feature-controls"> - <div class="select-wrapper"> + <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"> + <div class="select-wrapper gl-flex-fill-1"> <select v-model="visibilityLevel" :disabled="!canChangeVisibilityLevel" @@ -323,11 +326,16 @@ export default { >{{ s__('ProjectSettings|Public') }}</option > </select> - <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i> + <gl-icon + name="chevron-down" + aria-hidden="true" + data-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> <span class="form-text text-muted">{{ visibilityLevelDescription }}</span> - <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="request-access"> + <label v-if="visibilityLevel !== visibilityOptions.PRIVATE" class="gl-line-height-28"> <input :value="requestAccessEnabled" type="hidden" @@ -338,7 +346,10 @@ export default { </label> </project-setting-row> </div> - <div :class="{ 'highlight-changes': highlightChangesClass }" class="project-feature-settings"> + <div + :class="{ 'highlight-changes': highlightChangesClass }" + class="gl-border-1 gl-border-solid gl-border-t-none gl-border-gray-100 gl-mb-5 gl-py-3 gl-px-7 gl-sm-pr-5 gl-sm-pl-5 gl-bg-gray-10" + > <project-setting-row ref="issues-settings" :label="s__('ProjectSettings|Issues')" @@ -361,7 +372,7 @@ export default { name="project[project_feature_attributes][repository_access_level]" /> </project-setting-row> - <div class="project-feature-setting-group"> + <div class="project-feature-setting-group gl-pl-7 gl-sm-pl-5"> <project-setting-row ref="merge-request-settings" :label="s__('ProjectSettings|Merge requests')" @@ -516,8 +527,8 @@ export default { ) " > - <div class="project-feature-controls"> - <div class="select-wrapper"> + <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0"> + <div class="select-wrapper gl-flex-fill-1"> <select v-model="metricsDashboardAccessLevel" :disabled="metricsOptionsDropdownEnabled" @@ -535,7 +546,12 @@ export default { >{{ featureAccessLevelEveryone[1] }}</option > </select> - <i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i> + <gl-icon + name="chevron-down" + aria-hidden="true" + data-hidden="true" + class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500" + /> </div> </div> </project-setting-row> diff --git a/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js new file mode 100644 index 00000000000..5f08943d211 --- /dev/null +++ b/app/assets/javascripts/pages/projects/shared/web_ide_link/index.js @@ -0,0 +1,31 @@ +import Vue from 'vue'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import { joinPaths, webIDEUrl } from '~/lib/utils/url_utility'; +import WebIdeButton from '~/vue_shared/components/web_ide_link.vue'; + +export default ({ el, router }) => { + if (!el) return; + + const { projectPath, ref, isBlob, webIdeUrl, ...options } = convertObjectPropsToCamelCase( + JSON.parse(el.dataset.options), + ); + + // eslint-disable-next-line no-new + new Vue({ + el, + router, + render(h) { + return h(WebIdeButton, { + props: { + isBlob, + webIdeUrl: isBlob + ? webIdeUrl + : webIDEUrl( + joinPaths('/', projectPath, 'edit', ref, '-', this.$route?.params.path || '', '/'), + ), + ...options, + }, + }); + }, + }); +}; diff --git a/app/assets/javascripts/pages/projects/show/index.js b/app/assets/javascripts/pages/projects/show/index.js index fd522b975a6..dd8141d34c7 100644 --- a/app/assets/javascripts/pages/projects/show/index.js +++ b/app/assets/javascripts/pages/projects/show/index.js @@ -11,34 +11,34 @@ import Star from '../../../star'; import notificationsDropdown from '../../../notifications_dropdown'; import { showLearnGitLabProjectPopover } from '~/onboarding_issues'; -document.addEventListener('DOMContentLoaded', () => { - initReadMore(); - new Star(); // eslint-disable-line no-new - notificationsDropdown(); - new ShortcutsNavigation(); // eslint-disable-line no-new - new NotificationsForm(); // eslint-disable-line no-new - // eslint-disable-next-line no-new - new UserCallout({ - setCalloutPerProject: false, - className: 'js-autodevops-banner', - }); - - // Project show page loads different overview content based on user preferences - const treeSlider = document.getElementById('js-tree-list'); - if (treeSlider) { - initBlob(); - initTree(); - } - - if (document.querySelector('.blob-viewer')) { - new BlobViewer(); // eslint-disable-line no-new - } - - if (document.querySelector('.project-show-activity')) { - new Activities(); // eslint-disable-line no-new - } - - leaveByUrl('project'); - - showLearnGitLabProjectPopover(); +initReadMore(); +new Star(); // eslint-disable-line no-new + +new NotificationsForm(); // eslint-disable-line no-new +// eslint-disable-next-line no-new +new UserCallout({ + setCalloutPerProject: false, + className: 'js-autodevops-banner', }); + +// Project show page loads different overview content based on user preferences +const treeSlider = document.getElementById('js-tree-list'); +if (treeSlider) { + initBlob(); + initTree(); +} + +if (document.querySelector('.blob-viewer')) { + new BlobViewer(); // eslint-disable-line no-new +} + +if (document.querySelector('.project-show-activity')) { + new Activities(); // eslint-disable-line no-new +} + +leaveByUrl('project'); + +showLearnGitLabProjectPopover(); + +notificationsDropdown(); +new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/projects/tags/index/index.js b/app/assets/javascripts/pages/projects/tags/index/index.js new file mode 100644 index 00000000000..ec56fa3e075 --- /dev/null +++ b/app/assets/javascripts/pages/projects/tags/index/index.js @@ -0,0 +1,12 @@ +import { initRemoveTag } from '../remove_tag'; + +document.addEventListener('DOMContentLoaded', () => { + initRemoveTag({ + onDelete: path => { + document + .querySelector(`[data-path="${path}"]`) + .closest('.js-tag-list') + .remove(); + }, + }); +}); diff --git a/app/assets/javascripts/pages/projects/tags/remove_tag.js b/app/assets/javascripts/pages/projects/tags/remove_tag.js new file mode 100644 index 00000000000..7e83dbe0565 --- /dev/null +++ b/app/assets/javascripts/pages/projects/tags/remove_tag.js @@ -0,0 +1,16 @@ +import createFlash from '~/flash'; +import axios from '~/lib/utils/axios_utils'; +import initConfirmModal from '~/confirm_modal'; + +export const initRemoveTag = ({ onDelete = () => {} }) => { + return initConfirmModal({ + handleSubmit: (path = '') => + axios + .delete(path) + .then(() => onDelete(path)) + .catch(({ response: { data } }) => { + const { message } = data; + createFlash({ message }); + }), + }); +}; diff --git a/app/assets/javascripts/pages/projects/tags/show/index.js b/app/assets/javascripts/pages/projects/tags/show/index.js new file mode 100644 index 00000000000..651cc05ca4f --- /dev/null +++ b/app/assets/javascripts/pages/projects/tags/show/index.js @@ -0,0 +1,10 @@ +import { redirectTo, getBaseURL, stripFinalUrlSegment } from '~/lib/utils/url_utility'; +import { initRemoveTag } from '../remove_tag'; + +document.addEventListener('DOMContentLoaded', () => { + initRemoveTag({ + onDelete: (path = '') => { + redirectTo(stripFinalUrlSegment([getBaseURL(), path].join(''))); + }, + }); +}); diff --git a/app/assets/javascripts/pages/projects/tree/show/index.js b/app/assets/javascripts/pages/projects/tree/show/index.js index b19abda2821..4bb461aadad 100644 --- a/app/assets/javascripts/pages/projects/tree/show/index.js +++ b/app/assets/javascripts/pages/projects/tree/show/index.js @@ -4,9 +4,7 @@ import initBlob from '~/blob_edit/blob_bundle'; import ShortcutsNavigation from '../../../../behaviors/shortcuts/shortcuts_navigation'; import NewCommitForm from '../../../../new_commit_form'; -document.addEventListener('DOMContentLoaded', () => { - new ShortcutsNavigation(); // eslint-disable-line no-new - new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new - initBlob(); - initTree(); -}); +new NewCommitForm($('.js-create-dir-form')); // eslint-disable-line no-new +initBlob(); +initTree(); +new ShortcutsNavigation(); // eslint-disable-line no-new diff --git a/app/assets/javascripts/pages/search/show/index.js b/app/assets/javascripts/pages/search/show/index.js index 92d01343bd5..721219874cf 100644 --- a/app/assets/javascripts/pages/search/show/index.js +++ b/app/assets/javascripts/pages/search/show/index.js @@ -1,7 +1,7 @@ import Search from './search'; -import initStateFilter from '~/search/state_filter'; +import initSearchApp from '~/search'; document.addEventListener('DOMContentLoaded', () => { - initStateFilter(); + initSearchApp(); return new Search(); }); diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js index 6ff74325a5e..2cd333f26e1 100644 --- a/app/assets/javascripts/pages/search/show/search.js +++ b/app/assets/javascripts/pages/search/show/search.js @@ -4,6 +4,7 @@ import { deprecatedCreateFlash as Flash } from '~/flash'; import Api from '~/api'; import { __ } from '~/locale'; import Project from '~/pages/projects/project'; +import { visitUrl } from '~/lib/utils/url_utility'; import refreshCounts from './refresh_counts'; import setHighlightClass from './highlight_blob_search_result'; @@ -86,6 +87,10 @@ export default class Search { $(document) .off('click', this.searchClear) .on('click', this.searchClear, this.clearSearchField.bind(this)); + + $('a.js-search-clear') + .off('click', this.clearSearchFilter) + .on('click', this.clearSearchFilter); } static submitSearch() { @@ -108,6 +113,17 @@ export default class Search { .focus(); } + // We need to manually follow the link on the anchors + // that have this event bound, as their `click` default + // behavior is prevented by the toggle logic. + /* eslint-disable-next-line class-methods-use-this */ + clearSearchFilter(ev) { + const $target = $(ev.currentTarget); + + visitUrl($target.href); + ev.stopPropagation(); + } + getProjectsData(term) { return new Promise(resolve => { if (this.groupId) { diff --git a/app/assets/javascripts/pages/shared/wikis/wikis.js b/app/assets/javascripts/pages/shared/wikis/wikis.js index 41d43812b5d..ab948fd106f 100644 --- a/app/assets/javascripts/pages/shared/wikis/wikis.js +++ b/app/assets/javascripts/pages/shared/wikis/wikis.js @@ -10,7 +10,7 @@ const MARKDOWN_LINK_TEXT = { }; const TRACKING_EVENT_NAME = 'view_wiki_page'; -const TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/wiki_page_context/jsonschema/1-0-0'; +const TRACKING_CONTEXT_SCHEMA = 'iglu:com.gitlab/wiki_page_context/jsonschema/1-0-1'; export default class Wikis { constructor() { |
