github/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2026-01-09 15:38:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

style: give project machine identity page facelift

Browse Source
This commit is contained in:
Scott Wilson
2025-12-02 17:28:26 -08:00
parent 29eaa64a1b
commit e598199e97
40 changed files with 2675 additions and 815 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/ee/services/license/license-fns.ts
View File

@@ -68,7 +68,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
secretVersioning: true, secretVersioning: true,
pitRecovery: false, pitRecovery: false,
ipAllowlisting: false, ipAllowlisting: false,
rbac: false, rbac: true,
githubOrgSync: false, githubOrgSync: false,
customRateLimits: false, customRateLimits: false,
subOrganization: false, subOrganization: false,

4
frontend/.storybook/decorators/RouterDecorator.tsx
View File

@@ -2,7 +2,7 @@ import { useMemo } from "react";
import type { Decorator } from "@storybook/react-vite"; import type { Decorator } from "@storybook/react-vite";
import { createRootRoute, createRouter, RouterProvider } from "@tanstack/react-router"; import { createRootRoute, createRouter, RouterProvider } from "@tanstack/react-router";
export const RouterDecorator: Decorator = (Story) => { export const RouterDecorator: Decorator = (Story, params) => {
const router = useMemo(() => { const router = useMemo(() => {
const routeTree = createRootRoute({ const routeTree = createRootRoute({
component: Story component: Story
@@ -11,7 +11,7 @@ export const RouterDecorator: Decorator = (Story) => {
return createRouter({ return createRouter({
routeTree routeTree
}); });
}, [Story]); }, [Story, params]);
return <RouterProvider router={router as any} />; return <RouterProvider router={router as any} />;
}; };

91
frontend/package-lock.json generated
View File

@@ -42,6 +42,7 @@
"@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.1.3", "@radix-ui/react-select": "^2.1.3",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2",
@@ -136,6 +137,7 @@
"prettier": "3.4.2", "prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.14", "prettier-plugin-tailwindcss": "^0.6.14",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.15.0", "typescript-eslint": "^8.15.0",
"vite": "^6.2.0", "vite": "^6.2.0",
@@ -3353,6 +3355,85 @@
} }
} }
}, },
"node_modules/@radix-ui/react-separator": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
"integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.1.4"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
"integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.2.4"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
"integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": { "node_modules/@radix-ui/react-slot": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -14777,6 +14858,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/tw-animate-css": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/Wombosvideo"
}
},
"node_modules/tweetnacl": { "node_modules/tweetnacl": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",

2
frontend/package.json
View File

@@ -51,6 +51,7 @@
"@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.1.3", "@radix-ui/react-select": "^2.1.3",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2",
@@ -145,6 +146,7 @@
"prettier": "3.4.2", "prettier": "3.4.2",
"prettier-plugin-tailwindcss": "^0.6.14", "prettier-plugin-tailwindcss": "^0.6.14",
"tailwindcss": "^4.1.14", "tailwindcss": "^4.1.14",
"tw-animate-css": "^1.4.0",
"typescript": "~5.6.2", "typescript": "~5.6.2",
"typescript-eslint": "^8.15.0", "typescript-eslint": "^8.15.0",
"vite": "^6.2.0", "vite": "^6.2.0",

4
frontend/src/components/v2/PageHeader/PageHeader.tsx
View File

@@ -32,7 +32,7 @@ export const PageHeader = ({ title, description, children, className, scope }: P
<div className="mr-4 flex w-full items-center"> <div className="mr-4 flex w-full items-center">
<h1 <h1
className={twMerge( className={twMerge(
"text-3xl font-medium text-white capitalize underline decoration-2 underline-offset-4", "text-2xl font-medium text-white capitalize underline decoration-2 underline-offset-4",
scope === "org" && "decoration-org/90", scope === "org" && "decoration-org/90",
scope === "instance" && "decoration-neutral/90", scope === "instance" && "decoration-neutral/90",
scope === "namespace" && "decoration-sub-org/90", scope === "namespace" && "decoration-sub-org/90",
@@ -51,6 +51,6 @@ export const PageHeader = ({ title, description, children, className, scope }: P
</div> </div>
<div className="flex items-center gap-2">{children}</div> <div className="flex items-center gap-2">{children}</div>
</div> </div>
<div className="mt-2 text-gray-400">{description}</div> <div className="mt-1.5 text-mineshaft-300">{description}</div>
</div> </div>
); );

62
frontend/src/components/v3/generic/Alert/Alert.tsx Normal file
View File

@@ -0,0 +1,62 @@
/* eslint-disable react/prop-types */
import * as React from "react";
import { cva, type VariantProps } from "cva";
import { cn } from "../../utils";
const alertVariants = cva(
"relative w-full rounded-sm border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
{
variants: {
variant: {
default: "bg-container text-card-foreground",
info: "bg-info/10 text-info border-info/20",
org: "bg-org/10 text-org border-org/20"
}
},
defaultVariants: {
variant: "default"
}
}
);
function UnstableAlert({
className,
variant,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
return (
<div
data-slot="alert"
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
);
}
function UnstableAlertTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-title"
className={cn("col-start-2 line-clamp-1 min-h-4 tracking-tight text-foreground", className)}
{...props}
/>
);
}
function UnstableAlertDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="alert-description"
className={cn(
"col-start-2 grid justify-items-start gap-1 text-sm text-foreground/75 [&_p]:leading-relaxed",
className
)}
{...props}
/>
);
}
export { UnstableAlert, UnstableAlertDescription, UnstableAlertTitle };

1
frontend/src/components/v3/generic/Alert/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Alert";

81
frontend/src/components/v3/generic/Badge/Badge.stories.tsx
View File

@@ -16,6 +16,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform"; import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform";
import { UnstableButtonGroup } from "../ButtonGroup";
import { Badge } from "./Badge"; import { Badge } from "./Badge";
/** /**
@@ -33,13 +34,34 @@ const meta = {
argTypes: { argTypes: {
variant: { variant: {
control: "select", control: "select",
options: ["neutral", "success", "info", "warning", "danger", "project", "org", "sub-org"] options: [
"default",
"outline",
"neutral",
"success",
"info",
"warning",
"danger",
"project",
"org",
"sub-org"
]
}, },
isTruncatable: { isTruncatable: {
table: { table: {
disable: true disable: true
} }
}, },
isFullWidth: {
table: {
disable: true
}
},
isSquare: {
table: {
disable: true
}
},
asChild: { asChild: {
table: { table: {
disable: true disable: true
@@ -57,6 +79,38 @@ const meta = {
export default meta; export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
export const Default: Story = {
name: "Variant: Default",
args: {
variant: "default",
children: <>Default</>
},
parameters: {
docs: {
description: {
story:
"Use this variant when other badge variants are not applicable or as the key when displaying key-value pairs with ButtonGroup."
}
}
}
};
export const Outline: Story = {
name: "Variant: Outline",
args: {
variant: "outline",
children: <>Outline</>
},
parameters: {
docs: {
description: {
story:
"Use this variant when other badge variants are not applicable or as the value when displaying key-value pairs with ButtonGroup."
}
}
}
};
export const Neutral: Story = { export const Neutral: Story = {
name: "Variant: Neutral", name: "Variant: Neutral",
args: { args: {
@@ -71,8 +125,7 @@ export const Neutral: Story = {
parameters: { parameters: {
docs: { docs: {
description: { description: {
story: story: "Use this variant when indicating neutral or disabled states."
"Use this variant when indicating neutral or disabled states or when linking to external documents."
} }
} }
} }
@@ -133,7 +186,8 @@ export const Info: Story = {
parameters: { parameters: {
docs: { docs: {
description: { description: {
story: "Use this variant when indicating informational states." story:
"Use this variant when indicating informational states or when linking to external documentation."
} }
} }
} }
@@ -374,3 +428,22 @@ export const IsFullWidth: Story = {
</div> </div>
) )
}; };
export const KeyValuePair: Story = {
name: "Example: Key-Value Pair",
args: {},
parameters: {
docs: {
description: {
story:
"Use a default and outline badge in conjunction with the `<ButtonGroup />` component to display key-value pairs."
}
}
},
decorators: () => (
<UnstableButtonGroup>
<Badge>Key</Badge>
<Badge variant="outline">Value</Badge>
</UnstableButtonGroup>
)
};

26
frontend/src/components/v3/generic/Badge/Badge.tsx
View File

@@ -6,7 +6,7 @@ import { cn } from "@app/components/v3/utils";
const badgeVariants = cva( const badgeVariants = cva(
[ [
"select-none items-center align-middle rounded-sm h-4.5 px-1.5 text-xs", "select-none border items-center align-middle rounded-sm h-4.5 px-1.5 text-xs",
"gap-x-1 [a&,button&]:cursor-pointer inline-flex font-normal", "gap-x-1 [a&,button&]:cursor-pointer inline-flex font-normal",
"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&_svg:not([class*='size-'])]:size-3", "[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:stroke-[2.25] [&_svg:not([class*='size-'])]:size-3",
"transition duration-200 ease-in-out" "transition duration-200 ease-in-out"
@@ -24,19 +24,22 @@ const badgeVariants = cva(
true: "w-4.5 justify-center px-0.5" true: "w-4.5 justify-center px-0.5"
}, },
variant: { variant: {
ghost: "text-mineshaft-200 gap-x-2", ghost: "text-foreground border-none",
neutral: "bg-neutral/25 text-neutral [a&,button&]:hover:bg-neutral/35", default: "bg-foreground text-background [a&,button&]:hover:bg-primary/35",
success: "bg-success/25 text-success [a&,button&]:hover:bg-success/35", outline: "text-foreground border-foreground border",
info: "bg-info/25 text-info [a&,button&]:hover:bg-info/35", neutral: "bg-neutral/15 border-neutral/10 text-neutral [a&,button&]:hover:bg-neutral/35",
warning: "bg-warning/25 text-warning [a&,button&]:hover:bg-warning/35", success: "bg-success/15 border-success/10 text-success [a&,button&]:hover:bg-success/35",
danger: "bg-danger/25 text-danger [a&,button&]:hover:bg-danger/35", info: "bg-info/15 border-info/10 border text-info [a&,button&]:hover:bg-info/35",
project: "bg-project/25 text-project [a&,button&]:hover:bg-project/35", warning: "bg-warning/15 border-warning/10 text-warning [a&,button&]:hover:bg-warning/35",
org: "bg-org/25 text-org [a&,button&]:hover:bg-org/35", danger: "bg-danger/15 border-danger/10 text-danger border [a&,button&]:hover:bg-danger/35",
"sub-org": "bg-sub-org/25 text-sub-org [a&,button&]:hover:bg-sub-org/35" project:
"bg-project/15 text-project border-project/10 border [a&,button&]:hover:bg-project/35",
org: "bg-org/15 border border-org/10 text-org [a&,button&]:hover:bg-org/35",
"sub-org": "bg-sub-org/15 border-sub-org/10 text-sub-org [a&,button&]:hover:bg-sub-org/35"
} }
}, },
defaultVariants: { defaultVariants: {
variant: "neutral" variant: "default"
} }
} }
); );
@@ -44,7 +47,6 @@ const badgeVariants = cva(
type TBadgeProps = VariantProps<typeof badgeVariants> & type TBadgeProps = VariantProps<typeof badgeVariants> &
React.ComponentProps<"span"> & { React.ComponentProps<"span"> & {
asChild?: boolean; asChild?: boolean;
variant: NonNullable<VariantProps<typeof badgeVariants>["variant"]>; // TODO: REMOVE
}; };
const Badge = forwardRef<HTMLSpanElement, TBadgeProps>( const Badge = forwardRef<HTMLSpanElement, TBadgeProps>(

357
frontend/src/components/v3/generic/Button/Button.stories.tsx Normal file
View File

@@ -0,0 +1,357 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
AsteriskIcon,
BanIcon,
CheckIcon,
CircleXIcon,
ExternalLinkIcon,
InfoIcon,
RadarIcon,
TriangleAlertIcon,
UserIcon
} from "lucide-react";
import { OrgIcon, ProjectIcon, SubOrgIcon } from "../../platform";
import { UnstableButton } from "./Button";
/**
* Buttons act as an indicator that can optionally be made interactable.
* You can place text and icons inside a Button.
* Buttons are often used for the indication of a status, state or scope.
*/
const meta = {
title: "Generic/Button",
component: UnstableButton,
parameters: {
layout: "centered"
},
tags: ["autodocs"],
argTypes: {
variant: {
control: "select",
options: [
"default",
"outline",
"neutral",
"success",
"info",
"warning",
"danger",
"project",
"org",
"sub-org"
]
},
size: {
control: "select",
options: ["xs", "sm", "md", "lg"]
},
isPending: {
control: "boolean"
},
isFullWidth: {
control: "boolean"
},
isDisabled: {
control: "boolean"
},
as: {
table: {
disable: true
}
},
children: {
table: {
disable: true
}
}
},
args: { children: "Button", isPending: false, isDisabled: false, isFullWidth: false, size: "md" }
} satisfies Meta<typeof UnstableButton>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
name: "Variant: Default",
args: {
variant: "default",
children: <>Default</>
},
parameters: {
docs: {
description: {
story:
"Use this variant when other Button variants are not applicable or as the key when displaying key-value pairs with ButtonGroup."
}
}
}
};
export const Outline: Story = {
name: "Variant: Outline",
args: {
variant: "outline",
children: <>Outline</>
},
parameters: {
docs: {
description: {
story:
"Use this variant when other Button variants are not applicable or as the value when displaying key-value pairs with ButtonGroup."
}
}
}
};
export const Neutral: Story = {
name: "Variant: Neutral",
args: {
variant: "neutral",
children: (
<>
<BanIcon />
Disabled
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating neutral or disabled states."
}
}
}
};
export const Ghost: Story = {
name: "Variant: Ghost",
args: {
variant: "ghost",
children: (
<>
<UserIcon />
User
</>
)
},
parameters: {
docs: {
description: {
story:
"Use this variant when indicating a configuration or property value. Avoid using this variant as an interactive element as it is not intuitive to interact with."
}
}
}
};
export const Success: Story = {
name: "Variant: Success",
args: {
variant: "success",
children: (
<>
<CheckIcon />
Success
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating successful or healthy states."
}
}
}
};
export const Info: Story = {
name: "Variant: Info",
args: {
variant: "info",
children: (
<>
<InfoIcon />
Info
</>
)
},
parameters: {
docs: {
description: {
story:
"Use this variant when indicating informational states or when linking to external documentation."
}
}
}
};
export const Warning: Story = {
name: "Variant: Warning",
args: {
variant: "warning",
children: (
<>
<TriangleAlertIcon />
Warning
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating activity or attention warranting states."
}
}
}
};
export const Danger: Story = {
name: "Variant: Danger",
args: {
variant: "danger",
children: (
<>
<CircleXIcon />
Danger
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating destructive or error states."
}
}
}
};
export const Organization: Story = {
name: "Variant: Organization",
args: {
variant: "org",
children: (
<>
<OrgIcon />
Organization
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating organization scope or links."
}
}
}
};
export const SubOrganization: Story = {
name: "Variant: Sub-Organization",
args: {
variant: "sub-org",
children: (
<>
<SubOrgIcon />
Sub-Organization
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating sub-organization scope or links."
}
}
}
};
export const Project: Story = {
name: "Variant: Project",
args: {
variant: "project",
children: (
<>
<ProjectIcon />
Project
</>
)
},
parameters: {
docs: {
description: {
story: "Use this variant when indicating project scope or links."
}
}
}
};
export const AsExternalLink: Story = {
name: "Example: As External Link",
args: {
variant: "info",
as: "a",
href: "https://www.infisical.com",
children: (
<>
Link <ExternalLinkIcon />
</>
)
},
parameters: {
docs: {
description: {
story: 'Use the `as="a"` prop to use a Button as an external `a` tag component.'
}
}
}
};
export const AsRouterLink: Story = {
name: "Example: As Router Link",
args: {
variant: "project",
as: "link",
children: (
<>
<RadarIcon />
Secret Scanning
</>
)
},
parameters: {
docs: {
description: {
story: 'Use the `as="link"` prop to use a Button as an internal `Link` component.'
}
}
}
};
export const IsFullWidth: Story = {
name: "Example: isFullWidth",
args: {
variant: "neutral",
isFullWidth: true,
children: (
<>
<AsteriskIcon />
Secret Value
</>
)
},
parameters: {
docs: {
description: {
story:
"Use the `isFullWidth` prop to expand the Buttons width to fill it's parent container."
}
}
},
decorators: (Story) => (
<div className="w-32">
<Story />
</div>
)
};

139
frontend/src/components/v3/generic/Button/Button.tsx Normal file
View File

@@ -0,0 +1,139 @@
import * as React from "react";
import { forwardRef } from "react";
import { Link, LinkProps } from "@tanstack/react-router";
import { cva, type VariantProps } from "cva";
import { Lottie } from "@app/components/v2";
import { cn } from "@app/components/v3/utils";
const buttonVariants = cva(
cn(
"inline-flex items-center active:scale-[0.95] justify-center border cursor-pointer whitespace-nowrap",
" text-sm transition-all disabled:pointer-events-none disabled:opacity-75 shrink-0",
"[&>svg]:pointer-events-none [&>svg]:shrink-0",
"focus-visible:ring-ring outline-0 focus-visible:ring-2 select-none"
),
{
variants: {
variant: {
default:
"border-foreground bg-foreground text-background hover:bg-foreground/90 hover:border-foreground/90",
neutral:
"border-neutral/10 bg-neutral/40 text-foreground hover:bg-neutral/50 hover:border-neutral/20",
outline: "text-foreground hover:bg-foreground/10 border-border hover:border-foreground/20",
ghost: "text-foreground hover:bg-foreground/10 border-transparent",
project:
"border-project/25 bg-project/15 text-foreground hover:bg-project/30 hover:border-project/30",
org: "border-org/25 bg-org/15 text-foreground hover:bg-org/30 hover:border-org/30",
"sub-org":
"border-sub-org/25 bg-sub-org/15 text-foreground hover:bg-sub-org/30 hover:border-sub-org/30",
success:
"border-success/25 bg-success/15 text-foreground hover:bg-success/30 hover:border-success/30",
info: "border-info/25 bg-info/15 text-foreground hover:bg-info/30 hover:border-info/30",
warning:
"border-warning/25 bg-warning/15 text-foreground hover:bg-warning/30 hover:border-warning/30",
danger:
"border-danger/25 bg-danger/15 text-foreground hover:bg-danger/30 hover:border-danger/30"
},
size: {
xs: "h-7 px-2 rounded-[3px] text-xs [&>svg]:size-3 gap-1.5",
sm: "h-8 px-2.5 rounded-[4px] text-sm [&>svg]:size-3 gap-1.5",
md: "h-9 px-3 rounded-[5px] text-sm [&>svg]:size-3.5 gap-1.5",
lg: "h-10 px-3 rounded-[6px] text-sm [&>svg]:size-3.5 gap-1.5"
},
isPending: {
true: "text-transparent"
},
isFullWidth: {
true: "w-full",
false: "w-fit"
}
},
defaultVariants: {
variant: "default",
size: "md"
}
}
);
type UnstableButtonProps = (VariantProps<typeof buttonVariants> & {
isPending?: boolean;
isFullWidth?: boolean;
isDisabled?: boolean;
}) &
(
| ({ as?: "button" | undefined } & React.ComponentProps<"button">)
| ({ as: "link"; className?: string } & LinkProps)
| ({ as: "a" } & React.ComponentProps<"a">)
);
const UnstableButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, UnstableButtonProps>(
(
{
className,
variant = "default",
size = "md",
isPending = false,
isFullWidth = false,
isDisabled = false,
children,
...props
},
ref
): JSX.Element => {
const sharedProps = {
"data-slot": "button",
className: cn(buttonVariants({ variant, size, isPending, isFullWidth }), className)
};
const child = (
<>
{children}
{isPending && (
<Lottie
icon={variant === "default" ? "infisical_loading_bw" : "infisical_loading_white"}
isAutoPlay
className="absolute w-8 rounded-xl"
/>
)}
</>
);
switch (props.as) {
case "a":
return (
<a
ref={ref as React.Ref<HTMLAnchorElement>}
target="_blank"
rel="noopener noreferrer"
{...props}
{...sharedProps}
>
{child}
</a>
);
case "link":
return (
<Link ref={ref as React.Ref<HTMLAnchorElement>} {...props} {...sharedProps}>
{child}
</Link>
);
default:
return (
<button
ref={ref as React.Ref<HTMLButtonElement>}
type="button"
disabled={isPending || isDisabled}
{...props}
{...sharedProps}
>
{child}
</button>
);
}
}
);
UnstableButton.displayName = "Button";
export { buttonVariants, UnstableButton, type UnstableButtonProps };

1
frontend/src/components/v3/generic/Button/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Button";

83
frontend/src/components/v3/generic/ButtonGroup/ButtonGroup.tsx Normal file
View File

@@ -0,0 +1,83 @@
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "cva";
import { cn } from "../../utils";
import { UnstableSeparator } from "../Separator";
const buttonGroupVariants = cva(
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
{
variants: {
orientation: {
horizontal:
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
vertical:
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
}
},
defaultVariants: {
orientation: "horizontal"
}
}
);
function UnstableButtonGroup({
className,
orientation,
...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
return (
<div
role="group"
data-slot="button-group"
data-orientation={orientation}
className={cn(buttonGroupVariants({ orientation }), className)}
{...props}
/>
);
}
function UnstableButtonGroupText({
className,
asChild = false,
...props
}: React.ComponentProps<"div"> & {
asChild?: boolean;
}) {
const Comp = asChild ? Slot : "div";
return (
<Comp
className={cn(
"flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
);
}
function UnstableButtonGroupSeparator({
className,
orientation = "vertical",
...props
}: React.ComponentProps<typeof UnstableSeparator>) {
return (
<UnstableSeparator
data-slot="button-group-separator"
orientation={orientation}
className={cn(
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
className
)}
{...props}
/>
);
}
export {
buttonGroupVariants,
UnstableButtonGroup,
UnstableButtonGroupSeparator,
UnstableButtonGroupText
};

1
frontend/src/components/v3/generic/ButtonGroup/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./ButtonGroup";

88
frontend/src/components/v3/generic/Card/Card.tsx Normal file
View File

@@ -0,0 +1,88 @@
/* eslint-disable react/prop-types */
import * as React from "react";
import { cn } from "../../utils";
function UnstableCard({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn("flex h-fit flex-col gap-6 rounded-[6px] text-foreground shadow-sm", className)}
{...props}
/>
);
}
function UnstableCardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn(
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-center gap-1 border-mineshaft-400/60 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
className
)}
{...props}
/>
);
}
function UnstableCardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn(
"flex items-center gap-1.5 leading-none font-semibold [&>svg]:inline-block [&>svg]:size-[18px]",
className
)}
{...props}
/>
);
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn(
"flex items-center gap-1 text-sm text-accent [&>svg]:inline-block [&>svg]:size-[12px]",
className
)}
{...props}
/>
);
}
function UnstableCardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
{...props}
/>
);
}
function UnstableCardContent({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="card-content" className={cn("", className)} {...props} />;
}
function UnstableCardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center border-border [.border-t]:pt-6", className)}
{...props}
/>
);
}
export {
UnstableCard,
UnstableCardAction,
UnstableCardContent,
CardDescription as UnstableCardDescription,
UnstableCardFooter,
UnstableCardHeader,
UnstableCardTitle
};

1
frontend/src/components/v3/generic/Card/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Card";

23
frontend/src/components/v3/generic/Detail/Detail.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { cn } from "../../utils";
function Detail({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="detail" className={cn("flex flex-col gap-y-1", className)} {...props} />;
}
function DetailLabel({ className, ...props }: React.ComponentProps<"div">) {
return (
<div data-slot="detail-label" className={cn("text-xs text-label", className)} {...props} />
);
}
function DetailValue({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="detail-value" className={cn("text-sm", className)} {...props} />;
}
function DetailGroup({ className, ...props }: React.ComponentProps<"div">) {
return (
<div data-slot="detail-group" className={cn("flex flex-col gap-y-4", className)} {...props} />
);
}
export { Detail, DetailGroup, DetailLabel, DetailValue };

1
frontend/src/components/v3/generic/Detail/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Detail";

254
frontend/src/components/v3/generic/Dropdown/Dropdown.tsx Normal file
View File

@@ -0,0 +1,254 @@
/* eslint-disable react/prop-types */
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import { cn } from "@app/components/v3/utils";
function UnstableDropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function UnstableDropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}
function UnstableDropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}
function UnstableDropdownMenuContent({
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin)",
"z-50 overflow-x-hidden overflow-y-auto rounded-[6px] border border-border/50 bg-popover p-1 text-xs text-foreground shadow-md",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
);
}
function UnstableDropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}
function UnstableDropdownMenuItem({
className,
inset,
variant = "default",
isDisabled,
...props
}: Omit<React.ComponentProps<typeof DropdownMenuPrimitive.Item>, "disabled"> & {
inset?: boolean;
variant?: "default" | "danger";
isDisabled?: boolean;
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"text-xs",
"data-[variant=danger]:text-danger data-[variant=danger]:focus:bg-danger/10 data-[variant=danger]:*:[svg]:!text-danger",
"relative flex cursor-pointer items-center gap-2 rounded-sm px-2 pt-2 pb-1.5 outline-0 select-none focus:bg-foreground/10",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3",
className
)}
disabled={isDisabled}
{...props}
/>
);
}
function UnstableDropdownMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"relative flex cursor-pointer items-center gap-2 rounded-sm pt-2 pr-8 pb-1.5 pl-2 text-xs outline-0 select-none",
"focus:bg-foreground/10",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"[&_svg]:pointer-events-none [&_svg]:mb-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
);
}
function UnstableDropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
}
function UnstableDropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"relative flex cursor-pointer items-center gap-2 rounded-sm pt-2 pr-8 pb-1.5 pl-2 text-xs outline-0 select-none",
"focus:bg-foreground/10",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"[&_svg]:pointer-events-none [&_svg]:mb-0.5 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
className
)}
{...props}
>
<span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
);
}
function UnstableDropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean;
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn("px-2 py-1.5 text-xs font-medium text-accent data-[inset]:pl-8", className)}
{...props}
/>
);
}
function UnstableDropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("-mx-1 my-1 h-px bg-border", className)}
{...props}
/>
);
}
function UnstableDropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn("ml-auto text-xs tracking-widest text-accent", className)}
{...props}
/>
);
}
function UnstableDropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
function UnstableDropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean;
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"flex cursor-default items-center rounded-sm px-2 py-1.5 text-xs outline-0 select-none focus:bg-foreground/10 data-[inset]:pl-8 data-[state=open]:bg-foreground/10",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-3.5" />
</DropdownMenuPrimitive.SubTrigger>
);
}
function UnstableDropdownMenuSubContent({
className,
sideOffset = 8,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[6px] border border-border bg-popover p-1 text-foreground shadow-lg",
className
)}
sideOffset={sideOffset}
{...props}
/>
);
}
type UnstableDropdownMenuChecked = DropdownMenuPrimitive.DropdownMenuCheckboxItemProps["checked"];
export {
UnstableDropdownMenu,
UnstableDropdownMenuCheckboxItem,
type UnstableDropdownMenuChecked,
UnstableDropdownMenuContent,
UnstableDropdownMenuGroup,
UnstableDropdownMenuItem,
UnstableDropdownMenuLabel,
UnstableDropdownMenuPortal,
UnstableDropdownMenuRadioGroup,
UnstableDropdownMenuRadioItem,
UnstableDropdownMenuSeparator,
UnstableDropdownMenuShortcut,
UnstableDropdownMenuSub,
UnstableDropdownMenuSubContent,
UnstableDropdownMenuSubTrigger,
UnstableDropdownMenuTrigger
};

1
frontend/src/components/v3/generic/Dropdown/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Dropdown";

100
frontend/src/components/v3/generic/Empty/Empty.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { cn } from "../../utils";
function UnstableEmpty({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty"
className={cn(
"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 border-dashed border-border bg-container p-6 text-center text-balance md:p-12",
className
)}
{...props}
/>
);
}
function UnstableEmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-header"
className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)}
{...props}
/>
);
}
// scott: TODO
// const emptyMediaVariants = cva(
// "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
// {
// variants: {
// variant: {
// default: "bg-transparent",
// icon: "bg-bunker-900 rounded text-foreground flex size-10 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-6"
// }
// },
// defaultVariants: {
// variant: "default"
// }
// }
// );
// function EmptyMedia({
// className,
// variant = "default",
// ...props
// }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
// return (
// <div
// data-slot="empty-icon"
// data-variant={variant}
// className={cn(emptyMediaVariants({ variant, className }))}
// {...props}
// />
// );
// }
function UnstableEmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-title"
className={cn("text-sm font-medium tracking-tight", className)}
{...props}
/>
);
}
function UnstableEmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
return (
<div
data-slot="empty-description"
className={cn(
"text-xs/relaxed text-muted [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
className
)}
{...props}
/>
);
}
function UnstableEmptyContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-content"
className={cn(
"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
className
)}
{...props}
/>
);
}
export {
UnstableEmpty,
UnstableEmptyContent,
UnstableEmptyDescription,
UnstableEmptyHeader,
UnstableEmptyTitle
};

1
frontend/src/components/v3/generic/Empty/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Empty";

112
frontend/src/components/v3/generic/IconButton/IconButton.tsx Normal file
View File

@@ -0,0 +1,112 @@
import * as React from "react";
import { forwardRef } from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "cva";
import { twMerge } from "tailwind-merge";
import { Lottie } from "@app/components/v2";
import { UnstableButton } from "@app/components/v3/generic";
import { cn } from "@app/components/v3/utils";
const iconButtonVariants = cva(
cn(
"inline-flex items-center active:scale-[0.99] justify-center border cursor-pointer whitespace-nowrap rounded-[4px] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-75 [&_svg]:pointer-events-none shrink-0 [&>svg]:shrink-0",
"focus-visible:ring-ring outline-0 focus-visible:ring-2"
),
{
variants: {
variant: {
default:
"border-foreground bg-foreground text-background hover:bg-foreground/90 hover:border-foreground/90",
accent:
"border-accent/10 bg-accent/40 text-foreground hover:bg-accent/50 hover:border-accent/20",
outline: "text-foreground hover:bg-foreground/20 border-border hover:border-foreground/50",
ghost: "text-foreground hover:bg-foreground/40 border-transparent",
project:
"border-project/75 bg-project/40 text-foreground hover:bg-project/50 hover:border-kms",
org: "border-org/75 bg-org/40 text-foreground hover:bg-org/50 hover:border-org",
"sub-org":
"border-sub-org/75 bg-sub-org/40 text-foreground hover:bg-sub-org/50 hover:border-namespace",
success:
"border-success/75 bg-success/40 text-foreground hover:bg-success/50 hover:border-success",
info: "border-info/75 bg-info/40 text-foreground hover:bg-info/50 hover:border-info",
warning:
"border-warning/75 bg-warning/40 text-foreground hover:bg-warning/50 hover:border-warning",
danger:
"border-danger/75 bg-danger/40 text-foreground hover:bg-danger/50 hover:border-danger"
},
size: {
xs: "h-6 w-6 [&>svg]:size-4 rounded-[5px] [&>svg]:stroke-[1.75]",
sm: "h-8 w-8 [&>svg]:size-5 [&>svg]:stroke-[1.5]",
md: "h-9 w-9 [&>svg]:size-6 [&>svg]:stroke-[1.5]",
lg: "h-10 w-10 [&>svg]:size-7 [&>svg]:stroke-[1.5]"
},
isPending: {
true: "text-transparent"
},
isFullWidth: {
true: "w-full",
false: "w-fit"
}
},
defaultVariants: {
variant: "default",
size: "md"
}
}
);
type UnstableIconButtonProps = React.ComponentProps<"button"> &
VariantProps<typeof iconButtonVariants> & {
asChild?: boolean;
isPending?: boolean;
isDisabled?: boolean;
};
const UnstableIconButton = forwardRef<HTMLButtonElement, UnstableIconButtonProps>(
(
{
className,
variant = "default",
size = "md",
asChild = false,
isPending = false,
disabled = false,
isDisabled = false,
children,
...props
},
ref
): JSX.Element => {
const Comp = asChild ? Slot : "button";
return (
<Comp
ref={ref}
data-slot="button"
className={cn(iconButtonVariants({ variant, size, isPending }), className)}
disabled={isPending || disabled || isDisabled}
{...props}
>
{children}
{isPending && (
<Lottie
icon={variant === "default" ? "infisical_loading_bw" : "infisical_loading_white"}
isAutoPlay
className={twMerge(
"absolute rounded-xl",
size === "xs" && "w-6",
size === "sm" && "w-7",
size === "md" && "w-8",
size === "lg" && "w-9"
)}
/>
)}
</Comp>
);
}
);
UnstableButton.displayName = "IconButton";
export { iconButtonVariants, UnstableIconButton, type UnstableIconButtonProps };

1
frontend/src/components/v3/generic/IconButton/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./IconButton";

9
frontend/src/components/v3/generic/PageLoader/PageLoader.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { Lottie } from "@app/components/v2";
export function UnstablePageLoader() {
return (
<div className="flex h-full w-full items-center justify-center">
<Lottie icon="infisical_loading" isAutoPlay className="w-24" />
</div>
);
}

1
frontend/src/components/v3/generic/PageLoader/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./PageLoader";

28
frontend/src/components/v3/generic/Separator/Separator.tsx Normal file
View File

@@ -0,0 +1,28 @@
/* eslint-disable react/prop-types */
import * as React from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "../../utils";
function UnstableSeparator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props}
/>
);
}
export { UnstableSeparator };

1
frontend/src/components/v3/generic/Separator/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Separator";

138
frontend/src/components/v3/generic/Table/Table.stories.tsx Normal file
View File

@@ -0,0 +1,138 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { CopyIcon, EditIcon, MoreHorizontalIcon, TrashIcon } from "lucide-react";
import {
Badge,
UnstableDropdownMenu,
UnstableDropdownMenuContent,
UnstableDropdownMenuItem,
UnstableDropdownMenuTrigger,
UnstableIconButton
} from "@app/components/v3/generic";
import { ProjectIcon } from "@app/components/v3/platform";
import {
UnstableTable,
UnstableTableBody,
UnstableTableCell,
UnstableTableHead,
UnstableTableHeader,
UnstableTableRow
} from "./Table";
const identities: {
name: string;
role: string;
managedBy?: { scope: "org" | "namespace"; name: string };
}[] = [
{
name: "machine-one",
role: "Admin",
managedBy: {
scope: "org",
name: "infisical"
}
},
{
name: "machine-two",
role: "Viewer",
managedBy: {
scope: "namespace",
name: "engineering"
}
},
{
name: "machine-three",
role: "Developer"
},
{
name: "machine-four",
role: "Admin",
managedBy: {
scope: "namespace",
name: "dev-ops"
}
},
{
name: "machine-five",
role: "Viewer",
managedBy: {
scope: "org",
name: "infisical"
}
},
{
name: "machine-six",
role: "Developer"
}
];
function TableDemo() {
return (
<UnstableTable className="w-[800px]">
<UnstableTableHeader>
<UnstableTableRow>
<UnstableTableHead className="w-1/3">Name</UnstableTableHead>
<UnstableTableHead className="w-1/3">Role</UnstableTableHead>
<UnstableTableHead className="w-1/3">Managed By</UnstableTableHead>
<UnstableTableHead className="text-right" />
</UnstableTableRow>
</UnstableTableHeader>
<UnstableTableBody>
{identities.map((identity) => (
<UnstableTableRow key={identity.name}>
<UnstableTableCell className="font-medium">{identity.name}</UnstableTableCell>
<UnstableTableCell>{identity.role}</UnstableTableCell>
<UnstableTableCell>
<Badge variant="project">
<ProjectIcon />
Project
</Badge>
</UnstableTableCell>
<UnstableTableCell className="text-right">
<UnstableDropdownMenu>
<UnstableDropdownMenuTrigger asChild>
<UnstableIconButton variant="ghost" size="xs">
<MoreHorizontalIcon />
</UnstableIconButton>
</UnstableDropdownMenuTrigger>
<UnstableDropdownMenuContent align="end" className="w-36">
<UnstableDropdownMenuItem>
<CopyIcon />
Copy ID
</UnstableDropdownMenuItem>
<UnstableDropdownMenuItem>
<EditIcon />
Edit Identity
</UnstableDropdownMenuItem>
<UnstableDropdownMenuItem variant="danger">
<TrashIcon />
Delete Identity
</UnstableDropdownMenuItem>
</UnstableDropdownMenuContent>
</UnstableDropdownMenu>
</UnstableTableCell>
</UnstableTableRow>
))}
</UnstableTableBody>
</UnstableTable>
);
}
const meta = {
title: "Generic/Table",
component: TableDemo,
parameters: {
layout: "centered"
},
tags: ["autodocs"],
argTypes: {}
} satisfies Meta<typeof TableDemo>;
export default meta;
type Story = StoryObj<typeof meta>;
export const KitchenSInk: Story = {
name: "Example: Kitchen Sink",
args: {}
};

109
frontend/src/components/v3/generic/Table/Table.tsx Normal file
View File

@@ -0,0 +1,109 @@
/* eslint-disable react/prop-types */
import * as React from "react";
import { cn } from "@app/components/v3/utils";
function UnstableTable({ className, ...props }: React.ComponentProps<"table">) {
return (
<div
data-slot="table-container"
className="relative w-full overflow-x-auto border border-border/50 bg-mineshaft-800/50"
>
<table
data-slot="table"
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
);
}
function UnstableTableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return (
<thead
data-slot="table-header"
className={cn("text-sm [&_tr]:border-b [&_tr]:hover:bg-transparent", className)}
{...props}
/>
);
}
function UnstableTableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return (
<tbody data-slot="table-body" className={cn("[&>tr]:last:border-b-0", className)} {...props} />
);
}
function UnstableTableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return (
<tfoot
data-slot="table-footer"
className={cn(
"border-t border-border/50 bg-muted/50 font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
);
}
function UnstableTableRow({ className, ...props }: React.ComponentProps<"tr">) {
return (
<tr
data-slot="table-row"
className={cn(
"border-b border-border/50 transition-colors hover:bg-foreground/5 data-[state=selected]:bg-foreground/5",
className
)}
{...props}
/>
);
}
function UnstableTableHead({ className, ...props }: React.ComponentProps<"th">) {
return (
<th
data-slot="table-head"
className={cn(
"h-[30px] border-x-0 border-t-0 border-b border-border/50 px-3 text-left align-middle text-xs whitespace-nowrap text-accent text-mineshaft-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
);
}
function UnstableTableCell({ className, ...props }: React.ComponentProps<"td">) {
return (
<td
data-slot="table-cell"
className={cn(
"h-[40px] px-3 align-middle whitespace-nowrap text-mineshaft-200 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className
)}
{...props}
/>
);
}
function UnstableTableCaption({ className, ...props }: React.ComponentProps<"caption">) {
return (
<caption
data-slot="table-caption"
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
);
}
export {
UnstableTable,
UnstableTableBody,
UnstableTableCaption,
UnstableTableCell,
UnstableTableFooter,
UnstableTableHead,
UnstableTableHeader,
UnstableTableRow
};

1
frontend/src/components/v3/generic/Table/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./Table";

11
frontend/src/components/v3/generic/index.ts
View File

@@ -1 +1,12 @@
export * from "./Alert";
export * from "./Badge"; export * from "./Badge";
export * from "./Button";
export * from "./ButtonGroup";
export * from "./Card";
export * from "./Detail";
export * from "./Dropdown";
export * from "./Empty";
export * from "./IconButton";
export * from "./PageLoader";
export * from "./Separator";
export * from "./Table";

12
frontend/src/components/v3/platform/ScopeIcons.tsx
View File

@@ -1,8 +1,8 @@
import { BoxesIcon, BoxIcon, Building2Icon, ServerIcon } from "lucide-react"; import { BoxesIcon, BoxIcon, Building2Icon, ServerIcon } from "lucide-react";
const InstanceIcon = ServerIcon; export {
const OrgIcon = Building2Icon; ServerIcon as InstanceIcon,
const SubOrgIcon = BoxesIcon; Building2Icon as OrgIcon,
const ProjectIcon = BoxIcon; BoxIcon as ProjectIcon,
BoxesIcon as SubOrgIcon
export { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon }; };

11
frontend/src/index.css
View File

@@ -1,4 +1,5 @@
@import "tailwindcss"; @import "tailwindcss";
@import "tw-animate-css";
@source not "../public"; @source not "../public";
@@ -39,7 +40,7 @@
/* Colors v2 */ /* Colors v2 */
--color-background: #19191c; --color-background: #19191c;
--color-foreground: white; --color-foreground: #ebebeb;
--color-success: #2ecc71; --color-success: #2ecc71;
--color-info: #63b0bd; --color-info: #63b0bd;
--color-warning: #f1c40f; --color-warning: #f1c40f;
@@ -48,6 +49,14 @@
--color-sub-org: #96ff59; --color-sub-org: #96ff59;
--color-project: #e0ed34; --color-project: #e0ed34;
--color-neutral: #adaeb0; --color-neutral: #adaeb0;
--color-border: #323439;
--color-label: #adaeb0;
--color-muted: #707174;
--color-popover: #111419;
--color-ring: #2d2f33;
--color-container: #16181a;
--color-accent: #7d7f80;
--color-muted-foreground: ;
/*legacy color schema */ /*legacy color schema */
--color-org-v1: #30b3ff; --color-org-v1: #30b3ff;

291
frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
View File

@@ -1,24 +1,36 @@
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Link, useNavigate, useParams } from "@tanstack/react-router"; import { Link, useNavigate, useParams } from "@tanstack/react-router";
import { formatRelative } from "date-fns"; import { ChevronLeftIcon, EllipsisIcon, InfoIcon } from "lucide-react";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan, ProjectPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan, ProjectPermissionCan } from "@app/components/permissions";
import { import {
Alert,
AlertDescription,
Button,
ConfirmActionModal, ConfirmActionModal,
DeleteActionModal, DeleteActionModal,
EmptyState, EmptyState,
PageHeader, PageHeader,
Spinner Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import {
OrgIcon,
UnstableAlert,
UnstableAlertDescription,
UnstableAlertTitle,
UnstableButton,
UnstableCard,
UnstableCardContent,
UnstableCardDescription,
UnstableCardHeader,
UnstableCardTitle,
UnstableDropdownMenuContent,
UnstableDropdownMenuItem,
UnstableDropdownMenuTrigger,
UnstablePageLoader
} from "@app/components/v3";
import { import {
OrgPermissionIdentityActions, OrgPermissionIdentityActions,
OrgPermissionSubjects, OrgPermissionSubjects,
@@ -36,7 +48,7 @@ import {
useGetProjectIdentityMembershipV2 useGetProjectIdentityMembershipV2
} from "@app/hooks/api"; } from "@app/hooks/api";
import { ActorType } from "@app/hooks/api/auditLogs/enums"; import { ActorType } from "@app/hooks/api/auditLogs/enums";
import { projectIdentityQuery } from "@app/hooks/api/projectIdentity"; import { projectIdentityQuery, useDeleteProjectIdentity } from "@app/hooks/api/projectIdentity";
import { ProjectIdentityAuthenticationSection } from "@app/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityAuthSection"; import { ProjectIdentityAuthenticationSection } from "@app/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityAuthSection";
import { ProjectIdentityDetailsSection } from "@app/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityDetailsSection"; import { ProjectIdentityDetailsSection } from "@app/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityDetailsSection";
import { ProjectAccessControlTabs } from "@app/types/project"; import { ProjectAccessControlTabs } from "@app/types/project";
@@ -56,8 +68,7 @@ const Page = () => {
const { data: identityMembershipDetails, isPending: isMembershipDetailsLoading } = const { data: identityMembershipDetails, isPending: isMembershipDetailsLoading } =
useGetProjectIdentityMembershipV2(projectId, identityId); useGetProjectIdentityMembershipV2(projectId, identityId);
const { mutateAsync: deleteMutateAsync, isPending: isDeletingIdentity } = const { mutateAsync: removeIdentityMutateAsync } = useDeleteProjectIdentityMembership();
useDeleteProjectIdentityMembership();
const isProjectIdentity = Boolean(identityMembershipDetails?.identity.projectId); const isProjectIdentity = Boolean(identityMembershipDetails?.identity.projectId);
const isNonScopedIdentity = const isNonScopedIdentity =
@@ -75,7 +86,10 @@ const Page = () => {
enabled: isProjectIdentity enabled: isProjectIdentity
}); });
const { mutateAsync: deleteIdentity } = useDeleteProjectIdentity();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"removeIdentity",
"deleteIdentity", "deleteIdentity",
"assumePrivileges" "assumePrivileges"
] as const); ] as const);
@@ -104,7 +118,7 @@ const Page = () => {
}; };
const onRemoveIdentitySubmit = async () => { const onRemoveIdentitySubmit = async () => {
await deleteMutateAsync({ await removeIdentityMutateAsync({
identityId, identityId,
projectId projectId
}); });
@@ -112,7 +126,7 @@ const Page = () => {
text: "Successfully removed machine identity from project", text: "Successfully removed machine identity from project",
type: "success" type: "success"
}); });
handlePopUpClose("deleteIdentity"); handlePopUpClose("removeIdentity");
navigate({ navigate({
to: `${getProjectBaseURL(currentProject.type)}/access-management` as const, to: `${getProjectBaseURL(currentProject.type)}/access-management` as const,
params: { params: {
@@ -125,16 +139,35 @@ const Page = () => {
}); });
}; };
const handleDeleteIdentity = async () => {
if (!identity) return;
try {
await deleteIdentity({
identityId: identity.id,
projectId: identity.projectId!
});
navigate({
to: `${getProjectBaseURL(currentProject.type)}/access-management`,
search: {
selectedTab: "identities"
}
});
} catch {
createNotification({
type: "error",
text: "Failed to delete project machine identity"
});
}
};
if (isMembershipDetailsLoading || (isProjectIdentity && isProjectIdentityPending)) { if (isMembershipDetailsLoading || (isProjectIdentity && isProjectIdentityPending)) {
return ( return <UnstablePageLoader />;
<div className="flex w-full items-center justify-center p-24">
<Spinner />
</div>
);
} }
return ( return (
<div className="mx-auto flex max-w-8xl flex-col justify-between bg-bunker-800 text-white"> <div className="mx-auto flex max-w-8xl flex-col">
{identityMembershipDetails ? ( {identityMembershipDetails ? (
<> <>
<Link <Link
@@ -146,127 +179,140 @@ const Page = () => {
search={{ search={{
selectedTab: ProjectAccessControlTabs.Identities selectedTab: ProjectAccessControlTabs.Identities
}} }}
className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400" className="mb-3 flex w-fit items-center gap-x-1 text-sm text-mineshaft-400 transition duration-100 hover:text-mineshaft-400/80"
> >
<FontAwesomeIcon icon={faChevronLeft} /> <ChevronLeftIcon size={16} />
Project Machine Identities Project Machine Identities
</Link> </Link>
<PageHeader <PageHeader
scope={currentProject.type} scope={currentProject.type}
title={identityMembershipDetails?.identity?.name} className="mb-20"
description={`Machine identity ${isProjectIdentity ? "created" : "added"} on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`} description={`Configure and manage${isProjectIdentity ? " machine identity and " : " "}project access control`}
className={!isProjectIdentity ? "mb-4" : undefined} title={identityMembershipDetails.identity.name}
> >
<div className="flex items-center gap-2"> <DropdownMenu>
<Button <UnstableDropdownMenuTrigger asChild>
variant="outline_bg" <UnstableButton variant="outline">
size="xs" Options
onClick={() => { <EllipsisIcon />
navigator.clipboard.writeText(identityMembershipDetails.id); </UnstableButton>
createNotification({ </UnstableDropdownMenuTrigger>
text: "Membership ID copied to clipboard", <UnstableDropdownMenuContent align="end">
type: "success" <UnstableDropdownMenuItem
}); onClick={() => {
}} navigator.clipboard.writeText(identityMembershipDetails.id);
> createNotification({
Copy Membership ID text: "Machine identity ID copied to clipboard",
</Button> type: "info"
<ProjectPermissionCan });
I={ProjectPermissionIdentityActions.AssumePrivileges} }}
a={subject(ProjectPermissionSub.Identity, { >
identityId: identityMembershipDetails?.identity.id Copy Machine Identity ID
})} </UnstableDropdownMenuItem>
renderTooltip <ProjectPermissionCan
allowedLabel="Assume privileges of the machine identity" I={ProjectPermissionIdentityActions.AssumePrivileges}
passThrough={false} a={subject(ProjectPermissionSub.Identity, {
> identityId: identityMembershipDetails?.identity.id
{(isAllowed) => ( })}
<Button passThrough={false}
variant="outline_bg" >
size="xs" {(isAllowed) => (
isDisabled={!isAllowed} <UnstableDropdownMenuItem
onClick={() => handlePopUpOpen("assumePrivileges")} isDisabled={!isAllowed}
> onClick={() => handlePopUpOpen("assumePrivileges")}
Assume Privileges >
</Button> Assume Privileges
)} <Tooltip
</ProjectPermissionCan> side="bottom"
{!isProjectIdentity && ( content="Assume the privileges of the machine identity, allowing you to replicate their access behavior."
>
<div>
<InfoIcon className="text-muted" />
</div>
</Tooltip>
</UnstableDropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan <ProjectPermissionCan
I={ProjectPermissionActions.Delete} I={ProjectPermissionActions.Delete}
a={subject(ProjectPermissionSub.Identity, { a={subject(ProjectPermissionSub.Identity, {
identityId: identityMembershipDetails?.identity?.id identityId: identityMembershipDetails?.identity?.id
})} })}
renderTooltip
allowedLabel="Remove from project"
> >
{(isAllowed) => ( {(isAllowed) => (
<Button <UnstableDropdownMenuItem
colorSchema="danger" variant="danger"
variant="outline_bg"
size="xs"
isDisabled={!isAllowed} isDisabled={!isAllowed}
isLoading={isDeletingIdentity} onClick={() =>
onClick={() => handlePopUpOpen("deleteIdentity")} isProjectIdentity
? handlePopUpOpen("deleteIdentity")
: handlePopUpOpen("removeIdentity")
}
> >
Remove Machine Identity {isProjectIdentity ? "Delete Machine Identity" : "Remove From Project"}
</Button> </UnstableDropdownMenuItem>
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>
)} </UnstableDropdownMenuContent>
</div> </DropdownMenu>
</PageHeader> </PageHeader>
{!isProjectIdentity && ( <div className="flex flex-col gap-20 lg:flex-row">
<Alert hideTitle iconClassName="text-info" className="mb-4 border-info/50 bg-info/10"> <ProjectIdentityDetailsSection
<AlertDescription> identity={identity || { ...identityMembershipDetails?.identity, projectId: "" }}
This machine identity is managed by your organization.{" "} isOrgIdentity={!isProjectIdentity}
<OrgPermissionCan membership={identityMembershipDetails!}
I={OrgPermissionIdentityActions.Read} />
an={OrgPermissionSubjects.Identity}
> <div className="flex flex-1 flex-col gap-y-20">
{(isAllowed) => {identity ? (
isAllowed ? (
<Link
to="/organizations/$orgId/identities/$identityId"
params={{
identityId,
orgId: currentOrg.id
}}
>
<span className="cursor-pointer text-info underline underline-offset-2">
Click here to manage machine identity.
</span>
</Link>
) : null
}
</OrgPermissionCan>
</AlertDescription>
</Alert>
)}
<div className="flex gap-x-4">
{identity ? (
<div className="flex w-72 flex-col gap-y-4">
<ProjectIdentityDetailsSection
identity={identity}
membership={identityMembershipDetails!}
/>
<ProjectIdentityAuthenticationSection <ProjectIdentityAuthenticationSection
identity={identity} identity={identity}
refetchIdentity={() => refetchIdentity()} refetchIdentity={() => refetchIdentity()}
/> />
</div> ) : (
) : ( <UnstableCard>
<div> <UnstableCardHeader className="border-b">
<div className="flex w-72 flex-col gap-y-4"> <UnstableCardTitle>Authentication</UnstableCardTitle>
<ProjectIdentityDetailsSection <UnstableCardDescription>
identity={{ ...identityMembershipDetails?.identity, projectId: "" }} Configure authentication methods
isOrgIdentity </UnstableCardDescription>
membership={identityMembershipDetails!} </UnstableCardHeader>
/> <UnstableCardContent>
</div> <UnstableAlert variant="org">
</div> <OrgIcon />
)} <UnstableAlertTitle>
<div className="flex-1"> Machine identity managed by organization
</UnstableAlertTitle>
<UnstableAlertDescription>
<p>
This machine identity&apos;s authentication methods are controlled by your
organization. To make changes,{" "}
<OrgPermissionCan
I={OrgPermissionIdentityActions.Read}
an={OrgPermissionSubjects.Identity}
>
{(isAllowed) =>
isAllowed ? (
<Link
to="/organizations/$orgId/identities/$identityId"
className="inline-block cursor-pointer text-foreground underline underline-offset-2"
params={{
identityId,
orgId: currentOrg.id
}}
>
go to organization access control
</Link>
) : null
}
</OrgPermissionCan>
.
</p>
</UnstableAlertDescription>
</UnstableAlert>
</UnstableCardContent>
</UnstableCard>
)}
<IdentityRoleDetailsSection <IdentityRoleDetailsSection
identityMembershipDetails={identityMembershipDetails} identityMembershipDetails={identityMembershipDetails}
isMembershipDetailsLoading={isMembershipDetailsLoading} isMembershipDetailsLoading={isMembershipDetailsLoading}
@@ -277,9 +323,9 @@ const Page = () => {
</div> </div>
</div> </div>
<DeleteActionModal <DeleteActionModal
isOpen={popUp.deleteIdentity.isOpen} isOpen={popUp.removeIdentity.isOpen}
title={`Are you sure you want to remove ${identityMembershipDetails?.identity?.name} from the project?`} title={`Are you sure you want to remove ${identityMembershipDetails?.identity?.name} from the project?`}
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)} onChange={(isOpen) => handlePopUpToggle("removeIdentity", isOpen)}
deleteKey="remove" deleteKey="remove"
onDeleteApproved={() => onRemoveIdentitySubmit()} onDeleteApproved={() => onRemoveIdentitySubmit()}
/> />
@@ -292,6 +338,13 @@ const Page = () => {
onConfirmed={handleAssumePrivileges} onConfirmed={handleAssumePrivileges}
buttonText="Confirm" buttonText="Confirm"
/> />
<DeleteActionModal
isOpen={popUp.deleteIdentity.isOpen}
title={`Are you sure you want to delete ${identity?.name}?`}
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
deleteKey="confirm"
onDeleteApproved={handleDeleteIdentity}
/>
</> </>
) : ( ) : (
<EmptyState title="Error: Unable to find the machine identity." className="py-12" /> <EmptyState title="Error: Unable to find the machine identity." className="py-12" />

92
frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx
View File

@@ -1,6 +1,6 @@
import { Controller, FormProvider, useForm } from "react-hook-form"; import { Controller, FormProvider, useForm } from "react-hook-form";
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faCaretDown, faChevronLeft, faClock, faSave } from "@fortawesome/free-solid-svg-icons"; import { faCaretDown, faClock, faSave } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { format, formatDistance } from "date-fns"; import { format, formatDistance } from "date-fns";
@@ -21,6 +21,7 @@ import {
Tag, Tag,
Tooltip Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { UnstableSeparator } from "@app/components/v3";
import { import {
ProjectPermissionIdentityActions, ProjectPermissionIdentityActions,
ProjectPermissionSub, ProjectPermissionSub,
@@ -180,55 +181,9 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
} }
return ( return (
<form <form className="flex flex-col gap-y-4" onSubmit={handleSubmit(onSubmit)}>
onSubmit={handleSubmit(onSubmit)}
className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<FormProvider {...form}> <FormProvider {...form}>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2"> <div>
<Button
leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
className="text-lg font-medium text-mineshaft-100"
variant="link"
onClick={onGoBack}
>
Back
</Button>
<div className="flex items-center space-x-4">
{isDirty && (
<Button
className="mr-4 text-mineshaft-300"
variant="link"
isDisabled={isSubmitting}
isLoading={isSubmitting}
onClick={onGoBack}
>
Discard
</Button>
)}
<div className="flex items-center">
<Button
variant="outline_bg"
type="submit"
className={twMerge(
"mr-4 h-10 border border-primary",
isDirty && "bg-primary text-black"
)}
isDisabled={isSubmitting || !isDirty || isDisabled}
isLoading={isSubmitting}
leftIcon={<FontAwesomeIcon icon={faSave} />}
>
Save
</Button>
<AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
</div>
</div>
</div>
<div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
<div className="text-lg">Overview</div>
<p className="mb-4 text-sm text-mineshaft-300">
Additional privileges take precedence over roles when permissions conflict
</p>
<div className="flex items-end space-x-6"> <div className="flex items-end space-x-6">
<div className="w-full max-w-md"> <div className="w-full max-w-md">
<Controller <Controller
@@ -344,10 +299,29 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
</div> </div>
</div> </div>
</div> </div>
<div className="p-4"> <UnstableSeparator />
<div className="mb-2 text-lg">Policies</div> <div>
<div className="mb-3 flex w-full items-center justify-between">
<div className="text-lg">Policies</div>
<div className="flex items-center space-x-4">
{isDirty && (
<Button
className="mr-4 text-mineshaft-300"
variant="link"
isDisabled={isSubmitting}
isLoading={isSubmitting}
onClick={onGoBack}
>
Discard Changes
</Button>
)}
<div className="flex items-center">
<AddPoliciesButton isDisabled={isDisabled} projectType={currentProject.type} />
</div>
</div>
</div>
{(isCreate || !isPending) && <PermissionEmptyState />} {(isCreate || !isPending) && <PermissionEmptyState />}
<div> <div className="scrollbar-thin max-h-[50vh] overflow-y-auto">
{(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map( {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map(
(permissionSubject) => ( (permissionSubject) => (
<GeneralPermissionPolicies <GeneralPermissionPolicies
@@ -363,6 +337,20 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
)} )}
</div> </div>
</div> </div>
<UnstableSeparator />
<div className="flex w-full items-center justify-end gap-x-2">
<Button colorSchema="secondary" variant="plain" onClick={onGoBack}>
Cancel
</Button>
<Button
type="submit"
isDisabled={isSubmitting || !isDirty || isDisabled}
isLoading={isSubmitting}
leftIcon={<FontAwesomeIcon icon={faSave} />}
>
Save
</Button>
</div>
</FormProvider> </FormProvider>
</form> </form>
); );

422
frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeSection.tsx
View File

@@ -1,27 +1,36 @@
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faEllipsisV, faFolder, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format, formatDistance } from "date-fns"; import { format, formatDistance } from "date-fns";
import { AnimatePresence, motion } from "framer-motion"; import { ClockAlertIcon, ClockIcon, EllipsisIcon, PlusIcon } from "lucide-react";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { DeleteActionModal, Lottie, Modal, ModalContent, Tooltip } from "@app/components/v2";
import { import {
DeleteActionModal, Badge,
EmptyState, UnstableButton,
IconButton, UnstableCard,
Table, UnstableCardAction,
TableContainer, UnstableCardContent,
TableSkeleton, UnstableCardDescription,
Tag, UnstableCardHeader,
TBody, UnstableCardTitle,
Td, UnstableDropdownMenu,
Th, UnstableDropdownMenuContent,
THead, UnstableDropdownMenuItem,
Tooltip, UnstableDropdownMenuTrigger,
Tr UnstableEmpty,
} from "@app/components/v2"; UnstableEmptyContent,
UnstableEmptyDescription,
UnstableEmptyHeader,
UnstableEmptyTitle,
UnstableIconButton,
UnstableTable,
UnstableTableBody,
UnstableTableCell,
UnstableTableHead,
UnstableTableHeader,
UnstableTableRow
} from "@app/components/v3";
import { import {
ProjectPermissionActions, ProjectPermissionActions,
ProjectPermissionIdentityActions, ProjectPermissionIdentityActions,
@@ -67,193 +76,230 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
handlePopUpClose("deletePrivilege"); handlePopUpClose("deletePrivilege");
}; };
return ( const hasAdditionalPrivileges = Boolean(identityProjectPrivileges?.length);
<div className="relative">
<AnimatePresence>
{popUp?.modifyPrivilege.isOpen ? (
<motion.div
key="privilege-modify"
transition={{ duration: 0.3 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
className="absolute min-h-40 w-full"
>
<IdentityProjectAdditionalPrivilegeModifySection
onGoBack={() => handlePopUpClose("modifyPrivilege")}
identityId={identityId}
privilegeId={(popUp?.modifyPrivilege?.data as { id: string })?.id}
isDisabled={permission.cannot(
ProjectPermissionIdentityActions.Edit,
subject(ProjectPermissionSub.Identity, {
identityId
})
)}
/>
</motion.div>
) : (
<motion.div
key="privilege-list"
transition={{ duration: 0.3 }}
initial={{ opacity: 0, translateX: 0 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: -30 }}
className="absolute w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-medium text-mineshaft-100">
Project Additional Privileges
</h3>
return (
<>
<UnstableCard>
<UnstableCardHeader className="border-b">
<UnstableCardTitle>Project Additional Privileges</UnstableCardTitle>
<UnstableCardDescription>
Assign one-off policies to this machine identity
</UnstableCardDescription>
{hasAdditionalPrivileges && (
<UnstableCardAction>
<ProjectPermissionCan <ProjectPermissionCan
I={ProjectPermissionActions.Edit} I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, { a={subject(ProjectPermissionSub.Identity, {
identityId identityId
})} })}
renderTooltip
allowedLabel="Add Privilege"
> >
{(isAllowed) => ( {(isAllowed) => (
<IconButton <UnstableButton
ariaLabel="copy icon" variant="project"
variant="plain" size="xs"
className="group relative"
onClick={() => { onClick={() => {
handlePopUpOpen("modifyPrivilege"); handlePopUpOpen("modifyPrivilege");
}} }}
isDisabled={!isAllowed} isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faPlus} /> <PlusIcon />
</IconButton> Add Additional Privileges
</UnstableButton>
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>
</UnstableCardAction>
)}
</UnstableCardHeader>
<UnstableCardContent>
{/* eslint-disable-next-line no-nested-ternary */}
{isPending ? (
// scott: todo proper loader
<div className="flex h-40 w-full items-center justify-center">
<Lottie icon="infisical_loading_white" isAutoPlay className="w-16" />
</div> </div>
<div className="py-4"> ) : identityProjectPrivileges?.length ? (
<TableContainer> <UnstableTable>
<Table> <UnstableTableHeader>
<THead> <UnstableTableRow>
<Tr> <UnstableTableHead className="w-1/2">Name</UnstableTableHead>
<Th>Name</Th> <UnstableTableHead className="w-1/2">Duration</UnstableTableHead>
<Th>Duration</Th> <UnstableTableHead className="w-5" />
<Th className="w-5" /> </UnstableTableRow>
</Tr> </UnstableTableHeader>
</THead> <UnstableTableBody>
<TBody> {!isPending &&
{isPending && ( identityProjectPrivileges?.map((privilegeDetails) => {
<TableSkeleton columns={3} innerKey="user-project-identity-memberships" /> const isTemporary = privilegeDetails?.isTemporary;
)} const isExpired =
{!isPending && privilegeDetails.isTemporary &&
identityProjectPrivileges?.map((privilegeDetails) => { new Date() > new Date(privilegeDetails.temporaryAccessEndTime || "");
const isTemporary = privilegeDetails?.isTemporary;
const isExpired =
privilegeDetails.isTemporary &&
new Date() > new Date(privilegeDetails.temporaryAccessEndTime || "");
let text = "Permanent"; let text = "Permanent";
let toolTipText = "Non-Expiring Access"; let toolTipText = "Non-Expiring Access";
if (privilegeDetails.isTemporary) { if (privilegeDetails.isTemporary) {
if (isExpired) { if (isExpired) {
text = "Access Expired"; text = "Access Expired";
toolTipText = "Timed Access Expired"; toolTipText = "Timed Access Expired";
} else { } else {
text = formatDistance( text = formatDistance(
new Date(privilegeDetails.temporaryAccessEndTime || ""), new Date(privilegeDetails.temporaryAccessEndTime || ""),
new Date() new Date()
);
toolTipText = `Until ${format(
new Date(privilegeDetails.temporaryAccessEndTime || ""),
"yyyy-MM-dd hh:mm:ss aaa"
)}`;
}
}
return (
<Tr
key={`user-project-privilege-${privilegeDetails?.id}`}
className="group w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onKeyDown={(evt) => {
if (evt.key === "Enter") {
handlePopUpOpen("modifyPrivilege", privilegeDetails);
}
}}
onClick={() => handlePopUpOpen("modifyPrivilege", privilegeDetails)}
>
<Td>{privilegeDetails.slug}</Td>
<Td>
<Tooltip asChild={false} content={toolTipText}>
<Tag
className={twMerge(
"capitalize",
isTemporary && "text-primary",
isExpired && "text-red-600"
)}
>
{text}
</Tag>
</Tooltip>
</Td>
<Td>
<div className="flex space-x-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId
})}
renderTooltip
allowedLabel="Remove Role"
>
{(isAllowed) => (
<IconButton
colorSchema="danger"
ariaLabel="copy icon"
variant="plain"
className="group relative"
isDisabled={!isAllowed}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handlePopUpOpen("deletePrivilege", {
id: privilegeDetails?.id,
slug: privilegeDetails?.slug
});
}}
>
<FontAwesomeIcon icon={faTrash} />
</IconButton>
)}
</ProjectPermissionCan>
<IconButton ariaLabel="more-icon" variant="plain">
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
</div>
</Td>
</Tr>
); );
})} toolTipText = `Until ${format(
</TBody> new Date(privilegeDetails.temporaryAccessEndTime || ""),
</Table> "yyyy-MM-dd hh:mm:ss aaa"
{!isPending && !identityProjectPrivileges?.length && ( )}`;
<EmptyState }
title="This machine identity has no additional privileges" }
icon={faFolder}
/> return (
)} <UnstableTableRow key={`user-project-privilege-${privilegeDetails?.id}`}>
</TableContainer> <UnstableTableCell className="max-w-0 truncate">
</div> {privilegeDetails.slug}
<DeleteActionModal </UnstableTableCell>
isOpen={popUp.deletePrivilege.isOpen} <UnstableTableCell>
deleteKey="remove" {isTemporary ? (
title={`Do you want to remove privilege ${ <Tooltip content={toolTipText}>
(popUp?.deletePrivilege?.data as { slug: string; id: string })?.slug <Badge
}?`} className="capitalize"
onChange={(isOpen) => handlePopUpToggle("deletePrivilege", isOpen)} variant={isExpired ? "danger" : "warning"}
onDeleteApproved={() => handlePrivilegeDelete()} >
/> {isExpired ? <ClockAlertIcon /> : <ClockIcon />}
</motion.div> {text}
)} </Badge>
</AnimatePresence> </Tooltip>
</div> ) : (
text
)}
</UnstableTableCell>
<UnstableTableCell>
<UnstableDropdownMenu>
<UnstableDropdownMenuTrigger asChild>
<UnstableIconButton size="xs" variant="ghost">
<EllipsisIcon />
</UnstableIconButton>
</UnstableDropdownMenuTrigger>
<UnstableDropdownMenuContent align="end">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId
})}
renderTooltip
allowedLabel="Remove Role"
>
{(isAllowed) => (
<UnstableDropdownMenuItem
isDisabled={!isAllowed}
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("modifyPrivilege", privilegeDetails);
}}
>
Edit Additional Privilege
</UnstableDropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId
})}
renderTooltip
allowedLabel="Remove Role"
>
{(isAllowed) => (
<UnstableDropdownMenuItem
isDisabled={!isAllowed}
variant="danger"
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deletePrivilege", {
id: privilegeDetails?.id,
slug: privilegeDetails?.slug
});
}}
>
Remove Additional Privilege
</UnstableDropdownMenuItem>
)}
</ProjectPermissionCan>
</UnstableDropdownMenuContent>
</UnstableDropdownMenu>
</UnstableTableCell>
</UnstableTableRow>
);
})}
</UnstableTableBody>
</UnstableTable>
) : (
<UnstableEmpty className="border">
<UnstableEmptyHeader>
<UnstableEmptyTitle>
This machine identity has no additional privileges
</UnstableEmptyTitle>
<UnstableEmptyDescription>
Add an additional privilege to grant one-off access policies
</UnstableEmptyDescription>
</UnstableEmptyHeader>
<UnstableEmptyContent>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId
})}
>
{(isAllowed) => (
<UnstableButton
variant="project"
size="xs"
onClick={() => {
handlePopUpOpen("modifyPrivilege");
}}
isDisabled={!isAllowed}
>
<PlusIcon />
Add Additional Privileges
</UnstableButton>
)}
</ProjectPermissionCan>
</UnstableEmptyContent>
</UnstableEmpty>
)}
</UnstableCardContent>
</UnstableCard>
<Modal
isOpen={popUp.modifyPrivilege.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("modifyPrivilege", isOpen)}
>
<ModalContent
className="max-w-6xl"
title="Additional Privileges"
subTitle="Additional privileges take precedence over roles when permissions conflict"
>
<IdentityProjectAdditionalPrivilegeModifySection
onGoBack={() => handlePopUpClose("modifyPrivilege")}
identityId={identityId}
privilegeId={(popUp?.modifyPrivilege?.data as { id: string })?.id}
isDisabled={permission.cannot(
ProjectPermissionIdentityActions.Edit,
subject(ProjectPermissionSub.Identity, {
identityId
})
)}
/>
</ModalContent>
</Modal>
<DeleteActionModal
isOpen={popUp.deletePrivilege.isOpen}
deleteKey="remove"
title={`Do you want to remove privilege ${
(popUp?.deletePrivilege?.data as { slug: string; id: string })?.slug
}?`}
onChange={(isOpen) => handlePopUpToggle("deletePrivilege", isOpen)}
onDeleteApproved={() => handlePrivilegeDelete()}
/>
</>
); );
}; };

349
frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
View File

@@ -1,28 +1,36 @@
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faFolder, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format, formatDistance } from "date-fns"; import { format, formatDistance } from "date-fns";
import { twMerge } from "tailwind-merge"; import { ClockAlertIcon, ClockIcon, EllipsisIcon, PencilIcon } from "lucide-react";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { DeleteActionModal, Lottie, Modal, ModalContent, Tooltip } from "@app/components/v2";
import { import {
DeleteActionModal, Badge,
EmptyState, UnstableButton,
IconButton, UnstableCard,
Modal, UnstableCardAction,
ModalContent, UnstableCardContent,
Table, UnstableCardDescription,
TableContainer, UnstableCardHeader,
TableSkeleton, UnstableCardTitle,
Tag, UnstableDropdownMenu,
TBody, UnstableDropdownMenuContent,
Td, UnstableDropdownMenuItem,
Th, UnstableDropdownMenuTrigger,
THead, UnstableEmpty,
Tooltip, UnstableEmptyContent,
Tr UnstableEmptyDescription,
} from "@app/components/v2"; UnstableEmptyHeader,
UnstableEmptyTitle,
UnstableIconButton,
UnstableTable,
UnstableTableBody,
UnstableTableCell,
UnstableTableHead,
UnstableTableHeader,
UnstableTableRow
} from "@app/components/v3";
import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionSub, useProject } from "@app/context";
import { formatProjectRoleName } from "@app/helpers/roles"; import { formatProjectRoleName } from "@app/helpers/roles";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
@@ -83,133 +91,186 @@ export const IdentityRoleDetailsSection = ({
handlePopUpClose("deleteRole"); handlePopUpClose("deleteRole");
}; };
const hasRoles = Boolean(identityMembershipDetails?.roles.length);
return ( return (
<div className="mb-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4"> <UnstableCard>
<h3 className="text-lg font-medium text-mineshaft-100">Project Roles</h3> <UnstableCardHeader className="border-b">
<ProjectPermissionCan <UnstableCardTitle>Project Roles</UnstableCardTitle>
I={ProjectPermissionActions.Edit} <UnstableCardDescription>
a={subject(ProjectPermissionSub.Identity, { Manage roles assigned to this machine identity
identityId: identityMembershipDetails.identity.id </UnstableCardDescription>
})} {hasRoles && (
renderTooltip <UnstableCardAction>
allowedLabel="Edit Role(s)" <ProjectPermissionCan
> I={ProjectPermissionActions.Edit}
{(isAllowed) => ( a={subject(ProjectPermissionSub.Identity, {
<IconButton identityId: identityMembershipDetails.identity.id
ariaLabel="copy icon"
variant="plain"
className="group relative"
onClick={() => {
handlePopUpOpen("modifyRole");
}}
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faPencil} />
</IconButton>
)}
</ProjectPermissionCan>
</div>
<div className="py-4">
<TableContainer>
<Table>
<THead>
<Tr>
<Th>Role</Th>
<Th>Duration</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{isMembershipDetailsLoading && (
<TableSkeleton columns={3} innerKey="user-project-identities" />
)}
{!isMembershipDetailsLoading &&
identityMembershipDetails?.roles?.map((roleDetails) => {
const isTemporary = roleDetails?.isTemporary;
const isExpired =
roleDetails.isTemporary &&
new Date() > new Date(roleDetails.temporaryAccessEndTime || "");
let text = "Permanent";
let toolTipText = "Non-Expiring Access";
if (roleDetails.isTemporary) {
if (isExpired) {
text = "Access Expired";
toolTipText = "Timed Access Expired";
} else {
text = formatDistance(
new Date(roleDetails.temporaryAccessEndTime || ""),
new Date()
);
toolTipText = `Until ${format(
new Date(roleDetails.temporaryAccessEndTime || ""),
"yyyy-MM-dd hh:mm:ss aaa"
)}`;
}
}
return (
<Tr className="group h-10" key={`user-project-identity-${roleDetails?.id}`}>
<Td className="capitalize">
{roleDetails.role === "custom"
? roleDetails.customRoleName
: formatProjectRoleName(roleDetails.role)}
</Td>
<Td>
<Tooltip asChild={false} content={toolTipText}>
<Tag
className={twMerge(
"capitalize",
isTemporary && "text-primary",
isExpired && "text-red-600"
)}
>
{text}
</Tag>
</Tooltip>
</Td>
<Td>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId: identityMembershipDetails.identity.id
})}
renderTooltip
allowedLabel="Remove Role"
>
{(isAllowed) => (
<IconButton
colorSchema="danger"
ariaLabel="copy icon"
variant="plain"
className="group relative"
isDisabled={!isAllowed}
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deleteRole", {
id: roleDetails?.id,
slug: roleDetails?.customRoleName || roleDetails?.role
});
}}
>
<FontAwesomeIcon icon={faTrash} />
</IconButton>
)}
</ProjectPermissionCan>
</div>
</Td>
</Tr>
);
})} })}
</TBody> >
</Table> {(isAllowed) => (
{!isMembershipDetailsLoading && !identityMembershipDetails?.roles?.length && ( <UnstableButton
<EmptyState title="This user has no roles" icon={faFolder} /> size="xs"
variant="project"
onClick={() => {
handlePopUpOpen("modifyRole");
}}
isDisabled={!isAllowed}
>
<PencilIcon />
Edit Roles
</UnstableButton>
)}
</ProjectPermissionCan>
</UnstableCardAction>
)} )}
</TableContainer> </UnstableCardHeader>
</div> <UnstableCardContent>
{
/* eslint-disable-next-line no-nested-ternary */
isMembershipDetailsLoading ? (
// scott: todo proper loader
<div className="flex h-40 w-full items-center justify-center">
<Lottie icon="infisical_loading_white" isAutoPlay className="w-16" />
</div>
) : hasRoles ? (
<UnstableTable>
<UnstableTableHeader>
<UnstableTableRow>
<UnstableTableHead className="w-1/2">Role</UnstableTableHead>
<UnstableTableHead className="w-1/2">Duration</UnstableTableHead>
<UnstableTableHead className="w-5" />
</UnstableTableRow>
</UnstableTableHeader>
<UnstableTableBody>
{identityMembershipDetails?.roles?.map((roleDetails) => {
const isTemporary = roleDetails?.isTemporary;
const isExpired =
roleDetails.isTemporary &&
new Date() > new Date(roleDetails.temporaryAccessEndTime || "");
let text = "Permanent";
let toolTipText = "Non-Expiring Access";
if (roleDetails.isTemporary) {
if (isExpired) {
text = "Access Expired";
toolTipText = "Timed Access Expired";
} else {
text = formatDistance(
new Date(roleDetails.temporaryAccessEndTime || ""),
new Date()
);
toolTipText = `Until ${format(
new Date(roleDetails.temporaryAccessEndTime || ""),
"yyyy-MM-dd hh:mm:ss aaa"
)}`;
}
}
return (
<UnstableTableRow
className="group h-10"
key={`user-project-identity-${roleDetails?.id}`}
>
<UnstableTableCell className="max-w-0 truncate">
{roleDetails.role === "custom"
? roleDetails.customRoleName
: formatProjectRoleName(roleDetails.role)}
</UnstableTableCell>
<UnstableTableCell>
{isTemporary ? (
<Tooltip content={toolTipText}>
<Badge
className="capitalize"
variant={isExpired ? "danger" : "warning"}
>
{isExpired ? <ClockAlertIcon /> : <ClockIcon />}
{text}
</Badge>
</Tooltip>
) : (
text
)}
</UnstableTableCell>
<UnstableTableCell>
<UnstableDropdownMenu>
<UnstableDropdownMenuTrigger asChild>
<UnstableIconButton size="xs" variant="ghost">
<EllipsisIcon />
</UnstableIconButton>
</UnstableDropdownMenuTrigger>
<UnstableDropdownMenuContent align="end">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId: identityMembershipDetails.identity.id
})}
renderTooltip
allowedLabel="Remove Role"
>
{(isAllowed) => (
<UnstableDropdownMenuItem
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("deleteRole", {
id: roleDetails?.id,
slug: roleDetails?.customRoleName || roleDetails?.role
});
}}
isDisabled={!isAllowed}
variant="danger"
>
{/* <TrashIcon /> */}
Remove Role
</UnstableDropdownMenuItem>
)}
</ProjectPermissionCan>
</UnstableDropdownMenuContent>
</UnstableDropdownMenu>
</UnstableTableCell>
</UnstableTableRow>
);
})}
</UnstableTableBody>
</UnstableTable>
) : (
<UnstableEmpty className="border">
<UnstableEmptyHeader>
<UnstableEmptyTitle>
This machine identity doesn&nbsp;t have any roles
</UnstableEmptyTitle>
<UnstableEmptyDescription>
Give this machine identity one or more roles
</UnstableEmptyDescription>
</UnstableEmptyHeader>
<UnstableEmptyContent>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId: identityMembershipDetails.identity.id
})}
>
{(isAllowed) => (
<UnstableButton
variant="project"
size="xs"
onClick={() => {
handlePopUpOpen("modifyRole");
}}
isDisabled={!isAllowed}
>
<PencilIcon />
Edit Roles
</UnstableButton>
)}
</ProjectPermissionCan>
</UnstableEmptyContent>
</UnstableEmpty>
)
}
</UnstableCardContent>
</UnstableCard>
<DeleteActionModal <DeleteActionModal
isOpen={popUp.deleteRole.isOpen} isOpen={popUp.deleteRole.isOpen}
deleteKey="remove" deleteKey="remove"
@@ -228,6 +289,6 @@ export const IdentityRoleDetailsSection = ({
<IdentityRoleModify identityProjectMembership={identityMembershipDetails} /> <IdentityRoleModify identityProjectMembership={identityMembershipDetails} />
</ModalContent> </ModalContent>
</Modal> </Modal>
</div> </>
); );
}; };

217
frontend/src/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityAuthSection.tsx
View File

@@ -1,12 +1,31 @@
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import { faPlus } from "@fortawesome/free-solid-svg-icons"; import { EllipsisIcon, LockIcon, PlusIcon } from "lucide-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LockIcon, SettingsIcon } from "lucide-react";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, Tooltip } from "@app/components/v2"; import { Tooltip } from "@app/components/v2";
import { Badge } from "@app/components/v3"; import {
Badge,
UnstableButton,
UnstableCard,
UnstableCardAction,
UnstableCardContent,
UnstableCardDescription,
UnstableCardHeader,
UnstableCardTitle,
UnstableEmpty,
UnstableEmptyContent,
UnstableEmptyDescription,
UnstableEmptyHeader,
UnstableEmptyTitle,
UnstableIconButton,
UnstableTable,
UnstableTableBody,
UnstableTableCell,
UnstableTableHead,
UnstableTableHeader,
UnstableTableRow
} from "@app/components/v3";
import { ProjectPermissionIdentityActions, ProjectPermissionSub } from "@app/context"; import { ProjectPermissionIdentityActions, ProjectPermissionSub } from "@app/context";
import { IdentityAuthMethod, identityAuthToNameMap, TProjectIdentity } from "@app/hooks/api"; import { IdentityAuthMethod, identityAuthToNameMap, TProjectIdentity } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp"; import { usePopUp } from "@app/hooks/usePopUp";
@@ -25,76 +44,126 @@ export const ProjectIdentityAuthenticationSection = ({ identity, refetchIdentity
"upgradePlan" "upgradePlan"
]); ]);
const hasAuthMethods = Boolean(identity.authMethods.length);
return ( return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4"> <UnstableCard>
<h3 className="text-lg font-medium text-mineshaft-100">Authentication</h3> <UnstableCardHeader className="border-b">
</div> <UnstableCardTitle>Authentication</UnstableCardTitle>
{identity.authMethods.length > 0 ? ( <UnstableCardDescription>Configure authentication methods</UnstableCardDescription>
<div className="flex flex-col divide-y divide-mineshaft-400/50"> {hasAuthMethods &&
{identity.authMethods.map((authMethod) => ( !Object.values(IdentityAuthMethod).every((method) =>
<button identity.authMethods.includes(method)
key={authMethod} ) && (
onClick={() => <UnstableCardAction>
handlePopUpOpen("viewAuthMethod", { <ProjectPermissionCan
authMethod, I={ProjectPermissionIdentityActions.Edit}
lockedOut: identity.activeLockoutAuthMethods?.includes(authMethod) ?? false, a={subject(ProjectPermissionSub.Identity, {
refetchIdentity identityId: identity.id
}) })}
} >
type="button" {(isAllowed) => (
className="flex w-full items-center justify-between bg-mineshaft-900 px-4 py-2 text-sm hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600" <UnstableButton
> variant="project"
<span>{identityAuthToNameMap[authMethod]}</span> isFullWidth
<div className="flex items-center gap-2"> size="xs"
{identity.activeLockoutAuthMethods?.includes(authMethod) && ( isDisabled={!isAllowed}
<Tooltip content="Auth method has active lockouts"> onClick={() => {
<Badge isSquare variant="danger"> handlePopUpOpen("identityAuthMethod", {
<LockIcon /> identityId: identity.id,
</Badge> name: identity.name,
</Tooltip> allAuthMethods: identity.authMethods
)} });
<SettingsIcon className="size-4 text-neutral" /> }}
</div> >
</button> <PlusIcon />
))} Add Auth Method
</div> </UnstableButton>
) : ( )}
<div className="w-full space-y-2 pt-2"> </ProjectPermissionCan>
<p className="text-sm text-mineshaft-300"> </UnstableCardAction>
No authentication methods configured. Get started by creating a new auth method. )}
</p> </UnstableCardHeader>
</div> <UnstableCardContent>
)} {identity.authMethods.length > 0 ? (
{!Object.values(IdentityAuthMethod).every((method) => <UnstableTable>
identity.authMethods.includes(method) <UnstableTableHeader>
) && ( <UnstableTableHead className="w-full">Method</UnstableTableHead>
<ProjectPermissionCan <UnstableTableHead className="w-5" />
I={ProjectPermissionIdentityActions.Edit} </UnstableTableHeader>
a={subject(ProjectPermissionSub.Identity, { <UnstableTableBody>
identityId: identity.id {identity.authMethods.map((authMethod) => (
})} <UnstableTableRow
> key={authMethod}
{(isAllowed) => ( className="cursor-pointer"
<Button onClick={() =>
isDisabled={!isAllowed} handlePopUpOpen("viewAuthMethod", {
onClick={() => { authMethod,
handlePopUpOpen("identityAuthMethod", { lockedOut: identity.activeLockoutAuthMethods?.includes(authMethod) ?? false,
identityId: identity.id, refetchIdentity
name: identity.name, })
allAuthMethods: identity.authMethods }
}); >
}} <UnstableTableCell>{identityAuthToNameMap[authMethod]}</UnstableTableCell>
variant="outline_bg" <UnstableTableCell>
className="mt-3 w-full" <div className="flex items-center gap-2">
size="xs" {identity.activeLockoutAuthMethods?.includes(authMethod) && (
leftIcon={<FontAwesomeIcon icon={faPlus} />} <Tooltip content="Auth method has active lockouts">
> <Badge isSquare variant="danger">
{identity.authMethods.length ? "Add" : "Create"} Auth Method <LockIcon />
</Button> </Badge>
</Tooltip>
)}
<UnstableIconButton variant="ghost" size="xs">
<EllipsisIcon />
</UnstableIconButton>
</div>
</UnstableTableCell>
</UnstableTableRow>
))}
</UnstableTableBody>
</UnstableTable>
) : (
<UnstableEmpty className="rounded-sm border bg-mineshaft-800/50">
<UnstableEmptyHeader>
<UnstableEmptyTitle>
This machine identity has no auth methods configured
</UnstableEmptyTitle>
<UnstableEmptyDescription>
Add an auth method to use this machine identity
</UnstableEmptyDescription>
</UnstableEmptyHeader>
<UnstableEmptyContent>
<ProjectPermissionCan
I={ProjectPermissionIdentityActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId: identity.id
})}
>
{(isAllowed) => (
<UnstableButton
variant="project"
size="xs"
isDisabled={!isAllowed}
onClick={() => {
handlePopUpOpen("identityAuthMethod", {
identityId: identity.id,
name: identity.name,
allAuthMethods: identity.authMethods
});
}}
>
<PlusIcon />
Add Auth Method
</UnstableButton>
)}
</ProjectPermissionCan>
</UnstableEmptyContent>
</UnstableEmpty>
)} )}
</ProjectPermissionCan> </UnstableCardContent>
)} </UnstableCard>
<IdentityAuthMethodModal <IdentityAuthMethodModal
popUp={popUp} popUp={popUp}
handlePopUpOpen={handlePopUpOpen} handlePopUpOpen={handlePopUpOpen}
@@ -114,6 +183,6 @@ export const ProjectIdentityAuthenticationSection = ({ identity, refetchIdentity
identityId={identity.id} identityId={identity.id}
onResetAllLockouts={popUp.viewAuthMethod.data?.refetchIdentity} onResetAllLockouts={popUp.viewAuthMethod.data?.refetchIdentity}
/> />
</div> </>
); );
}; };

362
frontend/src/pages/project/IdentityDetailsByIDPage/components/ProjectIdentityDetailsSection.tsx
View File

@@ -1,36 +1,30 @@
import { subject } from "@casl/ability"; import { subject } from "@casl/ability";
import {
faCheck,
faChevronDown,
faCopy,
faEdit,
faKey,
faTrash
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate } from "@tanstack/react-router";
import { format } from "date-fns"; import { format } from "date-fns";
import { twMerge } from "tailwind-merge"; import { BanIcon, CheckIcon, ClipboardListIcon, PencilIcon } from "lucide-react";
import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { Modal, ModalContent, Tooltip } from "@app/components/v2";
import { import {
Button, Badge,
DeleteActionModal, Detail,
DropdownMenu, DetailGroup,
DropdownMenuContent, DetailLabel,
DropdownMenuItem, DetailValue,
DropdownMenuTrigger, OrgIcon,
IconButton, ProjectIcon,
Modal, UnstableButton,
ModalContent, UnstableButtonGroup,
Tag, UnstableCard,
Tooltip UnstableCardAction,
} from "@app/components/v2"; UnstableCardContent,
import { ProjectPermissionIdentityActions, ProjectPermissionSub, useProject } from "@app/context"; UnstableCardDescription,
import { getProjectBaseURL } from "@app/helpers/project"; UnstableCardHeader,
UnstableCardTitle,
UnstableIconButton
} from "@app/components/v3";
import { ProjectPermissionIdentityActions, ProjectPermissionSub } from "@app/context";
import { usePopUp, useTimedReset } from "@app/hooks"; import { usePopUp, useTimedReset } from "@app/hooks";
import { identityAuthToNameMap, TProjectIdentity, useDeleteProjectIdentity } from "@app/hooks/api"; import { identityAuthToNameMap, TProjectIdentity } from "@app/hooks/api";
import { IdentityProjectMembershipV1 } from "@app/hooks/api/identities/types"; import { IdentityProjectMembershipV1 } from "@app/hooks/api/identities/types";
import { ProjectIdentityModal } from "@app/pages/project/AccessControlPage/components/IdentityTab/components/ProjectIdentityModal"; import { ProjectIdentityModal } from "@app/pages/project/AccessControlPage/components/IdentityTab/components/ProjectIdentityModal";
@@ -41,190 +35,146 @@ type Props = {
}; };
export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, membership }: Props) => { export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, membership }: Props) => {
const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({ // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars
const [_, isCopyingId, setCopyTextId] = useTimedReset<string>({
initialState: "Copy ID to clipboard" initialState: "Copy ID to clipboard"
}); });
const { currentProject } = useProject(); const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["editIdentity"] as const);
const { mutateAsync: deleteIdentity } = useDeleteProjectIdentity();
const navigate = useNavigate();
const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp([
"editIdentity",
"deleteIdentity"
] as const);
const handleDeleteIdentity = async () => {
try {
await deleteIdentity({
identityId: identity.id,
projectId: identity.projectId!
});
navigate({
to: `${getProjectBaseURL(currentProject.type)}/access-management`,
search: {
selectedTab: "identities"
}
});
} catch {
createNotification({
type: "error",
text: "Failed to delete project machine identity"
});
}
};
return ( return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <>
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4"> <UnstableCard className="w-full max-w-84">
<h3 className="text-lg font-medium text-mineshaft-100">Details</h3> <UnstableCardHeader className="border-b">
<DropdownMenu> <UnstableCardTitle>Details</UnstableCardTitle>
<UnstableCardDescription>Machine identity details</UnstableCardDescription>
{!isOrgIdentity && ( {!isOrgIdentity && (
<DropdownMenuTrigger asChild> <UnstableCardAction>
<Button <ProjectPermissionCan
size="xs" I={ProjectPermissionIdentityActions.Edit}
rightIcon={ a={subject(ProjectPermissionSub.Identity, {
<FontAwesomeIcon identityId: identity.id
className="ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180" })}
icon={faChevronDown}
/>
}
colorSchema="secondary"
className="group select-none"
> >
Options {(isAllowed) => (
</Button> <UnstableButton
</DropdownMenuTrigger> isDisabled={!isAllowed}
)} onClick={() => {
<DropdownMenuContent className="mt-3 min-w-[120px]" align="end"> handlePopUpOpen("editIdentity");
<ProjectPermissionCan }}
I={ProjectPermissionIdentityActions.Edit}
a={subject(ProjectPermissionSub.Identity, {
identityId: identity.id
})}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
)}
icon={<FontAwesomeIcon icon={faEdit} />}
onClick={async () => {
handlePopUpOpen("editIdentity");
}}
disabled={!isAllowed}
>
Edit Machine Identity
</DropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionIdentityActions.Delete}
a={subject(ProjectPermissionSub.Identity, {
identityId: identity.id
})}
>
{(isAllowed) => (
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={async () => {
handlePopUpOpen("deleteIdentity");
}}
icon={<FontAwesomeIcon icon={faTrash} />}
disabled={!isAllowed}
>
Delete Machine Identity
</DropdownMenuItem>
)}
</ProjectPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Machine Identity ID</p>
<div className="group flex align-top">
<p className="text-sm break-all text-mineshaft-300">{identity.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
ariaLabel="copy icon"
variant="plain"
className="group relative ml-2"
onClick={() => {
navigator.clipboard.writeText(identity.id);
setCopyTextId("Copied");
}}
>
<FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
</IconButton>
</Tooltip>
</div>
</div>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Managed By</p>
<p className="text-sm text-mineshaft-300">
{identity.projectId ? "Project" : "Organization"}
</p>
</div>
{!isOrgIdentity && (
<>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
<p className="text-sm text-mineshaft-300">
{membership.lastLoginAuthMethod
? identityAuthToNameMap[membership.lastLoginAuthMethod]
: "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
<p className="text-sm text-mineshaft-300">
{membership.lastLoginTime ? format(membership.lastLoginTime, "PPpp") : "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-medium text-mineshaft-300">Delete Protection</p>
<p className="text-sm text-mineshaft-300">
{identity.hasDeleteProtection ? "On" : "Off"}
</p>
</div>
</>
)}
<div>
<p className="text-sm font-medium text-mineshaft-300">Metadata</p>
{identity?.metadata?.length ? (
<div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
{identity.metadata?.map((el) => (
<div key={el.id} className="flex items-center">
<Tag
size="xs" size="xs"
className="mr-0 flex items-center rounded-r-none border border-mineshaft-500" variant="project"
> >
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" /> <PencilIcon />
<div>{el.key}</div> Edit Details
</Tag> </UnstableButton>
<Tag )}
size="xs" </ProjectPermissionCan>
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1" </UnstableCardAction>
>
<div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.value}
</div>
</Tag>
</div>
))}
</div>
) : (
<p className="text-sm text-mineshaft-300">-</p>
)} )}
</div> </UnstableCardHeader>
</div> <UnstableCardContent>
<DetailGroup>
<Detail>
<DetailLabel>Name</DetailLabel>
<DetailValue>{identity.name}</DetailValue>
</Detail>
<Detail>
<DetailLabel>ID</DetailLabel>
<DetailValue className="flex items-center gap-x-1">
{identity.id}
<Tooltip content="Copy machine identity ID to clipboard">
<UnstableIconButton
onClick={() => {
navigator.clipboard.writeText(identity.id);
setCopyTextId("Copied");
}}
variant="ghost"
size="xs"
>
{isCopyingId ? <CheckIcon /> : <ClipboardListIcon className="text-label" />}
</UnstableIconButton>
</Tooltip>
</DetailValue>
</Detail>
<Detail>
<DetailLabel>Managed by</DetailLabel>
<DetailValue>
{isOrgIdentity ? (
<Badge variant="org">
<OrgIcon />
Organization
</Badge>
) : (
<Badge variant="project">
<ProjectIcon />
Project
</Badge>
)}
</DetailValue>
</Detail>
<Detail>
<DetailLabel>Metadata</DetailLabel>
<DetailValue className="flex flex-wrap gap-2">
{identity?.metadata?.length ? (
identity.metadata?.map((el) => (
<UnstableButtonGroup key={el.id}>
<Badge>{el.key}</Badge>
<Badge variant="outline">{el.value}</Badge>
</UnstableButtonGroup>
))
) : (
<span className="text-muted italic">No metadata</span>
)}
</DetailValue>
</Detail>
<Detail>
<DetailLabel>{isOrgIdentity ? "Joined project" : "Created"}</DetailLabel>
<DetailValue>{format(membership.createdAt, "PPpp")}</DetailValue>
</Detail>
{!isOrgIdentity && (
<>
<Detail>
<DetailLabel>Last Login Method</DetailLabel>
<DetailValue>
{membership.lastLoginAuthMethod ? (
identityAuthToNameMap[membership.lastLoginAuthMethod]
) : (
<span className="text-muted italic">N/A</span>
)}
</DetailValue>
</Detail>
<Detail>
<DetailLabel>Last Logged In</DetailLabel>
<DetailValue>
{membership.lastLoginTime ? (
format(membership.lastLoginTime, "PPpp")
) : (
<span className="text-muted italic">N/A</span>
)}
</DetailValue>
</Detail>
<Detail>
<DetailLabel>Delete protection</DetailLabel>
<DetailValue>
{identity.hasDeleteProtection ? (
<Badge variant="success">
<CheckIcon />
Enabled
</Badge>
) : (
<Badge variant="neutral">
<BanIcon />
Disabled
</Badge>
)}
</DetailValue>
</Detail>
</>
)}
</DetailGroup>
</UnstableCardContent>
</UnstableCard>
<Modal <Modal
isOpen={popUp.editIdentity.isOpen} isOpen={popUp.editIdentity.isOpen}
onOpenChange={(open) => handlePopUpToggle("editIdentity", open)} onOpenChange={(open) => handlePopUpToggle("editIdentity", open)}
@@ -236,14 +186,6 @@ export const ProjectIdentityDetailsSection = ({ identity, isOrgIdentity, members
/> />
</ModalContent> </ModalContent>
</Modal> </Modal>
</>
<DeleteActionModal
isOpen={popUp.deleteIdentity.isOpen}
title={`Are you sure you want to delete ${identity.name}?`}
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
deleteKey="confirm"
onDeleteApproved={handleDeleteIdentity}
/>
</div>
); );
}; };