chore(vpnx): update js dependencies (#521)

* upgrade to headscaleui v2 * upgrade sentry to v8 * switch form inputs to headlessui
nymtech · Jun 25, 2024 · 459dc60 · 459dc60
1 parent c773a21
commit 459dc60
Show file tree

Hide file tree

Showing 14 changed files with 1,301 additions and 859 deletions.
diff --git a/nym-vpn-x/.eslintrc.cjs b/nym-vpn-x/.eslintrc.cjs
@@ -13,7 +13,7 @@ module.exports = {
   parserOptions: {
     project: './tsconfig.json',
   },
-  plugins: ['@typescript-eslint', 'import'],
+  plugins: ['@typescript-eslint', 'import', 'deprecation'],
   root: true,
   settings: {
     react: {
@@ -46,5 +46,6 @@ module.exports = {
       },
     ],
     'import/extensions': ['error', 'never', { json: 'always', svg: 'always' }],
+    'deprecation/deprecation': 'warn',
   },
 };
diff --git a/nym-vpn-x/package-lock.json b/nym-vpn-x/package-lock.json
diff --git a/nym-vpn-x/package.json b/nym-vpn-x/package.json
@@ -29,11 +29,9 @@
     "gen:licenses:rust": "cd src-tauri && cargo about generate --all-features --format json -o ../public/licenses-rust.json"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
-    "@headlessui/tailwindcss": "^0.2.0",
+    "@headlessui/react": "^2.1.0",
     "@mui/base": "^5.0.0-beta.39",
-    "@sentry/integrations": "^7.106.1",
-    "@sentry/react": "^7.106.1",
+    "@sentry/react": "^8.11.0",
     "@tauri-apps/api": "^1.5.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.10",
@@ -61,6 +59,7 @@
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",

diff --git a/nym-vpn-x/src/pages/credential/AddCredential.tsx b/nym-vpn-x/src/pages/credential/AddCredential.tsx
@@ -30,6 +30,9 @@ function AddCredential() {
   };
 
   const handleClick = async () => {
+    if (credential.length === 0) {
+      return;
+    }
     await invoke('add_credential', { credential: credential.trim() })
       .then(() => {
         navigate(routes.root);
@@ -77,6 +80,7 @@ function AddCredential() {
           resize="none"
           rows={10}
           label={t('input-label')}
+          className="sentry-ignore"
         />
         {error ? (
           <motion.div

diff --git a/nym-vpn-x/src/pages/home/Home.tsx b/nym-vpn-x/src/pages/home/Home.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect } from 'react';
-import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { invoke } from '@tauri-apps/api';
 import { useNavigate } from 'react-router-dom';
@@ -132,10 +131,6 @@ function Home() {
           onClick={handleClick}
           color={getButtonColor()}
           disabled={loading || daemonStatus !== 'Ok'}
-          className={clsx(
-            daemonStatus !== 'Ok' &&
-              'opacity-50 disabled:opacity-50 hover:opacity-50',
-          )}
         >
           {getButtonText()}
         </Button>

diff --git a/nym-vpn-x/src/pages/settings/Settings.tsx b/nym-vpn-x/src/pages/settings/Settings.tsx
@@ -16,7 +16,8 @@ import SettingsGroup from './SettingsGroup';
 const ThrottleDelay = 10000; // ms
 
 function Settings() {
-  const { entrySelector, autoConnect, version, monitoring } = useMainState();
+  const { entrySelector, autoConnect, version, monitoring, daemonStatus } =
+    useMainState();
   const navigate = useNavigate();
   const dispatch = useMainDispatch() as StateDispatch;
   const { t } = useTranslation('settings');
@@ -54,7 +55,10 @@ function Settings() {
   return (
     <PageAnim className="h-full flex flex-col mt-2 gap-6">
       {import.meta.env.APP_DISABLE_DATA_STORAGE !== 'true' && (
-        <Button onClick={async () => navigate(routes.credential)}>
+        <Button
+          onClick={async () => navigate(routes.credential)}
+          disabled={daemonStatus !== 'Ok'}
+        >
           {t('add-credential-button')}
         </Button>
       )}

diff --git a/nym-vpn-x/src/pages/settings/SettingsGroup.tsx b/nym-vpn-x/src/pages/settings/SettingsGroup.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { ReactNode } from 'react';
-import { RadioGroup } from '@headlessui/react';
+import { Description, Label, Radio, RadioGroup } from '@headlessui/react';
 
 type Setting = {
   title: string;
@@ -21,7 +21,7 @@ function SettingsGroup({ settings, className }: Props) {
   return (
     <RadioGroup className={clsx([className])}>
       {settings.map((setting, index) => (
-        <RadioGroup.Option
+        <Radio
           key={setting.title}
           value={setting.title}
           onClick={setting.onClick}
@@ -53,13 +53,13 @@ function SettingsGroup({ settings, className }: Props) {
               </span>
             )}
             <div className="flex flex-col flex-1 justify-center min-w-4">
-              <RadioGroup.Label
+              <Label
                 as="div"
                 className="text-base text-baltic-sea dark:text-mercury-pinkish select-none truncate"
               >
                 {setting.title}
-              </RadioGroup.Label>
-              <RadioGroup.Description
+              </Label>
+              <Description
                 as="div"
                 className="text-sm text-cement-feet dark:text-mercury-mist select-none truncate"
               >
@@ -68,11 +68,11 @@ function SettingsGroup({ settings, className }: Props) {
                 ) : (
                   setting.desc
                 )}
-              </RadioGroup.Description>
+              </Description>
             </div>
             {setting.trailing}
           </div>
-        </RadioGroup.Option>
+        </Radio>
       ))}
     </RadioGroup>
   );

diff --git a/nym-vpn-x/src/sentry.ts b/nym-vpn-x/src/sentry.ts
@@ -6,7 +6,6 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
-import { captureConsoleIntegration } from '@sentry/integrations';
 import { getVersion } from '@tauri-apps/api/app';
 import logu from './log';
 
@@ -43,7 +42,7 @@ async function initSentry() {
         blockAllMedia: false,
       }),
       // captures console API calls
-      captureConsoleIntegration({ levels: ['error', 'warn'] }),
+      Sentry.captureConsoleIntegration({ levels: ['error', 'warn'] }),
     ],
     tracePropagationTargets: ['localhost'],
 
@@ -59,10 +58,11 @@ async function initSentry() {
     // 'development' or 'production'
     environment: import.meta.env.MODE,
 
-    release: `nym-vpn-desktop@${version}`,
+    release: `nymvpn-x@${version}`,
   });
 
   Sentry.setTag('app_version', version);
+  Sentry.setTag('client_version', 'x');
   Sentry.setUser({ id: 'nym', ip_address: undefined });
 }
 

diff --git a/nym-vpn-x/src/ui/Button.tsx b/nym-vpn-x/src/ui/Button.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
+import { Button as HuButton } from '@headlessui/react';
 
 type ButtonProps = {
   children: ReactNode;
@@ -28,13 +29,13 @@ function Button({
   };
 
   return (
-    <button
+    <HuButton
       className={clsx([
         'flex justify-center items-center w-full',
         'rounded-lg text-lg font-bold py-3 px-6',
         'text-white dark:text-baltic-sea',
-        'focus:outline-none focus:ring-4 focus:ring-black focus:dark:ring-white',
-        'transition hover:opacity-80 disabled:opacity-50',
+        'focus:outline-none data-[focus]:ring-2 data-[focus]:ring-black data-[focus]:dark:ring-white',
+        'transition data-[hover]:opacity-80 data-[disabled]:opacity-60 data-[active]:ring-0',
         'shadow tracking-normal cursor-default',
         getColorStyle(),
         className && className,
@@ -43,7 +44,7 @@ function Button({
       disabled={disabled}
     >
       {children}
-    </button>
+    </HuButton>
   );
 }
 

diff --git a/nym-vpn-x/src/ui/RadioGroup.tsx b/nym-vpn-x/src/ui/RadioGroup.tsx
@@ -1,5 +1,10 @@
 import React, { Key, useState } from 'react';
-import { RadioGroup as HuRadioGroup } from '@headlessui/react';
+import {
+  Description,
+  RadioGroup as HuRadioGroup,
+  Label,
+  Radio,
+} from '@headlessui/react';
 import clsx from 'clsx';
 
 export type RadioGroupOptionCursor = 'default' | 'pointer' | 'not-allowed';
@@ -39,16 +44,16 @@ function RadioGroup<K extends Key>({
     <div className="select-none">
       <HuRadioGroup value={selected} onChange={handleChange}>
         {rootLabel && (
-          <HuRadioGroup.Label
+          <Label
             as="div"
             className="font-semibold text-base text-baltic-sea dark:text-white mb-6 cursor-default"
           >
             {rootLabel}
-          </HuRadioGroup.Label>
+          </Label>
         )}
         <div className="space-y-4">
           {options.map((option) => (
-            <HuRadioGroup.Option
+            <Radio
               key={option.key}
               value={option.key}
               className={({ checked }) =>
@@ -89,27 +94,27 @@ function RadioGroup<K extends Key>({
                       </div>
                     )}
                     <div className="min-w-0 flex flex-col justify-center">
-                      <HuRadioGroup.Label
+                      <Label
                         as="p"
                         className={clsx([
                           'truncate text-base text-baltic-sea dark:text-mercury-pinkish',
                         ])}
                       >
                         {option.label}
-                      </HuRadioGroup.Label>
+                      </Label>
                       {option.desc && (
-                        <HuRadioGroup.Description
+                        <Description
                           as="span"
                           className="truncate text-sm text-cement-feet dark:text-mercury-mist"
                         >
                           <span>{option.desc}</span>
-                        </HuRadioGroup.Description>
+                        </Description>
                       )}
                     </div>
                   </div>
                 );
               }}
-            </HuRadioGroup.Option>
+            </Radio>
           ))}
         </div>
       </HuRadioGroup>

diff --git a/nym-vpn-x/src/ui/TextArea.tsx b/nym-vpn-x/src/ui/TextArea.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { Field, Label, Textarea } from '@headlessui/react';
 import { inputStates } from './common-styles';
 
 type TextAreaProps = {
@@ -9,6 +10,8 @@ type TextAreaProps = {
   rows?: number;
   resize?: 'none' | 'vertical' | 'horizontal' | 'both';
   spellCheck?: boolean;
+  // Additional css style for textarea element
+  className?: string;
 };
 
 function TextArea({
@@ -18,6 +21,7 @@ function TextArea({
   spellCheck,
   resize,
   label,
+  className,
 }: TextAreaProps) {
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     onChange(e.target.value);
@@ -39,13 +43,13 @@ function TextArea({
   };
 
   return (
-    <div
+    <Field
       className={clsx([
         'w-full flex flex-row items-center mb-2',
         label && 'relative',
       ])}
     >
-      <textarea
+      <Textarea
         id="passphrase"
         name="passphrase"
         value={value}
@@ -59,23 +63,24 @@ function TextArea({
           ...inputStates,
           resize && getResizeClass(resize),
           label && 'relative',
+          className,
         ])}
         onChange={handleChange}
         rows={rows}
         spellCheck={spellCheck}
       />
       {label && (
-        <div
+        <Label
           className={clsx([
             'select-none absolute left-3 -top-2 px-1',
             'dark:text-mercury-pinkish',
             'bg-blanc-nacre dark:bg-baltic-sea text-xs',
           ])}
         >
           {label}
-        </div>
+        </Label>
       )}
-    </div>
+    </Field>
   );
 }
 

diff --git a/nym-vpn-x/src/ui/TextInput.tsx b/nym-vpn-x/src/ui/TextInput.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
+import { Field, Input, Label } from '@headlessui/react';
 import { inputStates } from './common-styles';
 import MsIcon from './MsIcon';
 
@@ -32,15 +33,16 @@ function TextInput({
   };
 
   return (
-    <div
+    <Field
       className={clsx([
         'w-full flex flex-row items-center',
         label && 'relative',
       ])}
     >
-      <input
+      <Input
         id="passphrase"
         name="passphrase"
+        type="text"
         value={value}
         aria-multiline={true}
         className={clsx([
@@ -59,23 +61,23 @@ function TextInput({
         autoFocus={autoFocus}
       />
       {label && (
-        <div
+        <Label
           className={clsx([
             'select-none absolute left-3 -top-2 px-1',
             'dark:text-mercury-pinkish',
             'bg-blanc-nacre dark:bg-baltic-sea text-xs',
           ])}
         >
           {label}
-        </div>
+        </Label>
       )}
       {leftIcon && (
         <MsIcon
           icon={leftIcon}
-          className="absolute left-3 text-baltic-sea dark:text-laughing-jack"
+          className="absolute left-3 text-baltic-sea dark:text-laughing-jack hover:cursor-text"
         />
       )}
-    </div>
+    </Field>
   );
 }