Skip to content

Commit 7eebc45

Browse files
dblythydblythy
authored
fix: Title row disappears when scrolling down in data browser (#2690)
1 parent 8667918 commit 7eebc45

21 files changed

+248
-169
lines changed

‎src/components/AggregationPanel/AggregationPanel.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,20 @@ const AggregationPanel = ({
3838
}
3939
}, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
4040

41-
const isLoading = useMemo(() =>
42-
depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
43-
[depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
41+
const isLoading = useMemo(
42+
() => depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
43+
[depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
4444
);
4545

46-
const shouldShowAggregatedData = useMemo(() =>
47-
depth === 0
48-
? (selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0)
49-
: true,
50-
[depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
46+
const shouldShowAggregatedData = useMemo(
47+
() =>
48+
depth === 0
49+
? selectedObjectId &&
50+
showAggregatedData &&
51+
Object.keys(data).length !== 0 &&
52+
Object.keys(errorAggregatedData).length === 0
53+
: true,
54+
[depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
5155
);
5256

5357
const fetchNestedData = useCallback(async () => {
@@ -137,8 +141,13 @@ const AggregationPanel = ({
137141
if (depth > 0) {
138142
return (
139143
<div className={styles.nestedPanel}>
140-
<div className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`} onClick={handleToggle}>
141-
<span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>{panelTitle}</span>
144+
<div
145+
className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`}
146+
onClick={handleToggle}
147+
>
148+
<span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>
149+
{panelTitle}
150+
</span>
142151
<div>
143152
{isExpanded && (
144153
<button
@@ -148,9 +157,8 @@ const AggregationPanel = ({
148157
>
149158
<span>↻</span>
150159
</button>
151-
152160
)}
153-
<span >{isExpanded ? '▼' : '▲'}</span>
161+
<span>{isExpanded ? '▼' : '▲'}</span>
154162
</div>
155163
</div>
156164
{isExpanded && (
@@ -160,7 +168,8 @@ const AggregationPanel = ({
160168
<LoaderDots />
161169
</div>
162170
) : (
163-
nestedData && nestedData.panel.segments.map((segment, index) =>
171+
nestedData &&
172+
nestedData.panel.segments.map((segment, index) =>
164173
renderSegmentContent(segment, index)
165174
)
166175
)}
@@ -178,14 +187,10 @@ const AggregationPanel = ({
178187
</div>
179188
) : shouldShowAggregatedData ? (
180189
<div className={styles.mainContent}>
181-
{data.panel.segments.map((segment, index) =>
182-
renderSegmentContent(segment, index)
183-
)}
190+
{data.panel.segments.map((segment, index) => renderSegmentContent(segment, index))}
184191
</div>
185192
) : (
186-
<div className={styles.center}>
187-
No object selected.
188-
</div>
193+
<div className={styles.center}>No object selected.</div>
189194
)}
190195
</div>
191196
);

‎src/components/AggregationPanel/AggregationPanelComponents.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@ export const TextElement = ({ text }) => (
1212
export const KeyValueElement = ({ item, appName }) => (
1313
<div className={styles.keyValue}>
1414
{item.key}:
15-
{item.url ? <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
15+
{item.url ? (
16+
<a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank">
17+
{item.value}
18+
</a>
19+
) : (
20+
<span>{item.value}</span>
21+
)}
1622
</div>
1723
);
1824

@@ -80,10 +86,10 @@ export const ButtonElement = ({ item, showNote }) => {
8086
.then(response => response.json())
8187
.then(data => {
8288
const formattedData = JSON.stringify(data, null, 2);
83-
showNote(`${formattedData}`,false)
89+
showNote(`${formattedData}`, false);
8490
})
8591
.catch(error => {
86-
showNote(`${error}`,true)
92+
showNote(`${error}`, true);
8793
});
8894
};
8995

‎src/components/BrowserCell/BrowserCell.react.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -578,7 +578,7 @@ export default class BrowserCell extends Component {
578578
markRequiredFieldRow,
579579
handleCellClick,
580580
selectedCells,
581-
setShowAggregatedData
581+
setShowAggregatedData,
582582
} = this.props;
583583

584584
const classes = [...this.state.classes];

‎src/components/BrowserRow/BrowserRow.react.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default class BrowserRow extends Component {
7979
type="checkbox"
8080
checked={selection['*'] || selection[obj.id]}
8181
onChange={e => selectRow(obj.id, e.target.checked)}
82-
onMouseDown={(e) => onMouseDownRowCheckBox(e.target.checked)}
82+
onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
8383
/>
8484
</span>
8585
{order.map(({ name, width, visible }, j) => {

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default class DataBrowserHeaderBar extends React.Component {
2525
selected,
2626
isDataLoaded,
2727
setSelectedObjectId,
28-
setCurrent
28+
setCurrent,
2929
} = this.props;
3030
const elements = [
3131
<div key="check" className={[styles.wrap, styles.check].join(' ')}>
@@ -50,11 +50,11 @@ export default class DataBrowserHeaderBar extends React.Component {
5050
!preventSort &&
5151
(type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')
5252
) {
53-
onClick = () =>{
53+
onClick = () => {
5454
updateOrdering((order === 'descending' ? '' : '-') + name);
5555
setSelectedObjectId(null);
56-
setCurrent(null)
57-
}
56+
setCurrent(null);
57+
};
5858
}
5959

6060
let className = styles.wrap;
@@ -83,7 +83,7 @@ export default class DataBrowserHeaderBar extends React.Component {
8383
const finalStyle = {};
8484
if (headers.length % 2) {
8585
finalStyle.background = '#726F85';
86-
} else{
86+
} else {
8787
finalStyle.background = '#66637A';
8888
}
8989

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@import 'stylesheets/globals.scss';
99

1010
.bar {
11-
position: absolute;
11+
position: sticky;
12+
z-index: 10;
1213
top: 0;
1314
left: 0;
1415
height: 0;

‎src/components/Filter/Filter.react.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ function changeConstraint(schema, currentClassName, filters, index, newConstrain
6161
class: currentClassName,
6262
field: field,
6363
constraint: newConstraint,
64-
compareTo: (compareType && prevCompareTo) ? prevCompareTo : Filters.DefaultComparisons[compareType],
64+
compareTo:
65+
compareType && prevCompareTo ? prevCompareTo : Filters.DefaultComparisons[compareType],
6566
});
6667
return filters.set(index, newFilter);
6768
}
@@ -88,7 +89,7 @@ const Filter = ({
8889
const [compare, setCompare] = useState(false);
8990
const hasCompareTo = filters.some(filter => filter.get('compareTo') !== undefined);
9091

91-
if(compare !== hasCompareTo){
92+
if (compare !== hasCompareTo) {
9293
setCompare(hasCompareTo);
9394
}
9495
const currentApp = React.useContext(CurrentApp);
@@ -108,7 +109,7 @@ const Filter = ({
108109
gap: '10px',
109110
padding: '12px 15px 0px 15px',
110111
color: '#343445',
111-
'font-weight': '600'
112+
'font-weight': '600',
112113
}}
113114
>
114115
<div style={{ width: '140px' }}>Class</div>

‎src/components/Label/Label.react.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ const Label = props => {
1515
return (
1616
<div
1717
className={[styles.label, fieldStyles.centered].join(' ')}
18-
style={{ padding: '0 ' + padding, ...props.style }}>
18+
style={{ padding: '0 ' + padding, ...props.style }}
19+
>
1920
<div className={styles.text}>{props.text}</div>
2021
{props.description ? <div className={styles.description}>{props.description}</div> : null}
2122
</div>

‎src/components/Toolbar/Toolbar.react.js

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom
1515

1616
const POPOVER_CONTENT_ID = 'toolbarStatsPopover';
1717

18-
const Stats = ({ data, classwiseCloudFunctions, className, appId , appName}) => {
18+
const Stats = ({ data, classwiseCloudFunctions, className, appId, appName }) => {
1919
const [selected, setSelected] = React.useState(null);
2020
const [open, setOpen] = React.useState(false);
2121
const buttonRef = React.useRef();
@@ -98,7 +98,12 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId , appName}) =>
9898
setSelected(statsOptions[0]);
9999
}, []);
100100

101-
const rightMarginStyle = classwiseCloudFunctions && classwiseCloudFunctions[`${appId}${appName}`] && classwiseCloudFunctions[`${appId}${appName}`][className] ? '120px' : 'initial';
101+
const rightMarginStyle =
102+
classwiseCloudFunctions &&
103+
classwiseCloudFunctions[`${appId}${appName}`] &&
104+
classwiseCloudFunctions[`${appId}${appName}`][className]
105+
? '120px'
106+
: 'initial';
102107

103108
return (
104109
<>
@@ -140,22 +145,29 @@ const Toolbar = props => {
140145
</div>
141146
</div>
142147
</div>
143-
{props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} appId={props.appId} appName={props.appName}/> : null}
148+
{props?.selectedData?.length ? (
149+
<Stats
150+
data={props.selectedData}
151+
classwiseCloudFunctions={props.classwiseCloudFunctions}
152+
className={props.className}
153+
appId={props.appId}
154+
appName={props.appName}
155+
/>
156+
) : null}
144157
<div className={styles.actions}>{props.children}</div>
145-
{props.classwiseCloudFunctions && props.classwiseCloudFunctions[`${props.appId}${props.appName}`] && props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
146-
<button
147-
onClick={props.togglePanel}
148-
className={styles.btn}
149-
>
158+
{props.classwiseCloudFunctions &&
159+
props.classwiseCloudFunctions[`${props.appId}${props.appName}`] &&
160+
props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
161+
<button onClick={props.togglePanel} className={styles.btn}>
150162
{props.isPanelVisible ? (
151163
<>
152164
<Icon width={18} height={18} fill="#797592" name="x-outline" />
153-
Hide Panel
165+
Hide Panel
154166
</>
155167
) : (
156168
<>
157169
<Icon width={18} height={18} fill="#797592" name="left-outline" />
158-
Show Panel
170+
Show Panel
159171
</>
160172
)}
161173
</button>

‎src/dashboard/Dashboard.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,6 @@ export default class Dashboard extends React.Component {
180180
configLoadingState: AsyncStatus.FAILED,
181181
});
182182
});
183-
184183
}
185184

186185
render() {
@@ -216,14 +215,14 @@ export default class Dashboard extends React.Component {
216215

217216
const SettingsRoute = (
218217
<Route element={<SettingsData />}>
219-
<Route path='dashboard' element={<DashboardSettings />} />
220-
<Route path='security' element={<Security />} />
221-
<Route path='general' element={<GeneralSettings />} />
222-
<Route path='keys' element={<SecuritySettings />} />
223-
<Route path='users' element={<UsersSettings />} />
224-
<Route path='push' element={<PushSettings />} />
225-
<Route path='hosting' element={<HostingSettings />} />
226-
<Route index element={<Navigate replace to='dashboard' />} />
218+
<Route path="dashboard" element={<DashboardSettings />} />
219+
<Route path="security" element={<Security />} />
220+
<Route path="general" element={<GeneralSettings />} />
221+
<Route path="keys" element={<SecuritySettings />} />
222+
<Route path="users" element={<UsersSettings />} />
223+
<Route path="push" element={<PushSettings />} />
224+
<Route path="hosting" element={<HostingSettings />} />
225+
<Route index element={<Navigate replace to="dashboard" />} />
227226
</Route>
228227
);
229228

‎src/dashboard/DashboardView.react.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -195,16 +195,18 @@ export default class DashboardView extends React.Component {
195195
}
196196
*/
197197

198-
const settingsSections = [{
199-
name: 'Dashboard',
200-
link: '/settings/dashboard'
201-
}];
198+
const settingsSections = [
199+
{
200+
name: 'Dashboard',
201+
link: '/settings/dashboard',
202+
},
203+
];
202204

203205
if (this.context.enableSecurityChecks) {
204206
settingsSections.push({
205207
name: 'Security',
206208
link: '/settings/security',
207-
})
209+
});
208210
}
209211

210212
// Settings - nothing remotely like this in parse-server yet. Maybe it will arrive soon.

0 commit comments

Comments
 (0)