1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<script>
import { s__ } from '~/locale';
const CONFIGURATION_KEY = 'configuration';
const DEPLOYMENTS_KEY = 'deployments';
const DATABASES_KEY = 'databases';
const i18n = {
configuration: { title: s__('CloudSeed|Configuration') },
deployments: { title: s__('CloudSeed|Deployments') },
databases: { title: s__('CloudSeed|Databases') },
};
export default {
props: {
active: {
type: String,
required: true,
},
configurationUrl: {
type: String,
required: true,
},
deploymentsUrl: {
type: String,
required: true,
},
databasesUrl: {
type: String,
required: true,
},
},
computed: {
isConfigurationActive() {
return this.active === CONFIGURATION_KEY;
},
isDeploymentsActive() {
return this.active === DEPLOYMENTS_KEY;
},
isDatabasesActive() {
return this.active === DATABASES_KEY;
},
},
i18n,
};
</script>
<template>
<div class="tabs gl-tabs">
<ul role="tablist" class="nav gl-tabs-nav">
<li role="presentation" class="nav-item">
<a
data-testid="configurationLink"
role="tab"
:href="configurationUrl"
class="nav-link gl-tab-nav-item"
:class="{ 'gl-tab-nav-item-active': isConfigurationActive }"
>
{{ $options.i18n.configuration.title }}</a
>
</li>
<li role="presentation" class="nav-item">
<a
data-testid="deploymentsLink"
role="tab"
:href="deploymentsUrl"
class="nav-link gl-tab-nav-item"
:class="{ 'gl-tab-nav-item-active': isDeploymentsActive }"
>
{{ $options.i18n.deployments.title }}
</a>
</li>
<li role="presentation" class="nav-item">
<a
data-testid="databasesLink"
role="tab"
:href="databasesUrl"
class="nav-link gl-tab-nav-item"
:class="{ 'gl-tab-nav-item-active': isDatabasesActive }"
>
{{ $options.i18n.databases.title }}
</a>
</li>
</ul>
</div>
</template>
|
