diff options
Diffstat (limited to 'app/assets/javascripts/environments/components')
4 files changed, 98 insertions, 55 deletions
diff --git a/app/assets/javascripts/environments/components/enable_review_app_button.vue b/app/assets/javascripts/environments/components/enable_review_app_button.vue index 8fbbc5189bf..554875b7ce3 100644 --- a/app/assets/javascripts/environments/components/enable_review_app_button.vue +++ b/app/assets/javascripts/environments/components/enable_review_app_button.vue @@ -49,7 +49,7 @@ export default { variant="info" category="secondary" type="button" - class="js-enable-review-app-button" + class="gl-w-full js-enable-review-app-button" > {{ s__('Environments|Enable review app') }} </gl-button> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index f0e74d96f09..18f69855349 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -1,5 +1,5 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlBadge, GlButton, GlTab, GlTabs } from '@gitlab/ui'; import { deprecatedCreateFlash as Flash } from '~/flash'; import { s__ } from '~/locale'; import emptyState from './empty_state.vue'; @@ -16,7 +16,10 @@ export default { ConfirmRollbackModal, emptyState, EnableReviewAppButton, - GlDeprecatedButton, + GlBadge, + GlButton, + GlTab, + GlTabs, StopEnvironmentModal, DeleteEnvironmentModal, }, @@ -124,43 +127,87 @@ export default { }; </script> <template> - <div> + <div class="environments-section"> <stop-environment-modal :environment="environmentInStopModal" /> <delete-environment-modal :environment="environmentInDeleteModal" /> <confirm-rollback-modal :environment="environmentInRollbackModal" /> - <div class="top-area"> - <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" /> - - <div class="nav-controls"> - <enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" /> - <gl-deprecated-button + <div class="gl-w-full"> + <div + class=" + gl-display-flex + gl-flex-direction-column + gl-mt-3 + gl-display-md-none!" + > + <enable-review-app-button + v-if="state.reviewAppDetails.can_setup_review_app" + class="gl-mb-3 gl-flex-fill-1" + /> + <gl-button v-if="canCreateEnvironment && !isLoading" :href="newEnvironmentPath" category="primary" variant="success" > {{ s__('Environments|New environment') }} - </gl-deprecated-button> + </gl-button> </div> + <gl-tabs content-class="gl-display-none"> + <gl-tab + v-for="(tab, idx) in tabs" + :key="idx" + :title-item-class="`js-environments-tab-${tab.scope}`" + @click="onChangeTab(tab.scope)" + > + <template #title> + <span>{{ tab.name }}</span> + <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge> + </template> + </gl-tab> + <template #tabs-end> + <div + class=" + gl-display-none + gl-display-md-flex + gl-lg-align-items-center + gl-lg-flex-direction-row + gl-lg-flex-fill-1 + gl-lg-justify-content-end + gl-lg-mt-0" + > + <enable-review-app-button + v-if="state.reviewAppDetails.can_setup_review_app" + class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0" + /> + <gl-button + v-if="canCreateEnvironment && !isLoading" + :href="newEnvironmentPath" + category="primary" + variant="success" + > + {{ s__('Environments|New environment') }} + </gl-button> + </div> + </template> + </gl-tabs> + <container + :is-loading="isLoading" + :environments="state.environments" + :pagination="state.paginationInformation" + :can-read-environment="canReadEnvironment" + :canary-deployment-feature-id="canaryDeploymentFeatureId" + :show-canary-deployment-callout="showCanaryDeploymentCallout" + :user-callouts-path="userCalloutsPath" + :lock-promotion-svg-path="lockPromotionSvgPath" + :help-canary-deployments-path="helpCanaryDeploymentsPath" + :deploy-boards-help-path="deployBoardsHelpPath" + @onChangePage="onChangePage" + > + <template v-if="!isLoading && state.environments.length === 0" #emptyState> + <empty-state :help-path="helpPagePath" /> + </template> + </container> </div> - - <container - :is-loading="isLoading" - :environments="state.environments" - :pagination="state.paginationInformation" - :can-read-environment="canReadEnvironment" - :canary-deployment-feature-id="canaryDeploymentFeatureId" - :show-canary-deployment-callout="showCanaryDeploymentCallout" - :user-callouts-path="userCalloutsPath" - :lock-promotion-svg-path="lockPromotionSvgPath" - :help-canary-deployments-path="helpCanaryDeploymentsPath" - :deploy-boards-help-path="deployBoardsHelpPath" - @onChangePage="onChangePage" - > - <template v-if="!isLoading && state.environments.length === 0" #emptyState> - <empty-state :help-path="helpPagePath" /> - </template> - </container> </div> </template> diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue index c06ab265915..c1b3eabec16 100644 --- a/app/assets/javascripts/environments/components/environments_table.vue +++ b/app/assets/javascripts/environments/components/environments_table.vue @@ -184,7 +184,6 @@ export default { :deploy-boards-help-path="deployBoardsHelpPath" :is-loading="model.isLoadingDeployBoard" :is-empty="model.isEmptyDeployBoard" - :has-legacy-app-label="model.hasLegacyAppLabel" :logs-path="model.logs_path" /> </div> diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue index 88612376b6e..892d0b96da1 100644 --- a/app/assets/javascripts/environments/components/stop_environment_modal.vue +++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue @@ -1,8 +1,7 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings, vue/no-v-html */ -import { GlTooltipDirective } from '@gitlab/ui'; +/* eslint-disable @gitlab/vue-require-i18n-strings */ +import { GlSprintf, GlTooltipDirective } from '@gitlab/ui'; import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; -import { s__, sprintf } from '~/locale'; import eventHub from '../event_hub'; export default { @@ -11,6 +10,7 @@ export default { components: { GlModal: DeprecatedModal2, + GlSprintf, }, directives: { @@ -24,27 +24,6 @@ export default { }, }, - computed: { - noStopActionMessage() { - return sprintf( - s__( - `Environments|Note that this action will stop the environment, - but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment - due to no “stop environment action” being defined - in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`, - ), - { - emphasisStart: '<strong>', - emphasisEnd: '</strong>', - ciConfigLinkStart: - '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">', - ciConfigLinkEnd: '</a>', - }, - false, - ); - }, - }, - methods: { onSubmit() { eventHub.$emit('stopEnvironment', this.environment); @@ -72,7 +51,25 @@ export default { <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p> <div v-if="!environment.has_stop_action" class="warning_message"> - <p v-html="noStopActionMessage"></p> + <p> + <gl-sprintf + :message=" + s__(`Environments|Note that this action will stop the environment, + but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment + due to no “stop environment action” being defined + in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`) + " + > + <template #emphasis="{ content }"> + <strong>{{ content }}</strong> + </template> + <template #ciConfigLink="{ content }"> + <a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer"> + {{ content }}</a + > + </template> + </gl-sprintf> + </p> <a href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment" target="_blank" |