From 271256bffbd3aa43be393b22401a6393a5a2afb5 Mon Sep 17 00:00:00 2001 From: Hardikkumar Nai <80053762+hardiknai-techm@users.noreply.github.com> Date: Tue, 12 Oct 2021 21:13:35 +0530 Subject: [PATCH] resolve_eslint_NodePropertiesComponent (#921) * resolve_eslint_NodePropertiesComponent * address commit * Open new screen: Screen reader does not pass the 'Copied' information after selecting 'Copy' button. * resolve lint error --- .eslintignore | 11 -------- .../LeftPaneComponent.tsx | 2 +- .../NodePropertiesComponent.test.tsx | 27 ++++++++++--------- .../NodePropertiesComponent.tsx | 18 +++++-------- src/Explorer/OpenFullScreen.tsx | 8 ++++-- src/Explorer/Tabs/NotebookV2Tab.ts | 2 +- 6 files changed, 29 insertions(+), 39 deletions(-) diff --git a/.eslintignore b/.eslintignore index 12dfbf9c2..c1e8c4948 100644 --- a/.eslintignore +++ b/.eslintignore @@ -81,12 +81,8 @@ src/Explorer/Tables/DataTable/DataTableBindingManager.ts src/Explorer/Tables/DataTable/DataTableBuilder.ts src/Explorer/Tables/DataTable/DataTableContextMenu.ts src/Explorer/Tables/DataTable/DataTableOperationManager.ts -# src/Explorer/Tables/DataTable/DataTableOperations.ts src/Explorer/Tables/DataTable/DataTableViewModel.ts -# src/Explorer/Tables/DataTable/TableCommands.ts -# src/Explorer/Tables/DataTable/TableEntityCache.ts src/Explorer/Tables/DataTable/TableEntityListViewModel.ts -# src/Explorer/Tables/Entities.ts src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts src/Explorer/Tables/TableDataClient.ts src/Explorer/Tables/TableEntityProcessor.ts @@ -134,20 +130,13 @@ src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx src/Explorer/Controls/TreeComponent/TreeComponent.tsx src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx -; src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx -src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx -src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx -src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx -src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx src/Explorer/Menus/CommandBar/CommandBarUtil.tsx src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx -; src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx src/Explorer/Notebook/NotebookComponent/contents/index.tsx -; src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx diff --git a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx index f6525e54d..6e3963f06 100644 --- a/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx +++ b/src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx @@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component { className={className} as="tr" aria-label={node.caption} - onActivated={(e) => this.props.onRootNodeSelected(node.id)} + onActivated={() => this.props.onRootNodeSelected(node.id)} key={node.id} > diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx index bd894129f..df49ee81d 100644 --- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx +++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx @@ -1,8 +1,8 @@ -import React from "react"; import { mount, ReactWrapper } from "enzyme"; import * as Q from "q"; -import { NodePropertiesComponent, NodePropertiesComponentProps, Mode } from "./NodePropertiesComponent"; -import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer"; +import React from "react"; +import { GraphHighlightedNodeData, PossibleVertex } from "./GraphExplorer"; +import { Mode, NodePropertiesComponent, NodePropertiesComponentProps } from "./NodePropertiesComponent"; describe("Property pane", () => { const title = "My Title"; @@ -37,17 +37,18 @@ describe("Property pane", () => { return { expandedTitle: title, isCollapsed: false, - onCollapsedChanged: (newValue: boolean): void => {}, + onCollapsedChanged: jest.fn(), node: highlightedNode, - getPkIdFromNodeData: (v: GraphHighlightedNodeData): string => null, - collectionPartitionKeyProperty: null, - updateVertexProperties: (editedProperties: EditedProperties): Q.Promise => Q.resolve(), - selectNode: (id: string): void => {}, - updatePossibleVertices: (): Q.Promise => Q.resolve(null), - possibleEdgeLabels: null, - editGraphEdges: (editedEdges: EditedEdges): Q.Promise => Q.resolve(), - deleteHighlightedNode: (): void => {}, - onModeChanged: (newMode: Mode): void => {}, + getPkIdFromNodeData: (): string => undefined, + collectionPartitionKeyProperty: undefined, + updateVertexProperties: (): Q.Promise => Q.resolve(), + selectNode: jest.fn(), + updatePossibleVertices: (): Q.Promise => Q.resolve(undefined), + possibleEdgeLabels: undefined, + //eslint-disable-next-line + editGraphEdges: (): Q.Promise => Q.resolve(), + deleteHighlightedNode: jest.fn(), + onModeChanged: jest.fn(), viewMode: Mode.READONLY_PROP, }; }; diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx index 55f641a30..62b6169fe 100644 --- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx +++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx @@ -72,7 +72,7 @@ export class NodePropertiesComponent extends React.Component< super(props); this.state = { editedProperties: { - pkId: null, + pkId: undefined, readOnlyProperties: [], existingProperties: [], addedProperties: [], @@ -98,15 +98,12 @@ export class NodePropertiesComponent extends React.Component< }; } - public static getDerivedStateFromProps( - props: NodePropertiesComponentProps, - state: NodePropertiesComponentState - ): Partial { + public static getDerivedStateFromProps(props: NodePropertiesComponentProps): Partial { if (props.viewMode !== Mode.READONLY_PROP) { return { isDeleteConfirm: false }; } - return null; + return undefined; } public render(): JSX.Element { @@ -138,10 +135,10 @@ export class NodePropertiesComponent extends React.Component< * @param value */ private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString { - if (value == null) { + if (value === undefined) { return "null"; } - let type = typeof value; + const type = typeof value; switch (type) { case "number": case "boolean": @@ -172,10 +169,9 @@ export class NodePropertiesComponent extends React.Component< ]; const existingProps: ViewModels.InputProperty[] = []; - if (this.props.node.hasOwnProperty("properties")) { const hProps = this.props.node["properties"]; - for (let p in hProps) { + for (const p in hProps) { const propValues = hProps[p]; (p === partitionKeyProperty ? readOnlyProps : existingProps).push({ key: p, @@ -437,7 +433,7 @@ export class NodePropertiesComponent extends React.Component< ); } else { - return null; + return undefined; } } diff --git a/src/Explorer/OpenFullScreen.tsx b/src/Explorer/OpenFullScreen.tsx index b36feeb48..7dabbc107 100644 --- a/src/Explorer/OpenFullScreen.tsx +++ b/src/Explorer/OpenFullScreen.tsx @@ -4,6 +4,8 @@ import * as React from "react"; import { useFullScreenURLs } from "../hooks/useFullScreenURLs"; export const OpenFullScreen: React.FunctionComponent = () => { + const [isReadUrlCopy, setIsReadUrlCopy] = React.useState(false); + const [isReadWriteUrlCopy, setIsReadWriteUrlCopy] = React.useState(false); const result = useFullScreenURLs(); if (!result) { return ; @@ -25,8 +27,9 @@ export const OpenFullScreen: React.FunctionComponent = () => { { copyToClipboard(readWriteUrl); + setIsReadWriteUrlCopy(true); }} - text="Copy" + text={isReadWriteUrlCopy ? "Copied" : "Copy"} iconProps={{ iconName: "Copy" }} /> { { + setIsReadUrlCopy(true); copyToClipboard(readUrl); }} - text="Copy" + text={isReadUrlCopy ? "Copied" : "Copy"} iconProps={{ iconName: "Copy" }} /> this.copyNotebook(), commandButtonLabel: copyToLabel, hasPopup: false,