storj/web/satellite/src/App.vue
Egon Elbre 8620532a05 web/satellite: bump dependencies
This contains also multiple fixes to make it work.
The following is a non-exhaustive list.

When @Prop default value is a callback, then it is called
instead of set verbatim. This means, when you want a default
value to be a callback, then it needs to be `default: () => () => X`.

jest does not yet properly support WebWorkers, hence the code introduces
an indirection to provide the worker URL.

This in turn required removing the global "store" dependency from
the tests. As a consequence the new NotificatorPlugin takes store
as a dependency. And many of the tests are adjusted to not import
store directly.

Moved StoreModule definition to avoid initializing the global store.

Some of the router code was moved into store. We can later figure out
how to structure it better and move it back.

bip39 needs explicit fallbacks for some of the dependencies.

Fixes to timer mocking. jest supports it natively.

Remove sinon dependency. jest provides all the functionality we need.

Change-Id: I7af3599390c63ce9f99dbd0b1e0870e9f8ca994d
2022-05-04 15:02:01 +00:00

175 lines
5.3 KiB
Vue

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div id="app">
<router-view />
<!-- Area for displaying notification -->
<NotificationArea />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
// @vue/component
@Component({
components: {
NotificationArea,
},
})
export default class App extends Vue {
/**
* Lifecycle hook after initial render.
* Sets up variables from meta tags from config such satellite name, etc.
*/
public mounted(): void {
const satelliteName = MetaUtils.getMetaContent('satellite-name');
const partneredSatellitesData = MetaUtils.getMetaContent('partnered-satellites');
let partneredSatellitesJson = [];
if (partneredSatellitesData) {
partneredSatellitesJson = JSON.parse(partneredSatellitesData);
}
const isBetaSatellite = MetaUtils.getMetaContent('is-beta-satellite');
const couponCodeBillingUIEnabled = MetaUtils.getMetaContent('coupon-code-billing-ui-enabled');
const couponCodeSignupUIEnabled = MetaUtils.getMetaContent('coupon-code-signup-ui-enabled');
const isNewProjectDashboard = MetaUtils.getMetaContent('new-project-dashboard');
const isNewNavStructure = MetaUtils.getMetaContent('new-navigation-structure');
const isNewObjectsFlow = MetaUtils.getMetaContent('new-objects-flow');
if (satelliteName) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
if (partneredSatellitesJson) {
const partneredSatellites: PartneredSatellite[] = [];
partneredSatellitesJson.forEach((partner) => {
const name = partner[0];
const address = partner[1];
// skip current satellite
if (name !== satelliteName) {
partneredSatellites.push(new PartneredSatellite(name, address));
}
});
this.$store.dispatch(APP_STATE_ACTIONS.SET_PARTNERED_SATELLITES, partneredSatellites);
}
}
if (isBetaSatellite) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_STATUS, isBetaSatellite === 'true');
}
if (couponCodeBillingUIEnabled) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled === 'true');
}
if (couponCodeSignupUIEnabled) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_COUPON_CODE_SIGNUP_UI_STATUS, couponCodeSignupUIEnabled === 'true');
}
if (isNewProjectDashboard) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_PROJECT_DASHBOARD_STATUS, isNewProjectDashboard === 'true');
}
if (isNewNavStructure) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_NAV_STRUCTURE_STATUS, isNewNavStructure === 'true');
}
if (isNewObjectsFlow) {
this.$store.dispatch(APP_STATE_ACTIONS.SET_OBJECTS_FLOW_STATUS, isNewObjectsFlow === 'true');
}
}
}
</script>
<style lang="scss">
html {
overflow: hidden;
}
body {
margin: 0 !important;
height: 100vh;
zoom: 100%;
overflow: hidden;
}
img,
a {
-webkit-user-drag: none;
}
#app {
height: 100%;
}
@font-face {
font-family: 'font_regular';
font-style: normal;
font-weight: 400;
font-display: swap;
src:
local(''),
url('../static/fonts/inter-v3-latin-regular.woff2') format('woff2'),
url('../static/fonts/inter-v3-latin-regular.woff') format('woff'),
url('../static/fonts/inter-v3-latin-regular.ttf') format('truetype');
}
@font-face {
font-family: 'font_medium';
font-style: normal;
font-weight: 600;
font-display: swap;
src:
local(''),
url('../static/fonts/inter-v3-latin-600.woff2') format('woff2'),
url('../static/fonts/inter-v3-latin-600.woff') format('woff'),
url('../static/fonts/inter-v3-latin-600.ttf') format('truetype');
}
@font-face {
font-family: 'font_bold';
font-style: normal;
font-weight: 800;
font-display: swap;
src:
local(''),
url('../static/fonts/inter-v3-latin-800.woff2') format('woff2'),
url('../static/fonts/inter-v3-latin-800.woff') format('woff'),
url('../static/fonts/inter-v3-latin-800.ttf') format('truetype');
}
a {
text-decoration: none;
outline: none;
cursor: pointer;
}
input,
textarea {
font-family: inherit;
border: 1px solid rgba(56, 75, 101, 0.4);
color: #354049;
caret-color: #2683ff;
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #fff;
}
::-webkit-scrollbar-thumb {
background: #afb7c1;
border-radius: 6px;
height: 5px;
}
</style>