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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 | 1x 1x 1x 1x 1x 18x 18x 18x 18x 18x 5x 5x 5x | <template>
<div class="select-environment-page">
<div class="environment-hero">
<div class="text-center">
<div class="margin-bottom-l">
<svg
width="80"
height="40"
viewBox="0 0 80 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_logo)">
<path
d="M26.3309 15.2344L21.3198 0L16.3086 15.2344H0L13.2143 24.707L8.20871 39.9498L21.2974 30.5246L34.4727 40L29.442 24.6791L42.5893 15.2344H26.3309Z"
fill="#E01A2B"
/>
<path
d="M64.2439 9.42243C61.8699 9.41845 59.528 9.9718 57.4069 11.038C55.2857 12.1041 53.4445 13.6533 52.0312 15.5608V0.521763H48.9816V24.7433C48.986 27.7676 49.8872 30.7228 51.5712 33.2349C53.2553 35.747 55.6465 37.7033 58.4424 38.8563C61.2383 40.0093 64.3134 40.3073 67.2787 39.7126C70.244 39.1178 72.9663 37.657 75.1013 35.515C77.2363 33.3729 78.6881 30.6458 79.2731 27.6786C79.8582 24.7114 79.5501 21.6373 78.3879 18.8452C77.2257 16.0531 75.2615 13.6683 72.7439 11.9926C70.2262 10.3168 67.2682 9.42529 64.2439 9.4308V9.42243ZM76.5207 24.7349C76.5135 27.1555 75.7888 29.5196 74.4382 31.5284C73.0876 33.5371 71.1717 35.1004 68.9328 36.0204C66.6939 36.9405 64.2325 37.1761 61.8597 36.6974C59.4869 36.2188 57.3093 35.0474 55.6022 33.3313C53.8951 31.6152 52.7351 29.4315 52.2689 27.0562C51.8026 24.6809 52.0511 22.2208 52.9829 19.9867C53.9147 17.7527 55.488 15.845 57.5038 14.505C59.5196 13.1649 61.8875 12.4526 64.308 12.4581C67.5543 12.4722 70.6623 13.7737 72.9499 16.077C75.2374 18.3802 76.5177 21.4971 76.5095 24.7433L76.5207 24.7349Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_logo">
<rect
width="79.5592"
height="40"
fill="white"
/>
</clipPath>
</defs>
</svg>
</div>
<h1 class="h2 heavy">
Welcome to Experimentation Admin
</h1>
</div>
</div>
<div class="environment-selection">
<div class="grid-container">
<div class="text-center margin-bottom-l">
<p class="small">
Choose the Environment
</p>
</div>
<div class="environment-tiles-wrapper">
<label
v-for="env in environmentOptions"
:key="env.id"
class="environment-card"
:class="{ selected: selectedEnvironment === env.id }"
:data-testid="`env-tile-${env.id.toLowerCase()}`"
>
<input
v-model="selectedEnvironment"
type="radio"
name="environment"
:value="env.id"
class="environment-radio"
>
<div class="environment-tile-content">
<svg
v-if="
env.id === ENVIRONMENTS.QA_MCOM ||
env.id === ENVIRONMENTS.PROD_MCOM
"
width="32"
height="30"
viewBox="0 0 43 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="environment-icon"
>
<path
d="M26.3309 15.2344L21.3198 0L16.3086 15.2344H0L13.2143 24.707L8.20871 39.9498L21.2974 30.5246L34.4727 40L29.442 24.6791L42.5893 15.2344H26.3309Z"
fill="#E01A2B"
/>
</svg>
<svg
v-if="
env.id === ENVIRONMENTS.QA_BCOM ||
env.id === ENVIRONMENTS.PROD_BCOM
"
width="23"
height="30"
viewBox="0 0 31 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="environment-icon"
>
<g clip-path="url(#clip0_bcom)">
<path
d="M15.2437 9.42246C12.8697 9.41848 10.5279 9.97183 8.40676 11.038C6.28561 12.1041 4.44434 13.6533 3.03111 15.5609V0.52179H-0.0185547V24.7433C-0.0141346 27.7677 0.887076 30.7228 2.5711 33.2349C4.25513 35.747 6.64632 37.7033 9.44224 38.8563C12.2382 40.0094 15.3132 40.3073 18.2785 39.7126C21.2438 39.1178 23.9661 37.657 26.1011 35.515C28.2362 33.373 29.688 30.6459 30.273 27.6786C30.858 24.7114 30.5499 21.6373 29.3877 18.8452C28.2255 16.0531 26.2614 13.6683 23.7437 11.9926C21.2261 10.3168 18.2681 9.42531 15.2437 9.43083V9.42246ZM27.5205 24.735C27.5133 27.1555 26.7886 29.5196 25.438 31.5284C24.0874 33.5372 22.1716 35.1004 19.9327 36.0205C17.6938 36.9405 15.2323 37.1761 12.8596 36.6975C10.4868 36.2188 8.30917 35.0474 6.60205 33.3313C4.89493 31.6152 3.73493 29.4315 3.26872 27.0562C2.8025 24.681 3.051 22.2208 3.98279 19.9867C4.91458 17.7527 6.48782 15.8451 8.50364 14.505C10.5194 13.165 12.8873 12.4527 15.3079 12.4582C18.5541 12.4722 21.6621 13.7737 23.9497 16.077C26.2373 18.3803 27.5175 21.4971 27.5093 24.7433L27.5205 24.735Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_bcom">
<rect
width="31"
height="40"
fill="white"
/>
</clipPath>
</defs>
</svg>
<svg
v-if="env.id === ENVIRONMENTS.LOCAL"
width="30"
height="30"
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="environment-icon"
>
<path
d="M20 5L5 15V25L20 35L35 25V15L20 5Z"
stroke="#2563EB"
stroke-width="2"
fill="none"
/>
<circle
cx="20"
cy="20"
r="4"
fill="#2563EB"
/>
</svg>
<div class="environment-tile-text">
{{ env.text }}
</div>
<div class="environment-tile-subtext">
{{ env.subText }}
</div>
</div>
</label>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ENVIRONMENTS, ENV_FQ } from '../../../store/types';
import { getEnvironmentTileOptions } from '../../../utils/environmentHelper';
const router = useRouter();
const store = useStore();
const selectedEnvironment = ref('');
const environmentOptions = getEnvironmentTileOptions();
watch(selectedEnvironment, (newValue) => {
if (newValue) {
store.dispatch(ENV_FQ.actions.select, newValue);
router.push({
path: '/experiments',
query: { env: newValue },
});
}
});
</script>
<style lang="scss" scoped>
.select-environment-page {
background-color: $background-color;
display: flex;
flex-direction: column;
width: 100vw;
margin-left: calc(-50vw + 50%);
min-height: calc(100vh - var(--app-header-height, 97px));
margin-top: rem-calc(-8);
margin-bottom: rem-calc(-8);
position: relative;
z-index: 0;
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $background-color;
z-index: -1;
pointer-events: none;
}
@include breakpoint(medium) {
margin-top: rem-calc(-16);
margin-bottom: rem-calc(-16);
}
@include breakpoint(large) {
margin-top: rem-calc(-32);
margin-bottom: rem-calc(-32);
}
}
.environment-hero {
background-color: $white;
padding: rem-calc(56 16 48);
@include breakpoint(medium) {
padding: rem-calc(64 16 56);
}
}
.environment-selection {
flex: 1;
padding: rem-calc(48 16);
@include breakpoint(medium) {
padding: rem-calc(56 16);
}
}
.environment-tiles-wrapper {
display: flex;
justify-content: center;
gap: rem-calc(16);
max-width: rem-calc(800);
margin: 0 auto;
flex-wrap: wrap;
}
.environment-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: rem-calc(24 32);
min-width: rem-calc(200);
max-width: rem-calc(240);
flex: 1;
background-color: $white;
border: 2px solid $gray-4-color;
border-radius: rem-calc(8);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
outline: none;
&:hover {
border-color: $black;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
&.selected {
border-color: $black;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
&:focus-within {
outline: 2px solid $black;
outline-offset: 2px;
}
}
.environment-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
&:focus {
outline: none;
}
}
.environment-tile-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: rem-calc(12);
width: 100%;
}
.environment-icon {
flex-shrink: 0;
margin-bottom: rem-calc(4);
}
.environment-tile-text {
font-size: rem-calc(16);
line-height: 1.4;
color: $black;
font-weight: $font-weight-med;
}
.environment-tile-subtext {
font-size: rem-calc(13);
line-height: 1.4;
color: $gray-1-color;
}
</style>
|