Commit 5033a9b8 authored by Andrew Fontaine's avatar Andrew Fontaine

Show badge indicating the latest deployment

This badge indicates which deployment is the latest one currently
running in an environment.
parent 3afe9b56
<script> <script>
import { GlBadge } from '@gitlab/ui';
import { s__ } from '~/locale';
import DeploymentStatusBadge from './deployment_status_badge.vue'; import DeploymentStatusBadge from './deployment_status_badge.vue';
export default { export default {
components: { components: {
DeploymentStatusBadge, DeploymentStatusBadge,
GlBadge,
}, },
props: { props: {
deployment: { deployment: {
type: Object, type: Object,
required: true, required: true,
}, },
latest: {
type: Boolean,
default: false,
required: false,
},
}, },
computed: { computed: {
status() { status() {
return this.deployment?.status; return this.deployment?.status;
}, },
}, },
i18n: {
latestBadge: s__('Deployment|Latest Deployed'),
},
}; };
</script> </script>
<template> <template>
<div> <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
<deployment-status-badge v-if="status" :status="status" /> <deployment-status-badge v-if="status" :status="status" />
<gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
</div> </div>
</template> </template>
...@@ -144,7 +144,7 @@ export default { ...@@ -144,7 +144,7 @@ export default {
'gl-border-t-solid', 'gl-border-t-solid',
'gl-border-1', 'gl-border-1',
'gl-py-5', 'gl-py-5',
'gl-pl-7', 'gl-md-pl-7',
'gl-bg-gray-10', 'gl-bg-gray-10',
], ],
}; };
...@@ -255,10 +255,19 @@ export default { ...@@ -255,10 +255,19 @@ export default {
</div> </div>
<gl-collapse :visible="visible"> <gl-collapse :visible="visible">
<div v-if="lastDeployment" :class="$options.deploymentClasses"> <div v-if="lastDeployment" :class="$options.deploymentClasses">
<deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" /> <deployment
:deployment="lastDeployment"
:class="{ 'gl-ml-7': inFolder }"
latest
class="gl-pl-4"
/>
</div> </div>
<div v-if="upcomingDeployment" :class="$options.deploymentClasses"> <div v-if="upcomingDeployment" :class="$options.deploymentClasses">
<deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" /> <deployment
:deployment="upcomingDeployment"
:class="{ 'gl-ml-7': inFolder }"
class="gl-pl-4"
/>
</div> </div>
</gl-collapse> </gl-collapse>
</div> </div>
......
...@@ -11997,6 +11997,9 @@ msgstr "" ...@@ -11997,6 +11997,9 @@ msgstr ""
msgid "Deployment|Failed" msgid "Deployment|Failed"
msgstr "" msgstr ""
msgid "Deployment|Latest Deployed"
msgstr ""
msgid "Deployment|Running" msgid "Deployment|Running"
msgstr "" msgstr ""
......
import { mountExtended } from 'helpers/vue_test_utils_helper'; import { mountExtended } from 'helpers/vue_test_utils_helper';
import { s__ } from '~/locale';
import Deployment from '~/environments/components/deployment.vue'; import Deployment from '~/environments/components/deployment.vue';
import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue'; import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
import { resolvedEnvironment } from './graphql/mock_data'; import { resolvedEnvironment } from './graphql/mock_data';
...@@ -26,4 +27,22 @@ describe('~/environments/components/deployment.vue', () => { ...@@ -26,4 +27,22 @@ describe('~/environments/components/deployment.vue', () => {
); );
}); });
}); });
describe('latest', () => {
it('should show a badge if the deployment is latest', () => {
wrapper = createWrapper({ propsData: { latest: true } });
const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
expect(badge.exists()).toBe(true);
});
it('should not show a badge if the deployment is not latest', () => {
wrapper = createWrapper();
const badge = wrapper.findByText(s__('Deployment|Latest Deployed'));
expect(badge.exists()).toBe(false);
});
});
}); });
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