Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x | <template>
<div
v-if="isVisible"
class="env-selector margin-bottom-s padding-left-xs padding-right-xs"
>
<label class="form-label">
Environment
<span class="required">*</span>
</label>
<div class="env-buttons">
<Button
v-for="env in availableEnvs"
:key="env.key"
:variant="selectedEnv === env.key ? 'primary' : 'secondary'"
class="env-button"
@click="$emit('change', env.key)"
>
<span class="icon">{{ env.icon }}</span>
{{ env.label }}
</Button>
</div>
<div
v-if="validationErrors.env"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.env }}</span>
</div>
</div>
</template>
<script setup>
import Button from '@atomic-ui/button';
import Icon from '@atomic-ui/icon';
import { csgErrorRed } from '@csgSvgIcons/icons';
import { computed } from 'vue';
import { ENVIRONMENTS } from '../../../../store/types';
const props = defineProps({
isVisible: { type: Boolean, default: false },
selectedEnv: { type: String, default: '' },
validationErrors: { type: Object, required: true },
envList: { type: Array, required: true },
});
defineEmits(['change']);
const ENV_CONFIG = [
{ key: ENVIRONMENTS.LOCAL, label: 'Local', icon: '\uD83C\uDFE0' },
{ key: ENVIRONMENTS.QA_BCOM, label: 'QA-BCOM', icon: '\u2B50' },
{ key: ENVIRONMENTS.QA_MCOM, label: 'QA-MCOM', icon: '\u2B50' },
{ key: ENVIRONMENTS.PROD_BCOM, label: 'PROD-BCOM', icon: '\uD83D\uDE80' },
{ key: ENVIRONMENTS.PROD_MCOM, label: 'PROD-MCOM', icon: '\uD83D\uDE80' },
];
const availableEnvs = computed(() => ENV_CONFIG.filter((env) => props.envList.includes(env.key)));
</script>
<style scoped lang="scss">
@import './_experiment-form-styles.scss';
.env-buttons {
display: flex;
gap: 1rem;
}
.env-button {
flex: 1;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
transition: all 0.2s ease;
}
.icon {
margin-right: 0.5rem;
font-size: 1.2rem;
}
</style>
|