app-catalog: enchance release management with filter and bulk action

Signed-off-by: Quentin Lafond <[email protected]>

Author: Quent1OK

app-catalog/src/components/releases/BulkActionsToolbar.tsx

@@ -0,0 +1,39 @@
+import { Icon } from '@iconify/react';
+import { Box, IconButton, Typography } from '@mui/material';
+
+interface BulkActionsToolbarProps {
+  selectedCount: number;
+  onDelete: () => void;
+}
+
+export function BulkActionsToolbar({ selectedCount, onDelete }: BulkActionsToolbarProps) {
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '8px 16px',
+        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        borderRadius: '4px',
+        marginBottom: '16px',
+      }}
+    >
+      <Typography variant="body2">
+        {selectedCount} {selectedCount === 1 ? 'release selected' : 'releases selected'}
+      </Typography>
+      <IconButton
+        onClick={onDelete}
+        size="small"
+        aria-label="Delete selected releases"
+        color="error"
+      >
+        <Icon icon="mdi:delete" />
+      </IconButton>
+    </Box>
+  );
+}

app-catalog/src/components/releases/BulkDeleteDialog.tsx

@@ -0,0 +1,34 @@
+import { Dialog } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Button, DialogActions, DialogContent, DialogContentText } from '@mui/material';
+
+interface BulkDeleteDialogProps {
+  open: boolean;
+  count: number;
+  isDeleting: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function BulkDeleteDialog({
+  open,
+  count,
+  isDeleting,
+  onClose,
+  onConfirm,
+}: BulkDeleteDialogProps) {
+  return (
+    <Dialog open={open} maxWidth="sm" onClose={onClose} title="Uninstall Multiple Apps">
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to uninstall {count} {count === 1 ? 'release' : 'releases'}?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{isDeleting ? 'Close' : 'No'}</Button>
+        <Button disabled={isDeleting} onClick={onConfirm} color="error">
+          {isDeleting ? 'Deleting...' : 'Yes'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

app-catalog/src/components/releases/DeleteConfirmDialog.tsx

@@ -0,0 +1,34 @@
+import { Dialog } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Button, DialogActions, DialogContent, DialogContentText } from '@mui/material';
+
+interface DeleteConfirmDialogProps {
+  open: boolean;
+  isDeleting: boolean;
+  releaseName?: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteConfirmDialog({
+  open,
+  isDeleting,
+  releaseName,
+  onClose,
+  onConfirm,
+}: DeleteConfirmDialogProps) {
+  return (
+    <Dialog open={open} maxWidth="sm" onClose={onClose} title="Uninstall App">
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to uninstall this release{releaseName ? ` "${releaseName}"` : ''}?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{isDeleting ? 'Close' : 'No'}</Button>
+        <Button disabled={isDeleting} onClick={onConfirm}>
+          {isDeleting ? 'Deleting' : 'Yes'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}