IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-21 16:27:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix SonarQube code smells for PgTree directory.

Browse Source
This commit is contained in:
Anil Sahoo 2024-11-19 15:45:00 +05:30 committed by GitHub
parent 8be65ceb7b
commit 6d5b1673e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx
View File

@ -39,7 +39,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
public static readonly renderHeight: number = 24;
private static readonly itemIdToRefMap: Map<number, HTMLDivElement> = new Map();
private static readonly refToItemIdMap: Map<number, HTMLDivElement> = new Map();
private fileTreeEvent: IFileTreeXTriggerEvents;
private readonly fileTreeEvent: IFileTreeXTriggerEvents;
constructor(props) {
super(props);
@ -119,7 +119,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
this.setActiveFile(this.props.item);
}
private setActiveFile = async (FileOrDir): Promise<void> => {
private readonly setActiveFile = async (FileOrDir): Promise<void> => {
this.props.changeDirectoryCount(FileOrDir.parent);
if(FileOrDir._loaded !== true) {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'added', FileOrDir);
@ -142,7 +142,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
}
}
private handleDivRef = (r: HTMLDivElement) => {
private readonly handleDivRef = (r: HTMLDivElement) => {
if (r === null) {
FileTreeItem.itemIdToRefMap.delete(this.props.item.id);
} else {
@ -151,42 +151,42 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
}
};
private handleContextMenu = (ev: React.MouseEvent) => {
private readonly 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) => {
private readonly 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) => {
private readonly handleDoubleClick = (ev: React.MouseEvent) => {
const { item, itemType, onDoubleClick } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) {
onDoubleClick(ev, item as FileEntry, itemType);
}
};
private handleMouseEnter = (ev: React.MouseEvent) => {
private readonly handleMouseEnter = (ev: React.MouseEvent) => {
const { item, itemType, onMouseEnter } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) {
onMouseEnter?.(ev, item as FileEntry);
}
};
private handleMouseLeave = (ev: React.MouseEvent) => {
private readonly handleMouseLeave = (ev: React.MouseEvent) => {
const { item, itemType, onMouseLeave } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) {
onMouseLeave?.(ev, item as FileEntry);
}
};
private handleDragStartItem = (e: React.DragEvent) => {
private readonly handleDragStartItem = (e: React.DragEvent) => {
const { item, itemType, events } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) {
const ref = FileTreeItem.itemIdToRefMap.get(item.id);

94
web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
View File

@ -20,17 +20,17 @@ import AutoSizer from 'react-virtualized-auto-sizer';
export class FileTreeX extends React.Component<IFileTreeXProps> {
private fileTreeHandle: IFileTreeXHandle;
private activeFileDec: Decoration;
private pseudoActiveFileDec: Decoration;
private readonly activeFileDec: Decoration;
private readonly pseudoActiveFileDec: Decoration;
private activeFile: FileOrDir;
private pseudoActiveFile: FileOrDir;
private wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
private events: Notificar<FileTreeXEvent>;
private disposables: DisposablesComposite;
private readonly wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
private readonly events: Notificar<FileTreeXEvent>;
private readonly disposables: DisposablesComposite;
private keyboardHotkeys: KeyboardHotkeys;
private fileTreeEvent: IFileTreeXTriggerEvents;
private hoverTimeoutId: React.RefObject<number|null> = React.createRef<number|null>();
private hoverDispatchId: React.RefObject<number|null> = React.createRef<number|null>();
private readonly hoverTimeoutId: React.RefObject<number|null> = React.createRef<number|null>();
private readonly hoverDispatchId: React.RefObject<number|null> = React.createRef<number|null>();
constructor(props: IFileTreeXProps) {
super(props);
this.events = new Notificar();
@ -98,11 +98,11 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.disposables.dispose();
}
private handleTreeEvent = () => {
private readonly handleTreeEvent = () => {
this.fileTreeEvent = this.props.onEvent;
};
private handleTreeReady = (handle: IFileTreeHandle) => {
private readonly handleTreeReady = (handle: IFileTreeHandle) => {
const { onReady, model } = this.props;
const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div');
if(this.props.onScroll) {
@ -169,7 +169,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private onItemMouseEnter = (ev: React.MouseEvent, item: FileEntry | Directory) => {
private readonly onItemMouseEnter = (ev: React.MouseEvent, item: FileEntry | Directory) => {
clearTimeout(this.hoverDispatchId.current??undefined);
(this.hoverDispatchId as any).current = setTimeout(()=>{
clearTimeout(this.hoverTimeoutId.current??undefined);
@ -177,7 +177,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}, 500);
};
private onItemMouseLeave = (ev: React.MouseEvent) => {
private readonly onItemMouseLeave = (ev: React.MouseEvent) => {
clearTimeout(this.hoverTimeoutId.current??undefined);
clearTimeout(this.hoverDispatchId.current??undefined);
(this.hoverTimeoutId as any).current = setTimeout(()=>{
@ -185,7 +185,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}, 100);
};
private setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise<void> => {
private readonly setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -202,13 +202,13 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH);
if (fileH && ensureVisible === true) {
const alignTree = align !== undefined && align !== null ? align : 'auto';
const alignTree = align ?? 'auto';
await this.fileTreeHandle.ensureVisible(fileH, alignTree);
}
}
};
private ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
private readonly ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -218,7 +218,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
private readonly deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -230,7 +230,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
private readonly setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -251,7 +251,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH);
};
private create = async (parentDir, itemData): Promise<void> => {
private readonly create = async (parentDir, itemData): Promise<void> => {
if (parentDir == undefined || parentDir == null) {
parentDir = this.props.model.root;
}
@ -281,13 +281,13 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return newItem;
};
private update = async (item, itemData): Promise<void> => {
private readonly update = async (item, itemData): Promise<void> => {
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<void> => {
private readonly refresh = async (item): Promise<void> => {
const isOpen = item.isExpanded;
if (item.children && item.children.length > 0) {
for(const entry of item.children) {
@ -312,7 +312,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private unload = async (item): Promise<void> => {
private readonly unload = async (item): Promise<void> => {
const isOpen = item.isExpanded;
if (item.children && item.children.length > 0) {
for(const entry of item.children) {
@ -325,7 +325,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private remove = async (item): Promise<void> => {
private readonly remove = async (item): Promise<void> => {
const {remove, model } = this.props;
const path = item.path;
await remove(path, false);
@ -346,7 +346,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private first = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly first = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -359,7 +359,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return null;
};
private parent = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly parent = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -372,7 +372,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private hasParent = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly hasParent = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -384,7 +384,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false;
};
private children = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly children = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -397,7 +397,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private isOpen = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly isOpen = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -409,7 +409,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false;
};
private isClosed = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly isClosed = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -421,7 +421,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false;
};
private itemData = async (fileOrDirOrPath: FileOrDir | string) => {
private readonly itemData = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath;
@ -433,7 +433,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return null;
};
private setLabel = async(pathOrDir: string | Directory, label: string): Promise<void> => {
private readonly setLabel = async(pathOrDir: string | Directory, label: string): Promise<void> => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -454,7 +454,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private changeDirectoryCount = async(pathOrDir: string | Directory): Promise<void> => {
private readonly changeDirectoryCount = async(pathOrDir: string | Directory): Promise<void> => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -474,7 +474,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private closeDir = async (pathOrDir: string | Directory) => {
private readonly closeDir = async (pathOrDir: string | Directory) => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -488,7 +488,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private toggleDirectory = async (pathOrDir: string | Directory) => {
private readonly toggleDirectory = async (pathOrDir: string | Directory) => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -517,7 +517,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}
};
private addIcon = async (pathOrDir: string | Directory, icon) => {
private readonly addIcon = async (pathOrDir: string | Directory, icon) => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -530,7 +530,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private addCssClass = async (pathOrDir: string | Directory, cssClass) => {
private readonly addCssClass = async (pathOrDir: string | Directory, cssClass) => {
const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir;
@ -546,25 +546,25 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private showLoader = (ref: HTMLDivElement) => {
private readonly 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) => {
private readonly 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 = () => {
private readonly handleBlur = () => {
this.events.dispatch(FileTreeXEvent.OnBlur);
};
private handleItemClicked = async (ev: React.MouseEvent, item: FileOrDir, type: ItemType) => {
private readonly 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);
}
@ -572,42 +572,42 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => {
private readonly handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => {
await this.toggleDirectory(item as Directory);
await this.setActiveFile(item as FileEntry);
};
private getItemFromDOM = (clientReact) => {
private readonly getItemFromDOM = (clientReact) => {
return FileTreeItem.refToItemIdMap.get(clientReact);
};
private getDOMFromItem = (item: FileOrDir) => {
private readonly getDOMFromItem = (item: FileOrDir) => {
return FileTreeItem.itemIdToRefMap.get(item.id);
};
private handleClick = (ev: React.MouseEvent) => {
private readonly handleClick = (ev: React.MouseEvent) => {
// clicked in "blank space"
if (ev.currentTarget === ev.target) {
this.setPseudoActiveFile(null);
}
};
private handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => {
private readonly handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => {
return this.props.onContextMenu?.(ev, item);
};
private handleKeyDown = (ev: React.KeyboardEvent) => {
private readonly handleKeyDown = (ev: React.KeyboardEvent) => {
return this.keyboardHotkeys.handleKeyDown(ev);
};
private onResize = () => {
private readonly onResize = () => {
if (this.wrapperRef.current != null) {
this.resize();
}
};
private resize = (scrollX, scrollY) => {
private readonly resize = (scrollX, scrollY) => {
const scrollXPos = scrollX || 0;
const scrollYPos = scrollY || this.props.model.state.scrollOffset;
const div = this.wrapperRef.current.querySelector('div').querySelector('div') as HTMLDivElement;
@ -617,7 +617,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
};
private changeResolvePath = async (item: FileOrDir): Promise<void> => {
private readonly changeResolvePath = async (item: FileOrDir): Promise<void> => {
// Change the path as per pgAdmin requirement: Item Id wise
if (item.type === FileType.File) {
item.resolvedPathCache = item.parent.path + '/' + item._metadata.data.id;

20
web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts
View File

@ -3,7 +3,7 @@ import { FileEntry, Directory, FileType } from 'react-aspen';
import { FileTreeXEvent, IFileTreeXHandle } from '../types';
export class KeyboardHotkeys {
private hotkeyActions = {
private readonly hotkeyActions = {
'ArrowUp': () => this.jumpToPrevItem(),
'ArrowDown': () => this.jumpToNextItem(),
'ArrowRight': () => this.expandOrJumpToFirstChild(),
@ -34,17 +34,17 @@ export class KeyboardHotkeys {
}
};
private jumpToFirstItem = (): void => {
private readonly jumpToFirstItem = (): void => {
const { root } = this.fileTreeX.getModel();
this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(0), true);
};
private jumpToLastItem = (): void => {
private readonly jumpToLastItem = (): void => {
const { root } = this.fileTreeX.getModel();
this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(root.branchSize - 1), true);
};
private jumpToNextItem = (): void => {
private readonly jumpToNextItem = (): void => {
const { root } = this.fileTreeX.getModel();
let currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) {
@ -63,7 +63,7 @@ export class KeyboardHotkeys {
}
};
private jumpToPrevItem = (): void => {
private readonly jumpToPrevItem = (): void => {
const { root } = this.fileTreeX.getModel();
let currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) {
@ -103,7 +103,7 @@ export class KeyboardHotkeys {
}
}
private selectFileOrToggleDirState = (): void => {
private readonly selectFileOrToggleDirState = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { return; }
if (currentPseudoActive.type === FileType.Directory) {
@ -113,7 +113,7 @@ export class KeyboardHotkeys {
}
};
private toggleDirectoryExpand = (): void => {
private readonly toggleDirectoryExpand = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { return; }
if (currentPseudoActive.type === FileType.Directory) {
@ -121,7 +121,7 @@ export class KeyboardHotkeys {
}
};
private resetSteppedOrSelectedItem = (): void => {
private readonly resetSteppedOrSelectedItem = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile();
if (currentPseudoActive) {
return this.resetSteppedItem();
@ -129,11 +129,11 @@ export class KeyboardHotkeys {
this.fileTreeX.setActiveFile(null);
};
private resetSteppedItem = () => {
private readonly resetSteppedItem = () => {
this.fileTreeX.setActiveFile(null);
};
private copyEntry = () => {
private readonly copyEntry = () => {
const currentPseudoActive = this.fileTreeX.getActiveFile();
this.events.dispatch(FileTreeXEvent.onTreeEvents, null, 'copied', currentPseudoActive);
};

2
web/pgadmin/static/js/components/PgTree/types.ts
View File

@ -9,7 +9,7 @@ export interface IFileTreeXTriggerEvents {
}
export interface IItemRendererX extends IItemRenderer {
getBoundingClientRectForItem(item: FileEntry | Directory): ClientRect
getBoundingClientRectForItem(item: FileEntry | Directory): DOMRect
}
// Here imagination is your limit! IFileTreeHandle has core low-level features you can build on top of as your application needs