-
-
Notifications
You must be signed in to change notification settings - Fork 643
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
V3 CLI started, with Personal Access Tokens and Who Am I (#841)
* Initial CLI commit * Hooked up the CLI so it actually shows stuff… * Totally reworked the v3 CLI to be based on our existing CLI (Commander) * WIP on PersonalAccessTokens and AuthorizationCodes * WIP creating a Personal Access Tokens page. Created a new sidenav for account pages * Creating tokens is working but the form is broken * Tokens are created in the UI * Creating and revoking access tokens from the UI is working * Improved the create form and copy * Tokens are a bit shorter and only lowercase * API endpoint for creating AuthorizationCodes and the web page users hit to create PATs from them * V3_ENABLED env var and hook that can be used in the UI to show/hide things * API route to get a PAT (within 10 mins of creating an auth code). Moved some code to core * Start to build the login command * Nicer banner when starting the CLI * Nicer update checking * Update command style improved * Removed the template step * Login command options are now working * The new CLI is logging in using the Personal Access TOken. But I need to save it still * Logging in and saving the token is working * Deal with already being logged in * Who Am I working with PAT * Deleted old account side menu header * Improved the copy on the Auth code page * Added docs for the login and whoami commands * Added readme instructions for the update command * Removed some unused things * Remove fetchUseProxy for now
- Loading branch information
1 parent
3bb82ed
commit 1bbd7e6
Showing
59 changed files
with
3,295 additions
and
353 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
apps/webapp/app/components/navigation/AccountSideMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import { Link } from "@remix-run/react"; | ||
| import { User } from "@trigger.dev/database"; | ||
| import { cn } from "~/utils/cn"; | ||
| import { accountPath, personalAccessTokensPath, rootPath } from "~/utils/pathBuilder"; | ||
| import { Header3 } from "../primitives/Headers"; | ||
| import { ArrowLeftIcon, ChevronLeftIcon } from "@heroicons/react/24/solid"; | ||
| import { SideMenuHeader } from "./SideMenuHeader"; | ||
| import { SideMenuItem } from "./SideMenuItem"; | ||
| import { DiscordIcon } from "@trigger.dev/companyicons"; | ||
| import { Feedback } from "../Feedback"; | ||
| import { Button, LinkButton } from "../primitives/Buttons"; | ||
| import { ShieldCheckIcon } from "@heroicons/react/20/solid"; | ||
| import { useV3Enabled } from "~/root"; | ||
|
|
||
| export function AccountSideMenu({ user }: { user: User }) { | ||
| const v3Enabled = useV3Enabled(); | ||
|
|
||
| return ( | ||
| <div | ||
| className={cn( | ||
| "flex h-full flex-col gap-y-8 overflow-hidden border-r border-ui-border transition" | ||
| )} | ||
| > | ||
| <div className="flex h-full flex-col"> | ||
| <div | ||
| className={cn("flex items-center justify-between border-b bg-background p-px transition")} | ||
| > | ||
| <LinkButton | ||
| variant="tertiary/medium" | ||
| LeadingIcon={ArrowLeftIcon} | ||
| to={rootPath()} | ||
| fullWidth | ||
| textAlignLeft | ||
| > | ||
| Account | ||
| </LinkButton> | ||
| </div> | ||
| <div className="h-full overflow-hidden overflow-y-auto pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700"> | ||
| <div className="mb-6 flex flex-col gap-1 px-1"> | ||
| <SideMenuHeader title={user.name ?? user.displayName ?? user.email} /> | ||
|
|
||
| <SideMenuItem | ||
| name="Your profile" | ||
| icon="account" | ||
| iconColor="text-indigo-500" | ||
| to={accountPath()} | ||
| data-action="account" | ||
| /> | ||
| </div> | ||
| {v3Enabled && ( | ||
| <div className="mb-1 flex flex-col gap-1 px-1"> | ||
| <SideMenuHeader title="Security" /> | ||
| <SideMenuItem | ||
| name="Personal Access Tokens" | ||
| icon={ShieldCheckIcon} | ||
| iconColor="text-emerald-500" | ||
| to={personalAccessTokensPath()} | ||
| data-action="tokens" | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div className="flex flex-col gap-1 border-t border-border p-1"> | ||
| <SideMenuItem | ||
| name="Join our Discord" | ||
| icon={DiscordIcon} | ||
| to="https://trigger.dev/discord" | ||
| data-action="join our discord" | ||
| target="_blank" | ||
| /> | ||
|
|
||
| <SideMenuItem | ||
| name="Documentation" | ||
| icon="docs" | ||
| to="https://trigger.dev/docs" | ||
| data-action="documentation" | ||
| target="_blank" | ||
| /> | ||
| <SideMenuItem | ||
| name="Changelog" | ||
| icon="star" | ||
| to="https://trigger.dev/changelog" | ||
| data-action="changelog" | ||
| target="_blank" | ||
| /> | ||
|
|
||
| <Feedback | ||
| button={ | ||
| <Button | ||
| variant="small-menu-item" | ||
| LeadingIcon="log" | ||
| data-action="help & feedback" | ||
| fullWidth | ||
| textAlignLeft | ||
| > | ||
| Help & Feedback | ||
| </Button> | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { useNavigation } from "@remix-run/react"; | ||
| import { useEffect, useState } from "react"; | ||
| import { Paragraph } from "../primitives/Paragraph"; | ||
| import { Popover, PopoverContent, PopoverCustomTrigger } from "../primitives/Popover"; | ||
| import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid"; | ||
|
|
||
| export function SideMenuHeader({ title, children }: { title: string; children?: React.ReactNode }) { | ||
| const [isHeaderMenuOpen, setHeaderMenuOpen] = useState(false); | ||
| const navigation = useNavigation(); | ||
|
|
||
| useEffect(() => { | ||
| setHeaderMenuOpen(false); | ||
| }, [navigation.location?.pathname]); | ||
|
|
||
| return ( | ||
| <div className="group flex items-center justify-between pl-1.5"> | ||
| <Paragraph | ||
| variant="extra-extra-small/caps" | ||
| className="cursor-default truncate text-slate-500" | ||
| > | ||
| {title} | ||
| </Paragraph> | ||
| {children !== undefined ? ( | ||
| <Popover onOpenChange={(open) => setHeaderMenuOpen(open)} open={isHeaderMenuOpen}> | ||
| <PopoverCustomTrigger className="p-1"> | ||
| <EllipsisHorizontalIcon className="h-4 w-4 text-slate-500 transition group-hover:text-bright" /> | ||
| </PopoverCustomTrigger> | ||
| <PopoverContent | ||
| className="min-w-max overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-700" | ||
| align="start" | ||
| > | ||
| <div className="flex flex-col gap-1 p-1">{children}</div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) : null} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { AnchorHTMLAttributes } from "react"; | ||
| import { usePathName } from "~/hooks/usePathName"; | ||
| import { cn } from "~/utils/cn"; | ||
| import { LinkButton } from "../primitives/Buttons"; | ||
| import { IconNames } from "../primitives/NamedIcon"; | ||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip"; | ||
| import { Icon } from "../primitives/Icon"; | ||
| import { IconExclamationCircle } from "@tabler/icons-react"; | ||
|
|
||
| export function SideMenuItem({ | ||
| icon, | ||
| iconColor, | ||
| name, | ||
| to, | ||
| hasWarning, | ||
| count, | ||
| target, | ||
| subItem = false, | ||
| }: { | ||
| icon?: IconNames | React.ComponentType<any>; | ||
| iconColor?: string; | ||
| name: string; | ||
| to: string; | ||
| hasWarning?: string | boolean; | ||
| count?: number; | ||
| target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"]; | ||
| subItem?: boolean; | ||
| }) { | ||
| const pathName = usePathName(); | ||
| const isActive = pathName === to; | ||
|
|
||
| return ( | ||
| <LinkButton | ||
| variant={subItem ? "small-menu-sub-item" : "small-menu-item"} | ||
| fullWidth | ||
| textAlignLeft | ||
| LeadingIcon={icon} | ||
| leadingIconClassName={isActive ? iconColor : "text-dimmed"} | ||
| to={to} | ||
| target={target} | ||
| className={cn( | ||
| "text-bright group-hover:bg-slate-850", | ||
| subItem ? "text-dimmed" : "", | ||
| isActive ? "bg-slate-850 text-bright" : "group-hover:text-bright" | ||
| )} | ||
| > | ||
| <div className="flex w-full items-center justify-between"> | ||
| {name} | ||
| <div className="flex items-center gap-1"> | ||
| {count !== undefined && count > 0 && <MenuCount count={count} />} | ||
| {typeof hasWarning === "string" ? ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" /> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="flex items-center gap-1 border border-rose-500 bg-rose-500/20 backdrop-blur-xl"> | ||
| {hasWarning} | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ) : ( | ||
| hasWarning && <Icon icon={IconExclamationCircle} className="h-5 w-5 text-rose-500" /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </LinkButton> | ||
| ); | ||
| } | ||
|
|
||
| export function MenuCount({ count }: { count: number | string }) { | ||
| return <div className="rounded-full bg-slate-900 px-2 py-1 text-xxs text-dimmed">{count}</div>; | ||
| } |
Oops, something went wrong.