mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-15 06:35:21 +00:00
Merge remote-tracking branch 'origin/main' into feat-secret-input-autocomplete
This commit is contained in:
Sheen Capadngan
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Accordion>;
|
||||
|
||||
export const Basic: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<Accordion {...args}>
|
||||
<AccordionItem value="section-1">
|
||||
<AccordionTrigger>Section 1</AccordionTrigger>
|
||||
|
||||
@@ -8,7 +8,7 @@ export const AccordionItem = forwardRef<HTMLDivElement, AccordionPrimitive.Accor
|
||||
({ children, className, ...props }, forwardedRef) => (
|
||||
<AccordionPrimitive.Item
|
||||
className={twMerge(
|
||||
"mt-px overflow-hidden first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary transition-all border-transparent",
|
||||
"mt-px overflow-hidden border-transparent transition-all first:mt-0 data-[state=open]:border-l data-[state=open]:border-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -27,7 +27,7 @@ export const AccordionTrigger = forwardRef<
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
className={twMerge(
|
||||
"py-2 px-4 group data-[state=open]:text-primary h-11 hover:text-primary flex flex-1 outline-none items-center justify-between ",
|
||||
"group flex h-11 flex-1 items-center justify-between py-2 px-4 outline-none hover:text-primary data-[state=open]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -36,7 +36,7 @@ export const AccordionTrigger = forwardRef<
|
||||
{children}
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className="ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180 text-sm"
|
||||
className="text-sm transition-transform duration-300 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
|
||||
aria-hidden
|
||||
/>
|
||||
</AccordionPrimitive.Trigger>
|
||||
@@ -51,13 +51,13 @@ export const AccordionContent = forwardRef<
|
||||
>(({ children, className, ...props }, forwardedRef) => (
|
||||
<AccordionPrimitive.Content
|
||||
className={twMerge(
|
||||
"data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp overflow-hidden",
|
||||
"overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
>
|
||||
<div className="text-sm py-2 px-4">{children}</div>
|
||||
<div className="py-2 px-4 text-sm">{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
));
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Accordion, AccordionContent, AccordionItem,AccordionTrigger } from "./Accordion";
|
||||
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
|
||||
|
||||
@@ -39,7 +39,8 @@ const buttonVariants = cva(
|
||||
selected: "",
|
||||
outline_bg: "",
|
||||
// a constant color not in use on hover or click goes colorSchema color
|
||||
star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600"
|
||||
star: "text-bunker-200 bg-mineshaft-700 border-mineshaft-600",
|
||||
link: "text-primary !p-0 bg-transparent outline-none border-none"
|
||||
},
|
||||
isDisabled: {
|
||||
true: "bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { forwardRef, ReactNode } from "react";
|
||||
import { CSSProperties, forwardRef, ReactNode } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export type CardTitleProps = {
|
||||
@@ -10,7 +10,7 @@ export type CardTitleProps = {
|
||||
export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
|
||||
<div
|
||||
className={twMerge(
|
||||
"px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600 break-words",
|
||||
"mb-5 break-words border-b border-mineshaft-600 px-6 py-4 font-sans text-lg font-normal",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -31,10 +31,13 @@ export const CardFooter = ({ children, className }: CardFooterProps) => (
|
||||
export type CardBodyProps = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
export const CardBody = ({ children, className }: CardBodyProps) => (
|
||||
<div className={twMerge("px-6 pb-6 pt-0", className)}>{children}</div>
|
||||
export const CardBody = ({ children, className, style }: CardBodyProps) => (
|
||||
<div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export type CardProps = {
|
||||
@@ -44,10 +47,14 @@ export type CardProps = {
|
||||
isRounded?: boolean;
|
||||
isPlain?: boolean;
|
||||
isHoverable?: boolean;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
export const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
|
||||
(
|
||||
{ children, isFullHeight, isRounded, isHoverable, isPlain, className, style },
|
||||
ref
|
||||
): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
@@ -59,6 +66,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
isHoverable && "hover:shadow-xl",
|
||||
className
|
||||
)}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -30,7 +30,7 @@ export const Checkbox = ({
|
||||
<div className="flex items-center font-inter text-bunker-300">
|
||||
<CheckboxPrimitive.Root
|
||||
className={twMerge(
|
||||
"flex items-center flex-shrink-0 justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
|
||||
"flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border border-mineshaft-400 bg-mineshaft-600 shadow transition-all hover:bg-mineshaft-500",
|
||||
isDisabled && "bg-bunker-400 hover:bg-bunker-400",
|
||||
isChecked && "bg-primary hover:bg-primary",
|
||||
Boolean(children) && "mr-3",
|
||||
@@ -46,7 +46,7 @@ export const Checkbox = ({
|
||||
<FontAwesomeIcon icon={faCheck} size="sm" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
<label className="text-sm whitespace-nowrap truncate" htmlFor={id}>
|
||||
<label className="truncate whitespace-nowrap text-sm" htmlFor={id}>
|
||||
{children}
|
||||
{isRequired && <span className="pl-1 text-red">*</span>}
|
||||
</label>
|
||||
|
||||
@@ -58,7 +58,7 @@ export const DeleteActionModal = ({
|
||||
title={title}
|
||||
subTitle={subTitle}
|
||||
footerContent={
|
||||
<div className="flex items-center mx-2">
|
||||
<div className="mx-2 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
colorSchema="danger"
|
||||
@@ -91,7 +91,11 @@ export const DeleteActionModal = ({
|
||||
}
|
||||
className="mb-0"
|
||||
>
|
||||
<Input value={inputData} onChange={(e) => setInputData(e.target.value)} placeholder="Type to delete..." />
|
||||
<Input
|
||||
value={inputData}
|
||||
onChange={(e) => setInputData(e.target.value)}
|
||||
placeholder="Type to delete..."
|
||||
/>
|
||||
</FormControl>
|
||||
</form>
|
||||
</ModalContent>
|
||||
|
||||
@@ -45,7 +45,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
||||
ref={forwardedRef}
|
||||
className={twMerge(drawerContentVariation({ direction, className }))}
|
||||
>
|
||||
<Card isRounded={false} className="h-full w-full dark">
|
||||
<Card isRounded={false} className="dark h-full w-full">
|
||||
{title && (
|
||||
<CardTitle subTitle={subTitle} className="px-4">
|
||||
{title}
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Drawer, DrawerClose,DrawerContent, DrawerTrigger } from "./Drawer";
|
||||
export { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "./Drawer";
|
||||
|
||||
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof DropdownMenuContent>;
|
||||
|
||||
export const Basic: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -43,7 +43,7 @@ export const Basic: Story = {
|
||||
|
||||
export const Icons: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -65,7 +65,7 @@ export const Icons: Story = {
|
||||
|
||||
export const WithDivider: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
@@ -86,7 +86,7 @@ export const WithDivider: Story = {
|
||||
|
||||
export const Group: Story = {
|
||||
render: (args) => (
|
||||
<div className="flex justify-center w-full">
|
||||
<div className="flex w-full justify-center">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton ariaLabel="add">
|
||||
|
||||
@@ -24,7 +24,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
className={twMerge(
|
||||
"min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -48,7 +48,7 @@ export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenu
|
||||
{...props}
|
||||
ref={forwardedRef}
|
||||
className={twMerge(
|
||||
"min-w-[220px] z-30 bg-mineshaft-900 border border-mineshaft-600 will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
"z-30 min-w-[220px] rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow will-change-auto data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -66,7 +66,7 @@ export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
|
||||
export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
{...props}
|
||||
className={twMerge("text-xs text-bunker-400 px-4 pt-2 pb-1", className)}
|
||||
className={twMerge("px-4 pt-2 pb-1 text-xs text-bunker-400", className)}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -91,14 +91,14 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
|
||||
<DropdownMenuPrimitive.Item
|
||||
{...props}
|
||||
className={twMerge(
|
||||
"text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
|
||||
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
|
||||
{icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
|
||||
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
|
||||
<span className="flex-grow text-left">{children}</span>
|
||||
{icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
|
||||
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
|
||||
</Item>
|
||||
</DropdownMenuPrimitive.Item>
|
||||
);
|
||||
@@ -124,14 +124,14 @@ export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
{...props}
|
||||
className={twMerge(
|
||||
"text-xs text-mineshaft-200 block font-inter px-4 py-2 data-[highlighted]:bg-mineshaft-700 rounded-sm outline-none cursor-pointer",
|
||||
"block cursor-pointer rounded-sm px-4 py-2 font-inter text-xs text-mineshaft-200 outline-none data-[highlighted]:bg-mineshaft-700",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
|
||||
{icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
|
||||
{icon && iconPos === "left" && <span className="mr-2 flex items-center">{icon}</span>}
|
||||
<span className="flex-grow text-left">{children}</span>
|
||||
{icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
|
||||
{icon && iconPos === "right" && <span className="ml-2 flex items-center">{icon}</span>}
|
||||
</Item>
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
);
|
||||
@@ -143,7 +143,7 @@ export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupPro
|
||||
({ ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Group
|
||||
{...props}
|
||||
className={twMerge("text-xs py-2 pl-3", props.className)}
|
||||
className={twMerge("py-2 pl-3 text-xs", props.className)}
|
||||
ref={ref}
|
||||
/>
|
||||
)
|
||||
@@ -159,7 +159,7 @@ export const DropdownMenuSeparator = forwardRef<
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
{...props}
|
||||
className={twMerge("h-[1px] bg-gray-700 m-1", className)}
|
||||
className={twMerge("m-1 h-[1px] bg-gray-700", className)}
|
||||
/>
|
||||
));
|
||||
|
||||
|
||||
@@ -10,9 +10,10 @@ export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Ele
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent title="Email service not configured">
|
||||
<p className="mb-4 text-bunker-300">
|
||||
The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
|
||||
The administrators of this Infisical instance have not yet set up an email service provider
|
||||
required to perform this action
|
||||
</p>
|
||||
|
||||
|
||||
<a href="https://infisical.com/docs/self-hosting/configuration/email">
|
||||
<Button className="mr-4">Learn more</Button>
|
||||
</a>
|
||||
|
||||
@@ -7,23 +7,25 @@ import { twMerge } from "tailwind-merge";
|
||||
export type FormLabelProps = {
|
||||
id?: string;
|
||||
isRequired?: boolean;
|
||||
isOptional?:boolean;
|
||||
label?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelProps) => (
|
||||
export const FormLabel = ({ id, label, isRequired, icon, className,isOptional }: FormLabelProps) => (
|
||||
<Label.Root
|
||||
className={twMerge(
|
||||
"mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400",
|
||||
"mb-0.5 ml-1 flex items-center text-sm font-normal text-mineshaft-400",
|
||||
className
|
||||
)}
|
||||
htmlFor={id}
|
||||
>
|
||||
{label}
|
||||
{isRequired && <span className="ml-1 text-red">*</span>}
|
||||
{isOptional && <span className="ml-1 text-gray-500 italic text-xs">- Optional</span>}
|
||||
{icon && (
|
||||
<span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
|
||||
<span className="ml-2 cursor-default text-mineshaft-300 hover:text-mineshaft-200">
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
@@ -54,6 +56,7 @@ export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
|
||||
export type FormControlProps = {
|
||||
id?: string;
|
||||
isRequired?: boolean;
|
||||
isOptional?: boolean;
|
||||
isError?: boolean;
|
||||
label?: ReactNode;
|
||||
helperText?: ReactNode;
|
||||
@@ -66,6 +69,7 @@ export type FormControlProps = {
|
||||
export const FormControl = ({
|
||||
children,
|
||||
isRequired,
|
||||
isOptional,
|
||||
label,
|
||||
helperText,
|
||||
errorText,
|
||||
@@ -77,7 +81,13 @@ export const FormControl = ({
|
||||
return (
|
||||
<div className={twMerge("mb-4", className)}>
|
||||
{typeof label === "string" ? (
|
||||
<FormLabel label={label} isRequired={isRequired} id={id} icon={icon} />
|
||||
<FormLabel
|
||||
label={label}
|
||||
isOptional={isOptional}
|
||||
isRequired={isRequired}
|
||||
id={id}
|
||||
icon={icon}
|
||||
/>
|
||||
) : (
|
||||
label
|
||||
)}
|
||||
|
||||
@@ -10,22 +10,16 @@ type Props = {
|
||||
|
||||
export type HoverCardProps = Props;
|
||||
|
||||
export const HoverObject = ({
|
||||
text,
|
||||
icon,
|
||||
color
|
||||
}: Props): JSX.Element => (
|
||||
export const HoverObject = ({ text, icon, color }: Props): JSX.Element => (
|
||||
<HoverCard.Root openDelay={50}>
|
||||
<HoverCard.Trigger asChild>
|
||||
<a
|
||||
className="ImageTrigger z-20"
|
||||
>
|
||||
<a className="ImageTrigger z-20">
|
||||
<FontAwesomeIcon icon={icon} className={`text-${color}`} />
|
||||
</a>
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Portal>
|
||||
<HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
|
||||
<div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
|
||||
<div className="rounded-md border border-mineshaft-600 bg-bunker-700 p-2 text-bunker-300 drop-shadow-xl">
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
|
||||
<div>
|
||||
<div className="Text bold">{text}</div>
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { HoverCard,HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
|
||||
export { HoverCard, HoverCardContent, HoverCardTrigger } from "./HoverCardv2";
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
/* eslint-disable global-require */
|
||||
|
||||
@@ -29,12 +29,15 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
|
||||
<Card
|
||||
isRounded
|
||||
className={twMerge(
|
||||
"fixed top-1/2 left-1/2 z-30 dark:[color-scheme:dark] max-h-screen thin-scrollbar max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl",
|
||||
"thin-scrollbar fixed top-1/2 left-1/2 z-30 max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
|
||||
className
|
||||
)}
|
||||
style={{ maxHeight: "90%" }}
|
||||
>
|
||||
{title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
|
||||
<CardBody>{children}</CardBody>
|
||||
<CardBody className="overflow-y-auto overflow-x-hidden" style={{ maxHeight: "90%" }}>
|
||||
{children}
|
||||
</CardBody>
|
||||
{footerContent && <CardFooter>{footerContent}</CardFooter>}
|
||||
<DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
|
||||
<IconButton
|
||||
|
||||
@@ -44,7 +44,7 @@ export const Pagination = ({
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center justify-end text-white w-full py-3 px-4 bg-mineshaft-800",
|
||||
"flex w-full items-center justify-end bg-mineshaft-800 py-3 px-4 text-white",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -3,39 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as Popover from "@radix-ui/react-popover";
|
||||
|
||||
type Props = {
|
||||
children: any;
|
||||
text: string;
|
||||
onChangeHandler: (value: string, id: string) => void;
|
||||
children: any;
|
||||
text: string;
|
||||
onChangeHandler: (value: string, id: string) => void;
|
||||
id: string;
|
||||
};
|
||||
|
||||
export type PopoverProps = Props;
|
||||
|
||||
export const PopoverObject = ({children, text, onChangeHandler, id}: Props) => (
|
||||
export const PopoverObject = ({ children, text, onChangeHandler, id }: Props) => (
|
||||
<Popover.Root>
|
||||
<Popover.Trigger asChild className='data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400'>
|
||||
<Popover.Trigger
|
||||
asChild
|
||||
className="data-[state=open]:outline data-[state=open]:outline-primary data-[state=closed]:hover:outline data-[state=closed]:hover:outline-mineshaft-400"
|
||||
>
|
||||
{children}
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
className="rounded z-[100] p-3 w-[460px] min-h-fit border border-chicago-700 bg-mineshaft-600 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
className="z-[100] min-h-fit w-[460px] rounded border border-chicago-700 bg-mineshaft-600 p-3 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
||||
sideOffset={5}
|
||||
hideWhenDetached
|
||||
side="left"
|
||||
>
|
||||
<div className="flex flex-col pt-2 dark">
|
||||
<p className="text-bunker-200 text-[15px] leading-[0px] font-medium mb-5">Comment</p>
|
||||
<div className="dark flex flex-col pt-2">
|
||||
<p className="mb-5 text-[15px] font-medium leading-[0px] text-bunker-200">Comment</p>
|
||||
<textarea
|
||||
onChange={(e) => onChangeHandler(e.target.value, id)}
|
||||
// type={type}
|
||||
value={text}
|
||||
className='z-10 dark:[color-scheme:dark] peer h-[20rem] ph-no-capture bg-bunker-600 border border-mineshaft-500 rounded-md py-2.5 caret-bunker-200 text-sm px-2 w-full outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
|
||||
className="ph-no-capture placeholder peer z-10 h-[20rem] w-full rounded-md border border-mineshaft-500 bg-bunker-600 py-2.5 px-2 text-sm text-bunker-300 caret-bunker-200 outline-none duration-200 placeholder:text-bunker-400 focus:text-bunker-100 placeholder:focus:text-transparent dark:[color-scheme:dark]"
|
||||
spellCheck="false"
|
||||
placeholder='–'
|
||||
placeholder="–"
|
||||
/>
|
||||
</div>
|
||||
<Popover.Close
|
||||
className="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-bunker-300 hover:text-white absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
|
||||
className="hover:bg-violet4 focus:shadow-violet7 absolute top-[5px] right-[5px] inline-flex h-[25px] w-[25px] cursor-default items-center justify-center rounded-full text-bunker-300 outline-none hover:text-white focus:shadow-[0_0_0_2px]"
|
||||
aria-label="Close"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { Popover,PopoverContent, PopoverTrigger } from "./Popoverv2";
|
||||
export { Popover, PopoverContent, PopoverTrigger } from "./Popoverv2";
|
||||
|
||||
@@ -6,35 +6,35 @@ export type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
|
||||
|
||||
// Note this component is not customizable (Heroku integration and potentially other pages depend on it)
|
||||
export const RadioGroup = ({ className, children, ...props }: RadioGroupProps) => (
|
||||
<RadioGroupPrimitive.Root
|
||||
className={twMerge("flex flex-row gap-5 px-6 mb-6", className)}
|
||||
<RadioGroupPrimitive.Root
|
||||
className={twMerge("mb-6 flex flex-row gap-5 px-6", className)}
|
||||
defaultValue="App"
|
||||
aria-label="View density"
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<RadioGroupPrimitive.Item
|
||||
className="bg-bunker-400/20 w-[20px] h-[20px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
|
||||
className="h-[20px] w-[20px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
|
||||
value="App"
|
||||
id="r1"
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[11px] after:h-[11px] after:rounded-[50%] after:bg-primary" />
|
||||
<RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-primary after:content-['']" />
|
||||
</RadioGroupPrimitive.Item>
|
||||
<label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r1">
|
||||
<label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r1">
|
||||
App
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<RadioGroupPrimitive.Item
|
||||
className="bg-bunker-400/20 w-[22px] h-[22px] rounded-full hover:bg-bunker-400/40 border border-bunker-400/60 duration-200 outline-none cursor-default"
|
||||
className="h-[22px] w-[22px] cursor-default rounded-full border border-bunker-400/60 bg-bunker-400/20 outline-none duration-200 hover:bg-bunker-400/40"
|
||||
value="Pipeline"
|
||||
id="r2"
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center w-full h-full relative after:content-[''] after:block after:w-[13px] after:h-[13px] after:rounded-[50%] after:bg-primary" />
|
||||
<RadioGroupPrimitive.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[13px] after:w-[13px] after:rounded-[50%] after:bg-primary after:content-['']" />
|
||||
</RadioGroupPrimitive.Item>
|
||||
<label className="text-bunker-200 text-sm leading-none pl-2" htmlFor="r2">
|
||||
<label className="pl-2 text-sm leading-none text-bunker-200" htmlFor="r2">
|
||||
Pipeline
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroupPrimitive.Root>
|
||||
);
|
||||
);
|
||||
|
||||
@@ -14,19 +14,20 @@ const replaceContentWithDot = (str: string) => {
|
||||
return finalStr;
|
||||
};
|
||||
|
||||
const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
|
||||
const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
|
||||
if (isImport) return "IMPORTED";
|
||||
if (content === "") return "EMPTY";
|
||||
if (!content) return "EMPTY";
|
||||
if (!isVisible) return replaceContentWithDot(content);
|
||||
|
||||
let skipNext = false;
|
||||
const formatedContent = content.split(REGEX).flatMap((el, i) => {
|
||||
const formattedContent = content.split(REGEX).flatMap((el, i) => {
|
||||
const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
|
||||
if (isInterpolationSyntax) {
|
||||
skipNext = true;
|
||||
return (
|
||||
<span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
|
||||
${<span className="ph-no-capture text-yello-200/80">{el.slice(2, -1)}</span>
|
||||
${<span className="ph-no-capture text-yellow-200/80">{el.slice(2, -1)}</span>
|
||||
}
|
||||
</span>
|
||||
);
|
||||
@@ -40,12 +41,13 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
|
||||
|
||||
// akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
|
||||
// when break is added a line break works properly
|
||||
return formatedContent.concat(<br />);
|
||||
return formattedContent.concat(<br />);
|
||||
};
|
||||
|
||||
type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
||||
value?: string | null;
|
||||
isVisible?: boolean;
|
||||
isImport?: boolean;
|
||||
isReadOnly?: boolean;
|
||||
isDisabled?: boolean;
|
||||
containerClassName?: string;
|
||||
@@ -55,7 +57,17 @@ const commonClassName = "font-mono text-sm caret-white border-none outline-none
|
||||
|
||||
export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
|
||||
(
|
||||
{ value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
|
||||
{
|
||||
value,
|
||||
isVisible,
|
||||
isImport,
|
||||
containerClassName,
|
||||
onBlur,
|
||||
isDisabled,
|
||||
isReadOnly,
|
||||
onFocus,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [isSecretFocused, setIsSecretFocused] = useToggle();
|
||||
@@ -69,7 +81,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
|
||||
<pre aria-hidden className="m-0 ">
|
||||
<code className={`inline-block w-full ${commonClassName}`}>
|
||||
<span style={{ whiteSpace: "break-spaces" }}>
|
||||
{syntaxHighlight(value, isVisible || isSecretFocused)}
|
||||
{syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
|
||||
</span>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { forwardRef, ReactNode } from "react";
|
||||
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faCaretDown, faCaretUp,faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCaretDown, faCaretUp, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
|
||||
ref={ref}
|
||||
className={twMerge(
|
||||
`inline-flex items-center justify-between rounded-md
|
||||
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200`,
|
||||
bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200 focus:bg-mineshaft-700/80`,
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -57,7 +57,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
className={twMerge(
|
||||
"relative top-1 z-[100] overflow-hidden rounded-md bg-mineshaft-900 border border-mineshaft-600 font-inter text-bunker-100 shadow-md",
|
||||
"relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
|
||||
dropdownContainerClassName
|
||||
)}
|
||||
position={position}
|
||||
@@ -106,7 +106,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
|
||||
className={twMerge(
|
||||
`relative mb-0.5 flex
|
||||
cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
|
||||
outline-none transition-all hover:bg-mineshaft-500`,
|
||||
outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
|
||||
isSelected && "bg-primary",
|
||||
isDisabled &&
|
||||
"cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
|
||||
|
||||
@@ -20,7 +20,7 @@ export const Spinner = ({ className, size = "md" }: Props): JSX.Element => {
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={twMerge(
|
||||
"text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
|
||||
"m-1 animate-spin fill-primary text-gray-200 dark:text-gray-600",
|
||||
sizeChart[size],
|
||||
className
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
|
||||
"flex w-full items-center space-x-3 rounded-md border border-bunker-300/30 p-2",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -25,15 +25,15 @@ export const Stepper = ({ activeStep, children, direction, className }: StepperP
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center space-x-3 flex-shrink-0",
|
||||
"flex flex-shrink-0 items-center space-x-3",
|
||||
isNotLast && "flex-grow"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center space-x-2 flex-shrink-0">
|
||||
<div className="flex flex-shrink-0 items-center space-x-2">
|
||||
<div
|
||||
className={twMerge(
|
||||
"w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
|
||||
isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
|
||||
"flex h-7 w-7 items-center justify-center rounded-full text-sm font-medium text-mineshaft-800 transition-all",
|
||||
isCompleted ? "bg-primary" : "border border-primary/30 text-bunker-300",
|
||||
isActive && "bg-primary text-mineshaft-800"
|
||||
)}
|
||||
>
|
||||
@@ -71,7 +71,7 @@ export type StepProps = {
|
||||
export const Step = ({ title, description }: StepProps) => {
|
||||
return (
|
||||
<div className="flex flex-col text-gray-300">
|
||||
<div className="font-medium text-sm">{title}</div>
|
||||
<div className="text-sm font-medium">{title}</div>
|
||||
{description && <div className="text-xs">{description}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export type { StepperProps,StepProps } from "./Stepper";
|
||||
export { Step,Stepper } from "./Stepper";
|
||||
export type { StepperProps, StepProps } from "./Stepper";
|
||||
export { Step, Stepper } from "./Stepper";
|
||||
|
||||
@@ -6,5 +6,6 @@ export type {
|
||||
TFootProps,
|
||||
THeadProps,
|
||||
ThProps,
|
||||
TrProps} from "./Table";
|
||||
export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot,Th, THead, Tr } from "./Table";
|
||||
TrProps
|
||||
} from "./Table";
|
||||
export { Table, TableContainer, TableSkeleton, TBody, Td, TFoot, Th, THead, Tr } from "./Table";
|
||||
|
||||
@@ -13,7 +13,7 @@ export type TabListProps = TabsPrimitive.TabsListProps;
|
||||
|
||||
export const TabList = ({ className, children, ...props }: TabListProps) => (
|
||||
<TabsPrimitive.List
|
||||
className={twMerge("flex-shrink-0 flex border-b-2 border-mineshaft-800", className)}
|
||||
className={twMerge("flex flex-shrink-0 border-b-2 border-mineshaft-800", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -25,7 +25,7 @@ export type TabProps = TabsPrimitive.TabsTriggerProps;
|
||||
export const Tab = ({ className, children, ...props }: TabProps) => (
|
||||
<TabsPrimitive.Trigger
|
||||
className={twMerge(
|
||||
"px-3 h-10 font-medium text-sm flex items-center justify-center select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 text-mineshaft-400 transition-all data-[state=active]:text-white data-[state=active]:border-b data-[state=active]:border-primary",
|
||||
"flex h-10 select-none items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -38,7 +38,7 @@ export type TabPanelProps = TabsPrimitive.TabsContentProps;
|
||||
|
||||
export const TabPanel = ({ className, children, ...props }: TabPanelProps) => (
|
||||
<TabsPrimitive.Content
|
||||
className={twMerge("outline-none flex-grow py-5 rounded-bl-md rounded-br-md", className)}
|
||||
className={twMerge("flex-grow rounded-bl-md rounded-br-md py-5 outline-none", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
export type { TabListProps,TabPanelProps, TabProps, TabsProps } from "./Tabs";
|
||||
export type { TabListProps, TabPanelProps, TabProps, TabsProps } from "./Tabs";
|
||||
export { Tab, TabList, TabPanel, Tabs } from "./Tabs";
|
||||
|
||||
@@ -20,6 +20,7 @@ const tagVariants = cva(
|
||||
green: "bg-primary-800 text-white"
|
||||
},
|
||||
size: {
|
||||
xs: "text-xs px-1 py-0.5",
|
||||
sm: "px-2 py-0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,8 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
|
||||
onOpenChange?: (isOpen: boolean) => void;
|
||||
defaultOpen?: boolean;
|
||||
position?: "top" | "bottom" | "left" | "right";
|
||||
isDisabled?: boolean;
|
||||
center?: boolean;
|
||||
};
|
||||
|
||||
export const Tooltip = ({
|
||||
@@ -20,7 +22,9 @@ export const Tooltip = ({
|
||||
onOpenChange,
|
||||
defaultOpen,
|
||||
className,
|
||||
center,
|
||||
asChild = true,
|
||||
isDisabled,
|
||||
position = "top",
|
||||
...props
|
||||
}: TooltipProps) => (
|
||||
@@ -38,11 +42,13 @@ export const Tooltip = ({
|
||||
{...props}
|
||||
className={twMerge(
|
||||
`z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md
|
||||
data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
|
||||
data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
|
||||
data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
|
||||
data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
|
||||
`,
|
||||
data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
|
||||
data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
|
||||
data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
|
||||
data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
|
||||
`,
|
||||
isDisabled && "!hidden",
|
||||
center && "text-center",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -5,21 +5,27 @@ import { faWarning } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { useProjectPermission } from "@app/context";
|
||||
import { useGetUpgradeProjectStatus, useUpgradeProject } from "@app/hooks/api";
|
||||
import { Workspace } from "@app/hooks/api/types";
|
||||
import { workspaceKeys } from "@app/hooks/api/workspace/queries";
|
||||
import { ProjectVersion } from "@app/hooks/api/workspace/types";
|
||||
import { queryClient } from "@app/reactQuery";
|
||||
|
||||
import { Button } from "../Button";
|
||||
import { Tooltip } from "../Tooltip";
|
||||
|
||||
export type UpgradeProjectAlertProps = {
|
||||
project: Workspace;
|
||||
transparent?: boolean;
|
||||
};
|
||||
|
||||
export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.Element | null => {
|
||||
const { createNotification } = useNotificationContext();
|
||||
export const UpgradeProjectAlert = ({
|
||||
project,
|
||||
transparent
|
||||
}: UpgradeProjectAlertProps): JSX.Element | null => {
|
||||
|
||||
const router = useRouter();
|
||||
const { membership } = useProjectPermission();
|
||||
const upgradeProject = useUpgradeProject();
|
||||
@@ -48,6 +54,7 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
|
||||
}
|
||||
|
||||
if (currentStatus !== null && data?.status === null) {
|
||||
queryClient.invalidateQueries(workspaceKeys.getAllUserWorkspace);
|
||||
router.reload();
|
||||
}
|
||||
}
|
||||
@@ -87,10 +94,25 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
|
||||
|
||||
if (project.version !== ProjectVersion.V1) return null;
|
||||
|
||||
if (transparent) {
|
||||
return (
|
||||
<Button
|
||||
colorSchema="primary"
|
||||
variant="solid"
|
||||
size="md"
|
||||
isLoading={isLoading}
|
||||
isDisabled={isLoading || membership.role !== "admin"}
|
||||
onClick={onUpgradeProject}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
|
||||
"mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
|
||||
membership.role !== "admin" && "opacity-80"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user