V1.1.3 (#24)

* chore: upgrade deps * fix(AddRuleModal): invalid styles * feat(Setting): enable ShouldFindProcess for macOS * fix(Home): type error * feat(Connections): remove process path column * feat(Connections): improve ui * chore: v1.1.3
igoogolx · Oct 30, 2024 · 63c8452 · 63c8452
1 parent b191fb2
commit 63c8452
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lux",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A system network proxy tool",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/components/pages/Data/Connections/ProcessCell/index.tsx b/src/components/pages/Data/Connections/ProcessCell/index.tsx
@@ -1,4 +1,4 @@
-import { TableCellLayout } from '@fluentui/react-components'
+import { TableCellLayout, Tooltip } from '@fluentui/react-components'
 import { ClickToCopy } from '@/components/Core'
 import React from 'react'
 import Highlighter from 'react-highlight-words'
@@ -15,13 +15,22 @@ export function ProcessCell (props: ProcessCellProps) {
   const value = chunks.pop() ?? ''
   return (
     <TableCellLayout truncate>
-      <ClickToCopy value={value}>
-            <Highlighter
-              searchWords={[searchedValue]}
-              autoEscape
-              textToHighlight={value}
-            />
-      </ClickToCopy>
+        <ClickToCopy value={process}>
+            <Tooltip
+                content={process}
+                relationship="description"
+                positioning={'above-start'}
+            >
+              <div>
+                  <Highlighter
+                      searchWords={[searchedValue]}
+                      autoEscape
+                      textToHighlight={value}
+                  />
+              </div>
+            </Tooltip>
+        </ClickToCopy>
+
     </TableCellLayout>
   )
 }
diff --git a/src/components/pages/Data/Connections/index.tsx b/src/components/pages/Data/Connections/index.tsx
@@ -154,7 +154,7 @@ export default function Connections (): React.ReactNode {
               <Highlighter
                 searchWords={[searchedValue]}
                 autoEscape
-                textToHighlight={item.domain}
+                textToHighlight={item.domain === 'unknown' ? '' : item.domain}
               />
             </TableCellLayout>
           )
@@ -199,42 +199,13 @@ export default function Connections (): React.ReactNode {
       }),
       shouldShowProcess
         ? createTableColumn<Connection>({
-          columnId: 'processPath',
+          columnId: 'process',
           renderHeaderCell: () => {
             return t(TRANSLATION_KEY.PROCESS)
           },
           renderCell: (item) => {
             return (
-                <TableCellLayout truncate>
-                    <ClickToCopy value={item.process}>
-                        <Tooltip
-                            content={item.process}
-                            relationship="description"
-                            positioning={'above-start'}
-                        >
-                            <span>
-                            <Highlighter
-                                searchWords={[searchedValue]}
-                                autoEscape
-                                textToHighlight={item.process}
-                            />
-                            </span>
-                        </Tooltip>
 
-                    </ClickToCopy>
-                </TableCellLayout>
-            )
-          }
-        })
-        : null,
-      shouldShowProcess
-        ? createTableColumn<Connection>({
-          columnId: 'process',
-          renderHeaderCell: () => {
-            return ''
-          },
-          renderCell: (item) => {
-            return (
                 <ProcessCell
                   process={item.process}
                   os={os}
@@ -325,22 +296,30 @@ export default function Connections (): React.ReactNode {
 
   const columnSizingOptions = useMemo(() => {
     return {
-      processPath: {
-        minWidth: 256,
-        defaultWidth: 256
+      process: {
+        minWidth: 360,
+        defaultWidth: 360
       },
       fullRule: {
         minWidth: 256,
         defaultWidth: 256
       },
       rule: {
-        minWidth: 64,
-        defaultWidth: 64
+        minWidth: 96,
+        defaultWidth: 96
       },
       network: {
         minWidth: 64,
         defaultWidth: 64
       },
+      destination: {
+        minWidth: 200,
+        defaultWidth: 200
+      },
+      domain: {
+        minWidth: 320,
+        defaultWidth: 320
+      },
       data: {
         minWidth: 64,
         defaultWidth: 64
@@ -373,14 +352,18 @@ export default function Connections (): React.ReactNode {
           </Tooltip>
         </div>
       </div>
-      <Table
-        columnSizingOptions={columnSizingOptions}
-        resizableColumns
-        columns={columns}
-        data={data}
-        defaultSortState={defaultSortState}
-        sortable
-      />
+        <div className={'overflow-x-auto overflow-y-hidden w-full'}>
+            <Table
+                virtualized={true}
+                columnSizingOptions={columnSizingOptions}
+                resizableColumns
+                columns={columns}
+                data={data}
+                defaultSortState={defaultSortState}
+                sortable
+            />
+        </div>
+
       <div className={styles.footer}>
         <div>{`TCP:  ${total.tcp}`}</div>
         <div>{`UDP:  ${total.udp}`}</div>

diff --git a/src/components/pages/Home/Content/index.tsx b/src/components/pages/Home/Content/index.tsx
@@ -102,11 +102,13 @@ export function Content (): React.ReactNode {
 
   const isAutoMode = setting.autoMode.enabled
 
-  const handleSelect: DataGridProps['onSelectionChange'] = async (e, data) => {
+  const handleSelect: DataGridProps['onSelectionChange'] = async (_, data) => {
     if (!isAutoMode) {
       const id = data.selectedItems.values().next().value
-      await updateSelectedProxyId({ id })
-      dispatch(selectedSlice.actions.setProxy({ id }))
+      if (typeof id === 'string') {
+        await updateSelectedProxyId({ id })
+        dispatch(selectedSlice.actions.setProxy({ id }))
+      }
     }
   }