From 140494454a155e68af34debf0a9cd12e709b200e Mon Sep 17 00:00:00 2001 From: Akshay Joshi Date: Wed, 29 Mar 2023 17:22:50 +0530 Subject: [PATCH] Fixed linter errors after eslint upgrade. --- .../servers/static/js/privilege.ui.js | 2 +- web/pgadmin/static/js/Explain/Graphical.jsx | 4 +- web/pgadmin/static/js/Explain/index.jsx | 4 +- .../js/components/PgChart/StreamingChart.jsx | 8 +- .../components/PgTree/FileTreeItem/index.tsx | 250 ++-- .../js/components/PgTree/FileTreeX/index.tsx | 1060 ++++++++--------- .../js/components/PgTree/TreeModelX/index.ts | 10 +- .../PgTree/services/keyboardHotkeys.ts | 198 +-- .../static/js/tree/preference_nodes.ts | 10 +- web/pgadmin/static/js/tree/tree_nodes.ts | 10 +- .../static/js/erd_tool/nodes/TableNode.jsx | 2 +- .../js/components/sections/ResultSet.jsx | 2 +- 12 files changed, 780 insertions(+), 780 deletions(-) diff --git a/web/pgadmin/browser/server_groups/servers/static/js/privilege.ui.js b/web/pgadmin/browser/server_groups/servers/static/js/privilege.ui.js index c03f2aae4..1b5bf5312 100644 --- a/web/pgadmin/browser/server_groups/servers/static/js/privilege.ui.js +++ b/web/pgadmin/browser/server_groups/servers/static/js/privilege.ui.js @@ -38,7 +38,7 @@ export default class PrivilegeRoleSchema extends BaseUISchema { updateSupportedPrivs = (updatedPrivs) => { this.supportedPrivs = updatedPrivs; - } + }; get baseFields() { let obj = this; diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx index c67f05b20..91d452b65 100644 --- a/web/pgadmin/static/js/Explain/Graphical.jsx +++ b/web/pgadmin/static/js/Explain/Graphical.jsx @@ -24,8 +24,8 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; // Some predefined constants used to calculate image location and its border -let pWIDTH = 100.; -let pHEIGHT = 100.; +let pWIDTH = 100; +let pHEIGHT = 100; let IMAGE_WIDTH = 50; let IMAGE_HEIGHT = 50; let ARROW_WIDTH = 10, diff --git a/web/pgadmin/static/js/Explain/index.jsx b/web/pgadmin/static/js/Explain/index.jsx index a62c2bca8..6e07ed1f6 100644 --- a/web/pgadmin/static/js/Explain/index.jsx +++ b/web/pgadmin/static/js/Explain/index.jsx @@ -27,8 +27,8 @@ const useStyles = makeStyles((theme)=>({ })); // Some predefined constants used to calculate image location and its border -let pWIDTH = 100.; -let pHEIGHT = 100.; +let pWIDTH = 100; +let pHEIGHT = 100; let offsetX = 200, offsetY = 60; let xMargin = 25, diff --git a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx index 0333471e3..bd465e3da 100644 --- a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx +++ b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx @@ -78,12 +78,12 @@ export default function StreamingChart({xRange=75, data, options}) { }, series: [ {}, - ...data.datasets?.map((datum)=>({ + ...(data.datasets?.map((datum)=>({ label: datum.label, stroke: datum.borderColor, width: options.lineBorderWidth ?? 1, points: { show: options.showDataPoints ?? false, size: datum.pointHitRadius*2 } - })) + }))??{}) ], scales: { x: { @@ -116,11 +116,11 @@ export default function StreamingChart({xRange=75, data, options}) { const initialState = [ Array.from(new Array(xRange).keys()), - ...data.datasets?.map((d)=>{ + ...(data.datasets?.map((d)=>{ let ret = [...d.data]; ret.reverse(); return ret; - }), + })??{}), ]; chartRef.current?.setScale('x', {min: data.datasets[0]?.data?.length-xRange, max: data.datasets[0]?.data?.length-1}); diff --git a/web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx b/web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx index ec4d023e9..de880ca8a 100644 --- a/web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx +++ b/web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx @@ -32,147 +32,147 @@ export class FileTreeItem extends React.Component = new Map() - private static readonly refToItemIdMap: Map = new Map() - private fileTreeEvent: IFileTreeXTriggerEvents + // ensure this syncs up with what goes in CSS, (em, px, % etc.) and what ultimately renders on the page + public static readonly renderHeight: number = 24; + private static readonly itemIdToRefMap: Map = new Map(); + private static readonly refToItemIdMap: Map = new Map(); + private fileTreeEvent: IFileTreeXTriggerEvents; - constructor(props) { - super(props); - // used to apply decoration changes, you're welcome to use setState or other mechanisms as you see fit - this.forceUpdate = this.forceUpdate.bind(this); - } + constructor(props) { + super(props); + // used to apply decoration changes, you're welcome to use setState or other mechanisms as you see fit + this.forceUpdate = this.forceUpdate.bind(this); + } - public render() { - const { item, itemType, decorations } = this.props; + public render() { + const { item, itemType, decorations } = this.props; - const isRenamePrompt = itemType === ItemType.RenamePrompt; - const isNewPrompt = itemType === ItemType.NewDirectoryPrompt || itemType === ItemType.NewFilePrompt; - const isDirExpanded = itemType === ItemType.Directory - ? (item as Directory).expanded - : itemType === ItemType.RenamePrompt && (item as RenamePromptHandle).target.type === FileType.Directory - ? ((item as RenamePromptHandle).target as Directory).expanded - : false; + const isRenamePrompt = itemType === ItemType.RenamePrompt; + const isNewPrompt = itemType === ItemType.NewDirectoryPrompt || itemType === ItemType.NewFilePrompt; + const isDirExpanded = itemType === ItemType.Directory + ? (item as Directory).expanded + : itemType === ItemType.RenamePrompt && (item as RenamePromptHandle).target.type === FileType.Directory + ? ((item as RenamePromptHandle).target as Directory).expanded + : false; - const fileOrDir = + const fileOrDir = (itemType === ItemType.File || itemType === ItemType.NewFilePrompt || (itemType === ItemType.RenamePrompt && (item as RenamePromptHandle).target.constructor === FileEntry)) ? 'file' : 'directory'; - if (this.props.item.parent && this.props.item.parent.path) { - this.props.item.resolvedPathCache = this.props.item.parent.path + '/' + this.props.item._metadata.data.id; - } - - const itemChildren = item.children && item.children.length > 0 && item._metadata.data._type.indexOf('coll-') !== -1 ? '(' + item.children.length + ')' : ''; - const extraClasses = item._metadata.data.extraClasses ? item._metadata.data.extraClasses.join(' ') : ''; - - return ( -
- - {!isNewPrompt && fileOrDir === 'directory' ? - - : null - } - - - { - item._metadata && item._metadata.data.icon ? - : null - } - - { _.unescape(this.props.item.getMetadata('data')._label)} - {itemChildren} - - - -
); - } - - public componentDidMount() { - this.events = this.props.events; + if (this.props.item.parent && this.props.item.parent.path) { this.props.item.resolvedPathCache = this.props.item.parent.path + '/' + this.props.item._metadata.data.id; - if (this.props.decorations) { - this.props.decorations.addChangeListener(this.forceUpdate); - } - this.setActiveFile(this.props.item); } - private setActiveFile = async (FileOrDir): Promise => { - this.props.changeDirectoryCount(FileOrDir.parent); - if(FileOrDir._loaded !== true) { - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'added', FileOrDir); - } - FileOrDir._loaded = true; - } + const itemChildren = item.children && item.children.length > 0 && item._metadata.data._type.indexOf('coll-') !== -1 ? '(' + item.children.length + ')' : ''; + const extraClasses = item._metadata.data.extraClasses ? item._metadata.data.extraClasses.join(' ') : ''; - public componentWillUnmount() { - if (this.props.decorations) { - this.props.decorations.removeChangeListener(this.forceUpdate); - } - } + return ( +
- public componentDidUpdate(prevProps: IItemRendererXProps) { - if (prevProps.decorations) { - prevProps.decorations.removeChangeListener(this.forceUpdate); - } - if (this.props.decorations) { - this.props.decorations.addChangeListener(this.forceUpdate); - } - } - - private handleDivRef = (r: HTMLDivElement) => { - if (r === null) { - FileTreeItem.itemIdToRefMap.delete(this.props.item.id); - } else { - FileTreeItem.itemIdToRefMap.set(this.props.item.id, r); - FileTreeItem.refToItemIdMap.set(r, this.props.item); - } - } - - private handleContextMenu = (ev: React.MouseEvent) => { - const { item, itemType, onContextMenu } = this.props; - if (itemType === ItemType.File || itemType === ItemType.Directory) { - onContextMenu(ev, item as FileOrDir); - } - } - - private handleClick = (ev: React.MouseEvent) => { - const { item, itemType, onClick } = this.props; - if (itemType === ItemType.File || itemType === ItemType.Directory) { - onClick(ev, item as FileEntry, itemType); - } - } - - private handleDoubleClick = (ev: React.MouseEvent) => { - const { item, itemType, onDoubleClick } = this.props; - if (itemType === ItemType.File || itemType === ItemType.Directory) { - onDoubleClick(ev, item as FileEntry, itemType); - } - } - - private handleDragStartItem = (e: React.DragEvent) => { - const { item, itemType, events } = this.props; - if (itemType === ItemType.File || itemType === ItemType.Directory) { - const ref = FileTreeItem.itemIdToRefMap.get(item.id); - if (ref) { - events.dispatch(FileTreeXEvent.onTreeEvents, e, 'dragstart', item); + {!isNewPrompt && fileOrDir === 'directory' ? + + : null } + + + { + item._metadata && item._metadata.data.icon ? + : null + } + + { _.unescape(this.props.item.getMetadata('data')._label)} + {itemChildren} + + + +
); + } + + public componentDidMount() { + this.events = this.props.events; + this.props.item.resolvedPathCache = this.props.item.parent.path + '/' + this.props.item._metadata.data.id; + if (this.props.decorations) { + this.props.decorations.addChangeListener(this.forceUpdate); + } + this.setActiveFile(this.props.item); + } + + private setActiveFile = async (FileOrDir): Promise => { + this.props.changeDirectoryCount(FileOrDir.parent); + if(FileOrDir._loaded !== true) { + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'added', FileOrDir); + } + FileOrDir._loaded = true; + }; + + public componentWillUnmount() { + if (this.props.decorations) { + this.props.decorations.removeChangeListener(this.forceUpdate); + } + } + + public componentDidUpdate(prevProps: IItemRendererXProps) { + if (prevProps.decorations) { + prevProps.decorations.removeChangeListener(this.forceUpdate); + } + if (this.props.decorations) { + this.props.decorations.addChangeListener(this.forceUpdate); + } + } + + private handleDivRef = (r: HTMLDivElement) => { + if (r === null) { + FileTreeItem.itemIdToRefMap.delete(this.props.item.id); + } else { + FileTreeItem.itemIdToRefMap.set(this.props.item.id, r); + FileTreeItem.refToItemIdMap.set(r, this.props.item); + } + }; + + private handleContextMenu = (ev: React.MouseEvent) => { + const { item, itemType, onContextMenu } = this.props; + if (itemType === ItemType.File || itemType === ItemType.Directory) { + onContextMenu(ev, item as FileOrDir); + } + }; + + private handleClick = (ev: React.MouseEvent) => { + const { item, itemType, onClick } = this.props; + if (itemType === ItemType.File || itemType === ItemType.Directory) { + onClick(ev, item as FileEntry, itemType); + } + }; + + private handleDoubleClick = (ev: React.MouseEvent) => { + const { item, itemType, onDoubleClick } = this.props; + if (itemType === ItemType.File || itemType === ItemType.Directory) { + onDoubleClick(ev, item as FileEntry, itemType); + } + }; + + private handleDragStartItem = (e: React.DragEvent) => { + const { item, itemType, events } = this.props; + if (itemType === ItemType.File || itemType === ItemType.Directory) { + const ref = FileTreeItem.itemIdToRefMap.get(item.id); + if (ref) { + events.dispatch(FileTreeXEvent.onTreeEvents, e, 'dragstart', item); } } + }; } diff --git a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx index 5ff5b0a55..a90755bfd 100644 --- a/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx +++ b/web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx @@ -19,594 +19,594 @@ import { TreeModelX } from '../TreeModelX'; import AutoSizer from 'react-virtualized-auto-sizer'; export class FileTreeX extends React.Component { - private fileTreeHandle: IFileTreeXHandle - private activeFileDec: Decoration - private pseudoActiveFileDec: Decoration - private activeFile: FileOrDir - private pseudoActiveFile: FileOrDir - private wrapperRef: React.RefObject = React.createRef() - private events: Notificar - private disposables: DisposablesComposite - private keyboardHotkeys: KeyboardHotkeys - private fileTreeEvent: IFileTreeXTriggerEvents - constructor(props: IFileTreeXProps) { - super(props); - this.events = new Notificar(); - this.disposables = new DisposablesComposite(); - this.activeFileDec = new Decoration('active'); - this.pseudoActiveFileDec = new Decoration('pseudo-active'); + private fileTreeHandle: IFileTreeXHandle; + private activeFileDec: Decoration; + private pseudoActiveFileDec: Decoration; + private activeFile: FileOrDir; + private pseudoActiveFile: FileOrDir; + private wrapperRef: React.RefObject = React.createRef(); + private events: Notificar; + private disposables: DisposablesComposite; + private keyboardHotkeys: KeyboardHotkeys; + private fileTreeEvent: IFileTreeXTriggerEvents; + constructor(props: IFileTreeXProps) { + super(props); + this.events = new Notificar(); + this.disposables = new DisposablesComposite(); + this.activeFileDec = new Decoration('active'); + this.pseudoActiveFileDec = new Decoration('pseudo-active'); + } + + render() { + const { height, model, disableCache } = this.props; + const { decorations } = model; + + return
+ + {({ width, height }) => ( + + {(props: IItemRendererProps) => } + + )} + +
; + } + + public componentDidMount() { + for(const child of this.props.model.root.children) { + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'loaded', child); + } + } + + componentWillUnmount() { + const { model } = this.props; + model.decorations.removeDecoration(this.activeFileDec); + model.decorations.removeDecoration(this.pseudoActiveFileDec); + this.disposables.dispose(); + } + + private handleTreeEvent = () => { + this.fileTreeEvent = this.props.onEvent; + }; + + private handleTreeReady = (handle: IFileTreeHandle) => { + const { onReady, model } = this.props; + const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div'); + if(this.props.onScroll) { + scrollDiv?.addEventListener('scroll', (ev: any)=>this.props.onScroll?.(ev)); } - render() { - const { height, model, disableCache } = this.props; - const { decorations } = model; + this.fileTreeHandle = { + ...handle, + getModel: () => this.props.model, + getActiveFile: () => this.activeFile, + setActiveFile: this.setActiveFile, + getPseudoActiveFile: () => this.pseudoActiveFile, + setPseudoActiveFile: this.setPseudoActiveFile, + toggleDirectory: this.toggleDirectory, + closeDir: this.closeDir, + remove: this.removeDir, + newFile: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewFile(dirOrPath as string)), + newFolder: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewDirectory(dirOrPath as string)), + onBlur: (callback) => this.events.add(FileTreeXEvent.OnBlur, callback), + hasDirectFocus: () => this.wrapperRef.current === document.activeElement, + first: this.first, + parent: this.parent, + hasParent: this.hasParent, + isOpen: this.isOpen, + isClosed: this.isClosed, + itemData: this.itemData, + children: this.children, + getItemFromDOM: this.getItemFromDOM, + getDOMFromItem: this.getDOMFromItem, + onTreeEvents: (callback) => this.events.add(FileTreeXEvent.onTreeEvents, callback), + addIcon: this.addIcon, + addCssClass: this.addCssClass, + create: this.create, + remove: this.remove, + update: this.update, + refresh: this.refresh, + setLabel: this.setLabel, + unload: this.unload, + deSelectActiveFile: this.deSelectActiveFile, + resize: this.resize, + showLoader: this.showLoader, + hideLoader: this.hideLoader, + }; - return
- - {({ width, height }) => ( - - {(props: IItemRendererProps) => } - - )} - -
; + model.decorations.addDecoration(this.activeFileDec); + model.decorations.addDecoration(this.pseudoActiveFileDec); + + this.disposables.add(this.fileTreeHandle.onDidChangeModel((prevModel: TreeModelX, newModel: TreeModelX) => { + this.setActiveFile(null); + this.setPseudoActiveFile(null); + prevModel.decorations.removeDecoration(this.activeFileDec); + prevModel.decorations.removeDecoration(this.pseudoActiveFileDec); + newModel.decorations.addDecoration(this.activeFileDec); + newModel.decorations.addDecoration(this.pseudoActiveFileDec); + })); + + this.disposables.add(this.fileTreeHandle.onBlur(() => { + this.setPseudoActiveFile(null); + })); + + this.keyboardHotkeys = new KeyboardHotkeys(this.fileTreeHandle); + + if (typeof onReady === 'function') { + onReady(this.fileTreeHandle); } + }; - public componentDidMount() { - for(const child of this.props.model.root.children) { - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'loaded', child); - } - } + private setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; - componentWillUnmount() { - const { model } = this.props; - model.decorations.removeDecoration(this.activeFileDec); - model.decorations.removeDecoration(this.pseudoActiveFileDec); - this.disposables.dispose(); - } - - private handleTreeEvent = () => { - this.fileTreeEvent = this.props.onEvent; - } - - private handleTreeReady = (handle: IFileTreeHandle) => { - const { onReady, model } = this.props; - const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div'); - if(this.props.onScroll) { - scrollDiv?.addEventListener('scroll', (ev: any)=>this.props.onScroll?.(ev)); - } - - this.fileTreeHandle = { - ...handle, - getModel: () => this.props.model, - getActiveFile: () => this.activeFile, - setActiveFile: this.setActiveFile, - getPseudoActiveFile: () => this.pseudoActiveFile, - setPseudoActiveFile: this.setPseudoActiveFile, - toggleDirectory: this.toggleDirectory, - closeDir: this.closeDir, - remove: this.removeDir, - newFile: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewFile(dirOrPath as string)), - newFolder: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewDirectory(dirOrPath as string)), - onBlur: (callback) => this.events.add(FileTreeXEvent.OnBlur, callback), - hasDirectFocus: () => this.wrapperRef.current === document.activeElement, - first: this.first, - parent: this.parent, - hasParent: this.hasParent, - isOpen: this.isOpen, - isClosed: this.isClosed, - itemData: this.itemData, - children: this.children, - getItemFromDOM: this.getItemFromDOM, - getDOMFromItem: this.getDOMFromItem, - onTreeEvents: (callback) => this.events.add(FileTreeXEvent.onTreeEvents, callback), - addIcon: this.addIcon, - addCssClass: this.addCssClass, - create: this.create, - remove: this.remove, - update: this.update, - refresh: this.refresh, - setLabel: this.setLabel, - unload: this.unload, - deSelectActiveFile: this.deSelectActiveFile, - resize: this.resize, - showLoader: this.showLoader, - hideLoader: this.hideLoader, - }; - - model.decorations.addDecoration(this.activeFileDec); - model.decorations.addDecoration(this.pseudoActiveFileDec); - - this.disposables.add(this.fileTreeHandle.onDidChangeModel((prevModel: TreeModelX, newModel: TreeModelX) => { - this.setActiveFile(null); - this.setPseudoActiveFile(null); - prevModel.decorations.removeDecoration(this.activeFileDec); - prevModel.decorations.removeDecoration(this.pseudoActiveFileDec); - newModel.decorations.addDecoration(this.activeFileDec); - newModel.decorations.addDecoration(this.pseudoActiveFileDec); - })); - - this.disposables.add(this.fileTreeHandle.onBlur(() => { - this.setPseudoActiveFile(null); - })); - - this.keyboardHotkeys = new KeyboardHotkeys(this.fileTreeHandle); - - if (typeof onReady === 'function') { - onReady(this.fileTreeHandle); - } - } - - private setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === this.props.model.root) { return; } - if (this.activeFile !== fileH) { - if (this.activeFile) { - this.activeFileDec.removeTarget(this.activeFile); - } - if (fileH) { - this.activeFileDec.addTarget(fileH as Directory, TargetMatchMode.Self); - } - this.activeFile = fileH; - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH); - - if (fileH && ensureVisible === true) { - const alignTree = align !== undefined && align !== null ? align : 'auto'; - await this.fileTreeHandle.ensureVisible(fileH, alignTree); - } - } - } - - private ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH) { - await this.fileTreeHandle.ensureVisible(fileH); - } - } - - private deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === this.props.model.root) { return; } - if (this.activeFile === fileH) { + if (fileH === this.props.model.root) { return; } + if (this.activeFile !== fileH) { + if (this.activeFile) { this.activeFileDec.removeTarget(this.activeFile); - this.activeFile = null; - } - } - - private setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === this.props.model.root) { return; } - if (this.pseudoActiveFile !== fileH) { - if (this.pseudoActiveFile) { - this.pseudoActiveFileDec.removeTarget(this.pseudoActiveFile); - } - if (fileH) { - this.pseudoActiveFileDec.addTarget(fileH as Directory, TargetMatchMode.Self); - } - this.pseudoActiveFile = fileH; } if (fileH) { - await this.fileTreeHandle.ensureVisible(fileH); + this.activeFileDec.addTarget(fileH as Directory, TargetMatchMode.Self); } + this.activeFile = fileH; this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH); + + if (fileH && ensureVisible === true) { + const alignTree = align !== undefined && align !== null ? align : 'auto'; + await this.fileTreeHandle.ensureVisible(fileH, alignTree); + } + } + }; + + private ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH) { + await this.fileTreeHandle.ensureVisible(fileH); + } + }; + + private deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === this.props.model.root) { return; } + if (this.activeFile === fileH) { + this.activeFileDec.removeTarget(this.activeFile); + this.activeFile = null; + } + }; + + private setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === this.props.model.root) { return; } + if (this.pseudoActiveFile !== fileH) { + if (this.pseudoActiveFile) { + this.pseudoActiveFileDec.removeTarget(this.pseudoActiveFile); + } + if (fileH) { + this.pseudoActiveFileDec.addTarget(fileH as Directory, TargetMatchMode.Self); + } + this.pseudoActiveFile = fileH; + } + if (fileH) { + await this.fileTreeHandle.ensureVisible(fileH); + } + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH); + }; + + private create = async (parentDir, itemData): Promise => { + if (parentDir == undefined || parentDir == null) { + parentDir = this.props.model.root; + } + const {create, model } = this.props; + const isOpen = parentDir.isExpanded; + let maybeFile = undefined; + + if (isOpen && (parentDir._children == null || parentDir._children.length == 0)) { + await this.fileTreeHandle.closeDirectory(parentDir as Directory); + } + if (!parentDir.isExpanded && (parentDir._children == null || parentDir._children.length == 0)) { + await this.fileTreeHandle.openDirectory(parentDir as Directory); + } else { + await this.fileTreeHandle.openDirectory(parentDir as Directory); + maybeFile = await create(parentDir.path, itemData); + if (maybeFile && maybeFile.type && maybeFile.name) { + model.root.inotify({ + type: WatchEvent.Added, + directory: parentDir.path, + file: maybeFile, + }); + } + } + this.changeDirectoryCount(parentDir); + const newItem = parentDir._children.find((c) => c._metadata.data.id === itemData.id); + newItem.resolvedPathCache = newItem.parent.path + '/' + newItem._metadata.data.id; + return newItem; + }; + + private update = async (item, itemData): Promise => { + item._metadata.data = itemData; + await this.props.update(item.path, itemData); + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'updated', item); + }; + + private refresh = async (item): Promise => { + const isOpen = item.isExpanded; + if (item.children && item.children.length > 0) { + for(const entry of item.children) { + await this.remove(entry).then(() => {/*intentional*/}, () => {console.warn('Error removing item');}); + } + } + if (isOpen) { + const ref = FileTreeItem.itemIdToRefMap.get(item.id); + + if (ref) { + this.showLoader(ref); + } + + await this.fileTreeHandle.closeDirectory(item as Directory); + await this.fileTreeHandle.openDirectory(item as Directory); + await this.changeResolvePath(item as Directory); + this.changeDirectoryCount(item); + + if (ref) { + this.hideLoader(ref); + } + } + }; + + private unload = async (item): Promise => { + const isOpen = item.isExpanded; + if (item.children && item.children.length > 0) { + for(const entry of item.children) { + await this.remove(entry).then(() => {/*intentional*/}, error => {console.warn(error);}); + } + } + if (isOpen) { + await this.fileTreeHandle.closeDirectory(item as Directory); + this.changeDirectoryCount(item); + } + }; + + private remove = async (item): Promise => { + const {remove, model } = this.props; + const path = item.path; + await remove(path, false); + const dirName = model.root.pathfx.dirname(path); + const fileName = model.root.pathfx.basename(path); + const parent = item.parent; + if (dirName === parent.path) { + const item_1 = parent._children.find((c) => c._metadata && c._metadata.data.id === fileName); + if (item_1) { + parent.unlinkItem(item_1); + if (parent._children.length == 0) { parent._children = null; } + this.changeDirectoryCount(parent); + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'removed', item); + } + else { + console.warn('Item not found'); + } + } + }; + + private first = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === undefined || fileH === null) { return this.props.model.root.children[0]; } + + if (fileH.branchSize > 0) { + return fileH.children[0]; + } + return null; + }; + + private parent = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory || fileH === FileType.File) { + return fileH.parent; } - private create = async (parentDir, itemData): Promise => { - if (parentDir == undefined || parentDir == null) { - parentDir = this.props.model.root; - } - const {create, model } = this.props; - const isOpen = parentDir.isExpanded; - let maybeFile = undefined; + return null; + }; - if (isOpen && (parentDir._children == null || parentDir._children.length == 0)) { - await this.fileTreeHandle.closeDirectory(parentDir as Directory); - } - if (!parentDir.isExpanded && (parentDir._children == null || parentDir._children.length == 0)) { - await this.fileTreeHandle.openDirectory(parentDir as Directory); - } else { - await this.fileTreeHandle.openDirectory(parentDir as Directory); - maybeFile = await create(parentDir.path, itemData); - if (maybeFile && maybeFile.type && maybeFile.name) { - model.root.inotify({ - type: WatchEvent.Added, - directory: parentDir.path, - file: maybeFile, - }); + + private hasParent = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory || fileH === FileType.File) { + return fileH.parent ? true : false; + } + + return false; + }; + + private children = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory) { + return fileH.children; + } + + return null; + }; + + + private isOpen = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory) { + return fileH.isExpanded; + } + + return false; + }; + + private isClosed = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory || fileH === FileType.File) { + return !fileH.isExpanded; + } + + return false; + }; + + private itemData = async (fileOrDirOrPath: FileOrDir | string) => { + const fileH = typeof fileOrDirOrPath === 'string' + ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) + : fileOrDirOrPath; + + if (fileH === FileType.Directory || fileH === FileType.File) { + return fileH._metadata.data; + } + + return null; + }; + + private setLabel = async(pathOrDir: string | Directory, label: string): Promise => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; + + const ref = FileTreeItem.itemIdToRefMap.get(dir.id); + if (ref) { + ref.style.background = 'none'; + const label$ = ref.querySelector('span.file-name') as HTMLDivElement; + + if (label$) { + if (typeof(label) == 'object' && label.label) { + label = label.label; } - } - this.changeDirectoryCount(parentDir); - const newItem = parentDir._children.find((c) => c._metadata.data.id === itemData.id); - newItem.resolvedPathCache = newItem.parent.path + '/' + newItem._metadata.data.id; - return newItem; - } - - private update = async (item, itemData): Promise => { - item._metadata.data = itemData; - await this.props.update(item.path, itemData); - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'updated', item); - } - - private refresh = async (item): Promise => { - const isOpen = item.isExpanded; - if (item.children && item.children.length > 0) { - for(const entry of item.children) { - await this.remove(entry).then(() => {/*intentional*/}, () => {console.warn('Error removing item');}); - } - } - if (isOpen) { - const ref = FileTreeItem.itemIdToRefMap.get(item.id); - - if (ref) { - this.showLoader(ref); - } - - await this.fileTreeHandle.closeDirectory(item as Directory); - await this.fileTreeHandle.openDirectory(item as Directory); - await this.changeResolvePath(item as Directory); - this.changeDirectoryCount(item); - - if (ref) { - this.hideLoader(ref); - } - } - } - - private unload = async (item): Promise => { - const isOpen = item.isExpanded; - if (item.children && item.children.length > 0) { - for(const entry of item.children) { - await this.remove(entry).then(() => {/*intentional*/}, error => {console.warn(error);}); - } - } - if (isOpen) { - await this.fileTreeHandle.closeDirectory(item as Directory); - this.changeDirectoryCount(item); - } - } - - private remove = async (item): Promise => { - const {remove, model } = this.props; - const path = item.path; - await remove(path, false); - const dirName = model.root.pathfx.dirname(path); - const fileName = model.root.pathfx.basename(path); - const parent = item.parent; - if (dirName === parent.path) { - const item_1 = parent._children.find((c) => c._metadata && c._metadata.data.id === fileName); - if (item_1) { - parent.unlinkItem(item_1); - if (parent._children.length == 0) { parent._children = null; } - this.changeDirectoryCount(parent); - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'removed', item); - } - else { - console.warn('Item not found'); - } - } - } - - private first = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === undefined || fileH === null) { return this.props.model.root.children[0]; } - - if (fileH.branchSize > 0) { - return fileH.children[0]; - } - return null; - } - - private parent = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory || fileH === FileType.File) { - return fileH.parent; + label$.innerHTML = label; } - return null; } + }; - private hasParent = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory || fileH === FileType.File) { - return fileH.parent ? true : false; - } - - return false; - } - - private children = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory) { - return fileH.children; - } - - return null; - } - - - private isOpen = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory) { - return fileH.isExpanded; - } - - return false; - } - - private isClosed = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory || fileH === FileType.File) { - return !fileH.isExpanded; - } - - return false; - } - - private itemData = async (fileOrDirOrPath: FileOrDir | string) => { - const fileH = typeof fileOrDirOrPath === 'string' - ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) - : fileOrDirOrPath; - - if (fileH === FileType.Directory || fileH === FileType.File) { - return fileH._metadata.data; - } - - return null; - } - - private setLabel = async(pathOrDir: string | Directory, label: string): Promise => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; + private changeDirectoryCount = async(pathOrDir: string | Directory): Promise => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; + if (dir.type === FileType.Directory && dir._metadata.data && dir._metadata.data.is_collection === true) { const ref = FileTreeItem.itemIdToRefMap.get(dir.id); if (ref) { ref.style.background = 'none'; - const label$ = ref.querySelector('span.file-name') as HTMLDivElement; - - if (label$) { - if (typeof(label) == 'object' && label.label) { - label = label.label; - } - label$.innerHTML = label; + const label$ = ref.querySelector('span.children-count') as HTMLDivElement; + if(dir.children && dir.children.length > 0) { + label$.innerHTML = '(' + dir.children.length + ')'; + } else { + label$.innerHTML = ''; } - } - } - private changeDirectoryCount = async(pathOrDir: string | Directory): Promise => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; + }; - if (dir.type === FileType.Directory && dir._metadata.data && dir._metadata.data.is_collection === true) { + private closeDir = async (pathOrDir: string | Directory) => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; + + if (dir.type === FileType.Directory) { + if ((dir as Directory).expanded) { + this.fileTreeHandle.closeDirectory(dir as Directory); + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'closed', dir); + + } + } + }; + + private toggleDirectory = async (pathOrDir: string | Directory) => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; + + if (dir.type === FileType.Directory) { + if ((dir as Directory).expanded) { + this.fileTreeHandle.closeDirectory(dir as Directory); + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'closed', dir); + + } else { const ref = FileTreeItem.itemIdToRefMap.get(dir.id); if (ref) { - ref.style.background = 'none'; - const label$ = ref.querySelector('span.children-count') as HTMLDivElement; - if(dir.children && dir.children.length > 0) { - label$.innerHTML = '(' + dir.children.length + ')'; - } else { - label$.innerHTML = ''; - } + this.showLoader(ref); } - } - } - - private closeDir = async (pathOrDir: string | Directory) => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; - - if (dir.type === FileType.Directory) { - if ((dir as Directory).expanded) { - this.fileTreeHandle.closeDirectory(dir as Directory); - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'closed', dir); + await this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'beforeopen', dir); + await this.fileTreeHandle.openDirectory(dir as Directory); + await this.changeResolvePath(dir as Directory); + if (ref) { + this.hideLoader(ref); } + + this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'opened', dir); } } + }; - private toggleDirectory = async (pathOrDir: string | Directory) => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; + private addIcon = async (pathOrDir: string | Directory, icon) => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; - if (dir.type === FileType.Directory) { - if ((dir as Directory).expanded) { - this.fileTreeHandle.closeDirectory(dir as Directory); - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'closed', dir); - - } else { - const ref = FileTreeItem.itemIdToRefMap.get(dir.id); - if (ref) { - this.showLoader(ref); - } - - await this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'beforeopen', dir); - await this.fileTreeHandle.openDirectory(dir as Directory); - await this.changeResolvePath(dir as Directory); - - if (ref) { - this.hideLoader(ref); - } - - this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'opened', dir); - } - } + const ref = FileTreeItem.itemIdToRefMap.get(dir.id); + if (ref) { + const label$ = ref.querySelector('.file-label i') as HTMLDivElement; + label$.className = icon.icon; } - private addIcon = async (pathOrDir: string | Directory, icon) => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; + }; - const ref = FileTreeItem.itemIdToRefMap.get(dir.id); - if (ref) { - const label$ = ref.querySelector('.file-label i') as HTMLDivElement; - label$.className = icon.icon; - } + private addCssClass = async (pathOrDir: string | Directory, cssClass) => { + const dir = typeof pathOrDir === 'string' + ? await this.fileTreeHandle.getFileHandle(pathOrDir) + : pathOrDir; + const ref = FileTreeItem.itemIdToRefMap.get(dir.id); + if (ref) { + ref.classList.add(cssClass); + if (!dir._metadata.data.extraClasses) + dir._metadata.data.extraClasses = []; + + dir._metadata.data.extraClasses.push(cssClass); } - private addCssClass = async (pathOrDir: string | Directory, cssClass) => { - const dir = typeof pathOrDir === 'string' - ? await this.fileTreeHandle.getFileHandle(pathOrDir) - : pathOrDir; + }; - const ref = FileTreeItem.itemIdToRefMap.get(dir.id); - if (ref) { - ref.classList.add(cssClass); - if (!dir._metadata.data.extraClasses) - dir._metadata.data.extraClasses = []; + private showLoader = (ref: HTMLDivElement) => { + // get label ref and add loading class + ref.style.background = 'none'; + const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; + if (label$) label$.classList.add('loading'); + }; - dir._metadata.data.extraClasses.push(cssClass); - } + private hideLoader = (ref: HTMLDivElement) => { + // remove loading class. + ref.style.background = 'none'; + const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; + if (label$) label$.classList.remove('loading'); + }; - } + private handleBlur = () => { + this.events.dispatch(FileTreeXEvent.OnBlur); + }; - private showLoader = (ref: HTMLDivElement) => { - // get label ref and add loading class - ref.style.background = 'none'; - const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; - if (label$) label$.classList.add('loading'); - } - - private hideLoader = (ref: HTMLDivElement) => { - // remove loading class. - ref.style.background = 'none'; - const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; - if (label$) label$.classList.remove('loading'); - } - - private handleBlur = () => { - this.events.dispatch(FileTreeXEvent.OnBlur); - } - - private handleItemClicked = async (ev: React.MouseEvent, item: FileOrDir, type: ItemType) => { - if (type === ItemType.Directory && ev.target.className.includes('directory-toggle')) { - await this.toggleDirectory(item as Directory); - } - await this.setActiveFile(item as FileEntry); - - } - - private handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => { + private handleItemClicked = async (ev: React.MouseEvent, item: FileOrDir, type: ItemType) => { + if (type === ItemType.Directory && ev.target.className.includes('directory-toggle')) { await this.toggleDirectory(item as Directory); - await this.setActiveFile(item as FileEntry); - } + await this.setActiveFile(item as FileEntry); - private getItemFromDOM = (clientReact) => { - return FileTreeItem.refToItemIdMap.get(clientReact); + }; + + private handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => { + await this.toggleDirectory(item as Directory); + await this.setActiveFile(item as FileEntry); + + }; + + private getItemFromDOM = (clientReact) => { + return FileTreeItem.refToItemIdMap.get(clientReact); + }; + + private getDOMFromItem = (item: FileOrDir) => { + return FileTreeItem.itemIdToRefMap.get(item.id); + }; + + private handleClick = (ev: React.MouseEvent) => { + // clicked in "blank space" + if (ev.currentTarget === ev.target) { + this.setPseudoActiveFile(null); } + }; - private getDOMFromItem = (item: FileOrDir) => { - return FileTreeItem.itemIdToRefMap.get(item.id); + private handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => { + return this.props.onContextMenu?.(ev, item); + }; + + private handleKeyDown = (ev: React.KeyboardEvent) => { + return this.keyboardHotkeys.handleKeyDown(ev); + }; + + private onResize = () => { + if (this.wrapperRef.current != null) { + this.resize(); } + }; - private handleClick = (ev: React.MouseEvent) => { - // clicked in "blank space" - if (ev.currentTarget === ev.target) { - this.setPseudoActiveFile(null); - } - } - - private handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => { - return this.props.onContextMenu?.(ev, item); - } - - private handleKeyDown = (ev: React.KeyboardEvent) => { - return this.keyboardHotkeys.handleKeyDown(ev); - } - - private onResize = () => { - if (this.wrapperRef.current != null) { - this.resize(); - } - } - - private resize = (scrollX, scrollY) => { - const scrollXPos = scrollX ? scrollX : 0; - const scrollYPos = scrollY ? scrollY : this.props.model.state.scrollOffset; - const div = this.wrapperRef.current.querySelector('div').querySelector('div') as HTMLDivElement; - div.scroll(scrollXPos, scrollYPos); - - } - - private changeResolvePath = async (item: FileOrDir): Promise => { - // Change the path as per pgAdmin requirement: Item Id wise - if (item.type === FileType.File) { - item.resolvedPathCache = item.parent.path + '/' + item._metadata.data.id; - } - if (item.type === FileType.Directory && item.children && item.children.length > 0) { - for(const entry of item.children) { - entry.resolvedPathCache = entry.parent.path + '/' + entry._metadata.data.id; - } + private resize = (scrollX, scrollY) => { + const scrollXPos = scrollX ? scrollX : 0; + const scrollYPos = scrollY ? scrollY : this.props.model.state.scrollOffset; + const div = this.wrapperRef.current.querySelector('div').querySelector('div') as HTMLDivElement; + div.scroll(scrollXPos, scrollYPos); + + }; + + private changeResolvePath = async (item: FileOrDir): Promise => { + // Change the path as per pgAdmin requirement: Item Id wise + if (item.type === FileType.File) { + item.resolvedPathCache = item.parent.path + '/' + item._metadata.data.id; + } + if (item.type === FileType.Directory && item.children && item.children.length > 0) { + for(const entry of item.children) { + entry.resolvedPathCache = entry.parent.path + '/' + entry._metadata.data.id; } } + }; } export { IFileTreeXHandle, IFileTreeXProps }; diff --git a/web/pgadmin/static/js/components/PgTree/TreeModelX/index.ts b/web/pgadmin/static/js/components/PgTree/TreeModelX/index.ts index 5786dc344..0582db533 100644 --- a/web/pgadmin/static/js/components/PgTree/TreeModelX/index.ts +++ b/web/pgadmin/static/js/components/PgTree/TreeModelX/index.ts @@ -2,9 +2,9 @@ import { TreeModel, IBasicFileSystemHost, Root } from 'react-aspen'; import { DecorationsManager } from 'aspen-decorations'; export class TreeModelX extends TreeModel { - public readonly decorations: DecorationsManager - constructor(host: IBasicFileSystemHost, mountPath: string) { - super(host, mountPath); - this.decorations = new DecorationsManager(this.root as Root); - } + public readonly decorations: DecorationsManager; + constructor(host: IBasicFileSystemHost, mountPath: string) { + super(host, mountPath); + this.decorations = new DecorationsManager(this.root as Root); + } } diff --git a/web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts b/web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts index c20675171..4f0ccf925 100644 --- a/web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts +++ b/web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts @@ -2,128 +2,128 @@ import { FileEntry, Directory, FileType } from 'react-aspen'; import { IFileTreeXHandle } from '../types'; export class KeyboardHotkeys { - private hotkeyActions = { - 'ArrowUp': () => this.jumpToPrevItem(), - 'ArrowDown': () => this.jumpToNextItem(), - 'ArrowRight': () => this.expandOrJumpToFirstChild(), - 'ArrowLeft': () => this.collapseOrJumpToFirstParent(), - 'Space': () => this.toggleDirectoryExpand(), - 'Enter': () => this.selectFileOrToggleDirState(), - 'Home': () => this.jumpToFirstItem(), - 'End': () => this.jumpToLastItem(), - 'Escape': () => this.resetSteppedOrSelectedItem(), + private hotkeyActions = { + 'ArrowUp': () => this.jumpToPrevItem(), + 'ArrowDown': () => this.jumpToNextItem(), + 'ArrowRight': () => this.expandOrJumpToFirstChild(), + 'ArrowLeft': () => this.collapseOrJumpToFirstParent(), + 'Space': () => this.toggleDirectoryExpand(), + 'Enter': () => this.selectFileOrToggleDirState(), + 'Home': () => this.jumpToFirstItem(), + 'End': () => this.jumpToLastItem(), + 'Escape': () => this.resetSteppedOrSelectedItem(), + }; + + constructor(private readonly fileTreeX: IFileTreeXHandle) { } + + public handleKeyDown = (ev: React.KeyboardEvent) => { + if (!this.fileTreeX.hasDirectFocus()) { + return false; } - - constructor(private readonly fileTreeX: IFileTreeXHandle) { } - - public handleKeyDown = (ev: React.KeyboardEvent) => { - if (!this.fileTreeX.hasDirectFocus()) { - return false; - } - const { code } = ev.nativeEvent; - if (code in this.hotkeyActions) { - ev.preventDefault(); - this.hotkeyActions[code](); - return true; - } + const { code } = ev.nativeEvent; + if (code in this.hotkeyActions) { + ev.preventDefault(); + this.hotkeyActions[code](); + return true; } + }; - private jumpToFirstItem = (): void => { - const { root } = this.fileTreeX.getModel(); - this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(0), true); - } + private jumpToFirstItem = (): void => { + const { root } = this.fileTreeX.getModel(); + this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(0), true); + }; - private jumpToLastItem = (): void => { - const { root } = this.fileTreeX.getModel(); - this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(root.branchSize - 1), true); - } + private jumpToLastItem = (): void => { + const { root } = this.fileTreeX.getModel(); + this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(root.branchSize - 1), true); + }; - private jumpToNextItem = (): void => { - const { root } = this.fileTreeX.getModel(); - let currentPseudoActive = this.fileTreeX.getActiveFile(); - if (!currentPseudoActive) { - const selectedFile = this.fileTreeX.getActiveFile(); - if (selectedFile) { - currentPseudoActive = selectedFile; - } else { - return this.jumpToFirstItem(); - } - } - const idx = root.getIndexAtFileEntry(currentPseudoActive); - if (idx + 1 > root.branchSize) { + private jumpToNextItem = (): void => { + const { root } = this.fileTreeX.getModel(); + let currentPseudoActive = this.fileTreeX.getActiveFile(); + if (!currentPseudoActive) { + const selectedFile = this.fileTreeX.getActiveFile(); + if (selectedFile) { + currentPseudoActive = selectedFile; + } else { return this.jumpToFirstItem(); - } else if (idx > -1) { - this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(idx + 1), true); } } + const idx = root.getIndexAtFileEntry(currentPseudoActive); + if (idx + 1 > root.branchSize) { + return this.jumpToFirstItem(); + } else if (idx > -1) { + this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(idx + 1), true); + } + }; - private jumpToPrevItem = (): void => { - const { root } = this.fileTreeX.getModel(); - let currentPseudoActive = this.fileTreeX.getActiveFile(); - if (!currentPseudoActive) { - const selectedFile = this.fileTreeX.getActiveFile(); - if (selectedFile) { - currentPseudoActive = selectedFile; - } else { - return this.jumpToLastItem(); - } - } - const idx = root.getIndexAtFileEntry(currentPseudoActive); - if (idx - 1 < 0) { + private jumpToPrevItem = (): void => { + const { root } = this.fileTreeX.getModel(); + let currentPseudoActive = this.fileTreeX.getActiveFile(); + if (!currentPseudoActive) { + const selectedFile = this.fileTreeX.getActiveFile(); + if (selectedFile) { + currentPseudoActive = selectedFile; + } else { return this.jumpToLastItem(); - } else if (idx > -1) { - this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(idx - 1), true); } } + const idx = root.getIndexAtFileEntry(currentPseudoActive); + if (idx - 1 < 0) { + return this.jumpToLastItem(); + } else if (idx > -1) { + this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(idx - 1), true); + } + }; - private expandOrJumpToFirstChild(): void { - const currentPseudoActive = this.fileTreeX.getActiveFile(); - if (currentPseudoActive && currentPseudoActive.type === FileType.Directory) { - if ((currentPseudoActive as Directory).expanded) { - return this.jumpToNextItem(); - } else { - this.fileTreeX.openDirectory(currentPseudoActive as Directory); - } + private expandOrJumpToFirstChild(): void { + const currentPseudoActive = this.fileTreeX.getActiveFile(); + if (currentPseudoActive && currentPseudoActive.type === FileType.Directory) { + if ((currentPseudoActive as Directory).expanded) { + return this.jumpToNextItem(); + } else { + this.fileTreeX.openDirectory(currentPseudoActive as Directory); } } + } - private collapseOrJumpToFirstParent(): void { - const currentPseudoActive = this.fileTreeX.getActiveFile(); - if (currentPseudoActive) { - if (currentPseudoActive.type === FileType.Directory && (currentPseudoActive as Directory).expanded) { - return this.fileTreeX.closeDirectory(currentPseudoActive as Directory); - } - this.fileTreeX.setActiveFile(currentPseudoActive.parent, true); + private collapseOrJumpToFirstParent(): void { + const currentPseudoActive = this.fileTreeX.getActiveFile(); + if (currentPseudoActive) { + if (currentPseudoActive.type === FileType.Directory && (currentPseudoActive as Directory).expanded) { + return this.fileTreeX.closeDirectory(currentPseudoActive as Directory); } + this.fileTreeX.setActiveFile(currentPseudoActive.parent, true); } + } - private selectFileOrToggleDirState = (): void => { - const currentPseudoActive = this.fileTreeX.getActiveFile(); - if (!currentPseudoActive) { return; } - if (currentPseudoActive.type === FileType.Directory) { - this.fileTreeX.toggleDirectory(currentPseudoActive as Directory); - } else if (currentPseudoActive.type === FileType.File) { - this.fileTreeX.setActiveFile(currentPseudoActive as FileEntry, true); - } + private selectFileOrToggleDirState = (): void => { + const currentPseudoActive = this.fileTreeX.getActiveFile(); + if (!currentPseudoActive) { return; } + if (currentPseudoActive.type === FileType.Directory) { + this.fileTreeX.toggleDirectory(currentPseudoActive as Directory); + } else if (currentPseudoActive.type === FileType.File) { + this.fileTreeX.setActiveFile(currentPseudoActive as FileEntry, true); } + }; - private toggleDirectoryExpand = (): void => { - const currentPseudoActive = this.fileTreeX.getActiveFile(); - if (!currentPseudoActive) { return; } - if (currentPseudoActive.type === FileType.Directory) { - this.fileTreeX.toggleDirectory(currentPseudoActive as Directory); - } + private toggleDirectoryExpand = (): void => { + const currentPseudoActive = this.fileTreeX.getActiveFile(); + if (!currentPseudoActive) { return; } + if (currentPseudoActive.type === FileType.Directory) { + this.fileTreeX.toggleDirectory(currentPseudoActive as Directory); } + }; - private resetSteppedOrSelectedItem = (): void => { - const currentPseudoActive = this.fileTreeX.getActiveFile(); - if (currentPseudoActive) { - return this.resetSteppedItem(); - } - this.fileTreeX.setActiveFile(null); + private resetSteppedOrSelectedItem = (): void => { + const currentPseudoActive = this.fileTreeX.getActiveFile(); + if (currentPseudoActive) { + return this.resetSteppedItem(); } + this.fileTreeX.setActiveFile(null); + }; - private resetSteppedItem = () => { - this.fileTreeX.setActiveFile(null); - } + private resetSteppedItem = () => { + this.fileTreeX.setActiveFile(null); + }; } diff --git a/web/pgadmin/static/js/tree/preference_nodes.ts b/web/pgadmin/static/js/tree/preference_nodes.ts index 6c611fdea..587ec18db 100644 --- a/web/pgadmin/static/js/tree/preference_nodes.ts +++ b/web/pgadmin/static/js/tree/preference_nodes.ts @@ -25,7 +25,7 @@ export class ManagePreferenceTreeNodes { this.tree = {}; this.tree[_root] = { name: 'root', type: FileType.Directory, metadata: node }; res(); - }) + }); public updateNode = (_path, _data) => new Promise((res) => { const item = this.findNode(_path); @@ -34,7 +34,7 @@ export class ManagePreferenceTreeNodes { item.metadata.data = _data; } res(true); - }) + }); public removeNode = async (_path) => { const item = this.findNode(_path); @@ -68,7 +68,7 @@ export class ManagePreferenceTreeNodes { if (tmpParentNode !== null && tmpParentNode !== undefined) tmpParentNode.children.push(treeNode); res(treeNode); - }) + }); public readNode = (_path: string) => new Promise((res, rej) => { const temp_tree_path = _path, @@ -112,12 +112,12 @@ export class ManagePreferenceTreeNodes { self.returnChildrens(node, res); } loadData(); - }) + }); public returnChildrens = (node: any, res: any) =>{ if (node?.children.length > 0) return res(node.children); else return res(null); - } + }; } diff --git a/web/pgadmin/static/js/tree/tree_nodes.ts b/web/pgadmin/static/js/tree/tree_nodes.ts index 0e96b52d8..6d77566f9 100644 --- a/web/pgadmin/static/js/tree/tree_nodes.ts +++ b/web/pgadmin/static/js/tree/tree_nodes.ts @@ -27,7 +27,7 @@ export class ManageTreeNodes { this.tree = {}; this.tree[_root] = {name: 'root', type: FileType.Directory, metadata: node}; res(); - }) + }); public updateNode = (_path, _data) => new Promise((res) => { const item = this.findNode(_path); @@ -36,7 +36,7 @@ export class ManageTreeNodes { item.metadata.data = _data; } res(true); - }) + }); public removeNode = async (_path) => { const item = this.findNode(_path); @@ -69,7 +69,7 @@ export class ManageTreeNodes { if (tmpParentNode !== null && tmpParentNode !== undefined) tmpParentNode.children.push(treeNode); res(treeNode); - }) + }); public readNode = (_path: string) => new Promise((res, rej) => { let temp_tree_path = _path; @@ -152,7 +152,7 @@ export class ManageTreeNodes { } loadData(); - }) + }); public generate_url = (path: string) => { let _path = path; @@ -176,7 +176,7 @@ export class ManageTreeNodes { if(_partitions.length > 0) _parent_path[0] = _partitions[_partitions.length-1]; return _parent_path.reverse().join('/'); - } + }; } diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx index 3e37393d7..9ab6aba4a 100644 --- a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx +++ b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx @@ -311,7 +311,7 @@ class TableNodeWidgetRaw extends React.Component { toggleShowDetails = (e) => { e.preventDefault(); this.setState((prevState)=>({show_details: !prevState.show_details})); - } + }; render() { let tableData = this.props.node.getData() || {}; diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx index ceef982b5..b2c53fcbd 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx @@ -591,7 +591,7 @@ export class ResultSetUtils { /* If the raw row objects are available, use to them identify null values */ copiedRowsObjects = JSON.parse(localStorage.getItem('copied-rows')); } catch {/* Suppress the error */} - for(const [recIdx, rec] of result?.entries()) { + for(const [recIdx, rec] of result?.entries()??[]) { // Convert 2darray to dict. let rowObj = {}; for(const col of columns) {