random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate remaining notification console methods to zustand (#873)

This commit is contained in:
Steve Faulkner 2021-06-09 13:11:12 -07:00 committed by GitHub
parent fc9f4c5583
commit bcc9f8dd32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 96 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Contracts/ViewModels.ts
View File

@ -6,7 +6,7 @@ import {
UserDefinedFunctionDefinition,
} from "@azure/cosmos";
import Explorer from "../Explorer/Explorer";
import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
import ConflictId from "../Explorer/Tree/ConflictId";
import DocumentId from "../Explorer/Tree/DocumentId";

8
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@ -71,8 +71,6 @@ exports[`SettingsComponent renders 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],
@ -142,8 +140,6 @@ exports[`SettingsComponent renders 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],
@ -226,8 +222,6 @@ exports[`SettingsComponent renders 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],
@ -297,8 +291,6 @@ exports[`SettingsComponent renders 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],

17
src/Explorer/Explorer.tsx
View File

@ -41,7 +41,6 @@ import * as ComponentRegisterer from "./ComponentRegisterer";
import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
import * as FileSystemUtil from "./Notebook/FileSystemUtil";
import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
@ -83,8 +82,6 @@ BindingHandlersRegisterer.registerBindingHandlers();
var tmp = ComponentRegisterer;
export interface ExplorerParams {
setNotificationConsoleData: (consoleData: ConsoleData) => void;
setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
tabsManager: TabsManager;
}
@ -96,9 +93,6 @@ export default class Explorer {
public queriesClient: QueriesClient;
public tableDataClient: TableDataClient;
private setNotificationConsoleData: (consoleData: ConsoleData) => void;
private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
// Resource Tree
public databases: ko.ObservableArray<ViewModels.Database>;
public selectedDatabaseId: ko.Computed<string>;
@ -145,9 +139,6 @@ export default class Explorer {
private static readonly MaxNbDatabasesToAutoExpand = 5;
constructor(params?: ExplorerParams) {
this.setNotificationConsoleData = params?.setNotificationConsoleData;
this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
@ -444,14 +435,6 @@ export default class Explorer {
return this.selectedNode() == null;
}
public logConsoleData(consoleData: ConsoleData): void {
this.setNotificationConsoleData(consoleData);
}
public deleteInProgressConsoleDataWithId(id: string): void {
this.setInProgressConsoleDataIdToBeDeleted(id);
}
public refreshDatabaseForResourceToken(): Q.Promise<any> {
const databaseId = this.resourceTokenDatabaseId();
const collectionId = this.resourceTokenCollectionId();

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

@ -10,7 +10,7 @@ import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPag
import * as DataModels from "../../../Contracts/DataModels";
import * as StorageUtility from "../../../Shared/StorageUtility";
import { TabComponent } from "../../Controls/Tabs/TabComponent";
import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
import GraphTab from "../../Tabs/GraphTab";
import * as D3ForceGraph from "./D3ForceGraph";
import { GraphData } from "./GraphData";

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

@ -18,7 +18,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Ut
import { EditorReact } from "../../Controls/Editor/EditorReact";
import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
import * as TabComponent from "../../Controls/Tabs/TabComponent";
import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
import { IGraphConfig } from "../../Tabs/GraphTab";
import { ArraysByKeyCache } from "./ArraysByKeyCache";
import * as D3ForceGraph from "./D3ForceGraph";

31
src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
View File

@ -5,21 +5,26 @@
*/
import * as React from "react";
import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
import * as ViewModels from "../../../Contracts/ViewModels";
import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
import * as EditorNeighbors from "./EditorNeighborsComponent";
import EditIcon from "../../../../images/edit.svg";
import DeleteIcon from "../../../../images/delete.svg";
import CheckIcon from "../../../../images/check.svg";
import CancelIcon from "../../../../images/cancel.svg";
import { GraphExplorer } from "./GraphExplorer";
import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
import CheckIcon from "../../../../images/check.svg";
import DeleteIcon from "../../../../images/delete.svg";
import EditIcon from "../../../../images/edit.svg";
import * as ViewModels from "../../../Contracts/ViewModels";
import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
import * as EditorNeighbors from "./EditorNeighborsComponent";
import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
import {
EditedEdges,
EditedProperties,
GraphExplorer,
GraphHighlightedNodeData,
PossibleVertex,
} from "./GraphExplorer";
import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
export enum Mode {
READONLY_PROP,

16
src/Explorer/Menus/NotificationConsole/ConsoleData.tsx Normal file
View File

@ -0,0 +1,16 @@
/**
* Interface for the data/content that will be recorded
*/
export interface ConsoleData {
type: ConsoleDataType;
date: string;
message: string;
id?: string;
}
export enum ConsoleDataType {
Info = 0,
Error = 1,
InProgress = 2,
}

7
src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
View File

@ -1,10 +1,7 @@
import { shallow } from "enzyme";
import React from "react";
import {
ConsoleDataType,
NotificationConsoleComponent,
NotificationConsoleComponentProps,
} from "./NotificationConsoleComponent";
import { ConsoleDataType } from "./ConsoleData";
import { NotificationConsoleComponent, NotificationConsoleComponentProps } from "./NotificationConsoleComponent";
describe("NotificationConsoleComponent", () => {
const createBlankProps = (): NotificationConsoleComponentProps => {

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

@ -17,25 +17,7 @@ import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x
import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
import { userContext } from "../../../UserContext";
/**
* Log levels
*/
export enum ConsoleDataType {
Info = 0,
Error = 1,
InProgress = 2,
}
/**
* Interface for the data/content that will be recorded
*/
export interface ConsoleData {
type: ConsoleDataType;
date: string;
message: string;
id?: string;
}
import { ConsoleData, ConsoleDataType } from "./ConsoleData";
export interface NotificationConsoleComponentProps {
isConsoleExpanded: boolean;
@ -323,14 +305,13 @@ const PrPreview = (props: { pr: string }) => {
);
};
export const NotificationConsole: React.FC<
Pick<NotificationConsoleComponentProps, "consoleData" | "inProgressConsoleDataIdToBeDeleted">
> = ({
consoleData,
inProgressConsoleDataIdToBeDeleted,
}: Pick<NotificationConsoleComponentProps, "consoleData" | "inProgressConsoleDataIdToBeDeleted">) => {
export const NotificationConsole: React.FC = () => {
const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
const isExpanded = useNotificationConsole((state) => state.isExpanded);
const consoleData = useNotificationConsole((state) => state.consoleData);
const inProgressConsoleDataIdToBeDeleted = useNotificationConsole(
(state) => state.inProgressConsoleDataIdToBeDeleted
);
// TODO Refactor NotificationConsoleComponent into a functional component and remove this wrapper
// This component only exists so we can use hooks and pass them down to a non-functional component
return (

26
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@ -43,7 +43,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-102"
className="css-53"
>
Confirm by typing the
container
@ -347,18 +347,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField root-104"
className="ms-TextField root-55"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-105"
className="ms-TextField-fieldGroup fieldGroup-56"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-106"
className="ms-TextField-field field-57"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@ -381,7 +381,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-115"
className="css-66"
>
Help us improve Azure Cosmos DB!
</span>
@ -391,7 +391,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-115"
className="css-66"
>
What is the reason why you are deleting this
container
@ -697,17 +697,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField ms-TextField--multiline root-104"
className="ms-TextField ms-TextField--multiline root-55"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-116"
className="ms-TextField-fieldGroup fieldGroup-67"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-117"
className="ms-TextField-field field-68"
id="deleteCollectionFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@ -2434,7 +2434,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<button
aria-label="OK"
className="ms-Button ms-Button--primary root-119"
className="ms-Button ms-Button--primary root-70"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@ -2446,14 +2446,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-120"
className="ms-Button-flexContainer flexContainer-71"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-121"
className="ms-Button-textContainer textContainer-72"
>
<span
className="ms-Button-label label-123"
className="ms-Button-label label-74"
id="id__6"
key="id__6"
>

2
src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
View File

@ -60,8 +60,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],

2
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@ -50,8 +50,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],

34
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@ -52,8 +52,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
},
"selectedDatabaseId": [Function],
"selectedNode": [Function],
"setInProgressConsoleDataIdToBeDeleted": undefined,
"setNotificationConsoleData": undefined,
"sparkClusterConnectionInfo": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],
@ -90,7 +88,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
verticalAlign="center"
>
<div
className="ms-Stack panelInfoErrorContainer css-102"
className="ms-Stack panelInfoErrorContainer css-53"
>
<StyledIconBase
aria-label="warning"
@ -379,7 +377,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<i
aria-label="warning"
className="panelWarningIcon root-104"
className="panelWarningIcon root-55"
data-icon-name="WarningSolid"
role="img"
>
@ -398,7 +396,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<span
aria-label="message"
className="panelWarningErrorMessage css-105"
className="panelWarningErrorMessage css-56"
>
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span>
@ -422,7 +420,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-105"
className="css-56"
>
Confirm by typing the database id
</span>
@ -722,18 +720,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField root-107"
className="ms-TextField root-58"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-108"
className="ms-TextField-fieldGroup fieldGroup-59"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-109"
className="ms-TextField-field field-60"
id="confirmDatabaseId"
onBlur={[Function]}
onChange={[Function]}
@ -756,7 +754,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-126"
className="css-77"
>
Help us improve Azure Cosmos DB!
</span>
@ -766,7 +764,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-126"
className="css-77"
>
What is the reason why you are deleting this database?
</span>
@ -1068,17 +1066,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-107"
className="ms-TextField ms-TextField--multiline root-58"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-127"
className="ms-TextField-fieldGroup fieldGroup-78"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-128"
className="ms-TextField-field field-79"
id="deleteDatabaseFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@ -2804,7 +2802,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<button
aria-label="OK"
className="ms-Button ms-Button--primary root-118"
className="ms-Button ms-Button--primary root-69"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@ -2816,14 +2814,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-119"
className="ms-Button-flexContainer flexContainer-70"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-120"
className="ms-Button-textContainer textContainer-71"
>
<span
className="ms-Button-label label-122"
className="ms-Button-label label-73"
id="id__3"
key="id__3"
>

3
src/GitHub/GitHubOAuthService.test.ts
View File

@ -1,6 +1,5 @@
import { HttpStatusCodes } from "../Common/Constants";
import Explorer from "../Explorer/Explorer";
import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
import NotebookManager from "../Explorer/Notebook/NotebookManager";
import { JunoClient } from "../Juno/JunoClient";
import { IGitHubConnectorParams } from "./GitHubConnector";
@ -17,8 +16,6 @@ describe("GitHubOAuthService", () => {
originalDataExplorer = window.dataExplorer;
window.dataExplorer = {
...originalDataExplorer,
logConsoleData: (data): void =>
data.type === ConsoleDataType.Error ? console.error(data.message) : console.error(data.message),
} as Explorer;
window.dataExplorer.notebookManager = new NotebookManager();
window.dataExplorer.notebookManager.junoClient = junoClient;

11
src/Main.tsx
View File

@ -56,16 +56,10 @@ import "./Shared/appInsights";
initializeIcons();
const App: React.FunctionComponent = () => {
const [notificationConsoleData, setNotificationConsoleData] = useState(undefined);
//TODO: Refactor so we don't need to pass the id to remove a console data
const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
const { tabs, activeTab, tabsManager } = useTabs();
const explorerParams: ExplorerParams = {
setNotificationConsoleData,
setInProgressConsoleDataIdToBeDeleted,
tabsManager,
};
@ -117,10 +111,7 @@ const App: React.FunctionComponent = () => {
aria-label="Notification console"
id="explorerNotificationConsole"
>
<NotificationConsole
consoleData={notificationConsoleData}
inProgressConsoleDataIdToBeDeleted={inProgressConsoleDataIdToBeDeleted}
/>
<NotificationConsole />
</div>
</div>
<SidePanel />

26
src/Utils/NotificationConsoleUtils.ts
View File

@ -1,23 +1,17 @@
import * as _ from "underscore";
import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
const _global = typeof self === "undefined" ? window : self;
import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/ConsoleData";
import { useNotificationConsole } from "../hooks/useNotificationConsole";
function log(type: ConsoleDataType, message: string): () => void {
const dataExplorer = _global.dataExplorer;
if (dataExplorer) {
const id = _.uniqueId();
const date = new Intl.DateTimeFormat("en-EN", {
hour12: true,
hour: "numeric",
minute: "numeric",
}).format(new Date());
const id = _.uniqueId();
const date = new Intl.DateTimeFormat("en-EN", {
hour12: true,
hour: "numeric",
minute: "numeric",
}).format(new Date());
dataExplorer.logConsoleData({ type, date, message, id });
return () => dataExplorer.deleteInProgressConsoleDataWithId(id);
}
return () => undefined;
useNotificationConsole.getState().setNotificationConsoleData({ type, date, message, id });
return () => useNotificationConsole.getState().setInProgressConsoleDataIdToBeDeleted(id);
}
export const logConsoleProgress = (msg: string): (() => void) => log(ConsoleDataType.InProgress, msg);

11
src/hooks/useNotificationConsole.ts
View File

@ -1,14 +1,25 @@
import create, { UseStore } from "zustand";
import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
export interface NotificationConsoleState {
isExpanded: boolean;
inProgressConsoleDataIdToBeDeleted: string;
consoleData: ConsoleData | undefined;
expandConsole: () => void;
// TODO Remove this method. Add a `closeConsole` method instead
setIsExpanded: (isExpanded: boolean) => void;
// TODO These two methods badly need a refactor. Not very react friendly.
setNotificationConsoleData: (consoleData: ConsoleData) => void;
setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
}
export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
isExpanded: false,
consoleData: undefined,
inProgressConsoleDataIdToBeDeleted: "",
expandConsole: () => set((state) => ({ ...state, isExpanded: true })),
setIsExpanded: (isExpanded) => set((state) => ({ ...state, isExpanded })),
setNotificationConsoleData: (consoleData: ConsoleData) => set((state) => ({ ...state, consoleData })),
setInProgressConsoleDataIdToBeDeleted: (id: string) =>
set((state) => ({ ...state, inProgressConsoleDataIdToBeDeleted: id })),
}));