chore: update resource select dialog (#999)

* chore: update resource select dialog

* chore: update

web/src/components/ResourcesSelectorDialog.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Tooltip } from "@mui/joy";
+import { Button, Checkbox } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useLoading from "../hooks/useLoading";
@@ -92,8 +92,8 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
         ) : (
           <div className="resource-table-container">
             <div className="fields-container">
-              <span className="field-text id-text">ID</span>
               <span className="field-text name-text">{t("resources.name")}</span>
+              <span className="field-text type-text">Type</span>
               <span></span>
             </div>
             {resources.length === 0 ? (
@@ -101,17 +101,11 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
             ) : (
               resources.map((resource, index) => (
                 <div key={resource.id} className="resource-container">
-                  <span className="field-text id-text">{resource.id}</span>
-                  <Tooltip placement="top-start" title={resource.filename}>
-                    <span className="field-text name-text">{resource.filename}</span>
-                  </Tooltip>
+                  <span className="field-text name-text cursor-pointer" onClick={() => handlePreviewBtnClick(resource)}>
+                    {resource.filename}
+                  </span>
+                  <span className="field-text type-text">{resource.type}</span>
                   <div className="flex justify-end">
-                    <Icon.Eye
-                      className=" text-left text-sm leading-6 px-1 mr-2 cursor-pointer hover:opacity-80"
-                      onClick={() => handlePreviewBtnClick(resource)}
-                    >
-                      {t("resources.preview")}
-                    </Icon.Eye>
                     <Checkbox checked={state.checkedArray[index]} onChange={() => handleCheckboxChange(index)} />
                   </div>
                 </div>
@@ -124,13 +118,7 @@ const ResourcesSelectorDialog: React.FC<Props> = (props: Props) => {
             {t("message.count-selected-resources")}: {state.checkedArray.filter((checked) => checked).length}
           </span>
           <div className="flex flex-row justify-start items-center">
-            <div
-              className="text-sm cursor-pointer px-3 py-1 rounded flex flex-row justify-center items-center border border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80"
-              onClick={handleConfirmBtnClick}
-            >
-              <Icon.PlusSquare className=" w-4 h-auto mr-1" />
-              <span>{t("common.confirm")}</span>
-            </div>
+            <Button onClick={handleConfirmBtnClick}>{t("common.confirm")}</Button>
           </div>
         </div>
       </div>

web/src/less/resources-selector-dialog.less

@@ -37,13 +37,13 @@
         .field-text {
           @apply w-full truncate text-base pr-2 last:pr-0;
 
-          &.id-text {
-            @apply col-span-2;
-          }
-
           &.name-text {
             @apply col-span-4;
           }
+
+          &.type-text {
+            @apply col-span-2;
+          }
         }
       }
     }