Merge branch 'convert-app-config-json-to-typescript-des-1654'

README.md

@@ -283,7 +283,6 @@ If you're using GNOME, try installing one of these GNOME Shell extensions:
       - **app.tsx** - Entry file for the renderer process
       - **routes.tsx** - Routes configurator
       - **transitions.ts** - Transition rules between views
-    - **config.json** - App color definitions and URLs to external resources
   - **tasks/** - Gulp tasks used to build app and watch for changes during development
     - **distribution.js** - Configuration for `electron-builder`
   - **test/** - Electron GUI tests

desktop/packages/mullvad-vpn/src/main/index.ts

@@ -4,12 +4,12 @@ import fs from 'fs';
 import * as path from 'path';
 import util from 'util';
 
-import config from '../config.json';
 import { hasExpired } from '../shared/account-expiry';
 import {
   ISplitTunnelingApplication,
   ISplitTunnelingAppListRetriever,
 } from '../shared/application-types';
+import { urls } from '../shared/constants';
 import {
   AccessMethodSetting,
   DaemonEvent,
@@ -855,7 +855,7 @@ class ApplicationMain
 
     IpcMainEventChannel.app.handleQuit(() => this.disconnectAndQuit());
     IpcMainEventChannel.app.handleOpenUrl(async (url) => {
-      if (Object.values(config.links).find((link) => url.startsWith(link))) {
+      if (Object.values(urls).find((allowedUrl) => url.startsWith(allowedUrl))) {
         await shell.openExternal(url);
       }
     });

desktop/packages/mullvad-vpn/src/renderer/app.tsx

@@ -9,6 +9,7 @@ import {
   ILinuxSplitTunnelingApplication,
   ISplitTunnelingApplication,
 } from '../shared/application-types';
+import { Url } from '../shared/constants';
 import {
   AccessMethodSetting,
   AccountNumber,
@@ -358,7 +359,7 @@ export default class AppRenderer {
     IpcRendererEventChannel.problemReport.collectLogs(toRedact);
   public viewLog = (path: string) => IpcRendererEventChannel.problemReport.viewLog(path);
   public quit = () => IpcRendererEventChannel.app.quit();
-  public openUrl = (url: string) => IpcRendererEventChannel.app.openUrl(url);
+  public openUrl = (url: Url) => IpcRendererEventChannel.app.openUrl(url);
   public getPathBaseName = (path: string) => IpcRendererEventChannel.app.getPathBaseName(path);
   public showOpenDialog = (options: Electron.OpenDialogOptions) =>
     IpcRendererEventChannel.app.showOpenDialog(options);
@@ -462,15 +463,15 @@ export default class AppRenderer {
     return devices;
   };
 
-  public openLinkWithAuth = async (link: string): Promise<void> => {
+  public openUrlWithAuth = async (url: Url): Promise<void> => {
     let token = '';
     try {
       token = await IpcRendererEventChannel.account.getWwwAuthToken();
     } catch (e) {
       const error = e as Error;
       log.error(`Failed to get the WWW auth token: ${error.message}`);
     }
-    void this.openUrl(`${link}?token=${token}`);
+    void this.openUrl(`${url}?token=${token}`);
   };
 
   public setAllowLan = async (allowLan: boolean) => {

desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
-import { links } from '../../config.json';
 import { formatDate, hasExpired } from '../../shared/account-expiry';
+import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
@@ -30,11 +30,11 @@ import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 export default function Account() {
   const history = useHistory();
   const isOffline = useSelector((state) => state.connection.isBlocked);
-  const { updateAccountData, openLinkWithAuth, logout } = useAppContext();
+  const { updateAccountData, openUrlWithAuth, logout } = useAppContext();
 
   const onBuyMore = useCallback(async () => {
-    await openLinkWithAuth(links.purchase);
-  }, [openLinkWithAuth]);
+    await openUrlWithAuth(urls.purchase);
+  }, [openUrlWithAuth]);
 
   const onMount = useEffectEvent(() => updateAccountData());
   useEffect(() => onMount(), []);

desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { measurements, normalText, tinyText } from './common-styles';
 
 export const AccountContainer = styled.div({
@@ -28,20 +28,20 @@ const AccountRowText = styled.span({
 export const AccountRowLabel = styled(AccountRowText)(tinyText, {
   lineHeight: '20px',
   marginBottom: '5px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 export const AccountRowValue = styled(AccountRowText)(normalText, {
   fontWeight: 600,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const DeviceRowValue = styled(AccountRowValue)({
   textTransform: 'capitalize',
 });
 
 export const AccountOutOfTime = styled(AccountRowValue)({
-  color: colors.red,
+  color: Colors.red,
 });
 
 export const StyledDeviceNameRow = styled.div({

desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx

@@ -2,13 +2,12 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { AccessMethodSetting } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { Container, Flex } from '../lib/components';
-import { Spacings } from '../lib/foundations';
+import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -50,7 +49,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   width: '10px',
   height: '10px',
   borderRadius: '50%',
-  backgroundColor: props.$result ? colors.green : colors.red,
+  backgroundColor: props.$result ? Colors.green : Colors.red,
   marginRight: Spacings.spacing2,
 }));
 
@@ -300,8 +299,8 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
         <ContextMenuTrigger>
           <StyledMethodTriggerImage
             source="icon-more"
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             height={36}
             width={36}
           />

desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { Colors } from '../lib/foundations';
 import { useMounted } from '../lib/utility-hooks';
 import {
   StyledButtonContent,
@@ -32,7 +32,7 @@ interface IIconProps {
 }
 
 export function Icon(props: IIconProps) {
-  return <ImageView {...props} tintColor={colors.white} />;
+  return <ImageView {...props} tintColor={Colors.white} />;
 }
 
 export interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -157,37 +157,37 @@ export function BlockingButton(props: IBlockingProps) {
 }
 
 export const RedButton = styled(BaseButton)({
-  backgroundColor: colors.red,
+  backgroundColor: Colors.red,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red95,
+    backgroundColor: Colors.red95,
   },
 });
 
 export const GreenButton = styled(BaseButton)({
-  backgroundColor: colors.green,
+  backgroundColor: Colors.green,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.green90,
+    backgroundColor: Colors.green90,
   },
 });
 
 export const BlueButton = styled(BaseButton)({
-  backgroundColor: colors.blue80,
+  backgroundColor: Colors.blue80,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.blue60,
+    backgroundColor: Colors.blue60,
   },
 });
 
 export const TransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.white20,
+  backgroundColor: Colors.white20,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
 });
 
 export const RedTransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.red60,
+  backgroundColor: Colors.red60,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red80,
+    backgroundColor: Colors.red80,
   },
 });
 

desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { Icon } from './cell/Label';
 
 interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -25,8 +25,8 @@ export default function ChevronButton(props: IProps) {
   return (
     <Button {...otherProps}>
       <StyledIcon
-        tintColor={colors.white80}
-        tintHoverColor={colors.white}
+        tintColor={Colors.white80}
+        tintHoverColor={Colors.white}
         source={up ? 'icon-chevron-up' : 'icon-chevron-down'}
         height={24}
         width={24}

desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useScheduler } from '../../shared/scheduler';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 import ImageView from './ImageView';
 
@@ -80,8 +80,8 @@ export default function ClipboardLabel(props: IProps) {
           }>
           <ImageView
             source={obscured ? 'icon-unobscure' : 'icon-obscure'}
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             width={24}
           />
         </StyledButton>
@@ -95,8 +95,8 @@ export default function ClipboardLabel(props: IProps) {
         }>
         <ImageView
           source={justCopied ? 'icon-tick' : 'icon-copy'}
-          tintColor={justCopied ? colors.green : colors.white}
-          tintHoverColor={justCopied ? colors.green : colors.white80}
+          tintColor={justCopied ? Colors.green : Colors.white}
+          tintHoverColor={justCopied ? Colors.green : Colors.white80}
           width={justCopied ? 22 : 24}
         />
       </StyledCopyButton>

desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { useBoolean, useStyledRef } from '../lib/utility-hooks';
 import { smallText } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
@@ -117,7 +117,7 @@ const StyledMenu = styled.div<StyledMenuProps>((props) => {
     right: props.$align === 'left' ? 'auto' : iconMargin,
     padding: '7px 4px',
     background: 'rgb(36, 53, 78)',
-    border: `1px solid ${colors.darkBlue}`,
+    border: `1px solid ${Colors.darkBlue}`,
     borderRadius: '8px',
     zIndex: 1,
   };
@@ -130,17 +130,17 @@ const StyledMenuItem = styled.button(smallText, (props) => ({
   background: 'transparent',
   border: 'none',
   textAlign: 'left',
-  color: props.disabled ? colors.white50 : colors.white,
+  color: props.disabled ? Colors.white50 : Colors.white,
 
   '&&:hover': {
-    background: props.disabled ? 'transparent' : colors.blue,
+    background: props.disabled ? 'transparent' : Colors.blue,
   },
 }));
 
 const StyledSeparator = styled.hr({
   height: '1px',
   border: 'none',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   margin: '4px 9px',
 });
 

desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { IpAddress } from '../lib/ip';
 import { useBoolean, useMounted, useStyledRef } from '../lib/utility-hooks';
@@ -255,8 +255,8 @@ export default function CustomDnsSettings() {
             source="icon-add"
             width={18}
             height={18}
-            tintColor={colors.white40}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white40}
+            tintHoverColor={Colors.white60}
             tabIndex={-1}
           />
         </StyledAddCustomDnsButton>
@@ -369,7 +369,7 @@ function CellListItem(props: ICellListItemProps) {
                 source="icon-close"
                 width={18}
                 height={18}
-                tintColor={editing ? colors.black : colors.white40}
+                tintColor={editing ? Colors.black : Colors.white40}
               />
             </StyledRemoveButton>
           </AriaDescribed>