diff options
29 files changed, 595 insertions, 534 deletions
diff --git a/.eslintrc b/.eslintrc index 5b1e5bfd530..6dbe269e594 100644 --- a/.eslintrc +++ b/.eslintrc @@ -41,12 +41,11 @@ "vue/html-self-closing": ["error", { "html": { "void": "always", - "normal": "any", + "normal": "never", "component": "always" }, "svg": "always", - "math": "any" + "math": "always" }] - } } diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue index ed47c7f9ea0..907638d798a 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue @@ -12,7 +12,7 @@ props: { items: { type: Array, - default: [] + default: () => [], }, stage: { type: Object, diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue index c0f6c9ae573..b84bb6ed792 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue @@ -70,7 +70,7 @@ <a :href="build.branch.url" class="ref-name" - > + > {{ build.branch.name }} </a> <span diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue index 08d158314b3..6d7888e66a2 100644 --- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue @@ -28,19 +28,19 @@ <span> {{ n__('Time|hr', 'Time|hrs', time.hours) }} </span> - </template> + </template> <template v-if="time.mins && !time.days"> {{ time.mins }} <span> {{ n__('Time|min', 'Time|mins', time.mins) }} </span> - </template> + </template> <template v-if="time.seconds && hasData === 1 || time.seconds === 0"> {{ time.seconds }} <span> {{ s__('Time|s') }} </span> - </template> + </template> </template> <template v-else> -- diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index e139a1d6b17..a9d554e549e 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -474,18 +474,21 @@ </span> <span> - {{model.folderName}} + {{ model.folderName }} </span> <span class="badge"> - {{model.size}} + {{ model.size }} </span> </span> </div> - <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell"> + <div + class="table-section section-10 deployment-column hidden-xs hidden-sm" + role="gridcell" + > <span v-if="shouldRenderDeploymentID"> - {{deploymentInternalId}} + {{ deploymentInternalId }} </span> <span v-if="!model.isFolder && deploymentHasUser"> diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue index b45af1a5ebc..081537cf218 100644 --- a/app/assets/javascripts/environments/components/environment_monitoring.vue +++ b/app/assets/javascripts/environments/components/environment_monitoring.vue @@ -1,27 +1,27 @@ <script> -/** - * Renders the Monitoring (Metrics) link in environments table. - */ -import tooltip from '../../vue_shared/directives/tooltip'; + /** + * Renders the Monitoring (Metrics) link in environments table. + */ + import tooltip from '../../vue_shared/directives/tooltip'; -export default { - props: { - monitoringUrl: { - type: String, - required: true, + export default { + directives: { + tooltip, }, - }, - directives: { - tooltip, - }, + props: { + monitoringUrl: { + type: String, + required: true, + }, + }, - computed: { - title() { - return 'Monitoring'; + computed: { + title() { + return 'Monitoring'; + }, }, - }, -}; + }; </script> <template> <a @@ -31,10 +31,12 @@ export default { rel="noopener noreferrer nofollow" :href="monitoringUrl" :title="title" - :aria-label="title"> + :aria-label="title" + > <i class="fa fa-area-chart" aria-hidden="true" - /> + > + </i> </a> </template> diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue index 92a596bfd33..084a7de2305 100644 --- a/app/assets/javascripts/environments/components/environment_rollback.vue +++ b/app/assets/javascripts/environments/components/environment_rollback.vue @@ -1,57 +1,58 @@ <script> -/** - * Renders Rollback or Re deploy button in environments table depending - * of the provided property `isLastDeployment`. - * - * Makes a post request when the button is clicked. - */ -import eventHub from '../event_hub'; -import loadingIcon from '../../vue_shared/components/loading_icon.vue'; - -export default { - props: { - retryUrl: { - type: String, - default: '', + /** + * Renders Rollback or Re deploy button in environments table depending + * of the provided property `isLastDeployment`. + * + * Makes a post request when the button is clicked. + */ + import eventHub from '../event_hub'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + + export default { + props: { + retryUrl: { + type: String, + default: '', + }, + + isLastDeployment: { + type: Boolean, + default: true, + }, }, - isLastDeployment: { - type: Boolean, - default: true, + components: { + loadingIcon, }, - }, - components: { - loadingIcon, - }, - - data() { - return { - isLoading: false, - }; - }, + data() { + return { + isLoading: false, + }; + }, - methods: { - onClick() { - this.isLoading = true; + methods: { + onClick() { + this.isLoading = true; - eventHub.$emit('postAction', this.retryUrl); + eventHub.$emit('postAction', this.retryUrl); + }, }, - }, -}; + }; </script> <template> <button type="button" class="btn hidden-xs hidden-sm" @click="onClick" - :disabled="isLoading"> + :disabled="isLoading" + > <span v-if="isLastDeployment"> - {{s__("Environments|Re-deploy")}} + {{ s__("Environments|Re-deploy") }} </span> <span v-else> - {{s__("Environments|Rollback")}} + {{ s__("Environments|Rollback") }} </span> <loading-icon v-if="isLoading" /> diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index 85f11d2071b..1eef17bf1fe 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -1,53 +1,53 @@ <script> -/** - * Renders the stop "button" that allows stop an environment. - * Used in environments table. - */ -import eventHub from '../event_hub'; -import loadingIcon from '../../vue_shared/components/loading_icon.vue'; -import tooltip from '../../vue_shared/directives/tooltip'; + /** + * Renders the stop "button" that allows stop an environment. + * Used in environments table. + */ + import eventHub from '../event_hub'; + import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import tooltip from '../../vue_shared/directives/tooltip'; -export default { - props: { - stopUrl: { - type: String, - default: '', + export default { + components: { + loadingIcon, }, - }, - directives: { - tooltip, - }, + directives: { + tooltip, + }, - data() { - return { - isLoading: false, - }; - }, + props: { + stopUrl: { + type: String, + default: '', + }, + }, - components: { - loadingIcon, - }, + data() { + return { + isLoading: false, + }; + }, - computed: { - title() { - return 'Stop'; + computed: { + title() { + return 'Stop'; + }, }, - }, - methods: { - onClick() { - // eslint-disable-next-line no-alert - if (confirm('Are you sure you want to stop this environment?')) { - this.isLoading = true; + methods: { + onClick() { + // eslint-disable-next-line no-alert + if (confirm('Are you sure you want to stop this environment?')) { + this.isLoading = true; - $(this.$el).tooltip('destroy'); + $(this.$el).tooltip('destroy'); - eventHub.$emit('postAction', this.stopUrl); - } + eventHub.$emit('postAction', this.stopUrl); + } + }, }, - }, -}; + }; </script> <template> <button @@ -58,10 +58,13 @@ export default { @click="onClick" :disabled="isLoading" :title="title" - :aria-label="title"> + :aria-label="title" + > <i class="fa fa-stop stop-env-icon" - aria-hidden="true" /> + aria-hidden="true" + > + </i> <loading-icon v-if="isLoading" /> </button> </template> diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index 2037bf618e3..407d5333c0e 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -1,36 +1,36 @@ <script> -/** - * Renders a terminal button to open a web terminal. - * Used in environments table. - */ -import terminalIconSvg from 'icons/_icon_terminal.svg'; -import tooltip from '../../vue_shared/directives/tooltip'; + /** + * Renders a terminal button to open a web terminal. + * Used in environments table. + */ + import terminalIconSvg from 'icons/_icon_terminal.svg'; + import tooltip from '../../vue_shared/directives/tooltip'; -export default { - props: { - terminalPath: { - type: String, - required: false, - default: '', + export default { + directives: { + tooltip, }, - }, - directives: { - tooltip, - }, + props: { + terminalPath: { + type: String, + required: false, + default: '', + }, + }, - data() { - return { - terminalIconSvg, - }; - }, + data() { + return { + terminalIconSvg, + }; + }, - computed: { - title() { - return 'Terminal'; + computed: { + title() { + return 'Terminal'; + }, }, - }, -}; + }; </script> <template> <a @@ -40,6 +40,7 @@ export default { :title="title" :aria-label="title" :href="terminalPath" - v-html="terminalIconSvg"> + v-html="terminalIconSvg" + > </a> </template> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index 2592909734f..a82bba15a89 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -7,6 +7,15 @@ import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; export default { + components: { + emptyState, + }, + + mixins: [ + CIPaginationMixin, + environmentsMixin, + ], + props: { endpoint: { type: String, @@ -37,14 +46,6 @@ required: true, }, }, - components: { - emptyState, - }, - - mixins: [ - CIPaginationMixin, - environmentsMixin, - ], created() { eventHub.$on('toggleFolder', this.toggleFolder); @@ -95,15 +96,17 @@ :tabs="tabs" @onChangeTab="onChangeTab" scope="environments" - /> + /> <div v-if="canCreateEnvironment && !isLoading" - class="nav-controls"> + class="nav-controls" + > <a :href="newEnvironmentPath" - class="btn btn-create"> - {{s__("Environments|New environment")}} + class="btn btn-create" + > + {{ s__("Environments|New environment") }} </a> </div> </div> @@ -122,7 +125,7 @@ :new-path="newEnvironmentPath" :help-path="helpPagePath" :can-create-environment="canCreateEnvironment" - /> + /> </container> </div> </template> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index c04da4b81b7..a8384e545b2 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -39,33 +39,55 @@ export default { }; </script> <template> - <div class="ci-table" role="grid"> - <div class="gl-responsive-table-row table-row-header" role="row"> - <div class="table-section section-10 environments-name" role="columnheader"> - {{s__("Environments|Environment")}} + <div + class="ci-table" + role="grid" + > + <div + class="gl-responsive-table-row table-row-header" + role="row" + > + <div + class="table-section section-10 environments-name" + role="columnheader" + > + {{ s__("Environments|Environment") }} </div> - <div class="table-section section-10 environments-deploy" role="columnheader"> - {{s__("Environments|Deployment")}} + <div + class="table-section section-10 environments-deploy" + role="columnheader" + > + {{ s__("Environments|Deployment") }} </div> - <div class="table-section section-15 environments-build" role="columnheader"> - {{s__("Environments|Job")}} + <div + class="table-section section-15 environments-build" + role="columnheader" + > + {{ s__("Environments|Job") }} </div> - <div class="table-section section-25 environments-commit" role="columnheader"> - {{s__("Environments|Commit")}} + <div + class="table-section section-25 environments-commit" + role="columnheader" + > + {{ s__("Environments|Commit") }} </div> - <div class="table-section section-10 environments-date" role="columnheader"> - {{s__("Environments|Updated")}} + <div + class="table-section section-10 environments-date" + role="columnheader" + > + {{ s__("Environments|Updated") }} </div> </div> <template - v-for="model in environments" - v-bind:model="model"> + v-for="(model, i) in environments" + :key="i" + :model="model"> <div is="environment-item" :model="model" :can-create-deployment="canCreateDeployment" :can-read-environment="canReadEnvironment" - /> + /> <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <div v-if="model.isLoadingFolderContent"> @@ -79,14 +101,15 @@ export default { :model="children" :can-create-deployment="canCreateDeployment" :can-read-environment="canReadEnvironment" - /> + /> <div> <div class="text-center prepend-top-10"> <a :href="folderUrl(model)" - class="btn btn-default"> - {{s__("Environments|Show all")}} + class="btn btn-default" + > + {{ s__("Environments|Show all") }} </a> </div> </div> diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 27418bad01a..51f14881eaa 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -3,6 +3,10 @@ import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; export default { + mixins: [ + environmentsMixin, + CIPaginationMixin, + ], props: { endpoint: { type: String, @@ -25,10 +29,6 @@ required: true, }, }, - mixins: [ - environmentsMixin, - CIPaginationMixin, - ], methods: { successCallback(resp) { this.saveData(resp); @@ -40,17 +40,18 @@ <div :class="cssContainerClass"> <div class="top-area" - v-if="!isLoading"> + v-if="!isLoading" + > <h4 class="js-folder-name environments-folder-name"> - {{s__("Environments|Environments")}} / <b>{{folderName}}</b> + {{ s__("Environments|Environments") }} / <b>{{folderName}}</b> </h4> <tabs :tabs="tabs" @onChangeTab="onChangeTab" scope="environments" - /> + /> </div> <container diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue index 241e026b84c..400306759b2 100644 --- a/app/assets/javascripts/groups/components/app.vue +++ b/app/assets/javascripts/groups/components/app.vue @@ -42,6 +42,26 @@ export default { return this.store.getPaginationInfo(); }, }, + created() { + this.searchEmptyMessage = this.hideProjects ? + COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY; + + eventHub.$on('fetchPage', this.fetchPage); + eventHub.$on('toggleChildren', this.toggleChildren); + eventHub.$on('leaveGroup', this.leaveGroup); + eventHub.$on('updatePagination', this.updatePagination); + eventHub.$on('updateGroups', this.updateGroups); + }, + mounted() { + this.fetchAllGroups(); + }, + beforeDestroy() { + eventHub.$off('fetchPage', this.fetchPage); + eventHub.$off('toggleChildren', this.toggleChildren); + eventHub.$off('leaveGroup', this.leaveGroup); + eventHub.$off('updatePagination', this.updatePagination); + eventHub.$off('updateGroups', this.updateGroups); + }, methods: { fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) { return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived) @@ -152,26 +172,6 @@ export default { } }, }, - created() { - this.searchEmptyMessage = this.hideProjects ? - COMMON_STR.GROUP_SEARCH_EMPTY : COMMON_STR.GROUP_PROJECT_SEARCH_EMPTY; - - eventHub.$on('fetchPage', this.fetchPage); - eventHub.$on('toggleChildren', this.toggleChildren); - eventHub.$on('leaveGroup', this.leaveGroup); - eventHub.$on('updatePagination', this.updatePagination); - eventHub.$on('updateGroups', this.updateGroups); - }, - mounted() { - this.fetchAllGroups(); - }, - beforeDestroy() { - eventHub.$off('fetchPage', this.fetchPage); - eventHub.$off('toggleChildren', this.toggleChildren); - eventHub.$off('leaveGroup', this.leaveGroup); - eventHub.$off('updatePagination', this.updatePagination); - eventHub.$off('updateGroups', this.updateGroups); - }, }; </script> diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue index 1ff984d02e2..647c9d0046d 100644 --- a/app/assets/javascripts/groups/components/group_folder.vue +++ b/app/assets/javascripts/groups/components/group_folder.vue @@ -23,7 +23,7 @@ export default { return n__( 'One more item', '%d more items', - this.parentGroup.childrenCount - this.parentGroup.children.length + this.parentGroup.childrenCount - this.parentGroup.children.length, ); }, }, @@ -47,8 +47,9 @@ export default { <i class="fa fa-external-link" aria-hidden="true" - /> - {{moreChildrenStats}} + > + </i> + {{ moreChildrenStats }} </a> </li> </ul> diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue index 02129d39846..1eda9f18e81 100644 --- a/app/assets/javascripts/groups/components/group_item.vue +++ b/app/assets/javascripts/groups/components/group_item.vue @@ -1,72 +1,72 @@ <script> -import { visitUrl } from '../../lib/utils/url_utility'; -import tooltip from '../../vue_shared/directives/tooltip'; -import identicon from '../../vue_shared/components/identicon.vue'; -import eventHub from '../event_hub'; + import { visitUrl } from '../../lib/utils/url_utility'; + import tooltip from '../../vue_shared/directives/tooltip'; + import identicon from '../../vue_shared/components/identicon.vue'; + import eventHub from '../event_hub'; -import itemCaret from './item_caret.vue'; -import itemTypeIcon from './item_type_icon.vue'; -import itemStats from './item_stats.vue'; -import itemActions from './item_actions.vue'; + import itemCaret from './item_caret.vue'; + import itemTypeIcon from './item_type_icon.vue'; + import itemStats from './item_stats.vue'; + import itemActions from './item_actions.vue'; -export default { - directives: { - tooltip, - }, - components: { - identicon, - itemCaret, - itemTypeIcon, - itemStats, - itemActions, - }, - props: { - parentGroup: { - type: Object, - required: false, - default: () => ({}), + export default { + directives: { + tooltip, }, - group: { - type: Object, - required: true, + components: { + identicon, + itemCaret, + itemTypeIcon, + itemStats, + itemActions, }, - }, - computed: { - groupDomId() { - return `group-${this.group.id}`; + props: { + parentGroup: { + type: Object, + required: false, + default: () => ({}), + }, + group: { + type: Object, + required: true, + }, }, - rowClass() { - return { - 'is-open': this.group.isOpen, - 'has-children': this.hasChildren, - 'has-description': this.group.description, - 'being-removed': this.group.isBeingRemoved, - }; + computed: { + groupDomId() { + return `group-${this.group.id}`; + }, + rowClass() { + return { + 'is-open': this.group.isOpen, + 'has-children': this.hasChildren, + 'has-description': this.group.description, + 'being-removed': this.group.isBeingRemoved, + }; + }, + hasChildren() { + return this.group.childrenCount > 0; + }, + hasAvatar() { + return this.group.avatarUrl !== null; + }, + isGroup() { + return this.group.type === 'group'; + }, }, - hasChildren() { - return this.group.childrenCount > 0; - }, - hasAvatar() { - return this.group.avatarUrl !== null; - }, - isGroup() { - return this.group.type === 'group'; - }, - }, - methods: { - onClickRowGroup(e) { - const NO_EXPAND_CLS = 'no-expand'; - if (!(e.target.classList.contains(NO_EXPAND_CLS) || - e.target.parentElement.classList.contains(NO_EXPAND_CLS))) { - if (this.hasChildren) { - eventHub.$emit('toggleChildren', this.group); - } else { - visitUrl(this.group.relativePath); + methods: { + onClickRowGroup(e) { + const NO_EXPAND_CLS = 'no-expand'; + if (!(e.target.classList.contains(NO_EXPAND_CLS) || + e.target.parentElement.classList.contains(NO_EXPAND_CLS))) { + if (this.hasChildren) { + eventHub.$emit('toggleChildren', this.group); + } else { + visitUrl(this.group.relativePath); + } } - } + }, }, - }, -}; + }; </script> <template> @@ -75,7 +75,7 @@ export default { :id="groupDomId" :class="rowClass" class="group-row" - > + > <div class="group-row-contents" :class="{ 'project-row-contents': !isGroup }"> @@ -84,14 +84,10 @@ export default { :group="group" :parent-group="parentGroup" /> - <item-stats - :item="group" - /> + <item-stats :item="group" /> <div class="folder-toggle-wrap"> - <item-caret - :is-group-open="group.isOpen" - /> + <item-caret :is-group-open="group.isOpen" /> <item-type-icon :item-type="group.type" :is-group-open="group.isOpen" @@ -113,7 +109,7 @@ export default { <identicon v-else size-class="s24" - :entity-id=group.id + :entity-id="group.id" :entity-name="group.name" /> </a> @@ -135,13 +131,13 @@ export default { v-if="group.permission" class="user-access-role" > - {{group.permission}} + {{ group.permission }} </span> </div> <div v-if="group.description" class="description"> - {{group.description}} + {{ group.description }} </div> </div> <group-folder diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index 343fd0a5300..8ad47988a7e 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -20,6 +20,38 @@ export default { }); } }, + computed: { + ...mapGetters([ + 'activeFile', + 'activeFileExtension', + ]), + ...mapState([ + 'leftPanelCollapsed', + 'rightPanelCollapsed', + 'panelResizing', + ]), + shouldHideEditor() { + return this.activeFile.binary && !this.activeFile.raw; + }, + }, + watch: { + activeFile(oldVal, newVal) { + if (newVal && !newVal.active) { + this.initMonaco(); + } + }, + leftPanelCollapsed() { + this.editor.updateDimensions(); + }, + rightPanelCollapsed() { + this.editor.updateDimensions(); + }, + panelResizing(isResizing) { + if (isResizing === false) { + this.editor.updateDimensions(); + } + }, + }, methods: { ...mapActions([ 'getRawFileData', @@ -78,38 +110,6 @@ export default { }); }, }, - watch: { - activeFile(oldVal, newVal) { - if (newVal && !newVal.active) { - this.initMonaco(); - } - }, - leftPanelCollapsed() { - this.editor.updateDimensions(); - }, - rightPanelCollapsed() { - this.editor.updateDimensions(); - }, - panelResizing(isResizing) { - if (isResizing === false) { - this.editor.updateDimensions(); - } - }, - }, - computed: { - ...mapGetters([ - 'activeFile', - 'activeFileExtension', - ]), - ...mapState([ - 'leftPanelCollapsed', - 'rightPanelCollapsed', - 'panelResizing', - ]), - shouldHideEditor() { - return this.activeFile.binary && !this.activeFile.raw; - }, - }, }; </script> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue index c8b0441d81c..e6fe6e79846 100644 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ b/app/assets/javascripts/ide/components/repo_file.vue @@ -6,14 +6,14 @@ import fileIcon from '../../vue_shared/components/file_icon.vue'; export default { - mixins: [ - timeAgoMixin, - ], components: { skeletonLoadingContainer, newDropdown, fileIcon, }, + mixins: [ + timeAgoMixin, + ], props: { file: { type: Object, @@ -99,8 +99,7 @@ :opened="file.opened" :style="levelIndentation" :size="16" - > - </file-icon> + /> {{ file.name }} </a> <new-dropdown @@ -108,7 +107,8 @@ :project-id="file.projectId" :branch="file.branchId" :path="file.path" - :parent="file"/> + :parent="file" + /> <i class="fa" v-if="changedClass" diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue index 7eb840c7608..3aeb6f0b28f 100644 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ b/app/assets/javascripts/ide/components/repo_loading_file.vue @@ -25,15 +25,13 @@ /> </td> <template v-if="!leftPanelCollapsed"> - <td - class="hidden-sm hidden-xs"> + <td class="hidden-sm hidden-xs"> <skeleton-loading-container :small="true" /> </td> - <td - class="hidden-xs"> + <td class="hidden-xs"> <skeleton-loading-container class="animation-container-right" :small="true" diff --git a/app/assets/javascripts/monitoring/components/graph_group.vue b/app/assets/javascripts/monitoring/components/graph_group.vue index c52bbf56af9..079351a69af 100644 --- a/app/assets/javascripts/monitoring/components/graph_group.vue +++ b/app/assets/javascripts/monitoring/components/graph_group.vue @@ -15,7 +15,7 @@ <h4>{{ name }}</h4> </div> <div class="panel-body prometheus-graph-group"> - <slot /> + <slot></slot> </div> </div> </template> diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue index be38f7cc129..fcba819beba 100644 --- a/app/assets/javascripts/pdf/page/index.vue +++ b/app/assets/javascripts/pdf/page/index.vue @@ -45,24 +45,26 @@ <canvas class="pdf-page" ref="canvas" - :data-page="number" /> + :data-page="number" + > + </canvas> </template> <style> -.pdf-page { - margin: 8px auto 0 auto; - border-top: 1px #ddd solid; - border-bottom: 1px #ddd solid; - width: 100%; -} + .pdf-page { + margin: 8px auto 0 auto; + border-top: 1px #ddd solid; + border-bottom: 1px #ddd solid; + width: 100%; + } -.pdf-page:first-child { - margin-top: 0px; - border-top: 0px; -} + .pdf-page:first-child { + margin-top: 0px; + border-top: 0px; + } -.pdf-page:last-child { - margin-bottom: 0px; - border-bottom: 0px; -} + .pdf-page:last-child { + margin-bottom: 0px; + border-bottom: 0px; + } </style> diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue index 36ad618aa46..1ffe482d782 100644 --- a/app/assets/javascripts/profile/account/components/delete_account_modal.vue +++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue @@ -4,6 +4,9 @@ import csrf from '~/lib/utils/csrf'; export default { + components: { + modal, + }, props: { actionUrl: { type: String, @@ -24,9 +27,6 @@ enteredUsername: '', }; }, - components: { - modal, - }, computed: { csrfToken() { return csrf.token; @@ -85,7 +85,9 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), @submit="onSubmit" :submit-disabled="!canSubmit()"> - <template slot="body" slot-scope="props"> + <template + slot="body" + slot-scope="props"> <p v-html="props.text"></p> <form @@ -96,13 +98,19 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), <input type="hidden" name="_method" - value="delete" /> + value="delete" + /> <input type="hidden" name="authenticity_token" - :value="csrfToken" /> + :value="csrfToken" + /> - <p id="input-label" v-html="inputLabel"></p> + <p + id="input-label" + v-html="inputLabel" + > + </p> <input v-if="confirmWithPassword" @@ -110,14 +118,16 @@ Once you confirm %{deleteAccount}, it cannot be undone or recovered.`), class="form-control" type="password" v-model="enteredPassword" - aria-labelledby="input-label" /> + aria-labelledby="input-label" + /> <input v-else name="username" class="form-control" type="text" v-model="enteredUsername" - aria-labelledby="input-label" /> + aria-labelledby="input-label" + /> </form> </template> diff --git a/app/assets/javascripts/projects/permissions/components/project_setting_row.vue b/app/assets/javascripts/projects/permissions/components/project_setting_row.vue index 138c8b2ed68..25a88f846eb 100644 --- a/app/assets/javascripts/projects/permissions/components/project_setting_row.vue +++ b/app/assets/javascripts/projects/permissions/components/project_setting_row.vue @@ -46,6 +46,6 @@ > {{ helpText }} </span> - <slot /> + <slot></slot> </div> </template> diff --git a/app/assets/javascripts/projects_dropdown/components/search.vue b/app/assets/javascripts/projects_dropdown/components/search.vue index 3bfe4cb0407..0c46ed184be 100644 --- a/app/assets/javascripts/projects_dropdown/components/search.vue +++ b/app/assets/javascripts/projects_dropdown/components/search.vue @@ -59,6 +59,7 @@ v-if="!searchQuery" class="search-icon fa fa-fw fa-search" aria-hidden="true" - /> + > + </i> </div> </template> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue index eea5a68bdc4..1b1eb5b5764 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue @@ -20,10 +20,12 @@ hasCi: { type: Boolean, required: false, + default: false, }, ciStatus: { type: String, required: false, + default: '', }, }, computed: { @@ -31,7 +33,7 @@ return this.pipeline && Object.keys(this.pipeline).length > 0; }, hasCIError() { - return this.hasCi && !this.ciStatus; + return this.hasCi && this.ciStatus !== ''; }, status() { return this.pipeline.details && diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue index 09276ba2769..77073c6f488 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue @@ -7,6 +7,10 @@ export default { name: 'MRWidgetRebase', + components: { + statusIcon, + loadingIcon, + }, props: { mr: { type: Object, @@ -17,10 +21,6 @@ required: true, }, }, - components: { - statusIcon, - loadingIcon, - }, data() { return { isMakingRequest: false, @@ -88,7 +88,7 @@ <status-icon :status="status" :show-disabled-button="showDisabledButton" - /> + /> <div class="rebase-state-find-class-convention media media-body space-children"> <template v-if="mr.rebaseInProgress || isMakingRequest"> @@ -100,7 +100,7 @@ <span class="bold"> Fast-forward merge is not possible. Rebase the source branch onto - <span class="label-branch">{{mr.targetBranch}}</span> + <span class="label-branch">{{ mr.targetBranch }}</span> to allow this merge request to be merged. </span> </template> @@ -110,13 +110,15 @@ type="button" class="btn btn-sm btn-reopen btn-success" :disabled="isMakingRequest" - @click="rebase"> + @click="rebase" + > <loading-icon v-if="isMakingRequest" /> Rebase </button> <span v-if="!rebasingError" - class="bold"> + class="bold" + > Fast-forward merge is not possible. Rebase the source branch onto the target branch or merge target branch into source branch to allow this merge request to be merged. @@ -124,7 +126,7 @@ <span v-else class="bold danger"> - {{rebasingError}} + {{ rebasingError }} </span> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index 05e48ed297f..3595a9389e9 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -11,7 +11,7 @@ * </expand-button> */ export default { - name: 'expandButton', + name: 'ExpandButton', data() { return { isCollapsed: true, diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue index 00089dfef38..66dfd991377 100644 --- a/app/assets/javascripts/vue_shared/components/modal.vue +++ b/app/assets/javascripts/vue_shared/components/modal.vue @@ -1,143 +1,151 @@ <script> -export default { - name: 'modal', + export default { + name: 'Modal', - props: { - id: { - type: String, - required: false, + props: { + id: { + type: String, + required: false, + default: '', + }, + title: { + type: String, + required: false, + default: '', + }, + text: { + type: String, + required: false, + default: '', + }, + hideFooter: { + type: Boolean, + required: false, + default: false, + }, + kind: { + type: String, + required: false, + default: 'primary', + }, + modalDialogClass: { + type: String, + required: false, + default: '', + }, + closeKind: { + type: String, + required: false, + default: 'default', + }, + closeButtonLabel: { + type: String, + required: false, + default: 'Cancel', + }, + primaryButtonLabel: { + type: String, + required: false, + default: '', + }, + submitDisabled: { + type: Boolean, + required: false, + default: false, + }, }, - title: { - type: String, - required: false, - }, - text: { - type: String, - required: false, - }, - hideFooter: { - type: Boolean, - required: false, - default: false, - }, - kind: { - type: String, - required: false, - default: 'primary', - }, - modalDialogClass: { - type: String, - required: false, - default: '', - }, - closeKind: { - type: String, - required: false, - default: 'default', - }, - closeButtonLabel: { - type: String, - required: false, - default: 'Cancel', - }, - primaryButtonLabel: { - type: String, - required: false, - default: '', - }, - submitDisabled: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - btnKindClass() { - return { - [`btn-${this.kind}`]: true, - }; + computed: { + btnKindClass() { + return { + [`btn-${this.kind}`]: true, + }; + }, + btnCancelKindClass() { + return { + [`btn-${this.closeKind}`]: true, + }; + }, }, - btnCancelKindClass() { - return { - [`btn-${this.closeKind}`]: true, - }; - }, - }, - methods: { - emitCancel(event) { - this.$emit('cancel', event); - }, - emitSubmit(event) { - this.$emit('submit', event); + methods: { + emitCancel(event) { + this.$emit('cancel', event); + }, + emitSubmit(event) { + this.$emit('submit', event); + }, }, - }, -}; + }; </script> <template> -<div class="modal-open"> - <div - :id="id" - class="modal" - :class="id ? '' : 'show'" - role="dialog" - tabindex="-1" - > + <div class="modal-open"> <div - :class="modalDialogClass" - class="modal-dialog" - role="document" + :id="id" + class="modal" + :class="id !== '' ? '' : 'show'" + role="dialog" + tabindex="-1" > - <div class="modal-content"> - <div class="modal-header"> - <slot name="header"> - <h4 class="modal-title pull-left"> - {{this.title}} - </h4> + <div + :class="modalDialogClass" + class="modal-dialog" + role="document" + > + <div class="modal-content"> + <div class="modal-header"> + <slot name="header"> + <h4 class="modal-title pull-left"> + {{ this.title }} + </h4> + <button + type="button" + class="close pull-right" + @click="emitCancel($event)" + data-dismiss="modal" + aria-label="Close" + > + <span aria-hidden="true">×</span> + </button> + </slot> + </div> + <div class="modal-body"> + <slot name="body" :text="text"> + <p>{{ this.text }}</p> + </slot> + </div> + <div + class="modal-footer" + v-if="!hideFooter" + > <button type="button" - class="close pull-right" + class="btn pull-left" + :class="btnCancelKindClass" @click="emitCancel($event)" data-dismiss="modal" - aria-label="Close" > - <span aria-hidden="true">×</span> + {{ closeButtonLabel }} </button> - </slot> - </div> - <div class="modal-body"> - <slot name="body" :text="text"> - <p>{{this.text}}</p> - </slot> - </div> - <div class="modal-footer" v-if="!hideFooter"> - <button - type="button" - class="btn pull-left" - :class="btnCancelKindClass" - @click="emitCancel($event)" - data-dismiss="modal"> - {{ closeButtonLabel }} - </button> - <button - v-if="primaryButtonLabel" - type="button" - class="btn pull-right js-primary-button" - :disabled="submitDisabled" - :class="btnKindClass" - @click="emitSubmit($event)" - data-dismiss="modal"> - {{ primaryButtonLabel }} - </button> + <button + v-if="primaryButtonLabel" + type="button" + class="btn pull-right js-primary-button" + :disabled="submitDisabled" + :class="btnKindClass" + @click="emitSubmit($event)" + data-dismiss="modal" + > + {{ primaryButtonLabel }} + </button> + </div> </div> </div> </div> + <div + v-if="id !== ''" + class="modal-backdrop fade in"> + </div> </div> - <div - v-if="!id" - class="modal-backdrop fade in"> - </div> -</div> </template> diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue index 16d60bb2876..c35621c9ef3 100644 --- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -1,85 +1,86 @@ <script> -import modal from './modal.vue'; + import modal from './modal.vue'; -export default { - name: 'recaptcha-modal', + export default { + name: 'RecaptchaModal', - props: { - html: { - type: String, - required: false, - default: '', + components: { + modal, }, - }, - data() { - return { - script: {}, - scriptSrc: 'https://www.google.com/recaptcha/api.js', - }; - }, + props: { + html: { + type: String, + required: false, + default: '', + }, + }, - components: { - modal, - }, + data() { + return { + script: {}, + scriptSrc: 'https://www.google.com/recaptcha/api.js', + }; + }, - methods: { - appendRecaptchaScript() { - this.removeRecaptchaScript(); + watch: { + html() { + this.appendRecaptchaScript(); + }, + }, - const script = document.createElement('script'); - script.src = this.scriptSrc; - script.classList.add('js-recaptcha-script'); - script.async = true; - script.defer = true; + mounted() { + window.recaptchaDialogCallback = this.submit.bind(this); + }, - this.script = script; + methods: { + appendRecaptchaScript() { + this.removeRecaptchaScript(); - document.body.appendChild(script); - }, + const script = document.createElement('script'); + script.src = this.scriptSrc; + script.classList.add('js-recaptcha-script'); + script.async = true; + script.defer = true; - removeRecaptchaScript() { - if (this.script instanceof Element) this.script.remove(); - }, + this.script = script; - close() { - this.removeRecaptchaScript(); - this.$emit('close'); - }, + document.body.appendChild(script); + }, - submit() { - this.$el.querySelector('form').submit(); - }, - }, + removeRecaptchaScript() { + if (this.script instanceof Element) this.script.remove(); + }, - watch: { - html() { - this.appendRecaptchaScript(); - }, - }, + close() { + this.removeRecaptchaScript(); + this.$emit('close'); + }, - mounted() { - window.recaptchaDialogCallback = this.submit.bind(this); - }, -}; + submit() { + this.$el.querySelector('form').submit(); + }, + }, + }; </script> <template> -<modal - kind="warning" - class="recaptcha-modal js-recaptcha-modal" - :hide-footer="true" - :title="__('Please solve the reCAPTCHA')" - @cancel="close" -> - <div slot="body"> - <p> - {{__('We want to be sure it is you, please confirm you are not a robot.')}} - </p> - <div - ref="recaptcha" - v-html="html" - ></div> - </div> -</modal> + <modal + kind="warning" + class="recaptcha-modal js-recaptcha-modal" + :hide-footer="true" + :title="__('Please solve the reCAPTCHA')" + @cancel="close" + > + <div slot="body"> + <p> + {{ __('We want to be sure it is you, please confirm you are not a robot.') }} + </p> + <div + ref="recaptcha" + v-html="html" + > + </div> + </div> + </modal> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue index a5dfcd7ffee..8211d425b1f 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue @@ -24,7 +24,11 @@ <i aria-label="toggle collapse" class="fa" - :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }" - /> + :class="{ + 'fa-angle-double-right': !collapsed, + 'fa-angle-double-left': collapsed + }" + > + </i> </button> </template> |