-
-
+
{title}
+
+
+
{title}
-
+
setSidebarOpen(false)}
+ />
+ )}
+
+ setSidebarOpen(false)} />
diff --git a/frontend/src/components/layout/sidebar.tsx b/frontend/src/components/layout/sidebar.tsx
index 50a1cee..d5c35d1 100644
--- a/frontend/src/components/layout/sidebar.tsx
+++ b/frontend/src/components/layout/sidebar.tsx
@@ -42,11 +42,23 @@ const navItems: NavItem[] = [
},
];
-export function Sidebar() {
+interface SidebarProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
const location = useLocation();
return (
-
+
Garage UI
@@ -60,6 +72,7 @@ export function Sidebar() {
{
+ onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef(
+ ({ className, onCheckedChange, onChange, ...props }, ref) => {
+ const handleChange = (e: React.ChangeEvent) => {
+ if (onCheckedChange) {
+ onCheckedChange(e.target.checked);
+ }
+ if (onChange) {
+ onChange(e);
+ }
+ };
+
+ return (
+
+ );
+ }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 9de5913..5d9e018 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -62,7 +62,7 @@ const DialogOverlay = React.forwardRef onOpenChange(false)}
@@ -79,12 +79,12 @@ const DialogContent = React.forwardRef
Garage UI
@@ -60,6 +72,7 @@ export function Sidebar() {
{
+ onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef
+
onOpenChange(false)}
- className="absolute right-4 top-4 rounded-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+ className="absolute right-4 top-4 rounded-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
>
> = ({
...props
}) => (
);
@@ -142,7 +142,7 @@ const DialogDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
));
DialogDescription.displayName = 'DialogDescription';
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a584939
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+ ([]);
@@ -74,46 +75,74 @@ export function AccessControl() {
}, [searchQuery, keys]);
const handleCreateKey = async () => {
- if (!newKeyName) return;
+ if (!newKeyName) {
+ toast.error('Please enter a key name');
+ return;
+ }
- const permissions: Permission[] = [
- {
- resource: newKeyResource,
- actions: newKeyActions,
- effect: 'Allow',
- },
- ];
+ if (newKeyActions.length === 0) {
+ toast.error('Please select at least one action');
+ return;
+ }
- await accessApi.createKey(newKeyName, permissions);
- setCreateDialogOpen(false);
- setNewKeyName('');
- setNewKeyResource('*');
- setNewKeyActions(['GetObject']);
+ try {
+ const permissions: Permission[] = [
+ {
+ resource: newKeyResource,
+ actions: newKeyActions,
+ effect: 'Allow',
+ },
+ ];
- // Refresh keys list
- const data = await accessApi.listKeys();
- setKeys(data);
+ await accessApi.createKey(newKeyName, permissions);
+ setCreateDialogOpen(false);
+ setNewKeyName('');
+ setNewKeyResource('*');
+ setNewKeyActions(['GetObject']);
+
+ // Refresh keys list
+ const data = await accessApi.listKeys();
+ setKeys(data);
+ toast.success(`API Key "${newKeyName}" created successfully`);
+ } catch (error) {
+ toast.error('Failed to create API key. Please try again.');
+ console.error('Create key error:', error);
+ }
};
const handleDeleteKey = async () => {
if (!selectedKey) return;
- await accessApi.deleteKey(selectedKey.accessKeyId);
- setDeleteDialogOpen(false);
- setSelectedKey(null);
+ try {
+ await accessApi.deleteKey(selectedKey.accessKeyId);
+ const keyName = selectedKey.name;
+ setDeleteDialogOpen(false);
+ setSelectedKey(null);
- // Refresh keys list
- const data = await accessApi.listKeys();
- setKeys(data);
+ // Refresh keys list
+ const data = await accessApi.listKeys();
+ setKeys(data);
+ toast.success(`API Key "${keyName}" deleted successfully`);
+ } catch (error) {
+ toast.error('Failed to delete API key. Please try again.');
+ console.error('Delete key error:', error);
+ }
};
const handleToggleKeyStatus = async (key: AccessKey) => {
const newStatus = key.status === 'active' ? 'inactive' : 'active';
- await accessApi.updateKey(key.accessKeyId, { status: newStatus });
- // Refresh keys list
- const data = await accessApi.listKeys();
- setKeys(data);
+ try {
+ await accessApi.updateKey(key.accessKeyId, { status: newStatus });
+
+ // Refresh keys list
+ const data = await accessApi.listKeys();
+ setKeys(data);
+ toast.success(`API Key "${key.name}" ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
+ } catch (error) {
+ toast.error('Failed to update API key status. Please try again.');
+ console.error('Toggle key status error:', error);
+ }
};
const availableActions = [
@@ -131,16 +160,16 @@ export function AccessControl() {
+
-
- API Keys
- Bucket Policies
+
+ API Keys
+ Bucket Policies
-
+
{/* Stats */}
-
+
Total Keys
@@ -177,8 +206,8 @@ export function AccessControl() {
{/* Toolbar */}
-
-
+
+
{/* Keys Table */}
-
+