From b039f925982bd01984309384635c01861faff8a0 Mon Sep 17 00:00:00 2001 From: somebody1234 Date: Tue, 17 Oct 2023 19:17:08 +1000 Subject: [PATCH] Fix issue with circular import (#8078) A recent PR introduced issues with circular imports in `categorySwitcher.ts` - the reason why this wasn't found before merge is because bundlers work fine with circular imports - it's just GUI2's dev mode that doesn't do well with them # Important Notes None --- .../src/dashboard/components/assetRow.tsx | 9 ++-- .../src/dashboard/components/assetsTable.tsx | 41 ++++--------------- .../dashboard/components/categorySwitcher.tsx | 6 +-- .../src/authentication/src/dashboard/drag.ts | 31 ++++++++++++++ 4 files changed, 43 insertions(+), 44 deletions(-) create mode 100644 app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/drag.ts diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx index c6a29ac944..38387a76fd 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetRow.tsx @@ -10,6 +10,7 @@ import * as authProvider from '../../authentication/providers/auth' import * as backendModule from '../backend' import * as backendProvider from '../../providers/backend' import * as download from '../../download' +import * as drag from '../drag' import * as errorModule from '../../error' import * as hooks from '../../hooks' import * as identity from '../identity' @@ -343,9 +344,7 @@ export default function AssetRow(props: AssetRowProps) { setRowState={setRowState} onDragOver={event => { if (item.item.type === backendModule.AssetType.directory) { - const payload = assetsTable.tryGetAssetRowsDragPayload( - event.dataTransfer - ) + const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer) if ( payload != null && payload.every(innerItem => innerItem.key !== item.key) @@ -364,9 +363,7 @@ export default function AssetRow(props: AssetRowProps) { onDrop={event => { setIsDraggedOver(false) if (item.item.type === backendModule.AssetType.directory) { - const payload = assetsTable.tryGetAssetRowsDragPayload( - event.dataTransfer - ) + const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer) if ( payload != null && payload.every(innerItem => innerItem.key !== item.key) diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx index 7887922930..512514b1c0 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx @@ -9,6 +9,7 @@ import * as assetTreeNode from '../assetTreeNode' import * as backendModule from '../backend' import * as columnModule from '../column' import * as dateTime from '../dateTime' +import * as drag from '../drag' import * as hooks from '../../hooks' import * as localStorageModule from '../localStorage' import * as localStorageProvider from '../../providers/localStorage' @@ -74,34 +75,6 @@ const DIRECTORY_NAME_REGEX = /^New_Folder_(?\d+)$/ /** The default prefix of an automatically generated directory. */ const DIRECTORY_NAME_DEFAULT_PREFIX = 'New_Folder_' -// ============================ -// === AssetRowsDragPayload === -// ============================ - -const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE = 'application/x-enso-asset-list' -const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX = new RegExp( - '^' + ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE + '; id=(.+)$' -) -const ASSET_ROWS_DRAG_PAYLOAD_MAP = new Map() - -/** Resolve to an {@link AssetRowsDragPayload}, if any, else resolve to `null`. */ -export function tryGetAssetRowsDragPayload(dataTransfer: DataTransfer) { - const item = Array.from(dataTransfer.items).find(dataTransferItem => - dataTransferItem.type.startsWith(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE) - ) - const id = item?.type.match(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX)?.[1] ?? null - return id != null ? ASSET_ROWS_DRAG_PAYLOAD_MAP.get(id) ?? null : null -} - -/** Metadata for an asset row. */ -interface AssetRowsDragPayloadItem { - key: backendModule.AssetId - asset: backendModule.AnyAsset -} - -/** Data for a {@link DragEvent} started from an {@link AssetsTable}. */ -export type AssetRowsDragPayload = AssetRowsDragPayloadItem[] - // =================================== // === insertAssetTreeNodeChildren === // =================================== @@ -1374,7 +1347,7 @@ export default function AssetsTable(props: AssetsTableProps) {
{ - const payload = tryGetAssetRowsDragPayload(event.dataTransfer) + const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer) const filtered = payload?.filter( item => item.asset.parentId !== rootDirectoryId ) @@ -1383,7 +1356,7 @@ export default function AssetsTable(props: AssetsTableProps) { } }} onDrop={event => { - const payload = tryGetAssetRowsDragPayload(event.dataTransfer) + const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer) const filtered = payload?.filter( item => item.asset.parentId !== rootDirectoryId ) @@ -1441,16 +1414,16 @@ export default function AssetsTable(props: AssetsTableProps) { const nodes = assetTreeNode .assetTreePreorderTraversal(assetTree) .filter(node => oldSelectedKeys.has(node.key)) - const data: AssetRowsDragPayload = nodes.map(node => ({ + const data: drag.AssetRowsDragPayload = nodes.map(node => ({ key: node.key, asset: node.item, })) const id = uniqueString.uniqueString() event.dataTransfer.setData( - `${ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE}; id=${id}`, + `${drag.ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE}; id=${id}`, JSON.stringify(data) ) - ASSET_ROWS_DRAG_PAYLOAD_MAP.set(id, data) + drag.ASSET_ROWS_DRAG_PAYLOAD_MAP.set(id, data) const blankElement = document.createElement('div') const image = new Image() image.src = @@ -1464,7 +1437,7 @@ export default function AssetsTable(props: AssetsTableProps) { event={event} className="flex flex-col bg-frame rounded-2xl bg-frame-selected backdrop-blur-3xl" doCleanup={() => { - ASSET_ROWS_DRAG_PAYLOAD_MAP.delete(id) + drag.ASSET_ROWS_DRAG_PAYLOAD_MAP.delete(id) }} > {nodes.map(node => ( diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/categorySwitcher.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/categorySwitcher.tsx index 819ba77dca..22222dafd0 100644 --- a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/categorySwitcher.tsx +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/categorySwitcher.tsx @@ -8,11 +8,11 @@ import TempIcon from 'enso-assets/temp.svg' import Trash2Icon from 'enso-assets/trash2.svg' import * as assetEvent from '../events/assetEvent' +import * as drag from '../drag' import * as localStorageModule from '../localStorage' import * as localStorageProvider from '../../providers/localStorage' import * as modalProvider from '../../providers/modal' -import * as assetsTable from './assetsTable' import SvgMask from '../../authentication/components/svgMask' // ============================ @@ -167,9 +167,7 @@ export default function CategorySwitcher(props: CategorySwitcherProps) { event.preventDefault() event.stopPropagation() unsetModal() - const payload = assetsTable.tryGetAssetRowsDragPayload( - event.dataTransfer - ) + const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer) if (payload != null) { dispatchAssetEvent({ type: diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/drag.ts b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/drag.ts new file mode 100644 index 0000000000..e426e63242 --- /dev/null +++ b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/drag.ts @@ -0,0 +1,31 @@ +/** @file Various types of drag event payloads. */ + +import type * as backend from './backend' + +// ============================ +// === AssetRowsDragPayload === +// ============================ + +export const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE = 'application/x-enso-asset-list' +const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX = new RegExp( + '^' + ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE + '; id=(.+)$' +) +export const ASSET_ROWS_DRAG_PAYLOAD_MAP = new Map() + +/** Resolve to an {@link AssetRowsDragPayload}, if any, else resolve to `null`. */ +export function tryGetAssetRowsDragPayload(dataTransfer: DataTransfer) { + const item = Array.from(dataTransfer.items).find(dataTransferItem => + dataTransferItem.type.startsWith(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE) + ) + const id = item?.type.match(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX)?.[1] ?? null + return id != null ? ASSET_ROWS_DRAG_PAYLOAD_MAP.get(id) ?? null : null +} + +/** Metadata for an asset row. */ +interface AssetRowsDragPayloadItem { + key: backend.AssetId + asset: backend.AnyAsset +} + +/** Data for a {@link DragEvent} started from an {@link AssetsTable}. */ +export type AssetRowsDragPayload = AssetRowsDragPayloadItem[]