Commit 827761c1 authored by Clement Ho's avatar Clement Ho

Merge branch 'master' into 'explore-dispatcher-refactor'

# Conflicts:
#   app/assets/javascripts/dispatcher.js
parents 2bd4453c 82007530
...@@ -13,7 +13,8 @@ engines: ...@@ -13,7 +13,8 @@ engines:
exclude_paths: exclude_paths:
- "lib/api/v3/*" - "lib/api/v3/*"
eslint: eslint:
enabled: true # eslint-plugin-vue is locked to version 2 in codeclimate, we need version 4
enabled: false
rubocop: rubocop:
enabled: true enabled: true
channel: "gitlab-rubocop-0-52" channel: "gitlab-rubocop-0-52"
......
...@@ -4,7 +4,10 @@ ...@@ -4,7 +4,10 @@
"browser": true, "browser": true,
"es6": true "es6": true
}, },
"extends": "airbnb-base", "extends": [
"airbnb-base",
"plugin:vue/recommended"
],
"globals": { "globals": {
"__webpack_public_path__": true, "__webpack_public_path__": true,
"_": false, "_": false,
...@@ -12,7 +15,9 @@ ...@@ -12,7 +15,9 @@
"gon": false, "gon": false,
"localStorage": false "localStorage": false
}, },
"parser": "babel-eslint", "parserOptions": {
"parser": "babel-eslint"
},
"plugins": [ "plugins": [
"filenames", "filenames",
"import", "import",
...@@ -20,7 +25,7 @@ ...@@ -20,7 +25,7 @@
"promise" "promise"
], ],
"settings": { "settings": {
"html/html-extensions": [".html", ".html.raw", ".vue"], "html/html-extensions": [".html", ".html.raw"],
"import/resolver": { "import/resolver": {
"webpack": { "webpack": {
"config": "./config/webpack.config.js" "config": "./config/webpack.config.js"
...@@ -32,6 +37,15 @@ ...@@ -32,6 +37,15 @@
"import/no-commonjs": "error", "import/no-commonjs": "error",
"no-multiple-empty-lines": ["error", { "max": 1 }], "no-multiple-empty-lines": ["error", { "max": 1 }],
"promise/catch-or-return": "error", "promise/catch-or-return": "error",
"no-underscore-dangle": ["error", { "allow": ["__"]}] "no-underscore-dangle": ["error", { "allow": ["__"]}],
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
} }
} }
...@@ -70,6 +70,10 @@ gem 'net-ldap' ...@@ -70,6 +70,10 @@ gem 'net-ldap'
# Git Wiki # Git Wiki
# Required manually in config/initializers/gollum.rb to control load order # Required manually in config/initializers/gollum.rb to control load order
gem 'gollum-lib', '~> 4.2', require: false gem 'gollum-lib', '~> 4.2', require: false
# Before updating this gem, check if
# https://github.com/gollum/rugged_adapter/pull/28 has been merged.
# If it has, then remove the monkey patch for tree_entry in config/initializers/gollum.rb
gem 'gollum-rugged_adapter', '~> 0.4.4', require: false gem 'gollum-rugged_adapter', '~> 0.4.4', require: false
# Language detection # Language detection
...@@ -402,7 +406,7 @@ group :ed25519 do ...@@ -402,7 +406,7 @@ group :ed25519 do
end end
# Gitaly GRPC client # Gitaly GRPC client
gem 'gitaly-proto', '~> 0.64.0', require: 'gitaly' gem 'gitaly-proto', '~> 0.69.0', require: 'gitaly'
gem 'toml-rb', '~> 0.3.15', require: false gem 'toml-rb', '~> 0.3.15', require: false
......
...@@ -284,7 +284,7 @@ GEM ...@@ -284,7 +284,7 @@ GEM
po_to_json (>= 1.0.0) po_to_json (>= 1.0.0)
rails (>= 3.2.0) rails (>= 3.2.0)
gherkin-ruby (0.3.2) gherkin-ruby (0.3.2)
gitaly-proto (0.64.0) gitaly-proto (0.69.0)
google-protobuf (~> 3.1) google-protobuf (~> 3.1)
grpc (~> 1.0) grpc (~> 1.0)
github-linguist (4.7.6) github-linguist (4.7.6)
...@@ -1053,7 +1053,7 @@ DEPENDENCIES ...@@ -1053,7 +1053,7 @@ DEPENDENCIES
gettext (~> 3.2.2) gettext (~> 3.2.2)
gettext_i18n_rails (~> 1.8.0) gettext_i18n_rails (~> 1.8.0)
gettext_i18n_rails_js (~> 1.2.0) gettext_i18n_rails_js (~> 1.2.0)
gitaly-proto (~> 0.64.0) gitaly-proto (~> 0.69.0)
github-linguist (~> 4.7.0) github-linguist (~> 4.7.0)
gitlab-flowdock-git-hook (~> 1.0.1) gitlab-flowdock-git-hook (~> 1.0.1)
gitlab-markup (~> 1.6.2) gitlab-markup (~> 1.6.2)
......
...@@ -7,6 +7,7 @@ import installGlEmojiElement from './gl_emoji'; ...@@ -7,6 +7,7 @@ import installGlEmojiElement from './gl_emoji';
import './quick_submit'; import './quick_submit';
import './requires_input'; import './requires_input';
import './toggler_behavior'; import './toggler_behavior';
import '../preview_markdown';
installGlEmojiElement(); installGlEmojiElement();
initCopyAsGFM(); initCopyAsGFM();
......
...@@ -8,6 +8,9 @@ export default () => { ...@@ -8,6 +8,9 @@ export default () => {
new Vue({ new Vue({
el, el,
components: {
notebookLab,
},
data() { data() {
return { return {
error: false, error: false,
...@@ -16,8 +19,41 @@ export default () => { ...@@ -16,8 +19,41 @@ export default () => {
json: {}, json: {},
}; };
}, },
components: { mounted() {
notebookLab, if (gon.katex_css_url) {
const katexStyles = document.createElement('link');
katexStyles.setAttribute('rel', 'stylesheet');
katexStyles.setAttribute('href', gon.katex_css_url);
document.head.appendChild(katexStyles);
}
if (gon.katex_js_url) {
const katexScript = document.createElement('script');
katexScript.addEventListener('load', () => {
this.loadFile();
});
katexScript.setAttribute('src', gon.katex_js_url);
document.head.appendChild(katexScript);
} else {
this.loadFile();
}
},
methods: {
loadFile() {
axios.get(el.dataset.endpoint)
.then(res => res.data)
.then((data) => {
this.json = data;
this.loading = false;
})
.catch((e) => {
if (e.status !== 200) {
this.loadError = true;
}
this.error = true;
});
},
}, },
template: ` template: `
<div class="container-fluid md prepend-top-default append-bottom-default"> <div class="container-fluid md prepend-top-default append-bottom-default">
...@@ -46,41 +82,5 @@ export default () => { ...@@ -46,41 +82,5 @@ export default () => {
</p> </p>
</div> </div>
`, `,
methods: {
loadFile() {
axios.get(el.dataset.endpoint)
.then(res => res.data)
.then((data) => {
this.json = data;
this.loading = false;
})
.catch((e) => {
if (e.status !== 200) {
this.loadError = true;
}
this.error = true;
});
},
},
mounted() {
if (gon.katex_css_url) {
const katexStyles = document.createElement('link');
katexStyles.setAttribute('rel', 'stylesheet');
katexStyles.setAttribute('href', gon.katex_css_url);
document.head.appendChild(katexStyles);
}
if (gon.katex_js_url) {
const katexScript = document.createElement('script');
katexScript.addEventListener('load', () => {
this.loadFile();
});
katexScript.setAttribute('src', gon.katex_js_url);
document.head.appendChild(katexScript);
} else {
this.loadFile();
}
},
}); });
}; };
...@@ -7,6 +7,9 @@ export default () => { ...@@ -7,6 +7,9 @@ export default () => {
return new Vue({ return new Vue({
el, el,
components: {
pdfLab,
},
data() { data() {
return { return {
error: false, error: false,
...@@ -15,9 +18,6 @@ export default () => { ...@@ -15,9 +18,6 @@ export default () => {
pdf: el.dataset.endpoint, pdf: el.dataset.endpoint,
}; };
}, },
components: {
pdfLab,
},
methods: { methods: {
onLoad() { onLoad() {
this.loading = false; this.loading = false;
......
...@@ -171,19 +171,14 @@ $(() => { ...@@ -171,19 +171,14 @@ $(() => {
}); });
gl.IssueBoardsModalAddBtn = new Vue({ gl.IssueBoardsModalAddBtn = new Vue({
mixins: [gl.issueBoards.ModalMixins],
el: document.getElementById('js-add-issues-btn'), el: document.getElementById('js-add-issues-btn'),
mixins: [gl.issueBoards.ModalMixins],
data() { data() {
return { return {
modal: ModalStore.store, modal: ModalStore.store,
store: Store.state, store: Store.state,
}; };
}, },
watch: {
disabled() {
this.updateTooltip();
},
},
computed: { computed: {
disabled() { disabled() {
if (!this.store) { if (!this.store) {
...@@ -199,6 +194,14 @@ $(() => { ...@@ -199,6 +194,14 @@ $(() => {
return ''; return '';
}, },
}, },
watch: {
disabled() {
this.updateTooltip();
},
},
mounted() {
this.updateTooltip();
},
methods: { methods: {
updateTooltip() { updateTooltip() {
const $tooltip = $(this.$refs.addIssuesButton); const $tooltip = $(this.$refs.addIssuesButton);
...@@ -217,9 +220,6 @@ $(() => { ...@@ -217,9 +220,6 @@ $(() => {
} }
}, },
}, },
mounted() {
this.updateTooltip();
},
template: ` template: `
<div class="board-extra-actions"> <div class="board-extra-actions">
<button <button
......
...@@ -10,12 +10,30 @@ export default { ...@@ -10,12 +10,30 @@ export default {
'issue-card-inner': gl.issueBoards.IssueCardInner, 'issue-card-inner': gl.issueBoards.IssueCardInner,
}, },
props: { props: {
list: Object, list: {
issue: Object, type: Object,
issueLinkBase: String, default: () => ({}),
disabled: Boolean, },
index: Number, issue: {
rootPath: String, type: Object,
default: () => ({}),
},
issueLinkBase: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false,
},
index: {
type: Number,
default: 0,
},
rootPath: {
type: String,
default: '',
},
}, },
data() { data() {
return { return {
...@@ -54,8 +72,13 @@ export default { ...@@ -54,8 +72,13 @@ export default {
</script> </script>
<template> <template>
<li class="card" <li
:class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }" class="card"
:class="{
'user-can-drag': !disabled && issue.id,
'is-disabled': disabled || !issue.id,
'is-active': issueDetailVisible
}"
:index="index" :index="index"
:data-issue-id="issue.id" :data-issue-id="issue.id"
@mousedown="mouseDown" @mousedown="mouseDown"
...@@ -66,6 +89,7 @@ export default { ...@@ -66,6 +89,7 @@ export default {
:issue="issue" :issue="issue"
:issue-link-base="issueLinkBase" :issue-link-base="issueLinkBase"
:root-path="rootPath" :root-path="rootPath"
:update-filters="true" /> :update-filters="true"
/>
</li> </li>
</template> </template>
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
<li <li
class="board-list-count text-center" class="board-list-count text-center"
v-if="showCount" v-if="showCount"
data-id="-1"> data-issue-id="-1">
<loading-icon <loading-icon
v-show="list.loadingMore" v-show="list.loadingMore"
......
<script> <script>
import { s__, sprintf } from '../../locale'; /* eslint-disable vue/require-default-prop */
import eventHub from '../event_hub'; import { s__, sprintf } from '../../locale';
import loadingButton from '../../vue_shared/components/loading_button.vue'; import eventHub from '../event_hub';
import { import loadingButton from '../../vue_shared/components/loading_button.vue';
APPLICATION_NOT_INSTALLABLE, import {
APPLICATION_SCHEDULED, APPLICATION_NOT_INSTALLABLE,
APPLICATION_INSTALLABLE, APPLICATION_SCHEDULED,
APPLICATION_INSTALLING, APPLICATION_INSTALLABLE,
APPLICATION_INSTALLED, APPLICATION_INSTALLING,
APPLICATION_ERROR, APPLICATION_INSTALLED,
REQUEST_LOADING, APPLICATION_ERROR,
REQUEST_SUCCESS, REQUEST_LOADING,
REQUEST_FAILURE, REQUEST_SUCCESS,
} from '../constants'; REQUEST_FAILURE,
} from '../constants';
export default { export default {
props: { components: {
id: { loadingButton,
type: String,
required: true,
}, },
title: { props: {
type: String, id: {
required: true, type: String,
required: true,
},
title: {
type: String,
required: true,
},
titleLink: {
type: String,
required: false,
},
description: {
type: String,
required: true,
},
status: {
type: String,
required: false,
},
statusReason: {
type: String,
required: false,
},
requestStatus: {
type: String,
required: false,
},
requestReason: {
type: String,
required: false,
},
}, },
titleLink: { computed: {
type: String, rowJsClass() {
required: false, return `js-cluster-application-row-${this.id}`;
}, },
description: { installButtonLoading() {
type: String, return !this.status ||
required: true, this.status === APPLICATION_SCHEDULED ||
}, this.status === APPLICATION_INSTALLING ||
status: { this.requestStatus === REQUEST_LOADING;
type: String, },
required: false, installButtonDisabled() {
}, // Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but
statusReason: { // we already made a request to install and are just waiting for the real-time
type: String, // to sync up.
required: false, return (this.status !== APPLICATION_INSTALLABLE
}, && this.status !== APPLICATION_ERROR) ||
requestStatus: { this.requestStatus === REQUEST_LOADING ||
type: String, this.requestStatus === REQUEST_SUCCESS;
required: false, },
}, installButtonLabel() {
requestReason: { let label;
type: String, if (
required: false, this.status === APPLICATION_NOT_INSTALLABLE ||
}, this.status === APPLICATION_INSTALLABLE ||
}, this.status === APPLICATION_ERROR
components: { ) {
loadingButton, label = s__('ClusterIntegration|Install');
}, } else if (this.status === APPLICATION_SCHEDULED ||
computed: { this.status === APPLICATION_INSTALLING) {
rowJsClass() { label = s__('ClusterIntegration|Installing');
return `js-cluster-application-row-${this.id}`; } else if (this.status === APPLICATION_INSTALLED) {
}, label = s__('ClusterIntegration|Installed');
installButtonLoading() { }
return !this.status ||
this.status === APPLICATION_SCHEDULED ||
this.status === APPLICATION_INSTALLING ||
this.requestStatus === REQUEST_LOADING;
},
installButtonDisabled() {
// Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but
// we already made a request to install and are just waiting for the real-time
// to sync up.
return (this.status !== APPLICATION_INSTALLABLE && this.status !== APPLICATION_ERROR) ||
this.requestStatus === REQUEST_LOADING ||
this.requestStatus === REQUEST_SUCCESS;
},
installButtonLabel() {
let label;
if (
this.status === APPLICATION_NOT_INSTALLABLE ||
this.status === APPLICATION_INSTALLABLE ||
this.status === APPLICATION_ERROR
) {
label = s__('ClusterIntegration|Install');
} else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) {
label = s__('ClusterIntegration|Installing');
} else if (this.status === APPLICATION_INSTALLED) {
label = s__('ClusterIntegration|Installed');
}
return label; return label;
}, },
hasError() { hasError() {
return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE; return this.status === APPLICATION_ERROR ||
}, this.requestStatus === REQUEST_FAILURE;
generalErrorDescription() { },
return sprintf( generalErrorDescription() {
s__('ClusterIntegration|Something went wrong while installing %{title}'), { return sprintf(
title: this.title, s__('ClusterIntegration|Something went wrong while installing %{title}'), {
}, title: this.title,
); },
);
},
}, },
}, methods: {
methods: { installClicked() {
installClicked() { eventHub.$emit('installApplication', this.id);
eventHub.$emit('installApplication', this.id); },
}, },
}, };
};
</script> </script>
<template> <template>
......
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { s__, sprintf } from '../../locale'; import { s__, sprintf } from '../../locale';
import applicationRow from './application_row.vue'; import applicationRow from './application_row.vue';
export default { export default {
props: { components: {
applications: { applicationRow,
type: Object,
required: false,
default: () => ({}),
}, },
helpPath: { props: {
type: String, applications: {
required: false, type: Object,
required: false,
default: () => ({}),
},
helpPath: {
type: String,
required: false,
default: '',
},
}, },
}, computed: {
components: { generalApplicationDescription() {
applicationRow, return sprintf(
}, _.escape(s__(`ClusterIntegration|Install applications on your cluster.
computed: { Read more about %{helpLink}`)),
generalApplicationDescription() { {
return sprintf( helpLink: `<a href="${this.helpPath}">
_.escape(s__('ClusterIntegration|Install applications on your cluster. Read more about %{helpLink}')), { ${_.escape(s__('ClusterIntegration|installing applications'))}
helpLink: `<a href="${this.helpPath}"> </a>`,
${_.escape(s__('ClusterIntegration|installing applications'))} },
</a>`, false,
}, );
false, },
); helmTillerDescription() {
}, return _.escape(s__(
helmTillerDescription() { `ClusterIntegration|Helm streamlines installing and managing Kubernets applications.
return _.escape(s__( Tiller runs inside of your Kubernetes Cluster, and manages
`ClusterIntegration|Helm streamlines installing and managing Kubernets applications. releases of your charts.`,
Tiller runs inside of your Kubernetes Cluster, and manages ));
releases of your charts.`, },
)); ingressDescription() {
}, const descriptionParagraph = _.escape(s__(
ingressDescription() { `ClusterIntegration|Ingress gives you a way to route requests to services based on the
const descriptionParagraph = _.escape(s__( request host or path, centralizing a number of services into a single entrypoint.`,
`ClusterIntegration|Ingress gives you a way to route requests to services based on the ));
request host or path, centralizing a number of services into a single entrypoint.`,
));
const extraCostParagraph = sprintf( const extraCostParagraph = sprintf(
_.escape(s__('ClusterIntegration|%{boldNotice} This will add some extra resources like a load balancer, which incur additional costs. See %{pricingLink}')), { _.escape(s__(`ClusterIntegration|%{boldNotice} This will add some
boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`, extra resources like a load balancer,
pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer"> which incur additional costs. See %{pricingLink}`)),
${_.escape(s__('ClusterIntegration|GKE pricing'))} {
</a>`, boldNotice: `<strong>${_.escape(s__('ClusterIntegration|Note:'))}</strong>`,
}, pricingLink: `<a href="https://cloud.google.com/compute/pricing#lb" target="_blank" rel="noopener noreferrer">
false, ${_.escape(s__('ClusterIntegration|GKE pricing'))}
); </a>`,
},
false,
);
return ` return `
<p> <p>
${descriptionParagraph} ${descriptionParagraph}
</p> </p>
<p class="append-bottom-0"> <p class="append-bottom-0">
${extraCostParagraph} ${extraCostParagraph}
</p> </p>
`; `;
}, },
gitlabRunnerDescription() { gitlabRunnerDescription() {
return _.escape(s__( return _.escape(s__(
`ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs `ClusterIntegration|GitLab Runner is the open source project that is used to run your jobs
and send the results back to GitLab.`, and send the results back to GitLab.`,
)); ));
}, },
prometheusDescription() { prometheusDescription() {
return sprintf( return sprintf(
_.escape(s__('ClusterIntegration|Prometheus is an open-source monitoring system with %{gitlabIntegrationLink} to monitor deployed applications.')), { _.escape(s__(`ClusterIntegration|Prometheus is an open-source monitoring system
gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html", target="_blank" rel="noopener noreferrer"> with %{gitlabIntegrationLink} to monitor deployed applications.`)),
${_.escape(s__('ClusterIntegration|Gitlab Integration'))} {
</a>`, gitlabIntegrationLink: `<a href="https://docs.gitlab.com/ce/user/project/integrations/prometheus.html"
}, target="_blank" rel="noopener noreferrer">
false, ${_.escape(s__('ClusterIntegration|Gitlab Integration'))}
); </a>`,
},
false,
);
},
}, },
}, };
};
</script> </script>
<template> <template>
...@@ -107,26 +116,29 @@ export default { ...@@ -107,26 +116,29 @@ export default {
:request-reason="applications.helm.requestReason" :request-reason="applications.helm.requestReason"
/> />
<application-row <application-row
id="ingress" id="ingress"
:title="applications.ingress.title" :title="applications.ingress.title"
title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/" title-link="https://kubernetes.io/docs/concepts/services-networking/ingress/"
:description="ingressDescription" :description="ingressDescription"
:status="applications.ingress.status" :status="applications.ingress.status"
:status-reason="applications.ingress.statusReason" :status-reason="applications.ingress.statusReason"
:request-status="applications.ingress.requestStatus" :request-status="applications.ingress.requestStatus"
:request-reason="applications.ingress.requestReason" :request-reason="applications.ingress.requestReason"
/> />
<application-row <application-row
id="prometheus" id="prometheus"
:title="applications.prometheus.title" :title="applications.prometheus.title"
title-link="https://prometheus.io/docs/introduction/overview/" title-link="https://prometheus.io/docs/introduction/overview/"
:description="prometheusDescription" :description="prometheusDescription"
:status="applications.prometheus.status" :status="applications.prometheus.status"
:status-reason="applications.prometheus.statusReason" :status-reason="applications.prometheus.statusReason"
:request-status="applications.prometheus.requestStatus" :request-status="applications.prometheus.requestStatus"
:request-reason="applications.prometheus.requestReason" :request-reason="applications.prometheus.requestReason"
/> />
<!-- NOTE: Don't forget to update `clusters.scss` min-height for this block and uncomment `application_spec` tests --> <!--
NOTE: Don't forget to update `clusters.scss`
min-height for this block and uncomment `application_spec` tests
-->
<!-- Add GitLab Runner row, all other plumbing is complete --> <!-- Add GitLab Runner row, all other plumbing is complete -->
</div> </div>
</div> </div>
......
...@@ -94,7 +94,7 @@ export default class ImageFile { ...@@ -94,7 +94,7 @@ export default class ImageFile {
}); });
return [maxWidth, maxHeight]; return [maxWidth, maxHeight];
} }
// eslint-disable-next-line
views = { views = {
'two-up': function() { 'two-up': function() {
return $('.two-up.view .wrap', this.file).each((function(_this) { return $('.two-up.view .wrap', this.file).each((function(_this) {
......
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
import pipelinesMixin from '../../pipelines/mixins/pipelines'; import pipelinesMixin from '../../pipelines/mixins/pipelines';
export default { export default {
mixins: [
pipelinesMixin,
],
props: { props: {
endpoint: { endpoint: {
type: String, type: String,
...@@ -31,9 +35,6 @@ ...@@ -31,9 +35,6 @@
default: 'child', default: 'child',
}, },
}, },
mixins: [
pipelinesMixin,
],
data() { data() {
const store = new PipelineStore(); const store = new PipelineStore();
...@@ -95,28 +96,29 @@ ...@@ -95,28 +96,29 @@
label="Loading pipelines" label="Loading pipelines"
size="3" size="3"
v-if="isLoading" v-if="isLoading"
/> />
<empty-state <empty-state
v-if="shouldRenderEmptyState" v-if="shouldRenderEmptyState"
:help-page-path="helpPagePath" :help-page-path="helpPagePath"
:empty-state-svg-path="emptyStateSvgPath" :empty-state-svg-path="emptyStateSvgPath"
/> />
<error-state <error-state
v-if="shouldRenderErrorState" v-if="shouldRenderErrorState"
:error-state-svg-path="errorStateSvgPath" :error-state-svg-path="errorStateSvgPath"
/> />
<div <div
class="table-holder" class="table-holder"
v-if="shouldRenderTable"> v-if="shouldRenderTable"
>
<pipelines-table-component <pipelines-table-component
:pipelines="state.pipelines" :pipelines="state.pipelines"
:update-graph-dropdown="updateGraphDropdown" :update-graph-dropdown="updateGraphDropdown"
:auto-devops-help-path="autoDevopsHelpPath" :auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType" :view-type="viewType"
/> />
</div> </div>
</div> </div>
</template> </template>
...@@ -26,28 +26,34 @@ ...@@ -26,28 +26,34 @@
class="js-ca-dismiss-button dismiss-button" class="js-ca-dismiss-button dismiss-button"
type="button" type="button"
:aria-label="__('Dismiss Cycle Analytics introduction box')" :aria-label="__('Dismiss Cycle Analytics introduction box')"
@click="dismissOverviewDialog"> @click="dismissOverviewDialog"
>
<i <i
class="fa fa-times" class="fa fa-times"
aria-hidden="true"> aria-hidden="true">
</i> </i>
</button> </button>
<div class="svg-container" v-html="iconCycleAnalyticsSplash"> <div
class="svg-container"
v-html="iconCycleAnalyticsSplash"
>
</div> </div>
<div class="inner-content"> <div class="inner-content">
<h4> <h4>
{{__('Introducing Cycle Analytics')}} {{ __('Introducing Cycle Analytics') }}
</h4> </h4>
<p> <p>
{{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }} {{ __(`Cycle Analytics gives an overview
of how much time it takes to go from idea to production in your project.`) }}
</p> </p>
<p> <p>
<a <a
:href="documentationLink" :href="documentationLink"
target="_blank" target="_blank"
rel="nofollow" rel="nofollow"
class="btn"> class="btn"
{{__('Read more')}} >
{{ __('Read more') }}
</a> </a>
</p> </p>
</div> </div>
......
...@@ -2,25 +2,34 @@ ...@@ -2,25 +2,34 @@
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
directives: {
tooltip,
},
props: { props: {
count: { count: {
type: Number, type: Number,
required: true, required: true,
}, },
}, },
directives: {
tooltip,
},
}; };
</script> </script>
<template> <template>
<span v-if="count === 50" class="events-info pull-right"> <span
v-if="count === 50"
class="events-info pull-right"
>
<i <i
class="fa fa-warning" class="fa fa-warning"
v-tooltip v-tooltip
aria-hidden="true" aria-hidden="true"
:title="n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)" :title="n__(
data-placement="top"></i> 'Limited to showing %d event at most',
'Limited to showing %d events at most',
50
)"
data-placement="top"
>
</i>
{{ n__('Showing %d event', 'Showing %d events', 50) }} {{ n__('Showing %d event', 'Showing %d events', 50) }}
</span> </span>
</template> </template>
...@@ -4,15 +4,21 @@ ...@@ -4,15 +4,21 @@
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
userAvatarImage, userAvatarImage,
limitWarning, limitWarning,
totalTime, totalTime,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
}; };
</script> </script>
<template> <template>
...@@ -22,28 +28,44 @@ ...@@ -22,28 +28,44 @@
<limit-warning :count="items.length" /> <limit-warning :count="items.length" />
</div> </div>
<ul class="stage-event-list"> <ul class="stage-event-list">
<li v-for="mergeRequest in items" class="stage-event-item"> <li
v-for="(mergeRequest, i) in items"
:key="i"
class="stage-event-item"
>
<div class="item-details"> <div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility --> <!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="mergeRequest.author.avatarUrl"/> <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
<h5 class="item-title merge-merquest-title"> <h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url"> <a :href="mergeRequest.url">
{{ mergeRequest.title }} {{ mergeRequest.title }}
</a> </a>
</h5> </h5>
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> <a
:href="mergeRequest.url"
class="issue-link">
!{{ mergeRequest.iid }}
</a>
&middot; &middot;
<span> <span>
{{ s__('OpenedNDaysAgo|Opened') }} {{ s__('OpenedNDaysAgo|Opened') }}
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a> <a
:href="mergeRequest.url"
class="issue-date">
{{ mergeRequest.createdAt }}
</a>
</span> </span>
<span> <span>
{{ s__('ByAuthor|by') }} {{ s__('ByAuthor|by') }}
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a> <a
:href="mergeRequest.author.webUrl"
class="issue-author-link">
{{ mergeRequest.author.name }}
</a>
</span> </span>
</div> </div>
<div class="item-time"> <div class="item-time">
<total-time :time="mergeRequest.totalTime"></total-time> <total-time :time="mergeRequest.totalTime" />
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -4,15 +4,21 @@ ...@@ -4,15 +4,21 @@
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
userAvatarImage, userAvatarImage,
limitWarning, limitWarning,
totalTime, totalTime,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
}; };
</script> </script>
<template> <template>
...@@ -25,30 +31,43 @@ ...@@ -25,30 +31,43 @@
<li <li
v-for="(issue, i) in items" v-for="(issue, i) in items"
:key="i" :key="i"
class="stage-event-item"> class="stage-event-item"
>
<div class="item-details"> <div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility --> <!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="issue.author.avatarUrl"/> <user-avatar-image :img-src="issue.author.avatarUrl"/>
<h5 class="item-title issue-title"> <h5 class="item-title issue-title">
<a class="issue-title" :href="issue.url"> <a
class="issue-title"
:href="issue.url"
>
{{ issue.title }} {{ issue.title }}
</a> </a>
</h5> </h5>
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> <a
:href="issue.url"
class="issue-link"
>#{{ issue.iid }}</a>
&middot; &middot;
<span> <span>
{{ s__('OpenedNDaysAgo|Opened') }} {{ s__('OpenedNDaysAgo|Opened') }}
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a> <a
:href="issue.url"
class="issue-date"
>{{ issue.createdAt }}</a>
</span> </span>
<span> <span>
{{ s__('ByAuthor|by') }} {{ s__('ByAuthor|by') }}
<a :href="issue.author.webUrl" class="issue-author-link"> <a
:href="issue.author.webUrl"
class="issue-author-link"
>
{{ issue.author.name }} {{ issue.author.name }}
</a> </a>
</span> </span>
</div> </div>
<div class="item-time"> <div class="item-time">
<total-time :time="issue.totalTime"/> <total-time :time="issue.totalTime" />
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -5,15 +5,21 @@ ...@@ -5,15 +5,21 @@
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
limitWarning, limitWarning,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
computed: { computed: {
iconCommit() { iconCommit() {
return iconCommit; return iconCommit;
...@@ -31,10 +37,11 @@ ...@@ -31,10 +37,11 @@
<li <li
v-for="(commit, i) in items" v-for="(commit, i) in items"
:key="i" :key="i"
class="stage-event-item"> class="stage-event-item"
>
<div class="item-details item-conmmit-component"> <div class="item-details item-conmmit-component">
<!-- FIXME: Pass an alt attribute here for accessibility --> <!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="commit.author.avatarUrl"/> <user-avatar-image :img-src="commit.author.avatarUrl" />
<h5 class="item-title commit-title"> <h5 class="item-title commit-title">
<a :href="commit.commitUrl"> <a :href="commit.commitUrl">
{{ commit.title }} {{ commit.title }}
...@@ -42,10 +49,20 @@ ...@@ -42,10 +49,20 @@
</h5> </h5>
<span> <span>
{{ s__('FirstPushedBy|First') }} {{ s__('FirstPushedBy|First') }}
<span class="commit-icon" v-html="iconCommit"></span> <span
<a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{ commit.shortSha }}</a> class="commit-icon"
v-html="iconCommit"
>
</span>
<a
:href="commit.commitUrl"
class="commit-hash-link commit-sha"
>{{ commit.shortSha }}</a>
{{ s__('FirstPushedBy|pushed by') }} {{ s__('FirstPushedBy|pushed by') }}
<a :href="commit.author.webUrl" class="commit-author-link"> <a
:href="commit.author.webUrl"
class="commit-author-link"
>
{{ commit.author.name }} {{ commit.author.name }}
</a> </a>
</span> </span>
......
...@@ -5,16 +5,22 @@ ...@@ -5,16 +5,22 @@
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
limitWarning, limitWarning,
icon, icon,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
}; };
</script> </script>
<template> <template>
...@@ -27,7 +33,8 @@ ...@@ -27,7 +33,8 @@
<li <li
v-for="(mergeRequest, i) in items" v-for="(mergeRequest, i) in items"
:key="i" :key="i"
class="stage-event-item"> class="stage-event-item"
>
<div class="item-details"> <div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility --> <!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="mergeRequest.author.avatarUrl"/> <user-avatar-image :img-src="mergeRequest.author.avatarUrl"/>
...@@ -36,34 +43,52 @@ ...@@ -36,34 +43,52 @@
{{ mergeRequest.title }} {{ mergeRequest.title }}
</a> </a>
</h5> </h5>
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> <a
:href="mergeRequest.url"
class="issue-link"
>!{{ mergeRequest.iid }}</a>
&middot; &middot;
<span> <span>
{{ s__('OpenedNDaysAgo|Opened') }} {{ s__('OpenedNDaysAgo|Opened') }}
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a> <a
:href="mergeRequest.url"
class="issue-date"
>{{ mergeRequest.createdAt }}</a>
</span> </span>
<span> <span>
{{ s__('ByAuthor|by') }} {{ s__('ByAuthor|by') }}
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a> <a
:href="mergeRequest.author.webUrl"
class="issue-author-link"
>{{ mergeRequest.author.name }}</a>
</span> </span>
<template v-if="mergeRequest.state === 'closed'"> <template v-if="mergeRequest.state === 'closed'">
<span class="merge-request-state"> <span class="merge-request-state">
<i class="fa fa-ban"></i> <i
class="fa fa-ban"
aria-hidden="true"
>
</i>
{{ mergeRequest.state.toUpperCase() }} {{ mergeRequest.state.toUpperCase() }}
</span> </span>
</template> </template>
<template v-else> <template v-else>
<span class="merge-request-branch" v-if="mergeRequest.branch"> <span
class="merge-request-branch"
v-if="mergeRequest.branch"
>
<icon <icon
name="fork" name="fork"
:size="16"> :size="16"
</icon> />
<a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a> <a :href="mergeRequest.branch.url">
{{ mergeRequest.branch.name }}
</a>
</span> </span>
</template> </template>
</div> </div>
<div class="item-time"> <div class="item-time">
<total-time :time="mergeRequest.totalTime"/> <total-time :time="mergeRequest.totalTime" />
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -6,16 +6,22 @@ ...@@ -6,16 +6,22 @@
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
userAvatarImage, userAvatarImage,
totalTime, totalTime,
limitWarning, limitWarning,
icon, icon,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
computed: { computed: {
iconBranch() { iconBranch() {
return iconBranch; return iconBranch;
...@@ -33,30 +39,58 @@ ...@@ -33,30 +39,58 @@
<li <li
v-for="(build, i) in items" v-for="(build, i) in items"
class="stage-event-item item-build-component" class="stage-event-item item-build-component"
:key="i"> :key="i"
>
<div class="item-details"> <div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility --> <!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="build.author.avatarUrl"/> <user-avatar-image :img-src="build.author.avatarUrl"/>
<h5 class="item-title"> <h5 class="item-title">
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a> <a
:href="build.url"
class="pipeline-id"
>
#{{ build.id }}
</a>
<icon <icon
name="fork" name="fork"
:size="16"> :size="16"
</icon> />
<a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a> <a
<span class="icon-branch" v-html="iconBranch"></span> :href="build.branch.url"
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> class="ref-name"
>
{{ build.branch.name }}
</a>
<span
class="icon-branch"
v-html="iconBranch"
>
</span>
<a
:href="build.commitUrl"
class="commit-sha"
>
{{ build.shortSha }}
</a>
</h5> </h5>
<span> <span>
<a :href="build.url" class="build-date">{{ build.date }}</a> <a
:href="build.url"
class="build-date"
>
{{ build.date }}
</a>
{{ s__('ByAuthor|by') }} {{ s__('ByAuthor|by') }}
<a :href="build.author.webUrl" class="issue-author-link"> <a
:href="build.author.webUrl"
class="issue-author-link"
>
{{ build.author.name }} {{ build.author.name }}
</a> </a>
</span> </span>
</div> </div>
<div class="item-time"> <div class="item-time">
<total-time :time="build.totalTime"/> <total-time :time="build.totalTime" />
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -6,15 +6,21 @@ ...@@ -6,15 +6,21 @@
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: {
items: Array,
stage: Object,
},
components: { components: {
totalTime, totalTime,
limitWarning, limitWarning,
icon, icon,
}, },
props: {
items: {
type: Array,
default: () => [],
},
stage: {
type: Object,
default: () => ({}),
},
},
computed: { computed: {
iconBuildStatus() { iconBuildStatus() {
return iconBuildStatus; return iconBuildStatus;
...@@ -35,29 +41,59 @@ ...@@ -35,29 +41,59 @@
<li <li
v-for="(build, i) in items" v-for="(build, i) in items"
:key="i" :key="i"
class="stage-event-item item-build-component"> class="stage-event-item item-build-component"
>
<div class="item-details"> <div class="item-details">
<h5 class="item-title"> <h5 class="item-title">
<span class="icon-build-status" v-html="iconBuildStatus"></span> <span
<a :href="build.url" class="item-build-name">{{ build.name }}</a> class="icon-build-status"
v-html="iconBuildStatus"
>
</span>
<a
:href="build.url"
class="item-build-name"
>
{{ build.name }}
</a>
&middot; &middot;
<a :href="build.url" class="pipeline-id">#{{ build.id }}</a> <a
:href="build.url"
class="pipeline-id"
>
#{{ build.id }}
</a>
<icon <icon
name="fork" name="fork"
:size="16"> :size="16"
</icon> />
<a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a> <a
<span class="icon-branch" v-html="iconBranch"></span> :href="build.branch.url"
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> class="ref-name"
>
{{ build.branch.name }}
</a>
<span
class="icon-branch"
v-html="iconBranch"
>
</span>
<a
:href="build.commitUrl"
class="commit-sha">
{{ build.shortSha }}
</a>
</h5> </h5>
<span> <span>
<a :href="build.url" class="issue-date"> <a
:href="build.url"
class="issue-date">
{{ build.date }} {{ build.date }}
</a> </a>
</span> </span>
</div> </div>
<div class="item-time"> <div class="item-time">
<total-time :time="build.totalTime"/> <total-time :time="build.totalTime" />
</div> </div>
</li> </li>
</ul> </ul>
......
...@@ -17,13 +17,33 @@ ...@@ -17,13 +17,33 @@
<template> <template>
<span class="total-time"> <span class="total-time">
<template v-if="hasData"> <template v-if="hasData">
<template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template> <template v-if="time.days">
<template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template> {{ time.days }}
<template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template> <span>
<template v-if="time.seconds && hasData === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template> {{ n__('day', 'days', time.days) }}
</span>
</template>
<template v-if="time.hours">
{{ time.hours }}
<span>
{{ n__('Time|hr', 'Time|hrs', time.hours) }}
</span>
</template>
<template v-if="time.mins && !time.days">
{{ time.mins }}
<span>
{{ n__('Time|min', 'Time|mins', time.mins) }}
</span>
</template>
<template v-if="time.seconds && hasData === 1 || time.seconds === 0">
{{ time.seconds }}
<span>
{{ s__('Time|s') }}
</span>
</template>
</template> </template>
<template v-else> <template v-else>
-- --
</template> </template>
</span> </span>
</template> </template>
...@@ -20,6 +20,16 @@ $(() => { ...@@ -20,6 +20,16 @@ $(() => {
gl.cycleAnalyticsApp = new Vue({ gl.cycleAnalyticsApp = new Vue({
el: '#cycle-analytics', el: '#cycle-analytics',
name: 'CycleAnalytics', name: 'CycleAnalytics',
components: {
banner,
'stage-issue-component': stageComponent,
'stage-plan-component': stagePlanComponent,
'stage-code-component': stageCodeComponent,
'stage-test-component': stageTestComponent,
'stage-review-component': stageReviewComponent,
'stage-staging-component': stageStagingComponent,
'stage-production-component': stageComponent,
},
data() { data() {
const cycleAnalyticsEl = document.querySelector('#cycle-analytics'); const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
const cycleAnalyticsService = new CycleAnalyticsService({ const cycleAnalyticsService = new CycleAnalyticsService({
...@@ -43,16 +53,6 @@ $(() => { ...@@ -43,16 +53,6 @@ $(() => {
return this.store.currentActiveStage(); return this.store.currentActiveStage();
}, },
}, },
components: {
banner,
'stage-issue-component': stageComponent,
'stage-plan-component': stagePlanComponent,
'stage-code-component': stageCodeComponent,
'stage-test-component': stageTestComponent,
'stage-review-component': stageReviewComponent,
'stage-staging-component': stageStagingComponent,
'stage-production-component': stageComponent,
},
created() { created() {
this.fetchCycleAnalyticsData(); this.fetchCycleAnalyticsData();
}, },
......
...@@ -3,10 +3,8 @@ ...@@ -3,10 +3,8 @@
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
data() { components: {
return { loadingIcon,
isLoading: false,
};
}, },
props: { props: {
deployKey: { deployKey: {
...@@ -23,11 +21,16 @@ ...@@ -23,11 +21,16 @@
default: 'btn-default', default: 'btn-default',
}, },
}, },
data() {
components: { return {
loadingIcon, isLoading: false,
};
},
computed: {
text() {
return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
},
}, },
methods: { methods: {
doAction() { doAction() {
this.isLoading = true; this.isLoading = true;
...@@ -37,11 +40,6 @@ ...@@ -37,11 +40,6 @@
}); });
}, },
}, },
computed: {
text() {
return `${this.type.charAt(0).toUpperCase()}${this.type.slice(1)}`;
},
},
}; };
</script> </script>
......
...@@ -7,11 +7,9 @@ ...@@ -7,11 +7,9 @@
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
data() { components: {
return { keysPanel,
isLoading: false, loadingIcon,
store: new DeployKeysStore(),
};
}, },
props: { props: {
endpoint: { endpoint: {
...@@ -19,6 +17,12 @@ ...@@ -19,6 +17,12 @@
required: true, required: true,
}, },
}, },
data() {
return {
isLoading: false,
store: new DeployKeysStore(),
};
},
computed: { computed: {
hasKeys() { hasKeys() {
return Object.keys(this.keys).length; return Object.keys(this.keys).length;
...@@ -27,9 +31,20 @@ ...@@ -27,9 +31,20 @@
return this.store.keys; return this.store.keys;
}, },
}, },
components: { created() {
keysPanel, this.service = new DeployKeysService(this.endpoint);
loadingIcon,
eventHub.$on('enable.key', this.enableKey);
eventHub.$on('remove.key', this.disableKey);
eventHub.$on('disable.key', this.disableKey);
},
mounted() {
this.fetchKeys();
},
beforeDestroy() {
eventHub.$off('enable.key', this.enableKey);
eventHub.$off('remove.key', this.disableKey);
eventHub.$off('disable.key', this.disableKey);
}, },
methods: { methods: {
fetchKeys() { fetchKeys() {
...@@ -59,21 +74,6 @@ ...@@ -59,21 +74,6 @@
} }
}, },
}, },
created() {
this.service = new DeployKeysService(this.endpoint);
eventHub.$on('enable.key', this.enableKey);
eventHub.$on('remove.key', this.disableKey);
eventHub.$on('disable.key', this.disableKey);
},
mounted() {
this.fetchKeys();
},
beforeDestroy() {
eventHub.$off('enable.key', this.enableKey);
eventHub.$off('remove.key', this.disableKey);
eventHub.$off('disable.key', this.disableKey);
},
}; };
</script> </script>
......
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
import { getTimeago } from '../../lib/utils/datetime_utility'; import { getTimeago } from '../../lib/utils/datetime_utility';
export default { export default {
components: {
actionBtn,
},
props: { props: {
deployKey: { deployKey: {
type: Object, type: Object,
...@@ -17,9 +20,6 @@ ...@@ -17,9 +20,6 @@
required: true, required: true,
}, },
}, },
components: {
actionBtn,
},
computed: { computed: {
timeagoDate() { timeagoDate() {
return getTimeago().format(this.deployKey.created_at); return getTimeago().format(this.deployKey.created_at);
...@@ -61,9 +61,10 @@ ...@@ -61,9 +61,10 @@
</div> </div>
<div class="deploy-key-content prepend-left-default deploy-key-projects"> <div class="deploy-key-content prepend-left-default deploy-key-projects">
<a <a
v-for="project in deployKey.projects" v-for="(project, i) in deployKey.projects"
class="label deploy-project-label" class="label deploy-project-label"
:href="project.full_path" :href="project.full_path"
:key="i"
> >
{{ project.full_name }} {{ project.full_name }}
</a> </a>
......
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
import key from './key.vue'; import key from './key.vue';
export default { export default {
components: {
key,
},
props: { props: {
title: { title: {
type: String, type: String,
...@@ -25,9 +28,6 @@ ...@@ -25,9 +28,6 @@
required: true, required: true,
}, },
}, },
components: {
key,
},
}; };
</script> </script>
...@@ -37,12 +37,14 @@ ...@@ -37,12 +37,14 @@
{{ title }} {{ title }}
({{ keys.length }}) ({{ keys.length }})
</h5> </h5>
<ul class="well-list" <ul
class="well-list"
v-if="keys.length" v-if="keys.length"
> >
<li <li
v-for="deployKey in keys" v-for="deployKey in keys"
:key="deployKey.id"> :key="deployKey.id"
>
<key <key
:deploy-key="deployKey" :deploy-key="deployKey"
:store="store" :store="store"
......
...@@ -3,14 +3,14 @@ import deployKeysApp from './components/app.vue'; ...@@ -3,14 +3,14 @@ import deployKeysApp from './components/app.vue';
document.addEventListener('DOMContentLoaded', () => new Vue({ document.addEventListener('DOMContentLoaded', () => new Vue({
el: document.getElementById('js-deploy-keys'), el: document.getElementById('js-deploy-keys'),
components: {
deployKeysApp,
},
data() { data() {
return { return {
endpoint: this.$options.el.dataset.endpoint, endpoint: this.$options.el.dataset.endpoint,
}; };
}, },
components: {
deployKeysApp,
},
render(createElement) { render(createElement) {
return createElement('deploy-keys-app', { return createElement('deploy-keys-app', {
props: { props: {
......
...@@ -13,7 +13,6 @@ import groupAvatar from './group_avatar'; ...@@ -13,7 +13,6 @@ import groupAvatar from './group_avatar';
import GroupLabelSubscription from './group_label_subscription'; import GroupLabelSubscription from './group_label_subscription';
import LineHighlighter from './line_highlighter'; import LineHighlighter from './line_highlighter';
import BuildArtifacts from './build_artifacts'; import BuildArtifacts from './build_artifacts';
import CILintEditor from './ci_lint_editor';
import groupsSelect from './groups_select'; import groupsSelect from './groups_select';
import Search from './search'; import Search from './search';
import initAdmin from './admin'; import initAdmin from './admin';
...@@ -188,15 +187,25 @@ import Activities from './activities'; ...@@ -188,15 +187,25 @@ import Activities from './activities';
initIssuableSidebar(); initIssuableSidebar();
break; break;
case 'dashboard:milestones:index': case 'dashboard:milestones:index':
projectSelect(); import('./pages/dashboard/milestones/index')
.then(callDefault)
.catch(fail);
break; break;
case 'projects:milestones:show': case 'projects:milestones:show':
case 'groups:milestones:show': case 'groups:milestones:show':
case 'dashboard:milestones:show':
new Milestone(); new Milestone();
new Sidebar(); new Sidebar();
break; break;
case 'dashboard:milestones:show':
import('./pages/dashboard/milestones/show')
.then(callDefault)
.catch(fail);
break;
case 'dashboard:issues': case 'dashboard:issues':
import('./pages/dashboard/issues')
.then(callDefault)
.catch(fail);
break;
case 'dashboard:merge_requests': case 'dashboard:merge_requests':
projectSelect(); projectSelect();
initLegacyFilters(); initLegacyFilters();
...@@ -212,6 +221,12 @@ import Activities from './activities'; ...@@ -212,6 +221,12 @@ import Activities from './activities';
case 'dashboard:todos:index': case 'dashboard:todos:index':
import('./pages/dashboard/todos/index').then(callDefault).catch(fail); import('./pages/dashboard/todos/index').then(callDefault).catch(fail);
break; break;
case 'dashboard:projects:index':
case 'dashboard:projects:starred':
import('./pages/dashboard/projects')
.then(callDefault)
.catch(fail);
break;
case 'explore:projects:index': case 'explore:projects:index':
case 'explore:projects:trending': case 'explore:projects:trending':
case 'explore:projects:starred': case 'explore:projects:starred':
...@@ -535,22 +550,19 @@ import Activities from './activities'; ...@@ -535,22 +550,19 @@ import Activities from './activities';
break; break;
case 'ci:lints:create': case 'ci:lints:create':
case 'ci:lints:show': case 'ci:lints:show':
new CILintEditor(); import('./pages/ci/lints').then(m => m.default()).catch(fail);
break; break;
case 'users:show': case 'users:show':
import('./pages/users/show').then(callDefault).catch(fail); import('./pages/users/show').then(callDefault).catch(fail);
break; break;
case 'admin:conversational_development_index:show': case 'admin:conversational_development_index:show':
new UserCallout(); import('./pages/admin/conversational_development_index/show').then(m => m.default()).catch(fail);
break; break;
case 'snippets:show': case 'snippets:show':
new LineHighlighter(); import('./pages/snippets/show').then(m => m.default()).catch(fail);
new BlobViewer();
initNotes();
new ZenMode();
break; break;
case 'import:fogbugz:new_user_map': case 'import:fogbugz:new_user_map':
new UsersSelect(); import('./pages/import/fogbugz/new_user_map').then(m => m.default()).catch(fail);
break; break;
case 'profiles:personal_access_tokens:index': case 'profiles:personal_access_tokens:index':
case 'admin:impersonation_tokens:index': case 'admin:impersonation_tokens:index':
......
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
import environmentTable from '../components/environments_table.vue'; import environmentTable from '../components/environments_table.vue';
export default { export default {
components: {
environmentTable,
loadingIcon,
tablePagination,
},
props: { props: {
isLoading: { isLoading: {
type: Boolean, type: Boolean,
...@@ -26,12 +31,6 @@ ...@@ -26,12 +31,6 @@
required: true, required: true,
}, },
}, },
components: {
environmentTable,
loadingIcon,
tablePagination,
},
methods: { methods: {
onChangePage(page) { onChangePage(page) {
this.$emit('onChangePage', page); this.$emit('onChangePage', page);
...@@ -47,7 +46,7 @@ ...@@ -47,7 +46,7 @@
label="Loading environments" label="Loading environments"
v-if="isLoading" v-if="isLoading"
size="3" size="3"
/> />
<slot name="emptyState"></slot> <slot name="emptyState"></slot>
...@@ -59,13 +58,13 @@ ...@@ -59,13 +58,13 @@
:environments="environments" :environments="environments"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
/> />
<table-pagination <table-pagination
v-if="pagination && pagination.totalPages > 1" v-if="pagination && pagination.totalPages > 1"
:change="onChangePage" :change="onChangePage"
:pageInfo="pagination" :page-info="pagination"
/> />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'environmentsEmptyState', name: 'EnvironmentsEmptyState',
props: { props: {
newPath: { newPath: {
type: String, type: String,
...@@ -21,21 +21,23 @@ ...@@ -21,21 +21,23 @@
<div class="blank-state-row"> <div class="blank-state-row">
<div class="blank-state-center"> <div class="blank-state-center">
<h2 class="blank-state-title js-blank-state-title"> <h2 class="blank-state-title js-blank-state-title">
{{s__("Environments|You don't have any environments right now.")}} {{ s__("Environments|You don't have any environments right now.") }}
</h2> </h2>
<p class="blank-state-text"> <p class="blank-state-text">
{{s__("Environments|Environments are places where code gets deployed, such as staging or production.")}} {{ s__(`Environments|Environments are places where
code gets deployed, such as staging or production.`) }}
<br /> <br />
<a :href="helpPath"> <a :href="helpPath">
{{s__("Environments|Read more about environments")}} {{ s__("Environments|Read more about environments") }}
</a> </a>
</p> </p>
<a <a
v-if="canCreateEnvironment" v-if="canCreateEnvironment"
:href="newPath" :href="newPath"
class="btn btn-create js-new-environment-button"> class="btn btn-create js-new-environment-button"
{{s__("Environments|New environment")}} >
{{ s__("Environments|New environment") }}
</a> </a>
</div> </div>
</div> </div>
......
<script> <script>
import playIconSvg from 'icons/_icon_play.svg'; import playIconSvg from 'icons/_icon_play.svg';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
props: { directives: {
actions: { tooltip,
type: Array,
required: false,
default: () => [],
}, },
},
directives: { components: {
tooltip, loadingIcon,
}, },
props: {
components: { actions: {
loadingIcon, type: Array,
}, required: false,
default: () => [],
},
},
data() { data() {
return { return {
playIconSvg, playIconSvg,
isLoading: false, isLoading: false,
}; };
}, },
computed: { computed: {
title() { title() {
return 'Deploy to...'; return 'Deploy to...';
},
}, },
},
methods: { methods: {
onClickAction(endpoint) { onClickAction(endpoint) {
this.isLoading = true; this.isLoading = true;
eventHub.$emit('postAction', endpoint); eventHub.$emit('postAction', endpoint);
}, },
isActionDisabled(action) { isActionDisabled(action) {
if (action.playable === undefined) { if (action.playable === undefined) {
return false; return false;
} }
return !action.playable; return !action.playable;
},
}, },
}, };
};
</script> </script>
<template> <template>
<div <div
...@@ -63,27 +62,33 @@ export default { ...@@ -63,27 +62,33 @@ export default {
data-toggle="dropdown" data-toggle="dropdown"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:disabled="isLoading"> :disabled="isLoading"
>
<span> <span>
<span v-html="playIconSvg"></span> <span v-html="playIconSvg"></span>
<i <i
class="fa fa-caret-down" class="fa fa-caret-down"
aria-hidden="true"/> aria-hidden="true"
>
</i>
<loading-icon v-if="isLoading" /> <loading-icon v-if="isLoading" />
</span> </span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-align-right"> <ul class="dropdown-menu dropdown-menu-align-right">
<li v-for="action in actions"> <li
v-for="(action, i) in actions"
:key="i">
<button <button
type="button" type="button"
class="js-manual-action-link no-btn btn" class="js-manual-action-link no-btn btn"
@click="onClickAction(action.play_path)" @click="onClickAction(action.play_path)"
:class="{ disabled: isActionDisabled(action) }" :class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)"> :disabled="isActionDisabled(action)"
>
<span v-html="playIconSvg"></span> <span v-html="playIconSvg"></span>
<span> <span>
{{action.name}} {{ action.name }}
</span> </span>
</button> </button>
</li> </li>
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import { s__ } from '../../locale'; import { s__ } from '../../locale';
/** /**
* Renders the external url link in environments table. * Renders the external url link in environments table.
*/ */
export default { export default {
props: { directives: {
externalUrl: { tooltip,
type: String, },
required: true, props: {
externalUrl: {
type: String,
required: true,
},
}, },
},
directives: {
tooltip,
},
computed: { computed: {
title() { title() {
return s__('Environments|Open'); return s__('Environments|Open');
},
}, },
}, };
};
</script> </script>
<template> <template>
<a <a
...@@ -33,9 +32,12 @@ export default { ...@@ -33,9 +32,12 @@ export default {
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="externalUrl"> :href="externalUrl"
>
<i <i
class="fa fa-external-link" class="fa fa-external-link"
aria-hidden="true" /> aria-hidden="true"
>
</i>
</a> </a>
</template> </template>
<script> <script>
/** /**
* Renders the Monitoring (Metrics) link in environments table. * Renders the Monitoring (Metrics) link in environments table.
*/ */
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
props: { directives: {
monitoringUrl: { tooltip,
type: String,
required: true,
}, },
},
directives: { props: {
tooltip, monitoringUrl: {
}, type: String,
required: true,
},
},
computed: { computed: {
title() { title() {
return 'Monitoring'; return 'Monitoring';
},
}, },
}, };
};
</script> </script>
<template> <template>
<a <a
...@@ -31,10 +31,12 @@ export default { ...@@ -31,10 +31,12 @@ export default {
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
:href="monitoringUrl" :href="monitoringUrl"
:title="title" :title="title"
:aria-label="title"> :aria-label="title"
>
<i <i
class="fa fa-area-chart" class="fa fa-area-chart"
aria-hidden="true" aria-hidden="true"
/> >
</i>
</a> </a>
</template> </template>
<script> <script>
/** /**
* Renders Rollback or Re deploy button in environments table depending * Renders Rollback or Re deploy button in environments table depending
* of the provided property `isLastDeployment`. * of the provided property `isLastDeployment`.
* *
* Makes a post request when the button is clicked. * Makes a post request when the button is clicked.
*/ */
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
export default { export default {
props: { components: {
retryUrl: { loadingIcon,
type: String,
default: '',
}, },
isLastDeployment: { props: {
type: Boolean, retryUrl: {
default: true, type: String,
}, default: '',
}, },
components: { isLastDeployment: {
loadingIcon, type: Boolean,
}, default: true,
},
},
data() { data() {
return { return {
isLoading: false, isLoading: false,
}; };
}, },
methods: { methods: {
onClick() { onClick() {
this.isLoading = true; this.isLoading = true;
eventHub.$emit('postAction', this.retryUrl); eventHub.$emit('postAction', this.retryUrl);
},
}, },
}, };
};
</script> </script>
<template> <template>
<button <button
type="button" type="button"
class="btn hidden-xs hidden-sm" class="btn hidden-xs hidden-sm"
@click="onClick" @click="onClick"
:disabled="isLoading"> :disabled="isLoading"
>
<span v-if="isLastDeployment"> <span v-if="isLastDeployment">
{{s__("Environments|Re-deploy")}} {{ s__("Environments|Re-deploy") }}
</span> </span>
<span v-else> <span v-else>
{{s__("Environments|Rollback")}} {{ s__("Environments|Rollback") }}
</span> </span>
<loading-icon v-if="isLoading" /> <loading-icon v-if="isLoading" />
......
<script> <script>
/** /**
* Renders the stop "button" that allows stop an environment. * Renders the stop "button" that allows stop an environment.
* Used in environments table. * Used in environments table.
*/ */
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import loadingIcon from '../../vue_shared/components/loading_icon.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
props: { components: {
stopUrl: { loadingIcon,
type: String,
default: '',
}, },
},
directives: { directives: {
tooltip, tooltip,
}, },
data() { props: {
return { stopUrl: {
isLoading: false, type: String,
}; default: '',
}, },
},
components: { data() {
loadingIcon, return {
}, isLoading: false,
};
},
computed: { computed: {
title() { title() {
return 'Stop'; return 'Stop';
},
}, },
},
methods: { methods: {
onClick() { onClick() {
// eslint-disable-next-line no-alert // eslint-disable-next-line no-alert
if (confirm('Are you sure you want to stop this environment?')) { if (confirm('Are you sure you want to stop this environment?')) {
this.isLoading = true; this.isLoading = true;
$(this.$el).tooltip('destroy'); $(this.$el).tooltip('destroy');
eventHub.$emit('postAction', this.stopUrl); eventHub.$emit('postAction', this.stopUrl);
} }
},
}, },
}, };
};
</script> </script>
<template> <template>
<button <button
...@@ -58,10 +58,13 @@ export default { ...@@ -58,10 +58,13 @@ export default {
@click="onClick" @click="onClick"
:disabled="isLoading" :disabled="isLoading"
:title="title" :title="title"
:aria-label="title"> :aria-label="title"
>
<i <i
class="fa fa-stop stop-env-icon" class="fa fa-stop stop-env-icon"
aria-hidden="true" /> aria-hidden="true"
>
</i>
<loading-icon v-if="isLoading" /> <loading-icon v-if="isLoading" />
</button> </button>
</template> </template>
<script> <script>
/** /**
* Renders a terminal button to open a web terminal. * Renders a terminal button to open a web terminal.
* Used in environments table. * Used in environments table.
*/ */
import terminalIconSvg from 'icons/_icon_terminal.svg'; import terminalIconSvg from 'icons/_icon_terminal.svg';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
props: { directives: {
terminalPath: { tooltip,
type: String,
required: false,
default: '',
}, },
},
directives: { props: {
tooltip, terminalPath: {
}, type: String,
required: false,
default: '',
},
},
data() { data() {
return { return {
terminalIconSvg, terminalIconSvg,
}; };
}, },
computed: { computed: {
title() { title() {
return 'Terminal'; return 'Terminal';
},
}, },
}, };
};
</script> </script>
<template> <template>
<a <a
...@@ -40,6 +40,7 @@ export default { ...@@ -40,6 +40,7 @@ export default {
:title="title" :title="title"
:aria-label="title" :aria-label="title"
:href="terminalPath" :href="terminalPath"
v-html="terminalIconSvg"> v-html="terminalIconSvg"
>
</a> </a>
</template> </template>
...@@ -7,6 +7,15 @@ ...@@ -7,6 +7,15 @@
import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
export default { export default {
components: {
emptyState,
},
mixins: [
CIPaginationMixin,
environmentsMixin,
],
props: { props: {
endpoint: { endpoint: {
type: String, type: String,
...@@ -37,14 +46,6 @@ ...@@ -37,14 +46,6 @@
required: true, required: true,
}, },
}, },
components: {
emptyState,
},
mixins: [
CIPaginationMixin,
environmentsMixin,
],
created() { created() {
eventHub.$on('toggleFolder', this.toggleFolder); eventHub.$on('toggleFolder', this.toggleFolder);
...@@ -95,15 +96,17 @@ ...@@ -95,15 +96,17 @@
:tabs="tabs" :tabs="tabs"
@onChangeTab="onChangeTab" @onChangeTab="onChangeTab"
scope="environments" scope="environments"
/> />
<div <div
v-if="canCreateEnvironment && !isLoading" v-if="canCreateEnvironment && !isLoading"
class="nav-controls"> class="nav-controls"
>
<a <a
:href="newEnvironmentPath" :href="newEnvironmentPath"
class="btn btn-create"> class="btn btn-create"
{{s__("Environments|New environment")}} >
{{ s__("Environments|New environment") }}
</a> </a>
</div> </div>
</div> </div>
...@@ -116,13 +119,13 @@ ...@@ -116,13 +119,13 @@
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
@onChangePage="onChangePage" @onChangePage="onChangePage"
> >
<empty-state <empty-state
slot="emptyState" slot="emptyState"
v-if="!isLoading && state.environments.length === 0" v-if="!isLoading && state.environments.length === 0"
:new-path="newEnvironmentPath" :new-path="newEnvironmentPath"
:help-path="helpPagePath" :help-path="helpPagePath"
:can-create-environment="canCreateEnvironment" :can-create-environment="canCreateEnvironment"
/> />
</container> </container>
</div> </div>
</template> </template>
...@@ -30,63 +30,96 @@ export default { ...@@ -30,63 +30,96 @@ export default {
default: false, default: false,
}, },
}, },
methods: { methods: {
folderUrl(model) { folderUrl(model) {
return `${window.location.pathname}/folders/${model.folderName}`; return `${window.location.pathname}/folders/${model.folderName}`;
}, },
shouldRenderFolderContent(env) {
return env.isFolder &&
env.isOpen &&
env.children &&
env.children.length > 0;
},
}, },
}; };
</script> </script>
<template> <template>
<div class="ci-table" role="grid"> <div
<div class="gl-responsive-table-row table-row-header" role="row"> class="ci-table"
<div class="table-section section-10 environments-name" role="columnheader"> role="grid"
{{s__("Environments|Environment")}} >
<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>
<div class="table-section section-10 environments-deploy" role="columnheader"> <div
{{s__("Environments|Deployment")}} class="table-section section-10 environments-deploy"
role="columnheader"
>
{{ s__("Environments|Deployment") }}
</div> </div>
<div class="table-section section-15 environments-build" role="columnheader"> <div
{{s__("Environments|Job")}} class="table-section section-15 environments-build"
role="columnheader"
>
{{ s__("Environments|Job") }}
</div> </div>
<div class="table-section section-25 environments-commit" role="columnheader"> <div
{{s__("Environments|Commit")}} class="table-section section-25 environments-commit"
role="columnheader"
>
{{ s__("Environments|Commit") }}
</div> </div>
<div class="table-section section-10 environments-date" role="columnheader"> <div
{{s__("Environments|Updated")}} class="table-section section-10 environments-date"
role="columnheader"
>
{{ s__("Environments|Updated") }}
</div> </div>
</div> </div>
<template <template
v-for="model in environments" v-for="(model, i) in environments"
v-bind:model="model"> :model="model">
<div <div
is="environment-item" is="environment-item"
:model="model" :model="model"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
/> :key="i"
/>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0"> <template
<div v-if="model.isLoadingFolderContent"> v-if="shouldRenderFolderContent(model)"
>
<div
v-if="model.isLoadingFolderContent"
:key="i">
<loading-icon size="2" /> <loading-icon size="2" />
</div> </div>
<template v-else> <template v-else>
<div <div
is="environment-item" is="environment-item"
v-for="children in model.children" v-for="(children, index) in model.children"
:model="children" :model="children"
:can-create-deployment="canCreateDeployment" :can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment" :can-read-environment="canReadEnvironment"
/> :key="index"
/>
<div> <div :key="i">
<div class="text-center prepend-top-10"> <div class="text-center prepend-top-10">
<a <a
:href="folderUrl(model)" :href="folderUrl(model)"
class="btn btn-default"> class="btn btn-default"
{{s__("Environments|Show all")}} >
{{ s__("Environments|Show all") }}
</a> </a>
</div> </div>
</div> </div>
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
export default { export default {
mixins: [
environmentsMixin,
CIPaginationMixin,
],
props: { props: {
endpoint: { endpoint: {
type: String, type: String,
...@@ -25,10 +29,6 @@ ...@@ -25,10 +29,6 @@
required: true, required: true,
}, },
}, },
mixins: [
environmentsMixin,
CIPaginationMixin,
],
methods: { methods: {
successCallback(resp) { successCallback(resp) {
this.saveData(resp); this.saveData(resp);
...@@ -40,17 +40,18 @@ ...@@ -40,17 +40,18 @@
<div :class="cssContainerClass"> <div :class="cssContainerClass">
<div <div
class="top-area" class="top-area"
v-if="!isLoading"> v-if="!isLoading"
>
<h4 class="js-folder-name environments-folder-name"> <h4 class="js-folder-name environments-folder-name">
{{s__("Environments|Environments")}} / <b>{{folderName}}</b> {{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
</h4> </h4>
<tabs <tabs
:tabs="tabs" :tabs="tabs"
@onChangeTab="onChangeTab" @onChangeTab="onChangeTab"
scope="environments" scope="environments"
/> />
</div> </div>
<container <container
......
...@@ -32,6 +32,9 @@ class RecentSearchesRoot { ...@@ -32,6 +32,9 @@ class RecentSearchesRoot {
const state = this.store.state; const state = this.store.state;
this.vm = new Vue({ this.vm = new Vue({
el: this.wrapperElement, el: this.wrapperElement,
components: {
'recent-searches-dropdown-content': RecentSearchesDropdownContent,
},
data() { return state; }, data() { return state; },
template: ` template: `
<recent-searches-dropdown-content <recent-searches-dropdown-content
...@@ -40,9 +43,6 @@ class RecentSearchesRoot { ...@@ -40,9 +43,6 @@ class RecentSearchesRoot {
:allowed-keys="allowedKeys" :allowed-keys="allowedKeys"
/> />
`, `,
components: {
'recent-searches-dropdown-content': RecentSearchesDropdownContent,
},
}); });
} }
......
...@@ -42,6 +42,26 @@ export default { ...@@ -42,6 +42,26 @@ export default {
return this.store.getPaginationInfo(); 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: { methods: {
fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) { fetchGroups({ parentId, page, filterGroupsBy, sortBy, archived, updatePagination }) {
return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived) return this.service.getGroups(parentId, page, filterGroupsBy, sortBy, archived)
...@@ -152,26 +172,6 @@ export default { ...@@ -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> </script>
......
...@@ -20,7 +20,11 @@ export default { ...@@ -20,7 +20,11 @@ export default {
return this.parentGroup.childrenCount > MAX_CHILDREN_COUNT; return this.parentGroup.childrenCount > MAX_CHILDREN_COUNT;
}, },
moreChildrenStats() { moreChildrenStats() {
return n__('One more item', '%d more items', this.parentGroup.childrenCount - this.parentGroup.children.length); return n__(
'One more item',
'%d more items',
this.parentGroup.childrenCount - this.parentGroup.children.length,
);
}, },
}, },
}; };
...@@ -43,8 +47,9 @@ export default { ...@@ -43,8 +47,9 @@ export default {
<i <i
class="fa fa-external-link" class="fa fa-external-link"
aria-hidden="true" aria-hidden="true"
/> >
{{moreChildrenStats}} </i>
{{ moreChildrenStats }}
</a> </a>
</li> </li>
</ul> </ul>
......
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
:id="groupDomId" :id="groupDomId"
:class="rowClass" :class="rowClass"
class="group-row" class="group-row"
> >
<div <div
class="group-row-contents" class="group-row-contents"
:class="{ 'project-row-contents': !isGroup }"> :class="{ 'project-row-contents': !isGroup }">
...@@ -88,7 +88,8 @@ export default { ...@@ -88,7 +88,8 @@ export default {
:item="group" :item="group"
/> />
<div <div
class="folder-toggle-wrap"> class="folder-toggle-wrap"
>
<item-caret <item-caret
:is-group-open="group.isOpen" :is-group-open="group.isOpen"
/> />
...@@ -113,13 +114,14 @@ export default { ...@@ -113,13 +114,14 @@ export default {
<identicon <identicon
v-else v-else
size-class="s24" size-class="s24"
:entity-id=group.id :entity-id="group.id"
:entity-name="group.name" :entity-name="group.name"
/> />
</a> </a>
</div> </div>
<div <div
class="title namespace-title"> class="title namespace-title"
>
<a <a
v-tooltip v-tooltip
:href="group.relativePath" :href="group.relativePath"
...@@ -135,7 +137,7 @@ export default { ...@@ -135,7 +137,7 @@ export default {
v-if="group.permission" v-if="group.permission"
class="user-access-role" class="user-access-role"
> >
{{group.permission}} {{ group.permission }}
</span> </span>
</div> </div>
<div <div
......
<script> <script>
import tablePagination from '~/vue_shared/components/table_pagination.vue'; import tablePagination from '~/vue_shared/components/table_pagination.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import { getParameterByName } from '../../lib/utils/common_utils'; import { getParameterByName } from '../../lib/utils/common_utils';
export default { export default {
components: { components: {
tablePagination, tablePagination,
},
props: {
groups: {
type: Array,
required: true,
}, },
pageInfo: { props: {
type: Object, groups: {
required: true, type: Array,
required: true,
},
pageInfo: {
type: Object,
required: true,
},
searchEmpty: {
type: Boolean,
required: true,
},
searchEmptyMessage: {
type: String,
required: true,
},
}, },
searchEmpty: { methods: {
type: Boolean, change(page) {
required: true, const filterGroupsParam = getParameterByName('filter_groups');
const sortParam = getParameterByName('sort');
const archivedParam = getParameterByName('archived');
eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
},
}, },
searchEmptyMessage: { };
type: String,
required: true,
},
},
methods: {
change(page) {
const filterGroupsParam = getParameterByName('filter_groups');
const sortParam = getParameterByName('sort');
const archivedParam = getParameterByName('archived');
eventHub.$emit('fetchPage', page, filterGroupsParam, sortParam, archivedParam);
},
},
};
</script> </script>
<template> <template>
<div class="groups-list-tree-container"> <div class="groups-list-tree-container">
<div <div
v-if="searchEmpty" v-if="searchEmpty"
class="has-no-search-results"> class="has-no-search-results"
{{searchEmptyMessage}} >
{{ searchEmptyMessage }}
</div> </div>
<group-folder <group-folder
v-if="!searchEmpty" v-if="!searchEmpty"
...@@ -50,7 +51,7 @@ export default { ...@@ -50,7 +51,7 @@ export default {
<table-pagination <table-pagination
v-if="!searchEmpty" v-if="!searchEmpty"
:change="change" :change="change"
:pageInfo="pageInfo" :page-info="pageInfo"
/> />
</div> </div>
</template> </template>
<script> <script>
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import icon from '~/vue_shared/components/icon.vue'; import icon from '~/vue_shared/components/icon.vue';
import modal from '~/vue_shared/components/modal.vue'; import modal from '~/vue_shared/components/modal.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import { COMMON_STR } from '../constants'; import { COMMON_STR } from '../constants';
export default { export default {
components: { components: {
icon, icon,
modal, modal,
},
directives: {
tooltip,
},
props: {
parentGroup: {
type: Object,
required: false,
default: () => ({}),
}, },
group: { directives: {
type: Object, tooltip,
required: true,
}, },
}, props: {
data() { parentGroup: {
return { type: Object,
modalStatus: false, required: false,
}; default: () => ({}),
}, },
computed: { group: {
leaveBtnTitle() { type: Object,
return COMMON_STR.LEAVE_BTN_TITLE; required: true,
},
}, },
editBtnTitle() { data() {
return COMMON_STR.EDIT_BTN_TITLE; return {
modalStatus: false,
};
}, },
leaveConfirmationMessage() { computed: {
return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`); leaveBtnTitle() {
return COMMON_STR.LEAVE_BTN_TITLE;
},
editBtnTitle() {
return COMMON_STR.EDIT_BTN_TITLE;
},
leaveConfirmationMessage() {
return s__(`GroupsTree|Are you sure you want to leave the "${this.group.fullName}" group?`);
},
}, },
}, methods: {
methods: { onLeaveGroup() {
onLeaveGroup() { this.modalStatus = true;
this.modalStatus = true; },
leaveGroup() {
this.modalStatus = false;
eventHub.$emit('leaveGroup', this.group, this.parentGroup);
},
}, },
leaveGroup() { };
this.modalStatus = false;
eventHub.$emit('leaveGroup', this.group, this.parentGroup);
},
},
};
</script> </script>
<template> <template>
......
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
import icon from '~/vue_shared/components/icon.vue'; import icon from '~/vue_shared/components/icon.vue';
export default { export default {
components: {
icon,
},
props: { props: {
isGroupOpen: { isGroupOpen: {
type: Boolean, type: Boolean,
...@@ -9,9 +12,6 @@ export default { ...@@ -9,9 +12,6 @@ export default {
default: false, default: false,
}, },
}, },
components: {
icon,
},
computed: { computed: {
iconClass() { iconClass() {
return this.isGroupOpen ? 'angle-down' : 'angle-right'; return this.isGroupOpen ? 'angle-down' : 'angle-right';
......
<script> <script>
import icon from '~/vue_shared/components/icon.vue'; import icon from '~/vue_shared/components/icon.vue';
import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import { ITEM_TYPE, VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE, PROJECT_VISIBILITY_TYPE } from '../constants'; import {
import itemStatsValue from './item_stats_value.vue'; ITEM_TYPE,
VISIBILITY_TYPE_ICON,
GROUP_VISIBILITY_TYPE,
PROJECT_VISIBILITY_TYPE,
} from '../constants';
import itemStatsValue from './item_stats_value.vue';
export default { export default {
components: { components: {
icon, icon,
timeAgoTooltip, timeAgoTooltip,
itemStatsValue, itemStatsValue,
},
props: {
item: {
type: Object,
required: true,
}, },
}, props: {
computed: { item: {
visibilityIcon() { type: Object,
return VISIBILITY_TYPE_ICON[this.item.visibility]; required: true,
},
}, },
visibilityTooltip() { computed: {
if (this.item.type === ITEM_TYPE.GROUP) { visibilityIcon() {
return GROUP_VISIBILITY_TYPE[this.item.visibility]; return VISIBILITY_TYPE_ICON[this.item.visibility];
} },
return PROJECT_VISIBILITY_TYPE[this.item.visibility]; visibilityTooltip() {
if (this.item.type === ITEM_TYPE.GROUP) {
return GROUP_VISIBILITY_TYPE[this.item.visibility];
}
return PROJECT_VISIBILITY_TYPE[this.item.visibility];
},
isProject() {
return this.item.type === ITEM_TYPE.PROJECT;
},
isGroup() {
return this.item.type === ITEM_TYPE.GROUP;
},
}, },
isProject() { };
return this.item.type === ITEM_TYPE.PROJECT;
},
isGroup() {
return this.item.type === ITEM_TYPE.GROUP;
},
},
};
</script> </script>
<template> <template>
......
<script> <script>
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import icon from '~/vue_shared/components/icon.vue'; import icon from '~/vue_shared/components/icon.vue';
export default { export default {
props: { components: {
title: { icon,
type: String,
required: false,
default: '',
}, },
cssClass: { directives: {
type: String, tooltip,
required: false,
default: '',
}, },
iconName: { props: {
type: String, title: {
required: true, type: String,
required: false,
default: '',
},
cssClass: {
type: String,
required: false,
default: '',
},
iconName: {
type: String,
required: true,
},
tooltipPlacement: {
type: String,
required: false,
default: 'bottom',
},
/**
* value could either be number or string
* as `memberCount` is always passed as string
* while `subgroupCount` & `projectCount`
* are always number
*/
value: {
type: [Number, String],
required: false,
default: '',
},
}, },
tooltipPlacement: { computed: {
type: String, isValuePresent() {
required: false, return this.value !== '';
default: 'bottom', },
}, },
/** };
* value could either be number or string
* as `memberCount` is always passed as string
* while `subgroupCount` & `projectCount`
* are always number
*/
value: {
type: [Number, String],
required: false,
default: '',
},
},
directives: {
tooltip,
},
components: {
icon,
},
computed: {
isValuePresent() {
return this.value !== '';
},
},
};
</script> </script>
<template> <template>
...@@ -57,12 +57,12 @@ export default { ...@@ -57,12 +57,12 @@ export default {
:class="cssClass" :class="cssClass"
:title="title" :title="title"
> >
<icon :name="iconName"/> <icon :name="iconName" />
<span <span
v-if="isValuePresent" v-if="isValuePresent"
class="stat-value" class="stat-value"
> >
{{value}} {{ value }}
</span> </span>
</span> </span>
</template> </template>
...@@ -32,7 +32,6 @@ ...@@ -32,7 +32,6 @@
this.$emit('toggleCollapsed'); this.$emit('toggleCollapsed');
}, },
}, },
}; };
</script> </script>
......
<script> <script>
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import ideSidebar from './ide_side_bar.vue'; import ideSidebar from './ide_side_bar.vue';
import ideContextbar from './ide_context_bar.vue'; import ideContextbar from './ide_context_bar.vue';
import repoTabs from './repo_tabs.vue'; import repoTabs from './repo_tabs.vue';
import repoFileButtons from './repo_file_buttons.vue'; import repoFileButtons from './repo_file_buttons.vue';
import ideStatusBar from './ide_status_bar.vue'; import ideStatusBar from './ide_status_bar.vue';
import repoPreview from './repo_preview.vue'; import repoPreview from './repo_preview.vue';
import repoEditor from './repo_editor.vue'; import repoEditor from './repo_editor.vue';
export default { export default {
props: { components: {
emptyStateSvgPath: { ideSidebar,
type: String, ideContextbar,
required: true, repoTabs,
repoFileButtons,
ideStatusBar,
repoEditor,
repoPreview,
}, },
}, props: {
computed: { emptyStateSvgPath: {
...mapState([ type: String,
'currentBlobView', required: true,
'selectedFile', },
]), },
...mapGetters([ computed: {
'changedFiles', ...mapState([
'activeFile', 'currentBlobView',
]), 'selectedFile',
}, ]),
components: { ...mapGetters([
ideSidebar, 'changedFiles',
ideContextbar, 'activeFile',
repoTabs, ]),
repoFileButtons, },
ideStatusBar, mounted() {
repoEditor, const returnValue = 'Are you sure you want to lose unsaved changes?';
repoPreview, window.onbeforeunload = (e) => {
}, if (!this.changedFiles.length) return undefined;
mounted() {
const returnValue = 'Are you sure you want to lose unsaved changes?';
window.onbeforeunload = (e) => {
if (!this.changedFiles.length) return undefined;
Object.assign(e, { Object.assign(e, {
returnValue, returnValue,
}); });
return returnValue; return returnValue;
}; };
}, },
}; };
</script> </script>
<template> <template>
<div <div
class="ide-view" class="ide-view"
> >
<ide-sidebar/> <ide-sidebar />
<div <div
class="multi-file-edit-pane" class="multi-file-edit-pane"
> >
<template <template
v-if="activeFile"> v-if="activeFile"
>
<repo-tabs/> <repo-tabs/>
<component <component
class="multi-file-edit-pane-content" class="multi-file-edit-pane-content"
:is="currentBlobView" :is="currentBlobView"
/> />
<repo-file-buttons/> <repo-file-buttons />
<ide-status-bar <ide-status-bar
:file="selectedFile"/> :file="selectedFile"
/>
</template> </template>
<template <template
v-else> v-else
>
<div class="ide-empty-state"> <div class="ide-empty-state">
<div class="row js-empty-state"> <div class="row js-empty-state">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="svg-content svg-250"> <div class="svg-content svg-250">
<img :src="emptyStateSvgPath"> <img :src="emptyStateSvgPath" />
</div> </div>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
...@@ -82,7 +85,8 @@ export default { ...@@ -82,7 +85,8 @@ export default {
Welcome to the GitLab IDE Welcome to the GitLab IDE
</h4> </h4>
<p> <p>
You can select a file in the left sidebar to begin editing and use the right sidebar to commit your changes. You can select a file in the left sidebar to begin
editing and use the right sidebar to commit your changes.
</p> </p>
</div> </div>
</div> </div>
......
<script> <script>
import { mapGetters, mapState, mapActions } from 'vuex'; import { mapGetters, mapState, mapActions } from 'vuex';
import repoCommitSection from './repo_commit_section.vue'; import repoCommitSection from './repo_commit_section.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
import panelResizer from '../../vue_shared/components/panel_resizer.vue'; import panelResizer from '../../vue_shared/components/panel_resizer.vue';
export default { export default {
data() { components: {
return { repoCommitSection,
width: 290, icon,
}; panelResizer,
},
components: {
repoCommitSection,
icon,
panelResizer,
},
computed: {
...mapState([
'rightPanelCollapsed',
]),
...mapGetters([
'changedFiles',
]),
currentIcon() {
return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
}, },
maxSize() { data() {
return window.innerWidth / 2; return {
width: 290,
};
}, },
panelStyle() { computed: {
if (!this.rightPanelCollapsed) { ...mapState([
return { width: `${this.width}px` }; 'rightPanelCollapsed',
} ]),
return {}; ...mapGetters([
'changedFiles',
]),
currentIcon() {
return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
},
maxSize() {
return window.innerWidth / 2;
},
panelStyle() {
if (!this.rightPanelCollapsed) {
return { width: `${this.width}px` };
}
return {};
},
}, },
}, methods: {
methods: { ...mapActions([
...mapActions([ 'setPanelCollapsedStatus',
'setPanelCollapsedStatus', 'setResizingStatus',
'setResizingStatus', ]),
]), toggleCollapsed() {
toggleCollapsed() { this.setPanelCollapsedStatus({
this.setPanelCollapsedStatus({ side: 'right',
side: 'right', collapsed: !this.rightPanelCollapsed,
collapsed: !this.rightPanelCollapsed, });
}); },
resizingStarted() {
this.setResizingStatus(true);
},
resizingEnded() {
this.setResizingStatus(false);
},
}, },
resizingStarted() { };
this.setResizingStatus(true);
},
resizingEnded() {
this.setResizingStatus(false);
},
},
};
</script> </script>
<template> <template>
...@@ -64,17 +64,17 @@ export default { ...@@ -64,17 +64,17 @@ export default {
}" }"
:style="panelStyle" :style="panelStyle"
> >
<div <div class="multi-file-commit-panel-section">
class="multi-file-commit-panel-section">
<header <header
class="multi-file-commit-panel-header" class="multi-file-commit-panel-header"
:class="{ :class="{
'is-collapsed': rightPanelCollapsed, 'is-collapsed': rightPanelCollapsed,
}" }"
> >
<div <div
class="multi-file-commit-panel-header-title" class="multi-file-commit-panel-header-title"
v-if="!rightPanelCollapsed"> v-if="!rightPanelCollapsed"
>
<icon <icon
name="list-bulleted" name="list-bulleted"
:size="18" :size="18"
...@@ -92,8 +92,7 @@ export default { ...@@ -92,8 +92,7 @@ export default {
/> />
</button> </button>
</header> </header>
<repo-commit-section <repo-commit-section />
class=""/>
</div> </div>
<panel-resizer <panel-resizer
:size.sync="width" :size.sync="width"
...@@ -103,6 +102,7 @@ export default { ...@@ -103,6 +102,7 @@ export default {
:max-size="maxSize" :max-size="maxSize"
@resize-start="resizingStarted" @resize-start="resizingStarted"
@resize-end="resizingEnded" @resize-end="resizingEnded"
side="left"/> side="left"
/>
</div> </div>
</template> </template>
...@@ -28,20 +28,20 @@ export default { ...@@ -28,20 +28,20 @@ export default {
<div class="branch-header-title"> <div class="branch-header-title">
<icon <icon
name="branch" name="branch"
:size="12"> :size="12"
</icon> />
{{ branch.name }} {{ branch.name }}
</div> </div>
<div class="branch-header-btns"> <div class="branch-header-btns">
<new-dropdown <new-dropdown
:project-id="projectId" :project-id="projectId"
:branch="branch.name" :branch="branch.name"
path=""/> path=""
/>
</div> </div>
</div> </div>
<div> <div>
<repo-tree <repo-tree :tree-id="branch.treeId" />
:treeId="branch.treeId"/>
</div> </div>
</div> </div>
</template> </template>
...@@ -19,9 +19,10 @@ export default { ...@@ -19,9 +19,10 @@ export default {
<template> <template>
<div class="projects-sidebar"> <div class="projects-sidebar">
<div class="context-header"> <div class="context-header">
<a <a
:title="project.name" :title="project.name"
:href="project.web_url"> :href="project.web_url"
>
<div class="avatar-container s40 project-avatar"> <div class="avatar-container s40 project-avatar">
<project-avatar-image <project-avatar-image
class="avatar-container project-avatar" class="avatar-container project-avatar"
...@@ -29,7 +30,7 @@ export default { ...@@ -29,7 +30,7 @@ export default {
:img-src="project.avatar_url" :img-src="project.avatar_url"
:img-alt="project.name" :img-alt="project.name"
:img-size="40" :img-size="40"
/> />
</div> </div>
<div class="sidebar-context-title"> <div class="sidebar-context-title">
{{ project.name }} {{ project.name }}
...@@ -38,10 +39,11 @@ export default { ...@@ -38,10 +39,11 @@ export default {
</div> </div>
<div class="multi-file-commit-panel-inner-scroll"> <div class="multi-file-commit-panel-inner-scroll">
<branches-tree <branches-tree
v-for="(branch, index) in project.branches" v-for="branch in project.branches"
:key="branch.name" :key="branch.name"
:project-id="project.path_with_namespace" :project-id="project.path_with_namespace"
:branch="branch"/> :branch="branch"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -44,28 +44,31 @@ export default { ...@@ -44,28 +44,31 @@ export default {
</script> </script>
<template> <template>
<div> <div>
<div class="ide-file-list"> <div class="ide-file-list">
<table class="table"> <table class="table">
<tbody <tbody
v-if="treeId"> v-if="treeId"
<repo-previous-directory >
v-if="hasPreviousDirectory" <repo-previous-directory
/> v-if="hasPreviousDirectory"
<div />
class="multi-file-loading-container" <template v-if="showLoading">
v-if="showLoading" <div
v-for="n in 3" class="multi-file-loading-container"
:key="n"> v-for="n in 3"
<skeleton-loading-container/> :key="n"
</div> >
<repo-file <skeleton-loading-container />
v-for="file in fetchedList" </div>
:key="file.key" </template>
:file="file" <repo-file
/> v-for="file in fetchedList"
</tbody> :key="file.key"
</table> :file="file"
/>
</tbody>
</table>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { mapState, mapActions } from 'vuex'; import { mapState, mapActions } from 'vuex';
import projectTree from './ide_project_tree.vue'; import projectTree from './ide_project_tree.vue';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
import panelResizer from '../../vue_shared/components/panel_resizer.vue'; import panelResizer from '../../vue_shared/components/panel_resizer.vue';
import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue'; import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
export default { export default {
data() { components: {
return { projectTree,
width: 290, icon,
}; panelResizer,
}, skeletonLoadingContainer,
components: {
projectTree,
icon,
panelResizer,
skeletonLoadingContainer,
},
computed: {
...mapState([
'loading',
'projects',
'leftPanelCollapsed',
]),
currentIcon() {
return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
}, },
maxSize() { data() {
return window.innerWidth / 2; return {
width: 290,
};
}, },
panelStyle() { computed: {
if (!this.leftPanelCollapsed) { ...mapState([
return { width: `${this.width}px` }; 'loading',
} 'projects',
return {}; 'leftPanelCollapsed',
]),
currentIcon() {
return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
},
maxSize() {
return window.innerWidth / 2;
},
panelStyle() {
if (!this.leftPanelCollapsed) {
return { width: `${this.width}px` };
}
return {};
},
showLoading() {
return this.loading;
},
}, },
showLoading() { methods: {
return this.loading; ...mapActions([
'setPanelCollapsedStatus',
'setResizingStatus',
]),
toggleCollapsed() {
this.setPanelCollapsedStatus({
side: 'left',
collapsed: !this.leftPanelCollapsed,
});
},
resizingStarted() {
this.setResizingStatus(true);
},
resizingEnded() {
this.setResizingStatus(false);
},
}, },
}, };
methods: {
...mapActions([
'setPanelCollapsedStatus',
'setResizingStatus',
]),
toggleCollapsed() {
this.setPanelCollapsedStatus({
side: 'left',
collapsed: !this.leftPanelCollapsed,
});
},
resizingStarted() {
this.setResizingStatus(true);
},
resizingEnded() {
this.setResizingStatus(false);
},
},
};
</script> </script>
<template> <template>
<div <div
class="multi-file-commit-panel" class="multi-file-commit-panel"
:class="{ :class="{
'is-collapsed': leftPanelCollapsed, 'is-collapsed': leftPanelCollapsed,
}" }"
:style="panelStyle" :style="panelStyle"
> >
<div class="multi-file-commit-panel-inner"> <div class="multi-file-commit-panel-inner">
<div <template v-if="showLoading">
class="multi-file-loading-container" <div
v-if="showLoading" class="multi-file-loading-container"
v-for="n in 3" v-for="n in 3"
:key="n"> :key="n"
<skeleton-loading-container/> >
</div> <skeleton-loading-container />
</div>
</template>
<project-tree <project-tree
v-for="(project, index) in projects" v-for="project in projects"
:key="project.id" :key="project.id"
:project="project"/> :project="project"
/>
</div> </div>
<button <button
type="button" type="button"
...@@ -93,7 +96,9 @@ export default { ...@@ -93,7 +96,9 @@ export default {
<span <span
v-if="!leftPanelCollapsed" v-if="!leftPanelCollapsed"
class="collapse-text" class="collapse-text"
>Collapse sidebar</span> >
Collapse sidebar
</span>
</button> </button>
<panel-resizer <panel-resizer
:size.sync="width" :size.sync="width"
...@@ -103,6 +108,7 @@ export default { ...@@ -103,6 +108,7 @@ export default {
:max-size="maxSize" :max-size="maxSize"
@resize-start="resizingStarted" @resize-start="resizingStarted"
@resize-end="resizingEnded" @resize-end="resizingEnded"
side="right"/> side="right"
/>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import icon from '../../vue_shared/components/icon.vue'; import icon from '../../vue_shared/components/icon.vue';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import timeAgoMixin from '../../vue_shared/mixins/timeago'; import timeAgoMixin from '../../vue_shared/mixins/timeago';
export default { export default {
props: { components: {
file: { icon,
type: Object,
required: true,
}, },
}, directives: {
components: { tooltip,
icon, },
}, mixins: [
directives: { timeAgoMixin,
tooltip, ],
}, props: {
mixins: [ file: {
timeAgoMixin, type: Object,
], required: true,
computed: { },
...mapState([ },
'selectedFile', computed: {
]), ...mapState([
}, 'selectedFile',
}; ]),
},
};
</script> </script>
<template> <template>
<div <div class="ide-status-bar">
class="ide-status-bar">
<div> <div>
<icon <icon
name="branch" name="branch"
:size="12"> :size="12"
</icon> />
{{ selectedFile.branchId }} {{ selectedFile.branchId }}
</div> </div>
<div> <div>
<div <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
Last commit: Last commit:
<a <a
v-tooltip v-tooltip
:title="selectedFile.lastCommit.message" :title="selectedFile.lastCommit.message"
:href="selectedFile.lastCommit.url"> :href="selectedFile.lastCommit.url"
{{ timeFormated(selectedFile.lastCommit.updatedAt) }} by >
{{ timeFormated(selectedFile.lastCommit.updatedAt) }} by
{{ selectedFile.lastCommit.author }} {{ selectedFile.lastCommit.author }}
</a> </a>
</div> </div>
</div> </div>
<div <div class="text-right">
class="text-right">
{{ selectedFile.name }} {{ selectedFile.name }}
</div> </div>
<div <div class="text-right">
class="text-right">
{{ selectedFile.eol }} {{ selectedFile.eol }}
</div> </div>
<div <div class="text-right">
class="text-right">
{{ file.editorRow }}:{{ file.editorColumn }} {{ file.editorRow }}:{{ file.editorColumn }}
</div> </div>
<div <div class="text-right">
class="text-right">
{{ selectedFile.fileLanguage }} {{ selectedFile.fileLanguage }}
</div> </div>
</div> </div>
......
...@@ -21,6 +21,13 @@ ...@@ -21,6 +21,13 @@
return this.loading || this.branchName === ''; return this.loading || this.branchName === '';
}, },
}, },
created() {
// Dropdown is outside of Vue instance & is controlled by Bootstrap
this.$dropdown = $('.git-revision-dropdown');
// text element is outside Vue app
this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
},
methods: { methods: {
...mapActions([ ...mapActions([
'createNewBranch', 'createNewBranch',
...@@ -55,13 +62,6 @@ ...@@ -55,13 +62,6 @@
})); }));
}, },
}, },
created() {
// Dropdown is outside of Vue instance & is controlled by Bootstrap
this.$dropdown = $('.git-revision-dropdown');
// text element is outside Vue app
this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text');
},
}; };
</script> </script>
......
...@@ -4,6 +4,11 @@ ...@@ -4,6 +4,11 @@
import icon from '../../../vue_shared/components/icon.vue'; import icon from '../../../vue_shared/components/icon.vue';
export default { export default {
components: {
icon,
newModal,
upload,
},
props: { props: {
branch: { branch: {
type: String, type: String,
...@@ -18,11 +23,6 @@ ...@@ -18,11 +23,6 @@
default: null, default: null,
}, },
}, },
components: {
icon,
newModal,
upload,
},
data() { data() {
return { return {
openModal: false, openModal: false,
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
import modal from '../../../vue_shared/components/modal.vue'; import modal from '../../../vue_shared/components/modal.vue';
export default { export default {
components: {
modal,
},
props: { props: {
branchId: { branchId: {
type: String, type: String,
...@@ -27,28 +30,6 @@ ...@@ -27,28 +30,6 @@
entryName: this.path !== '' ? `${this.path}/` : '', entryName: this.path !== '' ? `${this.path}/` : '',
}; };
}, },
components: {
modal,
},
methods: {
...mapActions([
'createTempEntry',
]),
createEntryInStore() {
this.createTempEntry({
projectId: this.currentProjectId,
branchId: this.branchId,
parent: this.parent,
name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
type: this.type,
});
this.hideModal();
},
hideModal() {
this.$emit('hide');
},
},
computed: { computed: {
...mapState([ ...mapState([
'currentProjectId', 'currentProjectId',
...@@ -78,6 +59,25 @@ ...@@ -78,6 +59,25 @@
mounted() { mounted() {
this.$refs.fieldName.focus(); this.$refs.fieldName.focus();
}, },
methods: {
...mapActions([
'createTempEntry',
]),
createEntryInStore() {
this.createTempEntry({
projectId: this.currentProjectId,
branchId: this.branchId,
parent: this.parent,
name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
type: this.type,
});
this.hideModal();
},
hideModal() {
this.$emit('hide');
},
},
}; };
</script> </script>
......
...@@ -18,6 +18,12 @@ ...@@ -18,6 +18,12 @@
'currentProjectId', 'currentProjectId',
]), ]),
}, },
mounted() {
this.$refs.fileUpload.addEventListener('change', this.openFile);
},
beforeDestroy() {
this.$refs.fileUpload.removeEventListener('change', this.openFile);
},
methods: { methods: {
...mapActions([ ...mapActions([
'createTempEntry', 'createTempEntry',
...@@ -59,12 +65,6 @@ ...@@ -59,12 +65,6 @@
this.$refs.fileUpload.click(); this.$refs.fileUpload.click();
}, },
}, },
mounted() {
this.$refs.fileUpload.addEventListener('change', this.openFile);
},
beforeDestroy() {
this.$refs.fileUpload.removeEventListener('change', this.openFile);
},
}; };
</script> </script>
......
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
aria-hidden="true"> aria-hidden="true">
</i> </i>
<span> <span>
{{buttonLabel}} {{ buttonLabel }}
</span> </span>
</button> </button>
<modal <modal
......
...@@ -6,6 +6,38 @@ import monacoLoader from '../monaco_loader'; ...@@ -6,6 +6,38 @@ import monacoLoader from '../monaco_loader';
import Editor from '../lib/editor'; import Editor from '../lib/editor';
export default { 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();
}
},
},
beforeDestroy() { beforeDestroy() {
this.editor.dispose(); this.editor.dispose();
}, },
...@@ -78,38 +110,6 @@ export default { ...@@ -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> </script>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment