awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-14 04:29:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into revert-3901-revert-3875-ENG-3009-test

Browse Source
This commit is contained in:
x032205
2025-07-03 02:54:28 -04:00
parent f6c10683a5 73025f5094
commit 13c9879fb6
670 changed files with 11618 additions and 13525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx
+7 -12
View File
@@ -1,6 +1,6 @@
/* eslint-disable react/prop-types */
import React from "react";
import { faCaretDown, faChevronRight, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { faEllipsis, faSort } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, ReactNode } from "@tanstack/react-router";
import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
@@ -40,7 +40,7 @@ const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWitho
({ className, ...props }, ref) => (
<li
ref={ref}
className={twMerge("inline-flex items-center gap-1.5 font-medium", className)}
className={twMerge("inline-flex items-center gap-1.5 text-sm", className)}
{...props}
/>
)
@@ -78,13 +78,8 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
BreadcrumbPage.displayName = "BreadcrumbPage";
const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
<li
role="presentation"
aria-hidden="true"
className={twMerge("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
{...props}
>
{children ?? <FontAwesomeIcon icon={faChevronRight} />}
<li role="presentation" aria-hidden="true" className={twMerge("", className)} {...props}>
{children ?? <p className="px-2 text-lg text-mineshaft-400/70">/</p>}
</li>
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
@@ -139,12 +134,12 @@ const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[]
<DropdownMenu>
<DropdownMenuTrigger>
<BreadcrumbItem>
<BreadcrumbSegment>
{el.label} <FontAwesomeIcon icon={faCaretDown} size="sm" />
<BreadcrumbSegment className="rounded-md px-2 py-1 py-2 hover:bg-mineshaft-600">
{el.label} <FontAwesomeIcon icon={faSort} size="sm" />
</BreadcrumbSegment>
</BreadcrumbItem>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuContent side="right" align="start">
{el?.dropdownTitle && <DropdownMenuLabel>{el.dropdownTitle}</DropdownMenuLabel>}
{el.links.map((i, dropIndex) => (
<Link
frontend/src/components/v2/Button/Button.tsx
+10 -5
View File
@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
import { cva, VariantProps } from "cva";
import { twMerge } from "tailwind-merge";
import { Lottie } from "../Lottie";
type Props = {
children: ReactNode;
isDisabled?: boolean;
@@ -189,11 +191,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
{...props}
>
{isLoading && (
<img
src="/images/loading/loading.gif"
width={36}
alt="loading animation"
className="absolute rounded-xl opacity-80"
<Lottie
icon={
variant === "solid" && colorSchema === "primary"
? "infisical_loading_bw"
: "infisical_loading"
}
isAutoPlay
className="absolute w-8 rounded-xl opacity-80 shadow-sm"
/>
)}
{leftIcon && (
frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+3 -8
View File
@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { twMerge } from "tailwind-merge";
import { Lottie } from "../Lottie";
type Props = {
text?: string | string[];
frequency?: number;
@@ -31,14 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
className
)}
>
<img
src="/images/loading/loading.gif"
height={70}
width={120}
alt="loading animation"
decoding="async"
loading="lazy"
/>
<Lottie icon="infisical_loading" className="h-32 w-32" />
{text && isTextArray && (
<AnimatePresence mode="wait">
<motion.div
frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+3 -1
View File
@@ -20,6 +20,7 @@ type Props = {
children?: ReactNode;
deletionMessage?: ReactNode;
buttonColorSchema?: "danger" | "primary" | "secondary" | "gray" | null;
isDisabled?: boolean;
};
export const DeleteActionModal = ({
@@ -34,6 +35,7 @@ export const DeleteActionModal = ({
formContent,
deletionMessage,
buttonColorSchema = "danger",
isDisabled,
children
}: Props): JSX.Element => {
const [inputData, setInputData] = useState("");
@@ -70,7 +72,7 @@ export const DeleteActionModal = ({
<Button
className="mr-4"
colorSchema={buttonColorSchema}
isDisabled={!(deleteKey === inputData) || isLoading}
isDisabled={!(deleteKey === inputData) || isLoading || isDisabled}
onClick={onDelete}
isLoading={isLoading}
>
frontend/src/components/v2/Divider/Divider.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ interface IProps {
export const Divider = ({ className }: IProps): JSX.Element => {
return (
<div className={twMerge("flex items-center px-2 opacity-50", className)}>
<div aria-hidden="true" className="h-5 w-full grow border border-t border-mineshaft-200" />
<div aria-hidden="true" className="h-1 w-full grow border-t border-mineshaft-300" />
</div>
);
};
frontend/src/components/v2/HeaderResizer/HeaderResizer.tsx
+36
View File
@@ -0,0 +1,36 @@
import { MouseEventHandler } from "react";
export const HeaderResizer = ({
onMouseDown,
isActive,
scrollOffset,
heightOffset
}: {
onMouseDown: MouseEventHandler<HTMLDivElement>;
isActive: boolean;
scrollOffset: number;
heightOffset: number;
}) => {
return (
<>
<div
tabIndex={-1}
role="button"
className={`absolute left-0 z-40 h-0.5 w-full cursor-ns-resize hover:bg-blue-400/20 ${
isActive ? "bg-blue-400/75" : "bg-transparent"
}`}
onMouseDown={onMouseDown}
style={{
transform: "translateY(50%)",
top: heightOffset
}}
/>
<div
style={{ left: `calc(50% + ${scrollOffset}px)`, top: heightOffset }}
className="pointer-events-none absolute z-30 -translate-x-1/2"
>
<div className="h-1 w-8 rounded bg-gray-400 opacity-50" />
</div>
</>
);
};
frontend/src/components/v2/HeaderResizer/index.tsx
View File
frontend/src/components/v2/Lottie/Lottie.tsx
+37
View File
@@ -0,0 +1,37 @@
import { forwardRef, ReactNode, useRef } from "react";
import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
export type LottieProps = {
// Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
children?: ReactNode;
icon?: string;
iconMode?: Mode;
className?: string;
isAutoPlay?: boolean;
};
export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
({ children, icon, iconMode, isAutoPlay, ...props }, ref): JSX.Element => {
const iconRef = useRef<DotLottie | null>(null);
return (
<div
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
{...props}
ref={ref}
>
<DotLottieReact
dotLottieRefCallback={(el) => {
iconRef.current = el;
}}
mode={iconMode}
src={`/lotties/${icon}.json`}
loop
autoplay={isAutoPlay}
className="h-full w-full"
/>
{children}
</div>
);
}
);
frontend/src/components/v2/Lottie/index.tsx
+1
View File
@@ -0,0 +1 @@
export { Lottie } from "./Lottie";
frontend/src/components/v2/Menu/Menu.tsx
+12 -31
View File
@@ -1,5 +1,4 @@
import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from "react";
import { twMerge } from "tailwind-merge";
export type MenuProps = {
@@ -14,9 +13,8 @@ export const Menu = ({ children, className }: MenuProps): JSX.Element => {
export type MenuItemProps<T extends ElementType> = {
// Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
as?: T;
children: ReactNode;
icon?: string;
iconMode?: Mode;
children?: ReactNode;
leftIcon?: ReactNode;
description?: ReactNode;
isDisabled?: boolean;
isSelected?: boolean;
@@ -26,7 +24,7 @@ export type MenuItemProps<T extends ElementType> = {
export const MenuItem = <T extends ElementType = "button">({
children,
icon,
leftIcon,
iconMode,
className,
isDisabled,
@@ -37,41 +35,21 @@ export const MenuItem = <T extends ElementType = "button">({
inputRef,
...props
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
const iconRef = useRef<DotLottie | null>(null);
return (
<Item
type="button"
role="menuitem"
className={twMerge(
"duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
"duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-2 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
isDisabled && "cursor-not-allowed hover:bg-transparent",
className
)}
ref={inputRef}
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
{...props}
>
<div
className={`${
isSelected ? "visisble" : "invisible"
} absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
/>
{icon && (
<div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
<DotLottieReact
dotLottieRefCallback={(el) => {
iconRef.current = el;
}}
mode={iconMode}
src={`/lotties/${icon}.json`}
loop
className="h-full w-full"
/>
</div>
)}
<span className="flex-grow text-left">{children}</span>
{leftIcon}
{children && <span className="flex-grow whitespace-nowrap text-left">{children}</span>}
{description && <span className="mt-2 text-xs">{description}</span>}
</Item>
);
@@ -82,11 +60,14 @@ MenuItem.displayName = "MenuItem";
export type MenuGroupProps = {
children: ReactNode;
title: ReactNode;
className?: string;
};
export const MenuGroup = ({ children, title }: MenuGroupProps): JSX.Element => (
export const MenuGroup = ({ children, title, className }: MenuGroupProps): JSX.Element => (
<>
<li className="px-2 pt-3 text-xs uppercase text-gray-400">{title}</li>
<li className={twMerge("px-2 pt-3 text-xs font-medium uppercase text-gray-400", className)}>
{title}
</li>
{children}
</>
);
frontend/src/components/v2/Table/Table.tsx
+9 -3
View File
@@ -45,10 +45,14 @@ export const Table = ({ children, className }: TableProps): JSX.Element => (
export type THeadProps = {
children: ReactNode;
className?: string;
style?: React.CSSProperties;
};
export const THead = ({ children, className }: THeadProps): JSX.Element => (
<thead className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}>
export const THead = ({ children, className, style }: THeadProps): JSX.Element => (
<thead
className={twMerge("bg-mineshaft-800 text-xs uppercase text-bunker-300", className)}
style={style}
>
{children}
</thead>
);
@@ -96,14 +100,16 @@ export const Tr = ({
export type ThProps = {
children?: ReactNode;
className?: string;
style?: React.CSSProperties;
};
export const Th = ({ children, className }: ThProps): JSX.Element => (
export const Th = ({ children, className, style }: ThProps): JSX.Element => (
<th
className={twMerge(
"border-b-2 border-mineshaft-600 bg-mineshaft-800 px-5 pb-3.5 pt-4 font-semibold",
className
)}
style={style}
>
{children}
</th>
frontend/src/components/v2/index.tsx
+2
View File
@@ -10,6 +10,7 @@ export * from "./ConfirmActionModal";
export * from "./ContentLoader";
export * from "./DatePicker";
export * from "./DeleteActionModal";
export * from "./Divider";
export * from "./Drawer";
export * from "./Dropdown";
export * from "./Editor";
@@ -22,6 +23,7 @@ export * from "./GenericFieldLabel";
export * from "./HoverCardv2";
export * from "./IconButton";
export * from "./Input";
export * from "./Lottie";
export * from "./Menu";
export * from "./Modal";
export * from "./NoticeBanner";