random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-28 05:11:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

babel version update

Browse Source
This commit is contained in:
hardiknai-techm
2021-05-13 17:30:08 +05:30
parent 349a4bb0f2
commit b4461ddf5d
32 changed files with 1308 additions and 1515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1873
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
package.json
View File

@@ -9,9 +9,9 @@
"@azure/cosmos-language-service": "0.0.5",
"@azure/identity": "1.2.1",
"@azure/ms-rest-nodeauth": "3.0.7",
"@babel/plugin-proposal-class-properties": "7.12.1",
"@babel/plugin-proposal-decorators": "7.12.12",
"@fluentui/react": "8.14.3",
"@babel/plugin-proposal-class-properties": "7.13.0",
"@babel/plugin-proposal-decorators": "7.14.2",
"@fluentui/react": "8.14.7",
"@jupyterlab/services": "6.0.2",
"@jupyterlab/terminal": "3.0.3",
"@microsoft/applicationinsights-web": "2.6.1",
@@ -46,7 +46,7 @@
"clipboard-copy": "4.0.1",
"crossroads": "0.12.2",
"crypto-browserify": "3.12.0",
"css-element-queries": "1.1.1",
"css-element-queries": "1.2.3",
"d3": "6.1.1",
"datatables.net-colreorder-dt": "1.5.1",
"datatables.net-dt": "1.10.19",
@@ -55,7 +55,7 @@
"dom-to-image": "2.6.0",
"dotenv": "8.2.0",
"eslint-plugin-jest": "23.13.2",
"eslint-plugin-react": "7.20.0",
"eslint-plugin-react": "7.23.2",
"hasher": "1.2.0",
"html2canvas": "1.0.0-rc.7",
"i18next": "20.2.2",
@@ -92,13 +92,13 @@
"sanitize-html": "2.3.3",
"styled-components": "5.3.0",
"swr": "0.4.0",
"underscore": "1.9.1",
"underscore": "1.13.1",
"utility-types": "3.10.0",
"zustand": "3.5.0"
},
"devDependencies": {
"@babel/core": "7.14.0",
"@babel/preset-env": "7.14.1",
"@babel/core": "7.14.2",
"@babel/preset-env": "7.14.2",
"@babel/preset-react": "7.13.13",
"@babel/preset-typescript": "7.13.0",
"@svgr/webpack": "5.5.0",
@@ -114,21 +114,21 @@
"@types/jest": "26.0.23",
"@types/memoize-one": "4.1.1",
"@types/mkdirp": "1.0.1",
"@types/node": "12.11.1",
"@types/node-fetch": "2.5.7",
"@types/node": "15.0.3",
"@types/node-fetch": "2.5.10",
"@types/post-robot": "10.0.1",
"@types/promise.prototype.finally": "2.0.3",
"@types/promise.prototype.finally": "2.0.4",
"@types/q": "1.5.1",
"@types/react": "17.0.3",
"@types/react-dom": "17.0.3",
"@types/react": "17.0.5",
"@types/react-dom": "17.0.5",
"@types/react-notification-system": "0.2.39",
"@types/react-redux": "7.1.16",
"@types/sanitize-html": "1.27.2",
"@types/sanitize-html": "2.3.1",
"@types/sinon": "2.3.3",
"@types/styled-components": "5.1.9",
"@types/underscore": "1.7.36",
"@typescript-eslint/eslint-plugin": "4.22.1",
"@typescript-eslint/parser": "4.22.1",
"@types/underscore": "1.11.2",
"@typescript-eslint/eslint-plugin": "4.23.0",
"@typescript-eslint/parser": "4.23.0",
"@wojtekmaj/enzyme-adapter-react-17": "0.6.1",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
@@ -140,7 +140,7 @@
"css-loader": "1.0.0",
"enzyme": "3.11.0",
"enzyme-to-json": "3.6.2",
"eslint": "7.25.0",
"eslint": "7.26.0",
"eslint-cli": "1.1.1",
"eslint-plugin-no-null": "1.0.2",
"eslint-plugin-prefer-arrow": "1.2.3",
@@ -161,19 +161,19 @@
"less": "4.1.1",
"less-loader": "8.1.1",
"less-vars-loader": "1.1.0",
"mini-css-extract-plugin": "1.5.0",
"mini-css-extract-plugin": "1.6.0",
"monaco-editor-webpack-plugin": "1.7.0",
"node-fetch": "2.6.1",
"playwright": "1.10.0",
"prettier": "2.2.1",
"prettier": "2.3.0",
"process": "0.11.10",
"raw-loader": "4.0.2",
"react-dev-utils": "11.0.4",
"rimraf": "3.0.0",
"sinon": "3.2.1",
"style-loader": "2.0.0",
"terser-webpack-plugin": "5.1.1",
"ts-loader": "9.1.1",
"terser-webpack-plugin": "5.1.2",
"ts-loader": "9.1.2",
"tslint": "5.20.1",
"tslint-microsoft-contrib": "6.2.0",
"typescript": "4.2.4",

4
src/Common/MongoProxyClient.test.ts
View File

@@ -31,7 +31,7 @@ const collection = {
},
} as Collection;
const documentId = ({
const documentId = {
partitionKeyHeader: () => "[]",
self: "db/testDB/db/testCollection/docs/testId",
partitionKeyProperty,
@@ -40,7 +40,7 @@ const documentId = ({
kind: "Hash",
version: 1,
},
} as unknown) as DocumentId;
} as unknown as DocumentId;
const databaseAccount = {
id: "foo",

2
src/Common/MongoProxyClient.ts
View File

@@ -314,7 +314,7 @@ export function createMongoCollectionWithProxy(
return window
.fetch(
`${endpoint}/createCollection?${queryString.stringify(
(mongoParams as unknown) as queryString.ParsedUrlQueryInput
mongoParams as unknown as queryString.ParsedUrlQueryInput
)}`,
{
method: "POST",

2
src/Common/dataAccess/updateOffer.ts
View File

@@ -405,7 +405,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
const sdkResponse = await client()
.offer(params.currentOffer.id)
// TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
.replace((newOffer as unknown) as OfferDefinition, options);
.replace(newOffer as unknown as OfferDefinition, options);
return parseSDKOfferResponse(sdkResponse);
};

8
src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
View File

@@ -214,11 +214,9 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
}}
>
<div className="commandDropdown">
{this.props.children.map(
(c: CommandButtonComponentProps, index: number): JSX.Element => {
return CommandButtonComponent.renderButton(c, `${index}`);
}
)}
{this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
return CommandButtonComponent.renderButton(c, `${index}`);
})}
</div>
</div>
</div>

14
src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
View File

@@ -21,14 +21,12 @@ export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDi
key: DefaultDirectoryDropdownComponent.lastVisitedKey,
text: "Sign in to your last visited directory",
};
const directoryOptions: Array<IDropdownOption> = this.props.directories.map(
(dirc): IDropdownOption => {
return {
key: dirc.tenantId,
text: `${dirc.displayName}(${dirc.tenantId})`,
};
}
);
const directoryOptions: Array<IDropdownOption> = this.props.directories.map((dirc): IDropdownOption => {
return {
key: dirc.tenantId,
text: `${dirc.displayName}(${dirc.tenantId})`,
};
});
const dropDownOptions: Array<IDropdownOption> = [lastVisitedOption, ...directoryOptions];
const dropDownProps: IDropdownProps = {
label: "Set your default directory",

4
src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
View File

@@ -111,9 +111,7 @@ describe("NotebookTerminalComponent", () => {
const terminal: NotebookTerminalComponent = createTerminal();
const params: Map<string, string> = terminal.getTerminalParams();
expect(params).toEqual(
new Map<string, string>([["terminal", "true"]])
);
expect(params).toEqual(new Map<string, string>([["terminal", "true"]]));
});
it("getTerminalParams: Test for Mongo 3.2 terminal", () => {

3
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
View File

@@ -44,7 +44,8 @@ interface NotebookViewerComponentState {
export class NotebookViewerComponent
extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
implements DialogHost {
implements DialogHost
{
private clientManager: NotebookClientV2;
private notebookComponentBootstrapper: NotebookComponentBootstrapper;

4
src/Explorer/Controls/Settings/TestUtils.tsx
View File

@@ -5,7 +5,7 @@ import ko from "knockout";
export const container = new Explorer();
export const collection = ({
export const collection = {
container: container,
databaseId: "test",
id: ko.observable<string>("test"),
@@ -43,4 +43,4 @@ export const collection = ({
readSettings: () => {
return;
},
} as unknown) as ViewModels.Collection;
} as unknown as ViewModels.Collection;

13
src/Explorer/Explorer.tsx
View File

@@ -1067,9 +1067,9 @@ export default class Explorer {
}
public findSelectedCollection(): ViewModels.Collection {
return (this.selectedNode().nodeKind === "Collection"
? this.selectedNode()
: this.selectedNode().collection) as ViewModels.Collection;
return (
this.selectedNode().nodeKind === "Collection" ? this.selectedNode() : this.selectedNode().collection
) as ViewModels.Collection;
}
public closeAllPanes(): void {
@@ -1165,9 +1165,10 @@ export default class Explorer {
return true;
}
private getDeltaDatabases(
updatedDatabaseList: DataModels.Database[]
): { toAdd: ViewModels.Database[]; toDelete: ViewModels.Database[] } {
private getDeltaDatabases(updatedDatabaseList: DataModels.Database[]): {
toAdd: ViewModels.Database[];
toDelete: ViewModels.Database[];
} {
const newDatabases: DataModels.Database[] = _.filter(updatedDatabaseList, (database: DataModels.Database) => {
const databaseExists = _.some(
this.databases(),

8
src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
View File

@@ -206,11 +206,9 @@ describe("GraphExplorer", () => {
const gVRU = 123.456;
const disableMonacoEditor = (graphExplorer: GraphExplorer) => {
renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake(
(): JSX.Element => {
return <div>[Monaco Editor Stub]</div>;
}
);
renderResultAsJsonStub = sinon.stub(graphExplorer, "renderResultAsJson").callsFake((): JSX.Element => {
return <div>[Monaco Editor Stub]</div>;
});
};
interface AjaxResponse {

77
src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
View File

@@ -637,40 +637,38 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
promise = Q.resolve(0);
}
promise = promise.then(
(outEPairsNb: number): Q.Promise<number> => {
const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
let start: number;
if (offsetIndex <= vertex._outEdgeIds.length) {
start = 0;
} else {
start = offsetIndex - vertex._outEdgeIds.length;
}
return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
(pairs: EdgeVertexPair[]): number => {
vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
pairsToAdd.forEach((p: EdgeVertexPair) => {
GraphData.GraphData.addInE(vertex, p.e.label, p.e);
GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
graphData.addEdge(p.e);
vertex._inEdgeIds.push(p.e.id);
// Cache results (graphdata now contains a vertex with outE's filled in)
this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
});
addedEdgesNb += pairsToAdd.length;
return outEPairsNb + pairs.length;
}
);
promise = promise.then((outEPairsNb: number): Q.Promise<number> => {
const inEdgesToFetch = totalEdgesToFetch - outEPairsNb;
if (!vertex._inEAllLoaded && inEdgesToFetch > 0) {
let start: number;
if (offsetIndex <= vertex._outEdgeIds.length) {
start = 0;
} else {
return Q.resolve(outEPairsNb);
start = offsetIndex - vertex._outEdgeIds.length;
}
return this.fetchEdgeVertexPairs(false, vertex, start, inEdgesToFetch).then(
(pairs: EdgeVertexPair[]): number => {
vertex._inEAllLoaded = pairs.length < inEdgesToFetch;
const pairsToAdd = pairs.slice(0, GraphExplorer.LOAD_PAGE_SIZE - outEPairsNb);
pairsToAdd.forEach((p: EdgeVertexPair) => {
GraphData.GraphData.addInE(vertex, p.e.label, p.e);
GraphUtil.addRootChildToGraph(vertex, p.v, graphData);
graphData.addEdge(p.e);
vertex._inEdgeIds.push(p.e.id);
// Cache results (graphdata now contains a vertex with outE's filled in)
this.edgeInfoCache.addVertex(graphData.getVertexById(p.v.id));
});
addedEdgesNb += pairsToAdd.length;
return outEPairsNb + pairs.length;
}
);
} else {
return Q.resolve(outEPairsNb);
}
);
});
return promise.then((nbPairsFetched: number) => {
if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
@@ -1210,16 +1208,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
private getPossibleRootNodes(): LeftPane.CaptionId[] {
const key = this.props.graphConfigUiData.nodeCaptionChoice();
return $.map(
this.state.rootMap,
(value: any, index: number): LeftPane.CaptionId => {
let result = GraphData.GraphData.getNodePropValue(value, key);
return {
caption: result !== undefined ? result : value.id,
id: value.id,
};
}
);
return $.map(this.state.rootMap, (value: any, index: number): LeftPane.CaptionId => {
let result = GraphData.GraphData.getNodePropValue(value, key);
return {
caption: result !== undefined ? result : value.id,
id: value.id,
};
});
}
/**

240
src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
View File

@@ -94,236 +94,16 @@ describe("Gremlin Simple Client", () => {
result: { data: ["é"], meta: {} },
};
const expectedDecodedUint8ArrayValues = [
123,
34,
114,
101,
113,
117,
101,
115,
116,
73,
100,
34,
58,
34,
100,
55,
55,
50,
102,
56,
57,
55,
45,
48,
100,
52,
100,
45,
52,
99,
100,
49,
45,
98,
51,
54,
48,
45,
100,
100,
102,
54,
99,
56,
54,
98,
57,
51,
97,
51,
34,
44,
34,
115,
116,
97,
116,
117,
115,
34,
58,
123,
34,
99,
111,
100,
101,
34,
58,
50,
48,
48,
44,
34,
97,
116,
116,
114,
105,
98,
117,
116,
101,
115,
34,
58,
123,
34,
103,
114,
97,
112,
104,
69,
120,
101,
99,
117,
116,
105,
111,
110,
83,
116,
97,
116,
117,
115,
34,
58,
50,
48,
48,
44,
34,
83,
116,
111,
114,
97,
103,
101,
82,
85,
34,
58,
50,
46,
50,
57,
44,
34,
67,
111,
109,
112,
117,
116,
101,
82,
85,
34,
58,
49,
46,
48,
55,
44,
34,
80,
101,
114,
80,
97,
114,
116,
105,
116,
105,
111,
110,
67,
111,
109,
112,
117,
116,
101,
67,
104,
97,
114,
103,
101,
115,
34,
58,
123,
125,
125,
44,
34,
109,
101,
115,
115,
97,
103,
101,
34,
58,
34,
34,
125,
44,
34,
114,
101,
115,
117,
108,
116,
34,
58,
123,
34,
100,
97,
116,
97,
34,
58,
91,
34,
195,
169,
34,
93,
44,
34,
109,
101,
116,
97,
34,
58,
123,
125,
125,
125,
123, 34, 114, 101, 113, 117, 101, 115, 116, 73, 100, 34, 58, 34, 100, 55, 55, 50, 102, 56, 57, 55, 45, 48, 100,
52, 100, 45, 52, 99, 100, 49, 45, 98, 51, 54, 48, 45, 100, 100, 102, 54, 99, 56, 54, 98, 57, 51, 97, 51, 34, 44,
34, 115, 116, 97, 116, 117, 115, 34, 58, 123, 34, 99, 111, 100, 101, 34, 58, 50, 48, 48, 44, 34, 97, 116, 116,
114, 105, 98, 117, 116, 101, 115, 34, 58, 123, 34, 103, 114, 97, 112, 104, 69, 120, 101, 99, 117, 116, 105, 111,
110, 83, 116, 97, 116, 117, 115, 34, 58, 50, 48, 48, 44, 34, 83, 116, 111, 114, 97, 103, 101, 82, 85, 34, 58, 50,
46, 50, 57, 44, 34, 67, 111, 109, 112, 117, 116, 101, 82, 85, 34, 58, 49, 46, 48, 55, 44, 34, 80, 101, 114, 80,
97, 114, 116, 105, 116, 105, 111, 110, 67, 111, 109, 112, 117, 116, 101, 67, 104, 97, 114, 103, 101, 115, 34, 58,
123, 125, 125, 44, 34, 109, 101, 115, 115, 97, 103, 101, 34, 58, 34, 34, 125, 44, 34, 114, 101, 115, 117, 108,
116, 34, 58, 123, 34, 100, 97, 116, 97, 34, 58, 91, 34, 195, 169, 34, 93, 44, 34, 109, 101, 116, 97, 34, 58, 123,
125, 125, 125,
];
// We do our best here to emulate what the server should return
const gremlinResponseData = new Uint8Array(<any>expectedDecodedUint8ArrayValues).buffer;

270
src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
View File

@@ -27,154 +27,152 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
return btns
.filter((btn) => btn)
.map(
(btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
if (btn.isDivider) {
return createDivider(btn.commandButtonLabel);
}
.map((btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
if (btn.isDivider) {
return createDivider(btn.commandButtonLabel);
}
const isSplit = !!btn.children && btn.children.length > 0;
const label = btn.commandButtonLabel || btn.tooltipText;
const result: ICommandBarItemProps = {
iconProps: {
style: {
width: StyleConstants.CommandBarIconWidth, // 16
alignSelf: btn.iconName ? "baseline" : undefined,
},
imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
iconName: btn.iconName,
const isSplit = !!btn.children && btn.children.length > 0;
const label = btn.commandButtonLabel || btn.tooltipText;
const result: ICommandBarItemProps = {
iconProps: {
style: {
width: StyleConstants.CommandBarIconWidth, // 16
alignSelf: btn.iconName ? "baseline" : undefined,
},
onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
btn.onCommandClick(ev);
TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
iconName: btn.iconName,
},
onClick: (ev?: React.MouseEvent<HTMLElement, MouseEvent> | React.KeyboardEvent<HTMLElement>) => {
btn.onCommandClick(ev);
TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label });
},
key: `${btn.commandButtonLabel}${index}`,
text: label,
"data-test": label,
title: btn.tooltipText,
name: label,
disabled: btn.disabled,
ariaLabel: btn.ariaLabel,
buttonStyles: {
root: {
backgroundColor: backgroundColor,
height: buttonHeightPx,
paddingRight: 0,
paddingLeft: 0,
minWidth: 24,
marginLeft: isSplit ? 0 : 5,
marginRight: isSplit ? 0 : 5,
},
key: `${btn.commandButtonLabel}${index}`,
text: label,
"data-test": label,
title: btn.tooltipText,
name: label,
disabled: btn.disabled,
ariaLabel: btn.ariaLabel,
buttonStyles: {
root: {
backgroundColor: backgroundColor,
height: buttonHeightPx,
paddingRight: 0,
paddingLeft: 0,
minWidth: 24,
marginLeft: isSplit ? 0 : 5,
marginRight: isSplit ? 0 : 5,
rootDisabled: {
backgroundColor: backgroundColor,
pointerEvents: "auto",
},
splitButtonMenuButton: {
backgroundColor: backgroundColor,
selectors: {
":hover": { backgroundColor: StyleConstants.AccentLight },
},
rootDisabled: {
backgroundColor: backgroundColor,
pointerEvents: "auto",
width: 16,
},
label: { fontSize: StyleConstants.mediumFontSize },
rootHovered: { backgroundColor: StyleConstants.AccentLight },
rootPressed: { backgroundColor: StyleConstants.AccentLight },
splitButtonMenuButtonExpanded: {
backgroundColor: StyleConstants.AccentExtra,
selectors: {
":hover": { backgroundColor: StyleConstants.AccentLight },
},
splitButtonMenuButton: {
backgroundColor: backgroundColor,
},
splitButtonDivider: {
display: "none",
},
icon: {
paddingLeft: 0,
paddingRight: 0,
},
splitButtonContainer: {
marginLeft: 5,
marginRight: 5,
},
},
className: btn.className,
id: btn.id,
};
if (isSplit) {
// It's a split button
result.split = true;
result.subMenuProps = {
items: convertButton(btn.children, backgroundColor),
styles: {
list: {
// TODO Figure out how to do it the proper way with subComponentStyles.
// TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
selectors: {
":hover": { backgroundColor: StyleConstants.AccentLight },
},
width: 16,
},
label: { fontSize: StyleConstants.mediumFontSize },
rootHovered: { backgroundColor: StyleConstants.AccentLight },
rootPressed: { backgroundColor: StyleConstants.AccentLight },
splitButtonMenuButtonExpanded: {
backgroundColor: StyleConstants.AccentExtra,
selectors: {
":hover": { backgroundColor: StyleConstants.AccentLight },
".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
".ms-ContextualMenu-icon": { width: 16, height: 16 },
},
},
splitButtonDivider: {
display: "none",
},
icon: {
paddingLeft: 0,
paddingRight: 0,
},
splitButtonContainer: {
marginLeft: 5,
marginRight: 5,
},
},
className: btn.className,
id: btn.id,
};
if (isSplit) {
// It's a split button
result.split = true;
result.subMenuProps = {
items: convertButton(btn.children, backgroundColor),
styles: {
list: {
// TODO Figure out how to do it the proper way with subComponentStyles.
// TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
selectors: {
".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
".ms-ContextualMenu-link:hover": { backgroundColor: StyleConstants.AccentLight },
".ms-ContextualMenu-icon": { width: 16, height: 16 },
},
},
},
};
result.menuIconProps = {
iconType: IconType.image,
style: {
width: 12,
paddingLeft: 1,
paddingTop: 6,
},
imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
};
}
if (btn.isDropdown) {
const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
const dropdownStyles: Partial<IDropdownStyles> = {
root: { margin: 5 },
dropdown: { width: btn.dropdownWidth },
title: { fontSize: 12, height: 30, lineHeight: 28 },
dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
};
const onDropdownChange = (
event: React.FormEvent<HTMLDivElement>,
option?: IDropdownOption,
index?: number
): void => {
btn.children[index].onCommandClick(event);
TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
};
result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
return (
<Dropdown
placeholder={btn.dropdownPlaceholder}
defaultSelectedKey={btn.dropdownSelectedKey}
onChange={onDropdownChange}
options={btn.children.map((child: CommandButtonComponentProps) => ({
key: child.dropdownItemKey,
text: child.commandButtonLabel,
}))}
styles={dropdownStyles}
/>
);
};
}
if (btn.isArcadiaPicker && btn.arcadiaProps) {
result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
}
return result;
result.menuIconProps = {
iconType: IconType.image,
style: {
width: 12,
paddingLeft: 1,
paddingTop: 6,
},
imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
};
}
);
if (btn.isDropdown) {
const selectedChild = _.find(btn.children, (child) => child.dropdownItemKey === btn.dropdownSelectedKey);
result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
const dropdownStyles: Partial<IDropdownStyles> = {
root: { margin: 5 },
dropdown: { width: btn.dropdownWidth },
title: { fontSize: 12, height: 30, lineHeight: 28 },
dropdownItem: { fontSize: 12, lineHeight: 28, minHeight: 30 },
dropdownItemSelected: { fontSize: 12, lineHeight: 28, minHeight: 30 },
};
const onDropdownChange = (
event: React.FormEvent<HTMLDivElement>,
option?: IDropdownOption,
index?: number
): void => {
btn.children[index].onCommandClick(event);
TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label: option.text });
};
result.commandBarButtonAs = (props: IComponentAsProps<ICommandBarItemProps>) => {
return (
<Dropdown
placeholder={btn.dropdownPlaceholder}
defaultSelectedKey={btn.dropdownSelectedKey}
onChange={onDropdownChange}
options={btn.children.map((child: CommandButtonComponentProps) => ({
key: child.dropdownItemKey,
text: child.commandButtonLabel,
}))}
styles={dropdownStyles}
/>
);
};
}
if (btn.isArcadiaPicker && btn.arcadiaProps) {
result.commandBarButtonAs = () => <ArcadiaMenuPicker {...btn.arcadiaProps} />;
}
return result;
});
};
export const createDivider = (key: string): ICommandBarItemProps => {

12
src/Explorer/Menus/NavBar/ControlBarComponent.tsx
View File

@@ -14,13 +14,11 @@ export interface ControlBarComponentProps {
export class ControlBarComponent extends React.Component<ControlBarComponentProps> {
private static renderButtons(commandButtonOptions: CommandButtonComponentProps[]): JSX.Element[] {
return commandButtonOptions.map(
(btn: CommandButtonComponentProps, index: number): JSX.Element => {
// Remove label
btn.commandButtonLabel = undefined;
return CommandButtonComponent.renderButton(btn, `${index}`);
}
);
return commandButtonOptions.map((btn: CommandButtonComponentProps, index: number): JSX.Element => {
// Remove label
btn.commandButtonLabel = undefined;
return CommandButtonComponent.renderButton(btn, `${index}`);
});
}
public render(): JSX.Element {

10
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
View File

@@ -106,10 +106,12 @@ export class NotificationConsoleComponent extends React.Component<
const numInProgress = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.InProgress
).length;
const numErroredItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Error)
.length;
const numInfoItems = this.state.allConsoleData.filter((data: ConsoleData) => data.type === ConsoleDataType.Info)
.length;
const numErroredItems = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.Error
).length;
const numInfoItems = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.Info
).length;
return (
<div className="notificationConsoleContainer">

56
src/Explorer/Notebook/NotebookClientV2.ts
View File

@@ -192,36 +192,36 @@ export class NotebookClientV2 {
* is triggered for *any* state change).
* TODO: Use react-redux connect() to subscribe to state changes?
*/
const cacheKernelSpecsMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
dispatch,
getState,
}: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): A => {
switch (action.type) {
case actions.FETCH_KERNELSPECS_FULFILLED: {
const payload = ((action as unknown) as actions.FetchKernelspecsFulfilled).payload;
const defaultKernelName = payload.defaultKernelName;
this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
.filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
.map((spec) => ({
name: spec.name,
displayName: spec.displayName,
}))
.sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
// Put default at the top, otherwise lexicographically compare
if (a.displayName === defaultKernelName) {
return -1;
} else if (b.name === defaultKernelName) {
return 1;
} else {
return a.displayName.localeCompare(b.displayName);
}
});
break;
const cacheKernelSpecsMiddleware: Middleware =
<D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
(next: Dispatch<AnyAction>) =>
<A extends AnyAction>(action: A): A => {
switch (action.type) {
case actions.FETCH_KERNELSPECS_FULFILLED: {
const payload = (action as unknown as actions.FetchKernelspecsFulfilled).payload;
const defaultKernelName = payload.defaultKernelName;
this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
.filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
.map((spec) => ({
name: spec.name,
displayName: spec.displayName,
}))
.sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
// Put default at the top, otherwise lexicographically compare
if (a.displayName === defaultKernelName) {
return -1;
} else if (b.name === defaultKernelName) {
return 1;
} else {
return a.displayName.localeCompare(b.displayName);
}
});
break;
}
}
}
return next(action);
};
return next(action);
};
const traceErrorFct = (title: string, message: string) => {
TelemetryProcessor.traceFailure(Action.NotebookErrorNotification, {

20
src/Explorer/Notebook/NotebookComponent/store.ts
View File

@@ -21,16 +21,16 @@ export default function configureStore(
/**
* Catches errors in reducers
*/
const catchErrorMiddleware: Middleware = <D extends Dispatch<AnyAction>, S extends AppState>({
dispatch,
getState,
}: MiddlewareAPI<D, S>) => (next: Dispatch<AnyAction>) => <A extends AnyAction>(action: A): any => {
try {
next(action);
} catch (error) {
traceFailure("Reducer failure", error);
}
};
const catchErrorMiddleware: Middleware =
<D extends Dispatch<AnyAction>, S extends AppState>({ dispatch, getState }: MiddlewareAPI<D, S>) =>
(next: Dispatch<AnyAction>) =>
<A extends AnyAction>(action: A): any => {
try {
next(action);
} catch (error) {
traceFailure("Reducer failure", error);
}
};
const protect = (epic: Epic) => {
return (action$: Observable<any>, state$: any, dependencies: any) =>

11
src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
View File

@@ -52,15 +52,8 @@ export class KeyboardShortcuts extends React.Component<Props> {
return;
}
const {
executeFocusedCell,
focusNextCell,
focusNextCellEditor,
contentRef,
cellOrder,
focusedCell,
cellMap,
} = this.props;
const { executeFocusedCell, focusNextCell, focusNextCellEditor, contentRef, cellOrder, focusedCell, cellMap } =
this.props;
let ctrlKeyPressed = e.ctrlKey;
// Allow cmd + enter (macOS) to operate like ctrl + enter

1
src/Explorer/OpenFullScreen.test.tsx
View File

@@ -1,6 +1,7 @@
jest.mock("../hooks/useFullScreenURLs");
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import React from "react";
import { useFullScreenURLs } from "../hooks/useFullScreenURLs";
import { OpenFullScreen } from "./OpenFullScreen";

72
src/Explorer/Panes/AddCollectionPanel.tsx
View File

@@ -471,44 +471,42 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
</TooltipHost>
</Stack>
{this.state.uniqueKeys.map(
(uniqueKey: string, i: number): JSX.Element => {
return (
<Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
<input
type="text"
autoComplete="off"
placeholder={
userContext.apiType === "Mongo"
? "Comma separated paths e.g. firstName,address.zipCode"
: "Comma separated paths e.g. /firstName,/address/zipCode"
}
className="panelTextField"
autoFocus
value={uniqueKey}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
if (i === j) {
return event.target.value;
}
return uniqueKey;
});
this.setState({ uniqueKeys });
}}
/>
{this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
return (
<Stack style={{ marginBottom: 8 }} key={`uniqueKey${i}`} horizontal>
<input
type="text"
autoComplete="off"
placeholder={
userContext.apiType === "Mongo"
? "Comma separated paths e.g. firstName,address.zipCode"
: "Comma separated paths e.g. /firstName,/address/zipCode"
}
className="panelTextField"
autoFocus
value={uniqueKey}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
if (i === j) {
return event.target.value;
}
return uniqueKey;
});
this.setState({ uniqueKeys });
}}
/>
<IconButton
iconProps={{ iconName: "Delete" }}
style={{ height: 27 }}
onClick={() => {
const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
this.setState({ uniqueKeys });
}}
/>
</Stack>
);
}
)}
<IconButton
iconProps={{ iconName: "Delete" }}
style={{ height: 27 }}
onClick={() => {
const uniqueKeys = this.state.uniqueKeys.filter((uniqueKey, j) => i !== j);
this.setState({ uniqueKeys });
}}
/>
</Stack>
);
})}
<ActionButton
iconProps={{ iconName: "Add" }}

6
src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
View File

@@ -67,10 +67,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
const [selectedRow, setSelectedRow] = useState<number>(0);
const [entityAttributeValue, setEntityAttributeValue] = useState<string>("");
const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
const [
isEntityValuePanelOpen,
{ setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
] = useBoolean(false);
const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
useBoolean(false);
/* Get default and previous saved entity headers */
useEffect(() => {

8
src/Explorer/Panes/Tables/EditTableEntityPanel.tsx
View File

@@ -67,10 +67,8 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
const [originalDocument, setOriginalDocument] = useState<Entities.ITableEntity>({});
const [entityAttributeProperty, setEntityAttributeProperty] = useState<string>("");
const [
isEntityValuePanelOpen,
{ setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse },
] = useBoolean(false);
const [isEntityValuePanelOpen, { setTrue: setIsEntityValuePanelTrue, setFalse: setIsEntityValuePanelFalse }] =
useBoolean(false);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -111,7 +109,7 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
const nonEditableType: boolean =
entityAttributeType === TableConstants.CassandraType.Blob ||
entityAttributeType === TableConstants.CassandraType.Inet;
const isDisable = !_.contains<string>(cassandraKeys, key) && !nonEditableType;
const isDisable = !_.contains<string>(cassandraKeys[0], key) && !nonEditableType;
const time =
entityAttributeType === TableConstants.TableType.DateTime ? getFormattedTime(displayValue) : "";
displayedAttributes.push({

17
src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx
View File

@@ -19,21 +19,8 @@ export const options = [
{ key: Int64, text: Int64 },
];
const {
Text,
Ascii,
Bigint,
Blob,
Decimal,
Float,
Int,
Uuid,
Varchar,
Varint,
Inet,
Smallint,
Tinyint,
} = TableConstants.CassandraType;
const { Text, Ascii, Bigint, Blob, Decimal, Float, Int, Uuid, Varchar, Varint, Inet, Smallint, Tinyint } =
TableConstants.CassandraType;
export const cassandraOptions = [
{ key: Text, text: Text },
{ key: Ascii, text: Ascii },

5
src/Explorer/Tables/DataTable/DataTableBindingManager.ts
View File

@@ -277,8 +277,9 @@ function updateTableScrollableRegionWidth(): void {
}
var bodyWidth = $(window).width();
var dataTablesScrollBodyPosLeft = $(tabElement).find(Constants.htmlSelectors.dataTableScrollBodySelector).offset()
.left;
var dataTablesScrollBodyPosLeft = $(tabElement)
.find(Constants.htmlSelectors.dataTableScrollBodySelector)
.offset().left;
var scrollWidth = bodyWidth - dataTablesScrollBodyPosLeft;
// jquery datatables automatically sets width:100% to both the header and the body when we use it's column autoWidth feature.

4
src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
View File

@@ -172,8 +172,8 @@ export default class QueryClauseViewModel {
} else {
this.resetFromTimestamp();
if (userContext.apiType === "Cassandra") {
const cassandraSchema = this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection
.cassandraSchema;
const cassandraSchema =
this._queryBuilderViewModel.tableEntityListViewModel.queryTablesTab.collection.cassandraSchema;
for (let i = 0, len = cassandraSchema.length; i < len; i++) {
if (cassandraSchema[i].property === this.field()) {
this.type(cassandraSchema[i].type);

7
src/Explorer/Tree/Database.ts
View File

@@ -259,9 +259,10 @@ export default class Database implements ViewModels.Database {
}
}
private getDeltaCollections(
updatedCollectionsList: DataModels.Collection[]
): { toAdd: DataModels.Collection[]; toDelete: Collection[] } {
private getDeltaCollections(updatedCollectionsList: DataModels.Collection[]): {
toAdd: DataModels.Collection[];
toDelete: Collection[];
} {
const collectionsToAdd: DataModels.Collection[] = _.filter(
updatedCollectionsList,
(collection: DataModels.Collection) => {

20
src/Explorer/Tree/ResourceTreeAdapter.test.ts
View File

@@ -6,7 +6,7 @@ import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
describe("ResourceTreeAdapter", () => {
const mockContainer = (): Explorer =>
(({
({
selectedNode: ko.observable<ViewModels.TreeNode>({
nodeKind: "nodeKind",
rid: "rid",
@@ -19,7 +19,7 @@ describe("ResourceTreeAdapter", () => {
},
isNotebookEnabled: ko.observable<boolean>(true),
databases: ko.observable<ViewModels.Database[]>([]),
} as unknown) as Explorer);
} as unknown as Explorer);
// TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
describe("isDataNodeSelected", () => {
@@ -48,12 +48,12 @@ describe("ResourceTreeAdapter", () => {
it("should select if correct database node regardless of subnodekinds", () => {
const subNodeKind = ViewModels.CollectionTabKind.Documents;
const explorer = mockContainer();
explorer.selectedNode(({
explorer.selectedNode({
nodeKind: "Database",
rid: "dbrid",
id: ko.observable<string>("dbid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
} as unknown) as ViewModels.TreeNode);
} as unknown as ViewModels.TreeNode);
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", undefined, [
ViewModels.CollectionTabKind.Documents,
@@ -67,13 +67,13 @@ describe("ResourceTreeAdapter", () => {
explorer.tabsManager.activeTab({
tabKind: subNodeKind,
} as TabsBase);
explorer.selectedNode(({
explorer.selectedNode({
nodeKind: "Collection",
rid: "collrid",
databaseId: "dbid",
id: ko.observable<string>("collid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
} as unknown) as ViewModels.TreeNode);
} as unknown as ViewModels.TreeNode);
const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
expect(isDataNodeSelected).toBeTruthy();
@@ -82,26 +82,26 @@ describe("ResourceTreeAdapter", () => {
explorer.tabsManager.activeTab({
tabKind: subNodeKind,
} as TabsBase);
explorer.selectedNode(({
explorer.selectedNode({
nodeKind: "Collection",
rid: "collrid",
databaseId: "dbid",
id: ko.observable<string>("collid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
} as unknown) as ViewModels.TreeNode);
} as unknown as ViewModels.TreeNode);
isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
expect(isDataNodeSelected).toBeTruthy();
});
it("should not select incorrect collection node (e.g. Settings)", () => {
const explorer = mockContainer();
explorer.selectedNode(({
explorer.selectedNode({
nodeKind: "Collection",
rid: "collrid",
databaseId: "dbid",
id: ko.observable<string>("collid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(ViewModels.CollectionTabKind.Documents),
} as unknown) as ViewModels.TreeNode);
} as unknown as ViewModels.TreeNode);
explorer.tabsManager.activeTab({
tabKind: ViewModels.CollectionTabKind.Documents,
} as TabsBase);

4
src/Utils/GalleryUtils.ts
View File

@@ -475,9 +475,7 @@ export function getTabTitle(tab: GalleryTab): string {
}
}
export function filterPublishedNotebooks(
items: IGalleryItem[]
): {
export function filterPublishedNotebooks(items: IGalleryItem[]): {
published: IGalleryItem[];
underReview: IGalleryItem[];
removed: IGalleryItem[];

2
src/Utils/arm/request.test.ts
View File

@@ -7,7 +7,7 @@ interface Global {
Headers: unknown;
}
((global as unknown) as Global).Headers = ((fetch as unknown) as Global).Headers;
(global as unknown as Global).Headers = (fetch as unknown as Global).Headers;
describe("ARM request", () => {
updateUserContext({

2
src/hooks/useKnockoutExplorer.ts
View File

@@ -65,7 +65,7 @@ export function useKnockoutExplorer(platform: Platform, explorerParams: Explorer
}
async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer> {
const win = (window as unknown) as HostedExplorerChildFrame;
const win = window as unknown as HostedExplorerChildFrame;
if (win.hostedConfig.authType === AuthType.EncryptedToken) {
return configureHostedWithEncryptedToken(win.hostedConfig, explorerParams);
} else if (win.hostedConfig.authType === AuthType.ResourceToken) {