Add playground button to flow cards in MainPage (#1752)

* Add playground button to flow cards in MainPage

* Add IOModal component for playground functionality

* Update playground button styling

not working yet

src/frontend/src/components/cardComponent/index.tsx

@@ -25,11 +25,13 @@ export default function CollectionCardComponent({
   disabled = false,
   button,
   onDelete,
+  playground
 }: {
   data: storeComponent;
   authorized?: boolean;
   disabled?: boolean;
   button?: JSX.Element;
+  playground?:JSX.Element;
   onDelete?: () => void;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
@@ -345,6 +347,7 @@ export default function CollectionCardComponent({
               </div>
             )}
             {button && button}
+            {playground && playground}
           </div>
         </div>
       </CardFooter>

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -14,6 +14,7 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
 import { FlowType } from "../../../../types/flow";
+import IOModal from "../../../../modals/IOModal";
 
 export default function ComponentsComponent({
   is_component = true,
@@ -21,6 +22,7 @@ export default function ComponentsComponent({
   is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const setCurrentFlowId = useFlowsManagerStore((state) => state.setCurrentFlowId);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -31,6 +33,7 @@ export default function ComponentsComponent({
   const [pageSize, setPageSize] = useState(20);
   const [pageIndex, setPageIndex] = useState(1);
   const [loadingScreen, setLoadingScreen] = useState(true);
+  const [openPlayground, setOpenPlayground] = useState(false);
 
   const navigate = useNavigate();
 
@@ -75,9 +78,8 @@ export default function ComponentsComponent({
         })
           .then(() => {
             setSuccessData({
-              title: `${
+              title: `${is_component ? "Component" : "Flow"
-                is_component ? "Component" : "Flow"
+                } uploaded successfully`,
-              } uploaded successfully`,
             });
           })
           .catch((error) => {
@@ -142,9 +144,8 @@ export default function ComponentsComponent({
                     onDelete={() => {
                       removeFlow(item.id);
                       setSuccessData({
-                        title: `${
+                        title: `${item.is_component ? "Component" : "Flow"
-                          item.is_component ? "Component" : "Flow"
+                          } deleted successfully!`,
-                        } deleted successfully!`,
                       });
                       resetFilter();
                     }}
@@ -174,6 +175,33 @@ export default function ComponentsComponent({
                         <></>
                       )
                     }
+                    playground={
+                      !is_component ? (
+                        <IOModal open={openPlayground} setOpen={setOpenPlayground}>
+                          <Button
+                            tabIndex={-1}
+                            variant="outline"
+                            size="sm"
+                            className="whitespace-nowrap "
+                            data-testid={
+                              "playground-flow-button-" + item.id + "-" + idx
+                            }
+                            onClick={() => {
+                              setCurrentFlowId(item.id);
+                              setOpenPlayground(true);
+                            }}
+                          >
+                            <IconComponent
+                              name="ExternalLink"
+                              className="main-page-nav-button select-none"
+                            />
+                            Playground
+                          </Button>
+                        </IOModal>
+                      ) : (
+                        <></>
+                      )
+                    }
                   />
                 ))
               ) : (