@red-hat-developer-hub/backstage-plugin-intelligent-assistant 5.0.1 → 5.0.2

package/dist/components/notebooks/AddDocumentModal.esm.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useContext } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -9,6 +8,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import { Alert, MultipleFileUpload, MultipleFileUploadMain, Tooltip, MultipleFileUploadContext } from '@patternfly/react-core';
 import { UploadIcon } from '@patternfly/react-icons';
@@ -19,136 +19,90 @@ import { runFileUploads } from '../../utils/notebook-upload-runner.esm.js';
 import { getNotebookAcceptedFileTypes, validateFiles } from '../../utils/notebook-upload-utils.esm.js';
 import { getScopedDialogProps } from '../../utils/scoped-dialog-utils.esm.js';
 import { FileListItem } from './FileListItem.esm.js';
-import { notebookDialogStyles } from './notebookDialogStyles.esm.js';
+import { notebookDialogTitleTextSx, notebookDialogCloseButtonSx, notebookDialogTitleSx, notebookDialogContentSx, notebookDialogActionsSx, notebookDialogPaperSx, optionalStyle } from './notebookDialogStyles.esm.js';
 
 const UNIQUE_FILE_TYPE_LABELS = [
   ...new Set(Object.values(NOTEBOOK_EXTENSION_TO_FILE_TYPE))
 ].map((t) => t.toUpperCase());
-const useStyles = makeStyles((theme) => ({
-  ...notebookDialogStyles(theme),
-  titleTextCompact: {
-    fontWeight: 600,
-    fontSize: "1.125rem",
-    lineHeight: "1.5rem",
-    letterSpacing: "-0.25px"
-  },
-  errorAlert: {
-    marginBottom: theme.spacing(2),
-    "--pf-v6-c-alert--PaddingBlockEnd": "0",
-    "& .pf-v6-c-alert__title": {
-      marginBlockStart: 0
+const ErrorAlert = styled(Alert)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  "--pf-v6-c-alert--PaddingBlockEnd": "0",
+  "& .pf-v6-c-alert__title": {
+    marginBlockStart: 0
+  }
+}));
+const Dropzone = styled("div", {
+  shouldForwardProp: (prop) => prop !== "isDropzoneDisabled"
+})(({ theme, isDropzoneDisabled }) => ({
+  borderColor: "var(--pf-t--global--border--color--brand--default)",
+  borderWidth: 2,
+  borderStyle: "dashed",
+  borderRadius: theme.spacing(1),
+  transition: "background-color 0.2s ease",
+  cursor: isDropzoneDisabled ? "default" : "pointer",
+  ...isDropzoneDisabled ? {
+    opacity: 0.5,
+    pointerEvents: "none",
+    "&:hover": {
+      backgroundColor: "transparent"
     }
-  },
-  dropzone: {
-    borderColor: "var(--pf-t--global--border--color--brand--default)",
-    borderWidth: 2,
-    borderStyle: "dashed",
-    borderRadius: theme.spacing(1),
-    padding: theme.spacing(2),
-    transition: "background-color 0.2s ease",
-    cursor: "pointer",
+  } : {
     "&:hover": {
       backgroundColor: "color-mix(in srgb, var(--pf-t--global--color--brand--default) 10%, transparent)"
-    },
-    "& .pf-v6-c-multiple-file-upload__main": {
-      border: "none",
-      paddingBottom: 0
-    },
-    "& .pf-v6-c-multiple-file-upload__title-icon": {
-      fontSize: "2rem"
     }
   },
-  fileListContainer: {
-    marginTop: theme.spacing(2),
-    maxHeight: 200,
-    overflowY: "auto"
-  },
-  fileListHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing(1)
-  },
-  fileCount: {
-    fontSize: "0.875rem",
-    color: theme.palette.text.secondary
-  },
-  dialogActions: {
-    padding: "16px 24px",
-    justifyContent: "flex-start",
-    gap: theme.spacing(1)
-  },
-  dialogActionsCompact: {
-    padding: "12px 16px !important",
-    justifyContent: "flex-start",
-    gap: theme.spacing(1)
-  },
-  addButton: {
-    textTransform: "none"
-  },
-  cancelButton: {
-    textTransform: "none"
-  },
-  uploadIcon: {
-    color: "var(--pf-t--global--icon--color--brand--default)"
+  "& .pf-v6-c-multiple-file-upload__main": {
+    border: "none",
+    paddingBottom: 0
   },
-  supportedFormatsLabel: {
-    fontSize: "0.875rem",
-    color: theme.palette.text.secondary,
-    textAlign: "center",
-    marginTop: theme.spacing(1)
-  },
-  chipContainer: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(0.75),
-    justifyContent: "center",
-    marginTop: theme.spacing(0.5)
-  },
-  fileTypeChip: {
-    display: "inline-block",
-    padding: "2px 10px",
-    borderRadius: 12,
-    fontSize: "0.75rem",
-    fontWeight: 500,
-    backgroundColor: theme.palette.type === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.08)",
-    color: theme.palette.text.secondary
-  },
-  maxFileSizeText: {
-    fontSize: "0.875rem",
-    color: theme.palette.text.secondary,
-    textAlign: "center",
-    marginTop: theme.spacing(1)
-  },
-  dropzoneDisabled: {
-    opacity: 0.5,
-    pointerEvents: "none",
-    cursor: "default",
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
+  "& .pf-v6-c-multiple-file-upload__title-icon": {
+    fontSize: "2rem"
+  }
+}));
+const DropzoneClickAreaRoot = styled("div")(({ theme }) => ({
+  display: "block",
+  padding: theme.spacing(2),
+  cursor: "pointer",
+  '&[aria-disabled="true"]': {
+    cursor: "default"
   }
 }));
+const StyledUploadIcon = styled(UploadIcon)({
+  color: "var(--pf-t--global--icon--color--brand--default)"
+});
+const FileTypeChip = styled("span")(({ theme }) => ({
+  display: "inline-block",
+  padding: "2px 10px",
+  borderRadius: 12,
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.08)",
+  color: theme.palette.text.secondary
+}));
 const DropzoneClickArea = ({
   children,
   isDisabled,
   ariaLabel
 }) => {
   const { open } = useContext(MultipleFileUploadContext);
+  const openFilePicker = (event) => {
+    event.stopPropagation();
+    open();
+  };
   return /* @__PURE__ */ jsx(
-    "div",
+    DropzoneClickAreaRoot,
     {
       role: "button",
       "aria-label": ariaLabel,
+      "aria-disabled": isDisabled,
       tabIndex: isDisabled ? -1 : 0,
-      onClick: isDisabled ? void 0 : open,
+      onClick: isDisabled ? void 0 : openFilePicker,
       onKeyDown: isDisabled ? void 0 : (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
-          open();
+          openFilePicker(e);
         }
       },
-      style: { cursor: isDisabled ? "default" : "pointer" },
       children
     }
   );
@@ -167,7 +121,6 @@ const AddDocumentModal = ({
   onFilesAdded,
   isCompact = false
 }) => {
-  const classes = useStyles();
   const { t } = useTranslation();
   const uploadMutation = useUploadDocument();
   const [validationErrors, setValidationErrors] = useState([]);
@@ -243,161 +196,188 @@ const AddDocumentModal = ({
       "aria-labelledby": "add-document-modal-title",
       ...scopedProps,
       PaperProps: {
-        className: isCompact ? classes.dialogPaperCompact : classes.dialogPaper,
-        ...scopedProps.PaperProps
+        ...scopedProps.PaperProps,
+        sx: [
+          notebookDialogPaperSx(isCompact),
+          optionalStyle(scopedProps.PaperProps?.sx)
+        ]
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          DialogTitle,
-          {
-            className: isCompact ? classes.dialogTitleCompact : classes.dialogTitle,
-            children: [
-              /* @__PURE__ */ jsxs(
-                Typography,
-                {
-                  component: "h2",
-                  className: isCompact ? classes.titleTextCompact : classes.titleText,
-                  children: [
-                    t("notebook.upload.modal.title"),
-                    selectedFiles.length > 0 && ` (${selectedFiles.length}/${NOTEBOOK_MAX_FILES - existingDocumentNames.length})`
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  "aria-label": t("common.close"),
-                  onClick: handleClose,
-                  className: classes.closeButton,
-                  size: "small",
-                  children: /* @__PURE__ */ jsx(CloseIcon, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          DialogContent,
-          {
-            className: isCompact ? classes.dialogContentCompact : classes.dialogContent,
-            children: [
-              validationErrors.length > 0 && /* @__PURE__ */ jsx(
-                Alert,
-                {
-                  variant: "danger",
-                  isInline: true,
-                  className: classes.errorAlert,
-                  title: validationErrors.map((errorKey) => {
-                    const message = t(errorKey);
-                    return errorKey === "notebook.upload.error.tooManyFiles" ? message.replace("{{max}}", String(NOTEBOOK_MAX_FILES)) : message;
-                  }).join("\n")
-                }
-              ),
-              hasUploadsInProgress && /* @__PURE__ */ jsx(
-                Alert,
-                {
-                  variant: "info",
-                  isInline: true,
-                  className: classes.errorAlert,
-                  title: t("notebook.view.documents.uploadsInProgress")
-                }
-              ),
-              (() => {
-                const isDropzoneDisabled = remainingSlots <= 0;
-                const dropzoneContent = /* @__PURE__ */ jsx(
-                  MultipleFileUpload,
+        /* @__PURE__ */ jsxs(DialogTitle, { sx: notebookDialogTitleSx(isCompact), children: [
+          /* @__PURE__ */ jsxs(Typography, { component: "h2", sx: notebookDialogTitleTextSx(isCompact), children: [
+            t("notebook.upload.modal.title"),
+            selectedFiles.length > 0 && ` (${selectedFiles.length}/${NOTEBOOK_MAX_FILES - existingDocumentNames.length})`
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": t("common.close"),
+              onClick: handleClose,
+              sx: notebookDialogCloseButtonSx,
+              size: "small",
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DialogContent, { sx: notebookDialogContentSx(isCompact), children: [
+          validationErrors.length > 0 && /* @__PURE__ */ jsx(
+            ErrorAlert,
+            {
+              variant: "danger",
+              isInline: true,
+              title: validationErrors.map((errorKey) => {
+                const message = t(errorKey);
+                return errorKey === "notebook.upload.error.tooManyFiles" ? message.replace("{{max}}", String(NOTEBOOK_MAX_FILES)) : message;
+              }).join("\n")
+            }
+          ),
+          hasUploadsInProgress && /* @__PURE__ */ jsx(
+            ErrorAlert,
+            {
+              variant: "info",
+              isInline: true,
+              title: t("notebook.view.documents.uploadsInProgress")
+            }
+          ),
+          (() => {
+            const isDropzoneDisabled = remainingSlots <= 0;
+            const dropzoneContent = /* @__PURE__ */ jsx(Dropzone, { isDropzoneDisabled, children: /* @__PURE__ */ jsx(
+              MultipleFileUpload,
+              {
+                dropzoneProps: {
+                  accept: getNotebookAcceptedFileTypes(),
+                  onDropRejected: handleDropRejected,
+                  disabled: isDropzoneDisabled,
+                  noClick: true
+                },
+                onFileDrop: handleFileDrop,
+                children: /* @__PURE__ */ jsxs(
+                  DropzoneClickArea,
                   {
-                    className: `${classes.dropzone} ${isDropzoneDisabled ? classes.dropzoneDisabled : ""}`,
-                    dropzoneProps: {
-                      accept: getNotebookAcceptedFileTypes(),
-                      onDropRejected: handleDropRejected,
-                      disabled: isDropzoneDisabled
-                    },
-                    onFileDrop: handleFileDrop,
-                    children: /* @__PURE__ */ jsxs(
-                      DropzoneClickArea,
-                      {
-                        isDisabled: isDropzoneDisabled,
-                        ariaLabel: t("notebook.upload.modal.dragDropTitle"),
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            MultipleFileUploadMain,
-                            {
-                              titleIcon: /* @__PURE__ */ jsx(UploadIcon, { className: classes.uploadIcon }),
-                              titleText: t("notebook.upload.modal.dragDropTitle"),
-                              isUploadButtonHidden: true
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(Typography, { className: classes.supportedFormatsLabel, children: t("notebook.upload.modal.supportedFormats") }),
-                          /* @__PURE__ */ jsx("div", { className: classes.chipContainer, children: UNIQUE_FILE_TYPE_LABELS.map((label) => /* @__PURE__ */ jsx("span", { className: classes.fileTypeChip, children: label }, label)) }),
-                          /* @__PURE__ */ jsx(Typography, { className: classes.maxFileSizeText, children: t("notebook.upload.modal.maxFileSize") })
-                        ]
-                      }
-                    )
+                    isDisabled: isDropzoneDisabled,
+                    ariaLabel: t("notebook.upload.modal.dragDropTitle"),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        MultipleFileUploadMain,
+                        {
+                          titleIcon: /* @__PURE__ */ jsx(StyledUploadIcon, {}),
+                          titleText: t("notebook.upload.modal.dragDropTitle"),
+                          isUploadButtonHidden: true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: {
+                            fontSize: "0.875rem",
+                            color: "text.secondary",
+                            textAlign: "center",
+                            mt: 1
+                          },
+                          children: t("notebook.upload.modal.supportedFormats")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            display: "flex",
+                            flexWrap: "wrap",
+                            gap: 0.75,
+                            justifyContent: "center",
+                            mt: 0.5
+                          },
+                          children: UNIQUE_FILE_TYPE_LABELS.map((label) => /* @__PURE__ */ jsx(FileTypeChip, { children: label }, label))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Typography,
+                        {
+                          sx: {
+                            fontSize: "0.875rem",
+                            color: "text.secondary",
+                            textAlign: "center",
+                            mt: 1
+                          },
+                          children: t("notebook.upload.modal.maxFileSize")
+                        }
+                      )
+                    ]
                   }
-                );
-                return isDropzoneDisabled ? /* @__PURE__ */ jsx(
-                  Tooltip,
+                )
+              }
+            ) });
+            return isDropzoneDisabled ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("notebook.view.documents.maxReached"),
+                position: "top",
+                children: /* @__PURE__ */ jsx("div", { children: dropzoneContent })
+              }
+            ) : dropzoneContent;
+          })(),
+          selectedFiles.length > 0 && /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, maxHeight: 200, overflowY: "auto" }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  mb: 1
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
                   {
-                    content: t("notebook.view.documents.maxReached"),
-                    position: "top",
-                    children: /* @__PURE__ */ jsx("div", { children: dropzoneContent })
+                    sx: { fontSize: "0.875rem", color: "text.secondary" },
+                    children: t("notebook.upload.modal.selectedFiles", {
+                      count: selectedFiles.length,
+                      max: NOTEBOOK_MAX_FILES - existingDocumentNames.length
+                    })
                   }
-                ) : dropzoneContent;
-              })(),
-              selectedFiles.length > 0 && /* @__PURE__ */ jsxs(Box, { className: classes.fileListContainer, children: [
-                /* @__PURE__ */ jsx(Box, { className: classes.fileListHeader, children: /* @__PURE__ */ jsx(Typography, { className: classes.fileCount, children: t("notebook.upload.modal.selectedFiles", {
-                  count: selectedFiles.length,
-                  max: NOTEBOOK_MAX_FILES - existingDocumentNames.length
-                }) }) }),
-                selectedFiles.map((file, index) => /* @__PURE__ */ jsx(
-                  FileListItem,
+                )
+              }
+            ),
+            selectedFiles.map((file, index) => /* @__PURE__ */ jsx(
+              FileListItem,
+              {
+                file,
+                onRemove: () => handleRemoveFile(index),
+                removeAriaLabel: t(
+                  "notebook.upload.modal.removeFile",
                   {
-                    file,
-                    onRemove: () => handleRemoveFile(index),
-                    removeAriaLabel: t(
-                      "notebook.upload.modal.removeFile",
-                      {
-                        fileName: file.name
-                      }
-                    )
-                  },
-                  `${file.name}-${index}`
-                ))
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          DialogActions,
-          {
-            className: isCompact ? classes.dialogActionsCompact : classes.dialogActions,
-            children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleAddFiles,
-                  className: classes.addButton,
-                  variant: "contained",
-                  color: "primary",
-                  disabled: selectedFiles.length === 0 || hasUploadsInProgress,
-                  children: selectedFiles.length > 0 ? t("notebook.upload.modal.addButton", {
-                    count: selectedFiles.length
-                  }) : t("notebook.upload.modal.addButtonEmpty")
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleClose,
-                  className: classes.cancelButton,
-                  color: "inherit",
-                  children: t("common.cancel")
-                }
-              )
-            ]
-          }
-        )
+                    fileName: file.name
+                  }
+                )
+              },
+              `${file.name}-${index}`
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { sx: notebookDialogActionsSx(isCompact), children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleAddFiles,
+              sx: { textTransform: "none" },
+              variant: "contained",
+              color: "primary",
+              disabled: selectedFiles.length === 0 || hasUploadsInProgress,
+              children: selectedFiles.length > 0 ? t("notebook.upload.modal.addButton", {
+                count: selectedFiles.length
+              }) : t("notebook.upload.modal.addButtonEmpty")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleClose,
+              sx: { textTransform: "none" },
+              color: "inherit",
+              children: t("common.cancel")
+            }
+          )
+        ] })
       ]
     }
   );