From 1165f920b717fa2636fc991f87f4ab6a4883d1f1 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 19 Oct 2023 11:37:13 +0200 Subject: [PATCH 01/11] feat: add delete and move actions --- .../styles/material-theme-assignments.scss | 2 +- .../components/BulkActions/ActionDelete.tsx | 72 ++++++++++++++++ .../src/components/BulkActions/ActionMove.tsx | 82 +++++++++++++++++++ .../components/BulkActions/BulkActions.tsx | 54 ++++++++++++ .../src/components/BulkActions/index.tsx | 3 + .../src/components/BulkActions/styles.tsx | 35 ++++++++ .../components/LayoutSwitch/LayoutSwitch.tsx | 31 +++++++ .../src/components/LayoutSwitch/index.tsx | 1 + .../components/Table/RecordActionDelete.tsx | 4 +- .../src/components/Table/Table.tsx | 16 ++-- .../FileManagerView/FileManagerViewConfig.tsx | 1 + .../configComponents/Browser/BulkAction.tsx | 79 ++++++++++++++++++ .../configComponents/Browser/index.ts | 3 + .../src/modules/FileManagerRenderer/index.tsx | 3 + 14 files changed, 372 insertions(+), 14 deletions(-) create mode 100644 packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx create mode 100644 packages/app-file-manager/src/components/BulkActions/ActionMove.tsx create mode 100644 packages/app-file-manager/src/components/BulkActions/BulkActions.tsx create mode 100644 packages/app-file-manager/src/components/BulkActions/index.tsx create mode 100644 packages/app-file-manager/src/components/BulkActions/styles.tsx create mode 100644 packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx create mode 100644 packages/app-file-manager/src/components/LayoutSwitch/index.tsx create mode 100644 packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx diff --git a/packages/app-admin/src/styles/material-theme-assignments.scss b/packages/app-admin/src/styles/material-theme-assignments.scss index 0b01ef4bc52..047c31d53fa 100644 --- a/packages/app-admin/src/styles/material-theme-assignments.scss +++ b/packages/app-admin/src/styles/material-theme-assignments.scss @@ -201,7 +201,7 @@ Fix the width of input components when inside grids // dialog .mdc-dialog { - z-index: 20; + z-index: 22; .mdc-dialog__container { width: 100%; } diff --git a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx new file mode 100644 index 00000000000..9b9bc8e6215 --- /dev/null +++ b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx @@ -0,0 +1,72 @@ +import React, { useMemo } from "react"; +import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg"; +import { observer } from "mobx-react-lite"; + +import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig"; +import { useFileManagerApi } from "~/modules/FileManagerApiProvider/FileManagerApiContext"; +import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; +import { getFilesLabel } from "~/components/BulkActions/BulkActions"; + +export const ActionDelete = observer(() => { + const { deleteFile } = useFileManagerView(); + const { canDelete } = useFileManagerApi(); + + const { useWorker, useButtons, useDialog } = FileManagerViewConfig.Browser.BulkAction; + const { IconButton } = useButtons(); + const worker = useWorker(); + const { showConfirmationDialog, showResultsDialog } = useDialog(); + + const filesLabel = useMemo(() => { + return getFilesLabel(worker.items.length); + }, [worker.items.length]); + + const canDeleteAll = useMemo(() => { + return worker.items.every(item => canDelete(item)); + }, [worker.items]); + + const openDeleteDialog = () => + showConfirmationDialog({ + title: "Delete files", + message: `You are about to delete ${filesLabel}. Are you sure you want to continue?`, + loadingLabel: `Processing ${filesLabel}`, + execute: async () => { + await worker.processInSeries(async ({ item, report }) => { + try { + await deleteFile(item.id); + + report.success({ + title: `${item.name}`, + message: "File successfully deleted." + }); + } catch (e) { + report.error({ + title: `${item.name}`, + message: e.message + }); + } + }); + + worker.resetItems(); + + showResultsDialog({ + results: worker.results, + title: "Delete files", + message: "Operation completed, here below you find the complete report:" + }); + } + }); + + if (!canDeleteAll) { + console.log("Does not have permission to delete one or more files."); + return null; + } + + return ( + } + onAction={openDeleteDialog} + label={`Delete ${filesLabel}`} + tooltipPlacement={"bottom"} + /> + ); +}); diff --git a/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx new file mode 100644 index 00000000000..cc8b36caa30 --- /dev/null +++ b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx @@ -0,0 +1,82 @@ +import React, { useCallback, useMemo } from "react"; +import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg"; +import { observer } from "mobx-react-lite"; +import { useMoveToFolderDialog, useNavigateFolder } from "@webiny/app-aco"; +import { FolderItem } from "@webiny/app-aco/types"; + +import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; +import { FileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig"; +import { getFilesLabel } from "~/components/BulkActions/BulkActions"; +import { ROOT_FOLDER } from "~/constants"; + +export const ActionMove = observer(() => { + const { moveFileToFolder } = useFileManagerView(); + const { currentFolderId } = useNavigateFolder(); + + const { useWorker, useButtons, useDialog } = FileManagerViewConfig.Browser.BulkAction; + const { IconButton } = useButtons(); + const worker = useWorker(); + const { showConfirmationDialog, showResultsDialog } = useDialog(); + const { showDialog: showMoveDialog } = useMoveToFolderDialog(); + + const filesLabel = useMemo(() => { + return getFilesLabel(worker.items.length); + }, [worker.items.length]); + + const openWorkerDialog = useCallback( + (folder: FolderItem) => { + showConfirmationDialog({ + title: "Move files", + message: `You are about to move ${filesLabel} to ${folder.title}. Are you sure you want to continue?`, + loadingLabel: `Processing ${filesLabel}`, + execute: async () => { + await worker.processInSeries(async ({ item, report }) => { + try { + await moveFileToFolder(item.id, folder.id); + + report.success({ + title: `${item.name}`, + message: "File successfully moved." + }); + } catch (e) { + report.error({ + title: `${item.name}`, + message: e.message + }); + } + }); + + worker.resetItems(); + + showResultsDialog({ + results: worker.results, + title: "Move files", + message: "Operation completed, here below you find the complete report:" + }); + } + }); + }, + [filesLabel] + ); + + const openMoveDialog = () => + showMoveDialog({ + title: "Select folder", + message: "Select a new location for selected files:", + loadingLabel: `Processing ${filesLabel}`, + acceptLabel: `Move`, + focusedFolderId: currentFolderId || ROOT_FOLDER, + async onAccept({ folder }) { + openWorkerDialog(folder); + } + }); + + return ( + } + onAction={openMoveDialog} + label={`Move ${filesLabel}`} + tooltipPlacement={"bottom"} + /> + ); +}); diff --git a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx new file mode 100644 index 00000000000..260e12fd122 --- /dev/null +++ b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx @@ -0,0 +1,54 @@ +import React, { useMemo } from "react"; +import { ReactComponent as Close } from "@material-design-icons/svg/outlined/close.svg"; +import { i18n } from "@webiny/app/i18n"; +import { Buttons } from "@webiny/app-admin"; +import { IconButton } from "@webiny/ui/Button"; +import { Typography } from "@webiny/ui/Typography"; + +import { LayoutSwitch } from "~/components/LayoutSwitch"; + +import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig"; +import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; + +import { + ActionsContainer, + BulkActionsContainer, + BulkActionsInner, + ButtonsContainer +} from "./styles"; + +const t = i18n.ns("app-file-manager/components/bulk-actions"); + +export const getFilesLabel = (count = 0): string => { + return `${count} ${count === 1 ? "file" : "files"}`; +}; + +export const BulkActions = () => { + const { browser } = useFileManagerViewConfig(); + const view = useFileManagerView(); + + const headline = useMemo((): string => { + return t`{label} selected:`({ + label: getFilesLabel(view.selected.length) + }); + }, [view.selected]); + + if (!view.selected.length) { + return null; + } + + return ( + + + + {headline} + + + + + } onClick={() => view.setSelected([])} /> + + + + ); +}; diff --git a/packages/app-file-manager/src/components/BulkActions/index.tsx b/packages/app-file-manager/src/components/BulkActions/index.tsx new file mode 100644 index 00000000000..2a288edd8a4 --- /dev/null +++ b/packages/app-file-manager/src/components/BulkActions/index.tsx @@ -0,0 +1,3 @@ +export { ActionDelete } from "./ActionDelete"; +export { ActionMove } from "./ActionMove"; +export * from "./BulkActions"; diff --git a/packages/app-file-manager/src/components/BulkActions/styles.tsx b/packages/app-file-manager/src/components/BulkActions/styles.tsx new file mode 100644 index 00000000000..201e17a909a --- /dev/null +++ b/packages/app-file-manager/src/components/BulkActions/styles.tsx @@ -0,0 +1,35 @@ +import styled from "@emotion/styled"; +import { ButtonContainer } from "@webiny/app-admin"; + +export const BulkActionsContainer = styled.div` + width: 100%; + height: 64px; + background-color: var(--mdc-theme-surface); + border-bottom: 1px solid rgba(0, 0, 0, 0.12); + position: absolute; + top: 0; + left: 0; + z-index: 4; +`; + +export const BulkActionsInner = styled.div` + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 12px; +`; + +export const ButtonsContainer = styled.div` + display: flex; + align-items: center; + + ${ButtonContainer} { + margin: 0; + } +`; + +export const ActionsContainer = styled.div` + display: flex; + align-items: center; +`; diff --git a/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx b/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx new file mode 100644 index 00000000000..e1f61476de5 --- /dev/null +++ b/packages/app-file-manager/src/components/LayoutSwitch/LayoutSwitch.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +import { ReactComponent as GridIcon } from "@material-design-icons/svg/outlined/view_module.svg"; +import { ReactComponent as TableIcon } from "@material-design-icons/svg/outlined/view_list.svg"; +import { i18n } from "@webiny/app/i18n"; +import { IconButton } from "@webiny/ui/Button"; +import { Tooltip } from "@webiny/ui/Tooltip"; + +import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; + +const t = i18n.ns("app-file-manager/components/layout-switch"); + +export const LayoutSwitch = () => { + const view = useFileManagerView(); + + return ( + + : } + onClick={() => view.setListTable(!view.listTable)} + > + {t`Switch`} + + + ); +}; diff --git a/packages/app-file-manager/src/components/LayoutSwitch/index.tsx b/packages/app-file-manager/src/components/LayoutSwitch/index.tsx new file mode 100644 index 00000000000..824e9bde82a --- /dev/null +++ b/packages/app-file-manager/src/components/LayoutSwitch/index.tsx @@ -0,0 +1 @@ +export * from "./LayoutSwitch"; diff --git a/packages/app-file-manager/src/components/Table/RecordActionDelete.tsx b/packages/app-file-manager/src/components/Table/RecordActionDelete.tsx index 84f46f06ee0..6d4ef036109 100644 --- a/packages/app-file-manager/src/components/Table/RecordActionDelete.tsx +++ b/packages/app-file-manager/src/components/Table/RecordActionDelete.tsx @@ -14,12 +14,12 @@ interface RecordActionDeleteProps { } export const RecordActionDelete: React.VFC = ({ record }) => { - const { canEdit } = useFileManagerApi(); + const { canDelete } = useFileManagerApi(); const { openDialogDeleteFile } = useDeleteFile({ file: record }); - if (!canEdit(record)) { + if (!canDelete(record)) { return null; } diff --git a/packages/app-file-manager/src/components/Table/Table.tsx b/packages/app-file-manager/src/components/Table/Table.tsx index f09c97c3b37..0537cf1dfe8 100644 --- a/packages/app-file-manager/src/components/Table/Table.tsx +++ b/packages/app-file-manager/src/components/Table/Table.tsx @@ -34,8 +34,6 @@ export interface TableProps { sorting: Sorting; onSortingChange: OnSortingChange; settings?: Settings; - selectableItems: boolean; - canSelectAllRows: boolean; } interface BaseEntry { @@ -57,18 +55,17 @@ interface FileEntry extends BaseEntry { interface FolderEntry extends BaseEntry { $type: "FOLDER"; - $selectable: boolean; title: string; original: FolderItem; } type Entry = FolderEntry | FileEntry; -const createRecordsData = (items: FileItem[], selectable: boolean): FileEntry[] => { +const createRecordsData = (items: FileItem[]): FileEntry[] => { return items.map(data => { return { $type: "RECORD", - $selectable: selectable, + $selectable: true, id: data.id, name: data.name, createdBy: data.createdBy?.displayName || "-", @@ -109,9 +106,7 @@ export const Table = forwardRef((props, ref) => { onRecordClick, onFolderClick, sorting, - onSortingChange, - selectableItems, - canSelectAllRows + onSortingChange } = props; const [selectedFolder, setSelectedFolder] = useState(); @@ -119,7 +114,7 @@ export const Table = forwardRef((props, ref) => { const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const data = useMemo(() => { - return [...createFoldersData(folders), ...createRecordsData(records, selectableItems)]; + return [...createFoldersData(folders), ...createRecordsData(records)]; }, [folders, records]); const columns: Columns = useMemo(() => { @@ -227,7 +222,6 @@ export const Table = forwardRef((props, ref) => { return (
- canSelectAllRows={canSelectAllRows} columns={columns} data={data} loadingInitial={loading} @@ -242,7 +236,7 @@ export const Table = forwardRef((props, ref) => { } ]} onSortingChange={onSortingChange} - selectedRows={createRecordsData(selectedRecords, true)} + selectedRows={createRecordsData(selectedRecords)} /> {selectedFolder && ( <> diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx index a23eaa2bd4c..3266245df3c 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig.tsx @@ -22,6 +22,7 @@ export function useFileManagerViewConfig() { () => ({ browser: { ...browser, + bulkActions: [...(browser.bulkActions || [])], filterByTags: browser.filterByTags ?? false, filters: [...(browser.filters || [])], filtersToWhere: [...(browser.filtersToWhere || [])] diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx new file mode 100644 index 00000000000..ad586cb6129 --- /dev/null +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx @@ -0,0 +1,79 @@ +import React, { useCallback, useEffect, useRef } from "react"; +import { CallbackParams, useButtons, useDialogWithReport, Worker } from "@webiny/app-admin"; +import { Property, useIdGenerator } from "@webiny/react-properties"; +import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; +import { FileItem } from "@webiny/app-admin/types"; + +export interface BulkActionConfig { + name: string; + element: React.ReactElement; +} + +export interface BulkActionProps { + name: string; + remove?: boolean; + before?: string; + after?: string; + element: React.ReactElement; +} + +export const BaseBulkAction: React.FC = ({ + name, + after = undefined, + before = undefined, + remove = false, + element +}) => { + const getId = useIdGenerator("bulkAction"); + + const placeAfter = after !== undefined ? getId(after) : undefined; + const placeBefore = before !== undefined ? getId(before) : undefined; + + return ( + + + + + + + ); +}; + +const useWorker = () => { + const { selected, setSelected } = useFileManagerView(); + const { current: worker } = useRef(new Worker()); + + useEffect(() => { + worker.items = selected; + }, [selected]); + + // Reset selected items in both usePagesList and Worker + const resetItems = useCallback(() => { + worker.items = []; + setSelected([]); + }, []); + + return { + items: worker.items, + process: (callback: (items: FileItem[]) => void) => worker.process(callback), + processInSeries: async ( + callback: ({ item, allItems, report }: CallbackParams) => Promise, + chunkSize?: number + ) => worker.processInSeries(callback, chunkSize), + resetItems: resetItems, + results: worker.results + }; +}; + +export const BulkAction = Object.assign(BaseBulkAction, { + useButtons, + useWorker, + useDialog: useDialogWithReport +}); diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/index.ts b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/index.ts index e46cd78082e..49efefa364e 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/index.ts +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/index.ts @@ -1,14 +1,17 @@ +import { BulkAction, BulkActionConfig } from "./BulkAction"; import { Filter, FilterConfig } from "./Filter"; import { FiltersToWhere, FiltersToWhereConverter } from "./FiltersToWhere"; import { FilterByTags } from "./FilterByTags"; export interface BrowserConfig { + bulkActions: BulkActionConfig[]; filters: FilterConfig[]; filtersToWhere: FiltersToWhereConverter[]; filterByTags: Boolean; } export const Browser = { + BulkAction, Filter, FiltersToWhere, FilterByTags diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx index cf4a98b2920..d3323cc9cb5 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import { FileManagerViewConfig as FileManagerConfig } from "~/index"; import { FileManagerRenderer } from "./FileManagerView"; import { FilterByType } from "./filters/FilterByType"; +import { ActionDelete, ActionMove } from "~/components/BulkActions"; import { Name } from "~/components/FileDetails/components/Name"; import { Tags } from "~/components/FileDetails/components/Tags"; import { Aliases } from "~/components/FileDetails/components/Aliases"; @@ -15,6 +16,8 @@ export const FileManagerRendererModule = () => { } /> + } /> + } /> } /> } /> } /> From d82f752e593ede01c1e1bb177113325009ef790d Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 19 Oct 2023 11:57:27 +0200 Subject: [PATCH 02/11] fix: change areFilesSelectable flag name --- .../src/components/Grid/Grid.tsx | 6 ++- .../src/components/Table/Table.tsx | 2 +- .../FileManagerView/FileManagerView.tsx | 45 ++++++++----------- .../FileManagerViewContext.tsx | 6 +-- 4 files changed, 26 insertions(+), 33 deletions(-) diff --git a/packages/app-file-manager/src/components/Grid/Grid.tsx b/packages/app-file-manager/src/components/Grid/Grid.tsx index adef675590e..52fb02bd02e 100644 --- a/packages/app-file-manager/src/components/Grid/Grid.tsx +++ b/packages/app-file-manager/src/components/Grid/Grid.tsx @@ -22,6 +22,7 @@ interface GridProps { toggleSelected: (file: FileItem) => void; onChange?: Function; onClose?: Function; + hasOnSelectCallback: boolean; } export const Grid: React.FC = ({ @@ -34,7 +35,8 @@ export const Grid: React.FC = ({ onChange, onClose, toggleSelected, - multiple + multiple, + hasOnSelectCallback }) => { if (loading) { return ; @@ -46,7 +48,7 @@ export const Grid: React.FC = ({ } return (record: FileItem) => () => { - if (multiple) { + if (!hasOnSelectCallback || multiple) { toggleSelected(record); return; } diff --git a/packages/app-file-manager/src/components/Table/Table.tsx b/packages/app-file-manager/src/components/Table/Table.tsx index 0537cf1dfe8..ed341bfba43 100644 --- a/packages/app-file-manager/src/components/Table/Table.tsx +++ b/packages/app-file-manager/src/components/Table/Table.tsx @@ -59,7 +59,7 @@ interface FolderEntry extends BaseEntry { original: FolderItem; } -type Entry = FolderEntry | FileEntry; +export type Entry = FolderEntry | FileEntry; const createRecordsData = (items: FileItem[]): FileEntry[] => { return items.map(data => { diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx index cb6377367b7..5da6392b8d6 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx @@ -8,26 +8,25 @@ import { useHotkeys } from "react-hotkeyz"; import { observer } from "mobx-react-lite"; import { ReactComponent as UploadIcon } from "@material-design-icons/svg/filled/cloud_upload.svg"; import { ReactComponent as AddIcon } from "@material-design-icons/svg/filled/add.svg"; -import { ReactComponent as GridIcon } from "@material-design-icons/svg/outlined/view_module.svg"; -import { ReactComponent as TableIcon } from "@material-design-icons/svg/outlined/view_list.svg"; import { i18n } from "@webiny/app/i18n"; import { FolderDialogCreate } from "@webiny/app-aco"; import { OverlayLayout, useSnackbar } from "@webiny/app-admin"; -import { ButtonIcon, ButtonPrimary, ButtonSecondary, IconButton } from "@webiny/ui/Button"; +import { ButtonIcon, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button"; import { Sorting } from "@webiny/ui/DataTable"; import { Scrollbar } from "@webiny/ui/Scrollbar"; -import { Tooltip } from "@webiny/ui/Tooltip"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; import { outputFileSelectionError } from "./outputFileSelectionError"; import { LeftSidebar } from "./LeftSidebar"; import { useFileManagerApi, useFileManagerViewConfig } from "~/index"; import { FileItem } from "@webiny/app-admin/types"; import { BottomInfoBar } from "~/components/BottomInfoBar"; +import { BulkActions } from "~/components/BulkActions"; import { DropFilesHere } from "~/components/DropFilesHere"; import { Empty } from "~/components/Empty"; import { FileDetails } from "~/components/FileDetails"; import { Grid } from "~/components/Grid"; -import { Table, TableProps } from "~/components/Table"; +import { LayoutSwitch } from "~/components/LayoutSwitch"; +import { Entry, Table, TableProps } from "~/components/Table"; import { Title } from "~/components/Title"; import { UploadStatus } from "~/components/UploadStatus"; import { BatchFileUploader } from "~/BatchFileUploader"; @@ -188,11 +187,12 @@ const FileManagerView = () => { } if (view.listTable) { - const onSelectRow: TableProps["onSelectRow"] | undefined = view.areFilesSelectable + const getSelectableRow = (rows: Entry[]) => + rows.filter(row => row.$type === "RECORD").map(row => row.original as FileItem); + + const onSelectRow: TableProps["onSelectRow"] = view.hasOnSelectCallback ? rows => { - const files = rows - .filter(row => row.$type === "RECORD") - .map(row => row.original as FileItem); + const files = getSelectableRow(rows); if (view.multiple) { view.setSelected(files); @@ -200,11 +200,13 @@ const FileManagerView = () => { view.onChange(files[0]); } } - : undefined; + : rows => { + const files = getSelectableRow(rows); + view.setSelected(files); + }; return ( { sorting={tableSorting} onSortingChange={setTableSorting} settings={view.settings} - selectableItems={view.areFilesSelectable} /> ); } @@ -230,8 +231,9 @@ const FileManagerView = () => { selected={view.selected} multiple={view.multiple} toggleSelected={view.toggleSelected} - onChange={view.areFilesSelectable ? view.onChange : undefined} + onChange={view.onChange} onClose={view.onClose} + hasOnSelectCallback={view.hasOnSelectCallback} /> ); }; @@ -271,7 +273,7 @@ const FileManagerView = () => { barMiddle={} barRight={ <> - {view.selected.length > 0 ? ( + {view.hasOnSelectCallback && view.selected.length > 0 ? ( { } /> {t`New Folder`} - - : } - onClick={() => view.setListTable(!view.listTable)} - > - {t`Switch`} - - + } > <> + {!view.hasOnSelectCallback && } e hideFilters: () => void; isListLoading: boolean; isListLoadingMore: boolean; - areFilesSelectable: boolean; + hasOnSelectCallback: boolean; listTitle: string; loadMoreFiles: () => void; meta: ListMeta | undefined; @@ -364,7 +364,7 @@ export const FileManagerViewProvider: React.VFC = const context: FileManagerViewContext = { ...omit(state, ["activeTags"]), accept: props.accept, - areFilesSelectable: Boolean(props.onChange), + hasOnSelectCallback: Boolean(props.onChange), createFile, deleteFile, files, @@ -492,7 +492,7 @@ export const FileManagerViewProvider: React.VFC = toggleSelected(file: FileItem) { setState(state => { const existingIndex = state.selected.findIndex(item => item.id === file.id); - const selected = state.selected; + const selected = [...state.selected]; if (existingIndex < 0) { selected.push(file); From 61e0fa33ec2e4a1f5fd21f597f9f45db865a24f5 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 19 Oct 2023 12:07:33 +0200 Subject: [PATCH 03/11] feat: reorder bulck action icons --- .../app-file-manager/src/modules/FileManagerRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx index d3323cc9cb5..8996c301fc0 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/index.tsx @@ -16,8 +16,8 @@ export const FileManagerRendererModule = () => { } /> - } /> } /> + } /> } /> } /> } /> From 239df8a9bc278a671e588df311db140fad819428 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 19 Oct 2023 17:04:13 +0200 Subject: [PATCH 04/11] refactor: move the bulk actions above the list --- .../src/components/BulkActions/BulkActions.tsx | 16 +++------------- .../src/components/BulkActions/styles.tsx | 11 +---------- .../FileManagerView/FileManagerView.tsx | 2 +- 3 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx index 260e12fd122..d561b68311a 100644 --- a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx +++ b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx @@ -5,17 +5,10 @@ import { Buttons } from "@webiny/app-admin"; import { IconButton } from "@webiny/ui/Button"; import { Typography } from "@webiny/ui/Typography"; -import { LayoutSwitch } from "~/components/LayoutSwitch"; - import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; -import { - ActionsContainer, - BulkActionsContainer, - BulkActionsInner, - ButtonsContainer -} from "./styles"; +import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./styles"; const t = i18n.ns("app-file-manager/components/bulk-actions"); @@ -33,7 +26,7 @@ export const BulkActions = () => { }); }, [view.selected]); - if (!view.selected.length) { + if (view.hasOnSelectCallback || !view.selected.length) { return null; } @@ -44,10 +37,7 @@ export const BulkActions = () => { {headline} - - - } onClick={() => view.setSelected([])} /> - + } onClick={() => view.setSelected([])} /> ); diff --git a/packages/app-file-manager/src/components/BulkActions/styles.tsx b/packages/app-file-manager/src/components/BulkActions/styles.tsx index 201e17a909a..669ce614b56 100644 --- a/packages/app-file-manager/src/components/BulkActions/styles.tsx +++ b/packages/app-file-manager/src/components/BulkActions/styles.tsx @@ -6,10 +6,6 @@ export const BulkActionsContainer = styled.div` height: 64px; background-color: var(--mdc-theme-surface); border-bottom: 1px solid rgba(0, 0, 0, 0.12); - position: absolute; - top: 0; - left: 0; - z-index: 4; `; export const BulkActionsInner = styled.div` @@ -17,7 +13,7 @@ export const BulkActionsInner = styled.div` display: flex; align-items: center; justify-content: space-between; - padding: 0 12px; + padding: 0 12px 0 16px; `; export const ButtonsContainer = styled.div` @@ -28,8 +24,3 @@ export const ButtonsContainer = styled.div` margin: 0; } `; - -export const ActionsContainer = styled.div` - display: flex; - align-items: center; -`; diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx index 5da6392b8d6..7288e27959f 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/FileManagerView.tsx @@ -298,7 +298,6 @@ const FileManagerView = () => { } > <> - {!view.hasOnSelectCallback && } { onDrop={() => view.setDragging(false)} /> )} + loadMoreOnScroll({ scrollFrame })} From 60653dafbb3ccb7842b7f98442715d5cb4487b40 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Fri, 20 Oct 2023 12:23:23 +0200 Subject: [PATCH 05/11] fix: pass selected items inside useWorker --- .../configComponents/Browser/BulkAction.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx index ad586cb6129..4387fc07fe6 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { CallbackParams, useButtons, useDialogWithReport, Worker } from "@webiny/app-admin"; import { Property, useIdGenerator } from "@webiny/react-properties"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; @@ -48,20 +48,23 @@ export const BaseBulkAction: React.FC = ({ const useWorker = () => { const { selected, setSelected } = useFileManagerView(); - const { current: worker } = useRef(new Worker()); + const worker = new Worker(); + const [items, setItems] = useState([]); useEffect(() => { worker.items = selected; + setItems(selected); }, [selected]); - // Reset selected items in both usePagesList and Worker + // Reset selected items in both useFileManagerView and Worker const resetItems = useCallback(() => { worker.items = []; + setItems([]); setSelected([]); }, []); return { - items: worker.items, + items, process: (callback: (items: FileItem[]) => void) => worker.process(callback), processInSeries: async ( callback: ({ item, allItems, report }: CallbackParams) => Promise, From b3d80f3a1f77dd1c7436e96e804d911d1f244a6c Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Fri, 20 Oct 2023 18:17:52 +0200 Subject: [PATCH 06/11] fix: store Worker instance using useRef --- apps/admin/src/App.tsx | 71 +++++++++++++++++++ .../configComponents/Browser/BulkAction.tsx | 4 +- .../BulkActions/ActionDelete.tsx | 2 +- 3 files changed, 74 insertions(+), 3 deletions(-) diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 0015d2d546b..9e95a9c92f4 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -1,12 +1,83 @@ import React from "react"; import { Admin } from "@webiny/app-serverless-cms"; import { Cognito } from "@webiny/app-admin-users-cognito"; +import { ContentEntryListConfig } from "@webiny/app-headless-cms"; +import { ReactComponent as SendIcon } from "@material-design-icons/svg/outlined/send.svg"; import "./App.scss"; +const { BulkAction } = ContentEntryListConfig.Browser; + +const ActionSendToExternal = () => { + const { useWorker, useButtons, useDialog } = BulkAction; + + // useButtons() exposes the button components also used internally: use these to keep the UI consistent. + const { IconButton } = useButtons(); + // useWorker exposes the currently selected items and the processInSeries function. + const worker = useWorker(); + // useDialog exposes method to open confirmation and result dialogs. + const { showConfirmationDialog, showResultsDialog } = useDialog(); + + const openSendToExternalServiceDialog = () => + showConfirmationDialog({ + title: "Send to External Service", + message: `You are about to send the selected entries. Are you sure you want to continue?`, + loadingLabel: `Processing`, + execute: async () => { + await worker.processInSeries(async ({ item, report }) => { + try { + const response = await fetch( + "https://webhook.site/4665b7ce-dc66-4901-9c5c-b830c283d49d", + { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(item.id) + } + ); + + // Add the result as + report.success({ + title: item.meta.title, + message: `Entry successfully sent, response status: ${response.status}` + }); + } catch (e) { + report.error({ + title: item.meta.title, + message: e.message + }); + } + }); + + // Reset the selected items + worker.resetItems(); + + // Show a dialog with operation result + showResultsDialog({ + results: worker.results, + title: "Send to External Service", + message: "Operation completed, here below you find the complete report:" + }); + } + }); + + return ( + } + onAction={openSendToExternalServiceDialog} + label={`Send to external service`} + tooltipPlacement={"bottom"} + /> + ); +}; + export const App: React.FC = () => { return ( + + } /> + ); }; diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx index 4387fc07fe6..e7e6a6cd6e9 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import { CallbackParams, useButtons, useDialogWithReport, Worker } from "@webiny/app-admin"; import { Property, useIdGenerator } from "@webiny/react-properties"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; @@ -48,7 +48,7 @@ export const BaseBulkAction: React.FC = ({ const useWorker = () => { const { selected, setSelected } = useFileManagerView(); - const worker = new Worker(); + const { current: worker } = useRef(new Worker()); const [items, setItems] = useState([]); useEffect(() => { diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx index 3adf0da1cdb..68d9ab26a44 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx +++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/filled/delete.svg"; +import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg"; import { useRecords } from "@webiny/app-aco"; import { observer } from "mobx-react-lite"; import { ContentEntryListConfig } from "~/admin/config/contentEntries"; From e9e7cba0494ebfc977e085f22e3796ea5e16413f Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Fri, 20 Oct 2023 18:19:46 +0200 Subject: [PATCH 07/11] fix: restore app --- apps/admin/src/App.tsx | 71 ------------------------------------------ 1 file changed, 71 deletions(-) diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 9e95a9c92f4..0015d2d546b 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -1,83 +1,12 @@ import React from "react"; import { Admin } from "@webiny/app-serverless-cms"; import { Cognito } from "@webiny/app-admin-users-cognito"; -import { ContentEntryListConfig } from "@webiny/app-headless-cms"; -import { ReactComponent as SendIcon } from "@material-design-icons/svg/outlined/send.svg"; import "./App.scss"; -const { BulkAction } = ContentEntryListConfig.Browser; - -const ActionSendToExternal = () => { - const { useWorker, useButtons, useDialog } = BulkAction; - - // useButtons() exposes the button components also used internally: use these to keep the UI consistent. - const { IconButton } = useButtons(); - // useWorker exposes the currently selected items and the processInSeries function. - const worker = useWorker(); - // useDialog exposes method to open confirmation and result dialogs. - const { showConfirmationDialog, showResultsDialog } = useDialog(); - - const openSendToExternalServiceDialog = () => - showConfirmationDialog({ - title: "Send to External Service", - message: `You are about to send the selected entries. Are you sure you want to continue?`, - loadingLabel: `Processing`, - execute: async () => { - await worker.processInSeries(async ({ item, report }) => { - try { - const response = await fetch( - "https://webhook.site/4665b7ce-dc66-4901-9c5c-b830c283d49d", - { - method: "POST", - headers: { - "Content-Type": "application/json" - }, - body: JSON.stringify(item.id) - } - ); - - // Add the result as - report.success({ - title: item.meta.title, - message: `Entry successfully sent, response status: ${response.status}` - }); - } catch (e) { - report.error({ - title: item.meta.title, - message: e.message - }); - } - }); - - // Reset the selected items - worker.resetItems(); - - // Show a dialog with operation result - showResultsDialog({ - results: worker.results, - title: "Send to External Service", - message: "Operation completed, here below you find the complete report:" - }); - } - }); - - return ( - } - onAction={openSendToExternalServiceDialog} - label={`Send to external service`} - tooltipPlacement={"bottom"} - /> - ); -}; - export const App: React.FC = () => { return ( - - } /> - ); }; From c01b53d63217359ad7e4c1f71f0dc3c81007cc64 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Mon, 23 Oct 2023 17:46:31 +0200 Subject: [PATCH 08/11] fix: selected files from Worker --- .../src/components/BulkActions/ActionDelete.tsx | 2 +- packages/app-file-manager/src/components/Table/Table.tsx | 2 +- .../configComponents/Browser/BulkAction.tsx | 9 +++------ 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx index 9b9bc8e6215..78302578306 100644 --- a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx +++ b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx @@ -57,7 +57,7 @@ export const ActionDelete = observer(() => { }); if (!canDeleteAll) { - console.log("Does not have permission to delete one or more files."); + console.log("You don't have permissions to delete files."); return null; } diff --git a/packages/app-file-manager/src/components/Table/Table.tsx b/packages/app-file-manager/src/components/Table/Table.tsx index 82eba637d90..8ef09c4a0f4 100644 --- a/packages/app-file-manager/src/components/Table/Table.tsx +++ b/packages/app-file-manager/src/components/Table/Table.tsx @@ -70,7 +70,7 @@ const createRecordsData = (items: FileItem[]): FileEntry[] => { return items.map(data => { return { $type: "RECORD", - $selectable: true, + $selectable: true, // Files a.k.a. records are always selectable to perform bulk actions id: data.id, name: data.name, createdBy: data.createdBy?.displayName || "-", diff --git a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx index e7e6a6cd6e9..285475cc2d7 100644 --- a/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx +++ b/packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/BulkAction.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { useCallback, useEffect, useRef } from "react"; import { CallbackParams, useButtons, useDialogWithReport, Worker } from "@webiny/app-admin"; import { Property, useIdGenerator } from "@webiny/react-properties"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; @@ -49,22 +49,19 @@ export const BaseBulkAction: React.FC = ({ const useWorker = () => { const { selected, setSelected } = useFileManagerView(); const { current: worker } = useRef(new Worker()); - const [items, setItems] = useState([]); useEffect(() => { worker.items = selected; - setItems(selected); - }, [selected]); + }, [selected.length]); // Reset selected items in both useFileManagerView and Worker const resetItems = useCallback(() => { worker.items = []; - setItems([]); setSelected([]); }, []); return { - items, + items: selected, process: (callback: (items: FileItem[]) => void) => worker.process(callback), processInSeries: async ( callback: ({ item, allItems, report }: CallbackParams) => Promise, From f548c5aab40ca2c91fc2a8ec25c1cf8f49014a42 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Mon, 23 Oct 2023 17:50:35 +0200 Subject: [PATCH 09/11] chore: rename styles into styled --- .../BulkActions/{styles.tsx => BulkActions.styled.tsx} | 0 .../app-file-manager/src/components/BulkActions/BulkActions.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/app-file-manager/src/components/BulkActions/{styles.tsx => BulkActions.styled.tsx} (100%) diff --git a/packages/app-file-manager/src/components/BulkActions/styles.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.styled.tsx similarity index 100% rename from packages/app-file-manager/src/components/BulkActions/styles.tsx rename to packages/app-file-manager/src/components/BulkActions/BulkActions.styled.tsx diff --git a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx index d561b68311a..629d8b0f7fb 100644 --- a/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx +++ b/packages/app-file-manager/src/components/BulkActions/BulkActions.tsx @@ -8,7 +8,7 @@ import { Typography } from "@webiny/ui/Typography"; import { useFileManagerViewConfig } from "~/modules/FileManagerRenderer/FileManagerView/FileManagerViewConfig"; import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider"; -import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./styles"; +import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled"; const t = i18n.ns("app-file-manager/components/bulk-actions"); From fde8590497afd7007213be758645d20e6303a1e5 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Mon, 23 Oct 2023 17:53:07 +0200 Subject: [PATCH 10/11] chore: revert --- .../components/ContentEntries/BulkActions/ActionDelete.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx index 68d9ab26a44..3adf0da1cdb 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx +++ b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg"; +import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/filled/delete.svg"; import { useRecords } from "@webiny/app-aco"; import { observer } from "mobx-react-lite"; import { ContentEntryListConfig } from "~/admin/config/contentEntries"; From 0a05596f24feae04e983056f6352c3effd4f37f6 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Wed, 25 Oct 2023 16:21:39 +0200 Subject: [PATCH 11/11] fix: message report --- .../BulkActions/useDialogWithReport/DialogMessage.tsx | 2 +- ...alogWithReport.styles.tsx => useDialogWithReport.styled.tsx} | 0 .../src/components/BulkActions/ActionDelete.tsx | 2 +- .../app-file-manager/src/components/BulkActions/ActionMove.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename packages/app-admin/src/components/BulkActions/useDialogWithReport/{useDialogWithReport.styles.tsx => useDialogWithReport.styled.tsx} (100%) diff --git a/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx b/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx index 9238add5d22..80546822277 100644 --- a/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx +++ b/packages/app-admin/src/components/BulkActions/useDialogWithReport/DialogMessage.tsx @@ -5,7 +5,7 @@ import { Icon } from "@webiny/ui/Icon"; import { List, ListItemText, ListItemTextPrimary, ListItemTextSecondary } from "@webiny/ui/List"; import { ShowResultsDialogParams } from "./index"; -import { ListItem, ListItemGraphic, MessageContainer } from "./useDialogWithReport.styles"; +import { ListItem, ListItemGraphic, MessageContainer } from "./useDialogWithReport.styled"; type ResultDialogMessageProps = Pick; diff --git a/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styles.tsx b/packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styled.tsx similarity index 100% rename from packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styles.tsx rename to packages/app-admin/src/components/BulkActions/useDialogWithReport/useDialogWithReport.styled.tsx diff --git a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx index 78302578306..5dfa3ee614e 100644 --- a/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx +++ b/packages/app-file-manager/src/components/BulkActions/ActionDelete.tsx @@ -51,7 +51,7 @@ export const ActionDelete = observer(() => { showResultsDialog({ results: worker.results, title: "Delete files", - message: "Operation completed, here below you find the complete report:" + message: "Finished deleting files! See full report below:" }); } }); diff --git a/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx index cc8b36caa30..a41a1743b5b 100644 --- a/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx +++ b/packages/app-file-manager/src/components/BulkActions/ActionMove.tsx @@ -51,7 +51,7 @@ export const ActionMove = observer(() => { showResultsDialog({ results: worker.results, title: "Move files", - message: "Operation completed, here below you find the complete report:" + message: "Finished moving files! See full report below:" }); } });