From 643271df40d1be684b4f89311e91dac7eec6bdb0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:15:07 -0300
Subject: [PATCH] fix: component seems to be clickable (#2731)

* Changed card to not have shadow on hover if it is a component

* removed unused console.log
---
 .../src/components/cardComponent/index.tsx    | 19 +++----------------
 .../components/collectionCard/index.tsx       |  1 -
 .../components/componentsComponent/index.tsx  |  1 -
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 7fe406f88..0e6af1f35 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -43,7 +43,6 @@ export default function CollectionCardComponent({
   onDelete,
   playground,
   control,
-  is_component,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -53,7 +52,6 @@ export default function CollectionCardComponent({
   playground?: boolean;
   onDelete?: () => void;
   control?: Control<any, any>;
-  is_component?: boolean;
 }) {
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -73,7 +71,6 @@ export default function CollectionCardComponent({
   const setNodes = useFlowStore((state) => state.setNodes);
   const setEdges = useFlowStore((state) => state.setEdges);
   const [openPlayground, setOpenPlayground] = useState(false);
-  const [openDelete, setOpenDelete] = useState(false);
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
@@ -167,7 +164,9 @@ export default function CollectionCardComponent({
         data-testid={`card-${convertTestName(data.name)}`}
         //TODO check color schema
         className={cn(
-          "group relative flex h-[11rem] flex-col justify-between overflow-hidden hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#5f5f5f0e]",
+          "group relative flex h-[11rem] flex-col justify-between overflow-hidden",
+          !data.is_component &&
+            "hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#5f5f5f0e]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
           isSelectedCard ? "border border-selected" : "",
@@ -518,18 +517,6 @@ export default function CollectionCardComponent({
           <></>
         </IOModal>
       )}
-      {openDelete && (
-        <DeleteConfirmationModal
-          open={openDelete}
-          setOpen={setOpenDelete}
-          onConfirm={() => {
-            if (onDelete) onDelete();
-          }}
-          description={` ${is_component ? "component" : "flow"}`}
-        >
-          <></>
-        </DeleteConfirmationModal>
-      )}
     </>
   );
 }
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx
index 6553e6a82..729856069 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/components/collectionCard/index.tsx
@@ -47,7 +47,6 @@ const CollectionCard = ({ item, type, isLoading, control }) => {
 
   return (
     <CollectionCardComponent
-      is_component={type === "component"}
       data={{
         is_component: isComponent,
         ...item,
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index 69cce57e9..16077b4a8 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import CollectionCardComponent from "../../../../components/cardComponent";
 import CardsWrapComponent from "../../../../components/cardsWrapComponent";
 import IconComponent from "../../../../components/genericIconComponent";
 import PaginatorComponent from "../../../../components/paginatorComponent";