mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 17:40:44 +00:00
feature: access tree
This commit is contained in:
Scott Wilson
@@ -0,0 +1,213 @@
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { MongoAbility, MongoQuery } from "@casl/ability";
|
||||
import {
|
||||
faArrowUpRightFromSquare,
|
||||
faUpRightAndDownLeftFromCenter,
|
||||
faWindowRestore
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
ConnectionLineType,
|
||||
Controls,
|
||||
Node,
|
||||
NodeMouseHandler,
|
||||
Panel,
|
||||
ReactFlow,
|
||||
ReactFlowProvider,
|
||||
useReactFlow
|
||||
} from "@xyflow/react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Button, IconButton, Spinner, Tooltip } from "@app/components/v2";
|
||||
import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
|
||||
|
||||
import { AccessTreeErrorBoundary, AccessTreeProvider, PermissionSimulation } from "./components";
|
||||
import { BasePermissionEdge } from "./edges";
|
||||
import { useAccessTree } from "./hooks";
|
||||
import { FolderNode, RoleNode } from "./nodes";
|
||||
import { ViewMode } from "./types";
|
||||
|
||||
import "@xyflow/react/dist/style.css";
|
||||
|
||||
export type AccessTreeProps = {
|
||||
permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
|
||||
};
|
||||
|
||||
const EdgeTypes = { base: BasePermissionEdge };
|
||||
|
||||
const NodeTypes = { role: RoleNode, folder: FolderNode };
|
||||
|
||||
const AccessTreeContent = ({ permissions }: AccessTreeProps) => {
|
||||
const accessTreeData = useAccessTree(permissions);
|
||||
const { edges, nodes, isLoading, viewMode, setViewMode } = accessTreeData;
|
||||
|
||||
const { fitView, getViewport, setCenter } = useReactFlow();
|
||||
|
||||
const onNodeClick: NodeMouseHandler<Node> = useCallback(
|
||||
(_, node) => {
|
||||
setCenter(
|
||||
node.position.x + (node.width ? node.width / 2 : 0),
|
||||
node.position.y + (node.height ? node.height / 2 + 50 : 50),
|
||||
{ duration: 1000, zoom: 1 }
|
||||
);
|
||||
},
|
||||
[setCenter]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
fitView({
|
||||
padding: 0.2,
|
||||
duration: 1000,
|
||||
maxZoom: 1
|
||||
});
|
||||
}, 5);
|
||||
}, [fitView, nodes, edges, getViewport()]);
|
||||
|
||||
const handleToggleModalView = () =>
|
||||
setViewMode((prev) => (prev === ViewMode.Modal ? ViewMode.Docked : ViewMode.Modal));
|
||||
|
||||
const handleToggleUndockedView = () =>
|
||||
setViewMode((prev) => (prev === ViewMode.Undocked ? ViewMode.Docked : ViewMode.Undocked));
|
||||
|
||||
const undockButtonLabel = `${viewMode === ViewMode.Undocked ? "Dock" : "Undock"} View`;
|
||||
const windowButtonLabel = `${viewMode === ViewMode.Modal ? "Dock" : "Expand"} View`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={twMerge(
|
||||
"w-full",
|
||||
viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
|
||||
viewMode === ViewMode.Undocked &&
|
||||
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"mb-4 h-full w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 transition-transform duration-500",
|
||||
viewMode === ViewMode.Docked ? "relative p-4" : "relative p-0"
|
||||
)}
|
||||
>
|
||||
{viewMode === ViewMode.Docked && (
|
||||
<div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-mineshaft-100">Access Tree</h3>
|
||||
<p className="text-sm leading-3 text-mineshaft-400">
|
||||
Visual access policies for the configured role.
|
||||
</p>
|
||||
</div>
|
||||
<div className="whitespace-nowrap">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
colorSchema="secondary"
|
||||
type="submit"
|
||||
className="h-10 rounded-r-none bg-mineshaft-700"
|
||||
leftIcon={<FontAwesomeIcon icon={faWindowRestore} />}
|
||||
onClick={handleToggleUndockedView}
|
||||
>
|
||||
Undock
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
colorSchema="secondary"
|
||||
type="submit"
|
||||
className="h-10 rounded-l-none bg-mineshaft-600"
|
||||
leftIcon={<FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />}
|
||||
onClick={handleToggleModalView}
|
||||
>
|
||||
Expand
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center space-x-4",
|
||||
viewMode === ViewMode.Docked ? "h-96" : "h-full"
|
||||
)}
|
||||
>
|
||||
<div className="h-full w-full">
|
||||
<ReactFlow
|
||||
className="rounded-md border border-mineshaft"
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
edgeTypes={EdgeTypes}
|
||||
nodeTypes={NodeTypes}
|
||||
fitView
|
||||
onNodeClick={onNodeClick}
|
||||
colorMode="dark"
|
||||
nodesDraggable={false}
|
||||
edgesReconnectable={false}
|
||||
nodesConnectable={false}
|
||||
connectionLineType={ConnectionLineType.SmoothStep}
|
||||
proOptions={{
|
||||
hideAttribution: false // we need pro license if we want to hide
|
||||
}}
|
||||
>
|
||||
{isLoading && (
|
||||
<Panel className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</Panel>
|
||||
)}
|
||||
{viewMode !== ViewMode.Docked && (
|
||||
<Panel position="top-right" className="flex gap-1.5">
|
||||
<Tooltip position="bottom" align="center" content={undockButtonLabel}>
|
||||
<IconButton
|
||||
className="mr-1 rounded"
|
||||
colorSchema="secondary"
|
||||
variant="plain"
|
||||
onClick={handleToggleUndockedView}
|
||||
ariaLabel={undockButtonLabel}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={
|
||||
viewMode === ViewMode.Undocked
|
||||
? faArrowUpRightFromSquare
|
||||
: faWindowRestore
|
||||
}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip align="end" position="bottom" content={windowButtonLabel}>
|
||||
<IconButton
|
||||
className="rounded"
|
||||
colorSchema="secondary"
|
||||
variant="plain"
|
||||
onClick={handleToggleModalView}
|
||||
ariaLabel={windowButtonLabel}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={
|
||||
viewMode === ViewMode.Modal
|
||||
? faArrowUpRightFromSquare
|
||||
: faUpRightAndDownLeftFromCenter
|
||||
}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Panel>
|
||||
)}
|
||||
<PermissionSimulation {...accessTreeData} />
|
||||
<Background color="#5d5f64" bgColor="#111419" variant={BackgroundVariant.Dots} />
|
||||
<Controls position="bottom-left" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AccessTree = (props: AccessTreeProps) => {
|
||||
return (
|
||||
<AccessTreeErrorBoundary {...props}>
|
||||
<AccessTreeProvider>
|
||||
<ReactFlowProvider>
|
||||
<AccessTreeContent {...props} />
|
||||
</ReactFlowProvider>
|
||||
</AccessTreeProvider>
|
||||
</AccessTreeErrorBoundary>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,51 @@
|
||||
import React, {
|
||||
createContext,
|
||||
Dispatch,
|
||||
ReactNode,
|
||||
SetStateAction,
|
||||
useContext,
|
||||
useMemo,
|
||||
useState
|
||||
} from "react";
|
||||
|
||||
import { ViewMode } from "../types";
|
||||
|
||||
export interface AccessTreeContextProps {
|
||||
secretName: string;
|
||||
setSecretName: Dispatch<SetStateAction<string>>;
|
||||
viewMode: ViewMode;
|
||||
setViewMode: Dispatch<SetStateAction<ViewMode>>;
|
||||
}
|
||||
|
||||
const AccessTreeContext = createContext<AccessTreeContextProps | undefined>(undefined);
|
||||
|
||||
interface AccessTreeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const AccessTreeProvider: React.FC<AccessTreeProviderProps> = ({ children }) => {
|
||||
const [secretName, setSecretName] = useState("*");
|
||||
const [viewMode, setViewMode] = useState(ViewMode.Docked);
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
secretName,
|
||||
setSecretName,
|
||||
viewMode,
|
||||
setViewMode
|
||||
}),
|
||||
[secretName, setSecretName, viewMode, setViewMode]
|
||||
);
|
||||
|
||||
return <AccessTreeContext.Provider value={value}>{children}</AccessTreeContext.Provider>;
|
||||
};
|
||||
|
||||
export const useAccessTreeContext = (): AccessTreeContextProps => {
|
||||
const context = useContext(AccessTreeContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useAccessTreeContext must be used within a AccessTreeProvider");
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
+105
@@ -0,0 +1,105 @@
|
||||
import React, { ErrorInfo, ReactNode } from "react";
|
||||
import { MongoAbility, MongoQuery } from "@casl/ability";
|
||||
import { faCheck, faCopy, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { IconButton } from "@app/components/v2";
|
||||
import { SessionStorageKeys } from "@app/const";
|
||||
import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
|
||||
import { useTimedReset } from "@app/hooks";
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: ReactNode;
|
||||
permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
const ErrorDisplay = ({
|
||||
error,
|
||||
permissions
|
||||
}: {
|
||||
error: Error | null;
|
||||
permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
|
||||
}) => {
|
||||
const display = JSON.stringify({ errorMessage: error?.message, permissions }, null, 2);
|
||||
|
||||
const [isCopied, , setIsCopied] = useTimedReset<boolean>({
|
||||
initialState: false
|
||||
});
|
||||
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(display);
|
||||
setIsCopied(true);
|
||||
sessionStorage.removeItem(SessionStorageKeys.CLI_TERMINAL_TOKEN);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col gap-2">
|
||||
<div className="flex items-center gap-2 text-mineshaft-100">
|
||||
<FontAwesomeIcon icon={faExclamationTriangle} className="text-red" />
|
||||
<p>
|
||||
Error displaying access tree. Please contact{" "}
|
||||
<a
|
||||
className="inline cursor-pointer text-mineshaft-200 underline decoration-primary-500 underline-offset-4 duration-200 hover:text-mineshaft-100"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="mailto:[email protected]"
|
||||
>
|
||||
support@infisical.com
|
||||
</a>{" "}
|
||||
with the following information.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative flex flex-1 flex-col overflow-hidden">
|
||||
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded bg-mineshaft-700 p-2 text-xs text-mineshaft-100">
|
||||
{display}
|
||||
</pre>
|
||||
<IconButton
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
className="absolute right-4 top-2"
|
||||
ariaLabel="Copy secret value"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
<FontAwesomeIcon icon={isCopied ? faCheck : faCopy} />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
|
||||
console.error("Error caught by ErrorBoundary:", error, errorInfo, this.props);
|
||||
}
|
||||
|
||||
render(): ReactNode {
|
||||
const { hasError, error } = this.state;
|
||||
const { children, permissions } = this.props;
|
||||
|
||||
if (hasError) {
|
||||
return <ErrorDisplay error={error} permissions={permissions} />;
|
||||
}
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
export const AccessTreeErrorBoundary = ({ children, permissions }: ErrorBoundaryProps) => {
|
||||
return <ErrorBoundary permissions={permissions}>{children}</ErrorBoundary>;
|
||||
};
|
||||
@@ -0,0 +1,137 @@
|
||||
import { Dispatch, SetStateAction, useState } from "react";
|
||||
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Panel } from "@xyflow/react";
|
||||
|
||||
import { Button, FormLabel, IconButton, Input, Select, SelectItem } from "@app/components/v2";
|
||||
import { ProjectPermissionSub } from "@app/context";
|
||||
|
||||
import { ViewMode } from "../types";
|
||||
|
||||
type TProps = {
|
||||
secretName: string;
|
||||
setSecretName: Dispatch<SetStateAction<string>>;
|
||||
viewMode: ViewMode;
|
||||
setViewMode: Dispatch<SetStateAction<ViewMode>>;
|
||||
setEnvironment: Dispatch<SetStateAction<string>>;
|
||||
environment: string;
|
||||
subject: ProjectPermissionSub;
|
||||
setSubject: Dispatch<SetStateAction<ProjectPermissionSub>>;
|
||||
environments: { name: string; slug: string }[];
|
||||
};
|
||||
|
||||
export const PermissionSimulation = ({
|
||||
setEnvironment,
|
||||
environment,
|
||||
subject,
|
||||
setSubject,
|
||||
environments,
|
||||
setViewMode,
|
||||
viewMode,
|
||||
secretName,
|
||||
setSecretName
|
||||
}: TProps) => {
|
||||
const [expand, setExpand] = useState(false);
|
||||
|
||||
const handlePermissionSimulation = () => {
|
||||
setExpand(true);
|
||||
setViewMode(ViewMode.Modal);
|
||||
};
|
||||
|
||||
if (viewMode !== ViewMode.Modal)
|
||||
return (
|
||||
<Panel position="top-left">
|
||||
<Button
|
||||
size="xs"
|
||||
className="mr-1 rounded"
|
||||
colorSchema="secondary"
|
||||
onClick={handlePermissionSimulation}
|
||||
>
|
||||
Permission Simulation
|
||||
</Button>
|
||||
</Panel>
|
||||
);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
onClick={handlePermissionSimulation}
|
||||
position="top-left"
|
||||
className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
|
||||
>
|
||||
<div className="flex w-[20rem] flex-col gap-1.5 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
|
||||
<div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="text-sm">Permission Simulation</span>
|
||||
<IconButton
|
||||
variant="plain"
|
||||
ariaLabel={expand ? "Collapse" : "Expand"}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpand((prev) => !prev);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={expand ? faChevronUp : faChevronDown} />
|
||||
</IconButton>
|
||||
</div>
|
||||
{expand && (
|
||||
<p className="mb-2 mt-1 text-xs text-mineshaft-400">
|
||||
Evaluate conditional policies to see what permissions will be granted given a secret
|
||||
name or tags
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{expand && (
|
||||
<>
|
||||
<div>
|
||||
<FormLabel label="Subject" />
|
||||
<Select
|
||||
value={subject}
|
||||
onValueChange={(value) => setSubject(value as ProjectPermissionSub)}
|
||||
className="w-full border border-mineshaft-500 capitalize"
|
||||
position="popper"
|
||||
dropdownContainerClassName="max-w-none"
|
||||
>
|
||||
{[
|
||||
ProjectPermissionSub.Secrets,
|
||||
ProjectPermissionSub.SecretFolders,
|
||||
ProjectPermissionSub.DynamicSecrets,
|
||||
ProjectPermissionSub.SecretImports
|
||||
].map((sub) => {
|
||||
return (
|
||||
<SelectItem className="capitalize" value={sub} key={sub}>
|
||||
{sub.replace("-", " ")}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<FormLabel label="Environment" />
|
||||
<Select
|
||||
value={environment}
|
||||
onValueChange={setEnvironment}
|
||||
className="w-full border border-mineshaft-500 capitalize"
|
||||
position="popper"
|
||||
dropdownContainerClassName="max-w-[19rem]"
|
||||
>
|
||||
{environments.map(({ name, slug }) => {
|
||||
return (
|
||||
<SelectItem value={slug} key={slug}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
{subject === ProjectPermissionSub.Secrets && (
|
||||
<div>
|
||||
<FormLabel label="Secret Name" />
|
||||
<Input value={secretName} onChange={(e) => setSecretName(e.target.value)} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from "./AccessTreeContext";
|
||||
export * from "./AccessTreeErrorBoundary";
|
||||
export * from "./PermissionSimulation";
|
||||
@@ -0,0 +1,34 @@
|
||||
import { BaseEdge, BaseEdgeProps, EdgeProps, getSmoothStepPath } from "@xyflow/react";
|
||||
|
||||
export const BasePermissionEdge = ({
|
||||
id,
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
markerStart,
|
||||
markerEnd,
|
||||
style
|
||||
}: Omit<BaseEdgeProps, "path"> & EdgeProps) => {
|
||||
const [edgePath] = getSmoothStepPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY
|
||||
});
|
||||
|
||||
return (
|
||||
<BaseEdge
|
||||
id={id}
|
||||
markerStart={markerStart}
|
||||
markerEnd={markerEnd}
|
||||
style={{
|
||||
strokeDasharray: "5",
|
||||
strokeWidth: 1,
|
||||
stroke: "#707174",
|
||||
...style
|
||||
}}
|
||||
path={edgePath}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./BasePermissionEdge";
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { MongoAbility, MongoQuery } from "@casl/ability";
|
||||
import { Edge, Node, useEdgesState, useNodesState } from "@xyflow/react";
|
||||
|
||||
import { ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
|
||||
import { useListProjectEnvironmentsFolders } from "@app/hooks/api/secretFolders/queries";
|
||||
|
||||
import { useAccessTreeContext } from "../components";
|
||||
import { PermissionAccess } from "../types";
|
||||
import {
|
||||
createBaseEdge,
|
||||
createFolderNode,
|
||||
createRoleNode,
|
||||
getSubjectActionRuleMap,
|
||||
positionElements
|
||||
} from "../utils";
|
||||
|
||||
export const useAccessTree = (permissions: MongoAbility<ProjectPermissionSet, MongoQuery>) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { secretName, setSecretName, setViewMode, viewMode } = useAccessTreeContext();
|
||||
const [nodes, setNodes] = useNodesState<Node>([]);
|
||||
const [edges, setEdges] = useEdgesState<Edge>([]);
|
||||
const [subject, setSubject] = useState(ProjectPermissionSub.Secrets);
|
||||
const [environment, setEnvironment] = useState(currentWorkspace.environments[0].slug);
|
||||
const { data: environmentsFolders, isPending } = useListProjectEnvironmentsFolders(
|
||||
currentWorkspace.id
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!environmentsFolders || !permissions) return;
|
||||
|
||||
const { folders, name } = environmentsFolders[environment];
|
||||
|
||||
const roleNode = createRoleNode({
|
||||
subject,
|
||||
environment: name
|
||||
});
|
||||
|
||||
const actionRuleMap = getSubjectActionRuleMap(subject, permissions);
|
||||
|
||||
const folderNodes = folders.map((folder) =>
|
||||
createFolderNode({
|
||||
folder,
|
||||
permissions,
|
||||
environment,
|
||||
subject,
|
||||
secretName,
|
||||
actionRuleMap
|
||||
})
|
||||
);
|
||||
|
||||
const folderEdges = folderNodes.map(({ data: folder }) => {
|
||||
const actions = Object.values(folder.actions);
|
||||
|
||||
let access: PermissionAccess;
|
||||
if (Object.values(actions).some((action) => action === PermissionAccess.Full)) {
|
||||
access = PermissionAccess.Full;
|
||||
} else if (Object.values(actions).some((action) => action === PermissionAccess.Partial)) {
|
||||
access = PermissionAccess.Partial;
|
||||
} else {
|
||||
access = PermissionAccess.None;
|
||||
}
|
||||
|
||||
return createBaseEdge({
|
||||
source: folder.parentId ?? roleNode.id,
|
||||
target: folder.id,
|
||||
access
|
||||
});
|
||||
});
|
||||
|
||||
const init = positionElements([roleNode, ...folderNodes], [...folderEdges]);
|
||||
setNodes(init.nodes);
|
||||
setEdges(init.edges);
|
||||
}, [permissions, environmentsFolders, environment, subject, secretName, setNodes, setEdges]);
|
||||
|
||||
return {
|
||||
nodes,
|
||||
edges,
|
||||
subject,
|
||||
environment,
|
||||
setEnvironment,
|
||||
setSubject,
|
||||
isLoading: isPending,
|
||||
environments: currentWorkspace.environments,
|
||||
secretName,
|
||||
setSecretName,
|
||||
viewMode,
|
||||
setViewMode
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./AccessTree";
|
||||
@@ -0,0 +1,77 @@
|
||||
import {
|
||||
faCheckCircle,
|
||||
faCircleMinus,
|
||||
faCircleXmark,
|
||||
faFolder
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Handle, NodeProps, Position } from "@xyflow/react";
|
||||
|
||||
import { Tooltip } from "@app/components/v2";
|
||||
|
||||
import { PermissionAccess } from "../../types";
|
||||
import { createFolderNode, formatActionName } from "../../utils";
|
||||
import { FolderNodeTooltipContent } from "./components";
|
||||
|
||||
const AccessMap = {
|
||||
[PermissionAccess.Full]: { className: "text-green", icon: faCheckCircle },
|
||||
[PermissionAccess.Partial]: { className: "text-yellow", icon: faCircleMinus },
|
||||
[PermissionAccess.None]: { className: "text-red", icon: faCircleXmark }
|
||||
};
|
||||
|
||||
export const FolderNode = ({
|
||||
data
|
||||
}: NodeProps & { data: ReturnType<typeof createFolderNode>["data"] }) => {
|
||||
const { name, actions, actionRuleMap, parentId, subject } = data;
|
||||
|
||||
const hasMinimalAccess = Object.values(actions).some(
|
||||
(action) => action === PermissionAccess.Full || action === PermissionAccess.Partial
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Handle
|
||||
type="target"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
position={Position.Top}
|
||||
/>
|
||||
<div
|
||||
className={`flex ${hasMinimalAccess ? "" : "opacity-40"} h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500`}
|
||||
>
|
||||
<div className="flex items-center space-x-2 text-xs text-mineshaft-100">
|
||||
<FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
|
||||
<span>{parentId ? `/${name}` : "/"}</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded bg-mineshaft-600 px-2 py-1 text-xs">
|
||||
{Object.entries(actions).map(([action, access]) => {
|
||||
const { className, icon } = AccessMap[access];
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
className="hidden" // just using the tooltip to trigger node toolbar
|
||||
content={
|
||||
<FolderNodeTooltipContent
|
||||
action={action}
|
||||
access={access}
|
||||
subject={subject}
|
||||
actionRuleMap={actionRuleMap}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<FontAwesomeIcon icon={icon} className={className} size="xs" />
|
||||
<span className="capitalize">{formatActionName(action)}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
position={Position.Bottom}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
import { ReactElement } from "react";
|
||||
import { faCheckCircle, faCircleMinus, faCircleXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { NodeToolbar, Position } from "@xyflow/react";
|
||||
|
||||
import {
|
||||
formatedConditionsOperatorNames,
|
||||
PermissionConditionOperators
|
||||
} from "@app/context/ProjectPermissionContext/types";
|
||||
import { camelCaseToSpaces } from "@app/lib/fn/string";
|
||||
|
||||
import { PermissionAccess } from "../../../types";
|
||||
import { createFolderNode, formatActionName } from "../../../utils";
|
||||
|
||||
type Props = {
|
||||
action: string;
|
||||
access: PermissionAccess;
|
||||
} & Pick<ReturnType<typeof createFolderNode>["data"], "actionRuleMap" | "subject">;
|
||||
|
||||
export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subject }: Props) => {
|
||||
let component: ReactElement;
|
||||
|
||||
switch (access) {
|
||||
case PermissionAccess.Full:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-green">
|
||||
<FontAwesomeIcon icon={faCheckCircle} size="xs" />
|
||||
<span>Full {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
<p className="text-mineshaft-200">
|
||||
Policy grants unconditional{" "}
|
||||
<span className="font-medium text-mineshaft-100">
|
||||
{formatActionName(action).toLowerCase()}
|
||||
</span>{" "}
|
||||
permission for {subject.replaceAll("-", " ")} in this folder.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case PermissionAccess.Partial:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-yellow">
|
||||
<FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
|
||||
<span>Conditional {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
<p className="mb-1 text-mineshaft-200">
|
||||
Policy conditionally allows{" "}
|
||||
<span className="font-medium text-mineshaft-100">
|
||||
{formatActionName(action).toLowerCase()}
|
||||
</span>{" "}
|
||||
permission for {subject.replaceAll("-", " ")} in this folder.
|
||||
</p>
|
||||
<ul className="flex list-disc flex-col gap-2 pl-4">
|
||||
{actionRuleMap.map((ruleMap, index) => {
|
||||
const rule = ruleMap[action];
|
||||
|
||||
if (
|
||||
!rule ||
|
||||
!rule.conditions ||
|
||||
(!rule.conditions.secretName && !rule.conditions.secretTags)
|
||||
)
|
||||
return null;
|
||||
|
||||
return (
|
||||
<li key={`${action}_${index + 1}`}>
|
||||
<span className={`italic ${rule.inverted ? "text-red" : "text-green"} `}>
|
||||
{rule.inverted ? "Forbids" : "Allows"}
|
||||
</span>
|
||||
<span> when:</span>
|
||||
{Object.entries(rule.conditions).map(([key, condition]) => (
|
||||
<ul key={key} className="list-[square] pl-4">
|
||||
{Object.entries(condition as object).map(([operator, value]) => (
|
||||
<li>
|
||||
<span className="font-medium capitalize text-mineshaft-100">
|
||||
{camelCaseToSpaces(key)}
|
||||
</span>{" "}
|
||||
<span className="text-mineshaft-200">
|
||||
{
|
||||
formatedConditionsOperatorNames[
|
||||
operator as PermissionConditionOperators
|
||||
]
|
||||
}
|
||||
</span>{" "}
|
||||
<span className={rule.inverted ? "text-red" : "text-green"}>
|
||||
{typeof value === "string" ? value : value.join(", ")}
|
||||
</span>
|
||||
.
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case PermissionAccess.None:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-red">
|
||||
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
|
||||
<span>No {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
<p className="text-mineshaft-200">
|
||||
Policy always forbids{" "}
|
||||
<span className="font-medium text-mineshaft-100">
|
||||
{formatActionName(action).toLowerCase()}
|
||||
</span>{" "}
|
||||
permission for {subject.replaceAll("-", " ")} in this folder.
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
throw new Error(`Unhandled access type: ${access}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<NodeToolbar
|
||||
className="rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-sm font-light text-bunker-100"
|
||||
isVisible
|
||||
position={Position.Bottom}
|
||||
>
|
||||
{component}
|
||||
</NodeToolbar>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./FolderNodeTooltipContent";
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./FolderNode";
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Handle, NodeProps, Position } from "@xyflow/react";
|
||||
|
||||
import { createRoleNode } from "../utils";
|
||||
|
||||
export const RoleNode = ({
|
||||
data: { subject, environment }
|
||||
}: NodeProps & { data: ReturnType<typeof createRoleNode>["data"] }) => {
|
||||
return (
|
||||
<>
|
||||
<Handle
|
||||
type="target"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
position={Position.Top}
|
||||
/>
|
||||
<div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-3 py-2 font-inter shadow-lg">
|
||||
<div className="flex max-w-[14rem] flex-col items-center text-xs text-mineshaft-200">
|
||||
<span className="capitalize">{subject.replace("-", " ")} Access</span>
|
||||
<div className="max-w-[14rem] whitespace-nowrap text-xs text-mineshaft-300">
|
||||
<p className="truncate capitalize">{environment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
position={Position.Bottom}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from "./FolderNode/FolderNode";
|
||||
export * from "./RoleNode";
|
||||
@@ -0,0 +1,21 @@
|
||||
export enum PermissionAccess {
|
||||
Full = "full",
|
||||
Partial = "partial",
|
||||
None = "None"
|
||||
}
|
||||
|
||||
export enum PermissionNode {
|
||||
Role = "role",
|
||||
Folder = "folder",
|
||||
Environment = "environment"
|
||||
}
|
||||
|
||||
export enum PermissionEdge {
|
||||
Base = "base"
|
||||
}
|
||||
|
||||
export enum ViewMode {
|
||||
Docked = "docked",
|
||||
Modal = "modal",
|
||||
Undocked = "undocked"
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { MarkerType } from "@xyflow/react";
|
||||
|
||||
import { PermissionAccess, PermissionEdge } from "../types";
|
||||
|
||||
export const createBaseEdge = ({
|
||||
source,
|
||||
target,
|
||||
access
|
||||
}: {
|
||||
source: string;
|
||||
target: string;
|
||||
access: PermissionAccess;
|
||||
}) => {
|
||||
const color = access === PermissionAccess.None ? "#707174" : "#ccccce";
|
||||
return {
|
||||
id: `e-${source}-${target}`,
|
||||
source,
|
||||
target,
|
||||
type: PermissionEdge.Base,
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color
|
||||
},
|
||||
style: { stroke: color }
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,180 @@
|
||||
import { MongoAbility, MongoQuery, subject as abilitySubject } from "@casl/ability";
|
||||
import picomatch from "picomatch";
|
||||
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionDynamicSecretActions,
|
||||
ProjectPermissionSet,
|
||||
ProjectPermissionSub
|
||||
} from "@app/context/ProjectPermissionContext";
|
||||
import {
|
||||
PermissionConditionOperators,
|
||||
ProjectPermissionSecretActions
|
||||
} from "@app/context/ProjectPermissionContext/types";
|
||||
import { TSecretFolderWithPath } from "@app/hooks/api/secretFolders/types";
|
||||
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
|
||||
|
||||
import { PermissionAccess, PermissionNode } from "../types";
|
||||
import { TActionRuleMap } from ".";
|
||||
|
||||
const ACTION_MAP: Record<string, string[] | undefined> = {
|
||||
[ProjectPermissionSub.Secrets]: [
|
||||
ProjectPermissionSecretActions.DescribeSecret,
|
||||
ProjectPermissionSecretActions.ReadValue,
|
||||
ProjectPermissionSecretActions.Create,
|
||||
ProjectPermissionSecretActions.Edit,
|
||||
ProjectPermissionSecretActions.Delete
|
||||
],
|
||||
[ProjectPermissionSub.DynamicSecrets]: Object.values(ProjectPermissionDynamicSecretActions),
|
||||
[ProjectPermissionSub.SecretFolders]: [
|
||||
ProjectPermissionSecretActions.Create,
|
||||
ProjectPermissionSecretActions.Edit,
|
||||
ProjectPermissionSecretActions.Delete
|
||||
]
|
||||
};
|
||||
|
||||
const evaluateCondition = (
|
||||
value: string,
|
||||
operator: PermissionConditionOperators,
|
||||
comparison: string | string[]
|
||||
) => {
|
||||
switch (operator) {
|
||||
case PermissionConditionOperators.$EQ:
|
||||
return value === comparison;
|
||||
case PermissionConditionOperators.$NEQ:
|
||||
return value !== comparison;
|
||||
case PermissionConditionOperators.$GLOB:
|
||||
return picomatch.isMatch(value, comparison);
|
||||
case PermissionConditionOperators.$IN:
|
||||
return (comparison as string[]).map((v: string) => v.trim()).includes(value);
|
||||
default:
|
||||
throw new Error(`Unhandled operator: ${operator}`);
|
||||
}
|
||||
};
|
||||
|
||||
export const createFolderNode = ({
|
||||
folder,
|
||||
permissions,
|
||||
environment,
|
||||
subject,
|
||||
secretName,
|
||||
actionRuleMap
|
||||
}: {
|
||||
folder: TSecretFolderWithPath;
|
||||
permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
|
||||
environment: string;
|
||||
subject: ProjectPermissionSub;
|
||||
secretName: string;
|
||||
actionRuleMap: TActionRuleMap;
|
||||
}) => {
|
||||
const actions = Object.fromEntries(
|
||||
Object.values(ACTION_MAP[subject] ?? Object.values(ProjectPermissionActions)).map((action) => {
|
||||
let access: PermissionAccess;
|
||||
|
||||
// wrapped in try because while editing certain conditions, if their values are empty it throws an error
|
||||
try {
|
||||
let hasPermission: boolean;
|
||||
|
||||
const subjectFields = {
|
||||
secretPath: folder.path,
|
||||
environment,
|
||||
secretName: secretName || "*",
|
||||
secretTags: ["*"]
|
||||
};
|
||||
|
||||
if (
|
||||
subject === ProjectPermissionSub.Secrets &&
|
||||
(action === ProjectPermissionSecretActions.ReadValue ||
|
||||
action === ProjectPermissionSecretActions.DescribeSecret)
|
||||
) {
|
||||
hasPermission = hasSecretReadValueOrDescribePermission(
|
||||
permissions,
|
||||
action,
|
||||
subjectFields
|
||||
);
|
||||
} else {
|
||||
hasPermission = permissions.can(
|
||||
// @ts-expect-error we are not specifying which so can't resolve if valid
|
||||
action,
|
||||
abilitySubject(subject, subjectFields)
|
||||
);
|
||||
}
|
||||
|
||||
if (hasPermission) {
|
||||
// we want to show yellow/conditional access if user hasn't specified secret name to fully resolve access
|
||||
if (
|
||||
(!secretName || secretName === "*") &&
|
||||
actionRuleMap.some((el) => {
|
||||
// we only show conditional if secretName/secretTags are present - environment and path can be directly determined
|
||||
if (!el[action]?.conditions?.secretName && !el[action]?.conditions?.secretTags)
|
||||
return false;
|
||||
|
||||
// make sure condition applies to env
|
||||
if (el[action]?.conditions?.environment) {
|
||||
if (
|
||||
!Object.entries(el[action]?.conditions?.environment).every(([operator, value]) =>
|
||||
evaluateCondition(environment, operator as PermissionConditionOperators, value)
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// and applies to path
|
||||
if (el[action]?.conditions?.secretPath) {
|
||||
if (
|
||||
!Object.entries(el[action]?.conditions?.secretPath).every(([operator, value]) =>
|
||||
evaluateCondition(folder.path, operator as PermissionConditionOperators, value)
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
})
|
||||
) {
|
||||
access = PermissionAccess.Partial;
|
||||
} else {
|
||||
access = PermissionAccess.Full;
|
||||
}
|
||||
} else {
|
||||
access = PermissionAccess.None;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
access = PermissionAccess.None;
|
||||
}
|
||||
|
||||
return [action, access];
|
||||
})
|
||||
);
|
||||
|
||||
let height = 84;
|
||||
|
||||
switch (subject) {
|
||||
case ProjectPermissionSub.DynamicSecrets:
|
||||
height = 130;
|
||||
break;
|
||||
case ProjectPermissionSub.Secrets:
|
||||
height = 85;
|
||||
break;
|
||||
default:
|
||||
height = 64;
|
||||
}
|
||||
|
||||
return {
|
||||
type: PermissionNode.Folder,
|
||||
id: folder.id,
|
||||
data: {
|
||||
...folder,
|
||||
actions,
|
||||
environment,
|
||||
actionRuleMap,
|
||||
subject
|
||||
},
|
||||
position: { x: 0, y: 0 },
|
||||
width: 264,
|
||||
height
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import { PermissionNode } from "../types";
|
||||
|
||||
export const createRoleNode = ({
|
||||
subject,
|
||||
environment
|
||||
}: {
|
||||
subject: string;
|
||||
environment: string;
|
||||
}) => ({
|
||||
id: `role-${subject}-${environment}`,
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
subject,
|
||||
environment
|
||||
},
|
||||
type: PermissionNode.Role,
|
||||
height: 48,
|
||||
width: 264
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import { camelCaseToSpaces } from "@app/lib/fn/string";
|
||||
|
||||
export const formatActionName = (action: string) => camelCaseToSpaces(action.replaceAll("-", " "));
|
||||
@@ -0,0 +1,27 @@
|
||||
import { MongoAbility, MongoQuery } from "@casl/ability";
|
||||
|
||||
import { ProjectPermissionSet, ProjectPermissionSub } from "@app/context/ProjectPermissionContext";
|
||||
|
||||
export type TActionRuleMap = ReturnType<typeof getSubjectActionRuleMap>;
|
||||
|
||||
export const getSubjectActionRuleMap = (
|
||||
subject: ProjectPermissionSub,
|
||||
permissions: MongoAbility<ProjectPermissionSet, MongoQuery>
|
||||
) => {
|
||||
const rules = permissions.rules.filter((rule) => {
|
||||
const ruleSubject = typeof rule.subject === "string" ? rule.subject : rule.subject[0];
|
||||
|
||||
return ruleSubject === subject;
|
||||
});
|
||||
|
||||
const actionRuleMap: Record<string, (typeof rules)[number]>[] = [];
|
||||
rules.forEach((rule) => {
|
||||
if (typeof rule.action === "string") {
|
||||
actionRuleMap.push({ [rule.action]: rule });
|
||||
} else {
|
||||
actionRuleMap.push(Object.fromEntries(rule.action.map((action) => [action, rule])));
|
||||
}
|
||||
});
|
||||
|
||||
return actionRuleMap;
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
export * from "./createBaseEdge";
|
||||
export * from "./createFolderNode";
|
||||
export * from "./createRoleNode";
|
||||
export * from "./formatActionName";
|
||||
export * from "./getActionRuleMap";
|
||||
export * from "./positionElements";
|
||||
@@ -0,0 +1,28 @@
|
||||
import Dagre from "@dagrejs/dagre";
|
||||
import { Edge, Node } from "@xyflow/react";
|
||||
|
||||
export const positionElements = (nodes: Node[], edges: Edge[]) => {
|
||||
const dagre = new Dagre.graphlib.Graph({ directed: true })
|
||||
.setDefaultEdgeLabel(() => ({}))
|
||||
.setGraph({ rankdir: "TB" });
|
||||
|
||||
edges.forEach((edge) => dagre.setEdge(edge.source, edge.target));
|
||||
nodes.forEach((node) => dagre.setNode(node.id, node));
|
||||
|
||||
Dagre.layout(dagre, {});
|
||||
|
||||
return {
|
||||
nodes: nodes.map((node) => {
|
||||
const { x, y } = dagre.node(node.id);
|
||||
|
||||
return {
|
||||
...node,
|
||||
position: {
|
||||
x: x - (node.width ? node.width / 2 : 0),
|
||||
y: y - (node.height ? node.height / 2 : 0)
|
||||
}
|
||||
};
|
||||
}),
|
||||
edges
|
||||
};
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./AccessTree";
|
||||
export { GlobPermissionInfo } from "./GlobPermissionInfo";
|
||||
export { OrgPermissionCan } from "./OrgPermissionCan";
|
||||
export { PermissionDeniedBanner } from "./PermissionDeniedBanner";
|
||||
|
||||
@@ -59,7 +59,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
|
||||
>
|
||||
<div className="flex items-center space-x-2 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{props.icon && <FontAwesomeIcon icon={props.icon} />}
|
||||
<SelectPrimitive.Value placeholder={placeholder} />
|
||||
<div className="flex-1 truncate">
|
||||
<SelectPrimitive.Value placeholder={placeholder} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SelectPrimitive.Icon className="ml-3">
|
||||
@@ -122,7 +124,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
|
||||
<SelectPrimitive.Item
|
||||
{...props}
|
||||
className={twMerge(
|
||||
"relative mb-0.5 flex cursor-pointer select-none items-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
|
||||
"relative mb-0.5 cursor-pointer select-none items-center overflow-hidden truncate rounded-md py-2 pl-10 pr-4 text-sm outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80",
|
||||
isSelected && "bg-primary",
|
||||
isDisabled && "cursor-not-allowed text-gray-600 opacity-80 hover:!bg-transparent",
|
||||
className
|
||||
|
||||
Reference in New Issue
Block a user