diff options
Diffstat (limited to 'app/assets/javascripts/environments/components')
4 files changed, 119 insertions, 6 deletions
diff --git a/app/assets/javascripts/environments/components/delete_environment_modal.vue b/app/assets/javascripts/environments/components/delete_environment_modal.vue index 2eb2be351b3..26ec882472b 100644 --- a/app/assets/javascripts/environments/components/delete_environment_modal.vue +++ b/app/assets/javascripts/environments/components/delete_environment_modal.vue @@ -1,6 +1,6 @@ <script> import { GlTooltipDirective, GlModal } from '@gitlab/ui'; -import { s__, sprintf } from '~/locale'; +import { __, s__, sprintf } from '~/locale'; import eventHub from '../event_hub'; export default { @@ -27,7 +27,7 @@ export default { }, cancelProps() { return { - text: s__('Cancel'), + text: __('Cancel'), }; }, confirmDeleteMessage() { diff --git a/app/assets/javascripts/environments/components/new_environment_folder.vue b/app/assets/javascripts/environments/components/new_environment_folder.vue new file mode 100644 index 00000000000..0615bdef537 --- /dev/null +++ b/app/assets/javascripts/environments/components/new_environment_folder.vue @@ -0,0 +1,69 @@ +<script> +import { GlCollapse, GlIcon, GlBadge, GlLink } from '@gitlab/ui'; +import folderQuery from '../graphql/queries/folder.query.graphql'; + +export default { + components: { + GlCollapse, + GlIcon, + GlBadge, + GlLink, + }, + props: { + nestedEnvironment: { + type: Object, + required: true, + }, + }, + data() { + return { visible: false }; + }, + apollo: { + folder: { + query: folderQuery, + variables() { + return { environment: this.nestedEnvironment.latest }; + }, + }, + }, + computed: { + icons() { + return this.visible + ? { caret: 'angle-down', folder: 'folder-open' } + : { caret: 'angle-right', folder: 'folder-o' }; + }, + count() { + return this.folder?.availableCount ?? 0; + }, + folderClass() { + return { 'gl-font-weight-bold': this.visible }; + }, + folderPath() { + return this.nestedEnvironment.latest.folderPath; + }, + }, + methods: { + toggleCollapse() { + this.visible = !this.visible; + }, + }, +}; +</script> +<template> + <div class="gl-border-b-solid gl-border-gray-100 gl-border-1 gl-px-3 gl-pt-3 gl-pb-5"> + <div class="gl-w-full gl-display-flex gl-align-items-center" @click="toggleCollapse"> + <gl-icon + class="gl-mr-2 gl-fill-current-color gl-text-gray-500" + :name="icons.caret" + :size="12" + /> + <gl-icon class="gl-mr-2 gl-fill-current-color gl-text-gray-500" :name="icons.folder" /> + <div class="gl-mr-2 gl-text-gray-500" :class="folderClass"> + {{ nestedEnvironment.name }} + </div> + <gl-badge size="sm" class="gl-mr-auto">{{ count }}</gl-badge> + <gl-link v-if="visible" :href="folderPath">{{ s__('Environments|Show all') }}</gl-link> + </div> + <gl-collapse :visible="visible" /> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue new file mode 100644 index 00000000000..a5526f9cd71 --- /dev/null +++ b/app/assets/javascripts/environments/components/new_environments_app.vue @@ -0,0 +1,47 @@ +<script> +import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; +import environmentAppQuery from '../graphql/queries/environmentApp.query.graphql'; +import EnvironmentFolder from './new_environment_folder.vue'; + +export default { + components: { + EnvironmentFolder, + GlBadge, + GlTab, + GlTabs, + }, + apollo: { + environmentApp: { + query: environmentAppQuery, + }, + }, + computed: { + folders() { + return this.environmentApp?.environments.filter((e) => e.size > 1) ?? []; + }, + availableCount() { + return this.environmentApp?.availableCount; + }, + }, +}; +</script> +<template> + <div> + <gl-tabs> + <gl-tab> + <template #title> + <span>{{ __('Available') }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge"> + {{ availableCount }} + </gl-badge> + </template> + <environment-folder + v-for="folder in folders" + :key="folder.name" + class="gl-mb-3" + :nested-environment="folder" + /> + </gl-tab> + </gl-tabs> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/rollback_modal_manager.vue b/app/assets/javascripts/environments/components/rollback_modal_manager.vue index 6aa7d96fdfd..3a8b9ebcb84 100644 --- a/app/assets/javascripts/environments/components/rollback_modal_manager.vue +++ b/app/assets/javascripts/environments/components/rollback_modal_manager.vue @@ -15,7 +15,6 @@ export default { data() { return { environment: null, - retryPath: '', visible: false, }; }, @@ -35,9 +34,9 @@ export default { name: environmentName, commitShortSha, commitUrl, + retryUrl: retryPath, isLastDeployment: parseBoolean(isLastDeployment), }; - this.retryPath = retryPath; this.visible = true; }); }); @@ -51,7 +50,5 @@ export default { v-model="visible" :environment="environment" :has-multiple-commits="false" - :retry-url="retryPath" /> - <div v-else></div> </template> |