-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
webui: Migrate profile page to React
Besides migrating this page to React this also updates the common code for getting a list of the live databases of a user easier to use. Also the information shown in the profile and in the user pages is more similar. The same is true for the information on standard and on live databases. This also means that download and view count for public databases are now also visible to other users. Please note though that this is *not* a change in the permissions as this information has been sent to the client before too - it just was not shown in the frontend. Additionally this removes the "live" label from shared live databases and removed the "beta testing" label from them as well. The idea here is to a) not put too much effort into the profile page because it should probably be redesigned anyway and b) start working towards making live and standard databases more similar. Finally this commit removes the "Expand/Collapse" buttons and replaces them by individual toggle buttons for each database.
- Loading branch information
1 parent
938c738
commit 5c78e52
Showing
11 changed files
with
243 additions
and
476 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| const React = require("react"); | ||
| const ReactDOM = require("react-dom"); | ||
|
|
||
| import {DatabasePanelGroup} from "./user-page"; | ||
|
|
||
| function WatchPanel({data, dateText}) { | ||
| const [isExpanded, setExpanded] = React.useState(false); | ||
|
|
||
| return ( | ||
| <div className="panel panel-default"> | ||
| <div className="panel-heading"> | ||
| <h3 className="panel-title"> | ||
| <a className="blackLink" href={"/" + data.Owner}>{data.Owner}</a> / <a className="blackLink" href={"/" + data.Owner + "/" + data.DBName}>{data.DBName}</a> | ||
| <span className="pull-right"> | ||
| <a href="#/" className="blackLink" onClick={() => setExpanded(!isExpanded)}><i className={isExpanded ? "fa fa-minus" : "fa fa-plus"}></i></a> | ||
| </span> | ||
| </h3> | ||
| </div> | ||
| {isExpanded ? (<> | ||
| <div className="panel-body"> | ||
| <p> | ||
| <strong>{dateText}: </strong><span className="text-info" title={new Date(data.DateEntry).toLocaleString()}>{getTimePeriod(data.DateEntry, false)}</span> | ||
| </p> | ||
| </div> | ||
| </>) : null} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function WatchPanelGroup({title, noDatabasesMessage, databases, dateText}) { | ||
| const databaseRows = databases === null ? null : databases.map(d => WatchPanel({data: d, dateText: dateText})); | ||
|
|
||
| return (<> | ||
| <h3>{title}</h3> | ||
| {databaseRows ? databaseRows : (<h4><em>{noDatabasesMessage}</em></h4>)} | ||
| </>); | ||
| } | ||
|
|
||
| function SharedWithYouPanel({data}) { | ||
| return ( | ||
| <div className="panel panel-default"> | ||
| <div className="panel-heading"> | ||
| <h3 className="panel-title"> | ||
| <a className="blackLink" href={"/" + data.owner_name + "/" + data.database_name}>{data.owner_name} / {data.database_name}</a>: {data.permission === "rw" ? "Read Write" : "Read Only"} | ||
| </h3> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SharedWithYouPanelGroup({databases}) { | ||
| const databaseRows = databases === null ? null : databases.map(d => SharedWithYouPanel({data: d})); | ||
|
|
||
| return (<> | ||
| <h3>Databases shared with you</h3> | ||
| {databaseRows ? databaseRows : (<h4><em>No databases shared with you yet</em></h4>)} | ||
| </>); | ||
| } | ||
|
|
||
| function SharedWithOthersPanel({data}) { | ||
| const [isExpanded, setExpanded] = React.useState(false); | ||
|
|
||
| let permissionRows = []; | ||
| for (const [user, perm] of Object.entries(data.user_permissions)) { | ||
| permissionRows.push(<tr><td><a href={"/" + user} className="blackLink">{user}</a></td><td>{perm === "rw" ? "Read Write" : "Read Only"}</td></tr>); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="panel panel-default"> | ||
| <div className="panel-heading"> | ||
| <h3 className="panel-title"> | ||
| <a className="blackLink" href={"/settings/" + authInfo.loggedInUser + "/" + data.database_name}><i className="fa fa-cog"></i></a> | ||
| <a className="blackLink" href={"/" + authInfo.loggedInUser + "/" + data.database_name}>{data.database_name}</a> | ||
| <span className="pull-right"> | ||
| <a href="#/" className="blackLink" onClick={() => setExpanded(!isExpanded)}><i className={isExpanded ? "fa fa-minus" : "fa fa-plus"}></i></a> | ||
| </span> | ||
| </h3> | ||
| </div> | ||
| {isExpanded ? (<> | ||
| <table className="table"> | ||
| <thead> | ||
| <tr><th>User</th><th>Permission</th></tr> | ||
| </thead> | ||
| <tbody> | ||
| {permissionRows} | ||
| </tbody> | ||
| </table> | ||
| </>) : null} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function SharedWithOthersPanelGroup({databases}) { | ||
| const databaseRows = databases === null ? null : databases.map(d => SharedWithOthersPanel({data: d})); | ||
|
|
||
| return (<> | ||
| <h3>Databases shared with others</h3> | ||
| {databaseRows ? databaseRows : (<h4><em>No databases shared with others yet</em></h4>)} | ||
| </>); | ||
| } | ||
|
|
||
| export default function ProfilePage() { | ||
| return (<> | ||
| <h2> | ||
| {authInfo.avatarUrl ? <img src={authInfo.avatarUrl} height="48" width="48" style={{border: "1px solid #8c8c8c"}} /> : null} Your page | ||
| </h2> | ||
| <div className="row"> | ||
| <div className="col-md-12"> | ||
| <a className="btn btn-success" href="/upload/" data-cy="uploadbtn">Upload database</a> | ||
| <a className="btn btn-primary" href="/x/gencert" role="button" data-cy="gencertbtn">Generate client certificate</a> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="col-md-6" data-cy="pubdbs"> | ||
| <DatabasePanelGroup title="Public standard databases" noDatabasesMessage="No public standard databases yet" databases={userData.publicDbs} username={authInfo.loggedInUser} /> | ||
| </div> | ||
| <div className="col-md-6" data-cy="privdbs"> | ||
| <DatabasePanelGroup title="Private standard databases" noDatabasesMessage="No private standard databases yet" databases={userData.privateDbs} username={authInfo.loggedInUser} /> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="col-md-6"> | ||
| <DatabasePanelGroup title="Public live databases" noDatabasesMessage="No public live databases yet" databases={userData.publicLiveDbs} username={authInfo.loggedInUser} /> | ||
| </div> | ||
| <div className="col-md-6"> | ||
| <DatabasePanelGroup title="Private live databases" noDatabasesMessage="No private live databases yet" databases={userData.privateLiveDbs} username={authInfo.loggedInUser} /> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="col-md-6" data-cy="stars"> | ||
| <WatchPanelGroup title="Databases you've starred" noDatabasesMessage="No starred databases yet" databases={userData.starredDbs} dateText="Starred" /> | ||
| </div> | ||
| <div className="col-md-6" data-cy="watches"> | ||
| <WatchPanelGroup title="Datebases you're watching" noDatabasesMessage="Not watching any databases yet" databases={userData.watchedDbs} dateText="Started watching" /> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="col-md-6" data-cy="sharedwithyou"> | ||
| <SharedWithYouPanelGroup databases={userData.sharedWithYouDbs} /> | ||
| </div> | ||
| <div className="col-md-6" data-cy="sharedwithothers"> | ||
| <SharedWithOthersPanelGroup databases={userData.sharedWithOthersDbs} /> | ||
| </div> | ||
| </div> | ||
| </>); | ||
| } |
Oops, something went wrong.
5c78e52There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is now live in production. So @chrisjlocke can do screenshots / video / etc of this stuff now. 😄
5c78e52There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmmm, just noticed what looks like a bug. Not sure if it's been hanging around for a while, or if it's a new thing though.
Working behaviour -> On this live visualisation page, when logged in the visualisation names in the drop down are correct. eg
ascending order, anddescending orderBroken behaviour -> Viewing that same page when logged out however, and the drop down visualisation list shows
defaultas selected (which doesn't exist), and won't allow choosing any of the saved visualisations.I'll try looking into it in a bit.
5c78e52There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahhh, found the problem. Was introduced in my commit the other day that hides the save/delete buttons for logged out users. 🤦
Now fixed, and added a Cypress test for it. 😉