Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add data panel to display object related data fetched via Cloud Function #2584

Merged
merged 46 commits into from
Oct 6, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
0c4acab
initial commit for aggreation side panel
vardhan0604 Jul 20, 2024
16b8519
updates
vardhan0604 Jul 28, 2024
26bb6c8
Merge branch 'alpha' of https://github.com/parse-community/parse-dash…
vardhan0604 Jul 28, 2024
c32afca
Merge branch 'parse-community:alpha' into 2495
vardhan0604 Jul 28, 2024
4f92208
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Jul 28, 2024
152e22b
fix lint
vardhan0604 Jul 28, 2024
775f98e
fixed max resize constraint on the side panel
vardhan0604 Jul 28, 2024
59e01a8
fixed resize handler
vardhan0604 Jul 29, 2024
a093048
fixed resize handler bug
vardhan0604 Jul 29, 2024
7cc202c
fix side panel overflow
vardhan0604 Jul 29, 2024
9301db6
Merge branch 'alpha' into 2495
mtrezza Aug 11, 2024
082bdd5
Merge branch 'alpha' of https://github.com/parse-community/parse-dash…
vardhan0604 Aug 12, 2024
0889527
fixing issues
vardhan0604 Aug 15, 2024
b9ca3fc
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Aug 15, 2024
5d714aa
fixing linting issues
vardhan0604 Aug 15, 2024
1f6b36c
fixing get
vardhan0604 Aug 15, 2024
4ec1c68
removed unwanted changes
vardhan0604 Aug 15, 2024
b07bf28
update react-draggable and react-resizable version
vardhan0604 Aug 16, 2024
70b4353
fix issues
vardhan0604 Aug 24, 2024
26e4d95
add loading feature
vardhan0604 Aug 26, 2024
5c3bcee
Merge branch 'alpha' into 2495
mtrezza Sep 2, 2024
d153425
update
vardhan0604 Sep 3, 2024
34037b1
Merge branch 'alpha' of https://github.com/parse-community/parse-dash…
vardhan0604 Sep 3, 2024
4ba8c2f
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Sep 3, 2024
35fdbb7
update
vardhan0604 Sep 6, 2024
20e4135
Update src/dashboard/Data/Browser/Browser.react.js
vardhan0604 Sep 7, 2024
8c4e68f
fixed issues
vardhan0604 Sep 11, 2024
081434d
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Sep 11, 2024
2322b5d
Merge branch 'alpha' into 2495
mtrezza Sep 15, 2024
1bd146f
fixed bugs
vardhan0604 Sep 18, 2024
1d4dcd2
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Sep 18, 2024
13e8e26
fix lint
vardhan0604 Sep 18, 2024
bde2c47
Fixed all required bugs
vardhan0604 Sep 23, 2024
f7fe82b
fix lint
vardhan0604 Sep 23, 2024
3d87049
Merge branch 'alpha' into 2495
mtrezza Sep 26, 2024
db8eff2
shorten panel text
mtrezza Oct 4, 2024
5a614bd
add panel shadow
mtrezza Oct 4, 2024
ac64604
soften panel shadow
mtrezza Oct 4, 2024
9bd827e
minor style adjustments
mtrezza Oct 4, 2024
a498be9
add background color
mtrezza Oct 4, 2024
87881d5
prevent sidebar selection
mtrezza Oct 4, 2024
f6f8990
min panel width 100
mtrezza Oct 4, 2024
ffc683b
button style
mtrezza Oct 4, 2024
e91ea1b
Merge branch 'alpha' of https://github.com/parse-community/parse-dash…
vardhan0604 Oct 5, 2024
28d6349
fix reorder bug
vardhan0604 Oct 5, 2024
32967a9
Merge branch '2495' of https://github.com/vardhan0604/parse-dashboard…
vardhan0604 Oct 5, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fixed bugs
  • Loading branch information
vardhan0604 committed Sep 18, 2024
commit 1bd146f55ca7473f31376e75cfb637995b78ad64
24 changes: 20 additions & 4 deletions src/components/AggregationPanel/AggregationPanel.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useMemo } from 'react';
import LoaderDots from 'components/LoaderDots/LoaderDots.react';
import {
TextElement,
Expand All @@ -21,13 +21,30 @@ const AggregationPanel = ({
setSelectedObjectId,
selectedObjectId
}) => {

useEffect(() => {
if (Object.keys(errorAggregatedData).length !== 0) {
setSelectedObjectId(null);
setErrorAggregatedData({});
}
}, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);

const isLoading = useMemo(() =>
selectedObjectId && isLoadingCloudFunction && showAggregatedData,
[selectedObjectId, isLoadingCloudFunction, showAggregatedData]
);

const shouldShowAggregatedData = useMemo(() =>
selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0, [selectedObjectId, showAggregatedData, data, errorAggregatedData]
);

return (
<>
{selectedObjectId && isLoadingCloudFunction && showAggregatedData ? (
{isLoading ? (
<div className={styles.center}>
<LoaderDots />
</div>
) : selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0 ? (
) : shouldShowAggregatedData ? (
data.panel.segments.map((segment, index) => (
<div key={index}>
<h2 className={styles.heading}>{segment.title}</h2>
Expand Down Expand Up @@ -58,7 +75,6 @@ const AggregationPanel = ({
) : (
<div className={styles.loading}>
No object selected. Select an object to see aggregated data.
{Object.keys(errorAggregatedData).length !== 0 && setSelectedObjectId(null) && setErrorAggregatedData({})}
</div>
)}
</>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Toolbar/Toolbar.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const Toolbar = props => {
</div>
</div>
</div>
{props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className = {props.className} /> : null}
{props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} /> : null}
<div className={styles.actions}>{props.children}</div>
{props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && (
<button
Expand Down
13 changes: 0 additions & 13 deletions src/dashboard/Data/Browser/Browser.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,10 @@ class Browser extends DashboardView {

classes: {},
allClassesSchema: {},

configData: {},
classwiseCloudFunctions: {},

AggregationPanelData: {},
isLoading: false,
showAggregatedData: true,
errorAggregatedData: {},
};

Expand All @@ -132,7 +129,6 @@ class Browser extends DashboardView {
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.setLoading = this.setLoading.bind(this);
this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
this.setErrorAggregatedData = this.setErrorAggregatedData.bind(this);
this.toggleMasterKeyUsage = this.toggleMasterKeyUsage.bind(this);
this.showAttachRowsDialog = this.showAttachRowsDialog.bind(this);
Expand Down Expand Up @@ -270,12 +266,6 @@ class Browser extends DashboardView {
});
}

setShowAggregatedData(bool) {
this.setState({
showAggregatedData: bool,
});
}

fetchAggregationPanelData(objectId, className) {
this.setState({
isLoading: true,
Expand Down Expand Up @@ -337,7 +327,6 @@ class Browser extends DashboardView {

classAndCloudFuntionMap(data) {
const classMap = {};

data.apps.forEach(app => {
app.infoPanel.forEach(panel => {
panel.classes.forEach(className => {
Expand Down Expand Up @@ -2072,8 +2061,6 @@ class Browser extends DashboardView {
setLoading={this.setLoading}
AggregationPanelData={this.state.AggregationPanelData}
setAggregationPanelData={this.setAggregationPanelData}
showAggregatedData={this.state.showAggregatedData}
setShowAggregatedData={this.setShowAggregatedData}
setErrorAggregatedData={this.setErrorAggregatedData}
errorAggregatedData={this.state.errorAggregatedData}
/>
Expand Down
13 changes: 3 additions & 10 deletions src/dashboard/Data/Browser/BrowserTable.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -518,10 +518,7 @@ export default class BrowserTable extends React.Component {

if (this.props.newObject || this.props.data.length > 0) {
table = (
<div
className={styles.table}
ref={this.tableRef}
>
<div className={styles.table} ref={this.tableRef}>
<div style={{ height: Math.max(0, this.state.offset * ROW_HEIGHT) }} />
{editCloneRows}
{newRow}
Expand All @@ -540,10 +537,7 @@ export default class BrowserTable extends React.Component {
);
} else {
table = (
<div
className={styles.table}
ref={this.tableRef}
>
<div className={styles.table} ref={this.tableRef}>
<div className={styles.empty}>
{this.props.relation ? (
<EmptyState
Expand Down Expand Up @@ -580,7 +574,7 @@ export default class BrowserTable extends React.Component {
'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
}}
>
<div >
<div>
<DataBrowserHeaderBar
selected={
!!this.props.selection &&
Expand All @@ -600,7 +594,6 @@ export default class BrowserTable extends React.Component {
preventSchemaEdits={this.context.preventSchemaEdits}
isDataLoaded={!!this.props.data}
/>

{table}
</div>
</div>
Expand Down
40 changes: 29 additions & 11 deletions src/dashboard/Data/Browser/DataBrowser.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default class DataBrowser extends React.Component {
panelWidth: 400,
isResizing: false,
maxWidth: window.innerWidth - 300,
showAggregatedData: true,
};

this.handleResizeDiv = this.handleResizeDiv.bind(this);
Expand All @@ -61,6 +62,7 @@ export default class DataBrowser extends React.Component {
this.setCurrent = this.setCurrent.bind(this);
this.setEditing = this.setEditing.bind(this);
this.handleColumnsOrder = this.handleColumnsOrder.bind(this);
this.setShowAggregatedData = this.setShowAggregatedData.bind(this);
this.setCopyableValue = this.setCopyableValue.bind(this);
this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
this.setContextMenu = this.setContextMenu.bind(this);
Expand Down Expand Up @@ -129,10 +131,14 @@ export default class DataBrowser extends React.Component {
this.state.selectedObjectId !== undefined &&
prevState.selectedObjectId !== undefined
) {
this.setState({ selectedObjectId: undefined });
this.setState({
selectedObjectId: undefined,
showAggregatedData: false
});
this.props.setAggregationPanelData({});
this.props.setShowAggregatedData(false);
this.props.setErrorAggregatedData({});
if(this.props.errorAggregatedData != {}){
this.props.setErrorAggregatedData({});
}
}
}

Expand All @@ -151,6 +157,12 @@ export default class DataBrowser extends React.Component {
this.setState({ panelWidth: size.width });
}

setShowAggregatedData(bool) {
this.setState({
showAggregatedData: bool,
});
}

updateMaxWidth = () => {
const SidePanelWidth = 300;
this.setState({ maxWidth: window.innerWidth - SidePanelWidth });
Expand All @@ -177,11 +189,15 @@ export default class DataBrowser extends React.Component {
if (!this.state.isPanelVisible) {
this.props.setAggregationPanelData({});
this.props.setLoading(false);
this.props.setErrorAggregatedData({});
if(this.props.errorAggregatedData != {}){
this.props.setErrorAggregatedData({});
}
}

if (!this.state.isPanelVisible && this.state.selectedObjectId) {
this.props.setErrorAggregatedData({});
if(this.props.errorAggregatedData != {}){
this.props.setErrorAggregatedData({});
}
this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
}
}
Expand Down Expand Up @@ -213,7 +229,9 @@ export default class DataBrowser extends React.Component {
selectedObjectId: undefined,
});
this.props.setAggregationPanelData({});
this.props.setErrorAggregatedData({});
if(this.props.errorAggregatedData != {}){
this.props.setErrorAggregatedData({});
}
}
}

Expand Down Expand Up @@ -342,9 +360,9 @@ export default class DataBrowser extends React.Component {
},
});
this.setState({
selectedObjectId:this.props.data[this.state.current.row].id
selectedObjectId:this.props.data[this.state.current.row].id,
showAggregatedData:true
})
this.props.setShowAggregatedData(true)
if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
}
Expand Down Expand Up @@ -384,8 +402,8 @@ export default class DataBrowser extends React.Component {

this.setState({
selectedObjectId: this.props.data[this.state.current.row].id,
showAggregatedData: true,
});
this.props.setShowAggregatedData(true);
if (prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible) {
this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
}
Expand Down Expand Up @@ -565,7 +583,7 @@ export default class DataBrowser extends React.Component {
isPanelVisible={this.state.isPanelVisible}
panelWidth={this.state.panelWidth}
isResizing={this.state.isResizing}
setShowAggregatedData={this.props.setShowAggregatedData}
setShowAggregatedData={this.setShowAggregatedData}
firstSelectedCell={this.state.firstSelectedCell}
{...other}
/>
Expand All @@ -585,7 +603,7 @@ export default class DataBrowser extends React.Component {
<AggregationPanel
data={this.props.AggregationPanelData}
isLoadingCloudFunction={this.props.isLoadingCloudFunction}
showAggregatedData={this.props.showAggregatedData}
showAggregatedData={this.state.showAggregatedData}
errorAggregatedData={this.props.errorAggregatedData}
showNote={this.props.showNote}
setErrorAggregatedData={this.props.setErrorAggregatedData}
Expand Down