From 4f390a797c8ddc82fd88be517939bd5dfa954135 Mon Sep 17 00:00:00 2001 From: monilprajapati Date: Wed, 20 Nov 2024 23:36:09 +0530 Subject: [PATCH 1/5] Added the basic modal UI structure for the app modal --- frontend/src/components/AppModal.jsx | 311 +++++++++++++++++++++++++++ frontend/src/views/Apps2.jsx | 44 ++-- 2 files changed, 341 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/AppModal.jsx diff --git a/frontend/src/components/AppModal.jsx b/frontend/src/components/AppModal.jsx new file mode 100644 index 00000000..d2de9d74 --- /dev/null +++ b/frontend/src/components/AppModal.jsx @@ -0,0 +1,311 @@ +import React from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + IconButton, + Typography, + Box, + Button, + Stack, + Avatar, +} from '@mui/material'; + +import CloseIcon from '@mui/icons-material/Close'; +import EditIcon from '@mui/icons-material/Edit'; +import ForkRightIcon from '@mui/icons-material/ForkRight'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import LaunchIcon from '@mui/icons-material/Launch'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import { CloudDownloadOutlined } from '@mui/icons-material'; + +const AppModal = ({ open, onClose, data, userdata }) => { + + console.log("App data: ", data) + console.log("userdata: ", userdata) + + const isCloud = + window.location.host === "localhost:3002" || + window.location.host === "shuffler.io" || window.location.host === "localhost:3000" + ? true + : false; + + var newAppname = data?.name; + if (newAppname === undefined) { + newAppname = "Undefined"; + } else { + newAppname = newAppname.charAt(0).toUpperCase() + newAppname.substring(1); + newAppname = newAppname.replaceAll("_", " "); + } + + var canEditApp = userdata.admin === "true" || userdata.id === data?.owner || data?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === data?.reference_org) || !data?.generated + + + return ( + + + + About Gmail + + + + + + + + + +
+ {data?.name} +
+
+ + {newAppname} + + { + isCloud && ( + + + + + + ) + } +
+ + {data?.categories ? data.categories.join(", ") : "Communication"} + +
+
+
+ + +
+ + +
+
+ + 20 + + + Public Workflow + +
+
+ + {data?.actions?.length} + + + Actions + +
+
+
+ + + Google Collection + +
+ + Part of a collection + +
+
+ +
+
+ Connect Gmail to Jira +
+ + + + + + + + Email management + + +
+ +
+ +
+ + + ); +}; + +export default AppModal; \ No newline at end of file diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx index 079d4b2e..01d9ad26 100644 --- a/frontend/src/views/Apps2.jsx +++ b/frontend/src/views/Apps2.jsx @@ -25,6 +25,7 @@ import { toast } from "react-toastify"; import algoliasearch from "algoliasearch/lite"; import { debounce } from "lodash"; import AppSelection from "../components/AppSelection.jsx"; +import AppModal from "../components/AppModal.jsx"; const searchClient = algoliasearch( @@ -33,7 +34,7 @@ const searchClient = algoliasearch( ); // AppCard Component -const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab }) => { +const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab, handleAppClick }) => { const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000"; const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`; @@ -51,12 +52,12 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, return ( - setMouseHoverIndex(index)} + setMouseHoverIndex(index)} onMouseOut={() => setMouseHoverIndex(-1)} > - {/* Deactivate button */} {currTab === 0 && !deactivatedIndexes.includes(index) && mouseHoverIndex === index && data.generated === true && ( - + ) : ( + - ) : ( - - )} - - )} - + onClick={(event) => { + handleActivateButton(event, data, "activate"); + }} + > + Activate + + )} + + )} - - - - + + + + ); })} @@ -981,12 +977,12 @@ const Apps2 = (props) => { return ( - +
Apps @@ -1153,7 +1149,9 @@ const Apps2 = (props) => { {appsToShow?.length > 0 && appsToShow !== undefined ? (
{appsToShow.map((data, index) => ( - + ))}
) : ( @@ -1172,6 +1170,7 @@ const Apps2 = (props) => { Date: Sat, 23 Nov 2024 18:57:00 +0530 Subject: [PATCH 4/5] fix: usecases page crash due to oauth2-app auth type --- frontend/src/components/ConfigureWorkflow.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/ConfigureWorkflow.jsx b/frontend/src/components/ConfigureWorkflow.jsx index e12ba76d..ea8af7bd 100755 --- a/frontend/src/components/ConfigureWorkflow.jsx +++ b/frontend/src/components/ConfigureWorkflow.jsx @@ -324,7 +324,7 @@ const ConfigureWorkflow = (props) => { } } - if (app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app") { + if (app?.authentication?.type === "oauth2" || app?.authentication?.type === "oauth2-app") { filled = false action.auth_type = "oauth2" @@ -848,7 +848,7 @@ const ConfigureWorkflow = (props) => { {opened ?
- {action.app.authentication.type === "oauth2-app" || action.app.authentication.type === "oauth2" || action.auth_type === "oauth2" ? + {action.app?.authentication?.type === "oauth2-app" || action.app?.authentication?.type === "oauth2" || action.auth_type === "oauth2" ?
{ ) })} - {action.app.authentication.type !== "oauth2-app" && action.app.authentication.type !== "oauth2" ? + {action.app?.authentication?.type !== "oauth2-app" && action.app?.authentication?.type !== "oauth2" ?
{ mb: 3 }}> - - + { + foundAppUsecase === undefined ? ( + + + + ) : ( + + ) + } + { + foundAppUsecase === undefined ? ( + + + + ) : ( + + ) + } - - Email management + + {foundAppUsecase?.name || "Search for a Usecase"}
diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx index 2a8ebe3d..7011be79 100644 --- a/frontend/src/views/Apps2.jsx +++ b/frontend/src/views/Apps2.jsx @@ -939,7 +939,6 @@ const Apps2 = (props) => { queryParams.set('tab', newQueryParam); queryParams.delete('q'); window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`); - console.log("Apps to show", appsToShow) }; @@ -982,6 +981,7 @@ const Apps2 = (props) => { onClose={handleAppModalClose} app={selectedApp} userdata={userdata} + globalUrl={globalUrl} />
diff --git a/frontend/src/views/LoginPage.jsx b/frontend/src/views/LoginPage.jsx index 30655d1a..c1498b7e 100755 --- a/frontend/src/views/LoginPage.jsx +++ b/frontend/src/views/LoginPage.jsx @@ -183,7 +183,10 @@ const LoginDialog = (props) => { if (responseJson.tutorials === undefined || responseJson.tutorials === null || !responseJson.tutorials.includes("welcome")) { console.log("RUN Welcome!!") - window.location.pathname = "/welcome?tab=2" + setTimeout(() => { + navigate("/welcome?tab=2") + },200) + // window.location.pathname = "" return }