random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-19 18:56:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate Index page to React (#952)

Browse Source
This commit is contained in:
vaidankarswapnil 2021-07-22 20:49:17 +05:30 committed by GitHub
parent 401660ae15
commit e443d17b2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Index.ts
View File

@ -1,23 +0,0 @@
import "../less/index.less";
import "./Libs/jquery";
import * as ko from "knockout";
class Index {
public navigationSelection: ko.Observable<string>;
constructor() {
this.navigationSelection = ko.observable("quickstart");
}
public quickstart_click() {
this.navigationSelection("quickstart");
}
public explorer_click() {
this.navigationSelection("explorer");
}
}
var index = new Index();
ko.applyBindings(index);

66
src/Index.tsx Normal file
View File

@ -0,0 +1,66 @@
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Arrow from "../images/Arrow.svg";
import CosmosDB_20170829 from "../images/CosmosDB_20170829.svg";
import Explorer from "../images/Explorer.svg";
import Feedback from "../images/Feedback.svg";
import Quickstart from "../images/Quickstart.svg";
import "../less/index.less";
const Index = (): JSX.Element => {
const [navigationSelection, setNavigationSelection] = useState("quickstart");
const quickstart_click = () => {
setNavigationSelection("quickstart");
};
const explorer_click = () => {
setNavigationSelection("explorer");
};
return (
<React.Fragment>
<header className="header HeaderBg">
<div className="items">
<img className="DocDBicon" src={CosmosDB_20170829} alt="Azure Cosmos DB" />
<a className="createdocdbacnt" href="https://aka.ms/documentdbcreate" rel="noreferrer" target="_blank">
Create an Azure Cosmos DB account <img className="rightarrowimg" src={Arrow} alt="" />
</a>
<span className="title">Azure Cosmos DB Emulator</span>
</div>
</header>
<nav className="fixedleftpane">
<div
id="Quickstart"
onClick={quickstart_click}
className={navigationSelection === "quickstart" ? "topSelected" : ""}
>
<img id="imgiconwidth1" src={Quickstart} alt="Open Quick Start" />
<span className="menuQuickStart">Quickstart</span>
</div>
<div id="Explorer" onClick={explorer_click} className={navigationSelection === "explorer" ? "topSelected" : ""}>
<img id="imgiconwidth1" src={Explorer} alt="Open Data Explorer" />
<span className="menuExplorer">Explorer</span>
</div>
<div>
<a className="feedbackstyle" href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Emulator%20Feedback">
<img id="imgiconwidth1" src={Feedback} alt="Report Issue" />
<span className="menuExplorer">Report Issue</span>
</a>
</div>
</nav>
{navigationSelection === "quickstart" && (
<iframe name="quickstart" className="iframe" src="quickstart.html"></iframe>
)}
{navigationSelection === "explorer" && (
<iframe name="explorer" className="iframe" src="explorer.html?platform=Emulator"></iframe>
)}
</React.Fragment>
);
};
ReactDOM.render(<Index />, document.getElementById("root"));

49
src/index.html
View File

@ -8,54 +8,7 @@
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head> </head>
<body> <body>
<header class="header HeaderBg"> <div id="root"></div>
<div class="items">
<img class="DocDBicon" src="/CosmosDB_20170829.svg" alt="Azure Cosmos DB" />
<a class="createdocdbacnt" href="https://aka.ms/documentdbcreate" target="_blank">
Create an Azure Cosmos DB account <img class="rightarrowimg" src="/Arrow.svg" alt="" />
</a>
<span class="title">Azure Cosmos DB Emulator</span>
</div>
</header>
<nav class="fixedleftpane">
<div
id="Quickstart"
data-bind="click: quickstart_click, css:{ topSelected: navigationSelection() === 'quickstart' }"
>
<img id="imgiconwidth1" src="/Quickstart.svg" alt="Open Quick Start" />
<span class="menuQuickStart">Quickstart</span>
</div>
<div id="Explorer" data-bind="click: explorer_click, css:{ topSelected: navigationSelection() === 'explorer' }">
<img id="imgiconwidth1" src="/Explorer.svg" alt="Open Data Explorer" />
<span class="menuExplorer">Explorer</span>
</div>
<div>
<a class="feedbackstyle" href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Emulator%20Feedback">
<img id="imgiconwidth1" src="/Feedback.svg" alt="Report Issue" />
<span class="menuExplorer">Report Issue</span>
</a>
</div>
</nav>
<iframe
name="quickstart"
class="iframe"
src="quickstart.html"
data-bind="visible: navigationSelection() === 'quickstart'"
>
</iframe>
<iframe
name="explorer"
class="iframe"
src="explorer.html?platform=Emulator"
data-bind="visible: navigationSelection() === 'explorer'"
>
</iframe>
</body> </body>
</html> </html>

1
tsconfig.strict.json
View File

@ -83,7 +83,6 @@
"./src/Explorer/Tree/AccessibleVerticalList.ts", "./src/Explorer/Tree/AccessibleVerticalList.ts",
"./src/GitHub/GitHubConnector.ts", "./src/GitHub/GitHubConnector.ts",
"./src/HostedExplorerChildFrame.ts", "./src/HostedExplorerChildFrame.ts",
"./src/Index.ts",
"./src/Platform/Hosted/Authorization.ts", "./src/Platform/Hosted/Authorization.ts",
"./src/Platform/Hosted/Components/MeControl.test.tsx", "./src/Platform/Hosted/Components/MeControl.test.tsx",
"./src/Platform/Hosted/Components/MeControl.tsx", "./src/Platform/Hosted/Components/MeControl.tsx",

2
webpack.config.js
View File

@ -198,7 +198,7 @@ module.exports = function (_env = {}, argv = {}) {
mode: mode, mode: mode,
entry: { entry: {
main: "./src/Main.tsx", main: "./src/Main.tsx",
index: "./src/Index.ts", index: "./src/Index.tsx",
quickstart: "./src/quickstart.ts", quickstart: "./src/quickstart.ts",
hostedExplorer: "./src/HostedExplorer.tsx", hostedExplorer: "./src/HostedExplorer.tsx",
testExplorer: "./test/testExplorer/TestExplorer.ts", testExplorer: "./test/testExplorer/TestExplorer.ts",