Start on select on integration (#765)

* Start on select on integration * Test fixes * Further work * Updates to buttons * Stepper redesign * Add integration to setup connection * Lint fix * Test updates
grai-io · Nov 2, 2023 · dca1263 · dca1263
1 parent 01c456d
commit dca1263
Show file tree

Hide file tree

Showing 24 changed files with 539 additions and 463 deletions.
diff --git a/grai-frontend/src/components/chat/WebsocketChat.test.tsx b/grai-frontend/src/components/chat/WebsocketChat.test.tsx
@@ -32,23 +32,23 @@ test("type", async () => {
 
   expect(screen.getByRole("textbox")).toBeInTheDocument()
 
-  user.type(screen.getByRole("textbox"), "He")
+  user.type(screen.getByRole("textbox"), "H")
 
-  await waitFor(() => expect(screen.getByRole("textbox")).toHaveValue("He"))
+  await waitFor(() => expect(screen.getByRole("textbox")).toHaveValue("H"))
 
   user.type(screen.getByRole("textbox"), "{enter}")
 
   await waitFor(() => expect(screen.getByRole("textbox")).toHaveValue(""))
 
-  expect(screen.getByText("He")).toBeInTheDocument()
+  expect(screen.getByText("H")).toBeInTheDocument()
 })
 
 test("receive", async () => {
   render(<WebsocketChat workspace={workspace} />)
 
   await server.connected
 
-  await act(async () => server.send(JSON.stringify({ message: "He" })))
+  await act(async () => server.send(JSON.stringify({ message: "H" })))
 
-  await screen.findByText("He")
+  await screen.findByText("H")
 })
diff --git a/grai-frontend/src/components/connections/connectors/ConnectorCard.test.tsx b/grai-frontend/src/components/connections/connectors/ConnectorCard.test.tsx
@@ -12,6 +12,7 @@ test("renders", async () => {
         id: "1",
         name: "connector 1",
         metadata: null,
+        icon: null,
       }}
       onSelect={onSelect}
     />,
@@ -29,13 +30,36 @@ test("coming soon", async () => {
         name: "connector 1",
         metadata: null,
         status: "coming_soon",
+        icon: null,
       }}
       onSelect={onSelect}
     />,
     {
       withRouter: true,
     },
   )
+
+  expect(screen.getByText(/Coming soon/i)).toBeInTheDocument()
+})
+
+test("alpha", async () => {
+  render(
+    <ConnectorCard
+      connector={{
+        id: "1",
+        name: "connector 1",
+        metadata: null,
+        status: "alpha",
+        icon: null,
+      }}
+      onSelect={() => {}}
+    />,
+    {
+      withRouter: true,
+    },
+  )
+
+  expect(screen.getByText(/alpha/i)).toBeInTheDocument()
 })
 
 test("click", async () => {
@@ -47,6 +71,7 @@ test("click", async () => {
         id: "1",
         name: "connector 1",
         metadata: null,
+        icon: null,
       }}
       onSelect={onSelect}
     />,
@@ -72,6 +97,7 @@ test("to", async () => {
         name: "connector 1",
         metadata: null,
         to: "a",
+        icon: null,
       }}
       onSelect={onSelect}
     />,

diff --git a/grai-frontend/src/components/connections/connectors/ConnectorCard.tsx b/grai-frontend/src/components/connections/connectors/ConnectorCard.tsx
@@ -10,11 +10,12 @@ import {
   Typography,
 } from "@mui/material"
 import { useNavigate } from "react-router-dom"
+import ConnectorIcon from "./ConnectorIcon"
 
 export interface Connector {
   id: string
   name: string
-  icon?: string | null | ReactNode
+  icon: string | null | ReactNode
   status?: string
   metadata: any
   to?: string
@@ -31,9 +32,18 @@ const ConnectorCard: React.FC<ConnectorCardProps> = ({
 }) => {
   const navigate = useNavigate()
 
+  const comingSoon = connector.status === "coming_soon"
+
   return (
     <Box>
-      <Card variant="outlined">
+      <Card
+        variant="outlined"
+        sx={{
+          borderRadius: "20px",
+          border: comingSoon ? "1px solid rgba(0, 0, 0, 0.08)" : undefined,
+          height: "88px",
+        }}
+      >
         <CardActionArea
           onClick={() => {
             if (connector.to) {
@@ -42,59 +52,55 @@ const ConnectorCard: React.FC<ConnectorCardProps> = ({
             }
             onSelect(connector)
           }}
-          className="connector-card"
+          sx={{ height: "100%" }}
         >
           <List>
-            <ListItem>
-              <ListItemIcon sx={{ minWidth: 45 }}>
-                {connector.icon &&
-                  (typeof connector.icon === "string" ? (
-                    <img
-                      src={connector.icon}
-                      alt={`${connector.name} logo`}
-                      style={{ height: 28, width: 28 }}
-                    />
-                  ) : (
-                    connector.icon
-                  ))}
+            <ListItem sx={{ pl: "20px" }}>
+              <ListItemIcon sx={{ minWidth: 48 }}>
+                {connector.icon && <ConnectorIcon connector={connector} />}
               </ListItemIcon>
               <ListItemText
                 primary={
-                  <Typography variant="body2">{connector.name}</Typography>
+                  <Typography
+                    variant="body1"
+                    sx={{
+                      fontWeight: 500,
+                      color: comingSoon ? "#AFAFAF" : undefined,
+                    }}
+                  >
+                    {connector.name}
+                  </Typography>
                 }
               />
             </ListItem>
           </List>
         </CardActionArea>
       </Card>
-      {connector.status !== "general_release" && (
-        <Box
-          sx={{
-            position: "relative",
-            top: -75,
-            right: -155,
-            width: 130,
-            textAlign: "center",
-            // height: 100,
-            borderWidth: 1,
-            borderStyle: "solid",
-            borderColor: "divider",
-            borderRadius: 1,
-            backgroundColor: theme => theme.palette.grey[100],
-          }}
-        >
-          <Typography
-            variant="body2"
+      {connector.status &&
+        ["coming_soon", "alpha"].includes(connector.status) && (
+          <Box
             sx={{
-              m: 0.3,
-              color: theme => theme.palette.grey[500],
-              textTransform: "uppercase",
+              position: "relative",
+              top: -105,
+              right: comingSoon ? -220 : -275,
+              width: "fit-content",
+              textAlign: "center",
+              px: "12px",
+              py: "6px",
+              borderRadius: "100px",
+              background: "#f4edff",
             }}
           >
-            {connector.status?.replace("_", " ")}
-          </Typography>
-        </Box>
-      )}
+            <Typography
+              variant="body2"
+              sx={{
+                textTransform: "capitalize",
+              }}
+            >
+              {connector.status?.replace("_", " ")}
+            </Typography>
+          </Box>
+        )}
     </Box>
   )
 }

diff --git a/grai-frontend/src/components/connections/connectors/ConnectorIcon.tsx b/grai-frontend/src/components/connections/connectors/ConnectorIcon.tsx
@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react"
+
+export interface Connector {
+  icon: string | ReactNode
+  name: string
+}
+
+type ConnectorIconProps = {
+  connector: Connector
+}
+
+const ConnectorIcon: React.FC<ConnectorIconProps> = ({ connector }) => {
+  if (typeof connector.icon === "string")
+    return (
+      <img
+        src={connector.icon}
+        alt={`${connector.name} logo`}
+        style={{ height: 28, width: 28 }}
+      />
+    )
+
+  return <>{connector.icon}</>
+}
+
+export default ConnectorIcon
diff --git a/grai-frontend/src/components/connections/connectors/ConnectorList.tsx b/grai-frontend/src/components/connections/connectors/ConnectorList.tsx
@@ -1,30 +1,23 @@
 import React from "react"
-import { Typography, Grid } from "@mui/material"
+import { Grid } from "@mui/material"
 import ConnectorCard, { Connector } from "./ConnectorCard"
 
 type ConnectorListProps = {
-  title: string
   connectors: Connector[]
   onSelect: (connector: Connector) => void
 }
 
 const ConnectorList: React.FC<ConnectorListProps> = ({
-  title,
   connectors,
   onSelect,
 }) => (
-  <>
-    <Typography variant="h6" sx={{ mt: 5, mb: 3, textTransform: "capitalize" }}>
-      {title}
-    </Typography>
-    <Grid container spacing={2}>
-      {connectors.map(connector => (
-        <Grid item md={3} key={connector.id}>
-          <ConnectorCard connector={connector} onSelect={onSelect} />
-        </Grid>
-      ))}
-    </Grid>
-  </>
+  <Grid container spacing={2}>
+    {connectors.map(connector => (
+      <Grid item md={3} key={connector.id}>
+        <ConnectorCard connector={connector} onSelect={onSelect} />
+      </Grid>
+    ))}
+  </Grid>
 )
 
 export default ConnectorList
diff --git a/grai-frontend/src/components/connections/create/ConnectionFile.tsx b/grai-frontend/src/components/connections/create/ConnectionFile.tsx
@@ -103,7 +103,7 @@ const ConnectionFile: React.FC<ConnectionFileProps> = ({
       },
     })
       .then(res =>
-        workspaceNavigate(`runs/${res.data?.uploadConnectorFile.id}`)
+        workspaceNavigate(`runs/${res.data?.uploadConnectorFile.id}`),
       )
       .then(() => enqueueSnackbar("File uploaded"))
       .catch(() => {})
@@ -120,8 +120,8 @@ const ConnectionFile: React.FC<ConnectionFileProps> = ({
   return (
     <Form onSubmit={handleSubmit}>
       <WizardSubtitle
-        title={`Connect to ${connector?.name}`}
-        icon={connector?.icon}
+        title="Setup connection"
+        subTitle="Choose a file to upload"
       />
       <Grid container sx={{ mt: 5 }}>
         <Grid item md={8} sx={{ pr: 3 }}>
@@ -154,22 +154,26 @@ const ConnectionFile: React.FC<ConnectionFileProps> = ({
             onChange={file => setValues({ ...values, file })}
             accept={accept}
           />
+          <WizardBottomBar opts={opts}>
+            <LoadingButton
+              variant="contained"
+              type="submit"
+              sx={{
+                minWidth: 120,
+                backgroundColor: "#FC6016",
+                boxShadow: "0px 4px 6px 0px rgba(252, 96, 22, 0.20)",
+              }}
+              disabled={!values.file}
+              loading={loading}
+            >
+              Finish
+            </LoadingButton>
+          </WizardBottomBar>
         </Grid>
         <Grid item md={4} sx={{}}>
           <CreateConnectionHelp connector={connector} />
         </Grid>
       </Grid>
-      <WizardBottomBar opts={opts}>
-        <LoadingButton
-          variant="contained"
-          type="submit"
-          sx={{ minWidth: 120 }}
-          disabled={!values.file}
-          loading={loading}
-        >
-          Finish
-        </LoadingButton>
-      </WizardBottomBar>
     </Form>
   )
 }

diff --git a/grai-frontend/src/components/connections/create/ConnectorCategoryTabs.tsx b/grai-frontend/src/components/connections/create/ConnectorCategoryTabs.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import { Tab, Tabs } from "@mui/material"
+
+type ConnectorCategoryTabsProps = {
+  categories: string[]
+  value: string | null
+  onChange: (value: string | null) => void
+}
+
+const ConnectorCategoryTabs: React.FC<ConnectorCategoryTabsProps> = ({
+  categories,
+  value,
+  onChange,
+}) => {
+  return (
+    <Tabs value={value} onChange={(_, newValue) => onChange(newValue)}>
+      <Tab label="All Integrations" value={null} />
+      {categories.map(category => (
+        <Tab
+          label={category}
+          value={category}
+          key={category}
+          sx={{ textTransform: "capitalize" }}
+        />
+      ))}
+    </Tabs>
+  )
+}
+
+export default ConnectorCategoryTabs