diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
3 files changed, 25 insertions, 6 deletions
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index 846b4d92724..92dacf8c94a 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui'; import { mapActions, mapState } from 'vuex'; import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { leftSidebarViews } from '../constants'; @@ -7,6 +7,7 @@ import { leftSidebarViews } from '../constants'; export default { components: { GlIcon, + GlBadge, }, directives: { GlTooltip: GlTooltipDirective, @@ -82,9 +83,13 @@ export default { @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)" > <gl-icon name="commit" /> - <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill"> + <gl-badge + v-if="stagedFiles.length" + class="gl-absolute gl-px-2 gl-top-3 gl-right-3 gl-font-weight-bold gl-bg-gray-900! gl-text-white!" + size="sm" + > {{ stagedFiles.length }} - </div> + </gl-badge> </button> </li> </ul> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index 9ec4a07a3d0..44f543d9a76 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -187,7 +187,7 @@ export default { class="qa-commit-button" category="primary" variant="confirm" - @click="commit" + type="submit" > {{ __('Commit') }} </gl-button> diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue index 13f2e775fc3..b1f6f2c87b9 100644 --- a/app/assets/javascripts/ide/components/preview/clientside.vue +++ b/app/assets/javascripts/ide/components/preview/clientside.vue @@ -4,7 +4,12 @@ import { listen } from 'codesandbox-api'; import { isEmpty, debounce } from 'lodash'; import { Manager } from 'smooshpack'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { packageJsonPath, LIVE_PREVIEW_DEBOUNCE } from '../../constants'; +import { + packageJsonPath, + LIVE_PREVIEW_DEBOUNCE, + PING_USAGE_PREVIEW_KEY, + PING_USAGE_PREVIEW_SUCCESS_KEY, +} from '../../constants'; import eventHub from '../../eventhub'; import { createPathWithExt } from '../../utils'; import Navigator from './navigator.vue'; @@ -62,6 +67,15 @@ export default { }; }, }, + watch: { + sandpackReady: { + handler(val) { + if (val) { + this.pingUsage(PING_USAGE_PREVIEW_SUCCESS_KEY); + } + }, + }, + }, mounted() { this.onFilesChangeCallback = debounce(() => this.update(), LIVE_PREVIEW_DEBOUNCE); eventHub.$on('ide.files.change', this.onFilesChangeCallback); @@ -101,7 +115,7 @@ export default { initPreview() { if (!this.mainEntry) return null; - this.pingUsage(); + this.pingUsage(PING_USAGE_PREVIEW_KEY); return this.loadFileContent(this.mainEntry) .then(() => this.$nextTick()) |