diff options
Diffstat (limited to 'app/assets/javascripts/environments')
11 files changed, 266 insertions, 193 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 deleted file mode 100644 index 8fbbc5189bf..00000000000 --- a/app/assets/javascripts/environments/components/enable_review_app_button.vue +++ /dev/null @@ -1,109 +0,0 @@ -<script> -import { GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui'; -import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; -import { s__ } from '~/locale'; - -export default { - components: { - GlButton, - GlLink, - GlModal, - GlSprintf, - ModalCopyButton, - }, - directives: { - 'gl-modal': GlModalDirective, - }, - instructionText: { - step1: s__( - 'EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}.', - ), - step2: s__('EnableReviewApp|%{stepStart}Step 2%{stepEnd}. Copy the following snippet:'), - step3: s__( - `EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file.`, - ), - }, - modalInfo: { - closeText: s__('EnableReviewApp|Close'), - copyToClipboardText: s__('EnableReviewApp|Copy snippet text'), - copyString: `deploy_review: - stage: deploy - script: - - echo "Deploy a review app" - environment: - name: review/$CI_COMMIT_REF_NAME - url: https://$CI_ENVIRONMENT_SLUG.example.com - only: - - branches - except: - - master`, - id: 'enable-review-app-info', - title: s__('ReviewApp|Enable Review App'), - }, -}; -</script> -<template> - <div> - <gl-button - v-gl-modal="$options.modalInfo.id" - variant="info" - category="secondary" - type="button" - class="js-enable-review-app-button" - > - {{ s__('Environments|Enable review app') }} - </gl-button> - <gl-modal - :modal-id="$options.modalInfo.id" - :title="$options.modalInfo.title" - size="lg" - class="text-2 ws-normal" - ok-only - ok-variant="light" - :ok-title="$options.modalInfo.closeText" - > - <p> - <gl-sprintf :message="$options.instructionText.step1"> - <template #step="{ content }"> - <strong>{{ content }}</strong> - </template> - <template #link="{ content }"> - <gl-link - href="https://docs.gitlab.com/ee/user/project/clusters/add_remove_clusters.html" - target="_blank" - >{{ content }}</gl-link - > - </template> - </gl-sprintf> - </p> - <div> - <p> - <gl-sprintf :message="$options.instructionText.step2"> - <template #step="{ content }"> - <strong>{{ content }}</strong> - </template> - </gl-sprintf> - </p> - <div class="flex align-items-start"> - <pre class="w-100"> {{ $options.modalInfo.copyString }} </pre> - <modal-copy-button - :title="$options.modalInfo.copyToClipboardText" - :text="$options.modalInfo.copyString" - :modal-id="$options.modalInfo.id" - css-classes="border-0" - /> - </div> - </div> - <p> - <gl-sprintf :message="$options.instructionText.step3"> - <template #step="{ content }"> - <strong>{{ content }}</strong> - </template> - <template #link="{ content }"> - <gl-link href="blob/master/.gitlab-ci.yml" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </p> - </gl-modal> - </div> -</template> diff --git a/app/assets/javascripts/environments/components/enable_review_app_modal.vue b/app/assets/javascripts/environments/components/enable_review_app_modal.vue new file mode 100644 index 00000000000..3dd1d5a1bcc --- /dev/null +++ b/app/assets/javascripts/environments/components/enable_review_app_modal.vue @@ -0,0 +1,98 @@ +<script> +import { GlLink, GlModal, GlSprintf } from '@gitlab/ui'; +import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; +import { s__ } from '~/locale'; + +export default { + components: { + GlLink, + GlModal, + GlSprintf, + ModalCopyButton, + }, + props: { + modalId: { + type: String, + required: true, + }, + }, + instructionText: { + step1: s__( + 'EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}.', + ), + step2: s__('EnableReviewApp|%{stepStart}Step 2%{stepEnd}. Copy the following snippet:'), + step3: s__( + `EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file.`, + ), + }, + modalInfo: { + closeText: s__('EnableReviewApp|Close'), + copyToClipboardText: s__('EnableReviewApp|Copy snippet text'), + copyString: `deploy_review: + stage: deploy + script: + - echo "Deploy a review app" + environment: + name: review/$CI_COMMIT_REF_NAME + url: https://$CI_ENVIRONMENT_SLUG.example.com + only: + - branches + except: + - master`, + title: s__('ReviewApp|Enable Review App'), + }, +}; +</script> +<template> + <gl-modal + :modal-id="modalId" + :title="$options.modalInfo.title" + size="lg" + ok-only + ok-variant="light" + :ok-title="$options.modalInfo.closeText" + > + <p> + <gl-sprintf :message="$options.instructionText.step1"> + <template #step="{ content }"> + <strong>{{ content }}</strong> + </template> + <template #link="{ content }"> + <gl-link + href="https://docs.gitlab.com/ee/user/project/clusters/add_remove_clusters.html" + target="_blank" + >{{ content }}</gl-link + > + </template> + </gl-sprintf> + </p> + <div> + <p> + <gl-sprintf :message="$options.instructionText.step2"> + <template #step="{ content }"> + <strong>{{ content }}</strong> + </template> + </gl-sprintf> + </p> + <div class="gl-display-flex align-items-start"> + <pre class="gl-w-full"> {{ $options.modalInfo.copyString }} </pre> + <modal-copy-button + :title="$options.modalInfo.copyToClipboardText" + :text="$options.modalInfo.copyString" + :modal-id="modalId" + css-classes="border-0" + /> + </div> + </div> + <p> + <gl-sprintf :message="$options.instructionText.step3"> + <template #step="{ content }"> + <strong>{{ content }}</strong> + </template> + <template #link="{ content }"> + <gl-link href="blob/master/.gitlab-ci.yml" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </gl-modal> +</template> diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index 035b276bc3b..bc35a07fe4a 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -1,13 +1,12 @@ <script> -import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; import { formatTime } from '~/lib/utils/datetime_utility'; import eventHub from '../event_hub'; -import tooltip from '../../vue_shared/directives/tooltip'; export default { directives: { - tooltip, + GlTooltip: GlTooltipDirective, }, components: { GlButton, @@ -70,13 +69,14 @@ export default { <template> <div class="btn-group" role="group"> <gl-button - v-tooltip + v-gl-tooltip :title="title" :aria-label="title" :disabled="isLoading" class="dropdown dropdown-new js-environment-actions-dropdown" data-container="body" data-toggle="dropdown" + data-testid="environment-actions-button" > <span> <gl-icon name="play" /> diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue index 55aaa6d57bd..039b40a3596 100644 --- a/app/assets/javascripts/environments/components/environment_delete.vue +++ b/app/assets/javascripts/environments/components/environment_delete.vue @@ -4,7 +4,6 @@ * Used in the environments table and the environment detail view. */ -import $ from 'jquery'; import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; @@ -42,7 +41,7 @@ export default { }, methods: { onClick() { - $(this.$el).tooltip('dispose'); + this.$root.$emit('bv::hide::tooltip', this.$options.deleteEnvironmentTooltipId); eventHub.$emit('requestDeleteEnvironment', this.environment); }, onDeleteEnvironment(environment) { @@ -51,15 +50,16 @@ export default { } }, }, + deleteEnvironmentTooltipId: 'delete-environment-button-tooltip', }; </script> <template> <loading-button - v-gl-tooltip + v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }" :loading="isLoading" :title="title" :aria-label="title" - container-class="btn btn-danger d-none d-sm-none d-md-block" + container-class="btn btn-danger d-none d-md-block" data-toggle="modal" data-target="#delete-environment-modal" @click="onClick" diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index 8850ed19a4b..48e81b168ec 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -570,7 +570,7 @@ export default { </div> <div - class="table-section deployment-column d-none d-sm-none d-md-block" + class="table-section deployment-column d-none d-md-block" :class="tableData.deploy.spacing" role="gridcell" > @@ -594,11 +594,7 @@ export default { </div> </div> - <div - class="table-section d-none d-sm-none d-md-block" - :class="tableData.build.spacing" - role="gridcell" - > + <div class="table-section d-none d-md-block" :class="tableData.build.spacing" role="gridcell"> <a v-if="shouldRenderBuildName" :href="buildPath" class="build-link cgray"> <tooltip-on-truncate :title="buildName" diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue index c63d54d586d..ff74f81c98e 100644 --- a/app/assets/javascripts/environments/components/environment_stop.vue +++ b/app/assets/javascripts/environments/components/environment_stop.vue @@ -4,7 +4,6 @@ * Used in environments table. */ -import $ from 'jquery'; import { GlTooltipDirective, GlButton } from '@gitlab/ui'; import { s__ } from '~/locale'; import eventHub from '../event_hub'; @@ -40,7 +39,7 @@ export default { }, methods: { onClick() { - $(this.$el).tooltip('dispose'); + this.$root.$emit('bv::hide::tooltip', this.$options.stopEnvironmentTooltipId); eventHub.$emit('requestStopEnvironment', this.environment); }, onStopEnvironment(environment) { @@ -49,11 +48,12 @@ export default { } }, }, + stopEnvironmentTooltipId: 'stop-environment-button-tooltip', }; </script> <template> <gl-button - v-gl-tooltip + v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }" :loading="isLoading" :title="title" :aria-label="title" diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue index b5a7be90204..4750b8ef01b 100644 --- a/app/assets/javascripts/environments/components/environment_terminal_button.vue +++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue @@ -39,7 +39,7 @@ export default { :aria-label="title" :href="terminalPath" :class="{ disabled: disabled }" - class="btn terminal-button d-none d-sm-none d-md-block text-secondary" + class="btn terminal-button d-none d-md-block text-secondary" > <gl-icon name="terminal" /> </a> diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue index f0e74d96f09..9bafc7ed153 100644 --- a/app/assets/javascripts/environments/components/environments_app.vue +++ b/app/assets/javascripts/environments/components/environments_app.vue @@ -1,28 +1,39 @@ <script> -import { GlDeprecatedButton } from '@gitlab/ui'; +import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui'; import { deprecatedCreateFlash as Flash } from '~/flash'; import { s__ } from '~/locale'; import emptyState from './empty_state.vue'; import eventHub from '../event_hub'; import environmentsMixin from '../mixins/environments_mixin'; import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin'; -import EnableReviewAppButton from './enable_review_app_button.vue'; +import EnableReviewAppModal from './enable_review_app_modal.vue'; import StopEnvironmentModal from './stop_environment_modal.vue'; import DeleteEnvironmentModal from './delete_environment_modal.vue'; import ConfirmRollbackModal from './confirm_rollback_modal.vue'; export default { + i18n: { + newEnvironmentButtonLabel: s__('Environments|New environment'), + reviewAppButtonLabel: s__('Environments|Enable review app'), + }, + modal: { + id: 'enable-review-app-info', + }, components: { ConfirmRollbackModal, emptyState, - EnableReviewAppButton, - GlDeprecatedButton, + EnableReviewAppModal, + GlBadge, + GlButton, + GlTab, + GlTabs, StopEnvironmentModal, DeleteEnvironmentModal, }, - + directives: { + 'gl-modal': GlModalDirective, + }, mixins: [CIPaginationMixin, environmentsMixin], - props: { endpoint: { type: String, @@ -124,43 +135,108 @@ 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 - v-if="canCreateEnvironment && !isLoading" + <div class="gl-w-full"> + <div + class=" + gl-display-flex + gl-flex-direction-column + gl-mt-3 + gl-display-md-none!" + > + <gl-button + v-if="state.reviewAppDetails.can_setup_review_app" + v-gl-modal="$options.modal.id" + data-testid="enable-review-app" + variant="info" + category="secondary" + type="button" + class="gl-mb-3 gl-flex-fill-1" + > + {{ $options.i18n.reviewAppButtonLabel }} + </gl-button> + <gl-button + v-if="canCreateEnvironment" :href="newEnvironmentPath" + data-testid="new-environment" category="primary" variant="success" > - {{ s__('Environments|New environment') }} - </gl-deprecated-button> + {{ $options.i18n.newEnvironmentButtonLabel }} + </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" + > + <gl-button + v-if="state.reviewAppDetails.can_setup_review_app" + v-gl-modal="$options.modal.id" + data-testid="enable-review-app" + variant="info" + category="secondary" + type="button" + class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0" + > + {{ $options.i18n.reviewAppButtonLabel }} + </gl-button> + <gl-button + v-if="canCreateEnvironment" + :href="newEnvironmentPath" + data-testid="new-environment" + category="primary" + variant="success" + > + {{ $options.i18n.newEnvironmentButtonLabel }} + </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> + <enable-review-app-modal + v-if="state.reviewAppDetails.can_setup_review_app" + :modal-id="$options.modal.id" + data-testid="enable-review-app-modal" + /> </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..f0dafe0620e 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,9 +51,27 @@ 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" + href="https://docs.gitlab.com/ee/ci/environments/#stopping-an-environment" target="_blank" rel="noopener noreferrer" >{{ s__('Environments|Learn more about stopping environments') }}</a diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue index 16d25615779..25f5483c58b 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_view.vue +++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue @@ -1,4 +1,5 @@ <script> +import { GlBadge, GlTab, GlTabs } from '@gitlab/ui'; import environmentsMixin from '../mixins/environments_mixin'; import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin'; import StopEnvironmentModal from '../components/stop_environment_modal.vue'; @@ -6,8 +7,11 @@ import DeleteEnvironmentModal from '../components/delete_environment_modal.vue'; export default { components: { - StopEnvironmentModal, DeleteEnvironmentModal, + GlBadge, + GlTab, + GlTabs, + StopEnvironmentModal, }, mixins: [environmentsMixin, CIPaginationMixin], @@ -68,14 +72,26 @@ export default { <stop-environment-modal :environment="environmentInStopModal" /> <delete-environment-modal :environment="environmentInDeleteModal" /> - <h4 class="js-folder-name environments-folder-name"> + <h4 class="gl-font-weight-normal" data-testid="folder-name"> {{ s__('Environments|Environments') }} / <b>{{ folderName }}</b> </h4> - <div class="top-area"> - <tabs v-if="!isLoading" :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" /> - </div> + <gl-tabs v-if="!isLoading" scope="environments" content-class="gl-display-none"> + <gl-tab + v-for="(tab, i) in tabs" + :key="`${tab.name}-${i}`" + :active="tab.isActive" + :title-item-class="tab.isActive ? 'gl-outline-none' : ''" + :title-link-attributes="{ 'data-testid': `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> + </gl-tabs> <container :is-loading="isLoading" |