diff --git a/apps/webapp/app/components/integrations/ProjectConnectSelect.tsx b/apps/webapp/app/components/integrations/ProjectConnectSelect.tsx new file mode 100644 index 00000000000..bf386cf12b0 --- /dev/null +++ b/apps/webapp/app/components/integrations/ProjectConnectSelect.tsx @@ -0,0 +1,67 @@ +import { useNavigation } from "@remix-run/react"; +import { useEffect, useState } from "react"; +import { ChevronExtraSmallDown } from "~/assets/icons/ChevronExtraSmallDown"; +import { DropdownIcon } from "~/assets/icons/DropdownIcon"; +import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon"; +import { + Popover, + PopoverContent, + PopoverMenuItem, + PopoverTrigger, +} from "~/components/primitives/Popover"; + +type ConnectableProject = { id: string; slug: string; name: string }; + +const MENU_LABEL = "text-[0.90625rem] font-medium tracking-[-0.01em]"; + +export function ProjectConnectSelect({ + projects, + configurePathFor, +}: { + projects: ConnectableProject[]; + configurePathFor: (project: ConnectableProject) => string; +}) { + const [isOpen, setIsOpen] = useState(false); + const navigation = useNavigation(); + + useEffect(() => { + // oxlint-disable-next-line react/set-state-in-effect -- sync menu state after navigation. + setIsOpen(false); + }, [navigation.location?.pathname]); + + if (projects.length === 0) { + return null; + } + + return ( + + + Select project to configure + + + +
+ {projects.map((project) => ( + + {project.name} + + + } + icon={FolderClosedIcon} + leadingIconClassName="h-5 w-5 text-indigo-500" + className={MENU_LABEL} + /> + ))} +
+ + + ); +} diff --git a/apps/webapp/app/components/primitives/DateTime.tsx b/apps/webapp/app/components/primitives/DateTime.tsx index a3e75543a07..4df24322a49 100644 --- a/apps/webapp/app/components/primitives/DateTime.tsx +++ b/apps/webapp/app/components/primitives/DateTime.tsx @@ -112,6 +112,7 @@ export const DateTime = ({ } side="right" asChild={true} + delayDuration={500} /> ); }; @@ -291,6 +292,7 @@ const DateTimeAccurateInner = ({ content={tooltipContent} side="right" asChild={true} + delayDuration={500} /> ); }; @@ -389,6 +391,7 @@ export const RelativeDateTime = ({ date, timeZone, capitalize = true }: Relative } side="right" asChild={true} + delayDuration={500} /> ); }; diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx index ca51044da84..d93a1d66801 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.slack.tsx @@ -4,9 +4,8 @@ import { Form, useActionData, useNavigation } from "@remix-run/react"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; import { DialogClose } from "@radix-ui/react-dialog"; -import { TrashIcon } from "@heroicons/react/20/solid"; -import { BugIcon } from "~/assets/icons/BugIcon"; import { SlackMonoIcon } from "~/assets/icons/SlackMonoIcon"; +import { ProjectConnectSelect } from "~/components/integrations/ProjectConnectSelect"; import { Button } from "~/components/primitives/Buttons"; import { DateTime } from "~/components/primitives/DateTime"; import { @@ -18,15 +17,16 @@ import { DialogTrigger, } from "~/components/primitives/Dialog"; import { FormButtons } from "~/components/primitives/FormButtons"; -import { Header2, Header3 } from "~/components/primitives/Headers"; -import { Hint } from "~/components/primitives/Hint"; -import { - MainHorizontallyCenteredContainer, - PageBody, - PageContainer, -} from "~/components/layout/AppLayout"; +import { Header2 } from "~/components/primitives/Headers"; +import { PageBody, PageContainer } from "~/components/layout/AppLayout"; import { NavBar, PageTitle } from "~/components/primitives/PageHeader"; import { Paragraph } from "~/components/primitives/Paragraph"; +import { + SettingsContainer, + SettingsHeader, + SettingsRow, + SettingsSection, +} from "~/components/primitives/SettingsLayout"; import { Table, TableBody, @@ -38,7 +38,12 @@ import { import { EnabledStatus } from "~/components/runs/v3/EnabledStatus"; import { $transaction, prisma } from "~/db.server"; import { requireOrganization } from "~/services/org.server"; -import { OrganizationParamsSchema, organizationSlackIntegrationPath } from "~/utils/pathBuilder"; +import { + OrganizationParamsSchema, + organizationSlackIntegrationPath, + v3ErrorsPath, +} from "~/utils/pathBuilder"; +import { useOrganization } from "~/hooks/useOrganizations"; import { logger } from "~/services/logger.server"; import { pageMeta } from "~/utils/pageTitle"; @@ -191,6 +196,9 @@ export default function SlackIntegrationPage() { const isUninstalling = navigation.state === "submitting" && navigation.formData?.get("intent") === "uninstall"; + const organization = useOrganization(); + const projects = organization.projects; + if (!slackIntegration) { return ( @@ -202,11 +210,17 @@ export default function SlackIntegrationPage() { No Slack integration found - Your organization doesn't have a Slack integration configured. You can connect Slack - when setting up alerts from the{" "} - - Errors page. + Your organization doesn't have a Slack integration. Connect Slack when setting up + alerts from the Errors page. + {projects.length > 0 ? ( + + `${v3ErrorsPath(organization, project, { slug: "prod" })}?alerts=true` + } + /> + ) : null} @@ -219,127 +233,108 @@ export default function SlackIntegrationPage() { - -
-
-
- Integration details -
-
- {teamName && ( - - Workspace:{" "} - {teamName} - - )} - - Installed:{" "} - - - - -
-
+ + + + {teamName ? ( + {teamName}} + /> + ) : null} + + + + } + /> + + + + + + + + Remove Slack integration + + + This will remove the Slack integration and disable all connected alert + channels. This action cannot be undone. + + + + + + } + cancelButton={ + + + + } + /> + + + {actionData?.error ? ( + + {actionData.error} + + ) : null} +
+ } + /> + -
- - Connected alert channels - ({alertChannels.length}) - - {alertChannels.length === 0 ? ( - - No alert channels are currently connected to this Slack integration. - - ) : ( - - - - Channel - Project - Status - Created + + + {alertChannels.length === 0 ? ( + + No alert channels are connected to this Slack integration yet. + + ) : ( +
+ + + Channel + Project + Status + Created + + + + {alertChannels.map((channel) => ( + + {channel.name} + {channel.project.name} + + + + + + - - - {alertChannels.map((channel) => ( - - {channel.name} - {channel.project.name} - - - - - - - - ))} - -
- )} -
- -
- Danger zone -
- Remove integration - - This will remove the Slack integration and disable all connected alert channels. - This action cannot be undone. - - {actionData?.error && ( - - {actionData.error} - - )} - - - - - - - Remove Slack integration - - - This will remove the Slack integration and disable all connected alert - channels. This action cannot be undone. - - - - - - } - cancelButton={ - - - - } - /> - - - } - /> -
-
- - + ))} + + + )} + + ); diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx index 15241df2fb3..3df17cb75bc 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx @@ -1,4 +1,4 @@ -import { TrashIcon } from "@heroicons/react/20/solid"; +import { Cog6ToothIcon } from "@heroicons/react/24/outline"; import { DialogClose } from "@radix-ui/react-dialog"; import type { LoaderFunctionArgs } from "@remix-run/node"; import { json, redirect } from "@remix-run/node"; @@ -6,6 +6,8 @@ import { Form, useActionData, useNavigation } from "@remix-run/react"; import { fromPromise } from "neverthrow"; import { typedjson, useTypedLoaderData } from "remix-typedjson"; import { z } from "zod"; +import { ProjectConnectSelect } from "~/components/integrations/ProjectConnectSelect"; +import { VercelLogo } from "~/components/integrations/VercelLogo"; import { PageBody, PageContainer } from "~/components/layout/AppLayout"; import { Button, LinkButton } from "~/components/primitives/Buttons"; import { @@ -16,9 +18,19 @@ import { DialogTitle, DialogTrigger, } from "~/components/primitives/Dialog"; +import { CopyableText } from "~/components/primitives/CopyableText"; +import { DateTime } from "~/components/primitives/DateTime"; import { FormButtons } from "~/components/primitives/FormButtons"; -import { Header1 } from "~/components/primitives/Headers"; +import { Header2 } from "~/components/primitives/Headers"; +import { NavBar, PageTitle } from "~/components/primitives/PageHeader"; import { Paragraph } from "~/components/primitives/Paragraph"; +import { + SettingsContainer, + SettingsHeader, + SettingsRow, + SettingsSection, +} from "~/components/primitives/SettingsLayout"; +import { SimpleTooltip } from "~/components/primitives/Tooltip"; import { Table, TableBody, @@ -36,21 +48,10 @@ import { rbac } from "~/services/rbac.server"; import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder"; import { OrganizationParamsSchema, v3ProjectSettingsIntegrationsPath } from "~/utils/pathBuilder"; import { pageMeta } from "~/utils/pageTitle"; +import { useOrganization } from "~/hooks/useOrganizations"; export const meta = pageMeta("Vercel integration"); -function formatDate(date: Date): string { - return new Intl.DateTimeFormat("en-US", { - month: "short", - day: "numeric", - year: "numeric", - hour: "numeric", - minute: "2-digit", - second: "2-digit", - hour12: true, - }).format(date); -} - export const loader = async ({ request, params }: LoaderFunctionArgs) => { const { organizationSlug } = OrganizationParamsSchema.parse(params); const url = new URL(request.url); @@ -259,15 +260,30 @@ export default function VercelIntegrationPage() { const isUninstalling = navigation.state === "submitting" && navigation.formData?.get("intent") === "uninstall"; + const { projects } = useOrganization(); + if (!vercelIntegration) { return ( + + + -
- No Vercel Integration Found - - This organization doesn't have a Vercel integration configured. +
+ + No Vercel integration found + + Your organization doesn't have a Vercel integration. Configure it in your projects + integrations page. + {projects.length > 0 ? ( + + v3ProjectSettingsIntegrationsPath(organization, project, { slug: "prod" }) + } + /> + ) : null}
@@ -276,139 +292,157 @@ export default function VercelIntegrationPage() { return ( + + + -
- Vercel Integration - - Manage your organization's Vercel integration and connected projects. - -
- - {/* Integration Info Section */} -
-
-
-

Integration Details

-
- {teamId && ( -
- Vercel Team ID: {teamId} -
- )} - {installationId && ( -
- Installation ID: {installationId} -
- )} -
- Installed:{" "} - {formatDate(new Date(vercelIntegration.createdAt))} -
-
-
-
- - - - - - - Remove Vercel Integration - - - This will permanently remove the Vercel integration and disconnect all projects. - This action cannot be undone. - - - - - - } - cancelButton={ - - - - } + + + + {teamId ? ( + - - - {actionData?.error && ( - - {actionData.error} - - )} -
-
-
- - {/* Connected Projects Section */} -
-

- Connected Projects ({connectedProjects.length}) -

+ } + /> + ) : null} + {installationId ? ( + + } + /> + ) : null} + + + + } + /> + + + + + + + + Remove Vercel integration + + + This will permanently remove the Vercel integration and disconnect all + projects. This action cannot be undone. + + + + + + } + cancelButton={ + + + + } + /> + + + {actionData?.error ? ( + + {actionData.error} + + ) : null} +
+ } + /> + - {connectedProjects.length === 0 ? ( -
- - No projects are currently connected to this Vercel integration. + + + {connectedProjects.length === 0 ? ( + + No projects are connected to this Vercel integration yet. -
- ) : ( - - - - Project Name - Vercel Project ID - Connected - Actions - - - - {connectedProjects.map((projectIntegration) => ( - - {projectIntegration.project.name} - - {projectIntegration.externalEntityId} - - {formatDate(new Date(projectIntegration.createdAt))} - - - Configure - - + ) : ( +
+ + + Project name + Vercel project ID + Connected + Actions - ))} - -
- )} -
+ + + {connectedProjects.map((projectIntegration) => ( + + {projectIntegration.project.name} + + {projectIntegration.externalEntityId} + + + + + + + + + } + /> + + + ))} + + + )} + + );