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

feat(dashboard-v3): updated ui components and hooks for new migrated apis and v3 apis

Browse Source
This commit is contained in:
Akhil Mohan
2023-09-28 21:28:43 +05:30
parent 0ada343b6f
commit fcf3f2837e
29 changed files with 1195 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Checkbox/Checkbox.tsx
+2 -1
View File
@@ -30,9 +30,10 @@ export const Checkbox = ({
<div className="flex items-center font-inter text-bunker-300">
<CheckboxPrimitive.Root
className={twMerge(
"flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
"flex items-center justify-center w-4 h-4 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600",
isDisabled && "bg-bunker-400 hover:bg-bunker-400",
isChecked && "bg-primary hover:bg-primary",
Boolean(children) && "mr-3",
className
)}
required={isRequired}
frontend/src/components/v2/ContentLoader/ContentLoader.tsx
+46
View File
@@ -0,0 +1,46 @@
// this will show a loading animation with text below
// if you pass array it will say it one by one giving user clear instruction on what's happening
import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
type Props = {
text?: string | string[];
frequency?: number;
};
export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
const [pos, setPos] = useState(0);
const isTextArray = Array.isArray(text);
useEffect(() => {
let interval: NodeJS.Timer;
if (isTextArray) {
interval = setInterval(() => {
setPos((state) => (state + 1) % text.length);
}, frequency);
}
return () => clearInterval(interval);
}, []);
return (
<div className="container mx-auto flex relative flex-col h-1/2 w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
<div>
<img src="/images/loading/loading.gif" height={210} width={240} alt="loading animation" />
</div>
{text && isTextArray && (
<AnimatePresence>
<motion.div
className="text-primary text-sm absolute bottom-1/4"
key={`content-loader-${pos}`}
initial={{ opacity: 0, translateY: 20 }}
animate={{ opacity: 1, translateY: 0 }}
exit={{ opacity: 0, translateY: -20 }}
>
{text[pos]}
</motion.div>
</AnimatePresence>
)}
{text && !isTextArray && <div className="text-primary text-sm">{text}</div>}
</div>
);
};
frontend/src/components/v2/ContentLoader/index.tsx
+1
View File
@@ -0,0 +1 @@
export { ContentLoader } from "./ContentLoader";
frontend/src/components/v2/Dropdown/Dropdown.tsx
+69 -1
View File
@@ -6,6 +6,9 @@ import { twMerge } from "tailwind-merge";
export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
export const DropdownMenu = DropdownMenuPrimitive.Root;
export type DropdownSubMenuProps = DropdownMenuPrimitive.DropdownMenuSubProps;
export const DropdownSubMenu = DropdownMenuPrimitive.Sub;
// trigger
export type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -34,6 +37,30 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
DropdownMenuContent.displayName = "DropdownMenuContent";
// item container
export type DropdownSubMenuContentProps = DropdownMenuPrimitive.MenuSubContentProps;
export const DropdownSubMenuContent = forwardRef<HTMLDivElement, DropdownSubMenuContentProps>(
({ children, className, ...props }, forwardedRef) => {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.SubContent
sideOffset={2}
{...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",
className
)}
>
{children}
</DropdownMenuPrimitive.SubContent>
</DropdownMenuPrimitive.Portal>
);
}
);
DropdownSubMenuContent.displayName = "DropdownMenuContent";
// item label component
export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
@@ -76,11 +103,50 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
</DropdownMenuPrimitive.Item>
);
// trigger
export type DropdownSubMenuTriggerProps<T extends ElementType> =
DropdownMenuPrimitive.DropdownMenuSubTriggerProps & {
icon?: ReactNode;
as?: T;
inputRef?: Ref<T>;
iconPos?: "left" | "right";
};
export const DropdownSubMenuTrigger = <T extends ElementType = "button">({
children,
inputRef,
className,
icon,
as: Item = "button",
iconPos = "left",
...props
}: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
<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",
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>}
<span className="flex-grow text-left">{children}</span>
{icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
</Item>
</DropdownMenuPrimitive.SubTrigger>
);
// grouping items into 1
export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(
({ ...props }, ref) => <DropdownMenuPrimitive.Group {...props} ref={ref} />
({ ...props }, ref) => (
<DropdownMenuPrimitive.Group
{...props}
className={twMerge("text-xs py-2 pl-3", props.className)}
ref={ref}
/>
)
);
DropdownMenuGroup.displayName = "DropdownMenuGroup";
@@ -98,3 +164,5 @@ export const DropdownMenuSeparator = forwardRef<
));
DropdownMenuSeparator.displayName = "DropdownMenuSeperator";
DropdownMenuSeparator.displayName = "DropdownMenuSeperator";
frontend/src/components/v2/Dropdown/index.tsx
+8 -2
View File
@@ -4,7 +4,10 @@ export type {
DropdownMenuGroupProps,
DropdownMenuItemProps,
DropdownMenuProps,
DropdownMenuTriggerProps
DropdownMenuTriggerProps,
DropdownSubMenuContentProps,
DropdownSubMenuProps,
DropdownSubMenuTriggerProps
} from "./Dropdown";
export {
DropdownMenu,
@@ -13,5 +16,8 @@ export {
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
DropdownMenuTrigger,
DropdownSubMenu,
DropdownSubMenuContent,
DropdownSubMenuTrigger
} from "./Dropdown";
frontend/src/components/v2/Menu/Menu.tsx
+40 -29
View File
@@ -2,8 +2,8 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable global-require */
import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
import { motion } from "framer-motion"
import Lottie from "lottie-react"
import { motion } from "framer-motion";
import Lottie from "lottie-react";
import { twMerge } from "tailwind-merge";
export type MenuProps = {
@@ -39,13 +39,10 @@ export const MenuItem = <T extends ElementType = "button">({
inputRef,
...props
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
const iconRef = useRef()
const iconRef = useRef();
return(
<a
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
>
return (
<a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
<li
className={twMerge(
"group px-1 py-2 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
@@ -55,25 +52,37 @@ export const MenuItem = <T extends ElementType = "button">({
)}
>
<motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
<Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
<div className={`${isSelected ? "visisble" : "invisible"} -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}/>
{/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
<Lottie
lottieRef={iconRef}
style={{ width: 22, height: 22 }}
// eslint-disable-next-line import/no-dynamic-require
animationData={require(`../../../../public/lotties/${icon}.json`)}
loop={false}
autoplay={false}
className="my-auto ml-[0.1rem] mr-3"
<Item
type="button"
role="menuitem"
className="flex items-center relative"
ref={inputRef}
{...props}
>
<div
className={`${
isSelected ? "visisble" : "invisible"
} -left-[0.28rem] absolute w-[0.07rem] rounded-md h-5 bg-primary`}
/>
{/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
{icon && (
<Lottie
lottieRef={iconRef}
style={{ width: 22, height: 22 }}
// eslint-disable-next-line import/no-dynamic-require
animationData={require(`../../../../public/lotties/${icon}.json`)}
loop={false}
autoplay={false}
className="my-auto ml-[0.1rem] mr-3"
/>
)}
<span className="flex-grow text-left">{children}</span>
</Item>
{description && <span className="mt-2 text-xs">{description}</span>}
</motion.span>
</li>
</a>
)
);
};
export const SubMenuItem = <T extends ElementType = "button">({
@@ -88,13 +97,10 @@ export const SubMenuItem = <T extends ElementType = "button">({
inputRef,
...props
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
const iconRef = useRef()
const iconRef = useRef();
return(
<a
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
>
return (
<a onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
<li
className={twMerge(
"group px-1 py-1 mt-0.5 font-inter flex flex-col text-sm text-mineshaft-300 hover:text-mineshaft-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50",
@@ -103,7 +109,13 @@ export const SubMenuItem = <T extends ElementType = "button">({
)}
>
<motion.span className="w-full flex flex-row items-center justify-start rounded-sm pl-6">
<Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
<Item
type="button"
role="menuitem"
className="flex items-center relative"
ref={inputRef}
{...props}
>
<Lottie
lottieRef={iconRef}
style={{ width: 16, height: 16 }}
@@ -119,10 +131,9 @@ export const SubMenuItem = <T extends ElementType = "button">({
</motion.span>
</li>
</a>
)
);
};
MenuItem.displayName = "MenuItem";
export type MenuGroupProps = {
frontend/src/components/v2/SecretInput/SecretInput.tsx
+14 -4
View File
@@ -1,6 +1,7 @@
/* eslint-disable react/no-danger */
import { forwardRef, HTMLAttributes } from "react";
import { forwardRef, TextareaHTMLAttributes } from "react";
import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
import { twMerge } from "tailwind-merge";
import { useToggle } from "@app/hooks";
@@ -39,20 +40,28 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
return `${newContent}<br/>`;
};
type Props = HTMLAttributes<HTMLTextAreaElement> & {
type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
value?: string | null;
isVisible?: boolean;
isReadOnly?: boolean;
isDisabled?: boolean;
containerClassName?: string;
};
const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
({ value, isVisible, onBlur, isDisabled, onFocus, ...props }, ref) => {
(
{ value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
ref
) => {
const [isSecretFocused, setIsSecretFocused] = useToggle();
return (
<div className="overflow-auto w-full" style={{ maxHeight: `${21 * 7}px` }}>
<div
className={twMerge("overflow-auto w-full no-scrollbar rounded-md", containerClassName)}
style={{ maxHeight: `${21 * 7}px` }}
>
<div className="relative overflow-hidden">
<pre aria-hidden className="m-0 ">
<code className={`inline-block w-full ${commonClassName}`}>
@@ -78,6 +87,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
}}
value={value || ""}
{...props}
readOnly={isReadOnly}
/>
</div>
</div>
frontend/src/components/v2/Spinner/Spinner.tsx
+1 -1
View File
@@ -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",
"text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1",
sizeChart[size],
className
)}
frontend/src/components/v2/Tag/Tag.tsx
+11 -9
View File
@@ -1,14 +1,17 @@
import { ReactNode } from "react";
import { faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cva, VariantProps } from "cva";
import { twMerge } from "tailwind-merge";
type Props = {
children: ReactNode;
className?: string;
onClose?: () => void;
} & VariantProps<typeof tagVariants>;
const tagVariants = cva(
"inline-flex items-center whitespace-nowrap text-sm rounded-sm mr-1.5 text-bunker-200 rounded-[30px] text-gray-400 ",
"inline-flex items-center whitespace-nowrap text-sm rounded mr-1.5 text-bunker-200 text-gray-400 ",
{
variants: {
colorSchema: {
@@ -23,14 +26,13 @@ const tagVariants = cva(
}
);
export const Tag = ({
children,
className,
colorSchema = "gray",
size = "sm" }: Props) => (
<div
className={twMerge(tagVariants({ colorSchema, className, size }))}
>
export const Tag = ({ children, className, colorSchema = "gray", size = "sm", onClose }: Props) => (
<div className={twMerge(tagVariants({ colorSchema, className, size }))}>
{children}
{onClose && (
<button type="button" onClick={onClose} className="ml-2 flex items-center justify-center">
<FontAwesomeIcon icon={faClose} />
</button>
)}
</div>
);
frontend/src/components/v2/index.tsx
+1
View File
@@ -2,6 +2,7 @@ export * from "./Accordion";
export * from "./Button";
export * from "./Card";
export * from "./Checkbox";
export * from "./ContentLoader";
export * from "./DatePicker";
export * from "./DeleteActionModal";
export * from "./Drawer";