feat(web): support seeing dep detail by jumping to npmjs (#1315)

labring · Jun 27, 2023 · 9e57c79 · 9e57c79
1 parent 45f8d7e
commit 9e57c79
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/web/src/components/ConfirmButton/index.tsx b/web/src/components/ConfirmButton/index.tsx
@@ -14,7 +14,7 @@ import {
 import { t } from "i18next";
 
 interface ConfirmButtonProps {
-  onSuccessAction: () => void;
+  onSuccessAction: React.MouseEventHandler<HTMLButtonElement>;
   headerText: string;
   bodyText: string | React.ReactElement | any;
   confirmButtonText?: string;
@@ -31,8 +31,8 @@ const ConfirmButton = ({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = React.useRef<any>();
 
-  const onSubmit = () => {
-    onSuccessAction();
+  const onSubmit: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    onSuccessAction(event);
     onClose();
   };
 

diff --git a/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/AddDependenceModal/index.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AddIcon, EditIcon, SearchIcon, SmallCloseIcon } from "@chakra-ui/icons";
+import { AddIcon, EditIcon, ExternalLinkIcon, SearchIcon, SmallCloseIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -36,6 +36,7 @@ import {
   usePackageSearchQuery,
   usePackageVersionsQuery,
 } from "../service";
+import { openDependenceDetail } from "..";
 
 import useGlobalStore from "@/pages/globalStore";
 
@@ -205,7 +206,17 @@ const AddDependenceModal = () => {
                   }
                 >
                   <Box ml={5} width="350px">
-                    <b>{packageItem.package.name}</b>
+                    <div className="flex items-center space-x-1">
+                      <b>{packageItem.package.name}</b>
+                      <ExternalLinkIcon
+                        className="!text-primary-700 hover:scale-110"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          openDependenceDetail(packageItem.package.name);
+                        }}
+                      />
+                    </div>
                     <p className="overflow-hidden text-ellipsis whitespace-nowrap text-base text-second ">
                       {packageItem.package.description}
                     </p>

diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx
@@ -18,6 +18,10 @@ import { TPackage, useDelPackageMutation, usePackageQuery } from "./service";
 import useCustomSettingStore from "@/pages/customSetting";
 import useGlobalStore from "@/pages/globalStore";
 
+export const openDependenceDetail = (depName: string) => {
+  window.open(`https://www.npmjs.com/package/${encodeURIComponent(depName)}`, "_blank");
+};
+
 export default function DependenceList() {
   const packageQuery = usePackageQuery();
   const globalStore = useGlobalStore((state) => state);
@@ -77,7 +81,9 @@ export default function DependenceList() {
                       size="small"
                       isActive={false}
                       key={packageItem?.name!}
-                      onClick={() => {}}
+                      onClick={() => {
+                        openDependenceDetail(packageItem.name);
+                      }}
                       className="group"
                     >
                       <FileTypeIcon type={FileType.npm} />
@@ -93,7 +99,9 @@ export default function DependenceList() {
                         {!packageItem?.builtin ? (
                           <span className=" ml-2 hidden w-[10px] group-hover:inline-block">
                             <ConfirmButton
-                              onSuccessAction={async () => {
+                              onSuccessAction={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
                                 delPackageMutation.mutate({ name: packageItem?.name });
                               }}
                               headerText={String(t("Delete"))}
@@ -124,8 +132,11 @@ export default function DependenceList() {
                     isActive={false}
                     key={packageItem?.name!}
                     className="group"
+                    onClick={() => {
+                      openDependenceDetail(packageItem.name);
+                    }}
                   >
-                    <div className=" text-second">
+                    <div className="text-second">
                       <span className="inline-block w-40 overflow-hidden overflow-ellipsis whitespace-nowrap">
                         {packageItem?.name}
                       </span>